:root{
    --paper:#FCF9F8;
    --sheet:#F0EDED;
    --raised:#FFFFFF;
    --ink:#1F1D1C;
    --muted:#6B615F;
    --faint:#A79E9B;
    --rule:#E6E1DF;
    --gold:#FED65B;
    --gold-deep:#6B5400;
    --gold-wash:#FFF6DC;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --paper:#141210;
      --sheet:#1D1A18;
      --raised:#221E1B;
      --ink:#F5F1EE;
      --muted:#A79C97;
      --faint:#79706C;
      --rule:#2F2926;
      --gold:#FED65B;
      --gold-deep:#FEE698;
      --gold-wash:#2A2313;
    }
  }
  :root[data-theme="dark"]{
    --paper:#141210;
    --sheet:#1D1A18;
    --raised:#221E1B;
    --ink:#F5F1EE;
    --muted:#A79C97;
    --faint:#79706C;
    --rule:#2F2926;
    --gold:#FED65B;
    --gold-deep:#FEE698;
    --gold-wash:#2A2313;
  }

  *{box-sizing:border-box}

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:Inter,"Noto Sans SC",ui-sans-serif,system-ui,"PingFang SC",sans-serif;
    font-size:16px;
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  .shell{max-width:1180px;margin:0 auto;padding:0 32px}

  .serif{font-family:"Playfair Display","Noto Serif SC",ui-serif,Georgia,serif}
  .label{
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--faint);font-weight:500;
  }

  a{color:inherit}
  a:focus-visible,button:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}

  /* ---------- nav ---------- */
  nav{
    position:sticky;top:0;z-index:50;
    background:color-mix(in srgb,var(--paper) 88%,transparent);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--rule);
  }
  .nav-in{
    max-width:1180px;margin:0 auto;padding:16px 32px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
  }
  .wordmark{
    font-family:"Playfair Display",serif;font-weight:600;font-size:23px;
    letter-spacing:.03em;
  }
  .nav-links{display:flex;gap:30px;font-size:14px;color:var(--muted)}
  .nav-links a{text-decoration:none}
  .nav-links a:hover{color:var(--ink)}
  @media (max-width:760px){.nav-links{display:none}}

  .btn{
    display:inline-block;background:var(--gold);color:#2D2405;
    font-weight:700;font-size:14px;letter-spacing:.02em;
    padding:11px 22px;border-radius:2px;text-decoration:none;
    border:1px solid transparent;
    transition:transform .18s ease;
  }
  .btn:hover{transform:translateY(-1px)}
  .btn-ghost{
    background:transparent;color:var(--ink);border-color:var(--ink);
  }

  /* ---------- hero ---------- */
  header.hero{position:relative;padding:104px 0 88px;overflow:hidden}
  .hero-grid{
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:48px;align-items:center;
  }
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;gap:56px}
    header.hero{padding:72px 0 64px}
  }

  .hero-copy{display:flex;flex-direction:column;gap:26px;max-width:560px}

  .gold-rule{height:2px;background:var(--gold);width:0;animation:draw 1.1s .15s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes draw{to{width:78px}}

  h1{
    font-family:"Noto Serif SC","Playfair Display",serif;
    font-weight:600;
    font-size:clamp(46px,7.2vw,88px);
    line-height:1.06;
    letter-spacing:-.01em;
    margin:0;
    text-wrap:balance;
  }
  /* Playfair has no CJK glyphs, so italic here would be a synthesised oblique.
     The emphasis is carried by colour and a hairline instead. */
  h1 em{
    font-style:normal;
    color:var(--gold-deep);
    box-shadow:inset 0 -.12em 0 var(--gold);
  }

  .hero-sub{font-size:17.5px;color:var(--muted);margin:0;max-width:44ch}
  .hero-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:6px}
  .hero-note{font-size:13px;color:var(--faint)}

  /* floating garments */
  .float-stage{position:relative;height:520px}
  @media (max-width:900px){.float-stage{height:400px}}
  .float{
    position:absolute;
    filter:drop-shadow(0 22px 34px rgba(31,29,28,.13));
    animation:drift var(--dur,17s) ease-in-out infinite alternate;
  }
  .float img{display:block;width:100%;height:auto}
  @keyframes drift{
    from{transform:translate3d(0,0,0) rotate(var(--rot,0deg))}
    to{transform:translate3d(0,var(--dy,-13px),0) rotate(var(--rot2,0deg))}
  }
  .f1{width:45%;left:1%;top:8%;--dur:19s;--dy:-15px;--rot:-3deg;--rot2:-1.4deg}
  .f2{width:30%;right:8%;top:0%;--dur:15s;--dy:11px;--rot:2.5deg;--rot2:.6deg}
  .f3{width:36%;left:26%;bottom:2%;--dur:21s;--dy:-10px;--rot:1.5deg;--rot2:3deg}

  /* ---------- generic section ---------- */
  section{padding:96px 0}
  .sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:48px;max-width:640px}
  h2{
    font-family:"Noto Serif SC","Playfair Display",serif;
    font-weight:600;font-size:clamp(30px,4vw,44px);line-height:1.2;
    margin:0;letter-spacing:-.005em;text-wrap:balance;
  }
  .sec-head p{margin:0;color:var(--muted);font-size:17px;max-width:52ch}

  /* ---------- steps ---------- */
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
  .step{background:var(--paper);padding:34px 28px;display:flex;flex-direction:column;gap:12px}
  .step-n{
    font-family:"Playfair Display",serif;font-size:15px;font-weight:600;
    color:var(--gold-deep);letter-spacing:.1em;
  }
  .step h3{margin:0;font-size:19px;font-weight:700;font-family:Inter,"Noto Sans SC",sans-serif}
  .step p{margin:0;font-size:15px;color:var(--muted)}

  /* ---------- contact sheet ---------- */
  .sheet-band{background:var(--sheet);padding:88px 0}
  .sheet-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:26px;align-items:center;
  }
  .sheet-cell{
    aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:12px;
  }
  .sheet-cell img{max-width:100%;max-height:100%;display:block;
    filter:drop-shadow(0 10px 18px rgba(31,29,28,.10))}
  .sheet-caption{
    display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
    margin-top:44px;padding-top:22px;border-top:1px solid var(--rule);
    font-size:13.5px;color:var(--muted);
  }

  /* ---------- review ---------- */
  .review-wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center}
  @media (max-width:900px){.review-wrap{grid-template-columns:1fr;gap:36px}}

  .score-card{
    background:var(--raised);border:1px solid var(--rule);padding:34px;
    display:flex;flex-direction:column;gap:22px;
  }
  .score-top{display:flex;align-items:baseline;gap:14px}
  .score-num{
    font-family:"Playfair Display",serif;font-weight:600;font-size:72px;line-height:1;
    font-variant-numeric:tabular-nums;
  }
  .score-of{font-size:15px;color:var(--faint)}
  .score-tag{
    margin-left:auto;background:var(--gold-wash);color:var(--gold-deep);
    font-size:12px;font-weight:700;letter-spacing:.08em;padding:5px 11px;
  }
  .dims{display:flex;flex-direction:column;gap:13px}
  .dim{display:grid;grid-template-columns:68px 1fr 34px;gap:14px;align-items:center;font-size:14px}
  .dim-name{color:var(--muted)}
  .bar{height:3px;background:var(--rule);position:relative;overflow:hidden}
  .bar span{position:absolute;inset:0 auto 0 0;background:var(--ink);width:var(--w)}
  .dim-v{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
  .review-quote{
    font-family:"Noto Serif SC","Playfair Display",serif;font-size:20px;line-height:1.65;
    margin:0;
  }
  .review-list{margin:22px 0 0;padding-left:18px;color:var(--muted);font-size:15.5px;display:flex;flex-direction:column;gap:8px}

  /* ---------- privacy ---------- */
  .privacy{background:var(--ink);color:var(--paper);padding:96px 0}
  .privacy h2{color:var(--paper)}
  .privacy .sec-head p{color:color-mix(in srgb,var(--paper) 68%,transparent)}
  .privacy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:38px;margin-top:12px}
  .privacy-item{display:flex;flex-direction:column;gap:9px}
  .privacy-item h3{margin:0;font-size:16px;font-weight:700;font-family:Inter,"Noto Sans SC",sans-serif}
  .privacy-item p{margin:0;font-size:15px;color:color-mix(in srgb,var(--paper) 62%,transparent)}
  .privacy-item .tick{color:var(--gold);font-size:19px;line-height:1}

  /* ---------- pricing ---------- */
  .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
  .plan{border:1px solid var(--rule);padding:30px 26px;display:flex;flex-direction:column;gap:16px;background:var(--raised)}
  .plan.feature{border-color:var(--ink)}
  .plan h3{margin:0;font-size:15px;font-weight:700;letter-spacing:.04em;font-family:Inter,"Noto Sans SC",sans-serif}
  .plan .amount{font-family:"Playfair Display",serif;font-size:40px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
  .plan .per{font-size:14px;color:var(--muted)}
  .plan ul{margin:0;padding-left:17px;font-size:14.5px;color:var(--muted);display:flex;flex-direction:column;gap:6px}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--rule);padding:52px 0 64px}
  .foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
  .foot-links{display:flex;gap:26px;font-size:14px;color:var(--muted);flex-wrap:wrap}
  .foot-links a{text-decoration:none}
  .foot-links a:hover{color:var(--ink)}
  .foot-note{font-size:13px;color:var(--faint);max-width:38ch}

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .gold-rule{width:78px}
  }