/* ===== Brand display font: Be Vietnam Pro (geometric, full Vietnamese) ===== */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/bvp-600-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/bvp-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bvp-700-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bvp-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bvp-800-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bvp-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ==========================================================================
   Nailmaker — brand identity
   Cool lavender ground · modern geometric sans · violet→magenta gradient
   ========================================================================== */

:root{
  --paper:#f5f3fb;      /* cool lavender white */
  --paper-2:#ece7f8;
  --card:#ffffff;
  --ink:#241f2e;        /* charcoal-plum */
  --ink-soft:#6c6580;
  --line:#e7e1f4;
  --purple:#8b34d4;     /* brand violet */
  --pink:#e0399b;       /* brand magenta */
  --rose:#a52fce;       /* primary accent (links/ticks) — mid violet-magenta */
  --rose-deep:#7a20b6;
  --gold:#9b34d4;       /* repurposed → brand violet (eyebrows/kickers) */
  --grad:linear-gradient(120deg,#8b34d4 0%,#b930c4 52%,#e0399b 100%);
  --serif:"Be Vietnam Pro","SF Pro Display",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --sans:-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  --shadow:0 30px 60px -30px rgba(90,35,130,.34);
  --wrap:1120px;
  /* legacy aliases (older markup) */
  --bg:var(--paper); --max:var(--wrap);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#120f1c; --paper-2:#1a1528; --card:#1e1830;
    --ink:#f1ecfa; --ink-soft:#a99fc2; --line:#2e2745;
    --purple:#b06bff; --pink:#ff77c2; --rose:#c07bff; --rose-deep:#d9a3ff; --gold:#b788ff;
    --grad:linear-gradient(120deg,#b06bff 0%,#d763e0 52%,#ff77c2 100%);
    --shadow:0 34px 66px -30px rgba(0,0,0,.7);
  }
}
:root[data-theme="light"]{ --paper:#f5f3fb; --paper-2:#ece7f8; --card:#ffffff; --ink:#241f2e; --ink-soft:#6c6580; --line:#e7e1f4; --purple:#8b34d4; --pink:#e0399b; --rose:#a52fce; --gold:#9b34d4; --grad:linear-gradient(120deg,#8b34d4 0%,#b930c4 52%,#e0399b 100%); --shadow:0 30px 60px -30px rgba(90,35,130,.34); }
:root[data-theme="dark"]{ --paper:#120f1c; --paper-2:#1a1528; --card:#1e1830; --ink:#f1ecfa; --ink-soft:#a99fc2; --line:#2e2745; --purple:#b06bff; --pink:#ff77c2; --rose:#c07bff; --gold:#b788ff; --grad:linear-gradient(120deg,#b06bff 0%,#d763e0 52%,#ff77c2 100%); --shadow:0 34px 66px -30px rgba(0,0,0,.7); }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.65; -webkit-font-smoothing:antialiased;}
img{max-width:100%}
a{color:var(--rose); text-decoration:none}
::selection{background:var(--rose); color:#fff}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,48px)}
.hide-sm{display:inline}
@media (max-width:640px){ .hide-sm{display:none} }

/* bilingual */
.lang-en .vi, .lang-vi .en{display:none}

/* ---------- header ---------- */
header.site{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 85%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; height:66px}
.wordmark{display:flex; align-items:center; gap:11px; color:var(--ink)}
.wordmark .mark{width:30px; height:30px; border-radius:8px}
.wordmark .word{font-family:var(--serif); font-weight:800; font-size:1.32rem; letter-spacing:-.02em}
nav.main{display:flex; align-items:center; gap:24px}
nav.main a{color:var(--ink); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; opacity:.72}
nav.main a:hover{opacity:1; color:var(--rose)}
.lang-switch{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden}
.lang-switch button{border:0; background:transparent; color:var(--ink-soft); font:inherit; font-size:.7rem; letter-spacing:.08em; padding:5px 11px; cursor:pointer}
.lang-switch button.active{background:var(--ink); color:var(--paper)}
/* light/dark toggle */
.theme-toggle{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:1rem; line-height:1; cursor:pointer; padding:0; transition:border-color .2s, transform .2s, color .2s}
.theme-toggle:hover{border-color:var(--purple); color:var(--purple); transform:translateY(-1px)}
.theme-toggle .sun{display:none} .theme-toggle .moon{display:inline}
@media (prefers-color-scheme:dark){ .theme-toggle .sun{display:inline} .theme-toggle .moon{display:none} }
:root[data-theme="dark"] .theme-toggle .sun{display:inline} :root[data-theme="dark"] .theme-toggle .moon{display:none}
:root[data-theme="light"] .theme-toggle .sun{display:none} :root[data-theme="light"] .theme-toggle .moon{display:inline}

/* ---------- shared bits ---------- */
.kicker{display:flex; align-items:center; gap:14px; font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--purple)}
.kicker::after{content:""; height:2px; width:44px; border-radius:2px; background:var(--grad)}
/* signature gradient text (violet → magenta) */
.grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.btn{display:inline-flex; align-items:center; gap:9px; background:var(--grad); color:#fff; font-weight:700; padding:13px 24px; border-radius:999px; font-size:.95rem; box-shadow:0 12px 26px -12px rgba(139,52,212,.6); transition:transform .18s, box-shadow .18s, filter .18s}
.btn:hover{transform:translateY(-2px); filter:brightness(1.07); box-shadow:0 18px 34px -12px rgba(139,52,212,.7)}
.btn.ghost{background:none; color:var(--purple); border:1.5px solid color-mix(in srgb, var(--purple) 40%, transparent); box-shadow:none}
.btn.ghost:hover{border-color:var(--purple); background:color-mix(in srgb, var(--purple) 8%, transparent); filter:none; transform:translateY(-2px)}

/* ---------- hero ---------- */
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,64px); align-items:center; padding:clamp(46px,7vw,96px) 0 clamp(36px,5vw,64px)}
.hero h1{font-family:var(--serif); font-weight:800; font-size:clamp(2.6rem,6.4vw,4.6rem); line-height:1.02; letter-spacing:-.03em; margin:.34em 0 .16em; text-wrap:balance}
.hero h1 em, .hero h1 .grad{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.hero .tagline{font-family:var(--serif); font-weight:800; font-size:clamp(.92rem,1.5vw,1.12rem); letter-spacing:.16em; text-transform:uppercase; margin:2px 0 22px; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; width:max-content}
.hero .sub{color:var(--ink-soft); font-size:1.12rem; max-width:46ch; margin:0 0 26px}
.badges{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.appstore-badge{display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--card); border-radius:14px; padding:10px 16px; color:var(--ink)}
.appstore-badge .small{display:block; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
.appstore-badge .big{font-family:var(--serif); font-weight:700; font-size:1.12rem; letter-spacing:-.01em}
.badges .note{font-size:.82rem; color:var(--ink-soft)}

/* hero visual — the app running on a phone, showing a real nail shot */
.hero-visual{justify-self:center; width:100%; max-width:320px}
.hero-device{width:clamp(240px,30vw,300px); margin:0 auto; box-shadow:0 46px 90px -40px rgba(90,25,130,.55); border-color:rgba(139,52,212,.3)}
.hero-device .screen{background:#0c0910}
.hero-device .feed{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hero-device .scrim-t{position:absolute; top:0; left:0; right:0; height:66px; background:linear-gradient(rgba(0,0,0,.5),transparent); z-index:1}
.hero-device .scrim-b{position:absolute; bottom:0; left:0; right:0; height:104px; background:linear-gradient(transparent,rgba(0,0,0,.55)); z-index:1}
.hero-device .cap{position:absolute; left:14px; bottom:14px; z-index:6; font-family:var(--serif); font-style:normal; color:#fff; font-size:1.02rem; text-shadow:0 2px 10px rgba(0,0,0,.6)}

/* ---------- sections ---------- */
.block{padding:clamp(48px,7vw,92px) 0}
.block.alt{background:var(--paper-2)}
.block h2{font-family:var(--serif); font-weight:800; font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.06; letter-spacing:-.025em; margin:.32em 0 .28em; text-wrap:balance}
.block .sub{color:var(--ink-soft); font-size:1.08rem; max-width:60ch}

/* editorial feature list (home) */
.feat{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-top:34px}
.feat .item{background:var(--card); padding:26px 24px; display:flex; flex-direction:column; gap:8px}
.feat .no{font-family:var(--serif); font-weight:800; color:var(--purple); font-size:1.05rem}
.feat .item h3{font-family:var(--serif); font-weight:700; font-size:1.28rem; letter-spacing:-.015em; margin:0}
.feat .item p{margin:0; color:var(--ink-soft); font-size:.95rem}
.feat .item .more{margin-top:auto; padding-top:10px; color:var(--rose); font-weight:600; font-size:.85rem}

.guidecta{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:30px; padding:24px 28px; border:1px solid var(--line); border-radius:16px; background:var(--card)}
.guidecta p{margin:0; font-family:var(--serif); font-weight:700; font-size:1.3rem; letter-spacing:-.015em}

/* privacy points */
.pts{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:26px; margin-top:30px}
.pts .pt{display:flex; gap:12px}
.pts .tick{flex:none; width:26px; height:26px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-size:.8rem; margin-top:2px}
.pts .pt b{display:block; font-family:var(--serif); font-size:1.1rem; font-weight:700; letter-spacing:-.01em}
.pts .pt span{color:var(--ink-soft); font-size:.94rem}
.readmore{display:inline-block; margin-top:26px; color:var(--rose); font-weight:600}

/* ---------- legal / support docs (.doc) ---------- */
main.doc{max-width:74ch; margin:0 auto; padding:clamp(40px,6vw,72px) clamp(20px,5vw,48px)}
main.doc h1{font-family:var(--serif); font-weight:500; font-size:clamp(2rem,5vw,3.2rem); letter-spacing:-.01em; margin:.2em 0 .1em; line-height:1.05}
main.doc h2{font-family:var(--serif); font-weight:500; font-size:1.42rem; margin:1.8em 0 .4em; line-height:1.22}
main.doc h3{font-size:1.05rem; margin:1.4em 0 .3em}
main.doc p, main.doc li{color:var(--ink); opacity:.9; font-size:1.02rem}
main.doc ul{padding-left:1.2em}
main.doc li{margin:.32em 0}
main.doc strong{opacity:1}
main.doc a{border-bottom:1px solid color-mix(in srgb,var(--rose) 40%, transparent)}
.meta{color:var(--ink-soft); font-size:.85rem; margin-bottom:1.4em}
.summary{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--rose); border-radius:0 14px 14px 0; padding:16px 20px; margin:0 0 1.6em}
.summary p{margin:0}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line); background:var(--paper-2)}
footer.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:30px clamp(20px,5vw,48px)}
footer.site .wordmark .word{font-size:1.15rem}
footer.site nav{display:flex; gap:20px; flex-wrap:wrap}
footer.site nav a{color:var(--ink-soft); font-size:.85rem}
footer.site nav a:hover{color:var(--rose)}
.copyright{color:var(--ink-soft); font-size:.82rem}

@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr; gap:30px}
  .hero-visual{max-width:280px; order:-1}
}

/* ==========================================================================
   Interactive feature explorer (home #features + guide)
   ========================================================================== */
.spread{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,5vw,64px); align-items:center; padding:12px 0; position:relative; margin-top:30px;}
.stagehead{position:absolute; top:-8px; right:0; display:flex; align-items:center; gap:16px; z-index:5}
.count{font-family:var(--serif); font-size:1rem; letter-spacing:.1em; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.count b{color:var(--rose); font-style:normal}
.arw{width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--ink); font-family:var(--serif); font-size:1.5rem; line-height:0; cursor:pointer; display:grid; place-items:center; transition:.18s}
.arw:hover{background:var(--rose); border-color:transparent; color:#fff}
.arw:focus-visible{outline:2px solid var(--rose); outline-offset:3px}
.stageColL{display:grid; place-items:center}
.pedestal{position:relative; padding:14px 0 30px}
.pedestal::after{content:""; position:absolute; left:50%; bottom:8px; width:64%; height:26px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(closest-side, rgba(120,40,80,.28), transparent 78%); filter:blur(3px)}
.panels{position:relative; min-height:340px}
.panel .dv{display:none}
.panel{display:none}
.panel.on{display:block; animation:rise .4s cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.cnum{font-family:var(--serif); font-style:normal; font-size:clamp(3rem,7vw,4.6rem); line-height:.8; color:transparent; -webkit-text-stroke:1px var(--gold); letter-spacing:.02em}
.cat{display:inline-block; margin:14px 0 2px; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold)}
.panel h2{font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,3.6vw,2.5rem); line-height:1.06; letter-spacing:-.01em; margin:.12em 0 .34em}
.lead{color:var(--ink-soft); font-size:1.06rem; max-width:50ch; margin:0 0 22px}
.steps{list-style:none; margin:0; padding:0; display:grid; gap:0; max-width:54ch}
.steps li{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline; padding:13px 0; border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps .n{font-family:var(--serif); font-style:normal; font-size:1.15rem; color:var(--rose); font-variant-numeric:tabular-nums}
.steps b{color:var(--ink); font-weight:600}
.note{margin-top:16px; font-size:.9rem; color:var(--ink-soft); padding-left:14px; border-left:2px solid var(--gold)}
.indexbar{margin-top:clamp(24px,4vw,44px); border-top:1px solid var(--line)}
.idxlabel{font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); padding:16px 0 4px}
.rail{display:flex; gap:0; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; padding-bottom:6px}
.rail::-webkit-scrollbar{height:0}
.idx{flex:none; scroll-snap-align:start; cursor:pointer; text-align:left; background:transparent; border:0; border-bottom:2px solid transparent; color:var(--ink-soft); padding:14px 20px 12px; display:flex; align-items:baseline; gap:10px; transition:.16s; white-space:nowrap}
.idx:first-child{padding-left:0}
.idx .in{font-family:var(--serif); font-style:normal; font-size:.95rem; color:var(--gold); font-variant-numeric:tabular-nums}
.idx .it{font-size:.92rem; font-weight:500}
.idx:hover{color:var(--ink)}
.idx.on{color:var(--ink); border-bottom-color:var(--rose)}
.idx.on .in{color:var(--rose)}
.idx:focus-visible{outline:2px solid var(--rose); outline-offset:-2px}
@media (max-width:820px){ .spread{grid-template-columns:1fr; gap:22px} .stagehead{position:static; justify-content:flex-end; margin:-8px 0 4px} .panels{min-height:0} .pedestal{padding-top:0} }

