:root{
  --purple: #8177F0;
  --green:  #7CD17B;
  --red:    #FF7E70;
  --gray:   #757575;
  --yellow: #FFC64B;
  --yellow-btn-text: #59564B;
  --blue:   #4FC0E6;
  --bg: #ffffff;
  --text: #333;
  --trust-dark: #0f1628;
  --trust-blue: #1e3a5f;
  --shield-gold: #FFD700;
  --safe-green: #10B981;
  --danger-red: #EF4444;
  --warning-orange: #F59E0B;
  --radius-card: 16px;
  --radius-btn: 12px;
  --shadow-card: 0 2px 12px rgba(0,0,0,.06);
  --shadow-btn: 0 2px 8px rgba(0,0,0,.08);
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  padding-bottom:env(safe-area-inset-bottom);
}

/* GriGsi top bar (shared on all pages) */
.grigsi-top-bar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:6px 10px;
  padding:6px 14px;
  padding-top:max(6px, env(safe-area-inset-top));
  margin:0;
  background:#fff;
  border-bottom:1px solid #eee;
}
.grigsi-top-bar-spacer{height:54px;min-height:54px}
@media (min-width:600px){.grigsi-top-bar-spacer{height:50px;min-height:50px}}
.grigsi-top-bar .logo{font-size:30px;font-weight:700;color:var(--purple);text-decoration:none;flex-shrink:0;white-space:nowrap;line-height:1.2}
.grigsi-top-bar .nav-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;justify-content:flex-end}
.grigsi-top-bar .btn-nav{
  display:inline-block;
  padding:4px 7px;
  background:var(--green);
  color:#333;
  font-weight:700;
  font-size:0.7rem;
  text-decoration:none;
  border-radius:6px;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.grigsi-top-bar .btn-nav:hover{background:var(--yellow);color:#333}
.grigsi-top-bar .btn-nav:active,.grigsi-top-bar .btn-nav:focus{background:var(--yellow);color:#fff}
.grigsi-top-bar .coming-label{font-size:0.65rem;color:#666;margin:0 2px 0 4px;font-weight:700}

a{color:inherit;text-decoration:none}
section{padding:80px 24px}
.container{max-width:900px;margin:0 auto;text-align:center}

/* Fixed Navigation */
.main-nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:var(--shadow-card);
  padding:8px 16px;
  padding-top:max(8px, env(safe-area-inset-top));
  border-bottom:1px solid rgba(0,0,0,.06);
  overflow:visible;
}
.nav-container{
  max-width:100%;
  margin:0 auto;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  overflow:visible;
}
.nav-logo{
  font-size:1.5rem;
  font-weight:700;
  color:var(--purple);
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  transition:color .2s;
}
.nav-logo:hover{
  color:var(--yellow);
}
.nav-logo i{
  color:var(--shield-gold);
}
.nav-links{
  list-style:none;
  display:flex;
  gap:4px;
  flex-wrap:nowrap;
  justify-content:flex-end;
  align-items:center;
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  padding:4px 2px 8px 2px;
  flex:1;
  min-width:0;
}
.nav-links li{flex-shrink:0}
.nav-links a{
  color:var(--gray);
  font-weight:500;
  transition:color .2s;
}
.nav-links a:hover{color:var(--purple)}
.nav-cta{
  background:var(--green);
  color:#333 !important;
  padding:4px 10px;
  border-radius:var(--radius-btn);
  transition:all .25s ease;
  font-size:0.78rem;
  white-space:nowrap;
  font-weight:600;
  box-shadow:var(--shadow-btn);
}
.nav-cta:hover{
  background:var(--yellow);
  color:#333 !important;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(255,198,75,.35);
}
.main-nav .nav-cta:focus,
.main-nav .nav-cta:focus-visible,
.main-nav .nav-logo:focus,
.main-nav .nav-logo:focus-visible,
.main-nav .nav-in-progress-label:focus{
  outline:none !important;
  box-shadow:none !important;
}
.nav-cta:focus,
.nav-cta:focus-visible{
  background:var(--yellow);
  color:#fff !important;
}
.nav-cta:hover:focus,
.nav-cta:hover:focus-visible,
.nav-cta.nav-highlight:hover:focus,
.nav-cta.nav-highlight:hover:focus-visible{
  background:var(--yellow);
  color:#fff !important;
}
.nav-single-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex:1;
  min-width:0;
}
.nav-rows{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:6px;
  flex:1;
  min-width:0;
}
.nav-row-1{ margin:0; }
.nav-row-2{ margin:0; }
.nav-in-progress-label{
  font-size:0.78rem;
  color:var(--gray);
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:4px 10px;
  margin-left:12px;
  list-style:none;
  flex-shrink:0;
  line-height:1.4;
  display:inline-flex;
  align-items:center;
  border-radius:var(--radius-btn);
}
.nav-in-progress-label:focus{
  outline:none;
  box-shadow:none;
  background:#555;
  color:#fff;
}
.nav-disabled{
  background:#e8e8e8 !important;
  color:#888 !important;
}
.nav-disabled:hover{
  background:#ddd !important;
  color:#666 !important;
}
.nav-disabled:focus,
.nav-disabled:focus-visible{
  outline:none;
  background:#555 !important;
  color:#fff !important;
}
.nav-disabled:hover:focus,
.nav-disabled:hover:focus-visible{
  background:#555 !important;
  color:#fff !important;
}
.nav-highlight{
  background:var(--green) !important;
  color:#333 !important;
}
.nav-highlight:hover{
  background:var(--yellow) !important;
  color:#333 !important;
}
.nav-highlight:focus,
.nav-highlight:focus-visible{
  background:var(--yellow) !important;
  color:#fff !important;
}

/* Same width for all sections */
.container-same-width{max-width:900px;margin-left:auto;margin-right:auto}

/* About — larger section, includes Features as subsection */
.section-about-standalone{
  padding:48px 24px;
  background:#fafafa;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.section-about-standalone .container{
  max-width:900px;
  margin:0 auto;
  text-align:center;
}
.section-about-standalone .about-card{
  max-width:100%;
  background:#fff;
  padding:32px 28px;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  margin-bottom:24px;
}
.about-card-centered,
.about-card-centered p{
  text-align:center;
}
.about-card-centered .about-lead{max-width:560px;margin-left:auto;margin-right:auto}
.about-features-subsection{
  text-align:center;
  padding:28px 24px;
  margin:0;
}
.about-features-subsection h2{margin-bottom:12px}

/* Front page sections — one per row, all centered, same width */
.front-sections-grid{
  display:flex;
  flex-direction:column;
  gap:20px;
  max-width:900px;
  margin:0 auto;
  padding:24px 24px 40px;
}

.front-section-card{
  padding:0 !important;
  min-height:0;
  background:#fff;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  border:1px solid rgba(0,0,0,.06);
  overflow:visible;
  position:relative;
}
/* In progress · Coming soon label (top-left of section) */
.in-progress-badge{
  position:absolute;
  top:12px;
  left:20px;
  padding:6px 12px;
  background:rgba(129,119,240,.12);
  color:var(--purple);
  border-radius:16px;
  font-size:.8rem;
  font-weight:600;
}
.front-section-card .container{
  max-width:100%;
  padding:28px 24px;
  text-align:center;
}
.front-section-card .feature-block{
  margin-bottom:0;
  text-align:center;
  display:block;
}
.front-section-card .feature-block .feature-icon-large{
  margin-left:auto;
  margin-right:auto;
  font-size:2rem;
  opacity:.9;
}
.front-section-card .feature-block h2,
.front-section-card .feature-block > p{
  text-align:center;
}
.front-section-card .feature-input-wrap,
.front-section-card .feature-block .feature-actions,
.front-section-card .feature-block .feature-result,
.front-section-card .feature-block .browser-downloads,
.front-section-card .feature-block .spaces-actions,
.front-section-card .feature-block > div[style*="display: flex"]{
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
}
.front-section-card .about-card{ margin-bottom:0 }

/* Hero logo */
.hero-logo{
  width:120px;
  height:auto;
  margin-bottom:20px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.15));
}

/* Styled tagline */
.tagline-styled{
  font-size:1.15rem;
  font-weight:500;
}
.tag-green{
  color:#fff;
  font-weight:600;
}
.tag-red{
  color:#fff;
  font-weight:600;
}

/* Header — green background */
header{
  margin-top:60px;
  background:#7CD17B;
  color:#fff;
  padding:56px 24px;
  text-align:center;
  box-shadow:0 4px 20px rgba(124,209,123,.25);
}
header h1{font-size:2.75rem;font-weight:700;margin-bottom:10px;letter-spacing:-0.02em}
header p{opacity:.95;font-size:1.15rem;font-weight:500}

