*{margin:0;padding:0;box-sizing:border-box}
:root{
  --black:#08080A;
  --black2:#0E0E12;
  --white:#F4F2EE;
  --violet:#6D28D9;
  --violet-lite:rgba(109,40,217,0.12);
  --muted:rgba(244,242,238,0.55); /* was .38 — computed ~3.2:1 against the black bg, below WCAG AA's 4.5:1 for normal text. Every real usage (testimonial roles, the comparison table's "Traditional" column, the reassurance line under Buy Now) is meaningful content, not decoration, so it needs to actually be readable. .55 lands around 5.8:1. */
  --body:rgba(244,242,238,0.78);
  --border:rgba(244,242,238,0.07);
  --border2:rgba(244,242,238,0.12);
}
html{scroll-behavior:smooth}
/* visible focus ring for keyboard navigation — the custom cursor and
   `cursor:none` treatment elsewhere are mouse-only signals, so keyboard
   users still need their own clear "this is focused" indicator. Only
   fires for keyboard focus (:focus-visible), never on a mouse click. */
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:2px}
body{
  background:var(--black);
  color:var(--white);
  font-family:'Space Grotesk',sans-serif;
  overflow-x:hidden;
}
@media (pointer:fine){body{cursor:none}}


/* ── LOGO SVG ── */
.logo-symbol{color:var(--white);flex-shrink:0}
.logo-wordmark{color:var(--white);flex-shrink:0}
.logo-symbol-path{fill:currentColor}
.logo-wordmark-path{fill:currentColor}
@media(max-width:540px){
  .logo-wordmark{width:90px;height:26px}
  .logo-symbol{width:24px;height:17px}
}
/* ── CURSOR ── */
#cur{position:fixed;width:8px;height:8px;background:var(--violet);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s,opacity .2s;display:none}
#cur-r{position:fixed;width:32px;height:32px;border:1px solid rgba(109,40,217,0.45);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .2s,height .2s,border-color .2s,background .2s;display:none}
@media (pointer:fine){#cur,#cur-r{display:block}}
/* hover state — since the native pointer is hidden over every clickable
   element (see the pointer:fine cursor:none rule below), the custom
   cursor needs to visibly change on its own to still signal "clickable". */
#cur.cur-hover{opacity:0}
#cur-r.cur-hover{width:52px;height:52px;border-color:rgba(109,40,217,.7);background:rgba(109,40,217,.12)}

/* ── LOADER ── */
#loader{position:fixed;inset:0;background:var(--black);z-index:9000;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .7s cubic-bezier(.4,0,.2,1);overflow:hidden}
#loader.out{opacity:0;pointer-events:none}
#loader::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(109,40,217,.18) 0%,transparent 60%);animation:ld-glow 2.4s ease-in-out infinite}
@keyframes ld-glow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
/* dotted texture at low opacity, purely decorative behind the logo */
#loader::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(244,242,238,.13) 1px,transparent 1px);
  background-size:26px 26px;
  opacity:.35;
}

.ld-logo{
  position:relative;z-index:1;
  font-size:clamp(32px,6vw,52px);font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--white);
  opacity:0;transform:translateY(10px) scale(.96);filter:blur(10px);
  animation:ld-reveal 1s cubic-bezier(.16,1,.3,1) forwards;
}
.ld-logo span{color:var(--violet)}
@keyframes ld-reveal{to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}

.ld-bar{position:relative;z-index:1;width:130px;height:2px;margin-top:32px;background:rgba(244,242,238,.1);border-radius:2px;overflow:hidden;opacity:0;animation:ld-fadein .5s ease .35s forwards}
.ld-bar-fill{width:0%;height:100%;background:linear-gradient(90deg,var(--violet),#A78BFA);border-radius:2px;box-shadow:0 0 12px rgba(109,40,217,.6)}
@keyframes ld-fadein{to{opacity:1}}

/* ── NAV (glassmorphic floating bar on desktop) ── */
nav{
  position:fixed;top:16px;left:50%;
  transform:translateX(-50%);
  width:calc(100% - 64px);max-width:1150px;
  z-index:800;display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px 14px 28px;
  border-radius:100px;
  background:rgba(20,20,28,.38);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(244,242,238,.09);
  box-shadow:0 8px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(244,242,238,.05);
  transition:top .5s cubic-bezier(.16,1,.3,1),background .4s ease,box-shadow .4s ease,border-color .4s ease;
}
nav.on{
  top:10px;
  background:rgba(12,12,16,.62);
  border-color:rgba(244,242,238,.14);
  box-shadow:0 14px 44px rgba(0,0,0,.42),inset 0 1px 0 rgba(244,242,238,.07);
}
.n-logo{font-size:13px;font-weight:700;letter-spacing:.35em;text-transform:uppercase;color:var(--white);text-decoration:none;display:inline-block}
.n-logo span{color:var(--violet)}
.n-links{display:flex;gap:6px;list-style:none}
.n-links a{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,242,238,.5) !important;text-decoration:none !important;padding:9px 16px;border-radius:100px;transition:color .2s,background .2s,box-shadow .2s}
.n-links a:hover{color:var(--white) !important;background:rgba(244,242,238,.08)}
/* clearly distinct from :hover — a violet-tinted pill (the brand accent,
   not just a lighter grey) so it reads unmistakably as "you are here"
   rather than something that could be mistaken for a hover state. */
.n-links a.active{color:var(--white) !important;background:rgba(109,40,217,.24);box-shadow:inset 0 0 0 1px rgba(109,40,217,.4)}
.n-btn{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  background:rgba(109,40,217,.55);color:#fff;
  border:1px solid rgba(167,139,250,.5);
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  box-shadow:0 8px 24px rgba(109,40,217,.3),inset 0 1px 0 rgba(255,255,255,.15);
  padding:11px 22px;border-radius:100px;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s}
.n-btn:hover{background:rgba(109,40,217,.78);transform:scale(1.04);box-shadow:0 10px 30px rgba(109,40,217,.4),inset 0 1px 0 rgba(255,255,255,.2)}
/* every interactive element sets its own `cursor:pointer`/`text` etc.,
   which — since CSS cursor is only inherited, not forced — overrides the
   custom-cursor dot's `body{cursor:none}` and shows the native system
   pointer on top of it at the same time. Keeping the custom cursor the
   only cursor means anything clickable needs the same none override. */
@media (pointer:fine){
  /* !important: class selectors like .btn-solid{cursor:pointer} outrank
     this plain type-selector list, so without it the pointer still leaks
     through on every styled button. */
  a,button,input,textarea,select,summary,[onclick],[role="button"]{cursor:none !important}
}

/* mobile hamburger button (JS-injected once at load, shown/hidden purely
   by this media query rather than a one-time JS width check — so it still
   appears correctly if the window is resized or a tablet is rotated after
   the page has already loaded at a wider size). */
.n-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:38px;height:38px;background:rgba(244,242,238,.06);border:1px solid rgba(244,242,238,.12);border-radius:50%;cursor:pointer;flex-shrink:0}
@media (max-width:900px){.n-burger{display:flex}}
.n-burger span{display:block;width:16px;height:1.5px;background:#F4F2EE;transition:transform .3s ease,opacity .3s ease}
.n-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.n-burger.open span:nth-child(2){opacity:0}
.n-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile fullscreen glass overlay menu */
#mobile-nav-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(8,8,10,.72);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  backdrop-filter:blur(28px) saturate(160%);
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  opacity:0;transition:opacity .35s ease;
}
#mobile-nav-overlay.open{display:flex;opacity:1}
#mobile-nav-overlay a{
  font-family:'JetBrains Mono',monospace;font-size:14px;letter-spacing:.25em;text-transform:uppercase;
  color:rgba(244,242,238,.7);text-decoration:none;
  opacity:0;transform:translateY(14px);
  transition:opacity .4s ease,transform .4s ease,color .2s ease;
}
#mobile-nav-overlay a:hover{color:#fff}
#mobile-nav-overlay a.active{color:var(--violet)}
#mobile-nav-overlay.open a{opacity:1;transform:translateY(0)}
#mobile-nav-overlay .mn-close{
  position:absolute;top:24px;right:24px;
  background:rgba(244,242,238,.09);border:1px solid rgba(244,242,238,.18);border-radius:50%;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  width:42px;height:42px;font-size:20px;color:#F4F2EE;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
