/* ============================================================
   SKILLER — premium redesign
   Soft-3D (neumorphic) surfaces + pearl-iridescent glow on white.
   One family: Montserrat (900 display ↔ 300 body).
   Boldness lives in the hero; everything else stays quiet.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --paper:     #FFFFFF;
  --paper-2:   #FAF9FA;
  --cloud:     #F1EEF1;   /* faint recessed surface */

  --ink:       #211D1F;
  --ink-2:     #4C4549;
  --muted:     #8E868B;

  --pink:      #EB84A4;
  --pink-deep: #D4567E;
  --rose:      #E8B6C2;
  --lilac:     #D9C7E8;
  --sky:       #CFE2F5;
  --peach:     #F6DAC8;

  /* signature pearl-iridescent */
  --irid: linear-gradient(135deg,#F9C9DB 0%, #ECCBEE 26%, #CFE2F5 52%, #F7DCC9 78%, #F9C9DB 100%);
  --irid-soft: linear-gradient(135deg, rgba(249,201,219,.55), rgba(236,203,238,.45) 40%, rgba(207,226,245,.45) 70%, rgba(247,220,201,.5));

  --line: #ECE7EA;

  /* soft-3D shadows (the distinctive look — not the generic rgba(0,0,0,.1)) */
  --nu:    18px 18px 44px rgba(166,154,164,.30), -14px -14px 36px rgba(255,255,255,.95);
  --nu-sm: 10px 10px 26px rgba(166,154,164,.24), -8px -8px 20px rgba(255,255,255,.95);
  --nu-xs: 5px 5px 14px rgba(166,154,164,.22), -4px -4px 11px rgba(255,255,255,.96);
  --nu-in: inset 7px 7px 16px rgba(166,154,164,.28), inset -7px -7px 16px rgba(255,255,255,.96);
  --glow:  0 30px 70px -28px rgba(212,86,126,.40);

  --r-xl: 40px;
  --r-lg: 30px;
  --r:    22px;
  --r-sm: 15px;
  --pill: 999px;

  --f: "Montserrat", system-ui, -apple-system, sans-serif;
  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }

/* Subtle, on-brand scrollbar — replaces the grey overlay strip that
   flashed in on hover; now a thin, consistent, light bar. */
html { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }
body {
  font-family: var(--f);
  background: var(--paper);
  color: var(--ink);
  font-weight: 400; font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  position: relative;
}
/* faint iridescent atmosphere, far corners only */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 30% at 88% 6%, rgba(236,203,238,.35), transparent 70%),
    radial-gradient(34% 26% at 6% 20%, rgba(249,201,219,.30), transparent 72%),
    radial-gradient(40% 34% at 92% 92%, rgba(207,226,245,.30), transparent 72%);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 3px; border-radius: 8px; }

/* ---------- Type scale ---------- */
.display {
  font-weight: 900; line-height: .96; letter-spacing: -0.04em;
  font-size: clamp(2.5rem, 6.2vw, 5rem); text-transform: uppercase;
  color: var(--ink);
}
.display .thin { font-weight: 300; letter-spacing: -0.02em; }
.display .out {
  color: transparent; -webkit-text-stroke: 2px var(--ink);
}
h2.title { font-weight: 800; line-height: 1.0; letter-spacing: -0.035em; font-size: clamp(2.1rem, 5vw, 3.75rem); text-transform: uppercase; }
h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.lead { font-weight: 300; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.kicker { font-weight: 600; font-size: .95rem; color: var(--pink-deep); letter-spacing: 0; }
.small { font-size: .9rem; color: var(--muted); font-weight: 400; }
.hl { color: var(--pink-deep); }
strong { font-weight: 700; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.75rem); }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section-head { max-width: 40ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head .lead { margin-top: 1rem; }

/* ---------- Soft-3D primitives ---------- */
.neu   { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--nu); }
.neu-sm{ background: var(--paper); border-radius: var(--r); box-shadow: var(--nu-sm); }
.recess{ background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--nu-in); }

