/* ============================================================
   brand.css — AI Business OS Design System
   Launchpad × Nova | nova-ops.space
   ============================================================ */

/* ── 1. CUSTOM PROPERTIES ── */
:root {
  /* Backgrounds — deep purple-black */
  --bg:      #060412;
  --bg-2:    #09071A;
  --bg-3:    #0E0B24;
  --bg-card: #100D26;
  --bg-elev: #15112E;
  --bg-hover: rgba(255,255,255,.04);

  /* Launchpad — electric blue */
  --lp:      #4B8BF4;
  --lp-2:    #2D6EE8;
  --lp-acc:  #7FB3FF;
  --lp-dim:  rgba(75,139,244,.10);
  --lp-glow: rgba(75,139,244,.25);
  --lp-line: rgba(75,139,244,.20);

  /* Nova — violet */
  --nv:      #8B5CF6;
  --nv-2:    #7C3AED;
  --nv-acc:  #B18AF8;
  --nv-dim:  rgba(139,92,246,.10);
  --nv-glow: rgba(139,92,246,.25);
  --nv-line: rgba(139,92,246,.20);

  /* Brand gradient */
  --grad:     linear-gradient(135deg, #4B8BF4 0%, #8B5CF6 100%);
  --grad-rev: linear-gradient(135deg, #8B5CF6 0%, #4B8BF4 100%);
  --grad-sub: linear-gradient(135deg, rgba(75,139,244,.12) 0%, rgba(139,92,246,.12) 100%);

  /* Text */
  --txt:   #E2E4F0;
  --txt-2: #8B91AD;
  --txt-3: #4C5170;

  /* Borders */
  --bdr:   rgba(255,255,255,.06);
  --bdr-2: rgba(255,255,255,.11);
  --bdr-3: rgba(255,255,255,.18);

  /* Surfaces */
  --sur:   rgba(255,255,255,.04);
  --sur-2: rgba(255,255,255,.07);

  /* Semantic */
  --gold:  #F59E0B;
  --green: #22C55E;
  --red:   #EF4444;

  /* Radii */
  --r:     10px;
  --r-sm:  6px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-full: 9999px;

  /* Shadows */
  --sh-sm:   0 1px 4px rgba(0,0,0,.5);
  --sh-md:   0 4px 20px rgba(0,0,0,.6);
  --sh-lg:   0 8px 40px rgba(0,0,0,.7);
  --sh-card: 0 2px 24px rgba(0,0,0,.55);
  --sh-lp:   0 4px 32px rgba(75,139,244,.22);
  --sh-nv:   0 4px 32px rgba(139,92,246,.22);

  /* Transition */
  --t: .18s cubic-bezier(.16,1,.3,1);
  --t-slow: .4s cubic-bezier(.16,1,.3,1);

  /* Layout */
  --max-w: 1200px;
  --nav-h: 64px;
}

/* ── 2. RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
img,video,svg { display:block; max-width:100% }
a { color:inherit; text-decoration:none }
button,input,textarea,select { font:inherit; color:inherit }
ul,ol { list-style:none }

/* ── 3. BASE ── */
body {
  font-family: 'DM Sans','Helvetica Neue',system-ui,sans-serif;
  background: var(--bg);
  color: var(--txt);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── 4. TYPOGRAPHY ── */
h1 {
  font-size: clamp(2.6rem,5.5vw,4.8rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  color: #fff;
}
h2 {
  font-size: clamp(1.75rem,3.2vw,2.8rem);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.18;
  color: #fff;
}
h3 {
  font-size: clamp(1.1rem,1.8vw,1.4rem);
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.3;
  color: #fff;
}
h4 { font-size:1rem; font-weight:600; color:#fff; line-height:1.35 }
p  { color:var(--txt-2); line-height:1.72 }
.lead {
  font-size: clamp(.975rem,1.4vw,1.15rem);
  color: var(--txt);
  line-height: 1.68;
}
code,kbd { font-family:'IBM Plex Mono',monospace; font-size:.85em; background:var(--bg-3); padding:.1em .35em; border-radius:4px; color:var(--lp-acc) }
pre { font-family:'IBM Plex Mono',monospace; font-size:.875em; background:var(--bg-3); border:1px solid var(--bdr); border-radius:var(--r); padding:1.25rem 1.5rem; overflow-x:auto; color:var(--lp-acc) }

/* ── 5. NAVIGATION ── */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 1.75rem;
  background: rgba(6,4,18,.75);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--bdr);
  transition: background var(--t);
}
.site-nav.scrolled { background: rgba(6,4,18,.96) }
.nav-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: -.01em;
  flex-shrink: 0;
  margin-right: 2rem;
}
.nav-brand .os-name {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.nav-brand .os-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grad);
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
}
.nav-links a {
  padding: .45rem .9rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--txt-2);
  border-radius: var(--r-sm);
  transition: color var(--t), background var(--t);
  white-space: nowrap;
}
.nav-links a:hover { color: #fff }
.nav-links a.active { color: #fff }
.nav-links .nav-has-drop { position: relative }
.nav-links .nav-has-drop > a::after { content: ' ⌄'; font-size:.7rem; margin-left:1px }
.nav-drop {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--bg-3);
  border: 1px solid var(--bdr-2);
  border-radius: var(--r-lg);
  padding: .5rem;
  box-shadow: var(--sh-lg);
  z-index: 100;
}
.nav-has-drop:hover .nav-drop,
.nav-has-drop:focus-within .nav-drop { display: block; animation: fadeIn .15s ease }
.nav-drop a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .8rem;
  font-size: .835rem;
  font-weight: 500;
  color: var(--txt-2);
  border-radius: var(--r-sm);
  transition: all var(--t);
}
.nav-drop a:hover { color: #fff; background: var(--sur-2) }
.nav-drop a .drop-icon { font-size:.95rem; flex-shrink:0 }
.nav-drop-section { padding: .35rem .8rem .2rem; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-3); margin-top:.25rem }
.nav-drop hr { border:none; border-top:1px solid var(--bdr); margin:.4rem 0 }
.nav-ctas {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
  margin-left: auto;
}
.nav-hamburger span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--txt-2);
  border-radius: 2px;
  transition: all var(--t);
}
.nav-mobile {
  display: none;
  position: fixed;
  top: var(--nav-h); left:0; right:0;
  background: rgba(6,4,18,.98);
  border-bottom: 1px solid var(--bdr);
  padding: 1.25rem 1.5rem;
  z-index: 999;
  flex-direction: column;
  gap: .25rem;
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
}
.nav-mobile.open { display:flex }
.nav-mobile a {
  padding: .65rem .9rem;
  border-radius: var(--r-sm);
  color: var(--txt-2);
  font-size: .9rem;
  font-weight: 500;
  transition: all var(--t);
}
.nav-mobile a:hover { color:#fff; background:var(--sur) }
.nav-mobile .nav-mobile-section { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-3); padding:.75rem .9rem .25rem; }
.nav-mobile hr { border:none; border-top:1px solid var(--bdr); margin:.5rem 0 }

