/* ============================================================================
   Balanceie Coaching - editorial dark, refined.
   Deep dark canvas, generous space, confident type, cobalt as a jewel accent.
   Signature: aurora hero + kinetic headline. Motion: refined & tasteful
   (slow clip/mask reveals, gentle parallax, magnetic buttons) - all
   transform/opacity, reduced-motion safe. Standalone, Google Fonts only.
   ========================================================================= */

/* ----- tokens --------------------------------------------------------------*/
:root {
  --blue:#2A4BE2; --blue-deep:#1E37B8; --blue-bright:#6E8BFF;
  --glow:rgba(91,124,255,.55);

  --bg:#08090C;            /* deep editorial near-black */
  --bg-deep:#050608;
  --surface:#0D0F13;       /* lifted band */
  --panel:#13151C;         /* card */
  --panel-2:#181B23;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  --fg:#EEF0F5; --fg-2:#9AA1AE; --fg-3:#646B79;

  --ok:#34D399; --no:#F87171; --gold:#F5B642;

  --serif:'Space Grotesk', system-ui, sans-serif;   /* display */
  --sans:'Inter', system-ui, -apple-system, sans-serif;

  --radius:20px; --radius-sm:14px; --radius-lg:34px; --pill:999px;
  --shadow:0 40px 90px -45px rgba(0,0,0,.85);
  --shadow-sm:0 20px 45px -28px rgba(0,0,0,.8);
  --shadow-blue:0 26px 60px -22px rgba(42,75,226,.6);

  --maxw:1220px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ----- reset ---------------------------------------------------------------*/
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:88px; }
@media (prefers-reduced-motion:no-preference){ html { scroll-behavior:smooth; } }
body {
  margin:0; font-family:var(--sans); font-size:16px; line-height:1.65;
  color:var(--fg); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection { background:rgba(91,124,255,.3); color:#fff; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
:focus-visible { outline:2.5px solid var(--blue-bright); outline-offset:3px; border-radius:6px; }

.ico { width:1.25em; height:1.25em; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; display:inline-block; vertical-align:middle; }

/* ----- texture + scroll progress ------------------------------------------*/
.grain { position:fixed; inset:0; z-index:200; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.progress-bar { position:fixed; top:0; left:0; height:2px; width:0; z-index:120;
  background:linear-gradient(90deg, var(--blue), var(--blue-bright)); box-shadow:0 0 12px var(--glow); transition:width .1s linear; }
@media (prefers-reduced-motion:reduce){ .grain { display:none; } }

/* ----- layout --------------------------------------------------------------*/
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 26px; }
.sect { position:relative; padding:clamp(76px,10vw,150px) 0; background:var(--bg); }
.sect--tight { padding:clamp(50px,7vw,96px) 0; }
.sect.alt, .sect.paper2 { background:var(--surface); }
.sect.deep, .sect.dark { background:var(--bg-deep); }
.sect + .sect.alt, .sect.alt + .sect { box-shadow:inset 0 1px 0 var(--line); }
.center { text-align:center; }
.measure { max-width:66ch; } .measure-sm { max-width:46ch; }
.mx-auto { margin-left:auto; margin-right:auto; }

/* ----- type ----------------------------------------------------------------*/
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--blue-bright); margin:0 0 22px; }
.eyebrow::before { content:''; width:26px; height:1px; background:currentColor; opacity:.7; }
.eyebrow.no-line::before { display:none; }
.display { font-family:var(--serif); font-weight:300; color:var(--fg);
  font-size:clamp(2.7rem, 1.1rem + 6.2vw, 5.6rem); line-height:1.0; letter-spacing:-.035em; margin:0; }
.display b, .display strong, .display .bold { font-weight:600; }
.display .blue { color:var(--blue-bright); font-weight:600; }
.display em { font-style:italic; color:var(--fg-2); font-weight:300; }
h2.title { font-family:var(--serif); font-weight:400; color:var(--fg);
  font-size:clamp(2rem, 1.1rem + 3vw, 3.5rem); line-height:1.06; letter-spacing:-.03em; margin:0 0 20px; }
h2.title .blue { color:var(--blue-bright); font-weight:600; }
h2.title b, h2.title strong { font-weight:600; }
h3 { font-family:var(--serif); font-size:1.22rem; line-height:1.25; letter-spacing:-.015em; font-weight:500; margin:0 0 9px; color:var(--fg); }
.lead { font-size:clamp(1.08rem,1rem + .5vw,1.3rem); color:var(--fg-2); line-height:1.65; margin:0; font-weight:300; }
.muted { color:var(--fg-2); font-weight:300; } .fine { font-size:.82rem; color:var(--fg-3); }

/* ----- buttons (magnetic) --------------------------------------------------*/
.btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0;
  background:var(--blue); color:#fff; font-weight:500; font-size:1rem; letter-spacing:-.01em; padding:16px 30px;
  border-radius:var(--pill); box-shadow:var(--shadow-blue); will-change:transform;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; }