/* pebble: glossy soft-3D circular control (ref images) */
.pebble{
  width: 68px; height: 68px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  background: linear-gradient(145deg,#ffffff, #f3eef2);
  box-shadow: var(--nu-sm), inset 0 2px 3px rgba(255,255,255,.9), inset 0 -3px 8px rgba(166,154,164,.18);
  color: var(--ink); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pebble svg{ width: 26px; height: 26px; }
.pebble--sm{ width: 52px; height: 52px; } .pebble--sm svg{ width: 20px; height: 20px; }
.pebble::after{ /* iridescent kiss of light */
  content:""; position:absolute; inset:0; border-radius:50%; padding:1.5px;
  background: var(--irid); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:.0; transition: opacity .4s var(--ease);
}
a:hover > .pebble, .tile:hover .pebble { transform: translateY(-3px) rotate(0deg); }
a:hover > .pebble::after, .tile:hover .pebble::after { opacity:.9; }
.pebble{ position: relative; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding: 1rem 1.7rem; border-radius: var(--pill); font-weight:600; font-size:.95rem;
  min-height:52px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.btn--primary{ background: var(--ink); color:#fff; box-shadow: 0 14px 30px -14px rgba(33,29,31,.6); }
.btn--primary:hover{ transform: translateY(-2px); box-shadow: var(--glow); }
.btn--neu{ background: var(--paper); color: var(--ink); box-shadow: var(--nu-sm); }
.btn--neu:hover{ transform: translateY(-2px); box-shadow: var(--nu); }
.btn--neu:active{ box-shadow: var(--nu-in); transform: none; }
.btn--text{ padding:.4rem 0; min-height:0; color: var(--ink); border-bottom: 2px solid var(--pink); border-radius:0; }
.btn--text:hover{ color: var(--pink-deep); }

/* ---------- Nav ---------- */
.nav{ position: sticky; top:0; z-index: 100; padding-top: clamp(1rem,2vw,1.5rem);
  transition: background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease), padding .35s var(--ease); }
/* Frosted glass bar fades in once the page scrolls, so the logo stays legible over any content */
.nav.scrolled{ padding-bottom:.7rem;
  background: rgba(250,249,250,.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 10px 30px -18px rgba(166,154,164,.65), inset 0 -1px 0 rgba(255,255,255,.5); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.1rem; }
.brand{ display:inline-flex; align-items:center; gap:.55rem; font-weight:900; font-size:1.6rem; letter-spacing:-0.05em; flex-shrink:0; }
.brand img{ width:30px; height:30px; object-fit:contain; }
.nav__links{ display:flex; gap:.4rem; background: var(--paper); padding:.4rem; border-radius: var(--pill); box-shadow: var(--nu-sm); }
.nav__links a{ padding:.55rem .9rem; border-radius: var(--pill); font-weight:500; font-size:.9rem; white-space:nowrap; color: var(--ink-2); transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.nav__links a:hover{ color: var(--ink); }
.nav__links a.active{ color: var(--ink); box-shadow: var(--nu-in); background: var(--paper-2); }
.nav__right{ display:flex; align-items:center; gap:.8rem; }
.burger{ display:none; width:52px; height:52px; border-radius:50%; background:var(--paper); box-shadow:var(--nu-sm); align-items:center; justify-content:center; }
.burger svg{ width:22px; height:22px; }

/* mobile menu */
.menu{ position: fixed; inset:0; z-index:200; background: rgba(250,249,250,.96); backdrop-filter: blur(16px);
  display:flex; flex-direction:column; padding: 1.4rem clamp(1.15rem,4vw,2rem); transform: translateY(-101%); transition: transform .5s var(--ease); visibility:hidden; }
.menu.open{ transform:none; visibility:visible; }
.menu__top{ display:flex; justify-content:space-between; align-items:center; }
.menu__close{ width:52px;height:52px;border-radius:50%;background:var(--paper);box-shadow:var(--nu-sm);display:grid;place-items:center; }
.menu__links{ margin:auto 0; display:grid; gap:.2rem; }
.menu__links a{ font-weight:900; text-transform:uppercase; letter-spacing:-0.03em; font-size:clamp(2rem,10vw,3.25rem); line-height:1.1; color:var(--ink); }
.menu__links a:hover{ color: var(--pink-deep); }

/* ---------- Hero ---------- */
.hero{ padding-top: clamp(2rem,5vw,4.5rem); padding-bottom: clamp(3rem,7vw,6rem); }
.hero__grid{ display:grid; grid-template-columns: 1.08fr .92fr; gap: clamp(1.5rem,4vw,3.5rem); align-items:center; }
.hero__copy{ white-space: nowrap; font-size: clamp(1.8rem, 4.3vw, 3.5rem); letter-spacing: -0.035em; }
.hero__sub{ max-width: 40ch; margin-top: 1.6rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top: 2rem; align-items:center; }
.hero__for{ margin-top: 2rem; color:var(--muted); font-size:.9rem; line-height:1.5; }
.hero__for b{ color:var(--ink); font-weight:700; }

.hero__stage{ position:relative; }
.hero__halo{ position:absolute; inset:-8% -6% -10% -6%; z-index:0; border-radius:50%;
  background: var(--irid); filter: blur(46px); opacity:.6; }
.hero__portrait{ position:relative; z-index:1; border-radius: 46% 46% 44% 44% / 40% 40% 52% 52%;
  overflow:hidden; aspect-ratio: 1/1.12; box-shadow: var(--nu); background: var(--cloud); }
.hero__portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.hero__card{ position:absolute; z-index:2; right:-6%; bottom:9%; display:flex; align-items:center; gap:1rem;
  padding: 1rem 1.1rem 1rem 1.3rem; border-radius: var(--r); background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--nu-sm); border:1px solid rgba(255,255,255,.7); max-width: calc(100% - 1rem); box-sizing: border-box; }
@media (max-width:640px){ .hero__card{ right:.5rem; padding:.8rem .95rem .8rem 1.05rem; gap:.75rem; } }
.hero__card .t{ font-weight:600; font-size:.98rem; line-height:1.25; }
.hero__card .s{ font-size:.78rem; color:var(--muted); }

/* ---------- Pillars (3 soft-3D tiles) ---------- */
.pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.6rem); }
.tile{ display:flex; flex-direction:column; gap:1.1rem; padding: clamp(1.5rem,2.5vw,2.1rem); color:inherit; }
.tile .pebble{ margin-bottom:.3rem; }
.tile h3{ margin-top:.2rem; }
.tile p{ color:var(--ink-2); font-weight:300; }
.tile .go{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:.45rem; padding:.62rem 1.15rem; border-radius:var(--pill); background:var(--paper); box-shadow:var(--nu-xs); color:var(--ink); font-weight:600; font-size:.85rem; transition: box-shadow .3s var(--ease), color .3s var(--ease); }
.tile:hover .go{ box-shadow:var(--nu-sm); color:var(--pink-deep); }
.tile:hover{ transform: translateY(-4px); box-shadow: var(--nu); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }

/* ---------- AI Lab (product cards) ---------- */
.labs{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.5rem); }
.lab{ display:flex; flex-direction:column; padding: clamp(1.5rem,2.5vw,2.1rem); }
.lab__name{ font-weight:700; font-size:1.15rem; letter-spacing:-0.01em; }
.lab__desc{ color:var(--ink-2); font-weight:300; margin:.6rem 0 1.1rem; }
.lab ul{ display:grid; gap:.7rem; margin-bottom: 1.3rem; }
.lab li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.93rem; color:var(--ink-2); font-weight:400; }
.lab li svg{ width:19px;height:19px;flex:none;color:var(--pink-deep);margin-top:1px; }
.lab__price{ margin-top:auto; font-weight:900; font-size:2.4rem; letter-spacing:-0.03em; line-height:1; }
.lab__price span{ font-size:.85rem; font-weight:500; color:var(--muted); letter-spacing:0; }
.lab .btn{ width:100%; margin-top:1.1rem; }

/* ---------- Prompt library ---------- */
.prompts{ display:grid; gap:1rem; }
.prompt{ display:flex; gap:1.2rem; align-items:center; justify-content:space-between; padding: 1.3rem 1.5rem; }
.prompt .label{ font-weight:600; font-size:.98rem; }
.prompt p{ color:var(--ink-2); font-weight:300; font-size:.95rem; margin-top:.3rem; }
.copybtn{ flex:none; display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:var(--pill);
  background:var(--paper); box-shadow:var(--nu-xs); font-weight:600; font-size:.82rem; transition: box-shadow .25s var(--ease), color .25s var(--ease); }
.copybtn svg{ width:15px;height:15px; }
.copybtn:hover{ box-shadow:var(--nu-sm); }
.copybtn:active{ box-shadow:var(--nu-in); }
.copybtn.copied{ color:var(--pink-deep); }

/* ---------- Free prompt library ---------- */
.lib{ display:grid; gap:.9rem; }
.lib summary .lib__cat{ font-weight:700; }
.lib__body{ padding:0 1.4rem 1.4rem; }
.lib__intro{ color:var(--ink-2); font-weight:300; line-height:1.6; margin:.1rem 0 1.1rem; max-width:64ch; }
.lib__prompts{ display:grid; gap:.7rem; }
.lib__prompt{ display:grid; grid-template-columns:auto 1fr auto; gap:.85rem 1rem; align-items:center;
  background:var(--paper-2); border-radius:var(--r); box-shadow:var(--nu-xs); padding:1rem 1.15rem; }
.lib__num{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--paper); box-shadow:var(--nu-xs); font-weight:700; font-size:.82rem; color:var(--ink); }
.lib__text{ color:var(--ink-2); font-weight:400; font-size:.94rem; line-height:1.55; margin:0; }
.lib__prompt .copybtn{ align-self:center; }
@media (max-width:640px){
  .lib__body{ padding:0 1rem 1.1rem; }
  .lib__prompt{ grid-template-columns:auto 1fr; padding:.95rem 1rem; }
  .lib__prompt .copybtn{ grid-column:2 / -1; justify-self:start; margin-top:.2rem; }
}

/* ---------- Manuals ---------- */
.manuals{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.5rem); }
.manual{ padding: clamp(1.4rem,2.2vw,1.9rem); display:flex; flex-direction:column; gap:.6rem; }
.manual h3{ font-size:1.15rem; }
.manual p{ color:var(--ink-2); font-weight:300; font-size:.93rem; }

/* ---------- About ---------- */
.about__grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem,4vw,3.5rem); align-items:center; }
.about__photo{ border-radius: var(--r-xl); overflow:hidden; aspect-ratio: 4/4.4; box-shadow: var(--nu); background:var(--cloud); position:relative; }
.about__photo img{ width:100%;height:100%;object-fit:cover; }
.about__photo figcaption{ position:absolute; left:1.2rem; bottom:1.2rem; background:rgba(255,255,255,.82); backdrop-filter:blur(10px);
  padding:.6rem .95rem; border-radius: var(--r-sm); font-weight:600; font-size:.9rem; box-shadow:var(--nu-xs); }
.about__photo figcaption span{ display:block; font-weight:400; font-size:.78rem; color:var(--muted); }
.about__body p + p{ margin-top:1rem; }
.about__body .lead{ max-width:50ch; }

/* ---------- CTA band ---------- */
.cta__pebble{ margin:0 auto 1.1rem; display:inline-flex; }