/* ── 6. FOOTER ── */
.site-footer {
  background: var(--bg-2);
  border-top: 1px solid var(--bdr);
  padding: 4rem 1.75rem 2rem;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr 1fr 1fr;
  gap: 3rem;
}
.footer-brand .footer-logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}
.footer-brand p { font-size:.85rem; max-width:200px; margin-top:.5rem }
.footer-col h5 {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--txt-3);
  margin-bottom: .85rem;
}
.footer-col a {
  display: block;
  font-size: .875rem;
  color: var(--txt-2);
  margin-bottom: .5rem;
  transition: color var(--t);
}
.footer-col a:hover { color: #fff }
.footer-bottom {
  max-width: var(--max-w);
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-bottom p { font-size:.8rem; color:var(--txt-3) }

/* ── 7. BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .625rem 1.35rem;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  border: none;
  transition: all var(--t);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  position: relative;
}
.btn:disabled { opacity:.4; pointer-events:none }

.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 2px 16px rgba(75,139,244,.3);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 24px rgba(75,139,244,.45); filter:brightness(1.08) }

.btn-secondary {
  background: var(--nv);
  color: #fff;
  box-shadow: 0 2px 16px var(--nv-glow);
}
.btn-secondary:hover { background:var(--nv-2); transform:translateY(-1px) }

.btn-outline {
  background: transparent;
  color: var(--txt);
  border: 1px solid var(--bdr-2);
}
.btn-outline:hover { background:var(--sur); border-color:var(--bdr-3); color:#fff }

.btn-ghost { background:transparent; color:var(--txt-2); border:none }
.btn-ghost:hover { color:#fff; background:var(--sur) }

.btn-lp { background:var(--lp); color:#fff; box-shadow:0 2px 14px var(--lp-glow) }
.btn-lp:hover { background:var(--lp-2); transform:translateY(-1px); box-shadow:0 4px 22px var(--lp-glow) }

.btn-nv { background:var(--nv); color:#fff; box-shadow:0 2px 14px var(--nv-glow) }
.btn-nv:hover { background:var(--nv-2); transform:translateY(-1px) }

.btn-sm  { padding:.45rem 1rem; font-size:.82rem }
.btn-lg  { padding:.8rem 2rem; font-size:.975rem }
.btn-xl  { padding:1rem 2.5rem; font-size:1.05rem }
.btn-full { width:100%; justify-content:center }

.btn-loading { color:transparent !important }
.btn-loading::after {
  content:'';
  position:absolute;
  width:15px; height:15px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .65s linear infinite;
}

/* ── 8. CARDS ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.card:hover { border-color:var(--bdr-2); box-shadow:var(--sh-card) }

.card-lp {
  border-top: 2px solid var(--lp);
  background: linear-gradient(160deg, var(--lp-dim) 0%, var(--bg-card) 55%);
}
.card-lp:hover { border-top-color:var(--lp-acc); box-shadow:var(--sh-lp) }

.card-nv {
  border-top: 2px solid var(--nv);
  background: linear-gradient(160deg, var(--nv-dim) 0%, var(--bg-card) 55%);
}
.card-nv:hover { border-top-color:var(--nv-acc); box-shadow:var(--sh-nv) }

/* ── 9. TOOL CARDS ── */
.tool-card {
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  transition: all var(--t);
  text-decoration: none;
  cursor: pointer;
}
.tool-card:hover { border-color:var(--lp-line); box-shadow:0 0 0 1px var(--lp-line), var(--sh-lp); transform:translateY(-3px) }
.tool-card .tool-icon { width:40px; height:40px; background:var(--lp-dim); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:1.2rem; border:1px solid var(--lp-line) }
.tool-card h3 { font-size:1rem; margin-bottom:.15rem }
.tool-card p  { font-size:.855rem }
.tool-card.nv-tool:hover { border-color:var(--nv-line); box-shadow:0 0 0 1px var(--nv-line), var(--sh-nv) }
.tool-card.nv-tool .tool-icon { background:var(--nv-dim); border-color:var(--nv-line) }

/* ── 10. PLATFORM SECTIONS ── */
.section { padding:5.5rem 1.75rem }
.section-sm { padding:3.5rem 1.75rem }
.section-lg { padding:7rem 1.75rem }
.section-dark { background:var(--bg-2); border-top:1px solid var(--bdr); border-bottom:1px solid var(--bdr) }
.section-darker { background:var(--bg-3); border-top:1px solid var(--bdr); border-bottom:1px solid var(--bdr) }

.container { max-width:var(--max-w); margin:0 auto; width:100% }
.container-sm { max-width:780px; margin:0 auto; width:100% }
.container-md { max-width:960px; margin:0 auto; width:100% }

.section-header { text-align:center; max-width:660px; margin:0 auto 3rem }
.section-header p.sub { margin-top:.65rem; font-size:1.05rem }

/* ── 11. HERO ── */
.hero {
  padding: calc(var(--nav-h) + 80px) 1.75rem 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--sur);
  border: 1px solid var(--bdr-2);
  border-radius: var(--r-full);
  padding: .3rem .9rem;
  font-size: .775rem;
  font-weight: 600;
  color: var(--txt-2);
  letter-spacing: .04em;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}
.hero h1 { margin-bottom:.85rem }
.hero .lead { max-width:560px; margin:0 auto 2rem }
.hero-ctas { display:flex; align-items:center; justify-content:center; gap:.85rem; flex-wrap:wrap }

/* Grid layouts */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem }
.grid-tools { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem }

