@font-face{font-family:"Nunito";src:url("../fonts/nunito.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}
/* ---------- Tokens ---------- */
:root{
  --night:#10123A; --night-2:#1B1D55; --night-3:#2A1F5C;
  --paper:#F5F3FF; --paper-2:#E9E5FA; --white:#FFFFFF;
  --ink:#1B1A3E; --ink-2:#4E4C73; --ink-3:#7B799B;
  --purple:#7C6CF5; --purple-deep:#5B4BE0; --purple-soft:#CFC8FF;
  --gold:#FFC83D; --green:#2FBF71; --yellow:#F5B82E; --red:#E8574A; --blue:#4C9DF5;
  --radius:22px; --radius-s:12px;
  --font:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  --measure:62ch;
  --shadow-phone:0 30px 60px -20px rgba(16,18,58,.45), 0 12px 24px -12px rgba(16,18,58,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--white)}
img{max-width:100%;height:auto;display:block}
a{color:var(--purple-deep)}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
h1,h2,h3{line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem);font-weight:900}
h2{font-size:clamp(1.6rem,3vw,2.35rem);font-weight:800}
h3{font-size:1.2rem;font-weight:800}
p{margin:0 0 1em}
.wrap{width:min(1140px,100% - 2.5rem);margin-inline:auto}
.wrap--narrow{width:min(760px,100% - 2.5rem)}
.lede{font-size:1.2rem;color:var(--ink-2);max-width:var(--measure);margin-bottom:2.2rem}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--ink);padding:.5rem 1rem;z-index:100}
.skip:focus{left:1rem}

