@font-face{font-family:Switzer;src:url(/fonts/switzer-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Switzer;src:url(/fonts/switzer-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Switzer;src:url(/fonts/switzer-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --navy:#0B1220;--surface:#121A2B;--elev:#1A2438;--ink:#F2F5FA;--muted:#A9B4C8;
  --mint:#3DF5D2;--on-mint:#06231D;--green:#2ECC71;--coral:#FF6B5E;--blue:#5AA9FF;--paper:#F2F5FA;--paper-2:#DDE3EE;
  --m:clamp(20px,3vw,40px);--gap:16px;--bar:64px;--pad:clamp(72px,9vw,140px);
  --fs-small:.875rem;
  --fs-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --fs-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --fs-h2:clamp(2.25rem,1rem + 3.6vw,4.25rem);
  --fs-display:clamp(2.75rem,.6rem + 7.6vw,8.5rem);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 8px)}
body{margin:0;background:var(--navy);color:var(--ink);font:400 var(--fs-body)/1.5 Switzer,system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:-.005em;font-feature-settings:'tnum' 0;overflow-x:hidden}
img{max-width:100%;height:auto}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--m);top:-80px;z-index:100;background:var(--mint);color:var(--on-mint);padding:12px 20px;border-radius:999px;font-weight:500}
.skip:focus{top:12px}

/* fields: each chapter its own flat colour; --b/--bi drive buttons on that field */
.f-navy{--f:var(--navy);--fi:var(--ink);--fm:var(--muted);--b:var(--mint);--bi:var(--on-mint);--tile:var(--surface)}
.f-mint{--f:var(--mint);--fi:var(--on-mint);--fm:var(--on-mint);--b:var(--navy);--bi:var(--ink)}
.f-coral{--f:var(--coral);--fi:var(--navy);--fm:var(--navy);--b:var(--navy);--bi:var(--ink)}
.f-blue{--f:var(--blue);--fi:var(--navy);--fm:var(--navy);--b:var(--navy);--bi:var(--ink)}
.f-green{--f:var(--green);--fi:var(--navy);--fm:var(--navy);--b:var(--navy);--bi:var(--ink)}
.f-paper{--f:var(--paper);--fi:var(--navy);--fm:#46526A;--b:var(--navy);--bi:var(--ink)}

/* header: a plain bar that takes the colour of the chapter under it */
.bar{position:sticky;top:0;z-index:50;height:var(--bar);display:flex;align-items:center;justify-content:space-between;padding:0 var(--m);background:var(--f);color:var(--fi);transition:background-color .3s,color .3s}
.bar:not(.f-navy) .mark rect{fill:var(--navy)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:1.25rem;letter-spacing:-.03em}
.bar-nav{display:flex;align-items:center;gap:clamp(12px,2.2vw,32px)}
.bar-link{text-decoration:none;font-weight:500;font-size:1rem;padding:8px 2px}
.bar-link:hover{text-decoration:underline;text-underline-offset:4px}
.bar-link.lang{font-weight:600;border-radius:999px;padding:8px 12px;background:rgba(127,127,127,.18)}
.btn .short{display:none}

/* buttons: pill, flat, one fill */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border:0;border-radius:999px;background:var(--b,var(--mint));color:var(--bi,var(--on-mint));font:500 1.0625rem/1 Switzer,system-ui,sans-serif;letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:transform .18s var(--ease),filter .18s}
.btn:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn-sm{min-height:44px;padding:0 20px;font-size:1rem}
.btn-block{width:100%;min-height:56px;border-radius:14px}

.ch{background:var(--f);color:var(--fi);padding:var(--pad) var(--m);min-height:88svh;position:relative}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
h1,h2,.h-display{font-weight:600;letter-spacing:-.04em;line-height:.95}
h2{font-size:var(--fs-h2)}
h1 span,h2 span{display:block}
.lead{font-size:var(--fs-lead);line-height:1.3;font-weight:500;letter-spacing:-.02em}
.body-l{font-size:var(--fs-body);max-width:34em}
.small{font-size:var(--fs-small);line-height:1.45}
.h-display{font-size:var(--fs-display);line-height:.9}