/* ── 12. EYEBROWS & BADGES ── */
.eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-bottom: .65rem;
}
.eyebrow-lp { color:var(--lp-acc) }
.eyebrow-nv { color:var(--nv-acc) }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  border-radius: var(--r-full);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
}
.badge-lp   { background:var(--lp-dim); color:var(--lp-acc); border:1px solid var(--lp-line) }
.badge-nv   { background:var(--nv-dim); color:var(--nv-acc); border:1px solid var(--nv-line) }
.badge-gold  { background:rgba(245,158,11,.1); color:var(--gold) }
.badge-green { background:rgba(34,197,94,.1);  color:var(--green) }
.badge-red   { background:rgba(239,68,68,.1);   color:var(--red) }

/* ── 13. TOOL PAGE LAYOUT ── */
.tool-page { padding-top:var(--nav-h); min-height:100vh; display:flex; flex-direction:column }
.tool-header { background:var(--bg-2); border-bottom:1px solid var(--bdr); padding:2.5rem 1.75rem 2rem; text-align:center }
.tool-body { flex:1; max-width:820px; margin:0 auto; padding:2.5rem 1.75rem; width:100% }

/* ── 14. FORMS ── */
.tool-form { display:flex; flex-direction:column; gap:1.15rem }
.form-group { display:flex; flex-direction:column; gap:.38rem }
.form-group label { font-size:.825rem; font-weight:600; color:var(--txt-2); letter-spacing:.02em }
.form-control {
  background: var(--bg-3);
  border: 1px solid var(--bdr-2);
  border-radius: var(--r);
  padding: .7rem 1rem;
  color: var(--txt);
  font-size: .9rem;
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
  width: 100%;
}
.form-control::placeholder { color:var(--txt-3) }
.form-control:focus { border-color:var(--lp); box-shadow:0 0 0 3px var(--lp-dim) }
.form-control.nv:focus { border-color:var(--nv); box-shadow:0 0 0 3px var(--nv-dim) }
textarea.form-control { resize:vertical; min-height:100px }
select.form-control { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238B91AD' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.4rem }
.form-hint { font-size:.775rem; color:var(--txt-3) }

/* ── 15. OUTPUT CARDS ── */
.out-card { background:var(--bg-3); border:1px solid var(--bdr); border-radius:var(--r-lg); padding:1.75rem; margin-top:1.75rem; animation:fadeUp .35s ease both }
.out-card section { margin-top:1.25rem }
.out-card section:first-child { margin-top:0 }
.out-card h4 { font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--txt-3); margin-bottom:.6rem }
.out-card p, .out-card li { color:var(--txt); line-height:1.72; font-size:.925rem }
.out-card ul { padding-left:1.1rem; display:flex; flex-direction:column; gap:.3rem }
.out-card ul li { list-style:disc }
.out-card pre { margin-top:.75rem }

/* ── 16. PRICING ── */
.pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; align-items:start }
.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-xl);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
}
.pricing-card.featured {
  border: 1.5px solid var(--nv);
  box-shadow: 0 0 48px rgba(139,92,246,.18);
  transform: translateY(-6px);
}
.pricing-featured-badge {
  position: absolute;
  top: -1px; left: 50%; transform: translateX(-50%);
  background: var(--grad);
  color: #fff;
  padding: .25rem .9rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan-name { font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--txt-3) }
.plan-price { display:flex; align-items:baseline; gap:.2rem }
.plan-price .amount { font-size:2.5rem; font-weight:800; color:#fff; letter-spacing:-.04em; line-height:1 }
.plan-price .period { font-size:.875rem; color:var(--txt-3) }
.plan-desc { font-size:.875rem; color:var(--txt-2); line-height:1.55 }
.plan-features { display:flex; flex-direction:column; gap:.6rem; flex:1 }
.plan-features li { display:flex; align-items:flex-start; gap:.55rem; font-size:.855rem; color:var(--txt-2) }
.plan-features li::before { content:'✓'; color:var(--green); font-weight:700; flex-shrink:0; line-height:1.5 }
.plan-divider { border:none; border-top:1px solid var(--bdr); margin:.25rem 0 }

/* ── 17. STEPS ── */
.steps { display:flex; flex-direction:column; gap:1.75rem; position:relative }
.steps::before { content:''; position:absolute; left:19px; top:0; bottom:0; width:1.5px; background:linear-gradient(to bottom, var(--lp-line), var(--nv-line)); }
.step { display:flex; align-items:flex-start; gap:1.25rem; position:relative }
.step-num { width:40px; height:40px; border-radius:50%; background:var(--bg-3); border:1.5px solid var(--bdr-2); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.875rem; color:var(--txt-2); flex-shrink:0; position:relative; z-index:1 }
.step-num.lp { background:var(--lp-dim); border-color:var(--lp-line); color:var(--lp-acc) }
.step-num.nv { background:var(--nv-dim); border-color:var(--nv-line); color:var(--nv-acc) }
.step-content { padding-top:.4rem }
.step-content h4 { color:#fff; margin-bottom:.3rem }

/* ── 18. ALERTS ── */
.alert { padding:.9rem 1.1rem; border-radius:var(--r); border:1px solid transparent; font-size:.875rem; display:flex; align-items:flex-start; gap:.65rem }
.alert-info  { background:var(--lp-dim); border-color:rgba(75,139,244,.2); color:var(--lp-acc) }
.alert-nv    { background:var(--nv-dim); border-color:rgba(139,92,246,.2); color:var(--nv-acc) }
.alert-green { background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.2); color:var(--green) }
.alert-red   { background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.2);  color:var(--red) }

