/* ── tokens ───────────────────────────────────────────────── */
:root{
  --magenta:#FC0090; --magenta-ink:#D1006F; --plum:#540084; --plum-deep:#3A005C;
  --save:#00875A; --ink:#1B0A22; --ink-2:#5B4864; --ink-3:#8A7891;
  --ground:#FFFFFF; --ground-2:#FAF6FB; --surface:#FFFFFF; --surface-2:#F5EEF7;
  --line:#E9DCEE; --line-2:#D8C6DF;
  --band:#3A005C; --band-ink:#F7EDFA; --band-ink-2:#C9A8DA; --band-line:#5A2578;
  --shadow:0 1px 2px rgba(27,10,34,.05),0 8px 24px -12px rgba(84,0,132,.18);
  --shadow-lg:0 2px 4px rgba(27,10,34,.06),0 24px 48px -24px rgba(84,0,132,.30);
  --r:14px; --r-lg:22px; --maxw:1180px;
  --step:clamp(1rem,.85rem + .6vw,1.125rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --magenta:#FF3AA8; --magenta-ink:#FF6ABD; --plum:#B07AD6; --plum-deep:#0F0714;
    --save:#3FD39B; --ink:#F7EDFA; --ink-2:#C2AECC; --ink-3:#9A87A4;
    --ground:#140A1A; --ground-2:#1A0E22; --surface:#20122A; --surface-2:#291634;
    --line:#33203E; --line-2:#452C54;
    --band:#0F0714; --band-ink:#F7EDFA; --band-ink-2:#B79ec5; --band-line:#33203E;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-lg:0 2px 4px rgba(0,0,0,.5),0 24px 48px -24px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --magenta:#FF3AA8; --magenta-ink:#FF6ABD; --plum:#B07AD6; --plum-deep:#0F0714;
  --save:#3FD39B; --ink:#F7EDFA; --ink-2:#C2AECC; --ink-3:#9A87A4;
  --ground:#140A1A; --ground-2:#1A0E22; --surface:#20122A; --surface-2:#291634;
  --line:#33203E; --line-2:#452C54;
  --band:#0F0714; --band-ink:#F7EDFA; --band-ink-2:#B79ec5; --band-line:#33203E;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5),0 24px 48px -24px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:Onest,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:var(--step);line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--magenta);color:#fff;padding:.7rem 1.1rem;z-index:200;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.flag{font-family:"Noto Color Emoji","Segoe UI Emoji",sans-serif;font-size:1em;line-height:1}

/* ── type ─────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:Unbounded,Onest,sans-serif;font-weight:800;line-height:1.08;
  letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.2rem,1.3rem + 3.9vw,4.1rem)}
h2{font-size:clamp(1.7rem,1.15rem + 2.2vw,2.85rem)}
h3{font-size:clamp(1.12rem,1.02rem + .45vw,1.4rem);font-weight:600;letter-spacing:-.01em}
h4{font-size:1rem;font-weight:600;letter-spacing:-.005em}
p{margin:0}
.lede{font-size:clamp(1.05rem,.98rem + .5vw,1.3rem);color:var(--ink-2);max-width:62ch;line-height:1.55}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--plum);
  background:var(--surface-2);border:1px solid var(--line);
  padding:.4rem .8rem;border-radius:999px}
.band .eyebrow{color:var(--band-ink);background:rgba(255,255,255,.08);border-color:var(--band-line)}
.num{font-variant-numeric:tabular-nums}

/* ── header ───────────────────────────────────────────────── */
header.site{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:1rem;min-height:70px}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-family:Unbounded,sans-serif;
  font-weight:800;font-size:1.15rem;letter-spacing:-.03em;color:var(--ink);flex:none}
.brand img{width:34px;height:auto}
nav.main{margin-inline-start:auto;display:flex;gap:.15rem;align-items:center}
nav.main a{text-decoration:none;font-size:.925rem;font-weight:500;color:var(--ink-2);
  padding:.55rem .75rem;border-radius:9px;transition:color .15s,background .15s;white-space:nowrap}
nav.main a:hover{color:var(--ink);background:var(--surface-2)}
nav.main a[aria-current="page"]{color:var(--magenta-ink);font-weight:600}
.tools{display:flex;align-items:center;gap:.6rem;margin-inline-start:.4rem}
.lang{position:relative}
.lang button{display:flex;align-items:center;gap:.45rem;font:inherit;font-size:.875rem;font-weight:600;
  background:var(--surface);color:var(--ink);border:1px solid var(--line-2);
  padding:.5rem .7rem;border-radius:10px;cursor:pointer}
.lang button:hover{border-color:var(--plum)}
.lang .caret{width:9px;height:9px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translate(-1px,-1px)}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;margin:0;padding:.35rem;
  list-style:none;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;
  box-shadow:var(--shadow-lg);display:none}
