/* ═══════════════════════════════════════════════════════════
   LANDING — nav
═══════════════════════════════════════════════════════════ */
.l-nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:64px; padding:0 clamp(16px,5vw,60px);
  display:flex; align-items:center; justify-content:space-between;
  transition:background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
}
.l-nav.scrolled {
  background:rgba(6,6,15,0.85);
  border-bottom:1px solid var(--b1);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}
.l-logo {
  font-family:var(--ff-display);
  font-size:17px; font-weight:800;
  letter-spacing:-0.5px;
  display:flex; align-items:center; gap:8px;
}
.l-logo-mark {
  width:28px; height:28px;
  border-radius:8px;
  background:linear-gradient(135deg, var(--violet), var(--cyan));
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  box-shadow:0 4px 16px var(--gv);
  transition:transform var(--tx-spring), box-shadow var(--tx-base);
}
.l-logo:hover .l-logo-mark { transform:rotate(12deg) scale(1.1); box-shadow:0 6px 24px var(--gv); }
.l-links { display:flex; align-items:center; gap:28px; }
.l-links a {
  font-size:13.5px; font-weight:500; color:var(--t2);
  transition:color var(--tx-base), transform var(--tx-base);
  display:inline-block;
}
.l-links a:hover { color:var(--t1); transform:translateY(-1px); }
.l-nav-cta { display:flex; align-items:center; gap:10px; }

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.hero {
  min-height:100dvh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:100px clamp(16px,5vw,60px) 60px;
  position:relative; overflow:hidden;
}
.hero-noise {
  position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity:0.4;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 16px; border-radius:var(--rFull);
  background:rgba(124,111,255,0.08);
  border:1px solid rgba(124,111,255,0.22);
  color:var(--violet3); font-size:12px; font-weight:600;
  margin-bottom:28px;
  animation:heroFadeUp 0.8s var(--ease-out) both;
}
.hero h1 {
  font-family:var(--ff-display);
  font-size:clamp(2.6rem,7vw,5.5rem);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-3px;
  margin-bottom:22px;
  animation:heroFadeUp 0.9s var(--ease-out) 0.1s both;
}
.hero-sub {
  font-size:clamp(15px,2.2vw,18px);
  color:var(--t2); line-height:1.75;
  max-width:540px; margin-bottom:36px;
  animation:heroFadeUp 0.9s var(--ease-out) 0.2s both;
}
.hero-cta {
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center; align-items:center;
  margin-bottom:64px;
  animation:heroFadeUp 0.9s var(--ease-out) 0.3s both;
}
@keyframes heroFadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}

.hero-stats {
  display:flex; gap:0;
  background:var(--glass); border:1px solid var(--b1);
  border-radius:var(--r5); overflow:hidden;
  backdrop-filter:blur(16px);
  animation:heroFadeUp 0.9s var(--ease-out) 0.4s both;
  flex-wrap:wrap;
}
.hero-stat {
  padding:18px 28px;
  border-right:1px solid var(--b1);
  transition:background var(--tx-base);
  flex:1; min-width:120px;
}
.hero-stat:last-child { border:none; }
.hero-stat:hover { background:var(--glass2); }
.h-stat-val { font-family:var(--ff-display); font-size:24px; font-weight:700; letter-spacing:-1px; }
.h-stat-lbl { font-size:10.5px; color:var(--t3); margin-top:3px; text-transform:uppercase; letter-spacing:0.6px; }

/* Grid lines bg effect */
.hero-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(124,111,255,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,111,255,0.04) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black 30%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black 30%,transparent 100%);
}

/* ═══════════════════════════════════════════════════════════
   PREVIEW SECTION
═══════════════════════════════════════════════════════════ */
.preview-section { padding:clamp(40px,6vw,80px) clamp(16px,5vw,60px); position:relative; }
.preview-frame {
  background:var(--bg2); border:1px solid var(--b2);
  border-radius:var(--r6); overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(124,111,255,0.06);
  position:relative;
}
.pf-chrome {
  padding:14px 18px;
  background:var(--bg3);
  border-bottom:1px solid var(--b1);
  display:flex; align-items:center; gap:10px;
}
.pf-dot { width:11px;height:11px;border-radius:50%; }
.pf-url {
  flex:1; background:var(--glass); border:1px solid var(--b1);
  border-radius:var(--r2); padding:5px 12px;
  font-size:12px; color:var(--t3); margin:0 12px;
  max-width:280px;
}
.pf-body { padding:20px; }

