/* =====================================================================
   Skinkana — Nordisk wellness
   Original stylesheet. Icy Nordic palette: ice, saturated teal,
   silver, chrome, graphite, frost & deep-ice.
   ===================================================================== */

:root {
  /* ---- Palette (icy nordic + chrome + graphite) ---- */
  --ic-frost:      #f7fbfd;   /* brightest frost */
  --ic-ice:        #eef4f7;   /* light ice */
  --ic-ice-2:      #e2ecf1;   /* soft ice tint */
  --ic-silver:     #c8d2d8;   /* silver */
  --ic-chrome:     #9aa9b2;   /* chrome */
  --ic-graphite:   #2b333a;   /* graphite text */
  --ic-graphite-2: #3d474f;   /* muted graphite */
  --ic-deep:       #0f2a38;   /* deep ice */
  --ic-dark-ice:   #143647;   /* dark icy panel */
  --ic-accent:     #2e9fb8;   /* saturated teal */
  --ic-accent-dk:  #1f7f96;   /* deeper teal */
  --ic-accent-lt:  #d6eef3;   /* pale teal wash */

  /* ---- Functional tokens ---- */
  --clr-bg:         var(--ic-frost);
  --clr-surface:    #ffffff;
  --clr-ink:        var(--ic-graphite);
  --clr-ink-soft:   var(--ic-graphite-2);
  --clr-line:       #dce5ea;
  --clr-brand:      var(--ic-accent);
  --clr-brand-dk:   var(--ic-accent-dk);

  /* gradients & glass */
  --grad-cool:  linear-gradient(135deg, #eef4f7 0%, #dbe8ee 55%, #cddde5 100%);
  --grad-deep:  linear-gradient(150deg, #143647 0%, #0f2a38 60%, #0b2230 100%);
  --grad-accent:linear-gradient(120deg, #2e9fb8 0%, #1f7f96 100%);
  --glass:      rgba(255,255,255,0.62);
  --glass-line: rgba(255,255,255,0.75);

  /* shadows */
  --sh-xs: 0 1px 2px rgba(15,42,56,.06);
  --sh-sm: 0 4px 14px rgba(15,42,56,.08);
  --sh-md: 0 12px 34px rgba(15,42,56,.12);
  --sh-lg: 0 26px 60px rgba(15,42,56,.16);

  /* geometry */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;

  /* type */
  --ff-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --ff-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-mono: "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, monospace;

  /* rhythm */
  --wrap: 1200px;
  --gap: clamp(1rem, 3vw, 2.4rem);
  --sec-pad: clamp(3.6rem, 8vw, 7.5rem);
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; 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;
  font-family: var(--ff-body);
  color: var(--clr-ink);
  background: var(--clr-bg);
  line-height: 1.65;
  font-size: 1.02rem;
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1,h2,h3,h4 { font-family: var(--ff-display); font-weight: 600; line-height: 1.12; color: var(--ic-deep); margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }

.frost-wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--ff-mono);
  font-size: .72rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--clr-brand-dk); margin: 0 0 1.1rem; font-weight: 600;
}
.eyebrow::before { content:""; width: 26px; height: 1px; background: var(--clr-brand); display:inline-block; }

.lede { font-size: clamp(1.05rem, 1.4vw, 1.22rem); color: var(--clr-ink-soft); max-width: 60ch; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --_bg: var(--grad-accent);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.9rem; border: none; border-radius: 999px;
  font-weight: 600; font-size: .98rem; letter-spacing: .01em;
  background: var(--_bg); color: #fff;
  box-shadow: 0 10px 26px rgba(46,159,184,.32);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  position: relative; overflow: hidden;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(46,159,184,.42); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--ic-accent-dk); outline-offset: 3px; }
.btn--ghost {
  background: transparent; color: var(--ic-deep);
  box-shadow: inset 0 0 0 1.5px var(--ic-silver);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--clr-brand); background: var(--ic-ice); }