.lang[data-open="true"] ul{display:block}
.lang li button{width:100%;justify-content:flex-start;border:0;background:none;padding:.55rem .6rem;font-weight:500}
.lang li button:hover{background:var(--surface-2)}
.lang li button[aria-current="true"]{color:var(--magenta-ink);font-weight:700}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--magenta);color:#fff;text-decoration:none;font-weight:700;font-size:.9rem;
  padding:.68rem 1.15rem;border-radius:11px;border:0;cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 18px -8px rgba(252,0,144,.7);
  transition:transform .15s,filter .15s}
.cta:hover{filter:brightness(1.07);transform:translateY(-1px)}
.cta.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-2);box-shadow:none}
.cta.ghost:hover{border-color:var(--plum);filter:none}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line-2);background:var(--surface);
  border-radius:10px;cursor:pointer;padding:0;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:20px}.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1000px){
  nav.main{position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--ground);border-bottom:1px solid var(--line);padding:.5rem 1rem 1.1rem;
    box-shadow:var(--shadow-lg);display:none}
  nav.main[data-open="true"]{display:flex}
  nav.main a{padding:.85rem .6rem;font-size:1.02rem;border-bottom:1px solid var(--line)}
  nav.main a:last-child{border-bottom:0}
  .burger{display:block;margin-inline-start:auto;order:5}
  .tools{margin-inline-start:0}
  .tools .cta.head{display:none}
}
@media (max-width:520px){ .lang button .lname{display:none} }

/* ── sections ─────────────────────────────────────────────── */
main{display:block}
.view{display:none}
.view.on{display:block}
section{padding-block:clamp(3.2rem,2rem + 5vw,6rem)}
section.tint{background:var(--ground-2);border-block:1px solid var(--line)}
section.band{background:var(--band);color:var(--band-ink);border-block:1px solid var(--band-line)}
.band h2,.band h3{color:var(--band-ink)}
.band .lede{color:var(--band-ink-2)}
.head{display:flex;flex-direction:column;gap:1rem;margin-bottom:2.6rem;max-width:66ch}
.grid{display:grid;gap:clamp(1rem,.6rem + 1.2vw,1.5rem)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr))}

/* ── hero ─────────────────────────────────────────────────── */
.hero{padding-block:clamp(2.4rem,1.4rem + 4vw,4.6rem);overflow:hidden}
.hero-in{display:grid;gap:clamp(2rem,1rem + 4vw,3.6rem);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
@media (max-width:900px){.hero-in{grid-template-columns:1fr}}
.hero h1{margin-block:1.1rem .3rem}
/* the price-tag headline: old price struck, new price stamped */
.h1-old{display:block;position:relative;width:max-content;max-width:100%;color:var(--ink-3);
  font-family:Unbounded,sans-serif;font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.5rem,.95rem + 2.3vw,2.6rem);line-height:1.1}
.h1-old::after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:.14em;
  background:var(--magenta);border-radius:2px;transform:rotate(-2.4deg)}