/* ═══════════════════════════════════════════════════════════
   FEATURES
═══════════════════════════════════════════════════════════ */
.features-section { padding:clamp(60px,8vw,100px) clamp(16px,5vw,60px); }
.features-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:16px; margin-top:48px;
}
.f-card {
  background:var(--glass);
  border:1px solid var(--b1);
  border-radius:var(--r5); padding:28px;
  position:relative; overflow:hidden;
  transition:all var(--tx-slow);
  cursor:default;
  backdrop-filter:blur(12px);
}
.f-card::before {
  content:''; position:absolute; top:0;left:0;right:0;height:1px;
  opacity:0; transition:opacity var(--tx-base);
}
.f-card:hover { transform:translateY(-5px); border-color:var(--b2); }
.f-card:hover::before { opacity:1; }
.f-card.v::before { background:linear-gradient(90deg,transparent,var(--violet),transparent); }
.f-card.c::before { background:linear-gradient(90deg,transparent,var(--cyan),transparent); }
.f-card.r::before { background:linear-gradient(90deg,transparent,var(--rose),transparent); }
.f-card.b::before { background:linear-gradient(90deg,transparent,var(--blue),transparent); }
.f-icon {
  width:50px;height:50px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px; margin-bottom:18px;
  transition:transform var(--tx-spring);
}
.f-card:hover .f-icon { transform:scale(1.12) rotate(5deg); }
.fi-v { background:rgba(124,111,255,0.14); }
.fi-c { background:rgba(0,212,170,0.12);   }
.fi-r { background:rgba(255,107,157,0.12); }
.fi-b { background:rgba(74,158,255,0.12);  }
.f-card h3 { font-family:var(--ff-display); font-size:15px; font-weight:700; margin-bottom:9px; }
.f-card p  { font-size:13px; color:var(--t2); line-height:1.7; }

/* ═══════════════════════════════════════════════════════════
   PROOF MARQUEE
═══════════════════════════════════════════════════════════ */
.proof-section { padding:clamp(40px,5vw,60px) 0; overflow:hidden; }
.marquee-wrap { position:relative; overflow:hidden; }
.marquee-fade-l,.marquee-fade-r {
  position:absolute; top:0;bottom:0;width:100px;z-index:2;pointer-events:none;
}
.marquee-fade-l { left:0;  background:linear-gradient(90deg,var(--bg),transparent); }
.marquee-fade-r { right:0; background:linear-gradient(270deg,var(--bg),transparent); }
.marquee-track {
  display:flex; gap:14px; width:max-content;
  animation:marqueeScroll 32s linear infinite;
}
.marquee-track:hover { animation-play-state:paused; }
@keyframes marqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.p-card {
  background:var(--glass); border:1px solid var(--b1);
  border-radius:var(--r5); padding:22px 24px;
  width:290px; flex-shrink:0;
  transition:all var(--tx-base); cursor:default;
}
.p-card:hover { border-color:var(--b2); transform:translateY(-3px); }
.p-stars { color:var(--amber); font-size:12px; margin-bottom:10px; }
.p-text  { font-size:13px; color:var(--t2); line-height:1.7; margin-bottom:14px; }
.p-name  { font-size:12px; font-weight:600; }
.p-role  { font-size:11px; color:var(--t3); margin-top:2px; }