/* ── 19. UTILITIES ── */
.gradient-text { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.gradient-text-nv { background:linear-gradient(135deg,var(--nv-acc),var(--lp-acc)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.glow-lp { box-shadow:0 0 40px var(--lp-glow) }
.glow-nv { box-shadow:0 0 40px var(--nv-glow) }
.text-center { text-align:center }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }

.spinner { width:22px; height:22px; border:2px solid var(--bdr-2); border-top-color:var(--lp); border-radius:50%; animation:spin .65s linear infinite }

/* ── 20. REVEAL ANIMATION ── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .55s ease, transform .55s ease }
.reveal.visible { opacity:1; transform:none }
.reveal-delay-1 { transition-delay:.1s }
.reveal-delay-2 { transition-delay:.2s }
.reveal-delay-3 { transition-delay:.3s }
.reveal-delay-4 { transition-delay:.4s }

/* ── 21. KEYFRAMES ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes pop { 0%{transform:scale(.88);opacity:0} 70%{transform:scale(1.04)} 100%{transform:scale(1);opacity:1} }

/* ── 22. RESPONSIVE ── */
@media(max-width:1024px) {
  .pricing-grid { grid-template-columns:repeat(2,1fr) }
  .pricing-card.featured { transform:none }
  .grid-4 { grid-template-columns:repeat(2,1fr) }
  .footer-inner { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  :root { --nav-h:58px }
  .site-nav { padding:0 1.1rem }
  .nav-links,.nav-ctas { display:none }
  .nav-hamburger { display:flex }

  .section { padding:3.5rem 1.1rem }
  .section-lg { padding:5rem 1.1rem }
  .hero { padding:calc(var(--nav-h) + 60px) 1.1rem 60px }

  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr }
  .pricing-grid { grid-template-columns:1fr }
  .footer-inner { grid-template-columns:1fr; gap:1.75rem }
  .footer-bottom { flex-direction:column; text-align:center }

  h1 { font-size:clamp(2rem,9vw,2.8rem) }
  h2 { font-size:clamp(1.5rem,6vw,2rem) }

  .hero-ctas { flex-direction:column; width:100%; align-items:stretch }
  .hero-ctas .btn { text-align:center; justify-content:center }
}
@media(max-width:480px) {
  .card,.tool-card { padding:1.1rem }
  .pricing-card { padding:1.5rem 1.25rem }
  .out-card { padding:1.25rem }
}

/* ============================================================
   PREMIUM ENHANCEMENT LAYER — v2
   Futuristic depth, animations, glow, theme-flip sections
   ============================================================ */

/* ── READABILITY BOOST ── */
:root {
  --txt-strong: #F5F7FF;
  --sh-glow-lp: 0 0 0 1px rgba(75,139,244,.35), 0 8px 32px rgba(75,139,244,.25), inset 0 1px 0 rgba(255,255,255,.06);
  --sh-glow-nv: 0 0 0 1px rgba(139,92,246,.35), 0 8px 32px rgba(139,92,246,.25), inset 0 1px 0 rgba(255,255,255,.06);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-in-out-quart: cubic-bezier(.77,0,.175,1);
  --nav-h-scrolled: 56px;
}
body { font-size: 16.5px; letter-spacing: -.005em; }
@media (min-width: 768px) { body { font-size: 17px; } }
p { color: var(--txt); }
.lead { color: var(--txt-strong); font-weight: 400; }
h1, h2, h3, h4 { color: var(--txt-strong); }
.site-nav a, .nav-mobile a { color: #C5CAE0; }

/* ── ANIMATED AURORA BACKGROUND ── */
.aurora-bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.aurora-bg::before,
.aurora-bg::after {
  content: ''; position: absolute;
  width: 60vw; height: 60vw; border-radius: 50%;
  filter: blur(90px); opacity: .55;
  animation: aurora-float 22s ease-in-out infinite;
}
.aurora-bg::before {
  top: -20%; left: -15%;
  background: radial-gradient(circle, rgba(75,139,244,.45), transparent 60%);
}
.aurora-bg::after {
  bottom: -20%; right: -15%;
  background: radial-gradient(circle, rgba(139,92,246,.45), transparent 60%);
  animation-delay: -11s;
}
@keyframes aurora-float {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(8%, -6%) scale(1.12); }
  66%     { transform: translate(-6%, 8%) scale(.95); }
}

/* Starfield / grain overlay */
.grain-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .5;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 60px 70px, rgba(255,255,255,.22), transparent),
    radial-gradient(1px 1px at 120px 40px, rgba(181,170,255,.22), transparent),
    radial-gradient(1px 1px at 180px 110px, rgba(127,179,255,.25), transparent),
    radial-gradient(1px 1px at 250px 80px, rgba(255,255,255,.18), transparent),
    radial-gradient(1px 1px at 320px 160px, rgba(255,255,255,.22), transparent);
  background-size: 380px 220px;
  animation: starfield 90s linear infinite;
}
@keyframes starfield {
  from { background-position: 0 0; }
  to   { background-position: 380px 440px; }
}

/* Moving grid */
.grid-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .35;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, black 40%, transparent 80%);
}