/* Instagram tab — small horizontal pill */
.section--ig{ padding-top:0; }
.ig-tab{ display:inline-flex; align-items:center; gap:.9rem; padding:.7rem 1rem .7rem .8rem; border-radius:var(--pill);
  color:var(--ink); text-decoration:none; max-width:max-content; margin:0 auto;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.ig-tab:hover{ transform:translateY(-1px); box-shadow:var(--nu); }
.ig-tab__icon{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  background:var(--cloud); color:var(--ink); flex:none; }
.ig-tab__icon svg{ width:19px; height:19px; display:block; }
.ig-tab__text{ display:inline-flex; flex-direction:column; line-height:1.2; }
.ig-tab__hd{ font-weight:700; font-size:.95rem; letter-spacing:-0.005em; }
.ig-tab__sub{ font-size:.78rem; color:var(--muted); font-weight:400; margin-top:.15rem; }
.ig-tab__arrow{ display:inline-flex; color:var(--muted); margin-left:.3rem; }
.ig-tab__arrow svg{ width:16px; height:16px; display:block; }
.ig-tab:hover .ig-tab__arrow{ color:var(--ink); }
.section--ig{ text-align:center; }
@media (max-width:420px){ .ig-tab{ gap:.75rem; padding:.6rem .9rem .6rem .7rem; } .ig-tab__sub{ display:none; } }
.cta{ position:relative; overflow:hidden; border-radius: var(--r-xl); padding: clamp(2.5rem,6vw,5rem); text-align:center;
  background: var(--paper); box-shadow: var(--nu); }
.cta::before{ content:""; position:absolute; inset:0; background: var(--irid-soft); opacity:.9; }
.cta > *{ position:relative; }
.cta h2{ max-width: 18ch; margin: 0 auto .9rem; color:var(--ink); }
.cta .lead{ max-width: 44ch; margin: 0 auto 2rem; color: var(--ink-2); }

/* ---------- Form ---------- */
.field{ display:grid; gap:.5rem; margin-bottom:1.1rem; }
.field label{ font-weight:600; font-size:.88rem; }
.field input, .field textarea, .field select{
  font:inherit; font-weight:400; padding:.9rem 1.1rem; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); box-shadow:var(--nu-in); color:var(--ink); width:100%; }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; box-shadow: var(--nu-in), 0 0 0 2px var(--pink); }
.field textarea{ min-height:140px; resize:vertical; }
.form-ok{ display:none; padding:1rem 1.2rem; border-radius:var(--r-sm); background:var(--paper); box-shadow:var(--nu-sm); font-weight:500; }
.form-ok.show{ display:block; }

/* ---------- Footer ---------- */
.footer{ padding-block: clamp(3rem,6vw,5rem) 2.5rem; margin-top: clamp(3rem,7vw,6rem); border-top:1px solid var(--line); }
.footer__grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:2rem; }
.footer__grid > div:nth-child(3){ order:4; }
.footer__grid > div:nth-child(4){ order:3; }
.footer .brand{ font-size:1.9rem; }
.footer__tag{ color:var(--muted); font-weight:300; margin-top:.8rem; max-width:32ch; }
.footer h4{ font-size:.82rem; font-weight:700; color:var(--ink); margin-bottom:1rem; letter-spacing:0; }
.footer a{ display:block; color:var(--ink-2); font-weight:400; font-size:.93rem; padding:.22rem 0; }
.footer a:hover{ color:var(--pink-deep); }
.footer__bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem; margin-top:2.5rem; color:var(--muted); font-size:.82rem; }