#mobile-nav-overlay .mn-cta{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  background:rgba(109,40,217,.55);color:#fff;
  border:1px solid rgba(167,139,250,.5);
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  box-shadow:0 8px 24px rgba(109,40,217,.3),inset 0 1px 0 rgba(255,255,255,.15);
  padding:14px 28px;border-radius:100px;
  cursor:pointer;margin-top:6px;
  opacity:0;transform:translateY(14px);transition:opacity .4s ease .05s,transform .4s ease .05s,background .2s;
}
#mobile-nav-overlay .mn-cta:hover{background:rgba(109,40,217,.78)}
#mobile-nav-overlay.open .mn-cta{opacity:1;transform:translateY(0)}
.n-btn:hover{background:#5B21B6}

/* PRICING MODAL — plan picker shown before Whish checkout starts, so the
   buyer chooses Individual / Company-Online / Company-On-site (with a
   per-person counter) before any payment session is created. */
#pricing-modal{
  position:fixed;inset:0;z-index:9500;
  background:rgba(8,8,10,.86);
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  display:none;align-items:flex-start;justify-content:center;
  opacity:0;transition:opacity .3s ease;
  overflow-y:auto;padding:90px 20px 40px;
}
#pricing-modal.open{display:flex;opacity:1}
.pm-panel{
  width:100%;max-width:920px;
  background:var(--black2);border:1px solid var(--border2);
  padding:48px;position:relative;
  opacity:0;transform:translateY(18px);transition:opacity .35s ease .05s,transform .35s ease .05s;
}
#pricing-modal.open .pm-panel{opacity:1;transform:translateY(0)}
.pm-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--violet),transparent)}
.pm-close{
  position:absolute;top:20px;right:20px;
  background:rgba(244,242,238,.09);border:1px solid rgba(244,242,238,.18);border-radius:50%;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  width:38px;height:38px;font-size:18px;color:#F4F2EE;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.pm-eye{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.28em;color:var(--violet);text-transform:uppercase;margin-bottom:14px}
.pm-title{font-size:clamp(24px,4vw,32px);font-weight:700;letter-spacing:-.02em;margin-bottom:10px;padding-right:40px}
.pm-sub{font-size:14px;font-weight:300;color:var(--body);line-height:1.7;margin-bottom:36px;max-width:560px}
.pm-group-lbl{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-bottom:14px}
.pm-options{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pm-opt{
  background:rgba(255,255,255,.025);border:1px solid var(--border2);padding:26px 22px;border-radius:2px;
  cursor:pointer;text-align:left;font-family:inherit;color:var(--white);width:100%;
  transition:border-color .2s,background .2s;
}
.pm-opt:hover{border-color:rgba(109,40,217,.5);background:rgba(109,40,217,.06)}
.pm-opt.selected{border-color:var(--violet);background:rgba(109,40,217,.1)}
.pm-opt-lbl{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;color:var(--violet);text-transform:uppercase;margin-bottom:10px}
.pm-opt-title{font-size:17px;font-weight:600;margin-bottom:8px}
.pm-opt-desc{font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.pm-opt-price{font-size:21px;font-weight:700}
.pm-opt-price small{font-size:11px;font-weight:400;color:var(--muted);margin-left:5px}
.pm-group{margin-top:28px}
.pm-group:first-of-type{margin-top:0}
.pm-people-field{display:flex;align-items:center;gap:14px}
.pm-people-field input{
  width:100px;padding:12px 14px;border-radius:2px;border:1px solid var(--border2);background:rgba(255,255,255,.03);
  color:var(--white);font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;
  font-variant-numeric:tabular-nums;transition:border-color .2s;
}
.pm-people-field input:hover{border-color:rgba(244,242,238,.35)}
.pm-people-field input:focus{border-color:var(--violet)}
.pm-people-field input::-webkit-outer-spin-button,.pm-people-field input::-webkit-inner-spin-button{opacity:1}
.pm-people-suffix{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.pm-people-hint{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.03em;color:var(--muted);margin-top:12px;text-transform:none}
.pm-summary{
  border-top:1px solid var(--border);padding-top:26px;margin-top:32px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
}
.pm-total{font-size:28px;font-weight:700}
.pm-total small{font-size:12px;font-weight:400;color:var(--muted);margin-left:8px;text-transform:none;letter-spacing:0}
.pm-perperson{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.05em;color:var(--muted)}
@media (max-width:720px){
  .pm-options{grid-template-columns:1fr}
  .pm-panel{padding:32px 22px}
  .pm-summary{flex-direction:column;align-items:flex-start}
  .pm-summary .btn-solid{width:100%}
}

/* ── HERO (static image) ── */
#hero{position:relative;height:100vh;display:flex;align-items:center;overflow:hidden;background:#050506}
#hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.hero-gradient{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),
    radial-gradient(120% 90% at 50% 100%,rgba(109,40,217,.28) 0%,rgba(8,8,10,0) 55%),
    linear-gradient(180deg,rgba(8,8,10,.88) 0%,rgba(8,8,10,.15) 32%,rgba(8,8,10,.1) 60%,rgba(8,8,10,.92) 100%);
}
.hero-inner{position:relative;z-index:2;padding:0 56px;width:100%}
.h-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;color:var(--white);text-transform:uppercase;margin-bottom:32px;opacity:0}
.h-title{font-size:clamp(62px,10vw,128px);font-weight:700;line-height:.88;letter-spacing:-.045em;opacity:0}
.h-title .ghost{color:var(--white)}
.h-title .v{color:var(--violet);font-family:'JetBrains Mono',monospace}
.h-row{display:flex;flex-direction:column;align-items:flex-start;gap:30px;max-width:460px;margin-top:40px;opacity:0}
/* hero content stays hidden until the loader hands off (JS adds
   .ready right as it starts fading) so the reveal reads as one
   continuous motion instead of finishing invisibly underneath it. */
#hero.ready .h-tag{animation:up .7s 0s forwards}
#hero.ready .h-title{animation:up .8s .15s forwards}
#hero.ready .h-row{animation:up .7s .35s forwards}
#hero.ready .h-scroll{animation:up .5s .55s forwards}
.h-sub{font-size:15px;font-weight:300;color:var(--body);line-height:1.75;max-width:440px}
/* hero's standout CTA — a distinct violet gradient pill with a slow
   pulsing glow ring so it visually outranks the plain white/outline
   buttons used elsewhere on the page. */
.btn-glow{position:relative;display:inline-flex;align-items:center;gap:12px;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(135deg,#8B5CF6,#5B21B6);color:#fff;
  border:1px solid rgba(167,139,250,.65);
  padding:18px 32px;border-radius:100px;cursor:pointer;
  box-shadow:0 14px 40px rgba(109,40,217,.4),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
  animation:btnGlowPulse 2.6s ease-in-out infinite;
}
.btn-glow svg{width:14px;height:14px;transition:transform .25s ease}
.btn-glow:hover{transform:translateY(-2px) scale(1.03);background:linear-gradient(135deg,#A78BFA,#6D28D9);box-shadow:0 0 0 10px rgba(139,92,246,.12),0 18px 50px rgba(109,40,217,.55),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-glow:hover svg{transform:translateX(4px)}
@keyframes btnGlowPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.4),0 14px 40px rgba(109,40,217,.4),inset 0 1px 0 rgba(255,255,255,.25)}
  50%{box-shadow:0 0 0 12px rgba(139,92,246,0),0 14px 46px rgba(109,40,217,.55),inset 0 1px 0 rgba(255,255,255,.25)}
}
.btn-solid{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  background:rgba(244,242,238,.85);color:var(--black);
  border:1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  box-shadow:0 8px 24px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.7);
  border-radius:100px;padding:15px 30px;cursor:pointer;transition:background .2s,box-shadow .2s,transform .2s}
.btn-solid:hover{background:rgba(255,255,255,.97);transform:translateY(-1px);box-shadow:0 12px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.8)}
.btn-out{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  background:rgba(244,242,238,.07);color:rgba(244,242,238,.82);
  border:1px solid rgba(244,242,238,.28);
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  box-shadow:0 4px 18px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.08);
  border-radius:100px;padding:15px 30px;cursor:pointer;transition:all .2s}