/* hero */
.hero{--hp:clamp(40px,6vw,88px);padding-top:var(--hp);padding-bottom:0;min-height:calc(100svh - var(--bar));overflow:hidden}
.hero h1{font-size:var(--fs-display);line-height:.9}
.hero h1 span+span{color:var(--mint)}
.hero-copy{margin-top:clamp(28px,3.4vw,52px);max-width:36rem;padding-bottom:var(--pad)}
.hero-copy .lead{font-size:var(--fs-lead);font-weight:400;line-height:1.35;letter-spacing:-.015em}
.soon{display:inline-flex;align-items:center;min-height:52px;margin-top:28px;padding:0 24px;border:1.5px solid var(--mint);border-radius:999px;color:var(--mint);font-weight:500}
.soon--dark{border-color:var(--navy);color:var(--navy)}
.btn.is-soon{cursor:default}
.btn.is-soon:hover,.btn.is-soon:active{filter:none;transform:none}
.note{margin-top:8px;color:var(--fm)}

/* device frame drawn in CSS */
.phone{background:#04070D;padding:9px;border-radius:50px;width:100%}
.phone img{display:block;width:100%;height:auto;border-radius:41px;background:var(--navy)}
.phone--bleed{padding-bottom:0;border-radius:50px 50px 0 0}
.phone--bleed img{border-radius:41px 41px 0 0}
.hero-phone{position:absolute;right:var(--m);top:calc(var(--hp) + var(--fs-display)*.9 + 20px);width:clamp(280px,26vw,380px)}

/* evidence */
.ev{padding-bottom:0;overflow:hidden}
.ev-text{grid-column:1/8;padding-bottom:var(--pad)}
.ev-phone{grid-column:9/13;align-self:end;margin-top:var(--pad)}
.ev .grid{align-items:end}
.ev h2{margin-bottom:28px}
.lv{margin-top:36px}
.lv-btns{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.lv-btn{min-height:48px;padding:0 20px;border:0;border-radius:999px;background:rgba(6,35,29,.12);color:var(--on-mint);font:500 1rem Switzer,system-ui,sans-serif;cursor:pointer;transition:background-color .18s,transform .18s var(--ease)}
.lv-btn:hover{background:rgba(6,35,29,.22)}
.lv-btn:active{transform:scale(.97)}
.lv-btn[aria-pressed=true]{background:var(--navy);color:var(--mint)}
.lv-panel{display:flex;gap:16px;align-items:flex-start;min-height:104px;padding:20px 24px;border-radius:20px;background:var(--navy);color:var(--ink);margin-bottom:20px;max-width:34em}
.lv-mark{flex:none;margin-top:4px}
.lv-text{font-size:var(--fs-body)}

/* portfolio */
.pf{padding-bottom:0;overflow:hidden}
.pf .grid{align-items:center}
.pf-phone{grid-column:1/5;align-self:end}
.pf-text{grid-column:6/13;padding-bottom:var(--pad)}
.pf h2{margin-bottom:28px}
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin:40px 0 12px}
.fig{display:block;font-size:var(--fs-h2);font-weight:600;letter-spacing:-.04em;line-height:1}
.fig-l{display:block;font-weight:500;margin-top:6px}
.pf .lead{margin-top:48px}
.src{margin-top:12px;display:grid;gap:8px;max-width:34em}
.src li{padding:14px 20px;border-radius:14px;background:rgba(11,18,32,.12);font-weight:500}

/* follow */
.fw{padding-bottom:0;overflow:hidden}
.fw .grid{align-items:end}
.fw-text{grid-column:1/6;padding-bottom:var(--pad)}
.fw h2{margin-bottom:28px}
.fw-phones{grid-column:7/13;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:end;margin-top:var(--pad)}
.fw-low{margin-bottom:0}
.push{margin:36px 0 12px;max-width:26rem;padding:16px 18px;border-radius:24px;background:var(--navy);color:var(--ink);box-shadow:0 18px 40px rgba(11,18,32,.28)} /* taste-skill-ignore: floating notification */
.push-row{display:flex;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--muted)}
.push-app{font-weight:500}
.push-time{margin-left:auto}
.push-title{margin-top:10px;font-weight:600;color:var(--green)}
.push-body{color:var(--ink)}