/* ---------- Motion: one orchestrated hero entrance + gentle section reveal ---------- */
.js .hero__sub, .js .hero__cta, .js .hero__for, .js .hero__stage{ opacity:0; transform: translateY(18px); }
.js .enter{ animation: rise .9s var(--ease) forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }
.js .reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__copy{ max-width:none; }
  .hero__stage{ max-width: 460px; margin-inline:auto; width:100%; }
  .about__grid{ grid-template-columns:1fr; }
  .pillars, .labs, .manuals{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:1.6rem; }
}
@media (max-width: 1000px){
  /* Below desktop (incl. iPad), keep the nav visible without a hamburger and
     without the logo tucking behind the links: logo + Contact on top, the links
     as a full-width bar underneath. */
  .nav__inner{ flex-wrap:wrap; row-gap:.7rem; }
  .brand{ order:0; }
  .nav__right{ order:1; }
  .nav__links{ order:2; width:100%; flex-wrap:wrap; justify-content:center; gap:.3rem; padding:.35rem; }
  .nav__links a{ font-size:.82rem; padding:.45rem .7rem; }
  .nav__right .btn{ display:inline-flex; width:auto; }
  .burger{ display:none; }
}
@media (max-width: 540px){
  .footer__grid{ grid-template-columns:1fr; }
  .prompt{ flex-direction:column; align-items:flex-start; gap:.9rem; }
  .btn{ width:100%; }
  .hero__cta .btn{ width:100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .js .hero__copy, .js .hero__sub, .js .hero__cta, .js .hero__for, .js .hero__stage,
  .js .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---------- PMU product cards (with imagery) ---------- */
.products{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.5rem); }
.product{ display:flex; flex-direction:column; overflow:hidden; padding:0; }
.product__img{ aspect-ratio: 3/2; overflow:hidden; background: var(--cloud); }
.product__img img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.product:hover .product__img img{ transform: scale(1.04); }
.product__body{ padding: clamp(1.2rem,2vw,1.6rem); display:flex; flex-direction:column; flex:1; }
.product__name{ font-weight:700; font-size:1.05rem; letter-spacing:-0.01em; }
.product__price{ margin-top:.45rem; font-weight:800; font-size:1.25rem; letter-spacing:-0.02em; }
.product__price .from{ font-weight:500; font-size:.76rem; color:var(--muted); }
.product__foot{ margin-top:auto; padding-top:1.2rem; display:flex; flex-direction:column; gap:.55rem; }
.optlink{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.72rem .95rem; border-radius:var(--r-sm); box-shadow:var(--nu-xs); font-weight:600; font-size:.85rem; transition: box-shadow .25s var(--ease); }
.optlink:hover{ box-shadow:var(--nu-sm); }
.optlink .p{ color:var(--muted); font-weight:600; }
.product__foot .btn{ width:100%; }

/* Payhip embed buttons (payhip.js) — keep them on-brand, override the green theme */
.payhip-buy-button{ text-shadow:none !important; }
.btn.payhip-buy-button{ box-sizing:border-box !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-height:50px !important; height:auto !important; margin:0 !important; padding:.85rem 1.4rem !important; font-size:.9rem !important; font-weight:600 !important; line-height:1.1 !important; background: var(--ink) !important; color:#fff !important; border:none !important; box-shadow: 0 12px 26px -14px rgba(33,29,31,.55) !important; border-radius: var(--pill) !important; }
.btn.payhip-buy-button:hover{ background: var(--ink) !important; box-shadow: var(--glow) !important; }
.btn.payhip-buy-button .opt{ opacity:.72; font-weight:500; margin-left:.5rem; }
.lab-price-row .btn{ width:auto !important; }

/* coming-soon lab slot */
.lab--soon{ justify-content:center; }
.lab--soon p{ color:var(--ink-2); font-weight:300; margin-top:.8rem; }
.badge{ align-self:flex-start; display:inline-flex; align-items:center; padding:.42rem 1rem; border-radius:var(--pill); background:var(--cloud); font-weight:600; font-size:.74rem; color:var(--ink-2); letter-spacing:.02em; text-transform:none; }

/* free AI guides CTA */
.guides__cta{ display:flex; align-items:center; gap:1.4rem; padding:clamp(1.6rem,3vw,2.3rem); flex-wrap:wrap; }
.guides__cta .t{ font-weight:700; font-size:1.2rem; }
.guides__cta .s{ color:var(--ink-2); font-weight:300; max-width:48ch; margin-top:.25rem; }
.guides__cta .btn{ margin-left:auto; }
.guides__note{ margin-top:1.3rem; }

/* ---------- Legal pages ---------- */
.legal{ max-width:760px; margin-inline:auto; }
.legal h1{ font-weight:900; text-transform:uppercase; letter-spacing:-0.035em; font-size:clamp(2.1rem,5vw,3.25rem); line-height:1; margin-bottom:.7rem; }
.legal .updated{ color:var(--muted); font-size:.9rem; margin-bottom:1.6rem; }
.legal h2{ font-weight:800; font-size:1.25rem; letter-spacing:-0.02em; margin:2rem 0 .6rem; }
.legal p{ color:var(--ink-2); line-height:1.75; margin-bottom:.8rem; }
.legal ul{ list-style:disc; padding-left:1.2rem; display:grid; gap:.4rem; margin:.4rem 0 1rem; color:var(--ink-2); }
.legal .note{ padding:1.2rem 1.4rem; border-radius:var(--r); box-shadow:var(--nu-in); margin:1.4rem 0 2rem; font-size:.93rem; color:var(--ink-2); }
.legal dl{ display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.3rem; margin:1rem 0; }
.legal dt{ font-weight:700; color:var(--ink); }
.legal dd{ color:var(--ink-2); }
.legal a{ color:var(--pink-deep); font-weight:600; overflow-wrap:anywhere; }
.legal h3{ font-weight:700; font-size:1.05rem; letter-spacing:-0.01em; margin:1.3rem 0 .5rem; color:var(--ink); }
.legal ol{ padding-left:1.4rem; display:grid; gap:.45rem; margin:.4rem 0 1rem; color:var(--ink-2); line-height:1.7; }
.legal ol li{ padding-left:.2rem; }
.legal strong{ color:var(--ink); font-weight:700; }
.legal blockquote{ margin:1rem 0 1.4rem; padding:1rem 1.25rem; border-radius:var(--r); box-shadow:var(--nu-in); color:var(--ink-2); line-height:1.7; }
.legal blockquote p{ margin:0; }
.legal code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em; background:rgba(0,0,0,.05); padding:.12em .4em; border-radius:6px; color:var(--ink); }
.legal hr{ border:0; height:1px; background:var(--line,rgba(0,0,0,.1)); margin:2rem 0; }
.legal table{ width:100%; border-collapse:collapse; margin:1rem 0 1.6rem; font-size:.92rem; box-shadow:var(--nu); border-radius:var(--r); overflow:hidden; }
.legal th,.legal td{ text-align:left; padding:.7rem .9rem; vertical-align:top; border-bottom:1px solid var(--line,rgba(0,0,0,.08)); }
.legal th{ font-weight:700; color:var(--ink); background:rgba(0,0,0,.025); }
.legal td{ color:var(--ink-2); }
.legal tr:last-child td{ border-bottom:0; }
.legal td code{ white-space:nowrap; }
@media (max-width:560px){ .legal table,.legal thead,.legal tbody,.legal tr,.legal th,.legal td{ display:block; } .legal thead{ display:none; } .legal tr{ margin-bottom:1rem; box-shadow:var(--nu-in); border-radius:var(--r); padding:.3rem .2rem; } .legal td{ border-bottom:0; padding:.35rem .9rem; } }

@media (max-width:1000px){ .products{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .products{ grid-template-columns:1fr 1fr; gap:.7rem; } .guides__cta .btn{ margin-left:0; width:100%; } }
@media (max-width:640px){
  .product__body{ padding:.8rem .9rem 1rem; }
  .product__name{ font-size:.88rem; line-height:1.25; }
  .product__price{ font-size:.98rem; margin-top:.25rem; }
  .product__foot{ padding-top:.75rem; }
  .product__foot .btn{ padding:.6rem .4rem; font-size:.78rem; min-height:40px; }
  .product__img{ aspect-ratio: 1/1; }
  .carousel__arrow{ width:30px; height:30px; }
  .carousel__dots{ bottom:.3rem; gap:.25rem; }
  .carousel__dot{ width:5px; height:5px; }
}
@media (max-width:380px){ .products{ gap:.55rem; } .product__body{ padding:.65rem .75rem .85rem; } .product__name{ font-size:.82rem; } .product__price{ font-size:.9rem; } .product__foot .btn{ font-size:.72rem; } }

/* ---------- Sub-page header ---------- */
.pagehead{ padding-top: clamp(2.25rem,5.5vw,4rem); padding-bottom: clamp(1.25rem,3vw,2.25rem); }
.pagehead h1{ font-weight:900; text-transform:uppercase; letter-spacing:-0.04em; line-height:.98; font-size:clamp(2.3rem,6vw,4.25rem); max-width:16ch; }
.pagehead .lead{ margin-top:1.1rem; max-width:54ch; }
.flip{ transform: scaleX(-1); }
.credit{ display:flex; gap: clamp(1.5rem,4vw,3rem); flex-wrap:wrap; }
.credit .stat{ display:flex; flex-direction:column; }
.credit .n{ font-weight:900; font-size:clamp(2rem,4vw,2.8rem); letter-spacing:-0.03em; line-height:1; }
.credit .l{ color:var(--muted); font-weight:500; font-size:.9rem; margin-top:.35rem; }
.lab-teaser{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:1.15rem 1.4rem; }
.lab-teaser .nm{ font-weight:700; }
.lab-teaser .pr{ font-weight:900; font-size:1.2rem; letter-spacing:-0.02em; }
.lab-teaser .lab-teaser__status{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.9rem; color:var(--ink-2); letter-spacing:0; white-space:nowrap; }
.lab-teaser__dot{ width:8px; height:8px; border-radius:50%; background:var(--pink-deep); box-shadow:0 0 0 4px rgba(212,86,126,.18); flex:none; }
@media (max-width:420px){ .lab-teaser{ padding:1rem 1.15rem; gap:.6rem; } .lab-teaser .pr{ font-size:1.05rem; } .lab-teaser .lab-teaser__status{ font-size:.82rem; } }

/* Desktop hero: image left, text right (so the portrait faces the headline) */
@media (min-width:1001px){
  .hero__grid{ grid-template-columns: .92fr 1.08fr; }
  .hero__grid > div:first-child{ order:2; }
  .hero__stage{ order:1; }
}

/* FAQ (native accordion) */
.faq{ display:grid; gap:.8rem; max-width:760px; margin-inline:auto; }
.section-head:has(+ .faq){ margin-inline:auto; text-align:center; }
.faq details{ background:var(--paper); border-radius:var(--r); box-shadow:var(--nu-sm); padding:1.1rem 1.4rem; }
.faq summary{ font-weight:700; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-weight:400; font-size:1.3rem; color:var(--muted); line-height:1; }
.faq details[open] summary::after{ content:"\2013"; }
.faq p{ color:var(--ink-2); font-weight:400; margin-top:.8rem; }

/* ============ Consent banner ============ */
.consent{ position:fixed; left:0; right:0; bottom:0; z-index:300; padding:clamp(.8rem,2vw,1.4rem);
  transform:translateY(120%); transition:transform .5s cubic-bezier(.22,1,.36,1); pointer-events:none; }
.consent.show{ transform:translateY(0); pointer-events:auto; }
.consent__card{ max-width:1100px; margin-inline:auto; background:var(--paper); border-radius:var(--r-lg);
  box-shadow:var(--nu); padding:clamp(1.1rem,2.4vw,1.5rem) clamp(1.2rem,2.6vw,1.8rem);
  display:flex; align-items:center; gap:clamp(1rem,2.4vw,2rem); flex-wrap:wrap; }
.consent__text{ flex:1 1 320px; color:var(--ink-2); font-size:.92rem; line-height:1.6; margin:0; }
.consent__text a{ color:var(--pink-deep); font-weight:600; }
.consent__btns{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.consent__btns .btn{ min-height:44px; }
@media (max-width:620px){ .consent__btns{ width:100%; } .consent__btns .btn{ flex:1 1 auto; } }

/* ============ Cookie settings footer link ============ */
.footer__cookie{ background:none; border:0; padding:0; cursor:pointer; color:var(--muted);
  font:inherit; font-size:.82rem; text-decoration:underline; text-underline-offset:3px; }
.footer__cookie:hover{ color:var(--pink-deep); }

/* ============ Cookie preferences panel ============ */
.cpanel{ position:fixed; inset:0; z-index:400; display:grid; place-items:center; padding:1.2rem;
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease; }
.cpanel.show{ opacity:1; visibility:visible; }
.cpanel__overlay{ position:absolute; inset:0; background:rgba(33,29,31,.42); backdrop-filter:blur(6px); }
.cpanel__card{ position:relative; z-index:1; width:min(560px,100%); max-height:88vh; overflow:auto;
  background:var(--paper); border-radius:var(--r-lg); box-shadow:var(--nu); padding:clamp(1.5rem,3vw,2.3rem);
  transform:translateY(14px) scale(.98); transition:transform .4s cubic-bezier(.22,1,.36,1); }
.cpanel.show .cpanel__card{ transform:translateY(0) scale(1); }
.cpanel__x{ position:absolute; top:1rem; right:1rem; width:40px; height:40px; border:0; border-radius:50%;
  background:var(--paper); box-shadow:var(--nu-sm); cursor:pointer; display:grid; place-items:center; color:var(--ink-2); }
.cpanel__x svg{ width:18px; height:18px; }
.cpanel__card h2{ font-weight:900; text-transform:uppercase; letter-spacing:-0.02em; font-size:clamp(1.3rem,3vw,1.7rem); }
.cpanel__lead{ color:var(--ink-2); font-size:.92rem; line-height:1.6; margin:.7rem 0 1.3rem; max-width:46ch; }
.cpanel__row{ display:flex; align-items:center; gap:1rem; justify-content:space-between;
  padding:1rem 0; border-top:1px solid var(--line); }
.cpanel__row h3{ font-size:1rem; font-weight:700; }
.cpanel__row p{ color:var(--ink-2); font-size:.86rem; line-height:1.5; margin-top:.25rem; max-width:34ch; }
.cpanel__always{ color:var(--muted); font-size:.82rem; font-weight:600; white-space:nowrap; }
.cpanel__actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.5rem; }
.cpanel__actions .btn{ flex:1 1 auto; min-height:46px; }

/* toggle switch */
.switch{ position:relative; display:inline-flex; flex:0 0 auto; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch__ui{ width:52px; height:30px; border-radius:30px; background:var(--paper); box-shadow:var(--nu-in);
  display:inline-block; position:relative; transition:background .3s ease; }
.switch__ui::after{ content:""; position:absolute; top:4px; left:4px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(33,29,31,.3); transition:transform .3s cubic-bezier(.22,1,.36,1); }
.switch input:checked + .switch__ui{ background:var(--pink); }
.switch input:checked + .switch__ui::after{ transform:translateX(22px); }
.switch input:focus-visible + .switch__ui{ box-shadow:var(--nu-in), 0 0 0 2px var(--pink-deep); }

/* ============ Withdrawal page ============ */
.withdraw__single{ max-width:560px; margin-inline:auto; }
.withdraw__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
.withdraw__note{ padding:clamp(1.4rem,2.6vw,2rem); }
.withdraw__note a{ color:var(--pink-deep); }
.withdraw__step{ font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--pink-deep); margin-bottom:1.1rem; }
.withdraw__form{ padding:clamp(1.2rem,2.6vw,2rem); }
.withdraw__form .req{ color:var(--pink-deep); }
.withdraw__form .opt{ color:var(--muted); font-weight:400; }
.withdraw__check{ display:flex; gap:.7rem; align-items:flex-start; margin:.4rem 0 1.3rem;
  font-size:.88rem; line-height:1.55; color:var(--ink-2); cursor:pointer; }
.withdraw__check input{ margin-top:.2rem; width:18px; height:18px; flex:0 0 auto; accent-color:var(--pink-deep); }
.withdraw__preview{ white-space:pre-wrap; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem;
  line-height:1.6; color:var(--ink-2); background:none; box-shadow:var(--nu-in); border-radius:var(--r);
  padding:1.1rem 1.2rem; margin:1rem 0 1.4rem; overflow-x:auto; }
.withdraw__actions{ display:flex; gap:.7rem; flex-wrap:wrap; }
.withdraw__actions .btn{ flex:1 1 auto; min-height:46px; }
.withdraw__tick{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper); box-shadow:var(--nu); color:var(--pink-deep); }
.withdraw__tick svg{ width:26px; height:26px; }
@media (max-width:760px){ .withdraw__grid{ grid-template-columns:1fr; } }

/* ============ Product image carousel ============ */
.carousel{ position:relative; }
.carousel__viewport{ width:100%; height:100%; overflow:hidden; }
.carousel__track{ display:flex; width:100%; height:100%; transition:transform .5s cubic-bezier(.22,1,.36,1); will-change:transform; }
.carousel__slide{ flex:0 0 100%; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; }
.product:hover .carousel__slide{ transform:none; }   /* cancel the card hover-zoom while in a carousel */
.carousel__viewport{ cursor:grab; }
.carousel__viewport:active{ cursor:grabbing; }
/* bottom scrim so white dots read over light photos */
.carousel::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:38%; z-index:1;
  background:linear-gradient(to top, rgba(10,8,10,.30), transparent); pointer-events:none; }