.btn-out:hover{color:var(--white);background:rgba(244,242,238,.14);border-color:rgba(244,242,238,.45)}
.h-scroll{position:absolute;bottom:40px;left:56px;z-index:2;display:flex;align-items:center;gap:16px;opacity:0}
.h-line{width:44px;height:1px;background:var(--border2);position:relative;overflow:hidden}
.h-line::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--violet);animation:scan 2.2s 1.5s ease-in-out infinite}
@keyframes scan{0%{left:-100%}100%{left:100%}}
.h-scroll-t{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.22em;color:rgba(255,255,255,.18);text-transform:uppercase}
@keyframes up{to{opacity:1;transform:translateY(0)}from{opacity:0;transform:translateY(28px)}}

/* ── BAND ── */
.band{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;overflow:hidden}
/* dotted texture, fading in from the hero above and back out before the
   About teaser below (which has no pattern of its own). */
.band::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(244,242,238,.11) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);
  mask-image:linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);
}
.band-item{padding:48px 56px;border-right:1px solid var(--border);position:relative;z-index:1;overflow:hidden}
.band-item:last-child{border-right:none}
.band-num{font-size:54px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--white)}
.band-num sup{font-size:22px;color:var(--violet);vertical-align:super}
.band-lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-top:10px}

/* ── ABOUT ── */
.about{display:grid;grid-template-columns:1fr;min-height:auto;position:relative;overflow:hidden}
/* just the violet glow — no dotted texture. Shared by the About page's
   real about section and the homepage's About/Services teasers. */
.about::before{content:'';position:absolute;top:-160px;left:50%;transform:translateX(-50%);width:900px;height:480px;background:radial-gradient(circle,rgba(109,40,217,.14) 0%,transparent 70%);pointer-events:none;z-index:0}
/* large outline numeral in the corner — gives these sections scale and
   personality instead of just being a heading + paragraph. */
