/* Smooth cross-page fade (home ⇄ product) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root){ animation-duration:.32s; animation-timing-function:ease; }
  @media (prefers-reduced-motion: reduce){
    ::view-transition-old(root),::view-transition-new(root){ animation-duration:.01ms; }
  }

  :root{
    --ink:#14110c;
    --body:#4a463f;
    --muted:#6f6a61;
    --line:#e9e5dd;
    --bg:#ffffff;
    --bg-soft:#faf8f4;
    --maxw:1120px;
    --radius:18px;
    --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --serif:"Fraunces","Iowan Old Style",Georgia,serif;
    /* product accents */
    --gold-orange:#EE8F06;
    --spa:#0E9488;
    --socr:#14524E;
    --socr-gold:#BC8430;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--bg);color:var(--body);
    font-family:var(--font);font-size:17px;line-height:1.6;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  }
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  h1,h2,h3{color:var(--ink);margin:0;line-height:1.08;letter-spacing:-.02em}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.98rem;
    padding:.72em 1.25em;border-radius:999px;cursor:pointer;border:1px solid transparent;
    transition:transform .18s ease,background .18s ease,box-shadow .18s ease,border-color .18s ease}
  .btn-primary{background:var(--ink);color:#fff}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px -14px rgba(20,17,12,.6)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
  .arr{transition:transform .18s ease}
  a:hover .arr, .btn:hover .arr{transform:translateX(3px)}

  /* ---------- header ---------- */
  .site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.4) blur(9px);
    background:rgba(255,255,255,.82);border-bottom:1px solid var(--line)}
  .site-header .wrap{display:flex;align-items:center;gap:20px;height:66px}
  .brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.01em;color:var(--ink);font-size:1.12rem}
  .brand .mk{width:26px;height:26px;border-radius:7px;flex:none}
  .site-header nav{margin-left:auto;display:flex;align-items:center;gap:26px}
  .navlink{color:var(--muted);font-weight:500;font-size:.95rem;transition:color .15s}
  .navlink:hover{color:var(--ink)}
  @media(max-width:720px){.navlink{display:none}}

  /* ---------- hero ---------- */
  .hero{padding:72px 0 44px;background:
      radial-gradient(80% 120% at 100% 0%, #fff6e8 0%, transparent 46%),
      radial-gradient(70% 120% at 0% 0%, #e9f5f3 0%, transparent 42%)}
  .eyebrow{display:inline-flex;align-items:center;gap:.55em;color:var(--muted);font-weight:600;
    font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px}
  .eyebrow .dot{width:7px;height:7px;border-radius:50%;
    background:linear-gradient(90deg,var(--gold-orange),var(--spa),var(--socr))}
  .hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.5rem,6vw,4.2rem);max-width:16ch;letter-spacing:-.015em}
  .hero h1 em{font-style:italic;color:var(--gold-orange)}
  .hero p.lede{margin:24px 0 0;font-size:1.2rem;color:var(--muted);max-width:56ch}

  /* ---------- products ---------- */
  .products{padding:20px 0 40px}
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
  @media(max-width:900px){.grid{grid-template-columns:1fr}}

  .card{position:relative;display:flex;flex-direction:column;background:var(--bg);
    border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px 26px;overflow:hidden;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
  .card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--accent)}
  .card:hover{transform:translateY(-4px);box-shadow:0 26px 60px -34px rgba(20,17,12,.4);border-color:transparent}
  .card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none;
    background:var(--accent-soft);color:var(--accent);margin-bottom:20px}
  .card .ic svg{width:24px;height:24px}
  .card h3{font-size:1.5rem;display:flex;align-items:center;gap:.5em}
  .card .pill{font-size:.64rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--accent);background:var(--accent-soft);padding:.32em .6em;border-radius:999px}
  .card .tag{margin:8px 0 0;font-weight:600;color:var(--accent-ink);font-size:.98rem}
  .card p.desc{margin:14px 0 0;color:var(--muted);font-size:1rem}
  .card ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
  .card li{position:relative;padding-left:24px;font-size:.95rem;color:var(--body)}
  .card li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:3px;
    background:var(--accent);opacity:.85}
  .card .go{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;font-weight:600;color:var(--accent-ink)}
  .card .go .cta{display:inline-flex;align-items:center;gap:.45em}

  .g-goldmine{--accent:var(--gold-orange);--accent-soft:#fff4e2;--accent-ink:#a9620a}
  .g-spa{--accent:var(--spa);--accent-soft:#e2f3f1;--accent-ink:#0b6f66}
  .g-socr{--accent:var(--socr);--accent-soft:#e6efed;--accent-ink:#14524E}

  /* ---------- studio strip ---------- */
  .strip{padding:56px 0 84px}
  .strip-in{background:var(--bg-soft);border:1px solid var(--line);border-radius:22px;
    padding:40px 44px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
  .strip-in h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,3vw,2.1rem)}
  .strip-in p{margin:12px 0 0;color:var(--muted);max-width:52ch}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line);padding:30px 0 46px}
  .foot-in{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
  .foot-in nav{display:flex;align-items:center;gap:22px}
  .foot-in a{color:var(--muted);font-size:.92rem;font-weight:500;display:inline-flex;align-items:center;gap:.4em}
  .foot-in a:hover{color:var(--ink)}
  .foot-in a svg{width:16px;height:16px}
  .copyright{color:var(--muted);font-size:.86rem}