/* =========================================================
   NEURAL / AI MARKETING ACADEMY — SHARED DESIGN SYSTEM
   Premium SaaS, Apple-inspired, purple→blue gradient system
   ========================================================= */

:root{
  --bg:            #ffffff;
  --bg-soft:       #f7f7fc;
  --bg-deep:       #f0eefb;
  --ink:           #0e0e1b;
  --ink-soft:      #55576b;
  --ink-faint:     #9092a8;
  --border:        #e8e8f2;
  --border-soft:   #f0f0f7;

  --purple:        #6d28d9;
  --purple-2:      #8b5cf6;
  --purple-pale:   #f3eeff;
  --blue:          #2563eb;
  --blue-2:        #3b82f6;
  --blue-pale:     #eaf1ff;

  --grad:          linear-gradient(135deg, #6d28d9 0%, #4f46e5 50%, #2563eb 100%);
  --grad-soft:     linear-gradient(135deg, rgba(109,40,217,.08), rgba(37,99,235,.08));
  --grad-text:     linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);

  --success:       #0ea968;
  --success-pale:  #e8faf2;
  --amber:         #d9770e;
  --amber-pale:    #fdf1e3;

  --radius-lg:     26px;
  --radius:        18px;
  --radius-sm:     12px;

  --shadow-soft:   0 20px 60px -24px rgba(35,26,91,.20);
  --shadow-card:   0 12px 32px -16px rgba(35,26,91,.14);
  --shadow-btn:    0 14px 30px -10px rgba(88,40,217,.45);

  --font-display:  'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-body:     'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; letter-spacing:-0.02em; color:var(--ink); }
p{ margin:0; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ padding:88px 0; position:relative; }
.section--tight{ padding:64px 0; }
@media (max-width:768px){
  .section{ padding:64px 0; }
  .section--tight{ padding:44px 0; }
}