.sec-ghost-num{position:absolute;top:20px;right:56px;z-index:0;pointer-events:none;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:clamp(90px,14vw,220px);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(244,242,238,.08);letter-spacing:-.02em;
}
.about-text{position:relative;z-index:1;padding:80px 56px;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--border);max-width:980px;margin:0 auto}
.sec-eye{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.28em;color:var(--violet);text-transform:uppercase;margin-bottom:20px}
.sec-h{font-size:clamp(30px,3.5vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.05;margin-bottom:20px}
.sec-p{font-size:14px;font-weight:300;color:var(--body);line-height:1.85;margin-bottom:32px}
.about-pills{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border);margin-top:8px}
.pill{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border);transition:padding-left .25s}
.pill:hover{padding-left:6px}
.pill-l{font-size:13px;font-weight:500}
.pill-r{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;color:var(--violet);text-transform:uppercase}



/* ── 3D FULL SECTION ── */
#full3d{position:relative;height:560px;background:var(--black2);overflow:hidden;display:flex;align-items:center;max-width:1600px;margin:0 auto}
#full3d-canvas{position:absolute;inset:0;width:100%;height:100%}
.full3d-text{position:relative;z-index:2;padding:0 56px;max-width:560px}
.full3d-text .sec-eye{margin-bottom:20px}
.full3d-title{font-size:clamp(36px,5vw,62px);font-weight:700;letter-spacing:-.035em;line-height:1;margin-bottom:20px}
.full3d-desc{font-size:14px;font-weight:300;color:var(--body);line-height:1.85;max-width:400px}
.steps-inline{display:flex;flex-direction:column;gap:0;margin-top:36px;border-top:1px solid var(--border)}
.step-row{display:flex;align-items:flex-start;gap:20px;padding:18px 0;border-bottom:1px solid var(--border)}
.step-n{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(109,40,217,.5);min-width:22px;margin-top:2px}
.step-info .step-t{font-size:14px;font-weight:500;margin-bottom:3px}
.step-info .step-d{font-size:12px;font-weight:300;color:var(--body);line-height:1.6}

/* ── COURSE ── */
.course{padding:100px 56px;background:var(--black);position:relative;overflow:hidden}
.course-glow{position:absolute;top:-200px;right:-200px;width:700px;height:700px;background:radial-gradient(circle,rgba(109,40,217,.07) 0%,transparent 65%);pointer-events:none}
/* dotted texture, standalone (the Services teaser above it has none).
   Scoped off .course itself so it only applies to the homepage's
   #course-teaser — course.html's own #course section already has its own
   canvas grid-scan effect (funnel-scan-wrap, below) and doesn't need a
   second pattern layered on top. */
.course::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(244,242,238,.09) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);
  mask-image:linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);
}
#course::after{content:none}
.course-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;position:relative;z-index:1}
.c-badge{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.22em;color:var(--violet);text-transform:uppercase;border:1px solid rgba(109,40,217,.28);padding:8px 16px;margin-bottom:28px}
.pulse{width:6px;height:6px;background:var(--violet);border-radius:50%;animation:blink 1.6s ease infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.c-title{font-size:clamp(28px,3.8vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.05;margin-bottom:20px}
.c-desc{font-size:14px;font-weight:300;color:var(--body);line-height:1.85;margin-bottom:40px}
.c-card{background:rgba(255,255,255,.025);border:1px solid var(--border2);padding:36px;position:relative}
.c-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--violet),transparent)}
.c-lbl{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.25em;color:rgba(255,255,255,.18);text-transform:uppercase;margin-bottom:24px}
.mod-list{list-style:none}
.mod{display:flex;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--border);font-size:13px;font-weight:300;color:rgba(244,242,238,.78);transition:color .2s}
.mod:last-child{border-bottom:none}
.mod:hover{color:var(--white)}
.mod-n{font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(109,40,217,.45);min-width:22px}
.price-row{display:flex;align-items:baseline;justify-content:space-between;margin-top:28px;padding-top:28px;border-top:1px solid var(--border)}
.price{font-size:32px;font-weight:700;letter-spacing:-.03em}
.price small{font-size:13px;font-weight:300;color:var(--muted);margin-left:6px}
.wl-count{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;color:rgba(109,40,217,.55)}