/* ── NAV POLISH ── */
.site-nav {
  transition: background .3s var(--ease-out-expo), height .3s var(--ease-out-expo), border-color .3s;
  border-bottom-color: transparent;
}
.site-nav.scrolled {
  height: var(--nav-h-scrolled);
  background: rgba(6,4,18,.85);
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.nav-brand .os-dot {
  box-shadow: 0 0 14px rgba(139,92,246,.8);
  animation: pulse-dot 2.6s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 14px rgba(139,92,246,.8); transform: scale(1); }
  50%     { box-shadow: 0 0 22px rgba(139,92,246,1), 0 0 6px rgba(75,139,244,.6); transform: scale(1.15); }
}
.nav-links a {
  position: relative;
  transition: color .2s var(--ease-out-expo);
}
.nav-links a:not(.btn)::before {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: 4px; height: 1.5px;
  background: linear-gradient(90deg, var(--lp-acc), var(--nv-acc));
  border-radius: 2px; opacity: 0;
  transition: left .25s var(--ease-out-expo), right .25s var(--ease-out-expo), opacity .2s;
}
.nav-links a:not(.btn):hover::before,
.nav-links a.active:not(.btn)::before { left: 12px; right: 12px; opacity: 1; }
.nav-drop {
  transform: translateY(-6px);
  transition: transform .25s var(--ease-out-expo), opacity .2s;
  background: linear-gradient(180deg, #0E0B24 0%, #0A0818 100%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 24px 64px rgba(0,0,0,.7), 0 0 0 1px rgba(139,92,246,.1);
}
.nav-has-drop:hover .nav-drop,
.nav-has-drop:focus-within .nav-drop { transform: translateY(0); }
.nav-drop a { transition: background .2s, color .2s, transform .2s; }
.nav-drop a:hover { transform: translateX(4px); }

/* ── PREMIUM BUTTONS ── */
.btn {
  font-weight: 600; letter-spacing: -.005em;
  transition: transform .2s var(--ease-out-expo), box-shadow .25s, filter .2s, background .2s;
  will-change: transform;
}
.btn-primary {
  background: linear-gradient(135deg,#4B8BF4 0%,#7C5DFE 55%,#8B5CF6 100%);
  background-size: 200% 200%;
  animation: grad-shift 10s ease infinite;
  box-shadow: 0 6px 24px rgba(75,139,244,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.2), transparent 50%);
  opacity: 0; transition: opacity .3s;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 10px 36px rgba(139,92,246,.5); }
.btn-primary:hover::after { opacity: 1; }
@keyframes grad-shift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.btn-outline {
  background: rgba(255,255,255,.03); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,.14);
}
.btn-outline:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); transform: translateY(-2px); }
.btn-lp, .btn-nv {
  box-shadow: 0 6px 24px var(--lp-glow), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-nv { box-shadow: 0 6px 24px var(--nv-glow), inset 0 1px 0 rgba(255,255,255,.16); }
.btn-lp:hover, .btn-nv:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* Magnetic shimmer */
.btn-shimmer { position: relative; overflow: hidden; }
.btn-shimmer::before {
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ease-out-expo);
}
.btn-shimmer:hover::before { left: 120%; }

/* ── CARDS v2 (glow on hover, layered depth) ── */
.card, .tool-card, .pricing-card, .pc, .connect-side, .testi-card, .tool-card-full, .faq-item, .pain-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,0) 100%), var(--bg-card);
  transition: transform .35s var(--ease-out-expo), border-color .25s, box-shadow .35s;
  will-change: transform;
}
.card::after, .tool-card::after, .pc::after, .pricing-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,0%), rgba(139,92,246,.12), transparent 40%);
  opacity: 0; transition: opacity .4s;
}
.card:hover::after, .tool-card:hover::after, .pc:hover::after, .pricing-card:hover::after { opacity: 1; }
.card:hover, .tool-card:hover, .testi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(139,92,246,.22);
}

/* ── SECTIONS: GENEROUS, LAYERED ── */
.section { position: relative; }
.section-divider {
  position: relative; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14) 20%, rgba(139,92,246,.35) 50%, rgba(255,255,255,.14) 80%, transparent);
}
.section-divider::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--grad); box-shadow: 0 0 16px var(--nv-glow);
}

/* THEME FLIP: luminous inverse section (still dark but bright layered) */
.section-luminous {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139,92,246,.18) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 50% 100%, rgba(75,139,244,.14) 0%, transparent 55%),
    #0A0820;
  border-top: 1px solid rgba(139,92,246,.18);
  border-bottom: 1px solid rgba(139,92,246,.18);
  position: relative;
  overflow: hidden;
}
.section-luminous::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 150px 90px, rgba(181,170,255,.3), transparent),
    radial-gradient(1px 1px at 280px 30px, rgba(127,179,255,.3), transparent),
    radial-gradient(1px 1px at 70px 180px, rgba(255,255,255,.25), transparent);
  background-size: 320px 220px; pointer-events: none; opacity: .6;
}
.section-obsidian {
  background: #04030D;
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
  position: relative; overflow: hidden;
}
.section-obsidian::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 30% at 20% 20%, rgba(75,139,244,.08), transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 80%, rgba(139,92,246,.08), transparent 70%);
  pointer-events: none;
}

