/* ==========================================================================
   Persona Commerce · Premium layer (homepage)
   Loaded after home-redesign.css. Only overrides visual tokens and styling;
   markup, scripts and behaviour are untouched.
   Direction: warm ivory paper, ink-black actions, one champagne accent,
   serif display type, hairline structure, calm motion.
   ========================================================================== */
@font-face{font-family:PremiumSerif;src:url(assets/premium-serif-sc.woff2) format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:PremiumSerifFull;src:url(assets/notoserifsc-poster.woff2) format('woff2');font-weight:200 900;font-display:swap}

:root{
  --bg:#F4F1EB; --card:#FBFAF7; --ink:#1A1815; --ink-2:#6B665E; --line:#E2DCD1;
  --hot:#1A1815; --hot-deep:#0E0D0B; --sticker:#B08D57; --night:#14120F;
  --gold:#B08D57; --gold-soft:#E9DFCC; --stone:#ECE6DB;
  --r-lg:26px; --r-md:18px;
  --serif:"PremiumSerif","PremiumSerifFull","Noto Serif SC","Songti SC","STSong",serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
body{background:var(--bg);color:var(--ink);letter-spacing:.01em}
::selection{background:var(--gold-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif)!important;font-weight:600;letter-spacing:-.015em}
.brand{font-family:var(--serif)!important;font-weight:600;font-size:26px;letter-spacing:-.01em;font-stretch:normal}
.brand i{color:var(--gold)}
.btn{font-family:"CommerceSans","PingFang SC","Microsoft YaHei",sans-serif!important}

/* ---------- nav ---------- */
header{background:rgba(244,241,235,.82);backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid transparent;transition:border-color .3s}
header:hover{border-bottom-color:var(--line)}
.nav nav a{font-size:14px;letter-spacing:.06em;color:var(--ink-2)}
.nav nav a:hover{color:var(--ink)}
.nav .login{font-weight:500;font-size:14px;letter-spacing:.04em}

/* ---------- buttons & chips ---------- */
.btn{height:52px;padding:0 30px;font-size:15px;font-weight:600;letter-spacing:.08em;transition:transform .3s var(--ease),background-color .3s,color .3s,box-shadow .3s,border-color .3s}
.btn-hot,.btn-hot:where(*){background:var(--ink)!important;color:#F7F3EC;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 12px 28px -18px rgba(20,18,15,.7)}
.btn-hot:hover{background:#000!important;transform:translateY(-1px);box-shadow:0 18px 36px -20px rgba(20,18,15,.8)}
.btn-hot::after{content:"→";font-weight:400;margin-left:2px;transition:transform .3s var(--ease)}
.btn-hot:hover::after{transform:translateX(3px)}
.nav .btn-hot::after{display:none}
.btn-ghost{background:transparent;border:1px solid rgba(26,24,21,.28);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:#F7F3EC}
.nav .btn{height:40px;font-size:13px;padding:0 20px}
.chip{border:1px solid var(--line);background:transparent;font-size:13px;letter-spacing:.04em;color:var(--ink-2);padding:3px 13px}

/* stickers become quiet editorial eyebrows */
.sticker{transform:none!important;box-shadow:none;background:transparent;color:var(--ink-2);font:500 12px/1.4 "CommerceSans","PingFang SC",sans-serif!important;letter-spacing:.22em;padding:0;border-radius:0;display:inline-flex;align-items:center;gap:10px}
.sticker::before{content:"";width:28px;height:1px;background:var(--gold)}

/* ---------- hero ---------- */
.hero{padding:72px 0 112px;position:relative}
.hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:62vw;height:62vw;max-width:880px;max-height:880px;border-radius:50%;background:radial-gradient(closest-side,rgba(176,141,87,.16),rgba(176,141,87,0));pointer-events:none}
.hero h1{font-size:clamp(44px,5.6vw,84px);line-height:1.16;font-weight:600;margin-top:28px}
.hero h1 .mark::after{height:1px;bottom:.02em;background:var(--gold);transform:none;border-radius:0;left:0;right:0}
.hero h1 .hot{color:var(--gold)}
.lede{font-size:17px;line-height:1.95;max-width:28em;margin:30px 0 40px}
.fit{border-top-color:var(--line);font-size:13px;letter-spacing:.04em}
.fit b{font-weight:500;color:var(--ink-2);letter-spacing:.16em}

/* collage: calmer angles, softer depth */
.phone{transform:rotate(0);border-radius:46px;background:#0F0E0C;padding:10px;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 60px 90px -40px rgba(20,18,15,.55),0 20px 40px -30px rgba(20,18,15,.4)}
.side{border-radius:20px;box-shadow:0 40px 70px -40px rgba(20,18,15,.55);outline:1px solid rgba(255,255,255,.35);outline-offset:-1px}
.side.a{transform:rotate(-4deg)}
.side.b{transform:rotate(3deg)}
.collage .sticker{background:rgba(251,250,247,.86);backdrop-filter:blur(10px);padding:8px 14px;border-radius:999px;color:var(--ink);letter-spacing:.16em;box-shadow:0 10px 30px -18px rgba(20,18,15,.5)}
.collage .sticker::before{width:6px;height:6px;border-radius:50%}
.live{background:rgba(15,14,12,.62)!important;backdrop-filter:blur(8px);font-weight:500;letter-spacing:.12em;border:1px solid rgba(255,255,255,.14)}
.live::before{background:var(--gold)}
.shots span.on{background:#F7F3EC}
.spec{background:rgba(251,250,247,.94);backdrop-filter:blur(10px)}
.ref{letter-spacing:.06em}
@media (prefers-reduced-motion:no-preference){
  @keyframes pop{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes inl{from{opacity:0;transform:rotate(-8deg) translateX(-30px)}to{opacity:1;transform:rotate(-4deg)}}
  @keyframes inr{from{opacity:0;transform:rotate(7deg) translateX(30px)}to{opacity:1;transform:rotate(3deg)}}
}

/* ---------- marquee ---------- */
.band,.btn-hot.band{background:var(--night)!important;box-shadow:none;border-block:1px solid rgba(255,255,255,.04)}
.band .row{font:500 14px/1 "CommerceSans","PingFang SC",sans-serif;letter-spacing:.32em;padding:22px 0;gap:56px;color:#E9E2D5}
.band .row span::after{width:5px;height:5px;background:var(--gold);margin-left:56px}

/* ---------- section heads ---------- */
.tools,.wall{padding-top:128px}
.sec-h{margin-bottom:56px}
.sec-h h2{font-size:clamp(34px,3.9vw,56px);line-height:1.2;font-weight:600}
.sec-h p{font-size:16px;letter-spacing:.02em}

/* ---------- bento ---------- */
.bento{gap:18px}
.tile{border:1px solid var(--line);background:var(--card);border-radius:var(--r-lg);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
.tile:hover{transform:translateY(-3px);box-shadow:0 40px 70px -48px rgba(20,18,15,.45);border-color:#D6CEC0}
.tile .media img,.tile .media video{transition:transform 1.2s var(--ease)}
.tile:hover .media img,.tile:hover .media video{transform:scale(1.03)}
.tile h3{font-weight:600;font-size:28px;letter-spacing:-.01em}
.tile p{font-size:15px;line-height:1.85}
.tile .go,.t1 .go{color:var(--ink)!important;font-weight:600;font-size:14px;letter-spacing:.14em;display:inline-flex;align-items:center;gap:10px}
.tile .go::after{content:"";width:24px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.tile:hover .go::after{width:44px}
.tile .ref-tag{background:rgba(15,14,12,.5);backdrop-filter:blur(8px);letter-spacing:.1em;font-size:11px;border:1px solid rgba(255,255,255,.14)}
.t1{background:var(--night);border-color:var(--night)}
.t1 .go{color:#F1EADD!important}
.t1 h3{font-size:clamp(32px,3.1vw,44px)}
.t1 .chip{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.82)}
.opt small{font-weight:500;letter-spacing:.18em;color:rgba(233,226,213,.55)}
.t3{background:var(--stone);border-color:var(--line)}
.t3 p{color:var(--ink-2)}
.t4{background:var(--card)}
.t4 .steps-mini{font-weight:500;font-size:14px;color:var(--ink-2)}
.t4 .steps-mini span{background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--ink)}
.t4 .sticker{margin-bottom:4px}

/* ---------- wall ---------- */
.shot{border-radius:20px}
.shot span{background:rgba(251,250,247,.9);backdrop-filter:blur(8px);font-weight:500;font-size:12px;letter-spacing:.08em}
.shot:focus-visible{outline-color:var(--gold)}
.motion-control{border-color:var(--line);background:transparent;letter-spacing:.06em}

/* ---------- steps ---------- */
.how{padding:128px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px 36px 44px}
.card::before{font-family:var(--serif);font-weight:300;font-stretch:normal;font-size:52px;color:var(--gold);margin-bottom:36px;letter-spacing:-.02em}
.card h3{font-size:24px;font-weight:600}
.card:nth-child(3){background:var(--night)}
.card:nth-child(3)::before{color:var(--gold)}
.card .sticker{transform:none!important;margin-top:auto;padding-top:28px;color:#D9CDB6}

/* ---------- final CTA ---------- */
.final,.btn-hot.final{background:var(--night)!important;padding:136px 0;isolation:isolate}
.final::before{content:"";position:absolute;inset:auto -10% -40% auto;width:70vw;height:70vw;max-width:1000px;max-height:1000px;border-radius:50%;background:radial-gradient(closest-side,rgba(176,141,87,.22),transparent);z-index:-1}
.final h2{font-size:clamp(40px,5.2vw,84px);line-height:1.18;color:#F4EEE3}
.final p{color:rgba(233,226,213,.7);font-size:17px}
.final .btn{background:#F4EEE3;color:var(--ink);height:56px;font-size:15px}
.final .btn::after{content:"→";margin-left:2px}
.final .btn:hover{background:var(--gold);color:#fff}
.final-art img{border:1px solid rgba(255,255,255,.14);border-radius:20px;box-shadow:0 50px 80px -40px rgba(0,0,0,.8)}
.final-art img:first-child{transform:rotate(-4deg)}
.final-art img:last-child{transform:rotate(3deg)}

footer{background:#0F0E0C;color:#8C867B;letter-spacing:.02em}
.foot{border-top:1px solid rgba(255,255,255,.06)}

@media (max-width:960px){
  .hero{padding:32px 0 64px}
  .hero::before{width:120vw;height:120vw}
  .tools,.wall{padding-top:88px}.how{padding:88px 0}
  .band .row{font-size:12px;padding:16px 0}
  .final{padding:88px 0 128px}
  .mbar .btn{box-shadow:0 18px 40px -16px rgba(20,18,15,.6)}
}