/* ── TOOLS MARQUEE ── */
.marquee{padding:52px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden}
.mq-track{display:flex;gap:52px;width:max-content;animation:mq 22s linear infinite}
.mq-track.rev{animation-direction:reverse;margin-top:18px}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mi{display:flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;color:#F4F2EE;white-space:nowrap;text-transform:uppercase}
.mi-dot{width:3px;height:3px;background:var(--violet);border-radius:50%;flex-shrink:0}

.f-link{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;color:rgba(255,255,255,.3);text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:3px;transition:color .2s,border-color .2s}
.f-link:hover{color:var(--violet);border-color:var(--violet)}

/* ── FOOTER ── */
footer{padding:22px 56px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.ft-l{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.15em;color:rgba(255,255,255,.14)}
.ft-r{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.15em;color:rgba(109,40,217,.38);cursor:pointer;transition:color .2s}
.ft-r:hover{color:var(--violet)}

/* ── REVEAL ── */
.rv{opacity:0;transform:translateY(36px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:translateY(0)}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:2px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:var(--violet)}

/* ── NOISE ── */
#noise{position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px}

/* ═══════════════════════════════════════
   RESPONSIVE — TABLET (≤900px)
═══════════════════════════════════════ */
@media (max-width:900px){
  #full3d{height:auto !important}
  #full3d-canvas{height:200px !important;position:relative !important}
  nav{padding:12px 14px 12px 22px;width:calc(100% - 48px)}
  .n-links{display:none}
  .n-btn{display:none}
  .hero-inner{padding:0 28px}
  .h-title{font-size:clamp(44px,11vw,80px)}
  .h-scroll{left:28px}
  .band{grid-template-columns:repeat(2,1fr)}
  .band-item{padding:32px 28px}
  .band-item:nth-child(2){border-right:none}
  .band-item:nth-child(3){border-top:1px solid var(--border)}
  .band-item:nth-child(4){border-top:1px solid var(--border);border-right:none}
  .about{grid-template-columns:1fr}
  .about-3d{min-height:360px}
  .about-text{padding:52px 28px;border-left:none;border-top:1px solid var(--border)}
  .sec-ghost-num{right:20px;font-size:clamp(64px,20vw,120px)}
  #full3d{height:auto;min-height:600px;flex-direction:column;justify-content:flex-end}
  #full3d-canvas{height:340px;position:relative;width:100%}
  .full3d-text{padding:36px 28px 52px;max-width:100%}
  .full3d-title{font-size:clamp(28px,5vw,42px)}
  .course{padding:72px 28px}
  .course-grid{grid-template-columns:1fr;gap:40px}
  footer{padding:20px 28px;flex-direction:column;gap:8px;text-align:center}
  .section{padding:72px 28px}
  .sec-h{font-size:clamp(26px,5vw,38px)}
}

/* ═══════════════════════════════════════
   RESPONSIVE — MOBILE (≤540px)
═══════════════════════════════════════ */
@media (max-width:540px){
  #full3d{height:auto !important;min-height:0 !important;background:var(--black)}
  #full3d-canvas{display:none !important;position:static !important;width:0 !important;height:0 !important}
  .full3d-text{padding:44px 20px !important;max-width:100% !important;position:relative !important}
  nav{padding:10px 12px 10px 18px;width:calc(100% - 32px);top:12px}
  .n-logo{font-size:11px;letter-spacing:.25em}
  .n-links{display:none}
  .n-btn{display:none}
  .hero-inner{padding:0 20px}
  #hero{height:100svh}
  .h-tag{font-size:9px;letter-spacing:.2em;margin-bottom:20px}
  .h-title{font-size:clamp(38px,13vw,62px);line-height:.92}
  .h-sub{font-size:13px;margin-top:20px}
  .h-row{width:100%}
  .btn-solid,.btn-out{width:100%;text-align:center;padding:16px 20px}
  .btn-glow{width:100%;justify-content:center}
  .h-scroll{display:none}
  .band{grid-template-columns:1fr 1fr}
  .band-item{padding:24px 20px;border-right:none}
  .band-item:nth-child(odd){border-right:1px solid var(--border)}
  .band-num{font-size:38px}
  .band-num sup{font-size:16px}
  .band-lbl{font-size:9px;margin-top:6px}
  .about-3d{min-height:260px}
  .about-text{padding:36px 20px}
  .sec-h{font-size:clamp(22px,6vw,32px)}
  .sec-p{font-size:13px}
  #full3d{min-height:auto}
  #full3d-canvas{height:260px}
  .full3d-text{padding:28px 20px 44px}
  .full3d-title{font-size:26px}
  .step-t{font-size:13px}
  .step-d{font-size:11px}
  .course{padding:52px 20px}
  .course-grid{gap:32px}
  .c-title{font-size:clamp(22px,6vw,32px)}
  .c-desc{font-size:13px}
  .c-card{padding:24px 20px}
  .mod{font-size:12px;gap:12px}
  .price{font-size:26px}
  .price small{font-size:11px}
  .price-row{flex-direction:column;gap:8px;align-items:flex-start}
  .mi{font-size:9px;gap:8px}
  .mq-track{gap:36px}
  footer{padding:18px 20px;gap:6px}
  .ft-l,.ft-r{font-size:8px;text-align:center}
  .section{padding:52px 20px}
  .sec-eye{font-size:9px}
}

/* ── BLOG ── */
.blog{padding:100px 56px;background:var(--black);position:relative;overflow:hidden}
.blog-header{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:52px}
.blog-heading{font-size:clamp(38px,5.5vw,68px);font-weight:700;letter-spacing:-.035em;line-height:.95;color:var(--white)}
.blog-subrow{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex:1;flex-wrap:wrap}
.blog-sub{font-size:14px;font-weight:300;color:var(--body);line-height:1.8;max-width:420px}
.blog-vwrap{position:relative;overflow:hidden;background:var(--black2)}
.blog-vwrap .blog-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.33,1,.68,1)}
.blog-vwrap:hover .blog-img{transform:scale(1.08)}
.blog-overlay{position:absolute;inset:0;background:rgba(8,8,10,.35);opacity:0;transition:opacity .4s ease;pointer-events:none}
.blog-vwrap:hover .blog-overlay{opacity:1}
.blog-plus{position:absolute;top:50%;left:50%;width:60px;height:60px;border-radius:50%;background:rgba(109,40,217,.28);border:1px solid rgba(255,255,255,.3);transform:translate(-50%,-50%) scale(.7);opacity:0;transition:transform .3s ease,opacity .3s ease;display:flex;align-items:center;justify-content:center;pointer-events:none}
.blog-vwrap:hover .blog-plus{transform:translate(-50%,-50%) scale(1);opacity:1}
.blog-plus svg{width:22px;height:22px}
.b-corner{position:absolute;width:12px;height:12px;border-color:rgba(244,242,238,.65);pointer-events:none}
.b-corner-tl{top:15px;left:15px;border-top:1.5px solid;border-left:1.5px solid}
.b-corner-tr{top:15px;right:15px;border-top:1.5px solid;border-right:1.5px solid}
.b-corner-bl{bottom:15px;left:15px;border-bottom:1.5px solid;border-left:1.5px solid}
.b-corner-br{bottom:15px;right:15px;border-bottom:1.5px solid;border-right:1.5px solid}
.cat-badge{display:inline-block;color:#fff;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;flex-shrink:0}
.blog-featured{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border2);background:var(--black2);min-height:480px;margin-bottom:25px}
.blog-featured .blog-vwrap{min-height:280px}
.blog-featured-content{padding:56px;display:flex;flex-direction:column}
.must-read{align-self:flex-start;background:var(--violet);color:#fff;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;padding:6px 14px;margin-bottom:26px}
.blog-featured-title{font-size:clamp(28px,3.6vw,42px);font-weight:700;letter-spacing:-.03em;line-height:1.08;color:var(--white);margin-bottom:18px}
.blog-featured-desc{font-size:14px;font-weight:300;color:var(--body);line-height:1.8}
.blog-featured-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:28px;border-top:1px solid var(--border)}
.blog-author{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--muted)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.blog-card-vwrap{aspect-ratio:16/10}
.blog-card-info{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.blog-card-title{font-size:14px;font-weight:600;line-height:1.4;color:var(--white)}

/* ── FOOTER (Kresna-style, reskinned) ── */
.footer-wrapper{max-width:1150px;margin:0 auto;padding:0 56px;display:grid;grid-template-columns:350px 1fr;gap:16px;align-items:start}
.footer-left{position:relative;min-height:320px;padding:32px;overflow:hidden;background:var(--black2);border:1px solid var(--border2);box-shadow:0 12px 40px rgba(109,40,217,.18);display:flex;flex-direction:column;justify-content:space-between}
.footer-left-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:1;pointer-events:none}
.footer-left::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,.08) 40%,rgba(8,8,10,.65) 100%);z-index:0}
.footer-logo{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.footer-logo-mark{width:32px;height:32px;background:var(--violet-lite);border:1.5px solid rgba(109,40,217,.7);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--white);letter-spacing:-.02em;flex-shrink:0}
.footer-logo-name{font-size:15px;font-weight:700;letter-spacing:.35em;text-transform:uppercase;color:var(--white)}
.footer-logo-name span{color:var(--violet)}
.footer-tagline-wrap{position:relative;margin-top:auto;margin-bottom:26px;z-index:1}
.footer-tagline{font-size:18px;font-weight:400;color:var(--white);line-height:1.45}
.footer-tagline span{color:rgba(244,242,238,.5)}
.footer-social-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:1}
.footer-social-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,242,238,.55)}
.footer-social-icons{display:flex;gap:7px}
.f-social-icon{width:34px;height:34px;background:rgba(255,255,255,.05);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s,border-color .2s}
.f-social-icon svg{width:14px;height:14px;fill:var(--white)}
.f-social-icon:hover{background:var(--violet);border-color:var(--violet);transform:translateY(-2px)}
.footer-right{background:rgba(255,255,255,.02);border:1px solid var(--border2);padding:40px;position:relative;display:flex;flex-direction:column;justify-content:space-between}
.footer-badge{position:absolute;top:-32px;right:40px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;z-index:10}
.footer-badge-mark{width:64px;height:64px;background:linear-gradient(135deg,#6D28D9 0%,#4C1D95 100%);border:1px solid rgba(109,40,217,.6);transform:rotate(-8deg);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 28px rgba(20,8,60,.4)}
.footer-badge-mark span{font-size:26px;font-weight:700;color:#fff;letter-spacing:-.03em;transform:rotate(8deg)}
.footer-badge-text{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--muted);transform:rotate(-3deg)}
.footer-nav-cols{display:flex;gap:72px;padding-top:8px}
.footer-col-title{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--violet);margin-bottom:20px}
.footer-col a{display:block;font-size:13px;font-weight:500;color:var(--body);margin-bottom:14px;text-decoration:none;transition:color .2s}
.footer-col a:last-child{margin-bottom:0}
.footer-col a:hover{color:var(--white)}
.footer-bottom-row{display:flex;align-items:center;justify-content:flex-start;gap:24px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border);flex-wrap:wrap}
.footer-watermark{max-width:1150px;margin:-40px auto 0;padding:0 56px;pointer-events:none;user-select:none;position:relative;z-index:0;line-height:0;overflow:hidden}
.footer-watermark svg{display:block;width:100%;height:auto;overflow:visible}
.footer-watermark text{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.03em;fill:rgba(244,242,238,.035)}