/* ── HERO v2 ── */
.hero-v2 {
  padding: calc(var(--nav-h) + 110px) 1.75rem 120px;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-v2 > .container { position: relative; z-index: 2; }
.hero-eyebrow-v2 {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(139,92,246,.28);
  border-radius: var(--r-full);
  padding: .4rem 1rem .4rem .75rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: #D9DDF2; text-transform: uppercase;
  box-shadow: 0 0 0 4px rgba(139,92,246,.05), inset 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hero-eyebrow-v2::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 12px rgba(139,92,246,.9);
  animation: pulse-dot 2s ease-in-out infinite;
}
.hero-headline {
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .98;
  color: #fff;
  margin-bottom: 1.25rem;
}
.hero-headline em {
  font-style: normal;
  background: linear-gradient(135deg, #7FB3FF 0%, #B18AF8 50%, #E879F9 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  position: relative;
  display: inline-block;
}
.hero-headline em::after {
  content: ''; position: absolute; left: 4%; right: 4%; bottom: -.08em; height: 4px;
  background: linear-gradient(90deg, rgba(75,139,244,0), var(--lp-acc), var(--nv-acc), rgba(139,92,246,0));
  border-radius: 2px;
  filter: blur(.5px);
  opacity: .7;
}
.hero-sub-v2 {
  max-width: 620px; margin: 0 auto 2.25rem;
  font-size: clamp(1rem,1.5vw,1.2rem);
  color: #C5CAE0; line-height: 1.65;
}
.trust-row {
  display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap;
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.trust-row .trust-item {
  font-size: .78rem; color: var(--txt-2); display: flex; align-items: center; gap: .5rem;
  font-weight: 500; letter-spacing: .04em;
}
.trust-row .trust-item::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px rgba(34,197,94,.6);
}

/* Scroll indicator */
.scroll-cue {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  font-size: .7rem; letter-spacing: .2em; color: var(--txt-3);
  text-transform: uppercase; animation: cue-bob 2.5s ease-in-out infinite;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  pointer-events: none; z-index: 2;
}
.scroll-cue::after {
  content: ''; width: 1px; height: 32px;
  background: linear-gradient(to bottom, var(--txt-3), transparent);
}
@keyframes cue-bob {
  0%,100% { transform: translate(-50%,0); opacity: .7; }
  50%     { transform: translate(-50%,8px); opacity: 1; }
}

/* ── REVEAL ANIMATION v2 ── */
.reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur {
  opacity: 0; will-change: opacity, transform, filter;
  transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo), filter .9s;
}
.reveal { transform: translateY(28px); }
.reveal-up { transform: translateY(40px); }
.reveal-left { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }
.reveal-scale { transform: scale(.94); }
.reveal-blur { filter: blur(10px); transform: translateY(20px); }
.reveal.visible, .reveal-up.visible, .reveal-left.visible, .reveal-right.visible, .reveal-scale.visible, .reveal-blur.visible {
  opacity: 1; transform: none; filter: none;
}
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-delay-5 { transition-delay: .4s; }
.reveal-delay-6 { transition-delay: .48s; }

/* ── STAT NUMBERS ── */
.stat-huge {
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .95;
  background: linear-gradient(135deg, #fff 0%, #B5C6FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── PLATFORM OVERVIEW ── */
.platform-preview {
  position: relative;
  border-radius: var(--r-2xl);
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, #0E0B24 0%, #07051A 100%);
  padding: 1.75rem;
  box-shadow: 0 40px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
}
.platform-preview::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 30% at 0% 0%, rgba(75,139,244,.12), transparent 60%),
    radial-gradient(ellipse 40% 30% at 100% 100%, rgba(139,92,246,.12), transparent 60%);
  pointer-events: none;
}
.preview-row {
  display: flex; gap: .75rem; flex-wrap: wrap;
  padding: .85rem; border-radius: var(--r);
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: .75rem;
}
.preview-row:last-child { margin-bottom: 0; }
.preview-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .8rem; border-radius: var(--r-full);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  font-size: .78rem; color: var(--txt);
  white-space: nowrap;
}
.preview-pill.live::after {
  content:''; width:6px; height:6px; border-radius:50%;
  background: var(--green); box-shadow: 0 0 10px rgba(34,197,94,.7);
  animation: pulse-dot 1.8s ease-in-out infinite;
}

/* ── MARQUEE ── */
.marquee {
  display: flex; overflow: hidden; gap: 0;
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}
.marquee-track {
  display: flex; gap: .85rem; padding: .25rem 0;
  animation: marquee 48s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── TAG CHIPS ── */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem; border-radius: var(--r-full);
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  font-size: .82rem; font-weight: 500; color: var(--txt);
  white-space: nowrap;
  transition: all .2s;
}
.chip:hover { background: rgba(255,255,255,.07); border-color: rgba(139,92,246,.3); color: #fff; }
.chip-lp { border-color: rgba(75,139,244,.3); background: rgba(75,139,244,.08); }
.chip-nv { border-color: rgba(139,92,246,.3); background: rgba(139,92,246,.08); }

/* ── TOOL CARD DELUX ── */
.tool-card-full {
  transition: transform .3s var(--ease-out-expo), border-color .25s, box-shadow .3s;
}
.tool-card-full::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--grad); opacity: 0; transition: opacity .3s;
}
.tool-card-full { position: relative; }
.tool-card-full:hover::before { opacity: 1; }

/* ── FEATURE GRID ── */
.feature-tile {
  background: linear-gradient(180deg, rgba(139,92,246,.06) 0%, rgba(255,255,255,0) 100%), var(--bg-card);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-xl);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease-out-expo), border-color .3s;
}
.feature-tile:hover { transform: translateY(-6px); border-color: rgba(139,92,246,.3); }
.feature-tile::after {
  content: ''; position: absolute; top: -40%; right: -20%; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.18), transparent 70%);
  opacity: 0; transition: opacity .4s;
}
.feature-tile:hover::after { opacity: 1; }
.feature-tile .icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(75,139,244,.18), rgba(139,92,246,.18));
  border: 1px solid rgba(139,92,246,.25);
  box-shadow: 0 6px 22px rgba(139,92,246,.2);
}

