/* Subpages, privacy policy and 404. Same tokens as index.html, no WebGL scene. */
:root{
  --bg:#101012; --ink:#F2EFE6; --mute:#A19EAE; --violet:#EC6BFF; --magenta:#D94BF0;
  --line:rgba(242,239,230,.14); --panel:rgba(22,20,28,.72);
  --display:"Siupa Display","Manrope",sans-serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(16px,5vw,72px);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#101012;--ink:#F2EFE6}}
:root[data-theme="dark"]{--bg:#101012;--ink:#F2EFE6}
html{scroll-padding-top:96px;scroll-behavior:smooth;background:var(--bg)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:radial-gradient(60% 50% at 90% 0%,rgba(124,92,255,.22),transparent 70%),radial-gradient(50% 40% at 0% 30%,rgba(217,75,240,.10),transparent 70%);background-repeat:no-repeat}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sr:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;clip:auto;z-index:50;background:var(--violet);color:#141218;padding:10px 16px;border-radius:6px}

/* header */
.top{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(16,16,18,.7);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px;padding:0 var(--pad);max-width:1384px;margin:0 auto}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none}
.brand img{height:34px;width:auto;filter:drop-shadow(0 0 8px rgba(217,75,240,.4))}
.brand small{font:500 12px/1 var(--body);letter-spacing:.22em;color:var(--mute);padding-left:16px;border-left:1px solid var(--line)}
.nav{display:flex;gap:28px;align-items:center}
.nav a{text-decoration:none;font-weight:500;font-size:15px;color:var(--mute);transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav .call{color:#141218;background:var(--violet);padding:10px 16px;border-radius:6px;font-weight:700}
.nav .call:hover{color:#141218;background:#F49BFF}
.menu-btn{display:none;background:none;border:0;color:var(--ink);font:500 17px var(--body);gap:14px;align-items:center;cursor:pointer;padding:8px 0}
.menu-btn i{font-style:normal;font-size:26px;line-height:1;transition:transform .3s}
.menu-btn[aria-expanded="true"] i{transform:rotate(45deg)}
.drawer{position:fixed;inset:72px 0 0;z-index:19;background:rgba(16,16,18,.97);display:flex;flex-direction:column;gap:8px;padding:32px var(--pad);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;overflow:auto}
.drawer.open{opacity:1;visibility:visible}
.drawer a{font:400 clamp(32px,9vw,54px)/1.15 var(--display);text-decoration:none}
.drawer a:hover{color:var(--violet)}
@media (max-width:900px){.nav{display:none}.menu-btn{display:flex}}
@media (max-width:420px){.brand small{display:none}}

/* layout */
main{padding:0 var(--pad)}
.wrap{max-width:1240px;margin:0 auto}
.crumbs{font-size:14px;color:var(--mute);padding-top:28px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.crumbs a{color:var(--mute)}
.crumbs a:hover{color:var(--ink)}
.page-hero{padding:clamp(40px,8vh,96px) 0 clamp(40px,7vh,80px);border-bottom:1px solid var(--line)}
.kicker{display:block;color:var(--mute);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;margin:0 0 24px}
h1,h2,h3{font-family:var(--display);margin:0;font-weight:400;font-synthesis:none;letter-spacing:.005em}
h1{font-size:clamp(42px,6.6vw,96px);line-height:1.04;max-width:15ch}
h1 em,h2 em{font-style:normal;display:inline-block;color:transparent;-webkit-text-stroke:max(1.4px,.03em) #EC6BFF;filter:drop-shadow(0 0 .04em rgba(236,107,255,.95)) drop-shadow(0 0 .2em rgba(217,75,240,.6))}
.lead{font-size:clamp(19px,2vw,24px);line-height:1.45;max-width:40ch;margin:28px 0 0;color:#D9D5E3}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:36px}
.btn{display:inline-flex;align-items:center;gap:28px;background:var(--violet);color:#141218;text-decoration:none;font:700 18px/1 var(--body);padding:20px 26px;border-radius:6px;transition:background .2s,transform .2s}
.btn:hover{background:#F49BFF;transform:translateY(-2px)}
.btn svg{width:22px;height:22px}
.ghost{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(236,107,255,.5);padding-bottom:3px}
.ghost:hover{border-color:var(--violet);color:var(--violet)}

.block{padding:clamp(56px,9vh,104px) 0;border-bottom:1px solid var(--line)}
.block h2{font-size:clamp(34px,4.6vw,64px);line-height:1;max-width:16ch;margin-bottom:28px}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,96px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.prose{color:var(--mute);max-width:62ch}
.prose p{margin:0 0 1.1em}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--violet)}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.ticks li{position:relative;padding:18px 0 18px 36px;border-bottom:1px solid var(--line);color:var(--mute)}
.ticks li::before{content:"";position:absolute;left:4px;top:23px;width:15px;height:19px;background:url(/assets/s.svg) center/contain no-repeat}
.ticks b{display:block;color:var(--ink);font-size:18px;letter-spacing:-.02em;margin-bottom:2px}
.cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.cards li{border:1px solid var(--line);border-radius:6px;padding:24px;background:var(--panel)}
.cards h3{font-size:24px;line-height:1.1;margin-bottom:10px}
.cards p{margin:0;color:var(--mute)}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(20px,3vw,40px);counter-reset:s}
.steps li{border-top:1px solid var(--line);padding-top:20px;counter-increment:s;color:var(--mute)}
.steps li::before{content:"0" counter(s);display:block;font:400 56px/1 var(--display);color:transparent;-webkit-text-stroke:max(1.4px,.03em) #EC6BFF;filter:drop-shadow(0 0 .04em rgba(236,107,255,.95)) drop-shadow(0 0 .2em rgba(217,75,240,.6));margin-bottom:12px}
.steps h3{font-size:22px;line-height:1.15;margin-bottom:8px;color:var(--ink)}
.steps p{margin:0}

/* faq */
.faq{border-top:1px solid var(--line);max-width:900px}
.faq details{overflow:hidden}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font:700 clamp(18px,2vw,21px)/1.35 var(--body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary{transition:color .25s}
.faq summary::after{content:"+";font-size:26px;line-height:1;color:var(--violet);transition:transform .45s cubic-bezier(.2,.8,.1,1)}
.faq details[open]:not(.closing) summary::after{transform:rotate(45deg)}
.faq summary:hover,.faq details[open]:not(.closing) summary{color:var(--violet)}
.faq details p{margin:0 0 22px;color:var(--mute);max-width:64ch;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.1,1)}
.faq details.closing p,.faq details.opening p{opacity:0;transform:translateY(-8px)}
.faq a{color:var(--violet)}

/* cta */
.cta{margin:clamp(56px,9vh,104px) 0;border:1px solid var(--line);border-radius:6px;padding:clamp(28px,5vw,64px);
  background:radial-gradient(70% 90% at 100% 100%,rgba(217,75,240,.28),transparent 70%),radial-gradient(60% 80% at 0% 0%,rgba(124,92,255,.2),transparent 70%),var(--panel)}
.cta h2{font-size:clamp(38px,6vw,84px);line-height:1;margin-bottom:12px}
.cta .phone{display:inline-block;margin-top:24px;text-decoration:none;font:400 clamp(40px,6.4vw,88px)/1.05 var(--display);color:transparent;-webkit-text-stroke:max(1.4px,.03em) #EC6BFF;filter:drop-shadow(0 0 .04em rgba(236,107,255,.95)) drop-shadow(0 0 .2em rgba(217,75,240,.6))}
.cta .phone:hover{animation:none;filter:drop-shadow(0 0 .05em rgba(255,180,255,1)) drop-shadow(0 0 .3em rgba(217,75,240,.85))}
.cta-links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:24px}
.cta-links a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(236,107,255,.5)}
.cta-links a:hover{color:var(--violet)}
.related{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.related a{display:block;height:100%;border:1px solid var(--line);border-radius:6px;padding:18px 20px;text-decoration:none;background:var(--panel);font-weight:700;transition:border-color .2s}
.related a:hover{border-color:var(--violet)}
.related small{display:block;color:var(--mute);font-weight:400;font-size:14px;margin-top:4px}

/* legal */
.legal{max-width:820px;padding:clamp(40px,7vh,80px) 0}
.legal h1{font-size:clamp(40px,6vw,80px);max-width:none}
.legal h2{font:400 clamp(24px,2.6vw,30px)/1.2 var(--display);margin:48px 0 14px}
.legal h3{font:700 18px/1.4 var(--body);text-transform:none;margin:24px 0 8px}
.legal p,.legal li{color:var(--mute)}
.legal strong{color:var(--ink)}
.legal a{color:var(--violet)}
.legal .updated{font-size:14px;margin-top:18px}
.table-wrap{overflow-x:auto;margin:16px 0}
.legal table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.legal th,.legal td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line);color:var(--mute)}
.legal th{color:var(--ink);font-weight:700}

.legal ul{list-style:none;padding-left:0}
.legal ul li{position:relative;padding-left:28px;margin:6px 0}
.legal ul li::before{content:"";position:absolute;left:3px;top:.3em;width:13px;height:16px;background:url(/assets/s.svg) center/contain no-repeat}
.sep{display:inline-block;width:.62em;height:.8em;margin:0 .3em;vertical-align:-.1em;background:url(/assets/s.svg) center/contain no-repeat;color:transparent;overflow:hidden;line-height:0;user-select:none}

/* hero media: client's own Instagram material for the subject of the page */
.page-hero.has-media{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,72px);align-items:end}
.hero-media{margin:0;width:clamp(220px,24vw,320px)}
.hero-media>a{position:relative;display:block;aspect-ratio:9/14;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#17151d;box-shadow:0 0 0 1px rgba(236,107,255,.25),0 0 40px rgba(217,75,240,.22)}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.1,1)}
.hero-media>a:hover img,.hero-media>a:hover video{transform:scale(1.04)}
.hero-media .badge{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:8px;font:700 11px/1 var(--body);letter-spacing:.16em;padding:8px 11px;border-radius:999px;background:rgba(16,16,18,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-media .badge i{width:7px;height:7px;border-radius:50%;background:var(--magenta);box-shadow:0 0 10px var(--magenta)}
.hero-media figcaption{margin-top:12px;font-size:14px;color:var(--mute)}
.hero-media figcaption a{color:var(--violet);text-decoration:none;white-space:nowrap}
@media (max-width:860px){.page-hero.has-media{grid-template-columns:1fr}.hero-media{width:min(100%,340px)}}

/* footer */
footer{padding:56px var(--pad) 48px;border-top:1px solid var(--line);background:rgba(16,16,18,.9)}
.foot{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px}
.foot-about{max-width:36ch;color:var(--mute);font-size:15px;margin:18px 0 0}
.foot-cols{display:flex;flex-wrap:wrap;gap:32px 64px}
.foot-cols nav{display:flex;flex-direction:column;gap:10px}
.foot-cols h2{font:700 12px/1 var(--body);letter-spacing:.2em;margin:0 0 6px}
.foot-cols a,.foot-cols span{color:var(--mute);text-decoration:none;font-size:15px}
.foot-cols a:hover{color:var(--ink)}
.credit{max-width:1240px;margin:40px auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;font-size:13px;color:var(--mute)}
.credit img{height:40px;width:auto;opacity:.85}
.credit a:hover img{opacity:1}
.credit .legal-link{margin-left:auto;color:var(--mute)}
@media (max-width:640px){.credit .legal-link{margin-left:0;width:100%}}

/* neon life: same flicker / surge as the home page */
@keyframes neon-life{
  0%,30%,42%,68%,74%,100%{opacity:1;filter:drop-shadow(0 0 .04em rgba(236,107,255,.95)) drop-shadow(0 0 .2em rgba(217,75,240,.6))}
  36%{opacity:1;filter:drop-shadow(0 0 .05em rgba(255,170,255,1)) drop-shadow(0 0 .42em rgba(217,75,240,.9))}
  70%{opacity:.3}70.6%{opacity:1}71.4%{opacity:.45}72%{opacity:1}
}
h1 em,h2 em,.steps li::before,.cta .phone{animation:neon-life 9s linear infinite}
.block:nth-of-type(2n) h2 em{animation-duration:11s;animation-delay:-4s}
.steps li:nth-child(2)::before{animation-duration:10s;animation-delay:-2.5s}
.steps li:nth-child(3)::before{animation-duration:12s;animation-delay:-5s}
.cta .phone{animation-duration:7s}

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