@media (max-width:900px){
  .blog{padding:72px 28px}
  .blog-featured{grid-template-columns:1fr}
  .blog-featured-content{padding:40px 28px}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .footer-wrapper{grid-template-columns:1fr;padding:0 28px}
  .footer-watermark{padding:0 28px;margin-top:24px}
  .footer-left{min-height:auto;gap:32px}
  /* stacked layout: footer-right now sits directly under footer-left,
     so the floating badge must stay inside its own card, not poke
     above into footer-left's content */
  .footer-badge{position:absolute;top:16px;right:16px}
  .footer-badge-mark{width:48px;height:48px}
  .footer-badge-mark span{font-size:19px}
  .footer-right{padding-top:88px}
  /* 34px was below the ~40-44px minimum comfortable touch target on
     tablet/mobile (Fitts's Law + WCAG 2.5.5); the icon glyph itself
     stays the same size, only the tappable box grows. */
  .footer-social-icons{gap:10px}
  .f-social-icon{width:42px;height:42px}
}
@media (max-width:540px){
  .blog{padding:52px 20px}
  .blog-heading{font-size:clamp(30px,9vw,42px)}
  .blog-header{flex-direction:column;align-items:flex-start}
  .blog-subrow{flex-direction:column;align-items:flex-start;gap:20px}
  .blog-grid{grid-template-columns:1fr}
  .blog-featured-title{font-size:26px}
  .footer-right{padding:24px;padding-top:84px}
  .footer-nav-cols{gap:36px}
  .footer-bottom-row{flex-direction:column;align-items:flex-start;gap:22px}
  .footer-badge{right:16px;top:16px}
}

/* ── COURSE OUTCOMES ── */
.c-outcomes{list-style:none;margin:28px 0 36px;display:flex;flex-direction:column;gap:13px}
.c-outcomes li{display:flex;align-items:flex-start;gap:12px;font-size:13px;font-weight:300;color:var(--body);line-height:1.5}
.c-outcomes svg{width:16px;height:16px;color:var(--violet);flex-shrink:0;margin-top:2px}

/* ── GRIDSCAN background, spans Testimonials → Course → FAQ as one continuous effect ── */
.funnel-scan-wrap{position:relative;overflow:hidden}
#funnel-grid-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;opacity:.4;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 3%,black 97%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,black 3%,black 97%,transparent 100%);
}

/* ── TESTIMONIALS (glass) ── */
.testimonials{padding:100px 56px;background:var(--black);position:relative}
.t-head{margin-bottom:52px}
.t-heading{font-size:clamp(30px,3.8vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.08;color:var(--white)}
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.t-card{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(244,242,238,.1);
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  box-shadow:0 8px 30px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06);
  padding:32px;display:flex;flex-direction:column;gap:22px;
}
.t-quote-mark{width:26px;height:20px;color:rgba(109,40,217,.55)}
.t-quote{font-size:14.5px;font-weight:300;color:rgba(244,242,238,.88);line-height:1.75}
.t-person{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:6px;border-top:1px solid var(--border)}
.t-name{font-size:13px;font-weight:600;color:var(--white)}
.t-role{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}