/* ── CTA BAND ── */
.cta-band {
  position: relative;
  border-radius: var(--r-2xl);
  padding: 3.5rem 2rem;
  background:
    radial-gradient(ellipse 70% 120% at 50% 100%, rgba(139,92,246,.28), transparent 55%),
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(75,139,244,.28), transparent 55%),
    #0A0820;
  border: 1px solid rgba(139,92,246,.25);
  text-align: center;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(75,40,160,.3), inset 0 1px 0 rgba(255,255,255,.08);
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 150px 90px, rgba(181,170,255,.5), transparent),
    radial-gradient(1px 1px at 280px 140px, rgba(127,179,255,.5), transparent);
  background-size: 320px 220px; opacity: .5;
  animation: starfield 40s linear infinite;
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }

/* ── FOOTER POLISH ── */
.site-footer {
  position: relative;
  background:
    radial-gradient(ellipse 50% 80% at 50% 0%, rgba(139,92,246,.12), transparent 60%),
    #060412;
  overflow: hidden;
}
.site-footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.6), transparent);
}

/* ── PRICING v2 extras ── */
.pc.featured {
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(139,92,246,.22), transparent 70%),
    var(--bg-card);
  box-shadow: 0 0 80px rgba(139,92,246,.22), 0 24px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
}
.pc.featured::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(135deg, rgba(139,92,246,.5), rgba(75,139,244,.35), rgba(139,92,246,.5));
  background-size: 200% 200%; animation: grad-shift 8s ease infinite;
  padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ── JOURNEY STEPS v2 ── */
.journey-step .journey-dot {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  transition: transform .3s var(--ease-out-expo), box-shadow .3s, border-color .3s;
}
.journey-step:hover .journey-dot {
  transform: scale(1.1) translateY(-3px);
}

/* ── ORB DECORATION ── */
.orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(70px); opacity: .55; z-index: 0;
  animation: aurora-float 20s ease-in-out infinite;
}
.orb-lp { background: radial-gradient(circle, rgba(75,139,244,.6), transparent 60%); }
.orb-nv { background: radial-gradient(circle, rgba(139,92,246,.6), transparent 60%); }

/* ── MICRO-INTERACTIONS ── */
a[href], button { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(139,92,246,.35); color: #fff; }
:focus-visible { outline: 2px solid var(--nv-acc); outline-offset: 3px; border-radius: 4px; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #060412; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #2D6EE8, #7C3AED); border-radius: 6px; border: 2px solid #060412; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #4B8BF4, #8B5CF6); }

/* ── NAV CTA STYLE ── */
.nav-ctas .btn { transition: all .2s var(--ease-out-expo); }

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

/* Small mobile fixes */
@media (max-width: 640px) {
  .hero-v2 { padding: calc(var(--nav-h) + 70px) 1.1rem 72px; }
  .cta-band { padding: 2.25rem 1.25rem; }
  .trust-row { gap: 1rem; }
}

/* ============================================================
   PREMIUM MOTION LAYER v3 — Framer-class interactions
   ============================================================ */

/* ── CUSTOM CURSOR ── */
.cursor-dot {
  width: 8px; height: 8px;
  background: var(--nv-acc);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 9999;
  mix-blend-mode: screen;
  transition: width .22s var(--ease-out-expo), height .22s var(--ease-out-expo), background .22s, opacity .3s;
}
.cursor-ring {
  width: 32px; height: 32px;
  border: 1.5px solid rgba(177,138,248,.45);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 9998;
  will-change: transform;
  transition: width .32s var(--ease-out-expo), height .32s var(--ease-out-expo), border-color .3s;
}
.cursor-dot.hovered { width: 14px; height: 14px; background: var(--lp-acc); }
.cursor-ring.hovered { width: 52px; height: 52px; border-color: rgba(75,139,244,.35); }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }

/* ── SCROLL PROGRESS BAR ── */
#scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; z-index: 9999;
  background: linear-gradient(90deg, #4B8BF4 0%, #8B5CF6 60%, #E879F9 100%);
  width: 0%;
  transition: width .08s linear;
  box-shadow: 0 0 14px rgba(139,92,246,.8);
  pointer-events: none;
}

/* ── MARQUEE CHIP ── */
.marquee-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-full);
  font-size: .82rem; color: var(--txt);
  white-space: nowrap; flex-shrink: 0;
}
.marquee-chip.lp { border-color: var(--lp-line); background: var(--lp-dim); color: var(--lp-acc); }
.marquee-chip.nv { border-color: var(--nv-line); background: var(--nv-dim); color: var(--nv-acc); }

/* ── ABOUT SECTION ── */
.about-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 900px) { .about-two-col { grid-template-columns: 1fr; gap: 2.5rem; } }

.about-manifesto {
  background: linear-gradient(135deg, rgba(75,139,244,.07), rgba(139,92,246,.09));
  border: 1px solid rgba(139,92,246,.22);
  border-radius: var(--r-xl);
  padding: 2rem;
  position: relative; overflow: hidden;
  margin-bottom: 1.5rem;
}
.about-manifesto::before {
  content: '\201C';
  position: absolute; top: -.25em; left: .5rem;
  font-size: 7rem; line-height: 1;
  color: rgba(139,92,246,.12); font-weight: 900;
  pointer-events: none; user-select: none;
}
.about-manifesto p { color: var(--txt); font-size: 1.05rem; line-height: 1.72; font-style: italic; position: relative; z-index: 1; }