.h1-new{display:block;color:var(--ink)}
.hero .lede{margin-top:1.2rem}
.stores-inline{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.6rem;align-items:center}
.chip{font-size:.76rem;font-weight:600;letter-spacing:.02em;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:.32rem .68rem}
.badges{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
.badges a{display:block;transition:transform .15s,filter .15s}
.badges a:hover{transform:translateY(-2px);filter:brightness(1.05)}
.badges img{width:158px;height:auto;border-radius:8px}
.hero-art{position:relative}
.hero-art img{border-radius:18px;filter:drop-shadow(0 30px 60px rgba(84,0,132,.28))}
.stat{display:flex;align-items:baseline;gap:.5rem;margin-top:1.4rem;flex-wrap:wrap}
.stat b{font-family:Unbounded,sans-serif;font-size:1.6rem;font-weight:800;color:var(--magenta-ink);letter-spacing:-.03em}
.stat span{color:var(--ink-2);font-size:.95rem}

/* ── cards ────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.15rem,.9rem + .8vw,1.6rem);box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:.6rem;transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.band .card{background:rgba(255,255,255,.05);border-color:var(--band-line);box-shadow:none}
.card p{color:var(--ink-2);font-size:.95rem}
.band .card p{color:var(--band-ink-2)}
.ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--magenta),var(--plum));color:#fff;flex:none}
.ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* feature rows with screenshots */
.feat{display:grid;gap:clamp(1.6rem,1rem + 2.4vw,3.2rem);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.72fr)}
.feat.rev{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
.feat.rev .feat-txt{order:2}
@media (max-width:820px){.feat,.feat.rev{grid-template-columns:1fr}.feat.rev .feat-txt{order:0}}
.feat img{border-radius:20px;box-shadow:var(--shadow-lg);margin-inline:auto}
.ticks{list-style:none;margin:1.3rem 0 0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.ticks li{display:flex;gap:.75rem;align-items:flex-start;color:var(--ink-2);font-size:.98rem}
.ticks svg{width:20px;height:20px;flex:none;margin-top:.18rem;stroke:var(--magenta);
  fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* store logo wall */
.wall{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));align-items:center}
.wall figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:.9rem 1rem;display:grid;place-items:center;min-height:76px}
.wall img{max-height:42px;width:auto;object-fit:contain}

/* ── pricing as price tags ────────────────────────────────── */
.tags{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));align-items:start}
.tag{position:relative;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:1.5rem 1.35rem 1.35rem;display:flex;flex-direction:column;gap:.9rem;box-shadow:var(--shadow)}
.tag.best{border-color:var(--magenta);box-shadow:var(--shadow-lg)}
.tag .pin{position:absolute;top:-13px;left:1.35rem;background:var(--magenta);color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:.34rem .7rem;border-radius:999px}
.tag h3{font-family:Unbounded,sans-serif;font-weight:800;font-size:1.06rem;letter-spacing:.01em;text-transform:uppercase}
.price{display:flex;align-items:baseline;gap:.35rem;font-family:Unbounded,sans-serif;
  font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.price b{font-size:clamp(2rem,1.6rem + 1.4vw,2.7rem);line-height:1}
.price i{font-style:normal;font-size:.92rem;font-weight:500;font-family:Onest,sans-serif;color:var(--ink-3)}
.tag ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;flex:1}
.tag li{display:flex;gap:.6rem;align-items:flex-start;font-size:.925rem;color:var(--ink-2)}
.tag li svg{width:17px;height:17px;flex:none;margin-top:.22rem;stroke:var(--magenta);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.tag .by{font-size:.82rem;color:var(--ink-3);border-top:1px dashed var(--line-2);padding-top:.75rem}
.tag .cta{width:100%}

/* data list */
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.pills span{font-size:.85rem;font-weight:500;padding:.42rem .8rem;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid var(--band-line);color:var(--band-ink)}

/* about */
.about{display:grid;gap:clamp(1.8rem,1rem + 3vw,3.4rem);grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
@media (max-width:860px){.about{grid-template-columns:1fr}}
.about img{border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.prose{display:flex;flex-direction:column;gap:1.05rem;max-width:65ch}
.prose p{color:var(--ink-2)}
.pull{font-family:Unbounded,sans-serif;font-weight:600;font-size:clamp(1.05rem,.95rem + .6vw,1.35rem);
  line-height:1.35;color:var(--ink);border-left:3px solid var(--magenta);padding-left:1.1rem;letter-spacing:-.015em}

/* funding */
.fund{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,1rem + 1.4vw,2.2rem);display:flex;flex-direction:column;gap:1.2rem;align-items:center;text-align:center}
.fund img{max-width:min(100%,760px)}
.fund p{color:var(--ink-2);font-size:.92rem;max-width:70ch}

/* contact + form */
.contact{display:grid;gap:clamp(1.6rem,1rem + 2.6vw,3rem);grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.info{display:flex;flex-direction:column;gap:1.3rem}
.info dl{margin:0;display:flex;flex-direction:column;gap:1rem}
.info dt{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.info dd{margin:.25rem 0 0;font-weight:500}
.info a{color:var(--magenta-ink);text-decoration-thickness:1px;text-underline-offset:3px}
form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.2rem,.9rem + 1.2vw,1.9rem);display:grid;gap:1rem;box-shadow:var(--shadow)}
.row{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
@media (max-width:600px){.row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.4rem}
label{font-size:.83rem;font-weight:600;color:var(--ink-2)}
label .req{color:var(--magenta-ink)}
input,select,textarea{font:inherit;font-size:.95rem;color:var(--ink);background:var(--ground);
  border:1.5px solid var(--line-2);border-radius:10px;padding:.68rem .8rem;width:100%}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--magenta);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--magenta) 18%,transparent)}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--ink-2)}