/* ---------- Backgrounds ---------- */
.bg-soft{ background:var(--bg-soft); }
.bg-mesh{
  background:
    radial-gradient(700px 420px at 12% -10%, rgba(139,92,246,.16), transparent 60%),
    radial-gradient(600px 400px at 100% 0%, rgba(37,99,235,.14), transparent 60%),
    var(--bg);
}
.bg-dark{
  background: linear-gradient(180deg,#0e0e1b 0%, #171730 100%);
  color:#fff;
}
.bg-dark .ink-soft{ color:rgba(255,255,255,.62); }

/* ---------- Type helpers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--purple); background:var(--purple-pale);
  border:1px solid #e6d9ff; padding:7px 14px; border-radius:999px;
  font-weight:600;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--purple); box-shadow:0 0 0 3px rgba(109,40,217,.18); }
.grad-text{
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.h1{ font-size:clamp(34px,5.4vw,60px); font-weight:800; line-height:1.06; }
.h2{ font-size:clamp(28px,3.6vw,42px); font-weight:800; line-height:1.12; }
.h3{ font-size:clamp(20px,2.2vw,26px); font-weight:750; line-height:1.25; }
.lede{ font-size:clamp(16px,1.6vw,19px); color:var(--ink-soft); line-height:1.6; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.section-head{ max-width:660px; margin:0 auto 48px; text-align:center; }
.section-head .h2{ margin-top:14px; }
.section-head .lede{ margin-top:14px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:16px;
  padding:16px 30px; border-radius:14px; border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{
  background:var(--grad); color:#fff; box-shadow:var(--shadow-btn);
}
.btn-primary:hover{ box-shadow:0 18px 38px -10px rgba(88,40,217,.55); transform:translateY(-1px); }
.btn-ghost{
  background:#fff; color:var(--ink); border-color:var(--border);
}
.btn-ghost:hover{ border-color:var(--purple-2); color:var(--purple); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-block{ width:100%; }
.btn-lg{ padding:19px 34px; font-size:17.5px; border-radius:16px; }
.btn-sub{ display:block; margin-top:12px; font-size:13px; color:var(--ink-faint); text-align:center; }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.78); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:18px; }
.brand-mark{
  width:32px;height:32px;border-radius:9px; background:var(--grad);
  display:flex;align-items:center;justify-content:center; color:#fff; font-size:15px; font-weight:800;
}
.nav-links{ display:flex; gap:34px; }
.nav-links a{ font-size:14.5px; font-weight:600; color:var(--ink-soft); }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-mobile-toggle{ display:none; }
@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-cta .btn-ghost{ display:none; }
}

/* ---------- Cards ---------- */
.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
.card-pad{ padding:28px; }

/* AI terminal / output signature component */
.ai-card{
  background:#0e0e1b; border-radius:var(--radius); padding:22px 22px 20px;
  box-shadow:var(--shadow-soft); color:#fff; font-family:var(--font-mono); font-size:13.5px;
  border:1px solid #23233f;
}
.ai-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ai-dots{ display:flex; gap:6px; }
.ai-dots span{ width:9px; height:9px; border-radius:50%; background:#3a3a5c; }
.ai-tag{
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#b9a4ff;
  background:rgba(139,92,246,.14); border:1px solid rgba(139,92,246,.35);
  padding:4px 9px; border-radius:999px;
}
.ai-line{ color:#8f93b8; margin-bottom:8px; }
.ai-line b{ color:#fff; font-weight:600; }
.ai-out{ color:#e6e6ff; line-height:1.65; }
.ai-cursor{
  display:inline-block; width:7px; height:15px; background:var(--purple-2);
  margin-left:2px; vertical-align:-2px; animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.03em;
  background:var(--bg-soft); border:1px solid var(--border); color:var(--ink-soft);
  padding:5px 11px; border-radius:999px;
}
.chip b{ color:var(--purple); }

/* ---------- Badges / pills ---------- */
.pill-success{
  display:inline-flex; align-items:center; gap:8px; background:var(--success-pale); color:var(--success);
  font-weight:700; font-size:13px; padding:7px 13px; border-radius:999px;
}
.pill-amber{
  display:inline-flex; align-items:center; gap:8px; background:var(--amber-pale); color:var(--amber);
  font-weight:700; font-size:13px; padding:7px 13px; border-radius:999px;
}

/* ---------- Grid utils ---------- */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3{ grid-template-columns:repeat(2,1fr); } .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* ---------- Stat / benefit tiles ---------- */
.stat-tile{
  border:1px solid var(--border); border-radius:var(--radius); padding:26px 22px; background:#fff;
}
.stat-num{ font-family:var(--font-display); font-weight:800; font-size:34px; }
.stat-label{ margin-top:6px; color:var(--ink-soft); font-size:14px; }

.benefit-card{
  border:1px solid var(--border); border-radius:var(--radius); padding:26px; background:#fff;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.benefit-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:#e2d9ff; }
.benefit-icon{
  width:46px; height:46px; border-radius:13px; background:var(--grad-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--purple);
}
.benefit-card h3{ margin-bottom:8px; }
.benefit-card p{ color:var(--ink-soft); font-size:14.5px; }

/* ---------- Testimonials ---------- */
.t-card{
  border:1px solid var(--border); border-radius:var(--radius); padding:24px; background:#fff;
}
.t-stars{ color:#f5a623; font-size:14px; margin-bottom:12px; letter-spacing:2px; }
.t-quote{ font-size:15px; color:var(--ink); line-height:1.6; }
.t-person{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.t-avatar{
  width:42px; height:42px; border-radius:50%; background:var(--grad);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:15px;
}
.t-name{ font-weight:700; font-size:14px; }
.t-role{ font-size:12.5px; color:var(--ink-faint); }
.t-result{ margin-top:14px; display:inline-block; }

/* ---------- Curriculum ---------- */
.curr-module{
  border:1px solid var(--border); border-radius:var(--radius); background:#fff;
  padding:22px 24px; display:flex; gap:18px; align-items:flex-start;
}
.curr-num{
  font-family:var(--font-mono); font-weight:700; color:var(--purple); font-size:13px;
  background:var(--purple-pale); border-radius:10px; padding:8px 10px; min-width:44px; text-align:center;
}
.curr-meta{ display:flex; gap:14px; margin-top:8px; font-size:12.5px; color:var(--ink-faint); font-family:var(--font-mono); }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 4px; font-weight:700; font-size:16px;
}
.faq-plus{ width:22px; height:22px; flex:none; position:relative; }
.faq-plus::before,.faq-plus::after{
  content:''; position:absolute; background:var(--purple); top:50%; left:50%; transform:translate(-50%,-50%);
}
.faq-plus::before{ width:14px; height:2px; }
.faq-plus::after{ width:2px; height:14px; transition:transform .2s ease; }
.faq-item.open .faq-plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .28s ease; color:var(--ink-soft); font-size:14.5px; line-height:1.6; }
.faq-a p{ padding:0 4px 22px; }
.faq-item.open .faq-a{ max-height:400px; }

/* ---------- Pricing ---------- */
.price-card{
  border:1px solid var(--border); border-radius:var(--radius-lg); background:#fff; padding:34px;
  box-shadow:var(--shadow-card); position:relative;
}
.price-card.featured{ border:2px solid var(--purple-2); box-shadow:var(--shadow-soft); }
.price-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--grad); color:#fff; font-size:12px; font-weight:700; padding:7px 16px; border-radius:999px;
}
.price-row{ display:flex; align-items:baseline; gap:10px; margin:18px 0 4px; }
.price-old{ font-size:18px; color:var(--ink-faint); text-decoration:line-through; }
.price-new{ font-family:var(--font-display); font-weight:800; font-size:44px; }
.price-cycle{ color:var(--ink-faint); font-size:14px; }
.price-list li{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; font-size:14.5px; color:var(--ink-soft); }
.check{ flex:none; width:19px; height:19px; border-radius:50%; background:var(--success-pale); color:var(--success); font-size:12px; display:flex; align-items:center; justify-content:center; margin-top:1px; }

/* ---------- Bonus ---------- */
.bonus-card{
  display:flex; gap:16px; border:1px dashed #d9c9ff; background:var(--purple-pale); border-radius:var(--radius);
  padding:20px; align-items:flex-start;
}
.bonus-val{ font-family:var(--font-mono); font-weight:700; color:var(--purple); font-size:13px; }

/* ---------- Guarantee ---------- */
.guarantee{
  display:flex; gap:24px; align-items:center; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:32px; background:linear-gradient(135deg,#fff, var(--bg-soft));
}
.guarantee-badge{
  width:88px; height:88px; border-radius:50%; background:var(--grad); flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display);
  font-weight:800; font-size:13px; text-align:center; line-height:1.2; box-shadow:var(--shadow-btn);
}

/* ---------- Urgency ---------- */
.timer{ display:flex; gap:10px; }
.timer-unit{
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px 14px; min-width:64px; text-align:center;
  box-shadow:var(--shadow-card);
}
.timer-num{ font-family:var(--font-mono); font-weight:800; font-size:24px; }
.timer-label{ font-size:10.5px; text-transform:uppercase; color:var(--ink-faint); letter-spacing:.05em; margin-top:2px; }

/* ---------- Footer ---------- */
.footer{ background:var(--ink); color:rgba(255,255,255,.6); padding:56px 0 28px; }
.footer .brand{ color:#fff; }
.footer-cols{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:36px; }
.footer-col h4{ color:#fff; font-size:13px; margin-bottom:14px; }
.footer-col a{ display:block; font-size:13.5px; padding:6px 0; color:rgba(255,255,255,.55); }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:24px; font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(255,255,255,.9); backdrop-filter:blur(14px);
  border-top:1px solid var(--border); padding:12px 16px;
  display:none; align-items:center; justify-content:space-between; gap:12px;
}
@media (max-width:820px){ .sticky-cta{ display:flex; } body{ padding-bottom:78px; } }
.sticky-cta .price-new{ font-size:20px; }

/* ---------- misc ---------- */
.divider{ height:1px; background:var(--border); }
.avatar-row{ display:flex; align-items:center; }
.avatar-row .t-avatar{ width:34px; height:34px; font-size:12px; margin-left:-10px; border:2px solid #fff; }
.avatar-row .t-avatar:first-child{ margin-left:0; }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:52px; width:max-content; animation:scroll 26s linear infinite; align-items:center; }
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.logo-chip{ font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--ink-faint); opacity:.65; white-space:nowrap; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}