.about-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .85rem;
}
.about-stat-item {
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  padding: 1.25rem .75rem;
  transition: transform .3s var(--ease-out-expo), border-color .25s, box-shadow .25s;
}
.about-stat-item:hover { transform: translateY(-4px); border-color: var(--bdr-2); box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.about-stat-item .n {
  font-size: 2rem; font-weight: 800; letter-spacing: -.04em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1;
}
.about-stat-item .l { font-size: .7rem; color: var(--txt-3); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; margin-top: .3rem; }

/* ── FAQ ACCORDION ── */
.faq-acc { display: flex; flex-direction: column; gap: .75rem; }
.faq-acc-item {
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,0) 100%), var(--bg-card);
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.faq-acc-item:hover { border-color: var(--bdr-2); }
.faq-acc-item.open {
  border-color: rgba(139,92,246,.35);
  box-shadow: 0 0 0 1px rgba(139,92,246,.1), 0 8px 32px rgba(0,0,0,.45);
}
.faq-acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem; background: none; border: none; cursor: pointer; text-align: left;
  font-weight: 600; font-size: .95rem; color: var(--txt-strong); font-family: inherit;
  transition: color .2s;
}
.faq-acc-trigger:hover { color: var(--nv-acc); }
.faq-acc-icon {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--bdr-2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1.15rem; color: var(--txt-3); line-height: 1;
  transition: all .35s var(--ease-out-expo);
}
.faq-acc-item.open .faq-acc-icon {
  background: rgba(139,92,246,.15);
  border-color: rgba(139,92,246,.45);
  color: var(--nv-acc);
  transform: rotate(45deg);
}
.faq-acc-body { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.16,1,.3,1); }
.faq-acc-item.open .faq-acc-body { max-height: 600px; }
.faq-acc-body-inner {
  padding: 0 1.5rem 1.25rem;
  border-top: 1px solid var(--bdr);
  padding-top: 1rem;
  font-size: .9rem; color: var(--txt-2); line-height: 1.75;
}

/* ── SECTION GLOW ACCENTS ── */
.section-glow-lp { position: relative; overflow: hidden; }
.section-glow-lp::after {
  content: ''; position: absolute;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(75,139,244,.13), transparent 60%);
  top: -180px; right: -120px;
  pointer-events: none;
  animation: aurora-float 18s ease-in-out infinite;
}
.section-glow-nv { position: relative; overflow: hidden; }
.section-glow-nv::after {
  content: ''; position: absolute;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.16), transparent 60%);
  bottom: -160px; left: -100px;
  pointer-events: none;
  animation: aurora-float 22s ease-in-out infinite reverse;
}

/* ── TERMINAL BOX ── */
.terminal-box {
  background: #040211;
  border: 1px solid rgba(75,139,244,.22);
  border-radius: var(--r-xl);
  padding: 1.75rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .82rem;
  box-shadow: 0 32px 72px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.04);
  position: relative; overflow: hidden;
}
.terminal-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--lp), var(--nv));
}
.t-row { padding: .28rem 0; display: flex; align-items: center; gap: .7rem; }
.t-muted { color: var(--txt-3); }
.t-red { color: #f87171; }
.t-green { color: #4ade80; }
.t-blue { color: var(--lp-acc); }
.t-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.t-dot.red { background: #f87171; }
.t-dot.green { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.7); }
.t-divider { margin: .85rem 0; height: 1px; background: rgba(255,255,255,.06); }

/* ── FEATURE ROW ── */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center;
}
.feature-row.reverse { direction: rtl; }
.feature-row.reverse > * { direction: ltr; }
@media (max-width: 860px) {
  .feature-row { grid-template-columns: 1fr; gap: 2.5rem; direction: ltr; }
  .feature-row.reverse { direction: ltr; }
}

/* ── METRIC CARD ── */
.metric-card {
  background: linear-gradient(145deg, rgba(139,92,246,.08), var(--bg-card));
  border: 1px solid rgba(139,92,246,.18);
  border-radius: var(--r-xl);
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative; overflow: hidden;
  transition: transform .3s var(--ease-out-expo), box-shadow .3s;
}
.metric-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(139,92,246,.3); }
.metric-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,0%), rgba(139,92,246,.1), transparent 40%);
  opacity: 0; transition: opacity .4s;
}
.metric-card:hover::before { opacity: 1; }
.metric-card .mnum { font-size: clamp(2.4rem,4vw,3.2rem); font-weight: 800; letter-spacing: -.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.metric-card .mlabel { font-size: .78rem; color: var(--txt-3); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; margin-top: .5rem; }
.metric-card .mdesc { font-size: .82rem; color: var(--txt-2); margin-top: .4rem; }

/* ── PAGE HERO MESH ── */
.page-hero-mesh {
  padding: calc(var(--nav-h) + 96px) 1.75rem 96px;
  text-align: center;
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(75,139,244,.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(139,92,246,.13) 0%, transparent 55%),
    var(--bg);
}
.page-hero-mesh > .container { position: relative; z-index: 2; }
.page-hero-mesh .grid-bg {
  mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 40%, transparent 90%);
}

/* ── FAQ PAGE SIDEBAR ── */
.faq-page-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 4rem;
  align-items: start;
}
.faq-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}
.faq-nav-title { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); margin-bottom: .75rem; padding: 0 .5rem; }
.faq-nav-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .85rem; border-radius: var(--r-sm);
  font-size: .855rem; font-weight: 500; color: var(--txt-2);
  text-decoration: none; transition: all .2s; margin-bottom: .1rem;
}
.faq-nav-link:hover { color: #fff; background: var(--sur); }
.faq-nav-link.active { color: var(--nv-acc); background: var(--nv-dim); }
.faq-group-label {
  display: flex; align-items: center; gap: .75rem;
  padding-bottom: 1rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--bdr);
}
.faq-group-label .gi { font-size: 1.2rem; }
.faq-group-label h3 { font-size: 1rem; }
.faq-group-count { margin-left: auto; font-size: .7rem; font-family: 'IBM Plex Mono', monospace; color: var(--txt-3); background: var(--sur); border: 1px solid var(--bdr); border-radius: var(--r-full); padding: .15rem .6rem; }
.faq-group { margin-bottom: 3rem; }
.faq-group:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .faq-page-grid { grid-template-columns: 1fr; }
  .faq-sidebar { position: static; display: none; }
  .page-hero-mesh { padding: calc(var(--nav-h) + 60px) 1.1rem 72px; }
}