/* ── FAQ (glass accordion) ── */
.faq{padding:100px 56px;background:var(--black);position:relative}
.faq-head{margin-bottom:44px}
.faq-heading{font-size:clamp(30px,3.8vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.08;color:var(--white)}
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:900px;margin:0 auto}
.faq-item{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(244,242,238,.09);
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  padding:6px 24px;transition:background .2s,border-color .2s;
}
.faq-item[open]{background:rgba(109,40,217,.06);border-color:rgba(109,40,217,.25)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 0;cursor:pointer;list-style:none;
  font-size:14.5px;font-weight:500;color:var(--white);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-ic{font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--violet);transition:transform .25s;flex-shrink:0}
.faq-item[open] .faq-ic{transform:rotate(45deg)}
.faq-item p{font-size:13.5px;font-weight:300;color:var(--body);line-height:1.75;padding:0 0 22px;max-width:640px}

/* ── COMPARISON ── */
.compare{padding:100px 56px;background:var(--black2);position:relative;overflow:hidden}
#compare-sphere-canvas{position:absolute;top:0;right:-6%;width:42%;height:100%;pointer-events:none;opacity:.55;z-index:0}
@media (max-width:1100px){#compare-sphere-canvas{display:none}}
.compare-head{position:relative;z-index:1;margin-bottom:44px}
.compare-heading{font-size:clamp(30px,3.8vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.08;color:var(--white)}
.compare-table{position:relative;z-index:1;border:1px solid var(--border2);background:rgba(255,255,255,.02);width:100%;max-width:100%}
@media (min-width:1101px){.compare-table{max-width:54%}}
.compare-row{display:grid;grid-template-columns:1.4fr 1.3fr 1.3fr;gap:20px;padding:20px 32px;border-bottom:1px solid var(--border);align-items:center}
.compare-row:last-child{border-bottom:none}
.compare-row-head{padding-bottom:14px}
.compare-col-lbl{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.compare-col-lbl.old{color:var(--muted)}
.compare-col-lbl.new{color:var(--violet)}
.compare-metric{font-size:13px;font-weight:500;color:var(--white)}
.compare-old{font-size:13px;font-weight:300;color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(244,242,238,.25)}
.compare-new{font-size:13px;font-weight:600;color:var(--white);display:flex;align-items:center;gap:8px}
.compare-new::before{content:'';width:5px;height:5px;background:var(--violet);border-radius:50%;flex-shrink:0}

/* ── COURSE INCLUDED STRIP ── */
.c-included{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px;padding-top:24px;border-top:1px solid var(--border);font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.c-included-dot{width:3px;height:3px;background:var(--violet);border-radius:50%;flex-shrink:0}

@media (max-width:900px){
  .testimonials{padding:88px 28px}
  .t-grid{grid-template-columns:1fr;gap:20px}
  .faq{padding:88px 28px}
  .compare{padding:88px 28px}
  .compare-row{padding:18px 22px;grid-template-columns:1.4fr 1.3fr 1.3fr;gap:12px}
}
@media (max-width:540px){
  .testimonials{padding:52px 20px}
  .t-heading{font-size:clamp(26px,7vw,34px)}
  .faq{padding:52px 20px}
  .faq-heading{font-size:clamp(26px,7vw,34px)}
  .faq-item summary{font-size:13px;gap:12px}
  .compare{padding:52px 20px}
  .compare-heading{font-size:clamp(26px,7vw,34px)}
  .compare-row{grid-template-columns:1fr;gap:4px;padding:16px 18px}
  .compare-row-head{display:none}
  .compare-metric{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--violet);margin-bottom:4px}
  .compare-old{text-decoration:none;font-size:12px}
  .compare-old::before{content:'Was: '}
  .compare-new{font-size:13px}
}

/* ── CONTAINER — centers a section's content on wide screens instead of
   letting it stretch (or sit pinned left) edge to edge. Section elements
   keep their own full-bleed background/padding; this wraps only the
   substantive content inside them. Decorative absolutely-positioned
   canvases stay outside it (position:absolute resolves against the
   section, which stays position:relative, regardless of nesting). ── */
.container{max-width:1360px;margin:0 auto;width:100%;position:relative;z-index:1}

/* ── PAGE HERO — the intro banner at the top of each subpage: a bordered
   badge (reusing the same look as the course teaser's "Enrollment Open"
   pill, for consistency), a large title, a supporting line, a faint grid
   texture fading out from the center, and a short divider leading into
   the page's real content below. ── */
.page-hero{padding:220px 56px 90px;position:relative;background:var(--black);overflow:hidden;text-align:center}
.page-hero::before{content:'';position:absolute;top:-280px;left:50%;transform:translateX(-50%);width:1100px;height:620px;background:radial-gradient(circle,rgba(109,40,217,.22) 0%,transparent 68%);pointer-events:none}
/* dotted texture, fading out at both edges — the body sections below no
   longer carry a pattern of their own, so this banner is a self-contained
   patch rather than something that needs to flow into what follows it. */
.page-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(244,242,238,.13) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,black 30%,black 85%,transparent);
  mask-image:linear-gradient(to bottom,transparent,black 30%,black 85%,transparent);
}
.page-hero-inner{max-width:860px;margin:0 auto;position:relative;z-index:1}
.page-hero-inner .c-badge{margin:0 auto 28px}
.page-hero-title{font-size:clamp(42px,6.2vw,76px);font-weight:700;letter-spacing:-.035em;line-height:1.03;margin-bottom:24px}
.page-hero-sub{font-size:16px;font-weight:300;color:var(--body);line-height:1.75;max-width:620px;margin:0 auto}
.page-hero-line{width:1px;height:64px;background:linear-gradient(180deg,rgba(244,242,238,0),var(--border2));margin:48px auto 0}
@media (max-width:900px){.page-hero{padding:170px 28px 64px}.page-hero::before{width:700px;height:440px;top:-200px}}
@media (max-width:600px){.page-hero{padding:150px 20px 52px}.page-hero-line{height:40px;margin-top:32px}}

/* ── PAGE CTA — closing "Enroll Now" band reused identically on every
   subpage. Bordered top and bottom with a centered violet glow so it
   reads as a distinct section, and pulled away from the footer below by
   its own margin so the two don't sit flush against each other. ── */
.page-cta{padding:110px 56px;text-align:center;background:var(--black2);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);position:relative;overflow:hidden;margin-bottom:64px}
.page-cta::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:900px;height:520px;background:radial-gradient(circle,rgba(109,40,217,.16) 0%,transparent 70%);pointer-events:none}
.page-cta-title{position:relative;z-index:1;font-size:clamp(28px,3.8vw,42px);font-weight:700;letter-spacing:-.03em;margin-bottom:14px}
.page-cta-sub{position:relative;z-index:1;font-size:14px;font-weight:300;color:var(--body);max-width:480px;margin:0 auto 32px}
.page-cta .btn-solid{position:relative;z-index:1}
@media (max-width:600px){.page-cta{padding:70px 24px;margin-bottom:40px}}