.carousel__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 6px 18px -6px rgba(33,29,31,.5); color:var(--ink);
  display:grid; place-items:center; opacity:0; transition:opacity .25s ease, background .2s ease; }
.carousel__arrow svg{ width:19px; height:19px; }
.carousel__arrow:hover{ background:#fff; }
.carousel__arrow--prev{ left:.6rem; } .carousel__arrow--next{ right:.6rem; }
.carousel:hover .carousel__arrow, .carousel:focus-within .carousel__arrow{ opacity:1; }
.carousel__dots{ position:absolute; bottom:.7rem; left:0; right:0; z-index:3;
  display:flex; justify-content:center; gap:.42rem; pointer-events:none; }
.carousel__dot{ width:7px; height:7px; border-radius:50%; border:0; padding:0; cursor:pointer; pointer-events:auto;
  background:rgba(255,255,255,.6); box-shadow:0 1px 3px rgba(0,0,0,.35); transition:background .2s ease, transform .2s ease; }
.carousel__dot.is-active{ background:var(--pink); transform:scale(1.3); }
.carousel__dot:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media (hover:none){ .carousel__arrow{ opacity:1; width:34px; height:34px; background:rgba(255,255,255,.9); } }
@media (prefers-reduced-motion:reduce){ .carousel__track{ transition:none; } }
.pdp__media .carousel__slide{ cursor:zoom-in; }

/* ============ Showcase layout (AI Photo Lab + side card) ============ */
.showcase-row{ display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.showcase-row--three{ flex-wrap:wrap; }
.carousel--chatgpt .showcase__img{ object-fit:contain; object-position:center; padding:0.5rem; box-sizing:border-box; }
.showcase__slide--placeholder{ background:linear-gradient(160deg, var(--sh-from,#F9C9DB), var(--sh-to,#ECCBEE)); align-items:flex-end !important; }
.showcase__slide--placeholder::before{ display:none; }
.showcase__slide--placeholder .showcase__content{ padding:1rem 1.1rem 1.2rem; }
.showcase__slide--placeholder .showcase__badge{ background:rgba(255,255,255,.6); color:var(--ink); }
.showcase__slide--placeholder .showcase__title{ color:var(--ink); font-size:clamp(1.2rem,3.6vw,1.5rem); }
.showcase__slide--placeholder .showcase__text{ color:var(--ink-2); font-size:.82rem; line-height:1.45; margin-top:.3rem; }
.showcase-col{ display:flex; flex-direction:column; align-items:center; width:100%; }
.showcase-col--side{ width:100%; max-width:420px; }
.showcase-col--side .lab{ position:relative; padding:clamp(1.8rem,3.5vw,2.6rem); gap:1rem; align-items:center; text-align:center;
  background:var(--paper); border-radius:var(--r-lg); box-shadow:var(--nu);
  min-height:420px; justify-content:center; overflow:hidden; }
.showcase-col--side .lab::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 90% at 50% 115%, rgba(235,132,164,.18) 0%, rgba(246,218,200,.10) 40%, rgba(255,255,255,0) 70%); }
.showcase-col--side .lab > *{ position:relative; z-index:1; }
.showcase-col--side .badge{ align-self:center; }
.showcase-col--side .lab__name{ margin-top:.4rem; font-size:clamp(1.4rem,2.6vw,1.8rem); letter-spacing:-0.02em; }
.showcase-col--side .lab p{ margin-top:.2rem; font-size:.98rem; line-height:1.6; max-width:30ch; color:var(--ink-2); font-weight:300; }
@media (min-width:780px){
  .showcase-row{ flex-direction:row; align-items:stretch; justify-content:center; gap:1.6rem; }
  .showcase-col{ width:auto; display:flex; flex-direction:column; }
  .showcase-col--side{ max-width:420px; flex-shrink:1; padding-top:0; align-self:stretch; }
  .showcase-col--side .lab{ height:100%; min-height:0; }
}

/* ============ Showcase slider (AI Photo Lab) ============ */
.carousel--showcase{ max-width:420px; margin-inline:auto; border-radius:20px; overflow:hidden; box-shadow:var(--nu); }
.carousel--showcase .carousel__slide{ cursor:default; aspect-ratio:2/3; display:flex; align-items:flex-end; background:linear-gradient(160deg, var(--sh-from,#F9C9DB), var(--sh-to,#ECCBEE)); position:relative; }
.carousel--showcase .carousel__slide::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,16,18,.18) 0%, transparent 50%); z-index:1; }
.showcase__slide--photo{ flex-direction:column; align-items:stretch !important;
  background:var(--paper) !important; }
.showcase__slide--photo::before{ display:none; }
.showcase__img-wrap{ flex:1 1 0; min-height:0; overflow:hidden; border-radius:16px; margin:.35rem .45rem 0; background:var(--paper); }
.showcase__img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; }
.showcase__slide--grid{ flex-direction:column; align-items:stretch !important; background:var(--paper) !important; }
.showcase__slide--grid::before{ display:none; }
.showcase__grid{ flex:1 1 0; min-height:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  gap:4px; margin:.3rem .35rem 0; overflow:hidden; border-radius:14px; }
.showcase__grid img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; border-radius:4px; background:var(--paper); padding:4px; box-sizing:border-box; }
.showcase__slide--grid .showcase__content{
  background:linear-gradient(135deg, rgba(252,232,240,.72), rgba(248,220,232,.58));
  backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(235,132,164,.16); color:var(--ink); border-radius:10px; margin:0 .5rem .5rem;
  box-shadow:0 4px 20px rgba(212,86,126,.06), inset 0 1px 0 rgba(255,255,255,.55); }
.showcase__slide--grid .showcase__badge{ background:rgba(235,132,164,.13); color:var(--pink-deep); }
.showcase__slide--grid .showcase__title{ color:var(--ink); }
.showcase__slide--grid .showcase__text{ color:var(--ink-2); }
.showcase__content{ position:relative; z-index:2; padding:.55rem .9rem .6rem; color:var(--ink);
  margin:0 .5rem .5rem; border-radius:10px;
  background:rgba(255,255,255,.55); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.45); }