/* ═══════════════════════════════════════════════════════════
   SDG
═══════════════════════════════════════════════════════════ */
.sdg-section { padding:clamp(60px,8vw,100px) clamp(16px,5vw,60px); }
.sdg-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:36px; }
.sdg-card {
  flex:1; min-width:200px;
  padding:22px 24px; border-radius:var(--r5);
  border:1px solid var(--b1); background:var(--glass);
  display:flex; align-items:center; gap:16px;
  transition:all var(--tx-slow); cursor:default;
  backdrop-filter:blur(12px);
}
.sdg-card:hover { transform:translateY(-4px); }
.sdg-num { font-family:var(--ff-display); font-size:32px; font-weight:800; line-height:1; }
.sdg-info h4 { font-size:13px; font-weight:700; }
.sdg-info p  { font-size:11.5px; color:var(--t3); margin-top:3px; max-width:200px; line-height:1.5; }
.sdg3  { border-color:rgba(77,189,84,.22);  } .sdg3  .sdg-num { color:#4dbd54; }
.sdg8  { border-color:rgba(196,125,32,.25); } .sdg8  .sdg-num { color:#c47d20; }
.sdg17 { border-color:rgba(74,158,255,.22); } .sdg17 .sdg-num { color:var(--blue); }
.sdg3:hover  { box-shadow:0 8px 32px rgba(77,189,84,.12); }
.sdg8:hover  { box-shadow:0 8px 32px rgba(196,125,32,.12); }
.sdg17:hover { box-shadow:0 8px 32px rgba(74,158,255,.12); }

/* ═══════════════════════════════════════════════════════════
   PRICING
═══════════════════════════════════════════════════════════ */
.pricing-section { padding:clamp(60px,8vw,100px) clamp(16px,5vw,60px); }
.pricing-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:16px; margin-top:48px;
}
.pr-card {
  background:var(--glass); border:1px solid var(--b1);
  border-radius:var(--r5); padding:28px;
  position:relative; overflow:hidden;
  transition:all var(--tx-slow); cursor:default;
  backdrop-filter:blur(12px);
}
.pr-card:hover { transform:translateY(-4px); border-color:var(--b2); }
.pr-card.featured {
  background:linear-gradient(160deg,rgba(124,111,255,0.1),rgba(0,212,170,0.04));
  border-color:rgba(124,111,255,0.35);
  box-shadow:0 0 40px rgba(124,111,255,0.1);
}
.pr-card.featured::before {
  content:''; position:absolute; top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--violet),var(--cyan),transparent);
}
.pr-pop {
  position:absolute; top:20px; right:20px;
  padding:4px 11px; border-radius:var(--rFull);
  background:rgba(124,111,255,0.15); color:var(--violet3);
  font-size:10px; font-weight:700; border:1px solid rgba(124,111,255,0.25);
}
.pr-name { font-size:12.5px; font-weight:600; color:var(--t2); margin-bottom:14px; }
.pr-price { display:flex; align-items:baseline; gap:4px; margin-bottom:22px; }
.pr-val { font-family:var(--ff-display); font-size:40px; font-weight:700; letter-spacing:-2px; }
.pr-per { font-size:13px; color:var(--t3); }
.pr-feats { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.pr-feat { display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--t2); line-height:1.4; }
.pr-check {
  width:16px;height:16px;border-radius:50%;flex-shrink:0;margin-top:1px;
  background:rgba(0,212,170,0.14); color:var(--cyan);
  display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;
  transition:transform var(--tx-spring);
}
.pr-card:hover .pr-check { transform:scale(1.15); }

/* ═══════════════════════════════════════════════════════════
   CTA
═══════════════════════════════════════════════════════════ */
.cta-section {
  padding:clamp(60px,8vw,100px) clamp(16px,5vw,60px);
  text-align:center; position:relative; overflow:hidden;
}
.cta-section h2 {
  font-family:var(--ff-display);
  font-size:clamp(2rem,5vw,3.2rem);
  font-weight:800; letter-spacing:-1.5px;
  margin-bottom:14px;
}
.cta-section p { font-size:16px; color:var(--t2); max-width:480px; margin:0 auto 32px; line-height:1.75; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.l-footer {
  border-top:1px solid var(--b1);
  padding:clamp(24px,4vw,40px) clamp(16px,5vw,60px);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
.l-footer-links { display:flex; gap:20px; flex-wrap:wrap; }
.l-footer-links a { font-size:12px; color:var(--t3); transition:color var(--tx-base); }
.l-footer-links a:hover { color:var(--t2); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  .l-links { display:none; }
  .hero h1 { letter-spacing:-2px; }
  .hero-stats { flex-direction:column; }
  .hero-stat { border-right:none; border-bottom:1px solid var(--b1); }
  .hero-stat:last-child { border:none; }
  .sdg-row { flex-direction:column; }
  .l-footer { flex-direction:column; align-items:flex-start; }
}
@media (max-width:480px) {
  .hero-cta { flex-direction:column; }
  .hero-cta .btn { width:100%; }
}