/* ── FOUNDER — added to the About page so "who we are" also answers
   "who's actually behind this": name, role, a short bio, and direct
   links, in one bordered card. ── */
.founder{padding:100px 56px;background:var(--black);position:relative;overflow:hidden}
.founder::before{content:'';position:absolute;top:-140px;left:50%;transform:translateX(-50%);width:800px;height:420px;background:radial-gradient(circle,rgba(109,40,217,.12) 0%,transparent 70%);pointer-events:none;z-index:0}
.founder-eye{text-align:center;margin-bottom:36px;position:relative;z-index:1}
.founder-card{display:flex;gap:44px;align-items:flex-start;border:1px solid var(--border2);background:rgba(255,255,255,.02);padding:48px;position:relative;max-width:920px;margin:0 auto}
.founder-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--violet),transparent)}
.founder-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;border:1.5px solid rgba(109,40,217,.6);box-shadow:0 8px 24px rgba(109,40,217,.25);flex-shrink:0}
.founder-name{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.founder-role{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--violet);margin-bottom:20px}
.founder-bio{font-size:14px;font-weight:300;color:var(--body);line-height:1.85;margin-bottom:24px}
.founder-links{display:flex;gap:22px;flex-wrap:wrap}
@media (max-width:700px){
  .founder{padding:64px 24px}
  .founder-card{flex-direction:column;align-items:center;text-align:center;padding:36px 26px}
  .founder-links{justify-content:center}
}

/* ── CONTACT METHODS — HUD-style cards: bracket corners (same pattern as
   the blog cards' .b-corner), a mono index number, a "//" terminal-style
   label, a pulsing ring behind each icon badge, and a scan-line sweep on
   hover — pulling from visual language already used elsewhere on the
   site (blog card brackets, hero scan-line, the badge pulse dot) rather
   than inventing a new style, so it reads as futuristic *and* on-brand. ── */
.contact-methods{padding:100px 56px;background:var(--black);position:relative;overflow:hidden}
.contact-methods::before{content:'';position:absolute;top:-160px;left:50%;transform:translateX(-50%);width:900px;height:480px;background:radial-gradient(circle,rgba(109,40,217,.12) 0%,transparent 70%);pointer-events:none;z-index:0}

.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1360px;margin:0 auto;position:relative;z-index:1}
.contact-card{
  display:flex;flex-direction:column;
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.008));
  border:1px solid var(--border2);
  padding:40px 30px 34px;
  text-decoration:none;color:var(--white);
  position:relative;overflow:hidden;
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.contact-card .b-corner{border-color:rgba(109,40,217,.4);width:14px;height:14px;transition:border-color .3s}
.contact-card .b-corner-tl,.contact-card .b-corner-tr{top:14px}
.contact-card .b-corner-bl,.contact-card .b-corner-br{bottom:14px}
.contact-card .b-corner-tl,.contact-card .b-corner-bl{left:14px}
.contact-card .b-corner-tr,.contact-card .b-corner-br{right:14px}
.contact-card-index{position:absolute;top:18px;right:18px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:rgba(244,242,238,.22)}
.contact-card::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:1px;background:linear-gradient(90deg,transparent,#A78BFA,transparent);opacity:0}
.contact-card:hover{border-color:rgba(109,40,217,.55);box-shadow:0 24px 48px rgba(109,40,217,.16);transform:translateY(-4px)}
.contact-card:hover .b-corner{border-color:var(--violet)}
.contact-card:hover::after{opacity:1;animation:scan 1.5s ease-in-out infinite}
.contact-card-icon{width:56px;height:56px;border-radius:50%;background:var(--violet-lite);border:1.5px solid rgba(109,40,217,.5);display:flex;align-items:center;justify-content:center;margin-bottom:28px;position:relative;transition:background .3s,border-color .3s,box-shadow .3s;flex-shrink:0}
.contact-card-icon::before{content:'';position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(109,40,217,.35);animation:iconPulse 2.6s ease-in-out infinite}
@keyframes iconPulse{0%,100%{transform:scale(1);opacity:.65}50%{transform:scale(1.18);opacity:0}}
.contact-card:hover .contact-card-icon{background:rgba(109,40,217,.3);border-color:var(--violet);box-shadow:0 0 26px rgba(109,40,217,.55)}
.contact-card-icon svg{width:22px;height:22px;fill:var(--violet);position:relative;z-index:1}
.contact-card-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--violet);margin-bottom:14px}
.contact-card-label::before{content:'// '}
.contact-card-desc{font-size:12.5px;color:var(--muted);line-height:1.65;margin-bottom:22px}
.contact-card-value{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--white);word-break:break-word;margin-top:auto;padding-top:18px;border-top:1px solid var(--border);transition:text-shadow .3s}
.contact-card:hover .contact-card-value{text-shadow:0 0 16px rgba(167,139,250,.45)}
.contact-note{text-align:center;margin-top:52px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--muted);text-transform:none}
@media (max-width:900px){.contact-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.contact-methods{padding:60px 24px}.contact-grid{grid-template-columns:1fr}}