.showcase__slide--photo .showcase__content{
  background:linear-gradient(135deg, rgba(252,232,240,.72), rgba(248,220,232,.58));
  backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(235,132,164,.16); color:var(--ink);
  border-radius:10px; margin:0 .5rem .5rem;
  box-shadow:0 4px 20px rgba(212,86,126,.06), inset 0 1px 0 rgba(255,255,255,.55); }
.showcase__slide--photo .showcase__badge{ background:rgba(235,132,164,.13); color:var(--pink-deep); }
.showcase__slide--photo .showcase__title{ color:var(--ink); }
.showcase__slide--photo .showcase__text{ color:var(--ink-2); }
.showcase__badge{ display:inline-block; font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  background:rgba(33,29,31,.08); padding:.2rem .5rem; border-radius:5px; margin-bottom:.25rem; color:var(--ink-2); }
.showcase__title{ font-size:clamp(1.1rem,3.6vw,1.35rem); font-weight:800; line-height:1.15; color:var(--ink); }
.showcase__text{ font-size:.76rem; line-height:1.35; margin-top:.2rem; color:var(--ink-2); }
.carousel--showcase::after{ display:none; }
.carousel--showcase .carousel__dots{ bottom:.35rem; z-index:3; }
.carousel--showcase .carousel__dot{ background:rgba(0,0,0,.15); }
.carousel--showcase .carousel__dot.is-active{ background:var(--ink); }
.carousel--showcase .carousel__arrow{ background:rgba(0,0,0,.08); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--ink); box-shadow:0 4px 14px rgba(0,0,0,.1); opacity:1; }
.carousel--showcase .carousel__arrow:hover{ background:rgba(0,0,0,.14); }
.showcase__buy{ display:block; margin:.8rem auto 0; min-width:160px; width:auto; padding:.65rem 1.6rem;
  text-align:center; font-size:1rem; font-weight:700; box-shadow:var(--nu-sm); }
.showcase__buy span{ font-weight:400; font-size:.82rem; opacity:.75; margin-left:.25rem; }
@media (hover:none){ .carousel--showcase .carousel__arrow{ background:rgba(0,0,0,.10); } }
@media (max-width:600px){
  .carousel--showcase{ max-width:100%; }
  .carousel--showcase .carousel__slide{ aspect-ratio:3/4; }
}

/* ============ Lightbox ============ */
.lightbox{ position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; }
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__img{ max-width:90vw; max-height:85vh; object-fit:contain; transition:transform .3s ease; cursor:grab; touch-action:none; user-select:none; -webkit-user-drag:none; }
.lightbox__img.is-zoomed{ cursor:zoom-out; max-width:none; max-height:none; }
.lightbox__close{ position:absolute; top:1rem; right:1rem; z-index:2; width:40px; height:40px; border:0; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px); }
.lightbox__close:hover{ background:rgba(255,255,255,.3); }
.lightbox__close svg{ width:20px; height:20px; }
.lightbox__zoom{ position:absolute; bottom:1.2rem; left:50%; transform:translateX(-50%); z-index:2; display:flex; gap:.5rem; }
.lightbox__zoom button{ width:38px; height:38px; border:0; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; cursor:pointer; font-size:1.2rem; font-weight:600; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px); }
.lightbox__zoom button:hover{ background:rgba(255,255,255,.3); }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:40px; height:40px; border:0; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px); }
.lightbox__nav:hover{ background:rgba(255,255,255,.3); }
.lightbox__nav svg{ width:18px; height:18px; }
.lightbox__nav--prev{ left:1rem; }
.lightbox__nav--next{ right:1rem; }
.lightbox__counter{ position:absolute; top:1.2rem; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.6); font-size:.85rem; font-weight:500; }

/* ============ Product language selector ============ */
.product__lang{ display:flex; align-items:center; gap:.6rem; margin-bottom:.2rem; }
.product__lang-label{ font-size:.82rem; font-weight:600; color:var(--muted); white-space:nowrap; }
.select-neu{ position:relative; flex:1; }
.select-neu .lang-select{ width:100%; appearance:none; -webkit-appearance:none; cursor:pointer;
  font:inherit; font-size:.9rem; font-weight:600; color:var(--ink);
  background:var(--paper); border:0; border-radius:14px; box-shadow:var(--nu-in);
  padding:.6rem 2.2rem .6rem .9rem; line-height:1.2; }