.btn--chrome {
  background: linear-gradient(135deg,#e7edf1,#c8d2d8 60%,#9aa9b2);
  color: var(--ic-deep); box-shadow: var(--sh-sm);
}
.btn--chrome:hover { box-shadow: var(--sh-md); }

/* ---------------------------------------------------------------- header */
.masthead {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(14px) saturate(1.2);
  background: rgba(247,251,253,.72);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.masthead.is-stuck { background: rgba(247,251,253,.9); border-color: var(--clr-line); box-shadow: var(--sh-xs); }
.masthead__inner {
  width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.brandmark { display: flex; align-items: center; gap: .7rem; font-family: var(--ff-display); font-weight: 600; font-size: 1.4rem; color: var(--ic-deep); letter-spacing: -.02em; }
.brandmark__dot {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--grad-accent);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 6px 14px rgba(46,159,184,.35);
  position: relative;
}
.brandmark__dot::after { content:""; position:absolute; inset: 8px; border-radius: 4px; background: rgba(255,255,255,.85); }

.nav { display: flex; align-items: center; gap: .3rem; }
.nav a {
  padding: .5rem .9rem; border-radius: 999px; font-size: .93rem; font-weight: 500;
  color: var(--ic-graphite-2); transition: color .2s, background .2s;
  position: relative;
}
.nav a:hover { color: var(--ic-deep); background: var(--ic-ice); }
.nav a.is-active { color: var(--clr-brand-dk); }
.nav a.is-active::after {
  content:""; position:absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--clr-brand);
}
.nav__cta { margin-left: .5rem; }

.burger { display:none; width: 44px; height: 44px; border: none; background: var(--ic-ice); border-radius: 12px; position: relative; }
.burger span, .burger span::before, .burger span::after {
  content:""; position: absolute; left: 12px; width: 20px; height: 2px; background: var(--ic-deep); border-radius: 2px; transition: transform .3s, opacity .3s;
}
.burger span { top: 21px; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { transform: translateY(6px) rotate(45deg); }
.burger.is-open span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav {
    position: fixed; inset: 76px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: .2rem;
    background: rgba(247,251,253,.97); backdrop-filter: blur(16px);
    padding: 1rem 1.2rem 1.6rem; border-bottom: 1px solid var(--clr-line);
    transform: translateY(-120%); transition: transform .35s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--sh-md);
  }
  .nav.is-open { transform: translateY(0); }
  .nav a { padding: .8rem 1rem; border-radius: 12px; font-size: 1.02rem; }
  .nav__cta { margin: .5rem 0 0; }
  .burger { display: block; }
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; padding: clamp(3rem,7vw,6rem) 0 clamp(3.6rem,8vw,7rem);
  overflow: hidden;
}
.hero::before {
  content:""; position:absolute; inset: 0; z-index:-2;
  background: var(--grad-cool);
}
.hero__aura {
  position:absolute; z-index:-1; filter: blur(70px); opacity:.65; border-radius:50%;
}
.hero__aura--a { width: 460px; height: 460px; background: radial-gradient(circle,#2e9fb8,transparent 70%); top:-120px; right:-60px; }
.hero__aura--b { width: 380px; height: 380px; background: radial-gradient(circle,#c8d2d8,transparent 70%); bottom:-140px; left:-80px; }
.hero__grid {
  width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem,4vw,3.4rem); align-items: center;
}
.hero__title {
  font-size: clamp(2.5rem, 5.6vw, 4.4rem); line-height: 1.04; letter-spacing: -.02em;
  margin-bottom: 1.1rem;
}
.hero__title em { font-style: normal; color: var(--clr-brand-dk); position: relative; }
.hero__title em::after {
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.12em;
  background: linear-gradient(90deg,var(--ic-accent),transparent); border-radius: 4px;
}
.hero__actions { display:flex; flex-wrap:wrap; gap: .9rem; margin-top: 1.9rem; }
.hero__meta { display:flex; gap: 1.8rem; margin-top: 2.4rem; flex-wrap: wrap; }
.hero__meta div { display:flex; flex-direction: column; }
.hero__meta b { font-family: var(--ff-display); font-size: 1.5rem; color: var(--ic-deep); }
.hero__meta span { font-size: .8rem; letter-spacing: .04em; color: var(--ic-chrome); text-transform: uppercase; }

.hero__figure {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 4 / 5; box-shadow: var(--sh-lg);
  border: 1px solid var(--glass-line);
}
.hero__figure img { width:100%; height:100%; object-fit: cover; }
.hero__badge {
  position:absolute; left: 18px; bottom: 18px; right: 18px;
  background: var(--glass); backdrop-filter: blur(12px);
  border: 1px solid var(--glass-line); border-radius: var(--r-md);
  padding: .9rem 1.1rem; display:flex; align-items:center; gap:.8rem;
  box-shadow: var(--sh-sm);
}
.hero__badge .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--clr-brand); box-shadow: 0 0 0 5px rgba(46,159,184,.18); flex: none; }
.hero__badge small { font-size: .82rem; color: var(--ic-graphite-2); }

@media (max-width: 820px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__figure { aspect-ratio: 16 / 12; max-height: 460px; }
}

/* ---------------------------------------------------------------- section shell */
.section { padding-block: var(--sec-pad); position: relative; }
.section--ice { background: var(--ic-ice); }
.section--tint { background: linear-gradient(180deg,#fff, var(--ic-ice-2)); }
.section--deep { background: var(--grad-deep); color: #dfeaf0; }
.section--deep h2, .section--deep h3 { color: #fff; }
.section__head { max-width: 62ch; margin-bottom: clamp(2rem,4vw,3.2rem); }
.section__head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.section--center .section__head { margin-inline: auto; text-align: center; }

/* ---------------------------------------------------------------- split layout */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem,4vw,4rem); align-items: center; }
.split--rev .split__media { order: 2; }
.split__media {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md);
  aspect-ratio: 5 / 4; border: 1px solid var(--glass-line);
}
.split__media img { width:100%; height:100%; object-fit: cover; }
.split__body h2 { font-size: clamp(1.7rem,3.2vw,2.6rem); }
@media (max-width: 780px) {
  .split { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .split__media { aspect-ratio: 16/11; }
}

/* ---------------------------------------------------------------- feature cards */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--gap); }
.wcard {
  background: var(--clr-surface); border: 1px solid var(--clr-line);
  border-radius: var(--r-lg); padding: 1.8rem 1.6rem;
  box-shadow: var(--sh-xs); transition: transform .3s, box-shadow .3s, border-color .3s;
  position: relative; overflow: hidden;
}
.wcard::after {
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background: var(--grad-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.wcard:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: transparent; }
.wcard:hover::after { transform: scaleX(1); }
.wcard__ic {
  width: 52px; height: 52px; border-radius: 14px; display:grid; place-items:center;
  background: var(--ic-accent-lt); color: var(--clr-brand-dk); margin-bottom: 1.1rem;
  font-family: var(--ff-display); font-size: 1.3rem; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(46,159,184,.2);
}
.wcard h3 { font-size: 1.22rem; margin-bottom: .4rem; }
.wcard p { font-size: .95rem; color: var(--ic-graphite-2); margin: 0; }

/* deep variant cards */
.section--deep .wcard {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); backdrop-filter: blur(6px);
}
.section--deep .wcard h3 { color:#fff; }
.section--deep .wcard p { color: #b9cdd7; }
.section--deep .wcard__ic { background: rgba(46,159,184,.2); color: #8fd6e6; box-shadow: inset 0 0 0 1px rgba(143,214,230,.3); }

/* ---------------------------------------------------------------- routine list */
.routine { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: var(--gap); counter-reset: step; }
.rstep {
  padding: 1.6rem 1.5rem 1.7rem; border-radius: var(--r-md);
  background: linear-gradient(160deg,#fff,#f3f8fa); border: 1px solid var(--clr-line);
  position: relative; box-shadow: var(--sh-xs);
}
.rstep__no {
  font-family: var(--ff-mono); font-size: .78rem; letter-spacing: .2em;
  color: var(--ic-chrome); display:block; margin-bottom: .7rem;
}
.rstep h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.rstep p { font-size: .92rem; color: var(--ic-graphite-2); margin: 0; }
.rstep__bar { height: 4px; width: 42px; border-radius: 4px; background: var(--grad-accent); margin-top: 1rem; }

/* ---------------------------------------------------------------- product */
.product { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.8rem,4vw,3.6rem); align-items: center; }
.product__stage {
  position: relative; border-radius: var(--r-xl);
  background: radial-gradient(120% 120% at 50% 20%, #ffffff 0%, #e6eef2 55%, #cfdde4 100%);
  aspect-ratio: 1/1; display:grid; place-items:center; overflow:hidden;
  box-shadow: var(--sh-md); border: 1px solid var(--glass-line);
}
.product__stage::before { content:""; position:absolute; width: 70%; height: 12px; bottom: 14%; background: radial-gradient(ellipse,rgba(15,42,56,.22),transparent 70%); filter: blur(6px); }
.product__stage img { width: 74%; height: auto; object-fit: contain; filter: drop-shadow(0 24px 34px rgba(15,42,56,.25)); animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%,100%{ transform: translateY(-4px);} 50%{ transform: translateY(8px);} }

.pcard { background: var(--clr-surface); border: 1px solid var(--clr-line); border-radius: var(--r-lg); padding: clamp(1.6rem,3vw,2.4rem); box-shadow: var(--sh-sm); }
.pcard__tag { display:inline-block; font-family: var(--ff-mono); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color: var(--clr-brand-dk); background: var(--ic-accent-lt); padding:.35rem .8rem; border-radius:999px; margin-bottom:1rem; }
.pcard h2 { font-size: clamp(1.8rem,3vw,2.6rem); margin-bottom: .5rem; }
.pcard__price { display:flex; align-items: baseline; gap:.6rem; margin: 1.2rem 0 1.4rem; }
.pcard__price b { font-family: var(--ff-display); font-size: 2.6rem; color: var(--ic-deep); }
.pcard__price span { color: var(--ic-chrome); font-size: .9rem; }
.pcard__list { list-style:none; padding:0; margin: 0 0 1.6rem; display:grid; gap:.6rem; }
.pcard__list li { display:flex; align-items:flex-start; gap:.7rem; font-size:.95rem; color: var(--ic-graphite-2); }
.pcard__list li::before { content:""; width:20px; height:20px; border-radius:50%; background: var(--ic-accent-lt); flex:none; margin-top:2px; background-image: linear-gradient(var(--clr-brand),var(--clr-brand)); background-size: 8px 2px; background-repeat:no-repeat; background-position:center; box-shadow: inset 0 0 0 1px rgba(46,159,184,.3); }
@media (max-width: 780px){ .product{ grid-template-columns: 1fr; } .product__stage{ max-width: 420px; margin-inline:auto; } }

/* ---------------------------------------------------------------- form */
.formwrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem,4vw,3.4rem); align-items: stretch; }
.formcard {
  background: var(--clr-surface); border: 1px solid var(--clr-line);
  border-radius: var(--r-lg); padding: clamp(1.6rem,3vw,2.6rem); box-shadow: var(--sh-md);
}
.field { margin-bottom: 1.2rem; }
.field label { display:block; font-size:.85rem; font-weight:600; color: var(--ic-graphite); margin-bottom:.45rem; letter-spacing:.01em; }
.field input {
  width:100%; padding: .95rem 1.1rem; border-radius: var(--r-sm);
  border: 1.5px solid var(--clr-line); background: #fbfdfe; font-size: 1rem; color: var(--ic-deep);
  transition: border-color .2s, box-shadow .2s, background .2s; font-family: inherit;
}
.field input:focus { outline:none; border-color: var(--clr-brand); background:#fff; box-shadow: 0 0 0 4px rgba(46,159,184,.14); }
.field input.is-invalid { border-color: #d1495b; box-shadow: 0 0 0 4px rgba(209,73,91,.12); }
.field .err { display:none; color:#b83b4c; font-size:.8rem; margin-top:.4rem; }
.field.has-error .err { display:block; }
.form__consent { display:flex; gap:.7rem; align-items:flex-start; font-size:.85rem; color: var(--ic-graphite-2); margin-bottom:1.3rem; }
.form__consent input { margin-top:.25rem; accent-color: var(--clr-brand); width:18px; height:18px; flex:none; }
.form__note { font-size:.8rem; color: var(--ic-chrome); margin-top:1rem; }

.formaside {
  border-radius: var(--r-lg); overflow:hidden; position: relative;
  background: var(--grad-deep); color:#dfeaf0; padding: clamp(1.8rem,3vw,2.6rem);
  display:flex; flex-direction:column; justify-content:center; box-shadow: var(--sh-md);
}
.formaside h3 { color:#fff; font-size: clamp(1.5rem,2.6vw,2rem); }
.formaside ul { list-style:none; padding:0; margin: 1.4rem 0 0; display:grid; gap:1rem; }
.formaside li { display:flex; gap:.8rem; align-items:flex-start; font-size:.95rem; color:#c4d6df; }
.formaside li b { color:#fff; font-weight:600; }
.formaside__ic { width:38px; height:38px; border-radius:11px; background: rgba(46,159,184,.22); color:#8fd6e6; display:grid; place-items:center; flex:none; font-weight:700; }
@media (max-width: 820px){ .formwrap{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- disclaimer strip */
.notice {
  border-radius: var(--r-md); border:1px solid var(--clr-line);
  background: linear-gradient(180deg,#fff,#f4f9fb); padding: 1.4rem 1.6rem;
  font-size:.9rem; color: var(--ic-graphite-2); box-shadow: var(--sh-xs);
}
.notice strong { color: var(--ic-deep); }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--ic-deep); color:#b7cad3; padding: clamp(3rem,6vw,4.6rem) 0 2rem; margin-top: 0; }
.footer__grid { display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(1.6rem,4vw,3rem); }
.footer__brand .brandmark { color:#fff; margin-bottom: 1rem; }
.footer__brand p { max-width: 34ch; font-size:.9rem; color:#94adb8; }
.footer h4 { color:#fff; font-family: var(--ff-body); font-weight:600; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer ul { list-style:none; padding:0; margin:0; display:grid; gap:.65rem; }
.footer a, .footer__contact li { font-size:.92rem; color:#a9c1cc; transition: color .2s; }
.footer a:hover { color:#fff; }
.footer__contact { list-style:none; padding:0; margin:0; display:grid; gap:.65rem; }
.footer__contact li { display:flex; gap:.6rem; align-items:flex-start; }
.footer__contact b { color:#7f97a3; font-weight:600; min-width: 62px; font-size:.82rem; }
.footer__bar {
  margin-top: clamp(2.2rem,5vw,3.4rem); padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  font-size:.82rem; color:#7f98a4;
}
.footer__legal { display:flex; flex-wrap:wrap; gap:1.2rem; }
@media (max-width: 720px){ .footer__grid{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1/-1; } }

/* ---------------------------------------------------------------- back to top */
.totop {
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
  width: 48px; height: 48px; border-radius: 14px; border: none;
  background: var(--grad-accent); color:#fff; box-shadow: var(--sh-md);
  display:grid; place-items:center; opacity:0; pointer-events:none;
  transform: translateY(14px) scale(.9); transition: opacity .3s, transform .3s;
}
.totop.is-show { opacity:1; pointer-events:auto; transform: translateY(0) scale(1); }
.totop:hover { filter: brightness(1.08); }
.totop svg { width:20px; height:20px; }

/* ---------------------------------------------------------------- cookie */
.cookie {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 160%);
  width: min(100% - 2rem, 640px); z-index: 80;
  background: var(--glass); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--glass-line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: 1.4rem 1.5rem;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.cookie.is-show { transform: translate(-50%, 0); }
.cookie h4 { font-family: var(--ff-body); font-size: 1rem; margin-bottom:.4rem; color: var(--ic-deep); }
.cookie p { font-size:.86rem; color: var(--ic-graphite-2); margin-bottom: 1rem; }
.cookie__row { display:flex; flex-wrap:wrap; gap:.6rem; }
.cookie__row .btn { padding:.7rem 1.3rem; font-size:.88rem; }
.cookie__panel { margin: .4rem 0 1rem; display:none; gap:.7rem; flex-direction:column; }
.cookie__panel.is-open { display:flex; }
.cookie__opt { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem .9rem; border:1px solid var(--clr-line); border-radius:12px; background:rgba(255,255,255,.6); font-size:.85rem; }
.cookie__opt input { accent-color: var(--clr-brand); width:18px; height:18px; }
.cookie__opt[data-locked] { opacity:.7; }

/* ---------------------------------------------------------------- legal pages */
.legal { padding-block: clamp(2.6rem,6vw,5rem); }
.legal__grid { display:grid; grid-template-columns: 240px 1fr; gap: clamp(2rem,4vw,3.4rem); align-items:start; }
.legal__toc {
  position: sticky; top: 96px; background: var(--clr-surface); border:1px solid var(--clr-line);
  border-radius: var(--r-md); padding: 1.3rem 1.3rem; box-shadow: var(--sh-xs);
}
.legal__toc h4 { font-family: var(--ff-body); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: var(--ic-chrome); margin-bottom:.9rem; }
.legal__toc ul { list-style:none; padding:0; margin:0; display:grid; gap:.15rem; }
.legal__toc a { display:block; padding:.45rem .6rem; border-radius:9px; font-size:.88rem; color: var(--ic-graphite-2); }
.legal__toc a:hover { background: var(--ic-ice); color: var(--ic-deep); }
.legal__body { max-width: 74ch; }
.legal__body h1 { font-size: clamp(2rem,4vw,3rem); margin-bottom:.4rem; }
.legal__meta { font-size:.85rem; color: var(--ic-chrome); margin-bottom: 2rem; font-family: var(--ff-mono); letter-spacing:.03em; }
.legal__body h2 { font-size: clamp(1.3rem,2.4vw,1.7rem); margin-top: 2.4rem; scroll-margin-top: 96px; }
.legal__body h3 { font-size: 1.1rem; margin-top: 1.6rem; }
.legal__body p, .legal__body li { color: var(--ic-graphite-2); font-size: .98rem; }
.legal__body ul { padding-left: 1.2rem; display:grid; gap:.4rem; margin-bottom:1.2rem; }
.legal__card { background: var(--clr-surface); border:1px solid var(--clr-line); border-radius: var(--r-md); padding: 1.4rem 1.5rem; box-shadow: var(--sh-xs); margin: 1.6rem 0; }
@media (max-width: 820px){ .legal__grid{ grid-template-columns:1fr; } .legal__toc{ position:static; } }

/* ---------------------------------------------------------------- success */
.success { min-height: 72vh; display:grid; place-items:center; text-align:center; padding: 4rem 0; }
.success__inner { max-width: 560px; }
.success__badge {
  width: 92px; height:92px; border-radius: 28px; margin: 0 auto 1.6rem;
  background: var(--grad-accent); display:grid; place-items:center; color:#fff;
  box-shadow: 0 20px 40px rgba(46,159,184,.4); animation: pop .6s cubic-bezier(.3,1.4,.5,1);
}
.success__badge svg { width:44px; height:44px; }
@keyframes pop { 0%{ transform: scale(.5); opacity:0; } 100%{ transform: scale(1); opacity:1; } }
.success h1 { font-size: clamp(2rem,4vw,3rem); }
.success p { color: var(--ic-graphite-2); font-size:1.05rem; margin-bottom: 1.8rem; }

/* ---------------------------------------------------------------- reveal */
.reveal { opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity:1; transform:none; }

/* generic page hero (subpages) */
.phero { position: relative; padding: clamp(3rem,6vw,5rem) 0 clamp(2rem,4vw,3rem); overflow:hidden; }
.phero::before { content:""; position:absolute; inset:0; z-index:-1; background: var(--grad-cool); }
.phero__inner { width: min(100% - 2.4rem, var(--wrap)); margin-inline:auto; }
.phero h1 { font-size: clamp(2.2rem,4.6vw,3.6rem); max-width: 20ch; }
.phero p { max-width: 56ch; color: var(--ic-graphite-2); font-size: 1.08rem; }