.btn:hover { background:var(--blue-deep); box-shadow:0 30px 70px -20px rgba(42,75,226,.75); }
.btn:active { transform:scale(.98); }
.btn--lg { padding:19px 36px; font-size:1.06rem; }
.btn--ghost { background:transparent; color:var(--fg); border:1px solid var(--line-2); box-shadow:none; }
.btn--ghost:hover { background:rgba(255,255,255,.05); border-color:var(--fg); box-shadow:none; }
.btn--light { background:#fff; color:#0a0b0e; box-shadow:var(--shadow-sm); }
.btn--light:hover { background:#fff; color:var(--blue-deep); }
.btn--block { display:flex; width:100%; }
.arrow { width:18px; height:18px; transition:transform .25s var(--ease); }
.btn:hover .arrow { transform:translateX(4px); }

/* ----- nav -----------------------------------------------------------------*/
.nav { position:sticky; top:0; z-index:50; color:#fff; transition:background .4s, box-shadow .4s, backdrop-filter .4s; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; height:84px; transition:height .4s var(--ease); }
.nav.scrolled { background:rgba(8,9,12,.72); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 1px 0 var(--line); }
.nav.scrolled .nav-inner { height:68px; }
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-links a { position:relative; padding:9px 14px; font-weight:400; font-size:.95rem; color:var(--fg-2); transition:color .2s; }
.nav-links a::after { content:''; position:absolute; left:14px; right:14px; bottom:4px; height:1px; background:var(--blue-bright);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.nav-links a:hover, .nav-links a.active { color:#fff; } .nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }
.nav-right { display:flex; align-items:center; gap:14px; }
.nav .btn { padding:12px 24px; font-size:.92rem; }

.logo { display:flex; align-items:center; gap:13px; color:#fff; }
.logo .mark { width:40px; height:40px; flex:0 0 auto; }
.logo .wm { font-family:var(--serif); font-weight:600; font-size:1.12rem; line-height:1; letter-spacing:-.02em; }
.logo .wm small { display:block; font-family:var(--sans); font-size:.58rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg-3); margin-top:4px; }
.logo-mark-ink { fill:currentColor; } .logo-mark-blue { fill:var(--blue-bright); }

.burger { display:none; width:46px; height:46px; border:1px solid var(--line-2); border-radius:13px; background:rgba(255,255,255,.05); position:relative; }
.burger span { position:absolute; left:12px; right:12px; height:1.5px; background:#fff; border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.burger span:nth-child(1){ top:16px; } .burger span:nth-child(2){ top:22px; } .burger span:nth-child(3){ top:28px; }
body.menu-open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.drawer { position:fixed; inset:0 0 0 auto; width:min(86vw,360px); background:var(--bg-deep); color:#fff; z-index:60;
  transform:translateX(100%); transition:transform .45s var(--ease); box-shadow:var(--shadow); padding:104px 30px 32px; display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--line); }
body.menu-open .drawer { transform:translateX(0); }
.drawer a { padding:16px 6px; font-size:1.18rem; font-weight:400; border-bottom:1px solid var(--line); color:var(--fg-2); }
.drawer a:hover { color:#fff; } .drawer .btn { margin-top:24px; }
.scrim { position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s; z-index:55; backdrop-filter:blur(2px); }
body.menu-open .scrim { opacity:1; visibility:visible; }

/* ----- hero (aurora + kinetic) --------------------------------------------*/
.hero { position:relative; overflow:hidden; background:var(--bg-deep); }
.aurora { position:absolute; inset:-25% -10% auto -10%; height:150%; z-index:0; pointer-events:none; filter:blur(70px); opacity:.85; }
.aurora span { position:absolute; border-radius:50%; mix-blend-mode:screen; will-change:transform; }
.aurora .a1 { width:46vw; height:46vw; max-width:680px; max-height:680px; top:-6%; right:2%; background:radial-gradient(circle, #2A4BE2 0%, transparent 68%); animation:au1 22s var(--ease) infinite; }
.aurora .a2 { width:38vw; height:38vw; max-width:560px; max-height:560px; top:18%; left:-6%; background:radial-gradient(circle, #5B7CFF 0%, transparent 66%); opacity:.8; animation:au2 26s var(--ease) infinite; }
.aurora .a3 { width:30vw; height:30vw; max-width:440px; max-height:440px; bottom:-12%; left:34%; background:radial-gradient(circle, #7C3AED 0%, transparent 70%); opacity:.5; animation:au1 30s var(--ease) infinite; }
@keyframes au1 { 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-30px,40px,0) scale(1.08); } }
@keyframes au2 { 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(36px,-30px,0) scale(1.1); } }
@media (prefers-reduced-motion:reduce){ .aurora span { animation:none !important; } }
.hero::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.4;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:60px 60px; mask-image:radial-gradient(75% 65% at 50% 35%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(75% 65% at 50% 35%, #000 20%, transparent 78%); }
.hero-inner { position:relative; z-index:2; padding:clamp(54px,8vw,110px) 0 clamp(64px,9vw,120px); }
.hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(34px,5vw,80px); align-items:center; }
.hero .display { margin-bottom:26px; }
.hero .lead { max-width:46ch; margin-bottom:34px; color:var(--fg-2); }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-feats, .microtrust { display:flex; flex-wrap:wrap; gap:11px 22px; margin-top:32px; }
.microtrust span { display:inline-flex; align-items:center; gap:8px; font-size:.86rem; color:var(--fg-2); }
.microtrust .ico { width:16px; height:16px; color:var(--blue-bright); }

/* kinetic headline */
.kinetic .ln { display:block; }
.kinetic .word { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.04em; }
.kinetic .word > i { display:inline-block; font-style:inherit; transform:translateY(112%); opacity:0;
  transition:transform 1s var(--ease-out), opacity 1s var(--ease-out); }
.kinetic.in .word > i { transform:none; opacity:1; }
@media (prefers-reduced-motion:reduce){ .kinetic .word > i { transform:none; opacity:1; transition:none; } }

.ratingline { display:inline-flex; align-items:center; gap:11px; margin-bottom:26px; }
.stars { display:inline-flex; gap:3px; color:var(--gold); } .stars .ico { width:16px; height:16px; fill:currentColor; stroke:none; }
.ratingline small { font-size:.88rem; color:var(--fg-2); } .ratingline small b { color:var(--fg); font-weight:600; }

/* hero visual */
.hero-visual { position:relative; }
.photo-frame { position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5;
  background:linear-gradient(160deg,#161a24,#0e1016); box-shadow:var(--shadow); border:1px solid var(--line); }
.photo-frame.square { aspect-ratio:1/1; }
.photo-slot { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  text-align:center; color:var(--blue-bright); background:radial-gradient(120% 90% at 70% 12%, rgba(42,75,226,.28), transparent 60%), #0f1218; }
.photo-slot .ico { width:32px; height:32px; }
.photo-slot strong { color:#fff; font-family:var(--serif); font-weight:500; }
.photo-slot small { font-size:.74rem; color:var(--fg-3); max-width:24ch; }
.float-card { position:absolute; left:-16px; bottom:28px; background:rgba(13,15,19,.7); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line-2); border-radius:18px; padding:16px 22px; box-shadow:var(--shadow); animation:floaty 8s var(--ease) infinite; color:#fff; }
@keyframes floaty { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@media (prefers-reduced-motion:reduce){ .float-card { animation:none; } }
.float-card b { font-family:var(--serif); font-size:1.6rem; line-height:1; color:var(--blue-bright); font-weight:600; }
.float-card span { display:block; font-size:.76rem; color:var(--fg-2); margin-top:4px; }

/* scroll cue */
.scrollcue { position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--fg-3); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; }
.scrollcue i { width:1px; height:34px; background:linear-gradient(var(--blue-bright), transparent); position:relative; overflow:hidden; }
.scrollcue i::after { content:''; position:absolute; top:-50%; left:0; width:1px; height:50%; background:#fff; animation:cue 2s var(--ease) infinite; }
@keyframes cue { 0%{ top:-50%; } 60%,100%{ top:100%; } }
@media (prefers-reduced-motion:reduce){ .scrollcue i::after { animation:none; } }

/* ----- marquee (authority) -------------------------------------------------*/
.authority { background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; }
.authority .lab { text-align:center; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-3); font-weight:600; margin-bottom:18px; }
.marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display:flex; align-items:center; gap:56px; width:max-content; animation:marq 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-track span { font-family:var(--serif); font-weight:500; font-size:1.15rem; color:var(--fg-2); white-space:nowrap; opacity:.8; transition:color .2s, opacity .2s; }
.marquee-track span:hover { color:#fff; opacity:1; }
@keyframes marq { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee-track { animation:none; } }

/* ----- section heads -------------------------------------------------------*/
.head { max-width:720px; margin-bottom:56px; } .head.center { margin-left:auto; margin-right:auto; }

/* ----- cards / grid --------------------------------------------------------*/
.grid { display:grid; gap:22px; } .grid-2 { grid-template-columns:repeat(2,1fr); } .grid-3 { grid-template-columns:repeat(3,1fr); }
.card { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:32px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.card--hover:hover { transform:translateY(-6px); border-color:var(--line-2); box-shadow:var(--shadow); }
.chip { width:54px; height:54px; border-radius:16px; background:linear-gradient(150deg, var(--blue), #1c2fa0); color:#fff; display:grid; place-items:center;
  margin-bottom:20px; box-shadow:0 14px 30px -14px var(--glow); }
.chip .ico { width:25px; height:25px; }
.chip--soft { background:rgba(91,124,255,.12); color:var(--blue-bright); box-shadow:none; border:1px solid var(--line); }
.card p { margin:0; color:var(--fg-2); font-size:.98rem; font-weight:300; }

/* ----- fit -----------------------------------------------------------------*/
.fit { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.fit-col { border-radius:var(--radius); padding:32px; border:1px solid var(--line); background:var(--panel); }
.fit-col.yes { border-color:rgba(52,211,153,.32); background:linear-gradient(180deg, rgba(52,211,153,.05), transparent 55%); }
.fit-col h3 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fit-col .badge { font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; border-radius:var(--pill); }
.badge-yes { background:rgba(52,211,153,.14); color:var(--ok); } .badge-no { background:rgba(248,113,113,.12); color:var(--no); }
.fit-list { list-style:none; padding:0; margin:22px 0 0; display:grid; gap:15px; }
.fit-list li { display:flex; gap:13px; align-items:flex-start; font-size:.98rem; color:var(--fg-2); line-height:1.55; font-weight:300; }
.fit-list .mk { width:24px; height:24px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; margin-top:1px; }
.fit-list .mk.y { background:rgba(52,211,153,.14); color:var(--ok); } .fit-list .mk.n { background:rgba(248,113,113,.12); color:var(--no); }
.fit-list .mk .ico { width:13px; height:13px; stroke-width:2.6; }

/* ----- cases (before/after) ------------------------------------------------*/
.cases { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.case { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.case:hover { transform:translateY(-6px); border-color:var(--line-2); box-shadow:var(--shadow); }
.case .imgs { position:relative; aspect-ratio:1/1; display:grid; grid-template-columns:1fr 1fr; background:#0c0e13; }
.case .imgs .ph2 { position:relative; display:grid; place-items:center; color:var(--fg-3); overflow:hidden; }
.case .imgs .ph2:first-child { border-right:1px solid var(--line); background:#0e1016; }
.case .imgs .ph2:last-child { background:#11141b; }
.case .imgs .ph2 img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.case .imgs .ph2 .ico { width:26px; height:26px; }
.case .imgs .lbl { position:absolute; top:12px; left:12px; z-index:2; font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 9px; border-radius:6px; background:rgba(5,6,8,.7); color:#fff; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.case .imgs .ph2:last-child .lbl { background:var(--blue); left:auto; right:12px; }
.case .meta { padding:22px 24px; }
.case .meta .res { font-family:var(--serif); font-weight:600; font-size:1.6rem; color:var(--blue-bright); line-height:1; }
.case .meta .who { font-size:.9rem; color:var(--fg-2); margin-top:8px; }
.case .meta .q { font-size:.92rem; color:var(--fg); margin-top:14px; line-height:1.55; font-weight:300; }

/* ----- testimonials --------------------------------------------------------*/
.quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.quote { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:30px; display:flex; flex-direction:column; gap:18px; }
.quote p { margin:0; font-size:1.02rem; line-height:1.62; color:var(--fg); font-weight:300; }
.quote .by { display:flex; align-items:center; gap:13px; margin-top:auto; }
.quote .by .ph { width:46px; height:46px; border-radius:50%; flex:0 0 auto; background:linear-gradient(150deg, var(--blue), #1c2fa0); color:#fff; display:grid; place-items:center; font-family:var(--serif); font-weight:600; }
.quote .by b { font-size:.94rem; color:var(--fg); font-weight:600; } .quote .by span { display:block; font-size:.8rem; color:var(--fg-3); }

/* ----- method --------------------------------------------------------------*/
.method { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.mstep { position:relative; padding-top:30px; }
.mstep::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--line); }
.mstep::after { content:''; position:absolute; top:-1px; left:0; width:40px; height:2px; background:var(--blue-bright); box-shadow:0 0 10px var(--glow); }
.mstep .dot { width:50px; height:50px; border-radius:15px; background:var(--panel); border:1px solid var(--line); color:var(--blue-bright); display:grid; place-items:center; margin-bottom:18px; }
.mstep .dot .ico { width:23px; height:23px; }
.mstep h3 { font-size:1.12rem; } .mstep p { font-size:.94rem; color:var(--fg-2); margin:0; font-weight:300; }

/* ----- coach ---------------------------------------------------------------*/
.coach-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,4vw,64px); align-items:center; }
.badges { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.cred { display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:var(--pill); background:rgba(255,255,255,.04); border:1px solid var(--line); font-size:.84rem; font-weight:500; color:#fff; }
.cred .ico { width:15px; height:15px; color:var(--blue-bright); }
.logos { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:26px; align-items:center; }
.logos span { font-family:var(--serif); font-weight:500; font-size:1rem; color:var(--fg-2); opacity:.85; }

/* ----- pricing -------------------------------------------------------------*/
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.tier { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:36px 32px; display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.tier:hover { transform:translateY(-6px); border-color:var(--line-2); box-shadow:var(--shadow); }
.tier--featured { background:linear-gradient(180deg, rgba(42,75,226,.14), var(--panel) 50%); }
/* slow animated gradient border on featured */
.tier--featured::before { content:''; position:absolute; inset:0; border-radius:var(--radius); padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--ang,0deg), var(--blue), var(--blue-bright), #7C3AED, var(--blue));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spin 6s linear infinite; }
@property --ang { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes spin { to { --ang:360deg; } }
@media (prefers-reduced-motion:reduce){ .tier--featured::before { animation:none; } }
.tier .kicker { font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); margin-bottom:8px; }
.tier h3 { font-size:1.55rem; font-weight:500; }
.tier .tag { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--blue); color:#fff; font-size:.7rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; padding:6px 16px; border-radius:var(--pill); white-space:nowrap; box-shadow:var(--shadow-blue); z-index:2; }
.tier .price { font-family:var(--serif); font-size:2.9rem; font-weight:500; letter-spacing:-.03em; margin:14px 0 2px; color:var(--fg); }
.tier .price span { font-family:var(--sans); font-size:.95rem; font-weight:400; color:var(--fg-3); }
.tier .pnote { font-size:.88rem; color:var(--fg-3); margin-bottom:24px; }
.tier ul { list-style:none; padding:0; margin:0 0 28px; display:grid; gap:14px; }
.tier ul li { display:flex; gap:12px; align-items:flex-start; font-size:.93rem; color:var(--fg-2); line-height:1.45; font-weight:300; }
.tier ul .tk { width:21px; height:21px; flex:0 0 auto; border-radius:50%; background:rgba(91,124,255,.14); color:var(--blue-bright); display:grid; place-items:center; margin-top:1px; }
.tier ul .tk .ico { width:12px; height:12px; stroke-width:3; }
.tier .btn { margin-top:auto; }

/* ----- assurance -----------------------------------------------------------*/
.assurance { display:flex; gap:18px; align-items:flex-start; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--blue-bright);
  border-radius:var(--radius-sm); padding:26px 28px; }
.assurance .ic { width:46px; height:46px; flex:0 0 auto; border-radius:12px; background:rgba(91,124,255,.12); color:var(--blue-bright); display:grid; place-items:center; }
.assurance .ic .ico { width:24px; height:24px; } .assurance h3 { margin:0 0 5px; } .assurance p { margin:0; font-size:.95rem; color:var(--fg-2); font-weight:300; }

/* ----- magnet / audit ------------------------------------------------------*/
.magnet { position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:clamp(40px,5vw,68px);
  background:linear-gradient(135deg, #1a2bb0, #2A4BE2 55%, #3358ff); box-shadow:var(--shadow-blue); }
.magnet::after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 90% at 88% 0%, rgba(255,255,255,.22), transparent 55%); }
.magnet-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.25fr .75fr; gap:32px; align-items:center; }
.magnet h2 { color:#fff; } .magnet p { color:rgba(255,255,255,.88); }
.audit-form { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.audit-form input { flex:1; min-width:210px; font:inherit; font-size:1rem; padding:16px 18px; border-radius:var(--pill); border:1px solid transparent; background:rgba(255,255,255,.95); color:#0a0b0e; }
.audit-form input:focus { outline:none; box-shadow:0 0 0 4px rgba(255,255,255,.35); }
.audit-form .btn { background:#0a0b0e; color:#fff; box-shadow:none; } .audit-form .btn:hover { background:#000; }
.audit-note { font-size:.8rem; color:rgba(255,255,255,.82); margin-top:13px; }
.magnet.sent .audit-form, .magnet.sent .audit-note { display:none; }
.audit-ok { display:none; align-items:center; gap:9px; color:#fff; font-weight:500; margin-top:12px; } .magnet.sent .audit-ok { display:flex; }
.audit-ok .ico { width:20px; height:20px; }

/* ----- FAQ -----------------------------------------------------------------*/
.faq { max-width:800px; margin:0 auto; }
.faq details { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:2px 26px; margin-bottom:13px; transition:border-color .3s; }
.faq details[open] { border-color:var(--line-2); }
.faq summary { list-style:none; cursor:pointer; padding:22px 0; font-weight:500; font-size:1.06rem; color:var(--fg); display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--serif); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .pm { width:28px; height:28px; flex:0 0 auto; border-radius:50%; background:rgba(91,124,255,.12); color:var(--blue-bright); display:grid; place-items:center; transition:transform .35s var(--ease); }
.faq summary .pm::before { content:'+'; font-family:var(--sans); font-size:1.3rem; font-weight:300; line-height:1; }
.faq details[open] summary .pm { transform:rotate(135deg); }
.faq details p { margin:0 0 22px; color:var(--fg-2); font-size:.98rem; line-height:1.65; font-weight:300; }

/* ----- CTA -----------------------------------------------------------------*/
.cta-final { text-align:center; } .cta-final .display { margin-bottom:20px; } .cta-final .lead { margin:0 auto 32px; }

/* ----- trust grid (about) --------------------------------------------------*/
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.stat { text-align:center; } .stat b { font-family:var(--serif); font-weight:600; font-size:clamp(2rem,1.3rem+1.6vw,2.9rem); letter-spacing:-.02em; color:#fff; line-height:1; }
.stat span { display:block; font-size:.82rem; color:var(--fg-2); margin-top:9px; line-height:1.4; } .stat .blue { color:var(--blue-bright); }

/* ----- forms (dark) --------------------------------------------------------*/
.form-wrap { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,56px); align-items:start; }
.form-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(26px,3vw,40px); }
.field { margin-bottom:18px; }
.field label { display:block; font-size:.84rem; font-weight:500; margin-bottom:8px; color:var(--fg-2); }
.field input, .field select, .field textarea { width:100%; font:inherit; font-size:1rem; color:var(--fg); border:1px solid var(--line-2); border-radius:13px; padding:14px 15px; background:#0d0f14; transition:border-color .2s, box-shadow .2s; }
.field textarea { resize:vertical; min-height:110px; }
.field select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239AA1AE' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:38px; }
.field input::placeholder, .field textarea::placeholder { color:var(--fg-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--blue-bright); box-shadow:0 0 0 4px rgba(91,124,255,.16); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.choice-grid { display:grid; gap:12px; margin-bottom:18px; }
.choice { position:relative; display:flex; gap:13px; align-items:flex-start; padding:16px; border-radius:14px; border:1px solid var(--line-2); background:#0d0f14; cursor:pointer; transition:border-color .2s, background .2s, transform .2s; }
.choice:hover { transform:translateY(-1px); border-color:var(--fg-3); }
.choice input { position:absolute; opacity:0; }
.choice .dot { width:22px; height:22px; border-radius:50%; border:2px solid var(--line-2); flex:0 0 auto; margin-top:1px; transition:border-color .2s; }
.choice b { font-size:.96rem; color:var(--fg); } .choice span { display:block; font-size:.82rem; color:var(--fg-3); margin-top:2px; }
.choice:has(input:checked) { border-color:var(--blue-bright); background:rgba(91,124,255,.07); }
.choice:has(input:checked) .dot { border-color:var(--blue-bright); background:radial-gradient(circle, var(--blue-bright) 0 5px, transparent 6px); }
.consent { display:flex; gap:12px; align-items:flex-start; font-size:.86rem; color:var(--fg-2); line-height:1.5; margin:6px 0 22px; font-weight:300; }
.consent input { width:21px; height:21px; flex:0 0 auto; accent-color:var(--blue); margin-top:1px; }
.form-aside .card { margin-bottom:16px; }
.form-success { display:none; text-align:center; padding:20px 0; }
.form-success .big { width:74px; height:74px; border-radius:50%; margin:0 auto 18px; background:linear-gradient(150deg, var(--blue), #1c2fa0); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-blue); }
.form-success .big .ico { width:34px; height:34px; stroke-width:2.5; }
body.sent .form-fields { display:none; } body.sent .form-success { display:block; }

/* ----- footer --------------------------------------------------------------*/
.footer { background:var(--bg-deep); padding:74px 0 42px; border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:34px; margin-bottom:48px; }
.footer h4 { font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); margin:0 0 18px; font-weight:600; }
.footer-links { display:grid; gap:12px; } .footer-links a { color:var(--fg-2); font-size:.94rem; transition:color .2s; } .footer-links a:hover { color:#fff; }
.footer .logo { margin-bottom:16px; } .footer .blurb { font-size:.92rem; color:var(--fg-2); max-width:36ch; font-weight:300; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:26px; font-size:.84rem; color:var(--fg-3); }
.socials { display:flex; gap:10px; }
.socials a { width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--line); display:grid; place-items:center; color:var(--fg-2); transition:transform .2s, color .2s, background .2s; }
.socials a:hover { transform:translateY(-2px); color:#fff; background:var(--blue); border-color:var(--blue); }

/* ----- page head -----------------------------------------------------------*/
.page-head { position:relative; overflow:hidden; background:var(--bg-deep); padding:clamp(58px,8vw,104px) 0 clamp(40px,5vw,64px); }
.page-head .aurora { opacity:.6; height:130%; }
.page-head .container { position:relative; z-index:2; }
.breadcrumb { font-size:.8rem; letter-spacing:.04em; color:var(--fg-3); margin-bottom:20px; } .breadcrumb a:hover { color:#fff; }

/* ----- sticky bar ----------------------------------------------------------*/
.stickybar { position:fixed; left:0; right:0; bottom:0; z-index:45; transform:translateY(120%); transition:transform .4s var(--ease);
  background:rgba(8,9,12,.9); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid var(--line); color:#fff; }
.stickybar.show { transform:translateY(0); }
.stickybar .container { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 26px; }
.stickybar .sb-txt b { font-family:var(--serif); font-size:1rem; font-weight:500; } .stickybar .sb-txt span { color:var(--fg-2); display:block; font-size:.78rem; }
.stickybar .sb-actions { display:flex; gap:10px; } .stickybar .btn { padding:12px 22px; font-size:.92rem; }
@media (prefers-reduced-motion:reduce){ .stickybar { transition:none; } }

/* ----- reveal --------------------------------------------------------------*/
[data-reveal] { opacity:0; transform:translateY(30px); filter:blur(6px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }
[data-reveal].in { opacity:1; transform:none; filter:none; }
[data-reveal="left"] { transform:translateX(-34px); } [data-reveal="left"].in { transform:none; }
[data-reveal="right"] { transform:translateX(34px); } [data-reveal="right"].in { transform:none; }
[data-reveal="scale"] { transform:scale(.95); filter:blur(8px); } [data-reveal="scale"].in { transform:none; }
[data-stagger] > * { opacity:0; transform:translateY(26px); filter:blur(5px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); }
[data-stagger].in > * { opacity:1; transform:none; filter:none; }
@media (prefers-reduced-motion:reduce){ [data-reveal],[data-stagger]>* { opacity:1!important; transform:none!important; filter:none!important; transition:none!important; } }

/* ----- responsive ----------------------------------------------------------*/
@media (max-width:980px){
  .hero-grid { grid-template-columns:1fr; } .hero-visual { max-width:420px; margin:8px auto 0; width:100%; }
  .coach-grid { grid-template-columns:1fr; } .magnet-grid { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr 1fr; } .quotes { grid-template-columns:1fr; } .cases { grid-template-columns:1fr 1fr; }
  .method { grid-template-columns:1fr 1fr; } .trust-grid { grid-template-columns:1fr 1fr; }
  .tiers { grid-template-columns:1fr; max-width:460px; margin:0 auto; } .tier--featured { order:-1; }
  .form-wrap { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .nav-links { display:none; } .burger { display:block; } .nav-right .btn { display:none; }
  .fit { grid-template-columns:1fr; } .cases { grid-template-columns:1fr; } .method { grid-template-columns:1fr; }
  .grid-2,.grid-3 { grid-template-columns:1fr; } .field-row { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr 1fr; }
  .float-card { left:10px; right:10px; bottom:12px; }
  .stickybar .sb-txt { display:none; } .stickybar .sb-actions { width:100%; } .stickybar .sb-actions .btn { flex:1; } .stickybar .btn--ghost { display:none; }
}
@media (max-width:430px){ .footer-grid { grid-template-columns:1fr; } .trust-grid { grid-template-columns:1fr 1fr; } }

/* ----- before/after slider (interactive) ----------------------------------*/
.ba { position:relative; aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow); --x:50%; user-select:none; touch-action:pan-y; background:#0c0e13; }
.ba-img { position:absolute; inset:0; display:grid; place-items:center; }
.ba-img .ico { width:30px; height:30px; color:var(--fg-3); }
.ba-before { background:radial-gradient(120% 90% at 30% 12%, rgba(91,124,255,.12), transparent 55%), #0e1016; }
.ba-after  { background:radial-gradient(120% 90% at 72% 12%, rgba(42,75,226,.32), transparent 58%), #11141b;
  clip-path:inset(0 calc(100% - var(--x)) 0 0); }
.ba-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-tag { position:absolute; top:14px; left:14px; z-index:2; font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 10px; border-radius:7px; background:rgba(5,6,8,.7); color:#fff; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.ba-tag--a { left:auto; right:14px; background:var(--blue); }
.ba-handle { position:absolute; top:0; bottom:0; left:var(--x); width:0; z-index:3; pointer-events:none; }
.ba-handle .ln { position:absolute; top:0; bottom:0; left:-1px; width:2px; background:#fff; box-shadow:0 0 16px rgba(0,0,0,.6); }
.ba-handle .grip { position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:48px; height:48px; border-radius:50%;
  background:rgba(8,9,12,.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1.5px solid #fff; color:#fff;
  display:grid; place-items:center; box-shadow:var(--shadow-sm); }
.ba-handle .grip .ico { width:20px; height:20px; }
.ba-range { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:4; -webkit-appearance:none; appearance:none; background:transparent; }
.ba-range::-webkit-slider-thumb { -webkit-appearance:none; width:48px; height:100%; }
.ba-range::-moz-range-thumb { width:48px; height:100%; border:0; background:transparent; }
.ba-range:focus-visible + .ba-handle .grip { outline:2.5px solid var(--blue-bright); outline-offset:3px; }
.ba-hint { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:2; font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.75); background:rgba(5,6,8,.5); padding:5px 12px; border-radius:var(--pill); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:inline-flex; align-items:center; gap:7px; pointer-events:none; transition:opacity .3s; }
.ba.touched .ba-hint { opacity:0; }
.ba-hint .ico { width:14px; height:14px; }

/* ============================================================================
   Font presets + light theme (switchable preview - ?preview=1)
   ========================================================================= */
:root { --disp-w:300; --disp-bold:600; --title-w:400; --title-bold:600; --disp-tt:none; --disp-tr:-.035em; --accent:var(--serif); }

.display { font-weight:var(--disp-w); text-transform:var(--disp-tt); letter-spacing:var(--disp-tr); }
.display b, .display strong, .display .bold, .display .blue { font-weight:var(--disp-bold); }
h2.title { font-weight:var(--title-w); }
h2.title .blue, h2.title b, h2.title strong { font-weight:var(--title-bold); }
.kinetic .word > i { font-style:normal; }

/* 2 - Editorial serif (Fraunces): extra-bold, high-contrast, premium */
html[data-font="editorial"] { --serif:'Fraunces', Georgia, 'Times New Roman', serif; --accent:'Fraunces', Georgia, serif;
  --disp-w:840; --disp-bold:900; --title-w:720; --title-bold:880; --disp-tr:-.03em; }

/* 3 - Athletic editorial (Oswald + Newsreader italic accent): matches the reference */
html[data-font="athletic"] { --serif:'Oswald', system-ui, sans-serif; --accent:'Newsreader', Georgia, serif;
  --disp-w:600; --disp-bold:700; --title-w:600; --title-bold:700; --disp-tr:0; --disp-tt:uppercase; }
html[data-font="athletic"] .display .blue,
html[data-font="athletic"] .kinetic .word > i.blue { font-family:var(--accent); font-style:italic; font-weight:500;
  text-transform:none; letter-spacing:-.01em; }
html[data-font="athletic"] h2.title .blue { font-family:var(--accent); font-style:italic; font-weight:500; text-transform:none; }

/* 4 - Character grotesque (Bricolage): distinctive, modern-editorial */
html[data-font="character"] { --serif:'Bricolage Grotesque', system-ui, sans-serif; --accent:'Fraunces', Georgia, serif;
  --disp-w:400; --disp-bold:700; --title-w:500; --title-bold:700; --disp-tr:-.02em; }

/* ---- light theme (white over black) --------------------------------------*/
html[data-theme="light"] {
  --bg:#FBFAF8; --bg-deep:#F1EFEA; --surface:#FFFFFF; --panel:#FFFFFF; --panel-2:#F5F4F1;
  --line:rgba(20,23,31,.10); --line-2:rgba(20,23,31,.17);
  --fg:#14171F; --fg-2:#525A6B; --fg-3:#8B93A3;
  --blue-bright:#2A4BE2; --glow:rgba(42,75,226,.26);
  --shadow:0 34px 70px -42px rgba(20,25,40,.28); --shadow-sm:0 16px 36px -26px rgba(20,25,40,.22);
}
html[data-theme="light"] body { background:var(--bg); color:var(--fg); }
html[data-theme="light"] .nav, html[data-theme="light"] .logo { color:var(--fg); }
html[data-theme="light"] .nav.scrolled { background:rgba(251,250,248,.82); box-shadow:0 1px 0 var(--line); }
html[data-theme="light"] .logo .wm small { color:var(--fg-3); }
html[data-theme="light"] .nav-links a { color:var(--fg-2); }
html[data-theme="light"] .nav-links a:hover, html[data-theme="light"] .nav-links a.active { color:var(--fg); }
html[data-theme="light"] .burger { background:rgba(0,0,0,.04); border-color:var(--line-2); }
html[data-theme="light"] .burger span { background:var(--fg); }
html[data-theme="light"] .drawer { background:#fff; color:var(--fg); border-color:var(--line); }
html[data-theme="light"] .drawer a { color:var(--fg-2); border-color:var(--line); }
html[data-theme="light"] .drawer a:hover { color:var(--fg); }
html[data-theme="light"] .hero, html[data-theme="light"] .page-head { background:var(--bg-deep); }
html[data-theme="light"] .aurora span { mix-blend-mode:normal; opacity:.12; }
html[data-theme="light"] .btn--ghost { color:var(--fg); }
html[data-theme="light"] .btn--ghost:hover { background:rgba(0,0,0,.04); border-color:var(--fg); }
html[data-theme="light"] .cred { color:var(--fg); background:rgba(0,0,0,.03); }
html[data-theme="light"] .stat b { color:var(--fg); }
html[data-theme="light"] .field input, html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea, html[data-theme="light"] .choice { background:#fff; }
html[data-theme="light"] .footer { background:var(--bg-deep); }
html[data-theme="light"] .socials a { background:rgba(0,0,0,.03); color:var(--fg-2); }
html[data-theme="light"] .float-card { background:rgba(255,255,255,.74); border-color:var(--line-2); color:var(--fg); }
html[data-theme="light"] .float-card span { color:var(--fg-2); }
html[data-theme="light"] .stickybar { background:rgba(251,250,248,.92); color:var(--fg); border-color:var(--line); }
html[data-theme="light"] .stickybar .sb-txt span { color:var(--fg-2); }
html[data-theme="light"] .grain { mix-blend-mode:multiply; opacity:.025; }
html[data-theme="light"] .case .imgs { background:#E9E8E4; }
html[data-theme="light"] .case .imgs .ph2:first-child { background:#EEEDEA; }
html[data-theme="light"] .case .imgs .ph2:last-child { background:#E5E9F3; }
html[data-theme="light"] .ba-before { background:#EEEDEA; }
html[data-theme="light"] .ba-after { background:#E2E7F4; }
html[data-theme="light"] ::selection { background:rgba(42,75,226,.18); color:var(--blue-deep); }
html[data-theme="light"] .photo-frame, html[data-theme="light"] .ba { background:#ECEBE7; }
html[data-theme="light"] .photo-slot { background:radial-gradient(120% 90% at 70% 12%, rgba(42,75,226,.12), transparent 60%), #EEEDEA; }
html[data-theme="light"] .photo-slot strong { color:var(--fg); }

/* ---- preview control bar (only injected when ?preview=1) ------------------*/
.previewbar { position:fixed; left:18px; bottom:18px; z-index:300; display:flex; flex-direction:column; gap:10px;
  background:rgba(13,15,19,.92); color:#fff; border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:14px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 24px 60px -24px rgba(0,0,0,.7); width:248px; font-family:'Inter',sans-serif; }
html[data-theme="light"] .previewbar { background:rgba(255,255,255,.96); color:#14171F; border-color:rgba(20,23,31,.12); }
.previewbar .ttl { font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; opacity:.6; font-weight:600; display:flex; justify-content:space-between; align-items:center; }
.previewbar .ttl button { background:none; border:0; color:inherit; opacity:.6; font-size:1.1rem; line-height:1; padding:0; }
.previewbar .row { display:flex; gap:6px; flex-wrap:wrap; }
.previewbar .seg { font-size:.78rem; font-weight:500; padding:8px 11px; border-radius:9px; border:1px solid rgba(125,125,135,.3);
  background:transparent; color:inherit; cursor:pointer; flex:1; transition:all .15s; white-space:nowrap; }
.previewbar .seg:hover { border-color:#6E8BFF; }
.previewbar .seg.on { background:#2A4BE2; border-color:#2A4BE2; color:#fff; }
.previewbar .lbl { font-size:.66rem; opacity:.55; margin-top:2px; }