.select-neu .lang-select:focus-visible{ outline:none; box-shadow:var(--nu-in), 0 0 0 2px var(--pink); }
.select-neu__chev{ position:absolute; right:.8rem; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--muted); pointer-events:none; }

/* ============ Product detail page (PDP) ============ */
.pdp{ padding-top:clamp(1.5rem,3vw,2.5rem); padding-bottom:clamp(3rem,7vw,6rem); }
.crumbs{ font-size:.85rem; color:var(--muted); margin-bottom:clamp(1.2rem,2.5vw,2rem); display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--pink-deep); }
.crumbs [aria-current]{ color:var(--ink); font-weight:600; }
.pdp__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
.pdp__media{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--nu); aspect-ratio:4/3; background:var(--cloud); }
.pdp__title{ font-weight:900; text-transform:uppercase; letter-spacing:-0.03em; line-height:1; font-size:clamp(1.9rem,4vw,2.8rem); }
.pdp__price{ margin-top:.7rem; font-weight:800; font-size:1.8rem; letter-spacing:-0.02em; }
.pdp__tagline{ margin-top:.9rem; color:var(--ink-2); line-height:1.6; max-width:46ch; }
.pdp__lang{ margin-top:1.6rem; }
.pdp__lang-label{ display:block; font-size:.82rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); margin-bottom:.7rem; }
.lang-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.lang-chip{ font:inherit; font-size:.9rem; font-weight:600; cursor:default; color:var(--ink-2);
  background:var(--paper); border:0; border-radius:12px; box-shadow:var(--nu-sm); padding:.5rem .85rem;
  pointer-events:none; user-select:none; display:inline-block; line-height:1.2; }
.pdp__buy{ margin-top:1.3rem; }
.pdp__buy .btn{ width:100%; }
.pdp__buy .is-hidden{ display:none !important; }
.pdp__note{ margin-top:.9rem; font-size:.85rem; color:var(--muted); }
.pdp__related{ margin-top:.7rem; font-size:.88rem; color:var(--ink-2); }
.pdp__related a{ color:var(--pink-deep); font-weight:600; }
.pdp__cross{ margin-top:clamp(2.4rem,5vw,3.5rem); background:var(--paper); border-radius:var(--r); box-shadow:var(--nu-sm);
  display:grid; grid-template-columns:minmax(140px,220px) 1fr; gap:clamp(1rem,3vw,2rem); align-items:center; padding:clamp(1rem,2.5vw,1.6rem); }
.pdp__cross-media{ display:block; border-radius:var(--r); overflow:hidden; aspect-ratio:1/1; background:var(--cloud); }
.pdp__cross-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.pdp__cross-media:hover img{ transform:scale(1.03); }
.pdp__cross-body{ display:grid; gap:1rem; }
.pdp__cross-text{ color:var(--ink-2); font-size:1.02rem; line-height:1.55; }
.pdp__cross-text strong{ color:var(--ink); font-weight:700; }
.pdp__cross .btn{ justify-self:start; }
@media (max-width:600px){ .pdp__cross{ grid-template-columns:1fr; } .pdp__cross .btn{ width:100%; } }
.pdp__back{ margin-top:clamp(2rem,4vw,3rem); }
.pdp__back a{ color:var(--pink-deep); font-weight:600; }

/* PDP accordions */
.pdp__info{ margin-top:1.6rem; display:grid; gap:.7rem; }   /* sits in the right column, under the buy button */
@media (min-width:821px){ .pdp__media{ position:sticky; top:90px; } }
.acc details{ background:var(--paper); border-radius:var(--r); box-shadow:var(--nu-sm); overflow:hidden; }
.acc summary{ font-weight:700; font-size:1.02rem; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 1.4rem; }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{ content:""; width:10px; height:10px; flex:0 0 auto; margin-right:.2rem;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg); transition:transform .25s ease; }
.acc details[open] summary::after{ transform:rotate(-135deg); }
.acc__body{ padding:0 1.4rem 1.35rem; color:var(--ink-2); line-height:1.7; }
.acc__body p{ margin-bottom:.7rem; }
.acc__body p:last-child{ margin-bottom:0; }
.acc__body ul, .acc__body ol{ padding-left:1.2rem; display:grid; gap:.4rem; }
.acc__body ol{ padding-left:1.4rem; }
.acc__body .spec{ display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.5rem; }
.acc__body .spec dt{ font-weight:700; color:var(--ink); }
.acc__body .spec dd{ color:var(--ink-2); }

/* product card title link */
.product__name a{ color:inherit; }
.product__name a:hover{ color:var(--pink-deep); }

@media (max-width:820px){ .pdp__grid{ grid-template-columns:1fr; } }

/* ---------- About · My Storyline (mobile-first, scroll-animated) ---------- */
.storyline__head{ margin-bottom: clamp(1.75rem, 6vw, 3.75rem); }
.storyline__head .kicker{ margin-bottom:.55rem; }
.storyline__head .title{ max-width: 16ch; }
.storyline__head .title .thin{ font-weight:300; letter-spacing:-0.02em; }

/* Base = mobile: single column, image on top, timeline below */
.storyline__grid{ display:grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 6vw, 2.5rem); align-items:start; }

.storyline__photo{
  position:relative; border-radius: var(--r-lg); overflow:hidden;
  aspect-ratio: 4/5; box-shadow: var(--nu-sm);
  background: var(--cloud); isolation:isolate;
  max-width: 560px; width:100%; margin-inline:auto;
}
.storyline__photo::before{
  content:""; position:absolute; inset:-16%; z-index:-1;
  background: var(--irid-soft); filter: blur(42px); opacity:.55;
  pointer-events:none;
}
.storyline__photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: grayscale(1) contrast(1.02);
  transition: transform .9s var(--ease);
}
.storyline__photo.in img{ transform: scale(1.02); }

/* Timeline track with animated rail */
.storyline__track{
  --rail-x: 7px;             /* rail X position within the track */
  --rail-gap: 1.1rem;        /* distance from rail to text column */
  --dot-size: 14px;
  position:relative;
  padding-left: calc(var(--rail-x) + var(--rail-gap));
}
.storyline__rail{
  position:absolute; top:.6rem; bottom:.6rem;
  left: var(--rail-x); width: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--pink) 38%, var(--line));
  overflow:hidden;
}
.storyline__rail-fill{
  position:absolute; top:0; left:0; right:0;
  height: var(--storyline-progress, 0%);
  background: linear-gradient(to bottom, var(--pink), var(--pink-deep));
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(235,132,164,.6);
  transition: height .18s linear;
}

.storyline__list{ list-style:none; margin:0; padding:0; }
.milestone{ position:relative; padding: 0 0 clamp(1.6rem, 6vw, 2.75rem); }
.milestone:last-child{ padding-bottom:0; }

.milestone__dot{
  position:absolute;
  /* Center the dot exactly on the 2px rail: rail-center is at (rail-x + 1px) from track-left; milestone origin is at (rail-x + rail-gap) from track-left. */
  left: calc(1px - calc(var(--dot-size) / 2) - var(--rail-gap));
  top: .55rem;
  width: var(--dot-size); height: var(--dot-size); border-radius:50%;
  background: var(--paper);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pink) 35%, transparent), inset 0 2px 3px rgba(255,255,255,.9);
  transform: scale(.55);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}
.milestone.in .milestone__dot{
  background: var(--paper);
  box-shadow: 0 0 0 2px var(--pink-deep), 0 6px 14px -4px rgba(212,86,126,.45), inset 0 2px 3px rgba(255,255,255,.9);
  transform: scale(1);
}
.milestone--now.in .milestone__dot{
  background: var(--pink-deep);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 40%, transparent), 0 10px 22px -4px rgba(212,86,126,.55), inset 0 2px 3px rgba(255,255,255,.4);
  animation: pulseNow 2.4s ease-in-out .4s infinite;
}
@keyframes pulseNow{
  0%,100%{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 40%, transparent), 0 10px 22px -4px rgba(212,86,126,.55); }
  50%    { box-shadow: 0 0 0 9px color-mix(in srgb, var(--pink) 15%, transparent), 0 12px 26px -4px rgba(212,86,126,.65); }
}