/* phone mockup */
.device{width:186px; aspect-ratio:9/19.5; border-radius:32px; background:#0c090c; position:relative; border:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow), inset 0 0 0 5px #0c090c}
.device::after{content:""; position:absolute; inset:0; border-radius:32px; background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.5) 46%,transparent 58%); pointer-events:none; z-index:9; opacity:.9}
@media (prefers-color-scheme:dark){ .device::after{background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.16) 46%,transparent 58%)} }
@media (max-width:820px){ .device{width:168px} }
.screen{position:absolute; inset:6px; border-radius:26px; overflow:hidden; background:#151019; color:#fff; font-family:var(--sans)}
.island{position:absolute; top:7px; left:50%; transform:translateX(-50%); width:32%; height:12px; background:#000; border-radius:10px; z-index:7}
.photo{position:absolute; inset:0; background:radial-gradient(120% 80% at 30% 16%, rgba(255,255,255,.22), transparent 46%), linear-gradient(150deg,#e7c3a6,#dcae95 38%,#cf92a2 78%,#b56f93)}
.photo.grey{background:linear-gradient(180deg,#ececec,#b5b5ba)}
.nails{position:absolute; top:19%; left:0; right:0; display:flex; justify-content:center; gap:6px; transform:rotate(-8deg)}
.nails i{width:16px; height:36px; border-radius:9px 9px 7px 7px; background:linear-gradient(180deg,#f6a9cd,#e87fb2); box-shadow:inset 0 5px 5px -3px rgba(255,255,255,.85), 0 2px 4px rgba(120,40,80,.35)}
.nails i:nth-child(1){height:27px; transform:translateY(9px) rotate(-13deg)}
.nails i:nth-child(2){height:33px; transform:translateY(2px) rotate(-6deg)}
.nails i:nth-child(4){height:33px; transform:translateY(2px) rotate(6deg)}
.nails i:nth-child(5){height:27px; transform:translateY(9px) rotate(13deg)}
.topbar{position:absolute; top:22px; left:9px; right:9px; display:flex; gap:5px; align-items:center; z-index:6}
.gbtn{width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.28); display:grid; place-items:center; font-size:9px}
.gbtn.brand{background:var(--rose); border-color:transparent; color:#3a0f24}
.gbtn.yring{box-shadow:0 0 0 2px #ffd23a}
.pill{border-radius:999px; background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.28); font-size:7px; font-weight:700; padding:3px 6px}
.pill.brand{background:var(--rose); color:#3a0f24; border-color:transparent}
.sp{flex:1}
.botbar{position:absolute; bottom:11px; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:11px; z-index:6}
.thumbq{position:absolute; left:10px; bottom:11px; width:22px; height:22px; border-radius:6px; border:1.5px solid rgba(255,255,255,.85); background:linear-gradient(150deg,#dcae95,#cf92a2); z-index:6}
.zoom{display:flex; gap:2px; background:rgba(0,0,0,.42); border-radius:999px; padding:3px 4px; font-size:7px; font-weight:700}
.zoom span{padding:1px 4px; border-radius:999px; opacity:.7}
.zoom span.on{background:#fff; color:#000; opacity:1}
.shutter{width:38px; height:38px; border-radius:50%; background:#fff; border:2px solid rgba(255,255,255,.5); box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.shutter.lock{border-color:#39d353; box-shadow:0 0 0 2px #39d353, 0 0 10px #39d353; animation:glow 1.6s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 2px #39d353,0 0 6px #39d353} 50%{box-shadow:0 0 0 2px #39d353,0 0 16px #39d353}}
.sig{position:absolute; right:10px; bottom:14px; width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.28); display:grid; place-items:center; font-size:11px; z-index:6}
.hdr{position:absolute; top:18px; left:9px; right:9px; display:flex; align-items:center; gap:5px; z-index:7}
.hdr .t{font-size:8px; font-weight:700; flex:1}
.toolrow{position:absolute; bottom:10px; left:9px; right:9px; display:flex; gap:4px; z-index:7; overflow:hidden}
.chip{font-size:7px; font-weight:600; padding:4px 7px; border-radius:999px; background:rgba(255,255,255,.14); white-space:nowrap}
.chip.on{background:var(--rose); color:#3a0f24}
.splitline{position:absolute; top:0; bottom:0; left:53%; width:2px; background:#fff; z-index:4; box-shadow:0 0 8px rgba(0,0,0,.4)}
.splitline::after{content:""; position:absolute; top:46%; left:50%; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:50%; background:#fff}
.baw{position:absolute; z-index:4; font-size:7px; font-weight:800; letter-spacing:.05em; padding:2px 6px; border-radius:5px; background:rgba(0,0,0,.55)}
.swrow{position:absolute; bottom:10px; left:9px; right:9px; display:flex; gap:6px; align-items:center; z-index:7}
.sw{width:18px; height:18px; border-radius:50%; border:1px solid rgba(255,255,255,.3); flex:none}
.sw.sel{box-shadow:0 0 0 2px var(--rose); border-color:transparent}
.cropframe{position:absolute; inset:26px 22px; border:2px solid #fff; z-index:5; box-shadow:0 0 0 999px rgba(0,0,0,.45)}
.wm-logo{position:absolute; left:12px; bottom:26px; width:22px; height:22px; border-radius:6px; background:radial-gradient(circle at 35% 30%, #ff9ec7, #d63f92); z-index:5; box-shadow:0 2px 5px rgba(0,0,0,.4)}
.wm-badge{position:absolute; right:10px; bottom:30px; font-size:8px; font-style:normal; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); z-index:5}
.strip-pill{position:absolute; left:9px; top:44px; font-size:7px; font-weight:700; padding:3px 7px; border-radius:999px; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.25); z-index:7}
.collagebox{position:absolute; inset:8px; display:flex; gap:3px; z-index:4}
.collagebox .pane{flex:1; border-radius:8px; position:relative; overflow:hidden; background:linear-gradient(150deg,#e7c3a6,#cf92a2)}
.collagebox .pane.after{background:linear-gradient(150deg,#efceb2,#e79ec2)}
.collagebox .lb{position:absolute; bottom:6px; left:50%; transform:translateX(-50%); font-size:7px; font-weight:800; background:rgba(0,0,0,.55); padding:1px 6px; border-radius:999px}
.cnails{position:absolute; top:26%; left:0; right:0; display:flex; justify-content:center; gap:3px; transform:rotate(-8deg)}
.cnails i{width:9px; height:22px; border-radius:6px; background:linear-gradient(180deg,#f6a9cd,#e87fb2)}
.glow{position:absolute; border-radius:50%; border:2px solid var(--rose); box-shadow:0 0 0 4px rgba(208,53,110,.3), 0 0 18px var(--rose); z-index:8; pointer-events:none; animation:pulse 1.7s ease-in-out infinite}

/* ===== Real photo feed inside every mockup screen — authentic app shots ===== */
.photo .mfeed{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 36%; z-index:0}
.photo:not(.studio)::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.28), transparent 20%, transparent 66%, rgba(0,0,0,.34))}
/* per-feature colour grade — one hand, told through each tool */
.photo.dim .mfeed{filter:brightness(.6) contrast(1.08) saturate(.86)}
.photo.vivid .mfeed{filter:saturate(1.4) contrast(1.1) brightness(1.03)}
.photo.zoomed .mfeed{object-position:50% 30%; transform:scale(1.35)}
/* studio background — hand lifted onto clean studio grey */
.photo.studio{background:radial-gradient(122% 92% at 50% 32%, #f6f5f7, #c0c0c8 80%)}
.photo.studio .mfeed{inset:12px 16px 34px; width:auto; height:auto; border-radius:13px; object-position:50% 30%;
  box-shadow:0 14px 30px -12px rgba(30,20,30,.55), 0 0 0 1px rgba(255,255,255,.6)}
/* compare — single feed, left half desaturated as "before" */
.photo.compare .bfilter{position:absolute; left:0; top:0; bottom:0; width:53%; z-index:2; pointer-events:none;
  backdrop-filter:saturate(.42) brightness(.96); -webkit-backdrop-filter:saturate(.42) brightness(.96)}
/* collage panes carry the real photo, before flat / after vivid */
.collagebox .pane .mfeed{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 34%}
.collagebox .pane:not(.after) .mfeed{filter:saturate(.5) brightness(.98)}
.collagebox .pane.after .mfeed{filter:saturate(1.32) contrast(1.06)}
@media(prefers-reduced-motion:reduce){ .photo.zoomed .mfeed{transform:none} }
@keyframes pulse{0%,100%{transform:scale(.86); opacity:.6} 50%{transform:scale(1.08); opacity:1}}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .btn:hover{transform:none} .panel.on,.glow,.shutter.lock{animation:none} }

/* ==========================================================================
   Feature gallery (home) — visual cards with a live mockup; press "View" to
   expand the card in place into a full detail spread with usage steps
   ========================================================================== */
.gcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(322px,1fr)); gap:16px; margin-top:32px; align-items:start}
.ggroup{grid-column:1 / -1; font-family:var(--serif); font-style:normal; color:var(--gold); font-size:1.12rem; margin:26px 0 2px; padding-bottom:9px; border-bottom:1px solid var(--line)}
.ggroup:first-child{margin-top:0}
.gcard{position:relative; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:18px; display:grid; grid-template-columns:98px 1fr; gap:16px; align-items:center; overflow:hidden; transition:box-shadow .25s, transform .2s, border-color .2s}
.gcard::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%); opacity:0; transition:opacity .3s; pointer-events:none}
.gcard:hover{box-shadow:var(--shadow); transform:translateY(-3px); border-color:color-mix(in srgb,var(--rose) 34%, var(--line))}
.gcard:hover::after{opacity:.5}
.gcard.open{grid-column:1 / -1; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,52px); padding:26px; align-items:center; box-shadow:var(--shadow); transform:none; border-color:color-mix(in srgb,var(--rose) 45%, var(--line))}
.gcard-media{display:grid; place-items:center}
.gcard .device{width:92px; transition:width .35s cubic-bezier(.2,.7,.2,1)}
.gcard.open .device{width:172px}
.gcard-info{min-width:0}
.gtop{display:flex; align-items:baseline; gap:10px; margin-bottom:5px}
.gno{font-family:var(--serif); font-style:normal; color:var(--gold); font-size:1.2rem; font-variant-numeric:tabular-nums}
.gcard h3{font-family:var(--serif); font-weight:500; font-size:clamp(1.14rem,2vw,1.5rem); line-height:1.14; margin:0}
.gdesc{color:var(--ink-soft); font-size:.95rem; margin:0}
.gcard.open .gdesc{color:var(--ink); opacity:.9; font-size:1.02rem}
.gview{margin-top:12px; background:transparent; border:0; padding:0; cursor:pointer; color:var(--rose); font:inherit; font-weight:600; font-size:.86rem; letter-spacing:.02em; display:inline-flex; align-items:center; gap:7px}
.gview .arrowd{transition:transform .25s}
.gcard.open .gview .arrowd{transform:rotate(90deg)}
.lbl-close{display:none}
.gcard.open .lbl-view{display:none}
.gcard.open .lbl-close{display:inline}
.gdetail{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)}
.gcard.open .gdetail{grid-template-rows:1fr; margin-top:14px}
.gdetail-in{overflow:hidden; min-height:0}
.gdetail .steps{max-width:none}
@media (max-width:720px){
  .gcard{grid-template-columns:76px 1fr}
  .gcard.open{grid-template-columns:1fr; justify-items:center; text-align:center}
  .gcard.open .gtop{justify-content:center}
  .gcard.open .gview{justify-content:center}
  .gcard.open .steps li{text-align:left}
  .gcard.open .device{width:150px}
}
@media (prefers-reduced-motion:reduce){ .gdetail,.gcard .device,.gcard,.gcard::after{transition:none} }

/* ==========================================================================
   The Atelier — one framed feature at a time · prev/next · gold couture frame
   (always dark: a framed art piece, dramatic on porcelain or on dark)
   ========================================================================== */
/* ===== Feature gallery — curated salon lookbook (5 picks + view-all) ===== */
.gallery-view[hidden], .atelier[hidden]{display:none}

.feat-gallery{display:grid; gap:16px; grid-template-columns:1fr 1fr; margin-top:30px}
@media(min-width:600px) and (max-width:919px){ .gtile.big{grid-column:1 / -1} }
@media(min-width:920px){
  .feat-gallery{grid-template-columns:1.4fr 1fr 1fr; grid-auto-rows:1fr}
  .gtile.big{grid-column:1; grid-row:1 / span 2}
}

.gtile{position:relative; overflow:hidden; border-radius:20px; border:1px solid var(--line);
  background:var(--card); box-shadow:var(--shadow); padding:16px; cursor:pointer;
  display:flex; flex-direction:column; gap:14px; min-height:216px; isolation:isolate;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s}
.gtile::after{content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(139,52,212,0); transition:box-shadow .35s}
.gtile:hover, .gtile:focus-visible{transform:translateY(-6px); border-color:rgba(139,52,212,.55);
  box-shadow:0 40px 74px -34px rgba(60,20,45,.5); outline:none}
.gtile:hover::after, .gtile:focus-visible::after{box-shadow:inset 0 0 0 1px rgba(139,52,212,.5)}

.gtile-shot{position:relative; flex:1; display:grid; place-items:center; border-radius:14px;
  overflow:hidden; min-height:158px; padding:16px 0;
  background:radial-gradient(130% 110% at 50% -10%, #2a1c2e, #120c17 68%)}
.gtile-shot::before{content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.05) 50%,transparent 58%)}
.gtile.big .gtile-shot{min-height:270px}
.gtile-shot .device{width:112px; box-shadow:0 20px 40px -22px rgba(0,0,0,.7)}
.gtile.big .gtile-shot .device{width:150px}

.gtile-meta{display:flex; flex-direction:column; gap:5px}
.geyebrow{font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); font-weight:700}
.gtitle{font-family:var(--serif); font-weight:500; font-size:1.16rem; line-height:1.08; color:var(--ink); letter-spacing:-.01em}
.gtile.big .gtitle{font-size:1.62rem}
.gdesc{font-size:.86rem; color:var(--ink-soft); line-height:1.5; margin-top:2px}
.gtile-go{margin-top:auto; font-size:.72rem; letter-spacing:.02em; color:var(--rose); font-weight:600;
  display:inline-flex; align-items:center; gap:6px; opacity:.85; transition:gap .3s,opacity .3s}
.gtile-go .arw{transition:transform .3s}
.gtile:hover .gtile-go, .gtile:focus-visible .gtile-go{opacity:1}
.gtile:hover .gtile-go .arw{transform:translateX(4px)}

/* view-all button */
.gallery-cta{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:34px}
.btn-viewall{font-family:var(--serif); font-size:1.06rem; color:var(--ink); background:transparent;
  border:1px solid var(--gold); border-radius:999px; padding:13px 30px; cursor:pointer;
  display:inline-flex; align-items:center; gap:14px; transition:background .35s,color .35s,transform .25s,box-shadow .35s}
.btn-viewall .c{font-family:var(--sans); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.btn-viewall .arw{transition:transform .3s}
.btn-viewall:hover{background:var(--ink); color:var(--card); transform:translateY(-2px); box-shadow:var(--shadow)}
.btn-viewall:hover .c{color:var(--card); opacity:.7}
.btn-viewall:hover .arw{transform:translateX(5px)}
.gallery-hint{font-size:.8rem; color:var(--ink-soft)}

/* collapse back to highlights */
.atelier-back{position:absolute; z-index:5; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.05); border:1px solid var(--ag-gold-soft,rgba(176,107,255,.5)); color:#e9dccb;
  font-size:15px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .3s,transform .2s}
.atelier-back:hover{background:rgba(176,107,255,.18); transform:rotate(90deg)}

@media(prefers-reduced-motion:reduce){
  .gtile,.btn-viewall,.gtile-go .arw,.btn-viewall .arw,.atelier-back{transition:none}
}

.atelier{
  --ag-gold:#b06bff; --ag-gold-soft:rgba(176,107,255,.5); --ag-rose:#ff6fa3;
  --ag-ink:#f4ecef; --ag-muted:#b6a6b0;
  position:relative; margin-top:34px; color:var(--ag-ink); isolation:isolate;
  background:radial-gradient(135% 120% at 16% -12%, #271a29, #100b13 64%);
  border-radius:6px; padding:clamp(30px,4vw,58px);
  box-shadow:0 44px 90px -46px rgba(20,5,20,.8);
}
.atelier::before{content:""; position:absolute; inset:13px; border:1px solid var(--ag-gold-soft); border-radius:2px; pointer-events:none; z-index:2}
.cnr{position:absolute; width:26px; height:26px; border:1.5px solid var(--ag-gold); z-index:3; pointer-events:none}
.cnr.tl{top:7px;left:7px;border-right:0;border-bottom:0}
.cnr.tr{top:7px;right:7px;border-left:0;border-bottom:0}
.cnr.bl{bottom:7px;left:7px;border-right:0;border-top:0}
.cnr.br{bottom:7px;right:7px;border-left:0;border-top:0}

.atelier-stage{position:relative; z-index:1; min-height:440px; display:grid; padding:clamp(6px,2vw,22px)}
.slide{grid-area:1/1; display:none; grid-template-columns:auto 1fr; gap:clamp(26px,5vw,72px); align-items:center}
.slide.on{display:grid; animation:slidein .5s cubic-bezier(.2,.7,.2,1)}
@keyframes slidein{from{opacity:0; transform:translateX(18px)} to{opacity:1; transform:none}}

.slide-media{position:relative; display:grid; place-items:center; padding:8px 0}
.slide-media::before{content:""; position:absolute; width:270px; height:270px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,111,163,.3), rgba(176,107,255,.13) 54%, transparent 72%); filter:blur(4px)}
.slide-media .device{width:188px; position:relative; z-index:1; box-shadow:0 40px 70px -34px rgba(0,0,0,.8), 0 0 0 1px rgba(176,107,255,.22)}

.slide-text{position:relative; min-width:0}
.slide-eyebrow{font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ag-gold)}
.slide-num{position:absolute; top:-26px; right:-4px; font-family:var(--serif); font-style:normal; font-size:clamp(4.6rem,11vw,8.4rem); line-height:.7; color:transparent; -webkit-text-stroke:1px var(--ag-gold-soft); opacity:.55; z-index:0; pointer-events:none}
.slide-h{font-family:var(--serif); font-weight:500; font-size:clamp(1.75rem,3.9vw,2.85rem); line-height:1.05; letter-spacing:-.012em; margin:.14em 0 .32em; position:relative; z-index:1}
.slide-lead{color:var(--ag-muted); font-size:1.05rem; max-width:46ch; margin:0 0 18px; position:relative; z-index:1}
.slide-text .steps{position:relative; z-index:1; max-width:52ch}
.slide-text .steps li{border-top-color:rgba(255,255,255,.1)}
.slide-text .steps li:last-child{border-bottom-color:rgba(255,255,255,.1)}
.slide-text .steps .n{color:var(--ag-gold)}
.slide-text .steps b{color:var(--ag-ink); font-weight:600}
.slide-text .note{color:var(--ag-muted); border-left-color:var(--ag-gold)}

.atelier-foot{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:clamp(16px,3vw,28px); padding-top:18px; border-top:1px solid rgba(176,107,255,.22)}
.atelier-foot .arrows{display:flex; gap:12px}
.aarw{width:48px; height:48px; border-radius:50%; border:1px solid var(--ag-gold-soft); background:transparent; color:var(--ag-ink); font-family:var(--serif); font-size:1.5rem; line-height:0; cursor:pointer; display:grid; place-items:center; transition:background .2s, color .2s, border-color .2s}
.aarw:hover{background:var(--ag-rose); border-color:transparent; color:#2a0a1a}
.aarw:focus-visible{outline:2px solid var(--ag-rose); outline-offset:3px}
.acount{font-family:var(--serif); font-size:1.05rem; letter-spacing:.14em; color:var(--ag-muted); font-variant-numeric:tabular-nums}
.acount b{color:var(--ag-gold); font-style:normal}
.adots{display:flex; gap:7px; align-items:center; flex-wrap:wrap; justify-content:center; max-width:60%}
.adot{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.2); border:0; padding:0; cursor:pointer; transition:width .25s, background .25s}
.adot:hover{background:rgba(255,255,255,.45)}
.adot.on{width:22px; border-radius:4px; background:var(--ag-gold)}

@media (max-width:760px){
  .slide.on{grid-template-columns:1fr; justify-items:center; text-align:center; gap:18px}
  .slide-text .steps li{text-align:left}
  .slide-num{top:-16px; right:auto; left:50%; transform:translateX(-50%)}
  .slide-lead{max-width:100%}
  .atelier-foot{flex-direction:column; gap:14px}
  .adots{max-width:100%}
}
@media (prefers-reduced-motion:reduce){ .slide.on{animation:none} }

/* ---- Real screenshots inside feature tiles & slides ---- */
.shot-img{display:block; height:auto; border-radius:26px; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 70px -34px rgba(0,0,0,.8), 0 0 0 1px rgba(176,107,255,.22); background:#0c090c; position:relative; z-index:1}
.gtile-shot .shot-img{width:112px}
.gtile.big .gtile-shot .shot-img{width:150px}
.slide-media .shot-img{width:188px}
@media(max-width:820px){ .slide-media .shot-img{width:168px} }
.hero-shot{width:clamp(240px,30vw,300px); margin:0 auto; border-radius:38px;
  box-shadow:0 46px 90px -40px rgba(20,5,20,.75); border:1px solid rgba(176,107,255,.25)}