/* Hero Section - iPhone Style */
.hero{
  margin-top:58px;
  background:linear-gradient(180deg, var(--purple) 0%, #6366f1 100%);
  color:#fff;
  padding:100px 24px 80px;
  text-align:center;
  position:relative;
}
.hero.hero-compact{
  padding-top:20px;
  padding-right:24px;
  padding-bottom:28px;
  padding-left:24px;
  border-radius:0 0 var(--radius-card) var(--radius-card);
}
.hero .container{position:relative;z-index:1}
.hero-title{
  font-size:2.8rem;
  font-weight:700;
  margin-bottom:20px;
  letter-spacing:-0.02em;
}
.hero-two-cols{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:20px 58px;
  max-width:600px;
  margin:0 auto;
}
.hero-col{
  flex:1;
  min-width:200px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-title-single{
  font-size:2.8rem;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.2;
  margin:0 0 20px 0;
  text-align:center;
}
.hero-buttons-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}
.hero-subtitle-bottom{
  text-align:center;
  font-size:0.95rem;
  opacity:0.92;
  margin:20px 0 0 0;
  max-width:420px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.5;
}
.btn-hero-under{
  padding:10px 18px;
  font-size:0.95rem;
  font-weight:600;
  border-radius:var(--radius-btn);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
  display:inline-block;
}
.btn-hero-under:hover{transform:translateY(-2px);}
.btn-hero-yellow{
  background:var(--yellow);
  color:var(--yellow-btn-text);
  border:none;
  box-shadow:var(--shadow-btn);
}
.btn-hero-yellow:hover{box-shadow:0 4px 12px rgba(255,198,75,.4);}
.btn-hero-green{
  background:var(--green);
  color:#fff;
  border:none;
  box-shadow:var(--shadow-btn);
}
.btn-hero-green:hover{box-shadow:0 4px 12px rgba(124,209,123,.4);}
.hero-subtitle{
  font-size:1.15rem;
  opacity:.9;
  max-width:500px;
  margin:0 auto 40px;
  font-weight:400;
  line-height:1.7;
}
.hero-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}
.btn-large{
  padding:16px 32px;
  font-size:1rem;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.btn-primary{
  background:var(--yellow);
  color:var(--yellow-btn-text);
  border-radius:var(--radius-btn);
  font-weight:600;
  box-shadow:var(--shadow-btn);
  transition:all .25s ease;
  border:none;
}
.btn-primary:hover{
  background:var(--green);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(124,209,123,.35);
}
.btn-secondary{
  background:rgba(255,255,255,.18);
  color:#fff;
  border:1.5px solid rgba(255,255,255,.3);
  border-radius:14px;
  font-weight:600;
  backdrop-filter:blur(8px);
  transition:all .2s ease;
}
.btn-secondary:hover{
  background:rgba(255,255,255,.28);
  border-color:rgba(255,255,255,.5);
  transform:translateY(-2px);
}
.hero-features{
  display:flex;
  gap:40px;
  justify-content:center;
  flex-wrap:wrap;
}
.hero-feature{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1rem;
  opacity:.9;
}
.hero-feature i{
  font-size:1.2rem;
  opacity:.8;
}

/* Sections */
.section-light{background:#fff}
.section-dark{background:#1a1a2e;color:#fff}
.section-accent{background:linear-gradient(135deg, var(--green) 0%, #5cb85c 100%);color:#fff}
.section-title{
  font-size:2rem;
  font-weight:700;
  color:var(--purple);
  margin-bottom:12px;
  display:block;
  border:none;
  padding:0;
}
.section-title.light{color:#fff}
.section-subtitle{
  color:var(--gray);
  font-size:1.1rem;
  max-width:600px;
  margin:0 auto 48px;
}
.section-subtitle.light{color:rgba(255,255,255,.85)}
.section-layer-title{
  font-size:1.6rem;
  font-weight:700;
  color:var(--purple);
  margin-bottom:8px;
  display:block;
}
.section-layer-desc{
  font-size:1rem;
  color:#555;
  max-width:640px;
  margin:0 auto;
  line-height:1.5;
}

/* Space Demo */
.space-demo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  text-align:left;
}
.space-window{
  background:#1a1a2e;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.15);
}
.space-header{
  background:#252541;
  padding:16px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.space-code{
  font-family:monospace;
  font-size:.95rem;
  color:var(--green);
  font-weight:600;
}
.space-status{
  font-size:.85rem;
  color:rgba(255,255,255,.7);
}
.space-tabs{
  display:flex;
  background:#1f1f35;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.space-tabs .tab{
  padding:12px 20px;
  color:rgba(255,255,255,.5);
  font-size:.9rem;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  transition:all .2s;
}
.space-tabs .tab.active{
  color:#fff;
  background:#1a1a2e;
  border-bottom:2px solid var(--green);
}
.space-content{
  padding:20px;
  min-height:200px;
}
.chat-preview{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.chat-msg{
  padding:10px 14px;
  border-radius:12px;
  font-size:.9rem;
  max-width:80%;
}
.chat-msg.received{
  background:#252541;
  color:#fff;
  align-self:flex-start;
}
.chat-msg.sent{
  background:var(--green);
  color:#fff;
  align-self:flex-end;
}
.chat-msg.system{
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.7);
  align-self:center;
  font-size:.85rem;
}
.space-features{display:flex;flex-direction:column;gap:24px}
.space-feature{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.space-feature .feature-icon{
  width:48px;
  height:48px;
  background:linear-gradient(135deg, var(--purple) 0%, #6366f1 100%);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.space-feature .feature-icon i{
  font-size:1.2rem;
  color:#fff;
}
.space-feature .feature-content h3{
  color:var(--purple);
  font-size:1.1rem;
  margin-bottom:4px;
}
.space-feature .feature-content p{
  color:var(--gray);
  font-size:.95rem;
  margin:0;
}

/* Space Types Grid */
.space-types-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  max-width:1000px;
  margin:0 auto;
}
.space-type-card{
  background:#fff;
  border-radius:16px;
  padding:32px 28px;
  text-align:center;
  position:relative;
  transition:all .25s;
  border:2px solid transparent;
}
.space-type-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.15);
}
.space-type-card.featured{
  border-color:var(--green);
  transform:scale(1.02);
}
.space-type-card.featured:hover{
  transform:scale(1.02) translateY(-4px);
}
.type-badge{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  background:var(--green);
  color:#fff;
  padding:6px 16px;
  border-radius:20px;
  font-size:.8rem;
  font-weight:600;
}
.type-icon{
  width:64px;
  height:64px;
  background:linear-gradient(135deg, var(--purple) 0%, #6366f1 100%);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
}
.type-icon i{
  font-size:1.8rem;
  color:#fff;
}
.space-type-card h3{
  color:#1a1a2e;
  font-size:1.3rem;
  margin-bottom:12px;
}
.type-desc{
  color:var(--gray);
  font-size:.95rem;
  margin-bottom:20px;
  min-height:60px;
}
.type-features{
  list-style:none;
  text-align:left;
  margin-bottom:20px;
}
.type-features li{
  padding:8px 0;
  color:var(--text);
  font-size:.9rem;
  display:flex;
  align-items:center;
  gap:10px;
}
.type-features li i{
  color:var(--green);
  font-size:.85rem;
}
.type-price{
  display:block;
  font-size:1.4rem;
  font-weight:700;
  color:var(--purple);
  margin-bottom:16px;
}
.btn-outline{
  background:transparent;
  color:var(--purple);
  border:2px solid var(--purple);
  padding:10px 24px;
  border-radius:10px;
  font-weight:600;
  transition:all .2s;
  display:inline-block;
}
.btn-outline:hover{
  background:var(--purple);
  color:#fff;
}

/* Trust Section */
.trust-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  text-align:left;
}
.browser-mockup{
  background:#f5f5f7;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.1);
}
.browser-bar{
  background:#e8e8eb;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:10px;
}
.browser-bar .dot{
  width:12px;
  height:12px;
  background:#ccc;
  border-radius:50%;
}
.browser-bar .url{
  flex:1;
  background:#fff;
  padding:6px 12px;
  border-radius:6px;
  font-size:.85rem;
  color:var(--red);
  font-family:monospace;
}
.browser-bar .trust-badge{
  padding:4px 10px;
  border-radius:6px;
  font-size:.75rem;
  font-weight:600;
}
.browser-bar .trust-badge.danger{
  background:var(--red);
  color:#fff;
}
.browser-content{
  padding:24px;
  background:#fff;
}
.trust-popup{
  background:#fff;
  border:2px solid var(--purple);
  border-radius:12px;
  padding:20px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);
}
.popup-header{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--purple);
  font-weight:600;
  margin-bottom:12px;
}
.popup-domain{
  font-family:monospace;
  font-size:1.1rem;
  color:var(--text);
  margin-bottom:12px;
}
.popup-warning{
  background:rgba(255,126,112,.1);
  color:var(--red);
  padding:10px 14px;
  border-radius:8px;
  font-size:.9rem;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.popup-similar{
  font-size:.9rem;
  color:var(--gray);
  margin-bottom:16px;
}
.popup-similar strong{
  color:var(--green);
}
.popup-score{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.score-label{
  font-size:.9rem;
  color:var(--gray);
}
.score-value{
  font-size:1.3rem;
  font-weight:700;
}
.score-value.danger{color:var(--red)}
.score-value.safe{color:var(--green)}
.popup-votes{
  display:flex;
  gap:16px;
}
.popup-votes .vote{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.9rem;
}
.popup-votes .vote.up{color:var(--green)}
.popup-votes .vote.down{color:var(--red)}
.trust-info h3{
  color:var(--purple);
  font-size:1.5rem;
  margin-bottom:24px;
}
.trust-steps{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-bottom:32px;
}
.trust-step{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.step-num{
  width:36px;
  height:36px;
  background:var(--purple);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  flex-shrink:0;
}
.step-content h4{
  color:var(--text);
  margin-bottom:4px;
}
.step-content p{
  color:var(--gray);
  font-size:.9rem;
  margin:0;
}
.privacy-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--gray);
  font-size:.9rem;
  margin-top:12px;
  transition:color .2s;
}
.privacy-link:hover{color:var(--purple)}

/* Organization Features */
.org-features{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  margin-bottom:48px;
}
.org-feature{
  text-align:center;
  padding:24px;
}
.org-feature i{
  font-size:2.5rem;
  margin-bottom:16px;
  opacity:.9;
}
.org-feature h3{
  font-size:1.1rem;
  margin-bottom:8px;
}
.org-feature p{
  font-size:.9rem;
  opacity:.8;
}
.org-cta{
  text-align:center;
}
.btn-light{
  background:#fff;
  color:var(--green);
  border-radius:12px;
  font-weight:700;
  transition:all .25s;
}
.btn-light:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 30px rgba(0,0,0,.15);
}

/* About Section */
.about-content{
  max-width:700px;
  margin:0 auto;
  text-align:left;
}
.about-content p{
  margin-bottom:16px;
  line-height:1.8;
  color:var(--gray);
}
.about-content .lead-text{
  font-size:1.15rem;
  color:var(--text);
  margin-bottom:24px;
}

/* Contact Grid */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:48px;
  align-items:start;
  text-align:left;
}
.contact-info h2{
  color:#fff;
  font-size:2rem;
  margin-bottom:16px;
  border:none;
}
.contact-info p{
  color:rgba(255,255,255,.8);
  margin-bottom:24px;
}
.contact-methods{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.contact-method{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
}
.contact-method i{
  font-size:1.2rem;
  color:var(--green);
}
.contact-form-wrap{
  background:rgba(255,255,255,.05);
  border-radius:16px;
  padding:32px;
  backdrop-filter:blur(10px);
}
.form-group{
  margin-bottom:20px;
}
.form-group label{
  display:block;
  color:rgba(255,255,255,.9);
  font-weight:500;
  margin-bottom:8px;
}
.form-group .required{color:var(--red)}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:12px 16px;
  background:rgba(255,255,255,.1);
  border:2px solid rgba(255,255,255,.2);
  border-radius:10px;
  color:#fff;
  font-size:1rem;
  font-family:inherit;
  transition:all .2s;
}
.form-group input::placeholder,
.form-group textarea::placeholder{
  color:rgba(255,255,255,.5);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--green);
  background:rgba(255,255,255,.15);
}
.form-group select option{
  background:#1a1a2e;
  color:#fff;
}

/* Footer updates */
.footer-brand{
  margin-bottom:20px;
}
.footer-logo{
  font-size:1.8rem;
  font-weight:700;
  color:var(--purple);
}
.footer-brand p{
  color:var(--gray);
  margin-top:4px;
}
.footer-copy{
  margin-top:24px;
  font-size:.9rem;
}

/* Section titles — yellow underline */
.section h2, .product-section h2,
.front-section-card h2, .about-card h2, .about-features-subsection h2{
  font-size:1.75rem;
  color:var(--purple);
  margin-bottom:24px;
  padding-bottom:12px;
  border-bottom:3px solid var(--yellow);
  display:inline-block;
}
.section h2 .beta, .product-section h2 .beta{color:var(--red);font-size:.85em;font-weight:600}

/* Lead text & tips */
.lead-text{color:var(--gray);max-width:680px;margin:0 auto 18px;line-height:1.8}

/* Features grid */
.features-grid{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:32px;
  justify-content:center;
}
.feature-item{
  flex:1 1 240px;
  max-width:280px;
  padding:28px 24px;
  background:#fff;
  border-radius:14px;
  border:2px solid rgba(129,119,240,.1);
  transition:all .25s ease;
}
.feature-item:hover{
  border-color:var(--purple);
  box-shadow:0 8px 24px rgba(129,119,240,.12);
  transform:translateY(-4px);
}
.feature-item i{
  font-size:2rem;
  color:var(--purple);
  margin-bottom:14px;
}
.feature-item h3{
  color:var(--purple);
  font-size:1.1rem;
  margin-bottom:10px;
}
.feature-item p{
  color:var(--gray);
  font-size:.9rem;
  line-height:1.6;
}
.tip{
  font-size:.9rem;
  color:var(--text);
  background:linear-gradient(135deg, rgba(255,198,75,.12) 0%, rgba(127,209,123,.08) 100%);
  padding:14px 20px;
  border-radius:10px;
  margin:20px auto;
  max-width:600px;
  border-left:4px solid var(--yellow);
}

/* Services grid */
.services-grid{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:32px;
  justify-content:center;
}
.service-card{
  flex:1 1 300px;
  max-width:360px;
  padding:32px 28px;
  background:#fff;
  border-radius:16px;
  border:2px solid rgba(129,119,240,.15);
  text-align:left;
  transition:all .25s ease;
  box-shadow:0 4px 16px rgba(0,0,0,.04);
}
.service-card:hover{
  border-color:var(--green);
  box-shadow:0 12px 32px rgba(124,209,123,.15);
  transform:translateY(-4px);
}
.service-icon{
  width:56px;
  height:56px;
  background:linear-gradient(135deg, var(--green) 0%, #5cb85c 100%);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
}
.service-icon i{
  font-size:1.5rem;
  color:#fff;
}
.service-card h3{
  color:var(--purple);
  font-size:1.2rem;
  margin-bottom:12px;
}
.service-card p{
  color:var(--gray);
  font-size:.95rem;
  line-height:1.6;
  margin-bottom:8px;
}
.browser-downloads{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.btn-browser{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  background:#fff;
  color:var(--text);
  border-radius:12px;
  font-size:.85rem;
  font-weight:500;
  border:1.5px solid rgba(0,0,0,.08);
  transition:all .2s ease;
}
.btn-browser:hover{
  border-color:var(--purple);
  color:var(--purple);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(129,119,240,.12);
}
.btn-browser i{
  font-size:1rem;
}

/* Product sections — alternating subtle backgrounds */
.product-section{
  background:linear-gradient(180deg, #f8f9ff 0%, #fff 100%);
  border-top:1px solid rgba(129,119,240,.1);
}

/* GriGsi Community — browser cards */
.lc-grid{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:28px;
  justify-content:center;
}
.lc-item{
  flex:1 1 160px;
  max-width:200px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:28px 20px;
  background:#fff;
  border:2px solid rgba(129,119,240,.15);
  border-radius:14px;
  transition:all .25s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.lc-item:hover{
  box-shadow:0 12px 28px rgba(129,119,240,.15);
  transform:translateY(-4px);
  border-color:var(--purple);
}
.lc-item i{font-size:2.5rem;margin-bottom:14px;color:var(--purple);transition:color .2s}

/* Browser-specific colors */
.browser-chrome:hover i{color:#4285F4}
.browser-firefox:hover i{color:#FF7139}
.browser-edge:hover i{color:#0078D7}
.browser-opera:hover i{color:#FF1B2D}
.browser-android:hover i{color:#3DDC84}
.browser-ios:hover i{color:#000}

/* Coming Soon badge */
.badge-soon{
  display:inline-block;
  font-size:.7rem;
  font-weight:600;
  color:#fff;
  background:var(--yellow);
  padding:4px 10px;
  border-radius:20px;
  margin-bottom:8px;
}
.lc-item strong{color:var(--purple);margin-bottom:10px;font-size:1.05rem;font-weight:600}
.lc-item p{color:var(--gray);font-size:.9rem;margin-bottom:14px;flex:1}
.lc-item.disabled{opacity:.5;cursor:not-allowed;pointer-events:none;border-style:dashed}
.lc-item.disabled .btn-privacy{pointer-events:auto;cursor:pointer}
.lc-item.disabled:hover{transform:none;box-shadow:0 4px 12px rgba(0,0,0,.04);border-color:rgba(129,119,240,.15)}

/* Form in meeting section */
#meeting{
  background:linear-gradient(180deg, #fff 0%, rgba(127,209,123,.06) 100%);
}
.contact-box{
  max-width:480px;
  margin:0 auto;
  padding:36px 40px;
  border:2px solid var(--purple);
  border-radius:16px;
  background:rgba(255,255,255,.95);
  box-shadow:0 8px 32px rgba(129,119,240,.12);
}
#meeting form{max-width:100%;margin:24px auto 0;text-align:left}
#meeting label{display:block;margin-bottom:10px;color:var(--purple);font-weight:600}
#meeting select{
  width:100%;
  padding:12px 14px;
  border:2px solid rgba(129,119,240,.2);
  border-radius:10px;
  margin-bottom:20px;
  font-size:1rem;
  transition:border-color .2s;
}
#meeting select:focus{outline:none;border-color:var(--purple)}
#meeting input[type="date"]{
  width:100%;
  padding:12px 14px;
  border:2px solid rgba(129,119,240,.2);
  border-radius:10px;
  margin-bottom:16px;
  font-size:1rem;
  font-family:inherit;
  transition:border-color .2s;
}
#meeting input[type="date"]:focus,
#meeting input[type="email"]:focus,
#meeting input[type="text"]:focus,
#meeting input[type="time"]:focus{outline:none;border-color:var(--purple)}
#meeting input[type="text"],
#meeting input[type="email"],
#meeting input[type="time"]{
  width:100%;
  padding:12px 14px;
  border:2px solid rgba(129,119,240,.2);
  border-radius:10px;
  margin-bottom:20px;
  font-size:1rem;
  font-family:inherit;
  transition:border-color .2s;
}
#meeting textarea{
  width:100%;
  min-height:100px;
  padding:12px 14px;
  border:2px solid rgba(129,119,240,.2);
  border-radius:10px;
  margin-bottom:16px;
  font-size:1rem;
  font-family:inherit;
  resize:vertical;
  transition:border-color .2s;
}
#meeting textarea:focus{outline:none;border-color:var(--purple)}
#meeting .required{color:var(--red)}
.meeting-note{
  font-size:.85rem;
  color:var(--gray);
  margin-bottom:16px;
}

/* Intro */
.intro{text-align:center;padding:40px 20px;color:var(--gray)}
.intro h1{
  font-size:3rem;font-weight:700;margin-bottom:16px;color:var(--purple);
}
.tagline{color:var(--gray);margin-top:12px}
.navlinks{margin-top:8px;color:var(--gray)}
.intro-link{color:var(--green);font-weight:600;margin:0 6px;font-size:2rem}

/* About area columns */
.about-container{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:10px}
.about-column{flex:1;min-width:300px;max-width:520px}
.about-toggle{
  background:transparent;border:none;color:var(--green);font-size:1.05rem;cursor:pointer;margin-bottom:8px;
}

/* About content scroll + стартово затворено */
.about-content{
  max-height:0;
  overflow:hidden;
  padding:0 18px;
  text-align:left;
  background:#fafafa;
  border-left:4px solid var(--green);
  border-radius:8px;
  line-height:1.5;
  transition:max-height .45s ease,padding .25s ease;
}
.about-content.open{
  padding:18px;
  max-height:400px;
  overflow-y:auto;
}

/* Sections and cards */
h2{font-size:1.8rem;color:var(--purple);margin-bottom:8px}
.lead{color:var(--gray);margin-bottom:8px}
.note{font-size:0.95rem;color:var(--red);margin-bottom:10px}
.note-black{font-size:0.95rem;color:#000;margin-bottom:5px} /* съкратено разстояние 2 пъти */
.cards{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;justify-content:center}
.card{
  flex:1 1 200px;
  border:1px solid #eee;border-radius:12px;padding:18px;text-align:center;
  transition:box-shadow .25s ease,transform .15s ease;display:flex;flex-direction:column;justify-content:space-between;
}
.card:hover{box-shadow:0 8px 22px rgba(0,0,0,0.08);transform:translateY(-4px)}
.card h3{color:var(--green);margin-bottom:8px}
.card p{color:var(--gray);margin-bottom:8px}
.price{font-weight:700;color:var(--purple);margin-top:8px}

/* Buttons — default yellow, hover green (iPhone style) */
.btn{
  display:inline-block;
  padding:12px 24px;
  border-radius:var(--radius-btn);
  background:var(--yellow);
  color:var(--yellow-btn-text);
  font-weight:600;
  transition:all .25s ease;
  cursor:pointer;
  border:none;
  text-align:center;
  box-shadow:var(--shadow-btn);
}
.btn:hover{background:var(--green);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(124,209,123,.35)}

/* Modal styling */
.modal{
  display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;overflow:auto;
  background-color:rgba(0,0,0,0.55);align-items:center;justify-content:center;padding:20px;
}
.modal[aria-hidden="false"]{display:flex}
.modal-content{
  background:#fff;border-radius:12px;padding:28px;width:100%;max-width:420px;text-align:center;position:relative;
}
.modal-content h2{color:var(--purple);margin-bottom:14px}
.close-btn{position:absolute;top:10px;right:14px;font-size:22px;color:var(--gray);cursor:pointer}
.modal-buttons .btn{display:block;width:85%;margin:10px auto}

/* Small helpers */
.form-message{padding:12px;background:var(--green);color:#fff;border-radius:8px;text-align:center;display:none}
footer{
  text-align:center;
  padding:56px 24px;
  background:#f8f8fa;
  color:var(--gray);
}
.footer-content{max-width:900px;margin:0 auto}
.footer-logo{
  font-size:1.5rem;
  font-weight:700;
  color:var(--purple);
}
.footer-tagline{
  color:var(--gray);
  font-size:.9rem;
  margin-top:6px;
}
.footer-links{
  margin:24px 0;
  display:flex;
  justify-content:center;
  gap:28px;
}
.footer-links a{
  color:var(--gray);
  font-weight:500;
  transition:color .2s;
}
.footer-links a:hover{color:var(--purple)}
.footer-copy{
  font-size:.85rem;
  color:rgba(117,117,117,.7);
}

/* Back to top button */
.back-to-top{
  position:fixed;
  bottom:24px;
  right:24px;
  width:48px;
  height:48px;
  background:var(--purple);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:all .3s ease;
  box-shadow:0 4px 16px rgba(129,119,240,.3);
  z-index:999;
}
.back-to-top.visible{opacity:1;visibility:visible}
.back-to-top:hover{background:var(--blue);transform:translateY(-4px)}
.btn-privacy{
  background:transparent;
  color:var(--gray);
  border:2px solid rgba(117,117,117,.3);
  margin-top:8px;
  display:inline-block;
  padding:10px 20px;
}
.btn-privacy:hover{background:var(--purple);color:#fff;border-color:var(--purple)}

.btn-service{
  display:inline-block;
  margin-top:12px;
  padding:12px 20px;
  background:var(--purple);
  color:#fff;
  border-radius:10px;
  font-weight:600;
  transition:all .2s ease;
}
.btn-service:hover{background:var(--blue);transform:translateY(-2px);box-shadow:0 4px 12px rgba(79,192,230,.3)}
.privacy-content{max-width:640px;margin:0 auto;text-align:left}
.privacy-content p{margin-bottom:16px;line-height:1.7;color:var(--text)}

/* What I Offer — compact intro */
#offer .lead-text{margin-bottom:0}

/* Who are we — soft blue tint */
#who{
  background:linear-gradient(180deg, rgba(79,192,230,.05) 0%, #fff 100%);
}
#who .lead-text:first-of-type{margin-top:8px}

/* ComAi — BETA styling */
#comai{
  background:linear-gradient(180deg, rgba(255,126,112,.04) 0%, #fff 100%);
}
#comai textarea{
  width:100%;
  max-width:600px;
  height:120px;
  margin:20px auto;
  display:block;
  padding:14px 18px;
  border-radius:10px;
  border:2px solid rgba(129,119,240,.2);
  font-family:inherit;
  font-size:1rem;
  transition:border-color .2s;
}
#comai textarea:focus{outline:none;border-color:var(--purple)}

/* Research — chaty with yellow accent */
#research h3{
  color:#b8860b;
  font-size:1.25rem;
  margin:24px 0 12px;
  padding:8px 16px;
  background:rgba(255,198,75,.2);
  border-radius:8px;
  display:inline-block;
  border-left:4px solid var(--yellow);
}
#research textarea{
  width:100%;
  max-width:600px;
  height:120px;
  margin-top:20px;
  padding:14px 18px;
  border-radius:10px;
  border:2px solid rgba(129,119,240,.2);
  font-family:inherit;
  font-size:1rem;
  transition:border-color .2s;
}
#research textarea:focus{outline:none;border-color:var(--purple)}

/* Download title smaller */
.download-title{font-size:1.35rem;margin-bottom:16px}

/* Scroll animations */
.fade-in{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease,transform .6s ease;
}
.fade-in-visible{
  opacity:1;
  transform:translateY(0);
}

/* Focus: no purple outline; same principle as nav — hover = other color, focus = white text */
a:focus,button:focus,input:focus,select:focus,textarea:focus{
  outline:none;
}
.btn:focus{
  outline:none;
  background:var(--green);
  color:#fff;
}
.btn:focus:hover{
  background:var(--green);
  color:#fff;
}
.btn-outline:focus,
.btn-primary:focus,
.btn-hero-yellow:focus,
.btn-hero-green:focus{
  outline:none;
}
.btn-outline:focus{background:var(--purple);color:#fff}
.btn-primary:focus,
.btn-hero-green:focus{background:var(--green);color:#fff}
.btn-hero-yellow:focus{background:var(--yellow);color:#fff}

/* ========================================
   SIMPLE CLEAN DESIGN
   ======================================== */

/* Hero tagline */
.hero-tagline{
  font-size:1.3rem;
  font-weight:600;
  color:rgba(255,255,255,.9);
  margin-bottom:32px;
  letter-spacing:1px;
}

/* Why Grid */
.why-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
  margin-top:40px;
}
.why-card{
  background:#fff;
  border:2px solid rgba(129,119,240,.1);
  border-radius:16px;
  padding:32px 24px;
  text-align:center;
  transition:all .25s;
}
.why-card:hover{
  border-color:var(--purple);
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(129,119,240,.12);
}
.why-icon{
  width:64px;
  height:64px;
  background:linear-gradient(135deg, var(--purple) 0%, #6366f1 100%);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
}
.why-icon i{
  font-size:1.6rem;
  color:#fff;
}
.why-card h3{
  color:var(--purple);
  font-size:1.15rem;
  margin-bottom:10px;
}
.why-card p{
  color:var(--gray);
  font-size:.95rem;
  line-height:1.6;
}

/* Extension Demo */
.extension-demo{
  max-width:400px;
  margin:0 auto 40px;
}
.extension-demo .browser-mockup{
  box-shadow:0 20px 60px rgba(0,0,0,.2);
}
.extension-demo .browser-content{
  background:#f9f9f9;
  padding:20px;
}
.extension-demo .trust-popup{
  background:#fff;
  border:2px solid var(--purple);
  border-radius:12px;
  padding:20px;
  text-align:center;
}
.extension-demo .popup-header{
  color:var(--purple);
  font-weight:700;
  font-size:1rem;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.extension-demo .popup-score{
  margin-bottom:16px;
}
.extension-demo .popup-score .score{
  display:block;
  font-size:3rem;
  font-weight:800;
}
.extension-demo .popup-score .score.danger{color:var(--red)}
.extension-demo .popup-score .score.safe{color:var(--green)}
.extension-demo .popup-score .score-label{
  font-size:.85rem;
  color:var(--gray);
}
.extension-demo .popup-votes{
  display:flex;
  justify-content:center;
  gap:24px;
  margin-bottom:12px;
}
.extension-demo .popup-votes .vote{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.9rem;
}
.extension-demo .popup-votes .vote.up{color:var(--green)}
.extension-demo .popup-votes .vote.down{color:var(--red)}
.extension-demo .popup-warning{
  font-size:.85rem;
  color:var(--red);
  background:rgba(255,126,112,.1);
  padding:10px 16px;
  border-radius:8px;
  margin:0;
}

/* Spaces Simple */
.spaces-simple{
  display:flex;
  justify-content:center;
  gap:48px;
  margin:40px 0;
  flex-wrap:wrap;
}
.spaces-simple .space-feature{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.spaces-simple .space-feature i{
  font-size:2.5rem;
  color:var(--purple);
}
.spaces-simple .space-feature span{
  font-size:1rem;
  color:var(--gray);
  font-weight:500;
}

/* Section Soft */
.section-soft{
  background:linear-gradient(180deg, rgba(129,119,240,.04) 0%, #fff 100%);
}

/* About Simple */
.about-simple{
  max-width:600px;
  margin:0 auto;
  text-align:center;
}
.about-simple .lead-text{
  font-size:1.2rem;
  color:var(--text);
  margin-bottom:20px;
}
.about-simple p{
  color:var(--gray);
  margin-bottom:16px;
  line-height:1.8;
}

/* Contact Simple */
.contact-simple{
  max-width:400px;
  margin:0 auto;
}
.contact-form-minimal{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.contact-form-minimal input,
.contact-form-minimal textarea{
  width:100%;
  padding:14px 18px;
  background:rgba(255,255,255,.1);
  border:2px solid rgba(255,255,255,.2);
  border-radius:10px;
  color:#fff;
  font-size:1rem;
  font-family:inherit;
  transition:all .2s;
}
.contact-form-minimal input::placeholder,
.contact-form-minimal textarea::placeholder{
  color:rgba(255,255,255,.5);
}
.contact-form-minimal input:focus,
.contact-form-minimal textarea:focus{
  outline:none;
  border-color:var(--green);
  background:rgba(255,255,255,.15);
}
.contact-form-minimal .btn{
  margin-top:8px;
}
.contact-direct{
  margin-top:24px;
  color:rgba(255,255,255,.7);
  font-size:.9rem;
}
.contact-direct a{
  color:var(--green);
  font-weight:600;
}
.contact-direct a:hover{
  color:var(--yellow);
}

/* Feature Blocks - iPhone Style */
.feature-block{
  max-width:600px;
  margin:0 auto 64px;
  text-align:center;
}
.feature-block:last-child{margin-bottom:0}
.feature-block.feature-bordered{
  background:#f8f8fa;
  border:1.5px solid rgba(0,0,0,.08);
  border-radius:var(--radius-card);
  padding:40px;
}
.front-section-card .feature-block.feature-bordered{
  background:transparent;
  border:none;
  padding:0;
}

/* Scroll offset for fixed navigation - applies to all sections */
section, [id] {
  scroll-margin-top: 40px;
}

/* Check, Poll, Space and Join need more offset (they're inside a section) */
#check, #section-poll, #section-spaces, #section-apps, #section-public-survey, #features {
  scroll-margin-top: 100px;
}

/* Feature input elements */
.feature-input-wrap{
  display:flex;
  gap:12px;
  margin-top:20px;
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
}
.feature-input{
  flex:1;
  padding:14px 18px;
  font-size:16px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:var(--radius-btn);
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance:none;
  appearance:none;
}
.feature-input:focus{
  outline:none;
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(129,119,240,.15);
}
.feature-input-wrap .btn{
  white-space:nowrap;
  padding:14px 24px;
}

/* Spaces section: Enter + Create */
.spaces-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  margin-top:24px;
}
.spaces-actions .feature-input-wrap{
  margin-top:0;
  width:100%;
  max-width:420px;
}
.spaces-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}
.spaces-buttons .btn{
  padding:12px 20px;
}

/* Feature loading state */
.feature-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:16px;
  color:var(--gray);
  font-size:14px;
}
.feature-spinner{
  width:20px;
  height:20px;
  border:2px solid #eee;
  border-top-color:var(--purple);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Feature result */
.feature-result{
  margin-top:20px;
  padding:20px;
  background:#fff;
  border-radius:12px;
  border:1.5px solid #eee;
}
.feature-result-value{
  font-size:18px;
  font-weight:700;
  color:#333;
  margin-bottom:8px;
  word-break:break-all;
}
.feature-result-stats{
  font-size:15px;
  font-weight:600;
  color:var(--purple);
  margin-bottom:16px;
}
.feature-actions{
  display:flex;
  justify-content:center;
  gap:12px;
}

/* Trust/Warn buttons */
.btn-trust{
  background:var(--yellow);
  color:var(--yellow-btn-text);
  border-radius:var(--radius-btn);
  font-weight:600;
  transition:all .25s ease;
}
.btn-trust:hover{
  background:var(--green);
  color:#fff;
  transform:translateY(-1px);
}
.btn-trust:disabled{opacity:.6;cursor:not-allowed}

.btn-warn{
  background:var(--red);
  color:#fff;
}
.btn-warn:hover{background:#ff6b5a}
.btn-warn:disabled{opacity:.6;cursor:not-allowed}

/* Feature error */
.feature-error{
  margin-top:16px;
  padding:12px 16px;
  background:rgba(255,126,112,.1);
  color:var(--red);
  border-radius:10px;
  font-size:14px;
}
.feature-icon-large{
  width:80px;
  height:80px;
  background:linear-gradient(135deg, var(--purple) 0%, #6366f1 100%);
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 24px;
  box-shadow:0 8px 24px rgba(129,119,240,.25);
}
.feature-icon-large i{
  font-size:2rem;
  color:#fff;
}
.feature-block h2{
  font-size:1.6rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:12px;
}
.feature-block p{
  color:var(--gray);
  font-size:1rem;
  line-height:1.7;
  margin-bottom:20px;
}

/* Unified Feature Block */
.feature-unified{
  background:#f8f8fa;
  border-radius:24px;
  padding:48px;
  border:1.5px solid rgba(0,0,0,.06);
}
.feature-unified .feature-desc{
  color:var(--gray);
  font-size:1rem;
  line-height:1.7;
  margin-bottom:8px;
}
.feature-unified .check-desc{
  color:var(--gray);
  font-size:.95rem;
  margin-bottom:24px !important;
}

/* Check Card - iPhone Style (legacy, kept for compatibility) */
.check-card{
  background:#f8f8fa;
  border-radius:20px;
  padding:32px;
  margin-top:32px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.check-card h3{
  font-size:1.2rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:8px;
}
.check-desc{
  color:var(--gray);
  font-size:.95rem;
  margin-bottom:24px !important;
}
.check-input-wrap{
  display:flex;
  gap:12px;
  margin-bottom:20px;
}
.check-input-wrap input{
  flex:1;
  padding:16px 20px;
  border:1.5px solid rgba(0,0,0,.08);
  border-radius:14px;
  font-size:1rem;
  font-family:inherit;
  background:#fff;
  transition:all .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}
.check-input-wrap input:focus{
  outline:none;
  border-color:var(--purple);
  box-shadow:0 0 0 4px rgba(129,119,240,.1);
}
.check-input-wrap .btn{
  white-space:nowrap;
  padding:16px 24px;
}
.check-types{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.check-types span{
  font-size:.8rem;
  color:var(--gray);
  display:flex;
  align-items:center;
  gap:6px;
}
.check-types i{
  color:var(--purple);
  font-size:.9rem;
}

.check-result{
  background:#fff;
  border-radius:16px;
  padding:28px;
  text-align:center;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
  border:1.5px solid rgba(0,0,0,.06);
}
.check-result.hidden{display:none}
.result-header{
  margin-bottom:20px;
}
.result-type{
  display:inline-block;
  background:var(--purple);
  color:#fff;
  padding:6px 14px;
  border-radius:20px;
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  margin-right:10px;
}
.result-value{
  font-family:'SF Mono', monospace;
  font-size:.95rem;
  color:var(--text);
  word-break:break-all;
}
.result-score-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:48px;
  margin-bottom:20px;
}
.result-score{
  text-align:center;
}
.result-score .score-number{
  display:block;
  font-size:3.5rem;
  font-weight:700;
  color:var(--gray);
  letter-spacing:-0.02em;
}
.result-score .score-number.trusted{color:var(--green)}
.result-score .score-number.danger{color:var(--red)}
.result-score .score-number.positive{color:#5cb85c}
.result-score .score-number.negative{color:#e67e22}
.result-score .score-number.unknown{color:var(--gray)}
.result-score .score-label{
  font-size:.85rem;
  color:var(--gray);
}
.result-votes{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.result-votes .vote{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.1rem;
  font-weight:500;
}
.result-votes .vote.up{color:var(--green)}
.result-votes .vote.down{color:var(--red)}
.result-status{
  padding:14px 24px;
  border-radius:12px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}
.result-status.trusted{background:rgba(124,209,123,.12);color:var(--green)}
.result-status.danger{background:rgba(255,126,112,.12);color:var(--red)}
.result-status.positive{background:rgba(92,184,92,.12);color:#5cb85c}
.result-status.negative{background:rgba(230,126,34,.12);color:#e67e22}
.result-status.unknown{background:rgba(117,117,117,.08);color:var(--gray)}
.result-note{
  font-size:.85rem;
  color:var(--gray);
  margin:0;
}
.result-note i{color:var(--blue)}

.check-error{
  background:rgba(255,126,112,.08);
  color:var(--red);
  padding:16px;
  border-radius:12px;
  text-align:center;
}
.check-error.hidden{display:none}

/* Check Loading (matches popup) */
.check-loading{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:20px;
  font-size:14px;
  color:var(--gray);
}
.check-loading.visible{display:flex}
.check-spinner{
  width:24px;
  height:24px;
  border:3px solid #eee;
  border-top-color:var(--purple);
  border-radius:50%;
  animation:grigsi-spin 0.8s linear infinite;
}
@keyframes grigsi-spin{to{transform:rotate(360deg)}}

/* Check Result (matches popup style) */
.check-result{
  margin-top:20px;
  padding:24px;
  background:#fff;
  border-radius:16px;
  text-align:center;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
  border:1.5px solid rgba(0,0,0,.06);
}
.check-result.hidden{display:none}
.check-result-value{
  font-size:18px;
  font-weight:600;
  word-break:break-word;
  color:var(--text);
  margin-bottom:8px;
}
.trust-stats{
  font-size:16px;
  font-weight:600;
  margin:12px 0 20px 0;
  color:var(--text);
}
.check-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:16px;
}
.btn-vote{
  flex:1;
  max-width:160px;
  padding:14px 20px;
  font-size:16px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  color:#fff;
  font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
  transition:transform 0.15s ease,opacity 0.2s ease;
}
.btn-vote:hover{transform:scale(1.03);opacity:0.95}
.btn-vote:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.btn-trust{background:var(--yellow);color:var(--yellow-btn-text)}
.btn-trust:hover{background:var(--green);color:#fff}
.btn-warn{background:var(--red)}

/* ========== Popup-style sections (identical to extension popup) ========== */
.popup-section{
  margin:0 auto 12px auto;
  max-width:360px;
  padding:12px 14px;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fafafa;
  text-align:center;
}
.popup-section-title{
  font-size:12px;
  color:#666;
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:8px;
}
.current-domain{
  font-size:22px;
  font-weight:700;
  word-break:break-word;
  margin:4px 0;
  transition:color 0.2s ease;
}
.current-domain.domain-trust{color:#7CD17B}
.current-domain.domain-warn{color:#FFC64B}
.current-domain.domain-not-trusted{color:#FF7E70}
.trust-percent-rating{
  font-size:14px;
  font-weight:600;
  margin:4px 0 2px 0;
  color:#333;
}
.trust-status-line{
  font-size:14px;
  margin:4px 0 8px 0;
  color:#333;
}
.popup-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:10px;
}
.popup-btn{
  flex:1;
  max-width:140px;
  padding:10px 14px;
  font-size:15px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  color:#fff;
  font-weight:600;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
  transition:transform 0.15s ease,opacity 0.2s ease;
}
.popup-btn:hover{transform:scale(1.03);opacity:0.95}
.popup-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.popup-btn-trust{background:#7CD17B}
.popup-btn-warn{background:#FF7E70}

/* Check input wrap (popup style) */
.popup-check-input-wrap{
  display:flex;
  gap:8px;
  margin-bottom:8px;
}
.popup-check-input-wrap input{
  flex:1;
  padding:8px 10px;
  font-size:14px;
  border:1px solid #ccc;
  border-radius:8px;
}
.popup-check-input-wrap input:focus{
  outline:none;
  border-color:#8177F0;
}
.popup-check-btn{
  padding:8px 16px;
  font-size:14px;
  border-radius:8px;
  background:#8177F0;
  color:#fff;
  border:none;
  cursor:pointer;
  white-space:nowrap;
}
.popup-check-btn:hover{opacity:0.9}
.popup-check-btn:disabled{opacity:0.6;cursor:wait}

/* Check loading (popup style) */
.popup-check-loading{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px;
  font-size:13px;
  color:#666;
}
.popup-check-loading.visible{display:flex}
.popup-check-spinner{
  width:20px;
  height:20px;
  border:2px solid #eee;
  border-top-color:#8177F0;
  border-radius:50%;
  animation:popup-spin 0.8s linear infinite;
}
@keyframes popup-spin{to{transform:rotate(360deg)}}

/* Check result (popup style) */
.popup-check-result{
  display:none;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #eee;
  text-align:center;
}
.popup-check-result.visible{display:block}
.popup-check-result-value{
  font-size:15px;
  font-weight:600;
  word-break:break-word;
  color:#333;
  margin-bottom:4px;
}
.popup-check-result .trust-percent-rating{margin:6px 0 10px 0}
.popup-check-result-actions{margin-top:8px}

/* Check error (popup style) */
.popup-check-error{
  background:rgba(255,126,112,.1);
  color:#FF7E70;
  padding:10px;
  border-radius:8px;
  font-size:13px;
  margin-top:8px;
}
.popup-check-error.hidden{display:none}

/* Poll result */
.popup-poll-result{
  margin-top:12px;
  padding:12px;
  background:#f8f8fa;
  border-radius:8px;
  border:1px solid #eee;
}

/* Extension Card */
.extension-card{
  background:#f8f8fa;
  border-radius:24px;
  padding:48px;
  border:1.5px solid rgba(0,0,0,.06);
  max-width:600px;
  margin:0 auto;
}

/* Report Block */
.report-block{
  text-align:center;
  padding-bottom:40px;
  border-bottom:1px solid rgba(0,0,0,.06);
  margin-bottom:40px;
}
.report-question{
  font-size:1.2rem;
  color:var(--text);
  margin-bottom:20px;
  font-weight:500;
}

/* Extension Block */
.extension-block{
  text-align:center;
}
.extension-block h2{
  font-size:1.5rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:12px;
}
.extension-desc{
  font-size:1rem;
  color:var(--gray);
  margin-bottom:32px;
}
.extension-features{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 20px;
  margin-bottom:32px;
}
.ext-feature{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--gray);
  font-size:.9rem;
  font-weight:500;
}
.ext-feature i{
  font-size:.85rem;
  color:var(--purple);
}

/* About Block */
.about-block{
  max-width:560px;
  margin:0 auto;
  text-align:center;
}
.about-block h2{
  font-size:1.8rem;
  font-weight:700;
  color:var(--purple);
  margin-bottom:24px;
}
.about-lead{
  font-size:1.1rem;
  color:var(--text);
  margin-bottom:20px !important;
}
.about-block p{
  color:var(--gray);
  line-height:1.8;
  margin-bottom:16px;
}

/* About Card - styled section */
.about-card{
  max-width:600px;
  margin:0 auto;
  text-align:center;
  background:#f8f8fa;
  border-radius:24px;
  padding:48px;
  border:1.5px solid rgba(0,0,0,.06);
}
.about-card h2{
  font-size:1.6rem;
  font-weight:700;
  color:var(--purple);
  margin-bottom:24px;
}
.about-card .about-lead{
  font-size:1.05rem;
  color:var(--text);
  margin-bottom:16px;
}
.about-card p{
  color:var(--gray);
  line-height:1.7;
  margin-bottom:14px;
}
.about-highlight{
  display:flex;
  align-items:flex-start;
  gap:16px;
  background:#fff;
  border:1.5px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:20px 24px;
  margin:28px 0;
  text-align:left;
}
.about-highlight i{
  font-size:1.4rem;
  color:var(--purple);
  margin-top:2px;
}
.about-highlight strong{
  display:block;
  color:var(--text);
  font-size:1rem;
  margin-bottom:6px;
}
.about-highlight p{
  color:var(--gray);
  font-size:.9rem;
  margin:0;
  line-height:1.6;
}

/* Contact Block */
.contact-block{
  max-width:400px;
  margin:0 auto;
  text-align:center;
}
.contact-block h2{
  font-size:1.6rem;
  font-weight:700;
  margin-bottom:28px;
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:16px 20px;
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.15);
  border-radius:14px;
  color:#fff;
  font-size:1rem;
  font-family:inherit;
  transition:all .2s;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:rgba(255,255,255,.5);
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.15);
}
.contact-form .btn{
  margin-top:8px;
}
.contact-direct{
  margin-top:24px;
  color:rgba(255,255,255,.7);
  font-size:.9rem;
}
.contact-direct a{
  color:var(--yellow);
  font-weight:600;
}

/* Contact select dropdown */
.contact-select{
  width:100%;
  padding:16px 20px;
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.15);
  border-radius:14px;
  color:#fff;
  font-size:1rem;
  font-family:inherit;
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
}
.contact-select:focus{
  outline:none;
  border-color:rgba(255,255,255,.4);
  background-color:rgba(255,255,255,.15);
}
.contact-select option{
  background:#1a1a2e;
  color:#fff;
}

/* Contact divider */
.contact-divider{
  display:flex;
  align-items:center;
  margin:28px 0;
}
.contact-divider::before,
.contact-divider::after{
  content:'';
  flex:1;
  height:1px;
  background:rgba(255,255,255,.2);
}
.contact-divider span{
  padding:0 16px;
  color:rgba(255,255,255,.5);
  font-size:.9rem;
}

/* Contact meeting option */
.contact-meeting-option{
  text-align:left;
  padding:16px;
  background:rgba(255,255,255,.05);
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
}

.meeting-checkbox{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  color:rgba(255,255,255,.9);
  font-size:.95rem;
}
.meeting-checkbox input[type="checkbox"]{
  display:none;
}
.meeting-checkbox .checkmark{
  width:22px;
  height:22px;
  border:2px solid rgba(255,255,255,.3);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all .2s;
}
.meeting-checkbox input:checked + .checkmark{
  background:var(--green);
  border-color:var(--green);
}
.meeting-checkbox input:checked + .checkmark::after{
  content:'✓';
  color:#fff;
  font-size:14px;
  font-weight:bold;
}

.meeting-date-picker{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.1);
}
.meeting-date-picker label{
  display:block;
  color:rgba(255,255,255,.7);
  font-size:.9rem;
  margin-bottom:8px;
}
.contact-input{
  width:100%;
  padding:14px 16px;
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.15);
  border-radius:10px;
  color:#fff;
  font-size:1rem;
  font-family:inherit;
}
.contact-input:focus{
  outline:none;
  border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.15);
}

/* Fix datetime-local color scheme for dark bg */
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter:invert(1);
  cursor:pointer;
}
}

/* Buttons - iPhone Style */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:14px;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  border:none;
  transition:all .2s ease;
}
.btn-outline{
  background:transparent;
  color:var(--purple);
  border:1.5px solid var(--purple);
}
.btn-outline:hover{
  background:var(--purple);
  color:#fff;
}
.btn-light{
  background:#fff;
  color:var(--green);
  box-shadow:0 4px 16px rgba(0,0,0,.1);
}
.btn-light:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(0,0,0,.14);
}

/* Footer Simple */
.footer-tagline{
  color:var(--green);
  font-size:.95rem;
  margin-top:4px;
}

/* ========================================
   COMMUNITY GUARD THEME
   ======================================== */

/* Hero Trust Theme */
.hero-trust{
  background:linear-gradient(135deg, var(--trust-dark) 0%, var(--trust-blue) 100%);
  color:#fff;
  padding:120px 24px 80px;
  position:relative;
  overflow:hidden;
}
.hero-trust::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,215,0,0.1)"/></svg>');
  background-size:60px 60px;
  opacity:.5;
}
.hero-trust .container{position:relative;z-index:1}

.trust-shield-visual{margin-bottom:24px}
.shield-icon{
  position:relative;
  display:inline-block;
  font-size:80px;
  color:var(--shield-gold);
  animation:pulse-glow 2s infinite;
}
.shield-check{
  position:absolute;
  bottom:8px;
  right:-8px;
  background:var(--safe-green);
  color:#fff;
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  box-shadow:0 2px 8px rgba(16,185,129,.4);
}

@keyframes pulse-glow{
  0%,100%{filter:drop-shadow(0 0 20px rgba(255,215,0,.3))}
  50%{filter:drop-shadow(0 0 40px rgba(255,215,0,.6))}
}

.hero-tagline{
  font-size:1.4rem;
  font-weight:600;
  color:var(--shield-gold);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:12px;
}

.hero-trust-stats{
  display:flex;
  justify-content:center;
  gap:48px;
  margin:32px 0;
  flex-wrap:wrap;
}
.trust-stat{
  text-align:center;
}
.trust-stat .stat-number{
  display:block;
  font-size:2rem;
  font-weight:800;
  color:var(--shield-gold);
}
.trust-stat .stat-label{
  font-size:.85rem;
  color:rgba(255,255,255,.7);
  text-transform:uppercase;
  letter-spacing:1px;
}

/* Section Header */
.section-header{
  margin-bottom:48px;
}
.section-badge{
  display:inline-block;
  padding:8px 16px;
  background:rgba(129,119,240,.15);
  color:var(--purple);
  border-radius:20px;
  font-size:.85rem;
  font-weight:600;
  margin-bottom:16px;
}
.section-badge.guard{
  background:rgba(255,215,0,.15);
  color:var(--shield-gold);
}
.section-badge.space{
  background:rgba(16,185,129,.15);
  color:var(--safe-green);
}

/* Trust Score Section */
.section-trust-dark{
  background:linear-gradient(135deg, var(--trust-dark) 0%, var(--trust-blue) 100%);
  color:#fff;
}

.trust-score-demo{
  display:flex;
  justify-content:center;
  gap:32px;
  flex-wrap:wrap;
  margin-bottom:48px;
}

.score-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:16px;
  padding:24px;
  width:200px;
  text-align:center;
  transition:all .3s;
}
.score-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.12);
}
.score-card.trusted{border-color:var(--safe-green)}
.score-card.suspicious{border-color:var(--danger-red)}
.score-card.unknown{border-color:var(--warning-orange)}

.score-domain{
  font-size:.9rem;
  font-family:monospace;
  color:rgba(255,255,255,.8);
  margin-bottom:16px;
  padding:8px;
  background:rgba(0,0,0,.2);
  border-radius:6px;
}

.score-ring{
  position:relative;
  width:100px;
  height:100px;
  margin:0 auto 16px;
}
.score-ring svg{
  transform:rotate(-90deg);
  width:100%;
  height:100%;
}
.score-bg{
  fill:none;
  stroke:rgba(255,255,255,.1);
  stroke-width:8;
}
.score-fill{
  fill:none;
  stroke-width:8;
  stroke-linecap:round;
  stroke-dasharray:283;
  transition:stroke-dashoffset .6s;
}
.score-card.trusted .score-fill{stroke:var(--safe-green)}
.score-card.suspicious .score-fill{stroke:var(--danger-red)}
.score-card.unknown .score-fill{stroke:var(--warning-orange)}

.score-number{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:1.6rem;
  font-weight:800;
}
.score-card.trusted .score-number{color:var(--safe-green)}
.score-card.suspicious .score-number{color:var(--danger-red)}
.score-card.unknown .score-number{color:var(--warning-orange)}

.score-label{
  font-size:.85rem;
  font-weight:600;
  padding:6px 12px;
  border-radius:20px;
  margin-bottom:12px;
  display:inline-block;
}
.score-label.trusted{background:rgba(16,185,129,.2);color:var(--safe-green)}
.score-label.danger{background:rgba(239,68,68,.2);color:var(--danger-red)}
.score-label.unknown{background:rgba(245,158,11,.2);color:var(--warning-orange)}

.score-votes{
  display:flex;
  justify-content:center;
  gap:16px;
  font-size:.8rem;
  color:rgba(255,255,255,.6);
}
.vote-up i{color:var(--safe-green)}
.vote-down i{color:var(--danger-red)}

.btn-vote{
  margin-top:12px;
  padding:8px 16px;
  background:var(--shield-gold);
  color:var(--trust-dark);
  border:none;
  border-radius:8px;
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:all .2s;
}
.btn-vote:hover{background:#fff;transform:scale(1.05)}

/* Trust Principles */
.trust-principles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}
.principle{
  text-align:center;
  padding:24px;
}
.principle-icon{
  width:60px;
  height:60px;
  background:rgba(255,215,0,.15);
  color:var(--shield-gold);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  margin:0 auto 16px;
}
.principle h3{
  font-size:1.1rem;
  margin-bottom:8px;
}
.principle p{
  font-size:.9rem;
  color:rgba(255,255,255,.7);
}

/* Community Guard Demo */
.guard-demo{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:48px;
  align-items:start;
}

.guard-browser{
  background:var(--trust-dark);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 24px 48px rgba(0,0,0,.2);
}
.browser-top{
  background:#1e2a3a;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:12px;
}
.browser-dots{
  display:flex;
  gap:6px;
}
.browser-dots span{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#3a4a5a;
}
.browser-dots span:first-child{background:#FF5F56}
.browser-dots span:nth-child(2){background:#FFBD2E}
.browser-dots span:nth-child(3){background:#27C93F}
.browser-url{
  flex:1;
  background:rgba(0,0,0,.3);
  padding:8px 12px;
  border-radius:6px;
  font-size:.85rem;
  color:rgba(255,255,255,.8);
  display:flex;
  align-items:center;
  gap:8px;
}
.browser-url i{color:var(--danger-red)}
.guard-indicator{
  margin-left:auto;
  width:24px;
  height:24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
}
.guard-indicator.danger{
  background:var(--danger-red);
  color:#fff;
  animation:alert-pulse 1s infinite;
}

@keyframes alert-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}
  50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}
}

.browser-body{
  padding:24px;
  min-height:320px;
}

.guard-alert{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.alert-header{
  background:linear-gradient(135deg, var(--trust-blue) 0%, var(--trust-dark) 100%);
  color:#fff;
  padding:16px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
}
.alert-header i{color:var(--shield-gold)}
.alert-content{
  padding:24px;
  text-align:center;
}
.alert-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  margin:0 auto 16px;
}
.alert-icon.danger{
  background:rgba(239,68,68,.15);
  color:var(--danger-red);
}
.alert-content h3{
  color:var(--danger-red);
  margin-bottom:8px;
}
.alert-domain{
  font-family:monospace;
  font-size:.9rem;
  color:var(--gray);
  padding:8px 16px;
  background:#f5f5f5;
  border-radius:6px;
  display:inline-block;
  margin-bottom:16px;
}
.alert-details{
  text-align:left;
  background:#f9f9f9;
  padding:16px;
  border-radius:8px;
  margin-bottom:16px;
}
.detail-row{
  display:flex;
  justify-content:space-between;
  padding:8px 0;
  border-bottom:1px solid #eee;
  font-size:.85rem;
}
.detail-row:last-child{border-bottom:none}
.detail-label{color:var(--gray)}
.detail-value.danger{color:var(--danger-red);font-weight:600}
.detail-value.safe{color:var(--safe-green)}

.alert-actions{
  display:flex;
  gap:12px;
  justify-content:center;
}
.btn-safe{
  padding:10px 20px;
  background:var(--safe-green);
  color:#fff;
  border:none;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s;
}
.btn-safe:hover{background:#0f9d58;transform:translateY(-2px)}
.btn-risk{
  padding:10px 16px;
  background:transparent;
  color:var(--gray);
  border:1px solid #ddd;
  border-radius:8px;
  font-size:.8rem;
  cursor:pointer;
  transition:all .2s;
}
.btn-risk:hover{border-color:var(--danger-red);color:var(--danger-red)}

/* Guard Features */
.guard-features h3{
  font-size:1.3rem;
  margin-bottom:24px;
  color:var(--trust-dark);
}
.guard-feature-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.guard-feature{
  display:flex;
  gap:16px;
  align-items:flex-start;
  text-align:left;
}
.guard-feature i{
  width:40px;
  height:40px;
  background:var(--shield-gold);
  color:var(--trust-dark);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.guard-feature h4{
  font-size:1rem;
  margin-bottom:4px;
}
.guard-feature p{
  font-size:.85rem;
  color:var(--gray);
}

.guard-downloads{
  margin-top:32px;
}
.downloads-label{
  font-size:.85rem;
  color:var(--gray);
  margin-bottom:12px;
}

/* Trust Flow */
.section-gradient{
  background:linear-gradient(135deg, var(--shield-gold) 0%, #FFB700 100%);
  color:var(--trust-dark);
}
.section-gradient .section-title{
  color:var(--trust-dark);
}

.trust-flow{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.flow-step{
  flex:1;
  min-width:180px;
  max-width:220px;
  text-align:center;
  position:relative;
}
.flow-icon{
  width:80px;
  height:80px;
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  margin:0 auto 16px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);
  position:relative;
  z-index:1;
}
.flow-number{
  position:absolute;
  top:-8px;
  right:-8px;
  width:32px;
  height:32px;
  background:var(--trust-dark);
  color:var(--shield-gold);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:.9rem;
}
.flow-step h3{
  font-size:1rem;
  margin-bottom:8px;
}
.flow-step p{
  font-size:.85rem;
  opacity:.8;
}
.flow-arrow{
  color:var(--trust-dark);
  font-size:24px;
  opacity:.5;
  padding-top:24px;
}

/* Protected Spaces */
.spaces-showcase{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.space-preview{
  perspective:1000px;
}
.space-window{
  background:var(--trust-dark);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 24px 48px rgba(0,0,0,.15);
  transform:rotateY(-5deg);
  transition:transform .3s;
}
.space-window:hover{transform:rotateY(0)}
.space-header-bar{
  background:rgba(255,255,255,.1);
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.space-code{
  font-family:monospace;
  font-size:.85rem;
  color:#fff;
  display:flex;
  align-items:center;
  gap:8px;
}
.space-code i{color:var(--shield-gold)}
.space-trust-badge{
  font-size:.75rem;
  background:rgba(16,185,129,.2);
  color:var(--safe-green);
  padding:4px 10px;
  border-radius:12px;
}
.space-tabs-bar{
  display:flex;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.space-tabs-bar span{
  flex:1;
  padding:12px;
  text-align:center;
  color:rgba(255,255,255,.5);
  transition:all .2s;
  cursor:pointer;
}
.space-tabs-bar span.active{
  color:#fff;
  background:rgba(255,255,255,.1);
}
.space-chat-preview{
  padding:16px;
}
.space-chat-preview .msg{
  padding:8px 12px;
  border-radius:12px;
  margin-bottom:8px;
  font-size:.85rem;
  max-width:80%;
}
.space-chat-preview .msg.in{
  background:rgba(255,255,255,.1);
  color:#fff;
}
.space-chat-preview .msg.out{
  background:var(--purple);
  color:#fff;
  margin-left:auto;
}
.space-chat-preview .msg.system{
  background:rgba(16,185,129,.2);
  color:var(--safe-green);
  text-align:center;
  margin:0 auto;
  font-size:.75rem;
}

.spaces-features{
  text-align:left;
}
.space-feature-item{
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin-bottom:20px;
}
.feature-shield{
  width:44px;
  height:44px;
  background:linear-gradient(135deg, var(--trust-blue) 0%, var(--trust-dark) 100%);
  color:var(--shield-gold);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
}
.space-feature-item h4{
  font-size:1rem;
  margin-bottom:4px;
}
.space-feature-item p{
  font-size:.85rem;
  color:var(--gray);
}

/* Space Types Compact */
.space-types-compact{
  display:flex;
  justify-content:center;
  gap:24px;
  margin-top:48px;
  flex-wrap:wrap;
}
.type-compact{
  background:rgba(129,119,240,.05);
  border:2px solid rgba(129,119,240,.15);
  border-radius:16px;
  padding:24px;
  width:200px;
  text-align:center;
  transition:all .3s;
}
.type-compact:hover{
  border-color:var(--purple);
  transform:translateY(-4px);
}
.type-compact.featured{
  border-color:var(--shield-gold);
  background:linear-gradient(135deg, rgba(255,215,0,.05) 0%, rgba(255,215,0,.02) 100%);
}
.type-compact i{
  font-size:32px;
  color:var(--purple);
  margin-bottom:12px;
}
.type-compact.featured i{color:var(--shield-gold)}
.type-compact h4{
  font-size:1rem;
  margin-bottom:6px;
}
.type-compact p{
  font-size:.8rem;
  color:var(--gray);
  margin-bottom:8px;
}
.type-compact .price{
  font-size:.75rem;
  font-weight:600;
  color:var(--safe-green);
}

/* Social Proof */
.social-proof-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-bottom:48px;
}
.proof-card{
  background:rgba(255,255,255,.08);
  border-radius:16px;
  padding:24px;
  text-align:center;
}
.proof-icon{
  font-size:32px;
  color:var(--shield-gold);
  margin-bottom:12px;
}
.proof-stat{
  font-size:2rem;
  font-weight:800;
  color:#fff;
  margin-bottom:4px;
}
.proof-label{
  font-size:.85rem;
  color:rgba(255,255,255,.6);
}

.testimonials{
  display:flex;
  gap:32px;
  justify-content:center;
  flex-wrap:wrap;
}
.testimonial{
  flex:1;
  min-width:280px;
  max-width:400px;
  background:rgba(255,255,255,.05);
  border-left:4px solid var(--shield-gold);
  padding:24px;
  border-radius:0 12px 12px 0;
}
.testimonial p{
  font-style:italic;
  color:rgba(255,255,255,.9);
  margin-bottom:12px;
}
.testimonial .author{
  font-size:.85rem;
  color:var(--shield-gold);
}

/* Vision Section */
.vision-content{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:48px;
  text-align:left;
}
.vision-text .lead-text{
  font-size:1.4rem;
  color:var(--trust-dark);
  margin-bottom:20px;
}
.vision-text p{
  margin-bottom:16px;
  color:var(--gray);
}
.vision-cta{
  margin-top:24px;
}

.vision-values{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.value-card{
  background:linear-gradient(135deg, rgba(15,22,40,.05) 0%, rgba(30,58,95,.05) 100%);
  border-left:4px solid var(--shield-gold);
  padding:20px;
  border-radius:0 12px 12px 0;
}
.value-card i{
  font-size:24px;
  color:var(--shield-gold);
  margin-bottom:8px;
}
.value-card h4{
  font-size:1rem;
  color:var(--trust-dark);
  margin-bottom:4px;
}
.value-card p{
  font-size:.85rem;
  color:var(--gray);
}

/* Contact Badge */
.contact-badge{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:24px;
  padding:12px 20px;
  background:rgba(255,215,0,.15);
  border-radius:8px;
  color:var(--shield-gold);
  font-weight:600;
}

/* Footer Trust Theme */
.footer-trust{
  background:linear-gradient(135deg, var(--trust-dark) 0%, var(--trust-blue) 100%);
  color:#fff;
  padding:48px 24px;
}
.footer-trust .footer-logo{
  font-size:1.8rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:8px;
}
.footer-trust .footer-logo i{color:var(--shield-gold)}
.footer-tagline{
  font-size:.9rem;
  color:var(--shield-gold);
  margin-top:8px;
}
.footer-trust .footer-links{
  margin:24px 0;
}
.footer-trust .footer-links a{
  color:rgba(255,255,255,.8);
  display:flex;
  align-items:center;
  gap:6px;
  transition:color .2s;
}
.footer-trust .footer-links a:hover{color:var(--shield-gold)}
.footer-trust-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  background:rgba(255,215,0,.15);
  border-radius:20px;
  font-size:.85rem;
  color:var(--shield-gold);
  margin-bottom:24px;
}
.footer-trust .footer-copy{
  color:rgba(255,255,255,.5);
  font-size:.85rem;
}

/* ========================================
   END COMMUNITY GUARD THEME
   ======================================== */

/* Feature Highlight — LieCheck: more space so badge/icon don't overlap */
.feature-highlight{
  background:linear-gradient(135deg, rgba(129,119,240,0.05) 0%, rgba(108,99,255,0.1) 100%);
  border:2px solid var(--purple) !important;
  position:relative;
  padding:32px 28px 28px !important;
  padding-top:48px !important;
  margin-top:8px;
}
.feature-highlight .feature-icon-large{
  margin-top:8px;
}
.feature-highlight::before{
  content:'NEW';
  position:absolute;
  top:24px;
  right:24px;
  background:var(--purple);
  color:#fff;
  padding:6px 14px;
  border-radius:12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.5px;
}

/* responsive */
@media(max-width:1024px){
  .space-demo{grid-template-columns:1fr}
  .space-types-grid{grid-template-columns:1fr 1fr}
  .trust-grid{grid-template-columns:1fr}
  .org-features{grid-template-columns:repeat(2, 1fr)}
  .contact-grid{grid-template-columns:1fr}
  .guard-demo{grid-template-columns:1fr}
  .spaces-showcase{grid-template-columns:1fr}
  .vision-content{grid-template-columns:1fr}
  .trust-principles{grid-template-columns:1fr 1fr}
  .social-proof-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  section{padding:56px 20px}
  header{padding:40px 20px;margin-top:56px}
  header h1{font-size:2.2rem}
  .hero{padding:80px 20px 60px}
  .hero-title,.hero-title-inline,.hero-title-single{font-size:2.4rem}
  .why-grid{grid-template-columns:1fr}
  .spaces-simple{gap:32px}
  .check-input-wrap{flex-direction:column}
  .check-types{gap:12px}
  .result-score-wrap{flex-direction:column;gap:20px}
  .extension-features{grid-template-columns:1fr;gap:12px}
  .hero-title,.hero-title-inline,.hero-title-single{font-size:2.2rem}
  .hero-subtitle{font-size:1rem}
  .feature-block{margin-bottom:48px}
  .check-card{padding:24px}
  .ext-feature{padding:14px 16px}
  .hero-subtitle{font-size:1.1rem}
  .hero-features{gap:20px}
  .hero-feature{flex-direction:column;text-align:center;gap:6px}
  .hero-logo{width:80px}
  .section h2, .product-section h2{font-size:1.5rem}
  .section-title{font-size:1.6rem}
  .nav-links{gap:4px;padding:2px 0}
  .nav-cta{padding:3px 6px;font-size:0.65rem}
  .front-sections-grid{padding:20px 16px}
  .front-section-card .container{padding:24px 16px}
  .section-about-standalone{padding:32px 16px}
  .section-about-standalone .about-card{padding:24px 16px}
  .about-features-subsection{padding:24px 16px}
  .feature-highlight{padding:28px 20px 24px !important;padding-top:44px !important}
  .feature-highlight::before{top:20px;right:20px}
  .lc-item{max-width:none;flex:1 1 140px}
  .feature-item{flex:1 1 100%}
  .service-card{flex:1 1 100%;max-width:none}
  .browser-downloads{justify-content:center}
  .about-container{flex-direction:column}
  .intro h1{font-size:2.2rem}
  .cards{flex-direction:column}
  .contact-box{padding:28px 24px;margin:0 16px}
  .footer-links{flex-direction:column;gap:12px}
  .back-to-top{bottom:16px;right:16px;width:42px;height:42px}
  .space-types-grid{grid-template-columns:1fr}
  .space-type-card.featured{transform:none}
  .space-type-card.featured:hover{transform:translateY(-4px)}
  .org-features{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .space-tabs{flex-wrap:wrap}
  .space-tabs .tab{padding:10px 14px;font-size:.8rem}
  .trust-info{order:-1}
  .trust-principles{grid-template-columns:1fr}
  .trust-flow{flex-direction:column;align-items:center}
  .flow-arrow{transform:rotate(90deg);padding:8px 0}
  .flow-step{max-width:280px}
  .social-proof-grid{grid-template-columns:1fr 1fr}
  .space-window{transform:none}
  .hero-trust-stats{gap:24px}
  .trust-stat .stat-number{font-size:1.6rem}
  .alert-actions{flex-direction:column}
}