.milestone__body{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.milestone.in .milestone__body{ opacity: 1; transform: none; }

.milestone__year{
  display:inline-block; font-family:var(--f);
  font-weight:900; letter-spacing:-0.04em;
  font-size: clamp(1.7rem, 7.5vw, 2.6rem); line-height:1;
  color: var(--pink-deep);
  text-transform: uppercase;
}
.milestone__title{
  margin:.45rem 0 .55rem; font-weight:700; letter-spacing:-0.02em;
  color: var(--ink);
  font-size: clamp(1.1rem, 4.2vw, 1.35rem); line-height:1.18;
}
.milestone__desc{
  color: var(--ink-2); font-weight:300; line-height:1.55;
  font-size: clamp(.95rem, 3.9vw, 1.05rem); max-width: 58ch;
}

/* Tablet (≥720px): slightly tighter padding, bigger photo */
@media (min-width: 720px){
  .storyline__photo{ aspect-ratio: 4/4.6; max-width: 640px; }
  .milestone__title{ font-size: 1.18rem; }
  .milestone__desc{ font-size: 1rem; }
  .milestone__year{ font-size: 2.1rem; }
}

/* Desktop (≥920px): two-column with sticky photo */
@media (min-width: 920px){
  .storyline__grid{
    grid-template-columns: minmax(260px, .9fr) 1.1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
  }
  .storyline__photo{
    position: sticky; top: clamp(1.25rem, 8vh, 3rem);
    aspect-ratio: 3/4; max-width: none;
    border-radius: var(--r-xl); box-shadow: var(--nu);
  }
  .storyline__track{ --rail-x: 8px; --rail-gap: 1.5rem; }
  .milestone{ padding-bottom: clamp(2rem, 3.5vw, 3rem); }
  .milestone__year{ font-size: clamp(1.9rem, 2.6vw, 2.6rem); }
  .milestone__title{ font-size: clamp(1.1rem, 1.5vw, 1.35rem); }
  .milestone__desc{ font-size: clamp(.98rem, 1.1vw, 1.05rem); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .storyline__rail-fill{ height: 100% !important; transition:none; }
  .milestone__body, .milestone__dot, .storyline__photo img{ transition:none; animation:none; }
  .milestone .milestone__body{ opacity:1; transform:none; }
  .milestone .milestone__dot{ transform:scale(1); box-shadow: 0 0 0 2px var(--pink-deep); }
}

/* ---------- Guiding principle (weight-contrast mini headline) ---------- */
.principle{
  margin: 1.7rem 0 0;
  max-width: 34ch;
  font-family: var(--f);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.principle__strong,
.principle__thin{ display:block; }
.principle__thin{
  font-weight: 300;
  color: var(--ink-2);
  font-size: clamp(1rem, 2vw, 1.35rem);
  letter-spacing: -0.012em;
}
.principle__strong{
  font-weight: 900;
  color: var(--ink);
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  margin-top: .18em;
}

/* ---------- Credit stats (3-up neumorphic chips) ---------- */
.credit--3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.6rem, 1.4vw, 1rem);
  flex-wrap: initial;
}
.credit--3 .stat{
  position: relative;
  padding: 1rem 1rem 1.05rem;
  background: var(--paper);
  border-radius: var(--r);
  box-shadow: var(--nu-sm);
  isolation: isolate;
  overflow: hidden;
}
.credit--3 .stat::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: var(--irid-soft); opacity: .32; pointer-events:none;
}
.credit--3 .n{
  font-variant-numeric: tabular-nums;
  color: var(--pink-deep);
  font-weight: 900;
  font-size: clamp(1.75rem, 5vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1;
  display: block;
}
.credit--3 .l{
  color: var(--ink-2);
  font-weight: 500;
  font-size: .88rem;
  line-height: 1.35;
  margin-top: .7rem;
}

/* Mobile: 1 column so each stat is big and readable */
@media (max-width: 520px){
  .credit--3{ grid-template-columns: 1fr; }
  .credit--3 .stat{ padding: .95rem 1.1rem 1rem; }
  .credit--3 .l{ font-size: .88rem; }
}


/* ===== Withdrawal tool on the Withdrawal & Refund Policy page ===== */
.withdraw-tool{margin:1.6rem 0 2.4rem;padding:clamp(1.2rem,2.4vw,1.8rem);border-radius:var(--r);box-shadow:var(--nu-in)}
.withdraw-tool h2{margin-top:.2rem}
.withdraw__error{margin:.7rem 0 0;padding:.75rem .95rem;border-radius:12px;background:rgba(190,30,30,.09);color:#9e1b1b;font-size:.92rem}
.field__help{display:block;color:var(--muted);margin-top:.35rem;line-height:1.5}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ===== Cookie settings — Categories / Cookie Declaration tabs ===== */
.cpanel__tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line,rgba(0,0,0,.1));margin:.2rem 0 1.1rem}
.cpanel__tab{appearance:none;background:none;border:0;padding:.6rem .9rem;font:inherit;font-weight:700;font-size:.92rem;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:8px 8px 0 0}
.cpanel__tab:hover{color:var(--ink)}
.cpanel__tab.is-active{color:var(--ink);border-bottom-color:var(--pink-deep)}
.cpanel__tab:focus-visible{outline:2px solid var(--pink-deep);outline-offset:2px}
.cpanel__tabpanel:focus{outline:none}
.cpanel__tabpanel[hidden]{display:none}
.cpanel__declnote{color:var(--ink-2);font-size:.86rem;line-height:1.55;margin:0 0 1rem;max-width:52ch}
.cpanel__declgroup{margin:0 0 1.3rem}
.cpanel__declgroup h4{font-weight:800;font-size:.95rem;margin:0 0 .5rem;color:var(--ink)}
.cpanel__declempty{color:var(--ink-2);font-size:.85rem;line-height:1.5;margin:0}
.cpanel__decltable{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;box-shadow:var(--nu-in)}
.cpanel__decltable table{width:100%;border-collapse:collapse;font-size:.8rem;min-width:520px}
.cpanel__decltable th,.cpanel__decltable td{text-align:left;padding:.5rem .6rem;vertical-align:top;border-bottom:1px solid var(--line,rgba(0,0,0,.08))}
.cpanel__decltable th{font-weight:700;color:var(--ink);background:rgba(0,0,0,.025);white-space:nowrap}
.cpanel__decltable td{color:var(--ink-2)}
.cpanel__decltable tr:last-child td{border-bottom:0}
.cpanel__decltable code{font-family:ui-monospace,Menlo,monospace;font-size:.92em;color:var(--ink);white-space:nowrap}
@media (max-width:560px){
  .cpanel__decltable{box-shadow:none;overflow:visible}
  .cpanel__decltable table{min-width:0}
  .cpanel__decltable thead{position:absolute;left:-9999px}
  .cpanel__decltable tr{display:block;box-shadow:var(--nu-in);border-radius:12px;padding:.4rem .2rem;margin-bottom:.7rem}
  .cpanel__decltable td{display:flex;gap:.6rem;border-bottom:0;padding:.3rem .7rem;min-width:0}
  .cpanel__decltable td::before{content:attr(data-th);font-weight:700;color:var(--ink);flex:0 0 5.5rem}
  .cpanel__decltable code{white-space:normal;word-break:break-word;min-width:0}
}

/* ===== Refund page: jump-to-form link ===== */
.withdraw-jump{margin:.4rem 0 .3rem}
.withdraw-jump .btn{display:inline-flex}
.withdraw-jump__note{color:var(--muted);margin:0 0 1.5rem}