@font-face{font-family:"Bricolage Grotesque";font-weight:500;font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:"Bricolage Grotesque";font-weight:500;font-display:swap;src:url(fonts/bricolage-grotesque-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Bricolage Grotesque";font-weight:700;font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:"Bricolage Grotesque";font-weight:700;font-display:swap;src:url(fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}

:root{
  --night:#14213d; --night-2:#1d2d52; --snow:#f3f6fb; --frost:#edf1f5; --white:#fff;
  --ink:#14213d; --muted:#4f5b73; --line:#d2dae4;
  --citrus:#ef7a2c; --citrus-deep:#a8481a; --peel:#fbe4d6; --leaf:#2f7d5b; --dim:#a9b5cf;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",ui-sans-serif,system-ui,sans-serif;
  --wrap:1120px; --gutter:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--frost)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--frost);color:var(--ink);font:400 1.0625rem/1.6 var(--body);text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--citrus-deep);text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--citrus);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);line-height:1.08;margin:0;letter-spacing:-.015em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--white);padding:8px 12px;z-index:10}
.skip:focus{left:8px}

/* header */
.top{display:flex;align-items:center;gap:20px;padding:18px 0;position:relative;z-index:3}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 1.3rem/1 var(--display);margin-right:auto}
.brand img{width:34px;height:34px;border-radius:9px}
.nav{display:flex;gap:22px;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.98rem}
.nav a:hover{color:var(--citrus-deep)}
.nav .lang{color:var(--muted);font-weight:400}
.hero-page .top .brand,.hero-page .top .nav a{color:var(--snow)}
.hero-page .top .nav .lang{color:var(--dim)}

/* hero */
.hero{background:var(--night);color:var(--snow);position:relative;overflow:hidden;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px);background-size:16px 16px}
.hero::after{content:"";position:absolute;width:min(42vw,500px);aspect-ratio:1;border-radius:50%;right:max(-11vw,-140px);top:96px;
  background:radial-gradient(circle at 36% 34%,#ffb27a 0 8%,var(--citrus) 32%,#d35e17 72%,#b94e10 100%);opacity:.95}
.hero::before{content:"";position:absolute;z-index:1;width:min(8vw,100px);aspect-ratio:2/1;right:min(14vw,170px);top:104px;
  background:var(--leaf);border-radius:0 100% 0 100%;transform:rotate(-24deg)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding-top:36px;padding-bottom:72px}
.hero h1{font-size:clamp(2.5rem,6vw,4.6rem);font-weight:800;max-width:12ch}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);color:#d7deeb;max-width:34ch;margin-top:22px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;margin-top:30px}
.store{display:inline-flex;align-items:center;gap:10px;background:var(--snow);color:var(--night);border-radius:14px;padding:13px 20px;font:700 1rem/1.2 var(--body);text-decoration:none}
.store svg{flex:none}
.store small{display:block;font-weight:400;font-size:.8rem;color:var(--muted)}
.platforms{color:var(--dim);font-size:.95rem;max-width:26ch}
.countdown{margin:40px 0 56px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;font-size:1.15rem;color:#d7deeb}
.countdown b{font:800 clamp(3.4rem,8vw,5.6rem)/.9 var(--display);color:var(--citrus);letter-spacing:-.03em}
.phone{justify-self:center;width:min(100%,330px);border-radius:42px;border:10px solid #0b1222;background:#0b1222;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.phone img{width:100%;height:auto;aspect-ratio:440/956;border-radius:32px}
.hero .phone{margin-top:8px}

/* sections */
section{padding:clamp(64px,9vw,112px) 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.split h2,.sec-title{font-size:clamp(2rem,4vw,3rem);font-weight:800;max-width:16ch}
.split p.body{margin-top:18px;max-width:46ch;color:var(--muted);font-size:1.12rem}
.example{margin-top:24px;background:var(--white);border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;font:500 1.02rem/1.7 var(--display);white-space:pre-line;max-width:40ch}
.split .phone{transform:none;width:min(100%,310px)}
.on-white{background:var(--white)}

.features{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 32px;margin-top:48px}
.feature{border-top:3px solid var(--citrus);padding-top:16px}
.feature h3{font-size:1.2rem;font-weight:700}
.feature p{color:var(--muted);margin-top:8px;font-size:1rem}

.screens{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.screens figure{margin:0}
.screens .phone{transform:none;width:100%;border-width:8px;border-radius:36px}
.screens .phone img{border-radius:28px}
.screens figcaption{margin-top:14px;font-weight:700;text-align:center}

.pricing{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;max-width:900px}
.plan{border-radius:22px;padding:30px;background:var(--white);border:1.5px solid var(--line)}
.plan.pro{background:var(--night);color:var(--snow);border-color:var(--night)}
.plan h3{font-size:1.5rem;font-weight:800}
.price{font:800 2.6rem/1 var(--display);margin:16px 0 6px}
.price span{font:400 1rem var(--body);color:var(--muted)}
.plan.pro .price span{color:var(--dim)}
.plan ul{margin:18px 0 0;padding:0 0 0 20px}
.plan li{margin:8px 0}
.note{margin-top:18px;color:var(--muted);font-size:.92rem}

.promise{background:var(--night);color:var(--snow);text-align:left}
.promise h2{font-size:clamp(2rem,4.6vw,3.6rem);font-weight:800;max-width:18ch}
.promise p{margin-top:20px;color:#d7deeb;font-size:1.15rem;max-width:48ch}
.promise a{color:var(--citrus)}

/* documents (privacy, support) */
.doc{max-width:72ch;padding-top:24px;padding-bottom:96px}
.doc h1{font-size:clamp(2.2rem,5vw,3.2rem);font-weight:800}
.doc .meta{color:var(--muted);margin-top:10px}
.doc h2{font-size:1.45rem;font-weight:700;margin:40px 0 10px}
.doc p,.doc li{color:#2b3650}
.doc p+p{margin-top:12px}
.doc ul{padding-left:22px}
.doc li{margin:6px 0}
.doc .callout{background:var(--white);border-left:4px solid var(--citrus);border-radius:0 12px 12px 0;padding:16px 20px;margin-top:24px;font-size:1.1rem}
.faq details{border-bottom:1.5px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font:700 1.15rem/1.35 var(--display);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:500;color:var(--citrus-deep);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:10px;color:#2b3650}
.contact{display:inline-block;margin-top:14px;background:var(--night);color:var(--snow);text-decoration:none;font-weight:700;padding:12px 18px;border-radius:12px}
.contact:hover{color:var(--citrus)}

/* footer */
.foot{border-top:1.5px solid var(--line);padding:36px 0 48px;color:var(--muted);font-size:.92rem}
.foot-grid{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:10px 22px}
.foot nav a{color:var(--ink);font-weight:700;text-decoration:none}
.foot address{font-style:normal;max-width:52ch}
.lang-hint{background:var(--peel);color:var(--ink);text-align:center;padding:10px var(--gutter);font-size:.95rem}
.lang-hint[hidden]{display:none}

@media (max-width:900px){
  .features{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .hero-grid,.split,.pricing{grid-template-columns:1fr}
  .hero::after{width:86vw;right:-34vw;top:auto;bottom:90px}
  .hero::before{display:none}
  .hero-grid{padding-bottom:48px}
  .countdown{margin:32px 0 40px}
  .screens{grid-template-columns:repeat(3,72%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .screens figure{scroll-snap-align:start}
  .split .phone{order:2}
  .nav{gap:14px}
  .nav .hide-sm{display:none}
}
@media (max-width:520px){ .features{grid-template-columns:1fr} }