/* pricing */
.pr-head{margin-bottom:56px;align-items:end}
.pr-head h2{grid-column:1/8}
.pr-head p{grid-column:9/13;color:var(--navy)}
.ticket{position:relative;display:grid;grid-template-columns:7fr 0 3fr;background:var(--navy);color:var(--ink);border-radius:24px}
.t-main{padding:clamp(24px,3vw,44px)}
.t-title{font-size:var(--fs-h2);font-weight:600;letter-spacing:-.04em;line-height:.95}
.t-lines{display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;margin-top:40px;font-size:1.0625rem;line-height:1.4}
.t-lines li{padding-left:22px;position:relative}
.t-lines li::before{content:'';position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--mint)}
.t-stub{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;justify-content:center;gap:20px}
.t-sep{position:relative;width:0;height:100%}
.notch{position:absolute;width:28px;height:28px;border-radius:50%;background:var(--paper)}
.notch-a{left:-14px;top:-14px}
.notch-b{left:-14px;bottom:-14px}
.perf{position:absolute;left:-3px;top:24px;bottom:24px;width:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='16'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23F2F5FA'/%3E%3C/svg%3E") center top/6px 16px repeat-y}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--elev);border-radius:999px;padding:4px}
.seg button{min-height:44px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:500 1rem Switzer,system-ui,sans-serif;cursor:pointer;transition:background-color .18s,color .18s}
.seg button[aria-checked=true]{background:var(--paper);color:var(--navy)}
.ticket .btn{--b:var(--mint);--bi:var(--on-mint)}
.t-price{text-align:center;line-height:1;display:grid;gap:8px;justify-items:center}
.t-amt{font-size:var(--fs-h2);font-weight:600;letter-spacing:-.04em;white-space:nowrap}
.t-per{font-size:var(--fs-lead);color:var(--muted)}
.pr-note{margin-top:20px;color:var(--fm)}

/* faq */
.faq-h{grid-column:1/5;position:sticky;top:calc(var(--bar) + 32px)}
.faq-list{grid-column:5/13;display:grid;gap:8px}
.faq details{background:var(--surface);border-radius:16px;color:var(--ink);transition:background-color .2s}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding:16px 24px;cursor:pointer;font-weight:500;font-size:1.25rem;line-height:1.25;letter-spacing:-.015em;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details:hover{background:var(--elev)}
.faq details[open]{background:var(--mint);color:var(--on-mint)}
.faq details p{padding:0 24px 24px;max-width:52ch;font-size:var(--fs-body)}
.pm{position:relative;flex:none;width:16px;height:16px}
.pm::before,.pm::after{content:'';position:absolute;left:0;top:6.5px;width:16px;height:3px;background:currentColor;border-radius:2px;transition:transform .25s var(--ease)}
.pm::after{transform:rotate(90deg)}
details[open] .pm::after{transform:rotate(0)}

/* cta */
.cta .grid{align-items:end;min-height:calc(90svh - 2*var(--pad))}
.cta-text{grid-column:1/7;align-self:end}
.cta-text .body-l{margin-top:28px}

/* footer */
.foot{min-height:0;padding-top:var(--pad);padding-bottom:32px}
.blocks{display:flex;gap:4px;height:34svh;min-height:200px;margin-bottom:56px}
.word{display:flex;gap:4px;align-items:flex-end;flex:1 1 0}
.word:first-child{flex-grow:5}.word:last-child{flex-grow:6}
.blk{flex:1 1 0;display:flex;justify-content:center;padding-top:.08em;background:var(--blk,var(--mint));color:var(--navy);font-weight:600;font-size:clamp(2.5rem,8.4vw,9.5rem);line-height:1;letter-spacing:-.04em;height:var(--h,100%)}
.blk::after{content:attr(data-c)}
.blk:nth-child(4n+1){--blk:var(--mint);--h:100%}
.blk:nth-child(4n+2){--blk:var(--green);--h:78%}
.blk:nth-child(4n+3){--blk:var(--coral);--h:90%}
.blk:nth-child(4n+4){--blk:var(--blue);--h:64%}
.foot-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:32px}
.foot-cols{grid-column:1/9;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.foot-contact{grid-column:9/13}
.foot-h{font-size:1rem;font-weight:500;color:var(--muted);margin-bottom:12px;letter-spacing:0}
.foot ul{display:grid;gap:6px}
.foot a{font-size:1rem;text-decoration:none}
.foot a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-contact a{font-size:var(--fs-lead);font-weight:500}
.foot-last{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:72px;flex-wrap:wrap}
.foot-last .small{color:var(--muted);max-width:60ch;font-size:1rem}

/* doc pages */
.doc{min-height:70svh}
.doc h1{font-size:var(--fs-h2);margin-bottom:12px}
.doc>.small{color:var(--fm);margin-bottom:48px}
.doc--support>.small{margin:48px 0 0;color:var(--fm)}
.doc-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.doc-body{grid-column:1/8}
.toc{grid-column:9/13;position:sticky;top:calc(var(--bar) + 32px);margin-top:40px}
.toc ul{display:grid;gap:4px}
.toc a{display:block;padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:500;background:var(--surface);transition:background-color .18s}
.toc a:hover{background:var(--elev)}
.doc>.body-l{margin-bottom:12px}
.doc--support .doc-body{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:none;margin-top:40px}
.doc--support .doc-body section{margin:0;padding:28px;border-radius:20px;background:rgba(6,35,29,.1)}
.doc--support .doc-body section:nth-child(odd):last-child{grid-column:1/-1}
.doc-body section{margin-top:40px}
.doc-body h2{font-size:var(--fs-lead);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-bottom:12px}
.doc-body p+p{margin-top:12px}
.doc-body a,.doc a:not(.btn){text-underline-offset:3px}
.doc--support .body-l{margin-bottom:24px}
.nf .body-l{margin:28px 0}
.nf{min-height:80svh;overflow:hidden;padding-bottom:0}
.nf-text{padding-bottom:var(--pad)}
.nf h1{font-size:var(--fs-display);line-height:.9}
.nf-phone{position:absolute;right:var(--m);bottom:0;width:clamp(240px,24vw,340px)}

/* motion: entrances only when JS runs */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
.js .phone.rv.in{transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  .js .rv{opacity:1;transform:none}
  .btn:hover,.btn:active{transform:none}
}

@media (max-width:1100px){
  .foot-cols{grid-template-columns:repeat(2,1fr);grid-column:1/-1}
  .foot-contact{grid-column:1/-1}
  .t-lines{grid-template-columns:1fr}
}
@media (max-width:960px){
  .doc-body{grid-column:1/-1}.toc{display:none}.doc--support .doc-body{grid-template-columns:1fr}
  .nf-phone{display:none}
  .hero-phone{position:relative;right:auto;top:auto;width:min(380px,82%);margin:0 auto}
  .hero-copy{padding-bottom:48px}
  .ev-text,.ev-phone,.pf-phone,.pf-text,.fw-text,.fw-phones,.pr-head h2,.pr-head p,.cta-text,.faq-h,.faq-list{grid-column:1/-1}
  .ev-phone,.pf-phone{margin-top:0;width:min(380px,86%);justify-self:center}
  .ev-text,.pf-text,.fw-text{padding-bottom:48px}
  .pf-phone{order:2}.pf-text{order:1}
  .fw-phones{margin-top:0;max-width:520px;margin-inline:auto;width:100%}
  .pr-head{row-gap:20px}
  .ticket{grid-template-columns:1fr;max-width:640px}
  .t-sep{width:100%;height:0}
  .notch-a{left:-14px;top:-14px}
  .notch-b{left:auto;right:-14px;bottom:auto;top:-14px}
  .perf{left:24px;right:24px;top:-3px;bottom:auto;width:auto;height:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23F2F5FA'/%3E%3C/svg%3E") left center/16px 6px repeat-x}
  .fw-low{display:none}
  .fw-phones{grid-template-columns:1fr;max-width:380px}
  .faq-h{position:static;margin-bottom:24px}
  .cta .grid{min-height:0;row-gap:40px}
  .cta-text{align-self:start}
  .pf .figs{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .blocks{flex-direction:column;height:auto;gap:4px;margin-bottom:40px}
  .word{height:20svh;min-height:110px}
  .blk{font-size:clamp(2.5rem,17vw,6rem)}
  .btn .long{display:none}.btn .short{display:inline}
  .bar-link:not(.lang){display:none}
}
@media (max-width:560px){
  .nf h1{font-size:var(--fs-h2)}
  .figs{margin-top:28px}
  .faq summary{font-size:1.125rem;min-height:64px;padding:12px 20px}
  .faq details p{padding:0 20px 20px}
}