.consent input{width:20px;height:20px;flex:none;margin-top:.12rem;accent-color:var(--magenta)}
.hp{position:absolute;left:-9999px}
.formnote{font-size:.82rem;color:var(--ink-3)}
.formmsg{font-size:.9rem;font-weight:600;padding:.75rem .9rem;border-radius:10px;display:none}
.formmsg.on{display:block}
.formmsg.err{background:color-mix(in srgb,var(--magenta) 12%,transparent);color:var(--magenta-ink)}
.formmsg.ok{background:color-mix(in srgb,var(--save) 14%,transparent);color:var(--save)}

/* legal */
.legal{max-width:76ch;display:flex;flex-direction:column;gap:1.5rem}
.legal h3{margin-top:.8rem}
.legal p,.legal li{color:var(--ink-2);font-size:.97rem}
.legal ul{margin:.5rem 0 0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.4rem}
.notice{background:var(--surface-2);border:1px solid var(--line-2);border-left:3px solid var(--magenta);
  border-radius:10px;padding:1rem 1.15rem;font-size:.9rem;color:var(--ink-2)}

/* footer */
footer.site{background:var(--band);color:var(--band-ink);padding-block:clamp(2.4rem,1.6rem + 2.4vw,3.6rem);
  border-top:1px solid var(--band-line)}
.fgrid{display:grid;gap:2rem;grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(min(100%,150px),1fr))}
footer.site .brand{color:var(--band-ink)}
footer.site h4{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--band-ink-2);
  font-family:Onest,sans-serif;font-weight:700;margin-bottom:.9rem}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
footer.site a{color:var(--band-ink-2);text-decoration:none;font-size:.92rem}
footer.site a:hover{color:var(--band-ink);text-decoration:underline}
.tagline{font-family:Unbounded,sans-serif;font-weight:800;font-size:1rem;letter-spacing:-.01em;
  color:var(--band-ink);margin-top:.9rem}
.fbadges{display:flex;gap:.6rem;margin-top:1.1rem;flex-wrap:wrap}
.fbadges img{width:135px;height:auto;border-radius:7px}
.fbot{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--band-line);
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;align-items:center;
  font-size:.85rem;color:var(--band-ink-2)}
.social{display:flex;gap:.6rem}
.social a{width:36px;height:36px;border:1px solid var(--band-line);border-radius:9px;display:grid;place-items:center}
.social a:hover{background:rgba(255,255,255,.08)}
.social svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ── phones: stack the footer instead of squeezing it ───────────────────── */
@media (max-width:760px){
  .fgrid{grid-template-columns:1fr;gap:1.9rem}
  .fbot{flex-direction:column;align-items:flex-start;gap:.7rem}
}
@media (max-width:400px){
  .fbadges img{width:100%;max-width:190px}
  .badges img{width:100%;max-width:200px}
  .badges a,.fbadges a{flex:1 1 150px}
}