/* operation badges: encode the colour code from the app */
.op{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:.55rem;color:#fff;font-weight:900;font-size:1.05rem;flex:none;font-style:normal}
.op--add{background:var(--green)} .op--sub{background:var(--yellow)} .op--mul{background:var(--purple)} .op--div{background:var(--red)} .op--star{background:var(--gold);color:var(--ink)} .op--lock{background:var(--blue)}

/* buttons */
.btn{display:inline-block;background:var(--purple);color:#fff;text-decoration:none;font-weight:800;padding:.9rem 1.5rem;border-radius:999px;border:0;box-shadow:0 8px 20px -8px rgba(92,75,224,.7);transition:transform .15s,background .15s}
.btn:hover{background:var(--purple-deep);transform:translateY(-1px)}
.btn--big{font-size:1.15rem;padding:1.05rem 1.9rem}
.btn--small{padding:.55rem 1.05rem;font-size:.95rem}
.btn--light{background:var(--gold);color:var(--ink);box-shadow:0 8px 20px -8px rgba(255,200,61,.7)}
.btn--light:hover{background:#ffd76a}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(16,18,58,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:66px}
.brand{display:inline-flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font-weight:900;font-size:1.2rem}
.brand img{border-radius:10px}
.brand small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.01em;color:#B9B5E6;line-height:1.1;margin-top:.1rem}
.brand--foot small{color:#8B88B3}
@media (max-width:760px){.brand small{display:none}}
.topnav{display:flex;align-items:center;gap:1.4rem}
.topnav a{color:#fff;text-decoration:none;font-weight:700;opacity:.9}
.topnav a:hover{opacity:1}
.topnav .lang{border:1.5px solid rgba(255,255,255,.35);border-radius:999px;padding:.25rem .7rem;font-size:.9rem}
@media (max-width:760px){.topnav a:not(.btn):not(.lang){display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(180deg,#0B0C2B 0%,var(--night) 45%,var(--night-3) 100%);padding:4.5rem 0 5rem}
.sky{position:absolute;inset:0;pointer-events:none}
.sky i{position:absolute;inset:-20%;background-repeat:repeat;opacity:.9}
.sky i:nth-child(1){background-image:radial-gradient(1.5px 1.5px at 20px 30px,#fff 60%,transparent),radial-gradient(1px 1px at 120px 90px,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 240px 40px,#e5dcff 60%,transparent),radial-gradient(1px 1px at 300px 160px,#fff 60%,transparent),radial-gradient(1px 1px at 80px 200px,#fff 60%,transparent);background-size:340px 240px;animation:drift 90s linear infinite}
.sky i:nth-child(2){background-image:radial-gradient(2px 2px at 60px 120px,var(--gold) 60%,transparent),radial-gradient(1.5px 1.5px at 200px 60px,#fff 60%,transparent),radial-gradient(1px 1px at 400px 220px,#c9b8ff 60%,transparent);background-size:520px 300px;animation:drift 140s linear infinite reverse;opacity:.7}
.sky i:nth-child(3){background-image:radial-gradient(3px 3px at 150px 150px,rgba(255,200,61,.9) 40%,transparent),radial-gradient(2.5px 2.5px at 500px 80px,#fff 40%,transparent);background-size:800px 500px;animation:twinkle 6s ease-in-out infinite;opacity:.8}
@keyframes drift{to{transform:translate3d(-340px,0,0)}}
@keyframes twinkle{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.sky i{animation:none}}
.hero__in{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.hero__kicker{margin:0 0 1rem;font-weight:800;color:var(--gold);font-size:1rem}
.hero h1{max-width:14ch;text-wrap:balance}
.hero__sub{font-size:1.2rem;max-width:52ch;color:#D9D6F5;margin-bottom:1.8rem}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;margin-bottom:2rem}
.hero__secondary{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.promises{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.4rem;max-width:560px}
.promises li{display:flex;gap:.65rem;align-items:center;font-weight:700;color:#EDEBFF}
.hero__phone{position:relative;justify-self:center;width:min(100%,420px);aspect-ratio:1/1.1}
/* iPhone frame: titanium bezel, Dynamic Island, side buttons (percentages track the phone's size) */
.phone{position:relative;margin:0;padding:2.6%;background:linear-gradient(160deg,#3a3a46,#17171f 40%,#1c1c25 60%,#3a3a46);border-radius:14% / 6.45%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),inset 0 0 0 5px #08080f,var(--shadow-phone)}
.phone img{border-radius:11.5% / 5.3%;background:#0b0c2b}
.phone::before{content:"";position:absolute;top:4.1%;left:50%;width:27%;height:2.6%;transform:translateX(-50%);background:#000;border-radius:999px;z-index:2}
.phone::after{content:"";position:absolute;left:-1.6%;right:-1.6%;top:15%;height:30%;background:
  linear-gradient(#2b2b36,#2b2b36) left 0 top 0 / 1.6% 22% no-repeat,
  linear-gradient(#2b2b36,#2b2b36) left 0 top 46% / 1.6% 22% no-repeat,
  linear-gradient(#2b2b36,#2b2b36) right 0 top 20% / 1.6% 38% no-repeat;pointer-events:none}
.phone--hero{position:absolute;left:12%;top:0;width:62%;z-index:2;transform:rotate(-3deg)}
.phone--back{position:absolute;right:0;top:10%;width:56%;z-index:1;transform:rotate(6deg) translateX(6%);opacity:.95}
.rocket{position:absolute;left:-2%;bottom:6%;font-size:3rem;z-index:3;filter:drop-shadow(0 8px 14px rgba(0,0,0,.4));animation:liftoff 1.6s cubic-bezier(.2,.9,.3,1) both}
@keyframes liftoff{from{transform:translate(-30px,60px) rotate(-10deg);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.rocket{animation:none}}
@media (max-width:900px){
  .hero{padding:3rem 0 3.5rem}
  .hero__in{grid-template-columns:1fr;gap:2.5rem}
  .hero__phone{width:min(100%,360px);aspect-ratio:1/1.15}
  .promises{grid-template-columns:1fr}
}

/* ---------- Trust strip ---------- */
.strip{background:var(--gold);color:var(--ink)}
.strip__in{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.25rem 0}
.strip__item{display:flex;flex-direction:column;align-items:center;text-align:center}
.strip__item strong{font-size:1.5rem;font-weight:900;line-height:1.1}
.strip__item span{font-size:.92rem;font-weight:700;opacity:.85}
@media (max-width:700px){.strip__in{grid-template-columns:repeat(2,1fr)}}

/* ---------- Sections ---------- */
.section{padding:5rem 0}
.section--paper{background:var(--paper)}
@media (max-width:700px){.section{padding:3.5rem 0}}

/* gallery: bounded to the same column as the heading, scrolls inside it */
.gallery{width:min(1140px,100% - 2.5rem);margin-inline:auto;display:flex;gap:1.6rem;overflow-x:auto;scroll-snap-type:x proximity;padding:.5rem 0 1.5rem;scrollbar-width:thin}
.gallery__item{flex:0 0 300px;scroll-snap-align:start;margin:0}
.gallery__item img{border-radius:26px;box-shadow:var(--shadow-phone)}
.gallery__item figcaption{margin-top:1rem;color:var(--ink-2);font-size:.98rem;line-height:1.45}
.gallery__item figcaption strong{display:block;color:var(--ink);font-weight:800}
@media (max-width:600px){.gallery__item{flex-basis:240px}}
.gallery-wrap{position:relative}
.gallery__btn{position:absolute;top:calc(.5rem + 300px * 1391 / 640 / 2);transform:translateY(-50%);z-index:2;width:3rem;height:3rem;border-radius:50%;border:0;background:var(--night);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px -8px rgba(16,18,58,.55);transition:background .15s,opacity .15s}
.gallery__btn:hover{background:var(--purple-deep)}
.gallery__btn[disabled]{opacity:.28;cursor:default}
.gallery__btn--prev{left:max(.5rem,calc(50% - 570px - 1.5rem))}
.gallery__btn--next{right:max(.5rem,calc(50% - 570px - 1.5rem))}
@media (max-width:1240px){.gallery__btn--prev{left:.4rem}.gallery__btn--next{right:.4rem}}
@media (max-width:600px){.gallery__btn{width:2.5rem;height:2.5rem;top:calc(.5rem + 240px * 1391 / 640 / 2)}}

/* steps */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:3.5rem}
.step{display:grid;grid-template-columns:260px 1fr;gap:2.5rem;align-items:center}
.step:nth-child(even){grid-template-columns:1fr 260px}
.step:nth-child(even) .step__media{order:2}
.step__media img{border-radius:26px;box-shadow:var(--shadow-phone)}
.step__n{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--night);color:var(--gold);font-weight:900;margin-bottom:.8rem}
.step__body p{max-width:var(--measure);color:var(--ink-2)}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.ticks li{padding-left:1.7rem;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:1.05rem;height:1.05rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%232FBF71'/%3E%3Cpath d='M4.5 8.4l2.4 2.4 4.7-5.2' stroke='%23fff' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:760px){.step,.step:nth-child(even){grid-template-columns:1fr}.step:nth-child(even) .step__media{order:0}.step__media{max-width:220px}}

/* parents */
.parents{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.facts{display:grid;gap:1rem;margin:0 0 2rem}
.facts div{border-left:4px solid var(--purple);padding-left:1rem}
.facts dt{font-weight:800}
.facts dd{margin:0;color:var(--ink-2)}
.parents__media{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}
.parents__media .phone:last-child{margin-top:3rem}
@media (max-width:860px){.parents{grid-template-columns:1fr}.parents__media{max-width:520px}}

/* guides list */
.guidelist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
.guidelist a{display:flex;gap:1rem;align-items:flex-start;text-decoration:none;color:var(--ink);background:var(--white);border:1.5px solid var(--paper-2);border-radius:var(--radius-s);padding:1.1rem 1.2rem;transition:border-color .15s}
.guidelist a:hover{border-color:var(--purple)}
.guidelist strong{display:block;font-weight:800;margin-bottom:.2rem}
.guidelist em{font-style:normal;color:var(--ink-2);font-size:.95rem}
@media (max-width:700px){.guidelist{grid-template-columns:1fr}}

/* faq */
.faq{display:grid;gap:.6rem}
.faq__item{border:1.5px solid var(--paper-2);border-radius:var(--radius-s);background:var(--white)}
.faq__item summary{list-style:none;cursor:pointer;padding:1rem 3rem 1rem 1.2rem;position:relative}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary h3{margin:0;font-size:1.08rem}
.faq__item summary::after{content:"+";position:absolute;right:1.1rem;top:.75rem;font-size:1.6rem;font-weight:400;color:var(--purple);transition:transform .2s}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__a{padding:0 1.2rem 1.2rem;color:var(--ink-2)}
.faq__a p{max-width:var(--measure)}
.more{font-weight:800}

/* ---------- CTA + footer ---------- */
.cta{background:var(--night);color:#fff;padding:4.5rem 0}
.cta__in{display:flex;gap:2rem;align-items:center}
.cta__icon{border-radius:26px;flex:none;box-shadow:var(--shadow-phone)}
.cta h2{margin-bottom:.4rem}
.cta p{color:#D9D6F5;max-width:var(--measure)}
.cta__fine{font-size:.9rem;margin-top:1rem;color:#B9B5E6}
@media (max-width:600px){.cta__in{flex-direction:column;align-items:flex-start}}
.foot{background:#0B0C2B;color:#C9C6EA;padding:3rem 0 1.5rem;font-size:.95rem}
.foot__in{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem}
.foot h3{color:#fff;font-size:1rem;margin-bottom:.6rem}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.foot a{color:#E4E1FF;text-decoration:none}
.foot a:hover{text-decoration:underline}
.brand--foot{font-size:1.05rem;margin-bottom:.6rem}
.foot__legal{margin-top:2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);color:#8B88B3;font-size:.85rem}
.foot__legal p{margin:0 0 .35rem}
.foot__legal a{color:#C9C6EA}
@media (max-width:700px){.foot__in{grid-template-columns:1fr}}

/* ---------- Guide pages ---------- */
.guide__head{position:relative;overflow:hidden;background:linear-gradient(180deg,#0B0C2B,var(--night-3));color:#fff;padding:3.5rem 0 3rem}
.crumbs{font-size:.9rem;color:#B9B5E6;margin-bottom:1.4rem}
.crumbs a{color:#E4E1FF}
.guide__query{display:flex;align-items:center;gap:.6rem;color:var(--gold);font-weight:800;margin-bottom:.8rem}
.guide h1{max-width:22ch;text-wrap:balance}
.guide__lede{font-size:1.2rem;color:#D9D6F5;max-width:58ch}
.guide__meta{font-size:.9rem;color:#B9B5E6;margin:0}
.guide__grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:3.5rem;padding:3.5rem 0 4rem;align-items:start}
.guide__body{max-width:var(--measure)}
.guide__body section{margin-bottom:2.6rem}
.guide__body p,.guide__body li{color:var(--ink-2)}
.guide__body ul{padding-left:1.3rem}
.inapp{background:var(--paper);border-radius:var(--radius);padding:1.8rem 1.8rem 2rem;border:1.5px solid var(--paper-2)}
.howto{padding-left:1.3rem;display:grid;gap:.7rem;margin:0 0 1.2rem}
.howto strong{color:var(--ink)}
.inapp__note{font-size:.95rem}
.side-shot{margin:0;position:sticky;top:90px}
.side-shot figcaption{color:var(--ink-2);font-size:.92rem;padding:.9rem .4rem 0;text-align:center}
.related{margin-top:1.5rem}
.related h2{font-size:1.05rem}
.related ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.related a{font-weight:700;text-decoration:none}
.related a:hover{text-decoration:underline}
@media (max-width:860px){.guide__grid{grid-template-columns:1fr}.guide__side{order:-1}.side-shot{position:static;max-width:260px}}

/* small-screen polish */
.brand span,.topnav .btn,.topnav .lang{white-space:nowrap}
@media (max-width:600px){
  .topbar__in{gap:.6rem}
  .brand{font-size:1.05rem}
  .btn--big{display:block;width:100%;text-align:center}
  .hero__actions{flex-direction:column;align-items:flex-start}
}