:root{
    --bg:#050608;
    --bg-rgb:5,6,8;
    --teal:#5eead4;
    --teal-dim:#2f7d6c;
    --purple:#a78bfa;
    --purple-dim:#5b4b9e;
    --text:#f4f6f8;
    --text-rgb:244,246,248;
    --muted:rgba(244,246,248,0.56);
    --line:rgba(244,246,248,0.12);
    --line-soft:rgba(244,246,248,0.07);
    --panel-bg:rgba(8,7,13,0.55);
    --price:#f2c65c;
    --btn-text:#050608;
    --glass-bg:rgba(255,255,255,0.045);
    --glass-bg-strong:rgba(16,14,26,0.62);
    --glass-border:rgba(255,255,255,0.10);
    --glass-highlight:rgba(255,255,255,0.14);
    --glass-sheen:rgba(255,255,255,0.06);
    --glass-shadow:0 24px 60px -28px rgba(0,0,0,0.75);
    --glass-blur:blur(18px) saturate(160%);
    color-scheme:dark;
  }
  :root[data-theme="light"]{
    --bg:#f6f5f1;
    --bg-rgb:246,245,241;
    --teal:#0e8f80;
    --teal-dim:#0b6a5f;
    --purple:#6d4fd6;
    --purple-dim:#4d379e;
    --text:#16161c;
    --text-rgb:22,22,28;
    --muted:rgba(22,22,28,0.6);
    --line:rgba(22,22,28,0.13);
    --line-soft:rgba(22,22,28,0.08);
    --panel-bg:rgba(255,255,255,0.72);
    --price:#a9720c;
    --btn-text:#ffffff;
    --glass-bg:rgba(255,255,255,0.52);
    --glass-bg-strong:rgba(255,255,255,0.78);
    --glass-border:rgba(255,255,255,0.85);
    --glass-highlight:rgba(255,255,255,0.95);
    --glass-sheen:rgba(255,255,255,0.5);
    --glass-shadow:0 22px 50px -26px rgba(52,40,110,0.3), 0 1px 2px rgba(22,22,28,0.05);
    --glass-blur:blur(18px) saturate(170%);
    color-scheme:light;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  /* component display rules (flex/grid) would otherwise override the hidden attribute */
  [hidden]{ display:none !important; }
  html,body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
    overflow-y:auto;
    width:100%;
    min-height:100%;
  }
  .grid3 .card, .gem-card, footer, .contact-btn, .hero-btn, .theme-toggle{
    transition:background-color .35s ease, color .35s ease, border-color .35s ease;
  }
  ::selection{ background:var(--purple); color:#000; }

  /* ---------- glass surfaces (frosted panels used across the site) ---------- */
  .glass, .glass-panel{
    background:linear-gradient(135deg, var(--glass-sheen), transparent 42%), var(--glass-bg);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-border);
    box-shadow:inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
  }
  .glass-panel{ border-radius:26px; }

  /* ---------- backdrop ---------- */
  .backdrop{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(ellipse 70% 55% at 50% 8%, rgba(94,234,212,0.16), transparent 60%),
      radial-gradient(ellipse 60% 45% at 50% 68%, rgba(167,139,250,0.14), transparent 65%),
      radial-gradient(ellipse 120% 90% at 50% 50%, #0a0d10 0%, #050608 70%);
  }
  :root[data-theme="light"] .backdrop{
    background:
      radial-gradient(ellipse 70% 55% at 50% 8%, rgba(14,143,128,0.14), transparent 60%),
      radial-gradient(ellipse 60% 45% at 50% 68%, rgba(109,79,214,0.12), transparent 65%),
      radial-gradient(ellipse 120% 90% at 50% 50%, #fcfbf8 0%, #ece9e2 70%);
  }
  .grain{
    position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.03; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }


  /* ---------- site-wide backdrop: aurora fields, stars and the zodiac wheel (partials/backdrop.html) ---------- */
  .aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  .aurora span{ position:absolute; width:62vmax; height:62vmax; border-radius:50%; }
  .aurora span:nth-child(1){
    top:-22vmax; left:-18vmax;
    background:radial-gradient(circle, rgba(167,139,250,0.30), transparent 62%);
    animation:auroraDriftA 24s ease-in-out infinite alternate;
  }
  .aurora span:nth-child(2){
    bottom:-26vmax; right:-20vmax;
    background:radial-gradient(circle, rgba(94,234,212,0.24), transparent 62%);
    animation:auroraDriftB 30s ease-in-out infinite alternate;
  }
  .aurora span:nth-child(3){
    top:30%; left:40%; width:40vmax; height:40vmax;
    background:radial-gradient(circle, color-mix(in srgb, var(--glow, #f2c65c) 22%, transparent), transparent 62%);
    animation:auroraDriftA 36s ease-in-out infinite alternate-reverse;
  }
  :root[data-theme="light"] .aurora span:nth-child(1){ background:radial-gradient(circle, rgba(109,79,214,0.22), transparent 62%); }
  :root[data-theme="light"] .aurora span:nth-child(2){ background:radial-gradient(circle, rgba(14,143,128,0.2), transparent 62%); }
  @keyframes auroraDriftA{ to{ transform:translate(14vmax, 12vmax) scale(1.12); } }
  @keyframes auroraDriftB{ to{ transform:translate(-12vmax, -10vmax) scale(1.18); } }

  .stars-layer.backdrop-stars{ position:fixed; }

  .zodiac-wheel{
    position:fixed; z-index:0; pointer-events:none;
    top:50%; left:50%; width:min(118vmin, 1080px); height:min(118vmin, 1080px);
    margin:calc(min(118vmin, 1080px) / -2) 0 0 calc(min(118vmin, 1080px) / -2);
    color:var(--text); opacity:0.1;
    animation:spin 260s linear infinite;
    transition:opacity .8s ease;
  }
  .zodiac-wheel circle, .zodiac-wheel line{ fill:none; stroke:currentColor; stroke-width:0.6; }
  .zodiac-wheel text{
    fill:currentColor; font-size:15px; text-anchor:middle; dominant-baseline:central;
    transition:fill .6s ease, font-size .6s ease;
  }
  .zodiac-wheel text.is-lit{ fill:var(--teal); font-size:22px; }
  .has-lit-sign .zodiac-wheel{ opacity:0.2; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){
    .aurora span, .zodiac-wheel{ animation:none !important; }
  }

  canvas#scene{ position:fixed; inset:0; z-index:2; display:block; }
  canvas#scene{ transition:opacity .2s linear; }

  #planet-labels{ position:fixed; inset:0; z-index:3; pointer-events:none; display:none; }
  .planet-label{
    position:absolute; top:0; left:0; opacity:0;
    display:flex; align-items:center; gap:7px;
    font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
    white-space:nowrap; transition:opacity .4s ease;
  }
  .planet-label .dot{ width:3.5px; height:3.5px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor; flex-shrink:0; transition:box-shadow .35s ease, width .35s ease, height .35s ease; }
  .planet-label .name{ opacity:0.68; transition:opacity .35s ease, letter-spacing .35s ease; }
  .planet-label .tag{
    color:rgba(var(--text-rgb),0.44); font-size:9.5px; letter-spacing:0.06em;
    max-width:0; overflow:hidden; opacity:0; white-space:nowrap;
    transition:max-width .45s ease, opacity .35s ease .05s;
  }
  .planet-label.is-active .name{ opacity:1; letter-spacing:0.13em; }
  .planet-label.is-active .tag{ max-width:160px; opacity:1; }
  .planet-label.is-active .dot{ width:5px; height:5px; box-shadow:0 0 12px currentColor; }
  @media (max-width:760px){ .planet-label{ font-size:9px; } .planet-label .tag{ font-size:8.5px; } }

  #planet-info{
    position:fixed; right:44px; bottom:120px; z-index:12;
    max-width:280px; padding:22px 24px;
    background:var(--panel-bg); backdrop-filter:blur(14px) saturate(140%);
    border:1px solid var(--line); border-radius:3px;
    opacity:0; transform:translateY(14px); pointer-events:none;
    transition:opacity .5s ease, transform .5s ease;
  }
  #planet-info.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  #planet-info .pi-eyebrow{ font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; opacity:0.55; margin-bottom:8px; }
  #planet-info .pi-name{ font-family:'Space Grotesk', sans-serif; font-weight:400; font-size:22px; margin-bottom:6px; }
  #planet-info .pi-gem{ font-size:12.5px; letter-spacing:0.03em; margin-bottom:12px; opacity:0.85; }
  #planet-info .pi-desc{ font-size:13px; line-height:1.6; color:var(--muted); }
  #planet-info .pi-close{
    position:absolute; top:14px; right:16px; width:20px; height:20px;
    display:flex; align-items:center; justify-content:center;
    color:var(--muted); cursor:pointer; font-size:14px; line-height:1;
    background:none; border:none; padding:0; font-family:inherit;
  }
  #planet-info .pi-close:hover{ color:var(--text); }
  @media (max-width:760px){ #planet-info{ right:20px; left:20px; bottom:100px; max-width:none; } }

  .hero-text{ will-change:transform, opacity; }

  /* ---------- nav ---------- */
  header{
    position:fixed; top:14px; left:0; right:0; z-index:10;
    padding:0 20px; pointer-events:none;
  }
  .header-inner{
    pointer-events:auto; max-width:1240px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:9px 10px 9px 22px; border-radius:999px;
    border:1px solid transparent;
    transition:background .4s ease, border-color .4s ease, box-shadow .4s ease;
  }
  header.is-scrolled .header-inner, .subpage header .header-inner{
    background:linear-gradient(135deg, var(--glass-sheen), transparent 42%), var(--glass-bg-strong);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    border-color:var(--glass-border);
    box-shadow:inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
  }
  a.brand{ color:inherit; text-decoration:none; }
  .brand{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:17px; letter-spacing:0.02em;}
  .brand svg{ width:18px; height:18px; opacity:0.9; }
  nav.links{ display:flex; gap:30px; }
  nav.links a{
    position:relative; color:var(--muted); text-decoration:none; font-size:14px; font-weight:400;
    letter-spacing:0.01em; transition:color 0.25s ease; padding-bottom:2px;
  }
  nav.links a::after{
    content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--teal);
    transition:right .3s cubic-bezier(.4,0,.2,1);
  }
  nav.links a:hover{ color:var(--text); }
  nav.links a:hover::after{ right:0; }
  .contact-btn{
    display:flex; align-items:center; gap:10px;
    border:none; padding:10px 18px;
    font-size:13.5px; font-weight:500; color:var(--btn-text); text-decoration:none;
    border-radius:999px; transition:filter 0.25s ease, box-shadow 0.25s ease;
    font-family:'Inter', sans-serif;
    background:linear-gradient(90deg, var(--teal), var(--purple));
    box-shadow:0 6px 22px -8px rgba(167,139,250,0.7);
  }
  .contact-btn:hover{ filter:brightness(1.08); box-shadow:0 8px 28px -8px rgba(167,139,250,0.9); }
  .contact-btn::after{ content:''; width:5px; height:5px; border-radius:50%; background:var(--btn-text); opacity:0.7; animation:dotPulse 2.6s ease-in-out infinite; }
  @keyframes dotPulse{ 0%,100%{ opacity:0.45; transform:scale(0.8); } 50%{ opacity:1; transform:scale(1.15); } }
  .contact-btn .cta-short{ display:none; }
  @media (max-width:480px){
    .contact-btn .cta-full{ display:none; }
    .contact-btn .cta-short{ display:inline; }
    .contact-btn{ padding:9px 14px; font-size:12.5px; }
    .header-actions{ gap:6px; }
    header{ padding:0 10px; top:10px; }
    .header-inner{ padding:7px 7px 7px 14px; }
  }
  @media (max-width:420px){
    /* the hero and match panel both link to the quiz; keep the bar on one line */
    .contact-btn{ display:none; }
    .brand{ font-size:15px; gap:8px; }
    .theme-toggle, .account-btn, .cart-btn{ width:32px; height:32px; }
    .theme-toggle svg, .account-btn svg, .cart-btn svg{ width:15px; height:15px; }
  }

  .header-actions{ display:flex; align-items:center; gap:14px; }
  .theme-toggle{
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; flex-shrink:0;
    border:1px solid var(--line); border-radius:50%;
    background:rgba(var(--text-rgb),0.03); color:var(--text); cursor:pointer; padding:0;
    transition:border-color .25s ease, background .25s ease;
  }
  .theme-toggle:hover{ border-color:rgba(var(--text-rgb),0.4); background:rgba(var(--text-rgb),0.04); }
  .theme-toggle svg{ width:17px; height:17px; }
  .theme-toggle .icon-moon{ display:none; }
  :root[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
  :root[data-theme="light"] .theme-toggle .icon-moon{ display:block; }

  @media (max-width:980px){
    nav.links{ display:none; }
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative; z-index:5;
    min-height:100svh;
    display:flex; flex-direction:column; justify-content:center;
    padding:120px 40px 70px;
    pointer-events:none;
  }
  .hero-text{ max-width:900px; }
  .hero-kicker{
    display:inline-flex; align-items:center; gap:9px; margin-bottom:26px;
    padding:7px 14px; border-radius:999px;
    font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--muted);
    background:var(--glass-bg); border:1px solid var(--glass-border);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  }
  .hero-kicker-dot{ width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 10px var(--teal); animation:dotPulse 2.6s ease-in-out infinite; }
  .hero-match{
    align-self:flex-start; display:inline-flex; align-items:center; gap:12px;
    padding:7px 16px 7px 7px; border-radius:999px; text-decoration:none; color:var(--text);
    background:linear-gradient(135deg, var(--glass-sheen), transparent 42%), var(--glass-bg-strong);
    border:1px solid var(--glass-border);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    box-shadow:inset 0 1px 0 var(--glass-highlight), 0 0 32px -10px var(--glow, var(--teal));
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .hero-match:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 var(--glass-highlight), 0 0 44px -8px var(--glow, var(--teal)); }
  .hero-match img{ width:38px; height:38px; border-radius:50%; object-fit:cover; box-shadow:0 0 16px -2px var(--glow, var(--teal)); }
  .hero-match-text{ display:flex; flex-direction:column; line-height:1.2; }
  .hero-match-label{ font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
  .hero-match-text strong{ font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:14.5px; }
  .hero-match-arrow{ color:var(--teal); margin-left:4px; transition:transform .2s ease; }
  .hero-match:hover .hero-match-arrow, .match-alt:hover .hero-match-arrow{ transform:translateX(3px); }
  .headline-wrap{
    position:relative; height:auto;
    font-size:clamp(34px, 5.6vw, 72px);
    min-height:calc(1.04em * 2);
  }
  .headline{
    position:relative;
    font-family:'Space Grotesk', sans-serif;
    font-weight:300;
    font-size:clamp(34px, 5.6vw, 72px);
    line-height:1.04;
    letter-spacing:-0.01em;
    transition:opacity 0.9s cubic-bezier(.4,0,.2,1), transform 0.9s cubic-bezier(.4,0,.2,1), filter 0.9s ease;
  }
  .headline.exit{ position:absolute; top:0; left:0; opacity:0; transform:translateY(-16px); filter:blur(6px); }
  .headline.enter{ opacity:0; transform:translateY(16px); filter:blur(6px); }
  .headline.active{ opacity:1; transform:translateY(0); filter:blur(0); }

  .subtext{
    margin-top:26px; max-width:420px;
    font-size:14.5px; line-height:1.65; color:var(--muted);
    font-style:italic; font-weight:300;
    transition:opacity 0.8s ease;
  }
  .hero-align-left .hero-text{ align-self:flex-start; }
  .hero-align-right{ align-self:flex-end; text-align:right; margin-left:auto; }

  .hero-bottom{
    position:relative; z-index:5; margin-top:40px;
    display:flex; flex-direction:column; gap:24px; pointer-events:auto;
  }
  .hero-actions{ display:flex; flex-wrap:wrap; gap:16px; }
  .hero-stats{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
  .hero-stats.glass{ align-self:flex-start; padding:14px 24px; border-radius:20px; }
  .hero-stat{ display:flex; flex-direction:column; gap:5px; }
  .hero-stat-num{
    font-family:'Space Grotesk', serif; font-style:italic; font-weight:300;
    font-size:32px; line-height:1; color:var(--text);
  }
  .hero-stat-label{
    font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--muted); white-space:nowrap;
  }
  .hero-stat-dot{ width:4px; height:4px; border-radius:50%; background:var(--line); flex-shrink:0; }
  @media (max-width:860px){
    .hero{ padding:110px 20px 60px; }
    .hero-bottom{ gap:20px; }
    .hero-stats{ gap:16px; }
    .hero-stat-num{ font-size:26px; }
  }
  .hero-btn{
    font-family:'Inter', sans-serif; font-size:13.5px; font-weight:500;
    padding:13px 26px; border-radius:999px; text-decoration:none;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; appearance:none; -webkit-appearance:none;
    transition:filter .25s ease, border-color .25s ease, background .25s ease;
  }
  .hero-btn.primary{
    position:relative; overflow:hidden;
    background:linear-gradient(90deg, var(--teal), var(--purple)); color:var(--btn-text); border:none;
    box-shadow:0 10px 30px -12px rgba(167,139,250,0.8), inset 0 1px 0 rgba(255,255,255,0.35);
  }
  .hero-btn.primary::after{
    content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
    transform:skewX(-18deg); transition:left .6s ease;
  }
  .hero-btn.primary:hover{ filter:brightness(1.08); }
  .hero-btn.primary:hover::after{ left:130%; }
  .hero-btn.secondary{ border:1px solid var(--line); color:var(--text); background:transparent; font-weight:400; }
  .hero-btn.secondary:hover{ border-color:rgba(var(--text-rgb),0.4); background:rgba(var(--text-rgb),0.04); }
  .hero-btn.secondary.glass{ border-color:var(--glass-border); background:linear-gradient(135deg, var(--glass-sheen), transparent 42%), var(--glass-bg); }
  .hero-btn.secondary.glass:hover{ border-color:rgba(var(--text-rgb),0.3); }

  .side-caption{
    position:absolute; bottom:150px; right:40px; max-width:280px;
    text-align:right; font-size:13.5px; line-height:1.6; color:var(--muted);
    font-weight:300; z-index:5; pointer-events:none;
    transition:opacity 0.8s ease;
  }

  .scroll-cue{
    position:absolute; bottom:120px; left:40px; z-index:5;
    display:flex; align-items:center; gap:10px;
    font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.08em;
    color:var(--muted); text-transform:uppercase; pointer-events:none;
    transition:opacity .5s ease;
  }
  .scroll-cue.is-hidden{ opacity:0; }
  .scroll-cue .line{ width:28px; height:1px; background:var(--line); position:relative; overflow:hidden; }
  .scroll-cue .line::after{
    content:''; position:absolute; left:-100%; top:0; width:100%; height:100%; background:var(--teal);
    animation:cueMove 2.4s ease-in-out infinite;
  }
  @keyframes cueMove{ 0%{left:-100%;} 50%{left:0;} 100%{left:100%;} }

  /* ---------- stats bar ---------- */
  .stats{
    position:relative; z-index:6;
    display:grid; grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line-soft);
    background:linear-gradient(to top, rgba(6,10,10,0.55), rgba(6,10,10,0.0));
    backdrop-filter:blur(2px);
  }
  .stat{
    padding:26px 40px; border-left:1px solid var(--line-soft);
    display:flex; flex-direction:column; gap:6px;
  }
  .stat:first-child{ border-left:none; }
  .stat .num{
    font-family:'JetBrains Mono', monospace; font-weight:400;
    font-size:26px; letter-spacing:-0.01em;
    background:linear-gradient(90deg, var(--teal), var(--purple));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .stat .label{ font-size:12px; color:var(--muted); letter-spacing:0.01em; }
  @media (max-width:860px){
    .stats{ grid-template-columns:repeat(2,1fr); }
    .stat{ padding:18px 20px; }
    .stat:nth-child(3){ border-left:none; }
    .side-caption{ display:none; }
  }

  /* ---------- lower sections ---------- */
  main{ position:relative; z-index:5; }
  .reveal-el{ opacity:0; transform:translateY(28px); }
  .reveal-el.reveal-ready{ transition:opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); }
  .section{
    max-width:1180px; margin:0 auto; padding:140px 40px;
    border-top:1px solid var(--line-soft);
  }
  .eyebrow{
    font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--teal); margin-bottom:22px; display:block;
  }
  .section h2{
    font-family:'Space Grotesk', sans-serif; font-weight:300;
    font-size:clamp(28px,4vw,46px); max-width:640px; line-height:1.15; letter-spacing:-0.01em;
  }
  .section p.lead{
    margin-top:22px; max-width:520px; color:var(--muted); font-size:15.5px; line-height:1.7;
  }

  .grad-text{
    background:linear-gradient(90deg, var(--teal), var(--purple));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  .grid3{
    margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  }
  .grid3 .card{
    padding:32px 28px; display:flex; flex-direction:column; gap:16px; border-radius:22px;
    background:linear-gradient(135deg, var(--glass-sheen), transparent 42%), var(--glass-bg);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-border);
    box-shadow:inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
  }
  .grid3 .card .idx{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--purple); }
  .grid3 .card h3{ font-family:'Space Grotesk', sans-serif; font-weight:400; font-size:19px; }
  .grid3 .card p{ font-size:13.5px; color:var(--muted); line-height:1.6; }
  .review-quote{ font-style:italic; }
  .review-meta{
    margin-top:auto; padding-top:14px; border-top:1px solid var(--line-soft);
    display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  }
  .review-name{ font-family:'Space Grotesk', sans-serif; font-size:14px; color:var(--text); }
  .review-stone{
    font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--muted);
    text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap;
  }
  /* ---------- lightweight space backdrop for a section (stars + a couple drifting planets, no full orbit rig) ---------- */
  .space-bg{ position:relative; overflow:hidden; border-top:1px solid var(--line-soft); }
  .space-bg > .stars-layer{ display:none; }
  .space-bg > .section{ border-top:none; position:relative; z-index:2; }
  .space-bg > .section + .section{ border-top:1px solid var(--line-soft); padding-top:48px; }
  .space-bg + .space-bg > .section:first-of-type{ padding-top:48px; }
  .stars-layer{
    position:absolute; inset:-10% -10%; z-index:0; pointer-events:none; opacity:0.85;
    background-image:
      radial-gradient(1.6px 1.6px at 8% 18%, rgba(var(--text-rgb),0.9), transparent),
      radial-gradient(1.2px 1.2px at 22% 62%, rgba(var(--text-rgb),0.7), transparent),
      radial-gradient(1.8px 1.8px at 38% 12%, rgba(var(--text-rgb),0.85), transparent),
      radial-gradient(1.2px 1.2px at 52% 78%, rgba(var(--text-rgb),0.6), transparent),
      radial-gradient(1.5px 1.5px at 64% 34%, rgba(var(--text-rgb),0.8), transparent),
      radial-gradient(1.2px 1.2px at 78% 58%, rgba(var(--text-rgb),0.65), transparent),
      radial-gradient(1.7px 1.7px at 90% 22%, rgba(var(--text-rgb),0.85), transparent),
      radial-gradient(1.3px 1.3px at 12% 88%, rgba(var(--text-rgb),0.7), transparent),
      radial-gradient(1.4px 1.4px at 70% 92%, rgba(var(--text-rgb),0.7), transparent),
      radial-gradient(1.3px 1.3px at 96% 70%, rgba(var(--text-rgb),0.6), transparent);
    background-repeat:repeat; background-size:340px 300px;
    animation:starsDrift 140s linear infinite;
  }
  @keyframes starsDrift{ from{ background-position:0 0; } to{ background-position:-1200px 700px; } }
  .drift-planet{ position:absolute; z-index:1; pointer-events:none; border-radius:50%; }
  .drift-planet--gold-1{
    width:26px; height:26px; top:12%;
    background:radial-gradient(circle at 34% 30%, #ffe9c2, #f2c65c 55%, #4a3a1c 100%);
    box-shadow:0 0 22px 5px rgba(242,198,92,0.22);
    animation:driftA 60s linear infinite;
  }
  .drift-planet--gold-2{
    width:15px; height:15px; top:72%;
    background:radial-gradient(circle at 34% 30%, #ffe9c2, #f2c65c 55%, #4a3a1c 100%);
    box-shadow:0 0 16px 4px rgba(242,198,92,0.2);
    animation:driftB 80s linear infinite;
  }
  .drift-planet--stone-1{
    width:20px; height:20px; top:38%;
    background:radial-gradient(circle at 34% 30%, #d8cdb9, #8a7a63 55%, #362d20 100%);
    box-shadow:0 0 18px 4px rgba(138,122,99,0.18);
    animation:driftA 95s linear infinite;
  }
  .drift-planet--stone-2{
    width:12px; height:12px; top:86%;
    background:radial-gradient(circle at 34% 30%, #d8cdb9, #8a7a63 55%, #362d20 100%);
    box-shadow:0 0 12px 3px rgba(138,122,99,0.16);
    animation:driftB 70s linear infinite;
  }
  @keyframes driftA{ from{ left:-6%; } to{ left:106%; } }
  @keyframes driftB{ from{ left:106%; } to{ left:-6%; } }
  @media (prefers-reduced-motion: reduce){
    .stars-layer, .drift-planet{ animation:none !important; }
  }

  .grid-steps{ grid-template-columns:repeat(4,1fr); }
  @media (max-width:1100px) and (min-width:861px){
    .grid-steps{ grid-template-columns:repeat(2,1fr); }
  }
  .step-icon{
    width:26px; height:26px; margin-bottom:2px; color:var(--teal);
    filter:drop-shadow(0 0 6px currentColor);
  }
  .grid-steps .card{
    transition:background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
  }
  .grid-steps .card:hover{
    border-color:rgba(94,234,212,0.4);
    box-shadow:inset 0 1px 0 var(--glass-highlight), 0 18px 40px -18px rgba(94,234,212,0.45);
    transform:translateY(-4px);
  }
  :root[data-theme="light"] .grid-steps .card:hover{
    border-color:rgba(14,143,128,0.35);
    box-shadow:inset 0 1px 0 var(--glass-highlight), 0 18px 40px -18px rgba(14,143,128,0.35);
  }

  /* ---------- gemstone product cards (shared: home, catalog, detail "related") ---------- */
  .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  .section-head .hero-btn{ flex-shrink:0; }

  .planet-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:40px; }
  .planet-chip{
    font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    padding:8px 16px; border-radius:999px; cursor:pointer; color:var(--muted);
    background:var(--glass-bg); border:1px solid var(--glass-border);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    transition:color .2s ease, border-color .2s ease, background .2s ease;
  }
  .planet-chip:hover{ color:var(--text); border-color:rgba(var(--text-rgb),0.3); }
  .planet-chip.is-active{
    color:var(--btn-text); border-color:transparent;
    background:linear-gradient(90deg, var(--teal), var(--purple));
  }

  .gem-grid{
    margin-top:28px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  }
  .gem-card{
    --rx:0deg; --ry:0deg;
    position:relative; isolation:isolate; display:flex; flex-direction:column;
    padding:12px 12px 18px; border-radius:24px; overflow:hidden;
    background:linear-gradient(160deg, var(--glass-sheen), transparent 40%), var(--glass-bg);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-border);
    box-shadow:inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
    transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
    transition:transform .3s ease-out, box-shadow .6s ease, border-color .6s ease, opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1), scale .2s ease;
  }
  /* stone-coloured aura rising from behind the photo */
  .gem-card::before{
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--glow) 26%, transparent), transparent 62%);
    opacity:0.55; transition:opacity .4s ease;
  }
  /* specular highlight that follows the pointer */
  .gem-card::after{
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.12), transparent 42%);
    opacity:0; transition:opacity .3s ease;
  }
  .gem-card:hover, .gem-card.is-spotlight{
    border-color:color-mix(in srgb, var(--glow) 45%, var(--glass-border));
    box-shadow:inset 0 1px 0 var(--glass-highlight), 0 30px 60px -28px color-mix(in srgb, var(--glow) 70%, transparent);
  }
  .gem-card:hover::before, .gem-card.is-spotlight::before{ opacity:1; }
  .gem-card:hover::after, .gem-card.is-spotlight::after{ opacity:1; }
  .gem-card.is-pending{ opacity:0; translate:0 28px; }
  .gem-card.is-filtered-out{ display:none; }

  .gem-card-top{
    position:absolute; top:22px; left:22px; right:22px; z-index:3;
    display:flex; align-items:center; justify-content:space-between; pointer-events:none;
  }
  .gem-card-top > *{ pointer-events:auto; }
  .gem-card-top .wishlist-btn{ margin-left:auto; }

  .gem-match-ribbon{
    display:none; position:absolute; top:22px; left:22px; z-index:4;
    font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase;
    padding:5px 11px; border-radius:999px; color:var(--btn-text);
    background:linear-gradient(90deg, var(--teal), var(--purple));
    box-shadow:0 6px 18px -6px rgba(167,139,250,0.8);
  }
  .gem-card.is-match{
    border-color:color-mix(in srgb, var(--glow) 55%, transparent);
    box-shadow:inset 0 1px 0 var(--glass-highlight), 0 0 0 1px color-mix(in srgb, var(--glow) 35%, transparent), 0 26px 60px -26px color-mix(in srgb, var(--glow) 80%, transparent);
  }
  .gem-card.is-match::before{ opacity:1; }
  .gem-card.is-match .gem-match-ribbon{ display:inline-block; }
  .gem-card.is-match .gem-badge{ visibility:hidden; }

  .wishlist-btn{
    position:absolute; top:14px; right:14px; width:34px; height:34px; z-index:1;
    display:flex; align-items:center; justify-content:center; border-radius:50%;
    background:var(--glass-bg-strong); border:1px solid var(--glass-border); color:var(--muted); cursor:pointer; padding:0;
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    transition:color .2s ease, transform .2s ease, border-color .2s ease;
  }
  .gem-card-top .wishlist-btn{ position:static; }
  .wishlist-btn svg{ width:17px; height:17px; }
  .wishlist-btn:hover{ color:var(--text); transform:scale(1.08); }
  .wishlist-btn.is-active{ color:#e0435a; border-color:rgba(224,67,90,0.45); }
  .wishlist-btn.is-active svg{ fill:currentColor; animation:heartPop .35s ease; }
  @keyframes heartPop{ 0%{ transform:scale(0.7); } 60%{ transform:scale(1.25); } 100%{ transform:scale(1); } }

  .gem-photo{ display:block; overflow:hidden; border-radius:12px; }
  .gem-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .gem-card .gem-photo{
    position:relative; aspect-ratio:1/1; border-radius:18px;
    background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--glow) 30%, transparent), transparent 70%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
  }
  .gem-card .gem-photo img{ transition:transform .7s cubic-bezier(.2,.7,.2,1); }
  .gem-card:hover .gem-photo img, .gem-card.is-spotlight .gem-photo img{ transform:scale(1.08); }
  .gem-photo-shine{
    position:absolute; top:0; bottom:0; left:-70%; width:45%; pointer-events:none;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
    transform:skewX(-18deg);
  }
  .gem-card:hover .gem-photo-shine{ left:140%; transition:left .9s ease; }
  /* touch screens: shop.js adds .is-spotlight once, the first time a card scrolls into view, so phones get the
     same glow / zoom / shine that desktop gets on hover. It lifts slightly and eases back after ~2s. */
  .gem-card.is-spotlight{ translate:0 -6px; }
  .gem-card.is-spotlight .gem-photo-shine{ left:140%; transition:left 1.1s ease .15s; }
  .gem-card.is-spotlight .gem-photo img{ transition-duration:1.2s; }
  .gem-card:active{ scale:0.985; }

  .gem-card-body{ display:flex; flex-direction:column; flex-grow:1; padding:16px 8px 0; }
  .gem-meta-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
  .gem-badge{
    font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase;
    padding:5px 10px; border-radius:20px; border:1px solid transparent;
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  }
  .gem-badge--bestseller{ background:rgba(40,30,8,0.55); color:#f2c65c; border-color:rgba(242,198,92,0.45); }
  .gem-badge--new{ background:rgba(6,32,28,0.55); color:#5eead4; border-color:rgba(94,234,212,0.45); }
  .gem-badge--lowstock{ background:rgba(40,8,14,0.55); color:#ff7a8e; border-color:rgba(224,67,90,0.45); }
  .gem-ruled{
    font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--muted);
  }
  .gem-ruled-symbol{ color:var(--text); font-size:12px; }
  .gem-rating-compact{ font-family:'JetBrains Mono', monospace; font-size:11px; color:#f2c65c; white-space:nowrap; }
  :root[data-theme="light"] .gem-rating-compact{ color:#a9720c; }
  .gem-rating-compact span{ color:var(--muted); }
  .gem-name{ font-family:'Space Grotesk', sans-serif; font-weight:400; font-size:21px; margin-bottom:6px; letter-spacing:-0.01em; }
  .gem-name a{ color:inherit; text-decoration:none; }
  .gem-name a:hover{ color:var(--teal); }
  .gem-rating{ display:flex; align-items:center; gap:7px; margin-bottom:12px; }
  .gem-rating .stars{
    position:relative; display:inline-block; font-size:13px; letter-spacing:2px; line-height:1;
  }
  .gem-rating .stars::after{
    content:'★★★★★'; color:rgba(var(--text-rgb),0.22);
  }
  .gem-rating .stars::before{
    content:'★★★★★'; position:absolute; inset:0; overflow:hidden; white-space:nowrap;
    width:var(--pct, 0%); color:#f2c65c;
  }
  .gem-rating .rating-num{ font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--text); }
  .gem-rating .review-count{ font-size:11px; color:var(--muted); }
  .gem-desc{ font-size:13.5px; color:var(--muted); line-height:1.6; flex-grow:1; }
  .gem-price-row{
    margin-top:16px; font-family:'JetBrains Mono', monospace;
    display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  }
  .gem-price-row .price-current{ font-size:19px; color:var(--price); }
  .gem-price-row .price-original{
    color:var(--muted); text-decoration:line-through; font-size:11.5px; font-weight:400;
  }
  .price-off{
    font-family:'Inter', sans-serif; font-size:10.5px; font-weight:600; color:#7fe3ac;
    background:rgba(127,227,172,0.12); padding:2px 8px; border-radius:10px;
  }
  :root[data-theme="light"] .price-off{ color:#138a4f; background:rgba(19,138,79,0.1); }
  .gem-stock{
    margin-top:8px; font-family:'JetBrains Mono', monospace; font-size:11px; color:#e0954a;
    display:flex; align-items:center; gap:7px;
  }
  .gem-stock-dot{
    width:6px; height:6px; border-radius:50%; background:#e0954a; flex-shrink:0;
    box-shadow:0 0 0 0 rgba(224,149,74,0.6); animation:stockPulse 1.8s ease-out infinite;
  }
  @keyframes stockPulse{ 0%{ box-shadow:0 0 0 0 rgba(224,149,74,0.55); } 100%{ box-shadow:0 0 0 7px rgba(224,149,74,0); } }
  .gem-card-actions{ display:flex; gap:8px; margin-top:16px; }
  .gem-card-actions .gem-add-btn{ flex:1; margin-top:0; }
  .gem-add-btn{
    margin-top:16px; padding:11px 16px; border-radius:999px;
    border:1px solid var(--glass-border); background:rgba(var(--text-rgb),0.05); color:var(--text);
    font-family:'Inter', sans-serif; font-size:12.5px; font-weight:500;
    cursor:pointer; transition:border-color .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  }
  .gem-add-btn:hover, .gem-add-btn--solid{
    border-color:transparent; color:var(--btn-text);
    background:linear-gradient(90deg, var(--teal), var(--purple));
    box-shadow:0 8px 24px -10px rgba(167,139,250,0.8);
  }
  .gem-add-btn--solid:hover{ filter:brightness(1.08); }
  .gem-add-btn.is-added{ border-color:var(--teal); color:var(--teal); background:rgba(94,234,212,0.08); box-shadow:none; }
  .gem-view-link{
    display:inline-flex; align-items:center; justify-content:center; padding:11px 16px; border-radius:999px;
    font-size:12.5px; color:var(--text); text-decoration:none;
    border:1px solid var(--glass-border); background:transparent;
    transition:border-color .2s ease, background .2s ease;
  }
  .gem-view-link:hover{ border-color:rgba(var(--text-rgb),0.35); background:rgba(var(--text-rgb),0.05); }

  .gem-view-more{ display:flex; justify-content:center; margin-top:48px; }

  /* ---------- "Your Cosmic Match" panel (homepage) + shared result bits ---------- */
  .match-section h2{ max-width:none; }
  #matchPanel{ margin-top:40px; }
  .match-empty{ display:flex; align-items:center; gap:32px; padding:34px 38px; }
  .match-empty h3{ font-family:'Space Grotesk', sans-serif; font-weight:400; font-size:22px; margin-bottom:8px; }
  .match-empty p{ color:var(--muted); font-size:14px; line-height:1.65; max-width:520px; }
  .match-empty .hero-btn{ margin-left:auto; flex-shrink:0; }
  .match-empty-orbit{ position:relative; width:86px; height:86px; flex-shrink:0; }
  .match-empty-orbit span{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(var(--text-rgb),0.16); animation:spin 14s linear infinite; }
  .match-empty-orbit span:nth-child(2){ inset:14px; border-color:rgba(94,234,212,0.45); animation-duration:9s; animation-direction:reverse; }
  .match-empty-orbit span:nth-child(3){ inset:32px; border:none; background:radial-gradient(circle, #ffe6a0, #f2c65c 60%, transparent 72%); box-shadow:0 0 24px rgba(242,198,92,0.6); }
  .match-empty-orbit span:first-child::after{ content:''; position:absolute; top:-3px; left:50%; width:6px; height:6px; border-radius:50%; background:var(--purple); box-shadow:0 0 8px var(--purple); }

  .match-card{
    position:relative; overflow:hidden; isolation:isolate;
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:center; padding:40px 44px;
  }
  .match-card::before{
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:radial-gradient(60% 80% at 22% 50%, color-mix(in srgb, var(--glow) 24%, transparent), transparent 70%);
  }
  .match-visual{ position:relative; display:grid; place-items:center; min-height:320px; --glow:inherit; }
  .gem-orb{ position:relative; width:260px; aspect-ratio:1/1; animation:orbFloat 7s ease-in-out infinite; }
  .gem-orb img{
    position:absolute; inset:12%; width:76%; height:76%; object-fit:cover; border-radius:50%;
    box-shadow:0 0 0 1px rgba(255,255,255,0.14), 0 0 70px -6px color-mix(in srgb, var(--glow) 85%, transparent), 0 30px 60px -20px rgba(0,0,0,0.6);
  }
  .gem-orb-ring{
    position:absolute; inset:0; border-radius:50%;
    border:1px dashed color-mix(in srgb, var(--glow) 55%, transparent);
    animation:spin 30s linear infinite;
  }
  .gem-orb-ring--2{ inset:-22px; border:1px solid color-mix(in srgb, var(--glow) 22%, transparent); animation-duration:46s; animation-direction:reverse; }
  .gem-orb-ring--2::after{
    content:''; position:absolute; top:50%; left:-4px; width:8px; height:8px; border-radius:50%;
    background:var(--glow); box-shadow:0 0 12px var(--glow);
  }
  .gem-orb--xl{ width:300px; }
  @keyframes orbFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
  .spark{
    position:absolute; width:14px; height:14px; pointer-events:none;
    clip-path:polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
    background:#fff; opacity:0; animation:twinkle 3.2s ease-in-out infinite;
  }
  .spark--1{ top:12%; left:18%; }
  .spark--2{ top:22%; right:14%; width:10px; height:10px; animation-delay:1.1s; }
  .spark--3{ bottom:16%; left:26%; width:9px; height:9px; animation-delay:2.1s; }
  @keyframes twinkle{ 0%,100%{ opacity:0; transform:scale(0.4) rotate(0deg); } 50%{ opacity:0.9; transform:scale(1) rotate(45deg); } }
  :root[data-theme="light"] .spark{ background:var(--purple); }

  .match-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
  .chip{
    font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
    padding:6px 12px; border-radius:999px; color:var(--text);
    background:rgba(var(--text-rgb),0.06); border:1px solid var(--glass-border);
  }
  .match-name{ font-family:'Space Grotesk', sans-serif; font-weight:300; font-size:clamp(40px,5vw,60px); line-height:1.02; letter-spacing:-0.02em; margin-bottom:14px; }
  .match-reason{ color:var(--muted); font-size:15px; line-height:1.7; max-width:520px; }
  .stone-benefits{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:18px; }
  .stone-benefits li{ font-size:13.5px; display:flex; align-items:center; gap:8px; }
  .stone-benefits li::before{ content:'✦'; color:var(--teal); font-size:11px; }
  .wear-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; }
  .wear-cell{
    display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:14px;
    background:rgba(var(--text-rgb),0.04); border:1px solid var(--glass-border);
  }
  .wear-cell span{ font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
  .wear-cell strong{ font-weight:500; font-size:13.5px; }
  .match-buy{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:24px; }
  .match-buy .stone-detail-price-row{ margin-bottom:0; }
  .match-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .match-actions .gem-add-btn{ margin-top:0; padding:13px 24px; }
  .match-actions .hero-btn{ padding:12px 20px; }
  .match-footer{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:18px; }
  .match-alt{
    display:inline-flex; align-items:center; gap:14px; padding:8px 20px 8px 8px; border-radius:999px;
    color:var(--text); text-decoration:none; transition:transform .25s ease, border-color .25s ease;
  }
  .match-alt:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--glow) 50%, var(--glass-border)); }
  .match-alt img{ width:46px; height:46px; border-radius:50%; object-fit:cover; box-shadow:0 0 18px -4px var(--glow); }
  .match-alt-label{ display:block; font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
  .match-alt strong{ font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:15px; }
  .match-alt-price{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--price); margin-left:6px; }
  .match-retake{ color:var(--muted); font-size:13px; text-decoration:none; }
  .match-retake:hover{ color:var(--text); }
  @media (max-width:860px){
    .match-empty{ flex-direction:column; text-align:center; padding:30px 24px; }
    .match-empty .hero-btn{ margin-left:0; }
    .match-card{ grid-template-columns:1fr; gap:10px; padding:28px 22px; }
    .match-visual{ min-height:260px; }
    .gem-orb{ width:200px; }
  }
  @media (max-width:480px){
    .wear-grid{ grid-template-columns:1fr 1fr 1fr; gap:6px; }
    .wear-cell{ padding:10px; }
    .wear-cell strong{ font-size:12px; }
  }
  @media (prefers-reduced-motion: reduce){
    .gem-orb, .gem-orb-ring, .spark, .match-empty-orbit span, .gem-stock-dot{ animation:none !important; }
    .spark{ opacity:0.6; }
    .gem-card{ transform:none !important; }
  }

  /* ---------- trust badge strip ---------- */
  .trust-strip{
    margin-top:44px; padding:22px 30px; border-radius:22px;
    display:flex; flex-wrap:wrap; gap:18px 28px; justify-content:space-between;
  }
  .trust-item{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12.5px; flex:1; min-width:190px; }
  .trust-item svg{ width:20px; height:20px; color:var(--teal); flex-shrink:0; }
  @media (max-width:860px){
    .trust-strip{ margin-top:32px; padding:20px 22px; }
  }

  .cart-btn{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; flex-shrink:0;
    border:1px solid var(--line); border-radius:50%;
    background:rgba(var(--text-rgb),0.03); color:var(--text); cursor:pointer; padding:0;
    transition:border-color .25s ease, background .25s ease;
  }
  .cart-btn:hover{ border-color:rgba(var(--text-rgb),0.4); background:rgba(var(--text-rgb),0.04); }
  .cart-btn svg{ width:17px; height:17px; }
  .cart-btn.is-bump{ animation:cartBump .5s cubic-bezier(.3,1.6,.5,1); }
  @keyframes cartBump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.22); } 100%{ transform:scale(1); } }

  .account-btn{
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; flex-shrink:0;
    border:1px solid var(--line); border-radius:50%;
    background:rgba(var(--text-rgb),0.03); color:var(--text); cursor:pointer; padding:0; overflow:hidden;
    text-decoration:none;
    transition:border-color .25s ease, background .25s ease;
  }
  .account-btn:hover{ border-color:rgba(var(--text-rgb),0.4); background:rgba(var(--text-rgb),0.04); }
  .account-btn svg{ width:17px; height:17px; }
  .account-avatar{
    width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(90deg, var(--teal), var(--purple)); color:var(--btn-text);
    font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:500;
  }

  .cart-count{
    position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 3px;
    border-radius:8px; background:var(--teal); color:#050608;
    font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:500;
    display:flex; align-items:center; justify-content:center; line-height:1;
  }
  .wishlist-item-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .wishlist-item-actions .gem-add-btn{ margin-top:0; padding:8px 14px; font-size:11.5px; }
  @media (max-width:1100px){
    .gem-grid{ grid-template-columns:repeat(3,1fr); }
  }
  @media (max-width:860px){
    .gem-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  }
  @media (max-width:560px){
    .gem-grid{ grid-template-columns:1fr; }
  }
  @media (max-width:860px){
    .section{ padding:80px 24px; }
    .space-bg > .section + .section{ padding-top:32px; }
    .space-bg + .space-bg > .section:first-of-type{ padding-top:32px; }
    .grid3{ grid-template-columns:1fr; }
  }

  .faq-list{ margin-top:48px; max-width:760px; display:flex; flex-direction:column; gap:12px; }
  .faq-item{
    padding:20px 26px; border-radius:18px;
    background:linear-gradient(135deg, var(--glass-sheen), transparent 42%), var(--glass-bg);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-border);
    transition:border-color .25s ease;
  }
  .faq-item[open]{ border-color:rgba(94,234,212,0.35); }
  .faq-item summary{
    cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px;
    font-family:'Space Grotesk', sans-serif; font-weight:400; font-size:17px;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:'+'; flex-shrink:0; color:var(--teal); font-size:20px; font-weight:300; line-height:1;
    transition:transform .3s ease;
  }
  .faq-item[open] summary::after{ content:'\2212'; }
  .faq-item p{ margin-top:14px; color:var(--muted); font-size:14px; line-height:1.65; max-width:640px; }

  footer{
    position:relative; z-index:5;
    border-top:1px solid rgba(var(--text-rgb),0.22);
    padding:64px 40px 0;
  }
  .footer-top, .footer-bottom{ position:relative; z-index:2; }
  .footer-top{
    display:flex; flex-wrap:wrap; gap:48px; justify-content:space-between; padding-bottom:48px;
  }
  footer .brand svg{ width:16px; height:16px; }
  .footer-brand{ max-width:280px; }
  .footer-brand .brand{ opacity:1; margin-bottom:14px; }
  .footer-tagline{ color:var(--muted); font-size:13.5px; line-height:1.7; }
  .footer-col{ display:flex; flex-direction:column; gap:12px; min-width:140px; }
  .footer-col-title{
    font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--teal); margin-bottom:2px;
  }
  .footer-col a{ color:var(--muted); font-size:13.5px; text-decoration:none; transition:color .2s ease; }
  .footer-col a:hover{ color:var(--text); }
  .footer-bottom{
    display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
    padding:24px 0 28px; border-top:1px solid rgba(var(--text-rgb),0.22);
  }
  footer .fine{ font-size:12.5px; color:var(--muted); }
  @media (max-width:640px){
    .footer-top{ gap:32px; }
    .footer-brand{ max-width:100%; }
  }

  @media (prefers-reduced-motion: reduce){
    .headline{ transition:opacity 0.3s ease !important; }
  }

  /* ---------- recommendation modal / cart drawer (demo commerce flow) ---------- */
  .overlay{
    position:fixed; inset:0; z-index:50; background:rgba(4,4,10,0.55);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .overlay.is-open{ opacity:1; pointer-events:auto; }

  .modal-close{
    position:absolute; top:18px; right:20px; width:28px; height:28px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; line-height:1;
  }
  .modal-close:hover{ color:var(--text); }

  .cart-drawer{
    position:fixed; top:12px; right:12px; bottom:12px; z-index:51; width:min(410px, calc(100% - 24px));
    border-radius:26px; overflow:hidden;
    background:linear-gradient(160deg, var(--glass-sheen), transparent 40%), var(--glass-bg-strong);
    -webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%);
    border:1px solid var(--glass-border);
    box-shadow:inset 0 1px 0 var(--glass-highlight), 0 30px 80px -20px rgba(0,0,0,0.6);
    display:flex; flex-direction:column;
    transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
  }
  .cart-drawer:not(.is-open){ transform:translateX(calc(100% + 24px)); }
  .cart-drawer.is-open{ transform:translateX(0); }
  .cart-drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:24px 24px 18px; border-bottom:1px solid var(--line-soft); flex-shrink:0;
  }
  .cart-drawer-head h3{ font-family:'Space Grotesk', sans-serif; font-weight:400; font-size:19px; }
  .cart-drawer-head .modal-close{ position:static; }
  .cart-view{ display:flex; flex-direction:column; flex:1; min-height:0; }
  .cart-items{ flex:1; overflow-y:auto; padding:8px 24px; }
  .cart-item{ display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-soft); }
  .cart-item .gem-photo{ width:48px; height:48px; margin:0; flex-shrink:0; border-radius:14px; box-shadow:0 0 18px -6px var(--glow); }
  .cart-item-info{ flex:1; min-width:0; }
  .cart-item-name{ font-size:14px; margin-bottom:3px; }
  .cart-item-price{ font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--price); }
  .cart-qty{ display:flex; align-items:center; gap:8px; }
  .cart-qty button{
    width:24px; height:24px; border:1px solid var(--glass-border); background:rgba(var(--text-rgb),0.05); color:var(--text);
    border-radius:50%; cursor:pointer; font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center;
  }
  .cart-qty span{ font-family:'JetBrains Mono', monospace; font-size:12.5px; min-width:14px; text-align:center; }
  .cart-item-remove{
    background:none; border:none; color:var(--muted); cursor:pointer; font-size:16px; line-height:1; padding:4px;
  }
  .cart-item-remove:hover{ color:var(--text); }
  .cart-empty{ display:none; padding:70px 24px; text-align:center; color:var(--muted); font-size:13.5px; }
  .cart-empty-icon{ display:block; font-size:34px; margin-bottom:14px; color:var(--teal); opacity:0.8; }
  .cart-footer{ padding:20px 24px 26px; border-top:1px solid var(--line-soft); flex-shrink:0; }
  .shipping-nudge{ margin-bottom:18px; font-size:12px; }
  .shipping-nudge-text{ color:var(--muted); margin-bottom:8px; }
  .shipping-nudge-text.is-complete{ color:var(--teal); }
  .shipping-bar{ height:5px; border-radius:3px; background:var(--line-soft); overflow:hidden; }
  .shipping-bar-fill{
    height:100%; width:0%; border-radius:3px;
    background:linear-gradient(90deg, var(--teal), var(--purple)); transition:width .3s ease;
  }
  .cart-subtotal{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-size:14px; }
  .cart-subtotal strong{ font-family:'JetBrains Mono', monospace; font-weight:400; color:var(--price); font-size:16px; }
  .cart-checkout{ width:100%; border:none; }
  .cart-confirm{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 28px; gap:6px; }
  .confirm-icon{
    width:48px; height:48px; border-radius:50%; border:1px solid var(--teal); color:var(--teal);
    display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:12px;
  }
  .cart-confirm h4{ font-family:'Space Grotesk', sans-serif; font-weight:400; font-size:20px; }
  .cart-confirm p{ color:var(--muted); font-size:13.5px; line-height:1.6; max-width:280px; }
  .confirm-note{ font-size:12px; opacity:0.8; }
  .cart-confirm .hero-btn{ margin-top:14px; border:1px solid var(--line); background:transparent; color:var(--text); }

  .toast{
    position:fixed; bottom:28px; left:50%; z-index:60; transform:translate(-50%, 20px);
    color:var(--text); font-size:13px; padding:12px 22px; border-radius:999px;
    background:linear-gradient(135deg, var(--glass-sheen), transparent 42%), var(--glass-bg-strong);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-border);
    box-shadow:inset 0 1px 0 var(--glass-highlight), 0 16px 40px -16px rgba(0,0,0,0.6);
    opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease;
  }
  .toast.is-open{ opacity:1; transform:translate(-50%,0); }
  .toast::before{ content:'✦'; color:var(--teal); margin-right:9px; }

  /* ---------- gemstone catalog page (search / filter / sort) ---------- */
  .catalog-filters{
    display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:40px 0 20px;
  }
  .catalog-filters input[type="text"], .catalog-filters select{
    font-family:'Inter', sans-serif; font-size:13.5px; color:var(--text);
    background:var(--glass-bg); border:1px solid rgba(var(--text-rgb),0.22); border-radius:999px;
    padding:11px 18px; appearance:none; -webkit-appearance:none;
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    box-shadow:0 0 16px -4px rgba(94,234,212,0.35), inset 0 0 12px -6px rgba(94,234,212,0.2);
    transition:border-color .25s ease, box-shadow .25s ease;
  }
  :root[data-theme="light"] .catalog-filters input[type="text"],
  :root[data-theme="light"] .catalog-filters select{
    box-shadow:0 0 16px -4px rgba(14,143,128,0.3), inset 0 0 12px -6px rgba(14,143,128,0.16);
  }
  .catalog-filters select option{ background:var(--bg); color:var(--text); }
  .catalog-filters input[type="text"]{ flex:1; min-width:200px; }
  .catalog-filters input[type="text"]:focus, .catalog-filters select:focus{
    outline:none; border-color:var(--teal);
    box-shadow:0 0 24px -3px rgba(94,234,212,0.55), inset 0 0 14px -6px rgba(94,234,212,0.3);
  }
  :root[data-theme="light"] .catalog-filters input[type="text"]:focus,
  :root[data-theme="light"] .catalog-filters select:focus{
    box-shadow:0 0 24px -3px rgba(14,143,128,0.45), inset 0 0 14px -6px rgba(14,143,128,0.25);
  }
  .catalog-filters button{
    font-family:'Inter', sans-serif; font-size:13px; font-weight:500; padding:10px 22px; border-radius:999px;
    border:none; background:linear-gradient(90deg, var(--teal), var(--purple)); color:var(--btn-text); cursor:pointer;
  }
  .catalog-filters .catalog-clear{
    font-family:'Inter', sans-serif; font-size:12.5px; color:var(--muted); text-decoration:underline;
  }
  .catalog-meta{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--muted); margin-bottom:28px; }
  .catalog-empty{ padding:60px 0; text-align:center; color:var(--muted); font-size:14px; }
  @media (max-width:600px){
    .catalog-filters select{ flex:1; min-width:140px; }
  }

  /* ---------- gemstone detail page ---------- */
  .stone-detail-back{
    display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:13px;
    margin-top:30px; text-decoration:none;
  }
  .stone-detail-back:hover{ color:var(--text); }
  .stone-detail{
    display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; margin-top:28px;
  }
  .stone-detail-stage{ position:relative; }
  .stone-detail-halo{
    position:absolute; inset:-8%; z-index:0; pointer-events:none; border-radius:50%;
    background:radial-gradient(circle, color-mix(in srgb, var(--glow) 40%, transparent), transparent 65%);
    filter:blur(10px);
  }
  .stone-detail-photo{
    position:relative; z-index:1;
    width:100%; aspect-ratio:1/1; border-radius:28px; overflow:hidden;
    border:1px solid var(--glass-border);
    box-shadow:inset 0 1px 0 var(--glass-highlight), 0 40px 80px -30px color-mix(in srgb, var(--glow) 70%, transparent);
  }
  .stone-detail-certs{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
  .stone-detail-certs span{
    font-size:12px; color:var(--muted); padding:7px 12px; border-radius:999px;
    background:var(--glass-bg); border:1px solid var(--glass-border);
  }
  .stone-detail-info.glass-panel{ padding:34px 36px; }
  .stone-detail-tags{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
  .stone-detail-tags .gem-ruled{ margin-bottom:0; }
  .stone-guide{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line-soft); }
  .stone-guide-title{
    display:block; font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--teal); margin-top:18px;
  }
  .stone-guide-title:first-child{ margin-top:0; }
  .stone-guide .stone-benefits{ margin-top:10px; }
  .stone-guide .wear-grid{ margin-top:10px; }
  .detail-quiz-cta{
    display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
    margin-top:64px; padding:26px 32px;
  }
  .detail-quiz-cta .eyebrow{ margin-bottom:8px; }
  .detail-quiz-cta p{ color:var(--muted); font-size:14px; line-height:1.6; max-width:560px; }
  .stone-detail-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .stone-detail-info .gem-ruled{ margin-bottom:14px; }
  .stone-detail-info h1{
    font-family:'Space Grotesk', sans-serif; font-weight:300; font-size:clamp(30px,4vw,44px);
    line-height:1.15; margin-bottom:14px;
  }
  .stone-detail-info .gem-rating{ margin-bottom:22px; }
  .stone-detail-desc{ color:var(--muted); font-size:15px; line-height:1.7; max-width:480px; margin-bottom:28px; }
  .stone-detail-price-row{
    display:flex; align-items:baseline; gap:12px; font-family:'JetBrains Mono', monospace; margin-bottom:8px;
  }
  .stone-detail-price-row .price-current{ font-size:28px; color:var(--price); }
  .stone-detail-price-row .price-original{ font-size:16px; color:var(--muted); text-decoration:line-through; }
  .stone-detail-price-row .price-off{
    font-family:'Inter', sans-serif; font-size:12px; font-weight:600; color:#7fe3ac;
    background:rgba(127,227,172,0.12); padding:3px 9px; border-radius:10px;
  }
  .stone-detail-stock{ font-family:'JetBrains Mono', monospace; font-size:12px; color:#e0954a; margin-bottom:24px; display:flex; align-items:center; gap:8px; }
  .stone-detail-actions{ display:flex; gap:12px; margin-bottom:8px; }
  .stone-detail-actions .gem-add-btn{ flex:1; max-width:260px; margin-top:0; padding:14px 24px; border-radius:999px; }
  .wishlist-btn-inline{ position:static; width:46px; height:46px; flex-shrink:0; }
  .stone-detail-related{ margin-top:90px; }
  .stone-detail-related .gem-grid{ margin-top:36px; }
  @media (max-width:860px){
    .stone-detail{ grid-template-columns:1fr; gap:32px; }
  }



  /* ---------- hero (v2): blended orrery, legibility scrim, footer bar, planet hint ---------- */
  /* bloom renders an opaque black canvas; screen-blending drops the black so the shared backdrop shows through */
  :root:not([data-theme="light"]) canvas#scene{ mix-blend-mode:screen; }

  .hero{ padding-bottom:120px; }
  .hero-scrim{
    position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(70% 90% at 0% 45%, rgba(var(--bg-rgb),0.82), rgba(var(--bg-rgb),0.45) 45%, transparent 72%);
  }
  .hero-text, .hero-bottom, .hero-footer{ position:relative; }
  .hero-text{ max-width:760px; }
  .headline .grad-text{ padding-right:0.04em; }
  .subtext{ font-size:15.5px; max-width:460px; margin-top:22px; }

  .hero-btn--lg{ padding:15px 30px; font-size:14.5px; }
  .hero-actions{ align-items:center; gap:14px; }
  .hero-actions .hero-match{ align-self:center; margin-left:6px; }

  /* entrance: kicker → headline → copy → buttons → footer */
  .hero-in{ animation:heroIn .9s cubic-bezier(.2,.7,.2,1) backwards; }
  .hero-text .hero-in:nth-child(1){ animation-delay:.1s; }
  .hero-text .hero-in:nth-child(2){ animation-delay:.22s; }
  .hero-text .hero-in:nth-child(3){ animation-delay:.36s; }
  .hero-bottom.hero-in{ animation-delay:.5s; }
  .hero-footer.hero-in{ animation-delay:.75s; }
  @keyframes heroIn{ from{ opacity:0; transform:translateY(22px); filter:blur(6px); } to{ opacity:1; transform:none; filter:none; } }

  .hero-footer{
    position:absolute; left:40px; right:40px; bottom:34px; z-index:5;
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
    padding-top:22px; border-top:1px solid var(--line-soft);
    pointer-events:auto;
  }
  .hero-footer .hero-stats{ gap:18px; flex-wrap:nowrap; }
  .hero-footer .hero-stat{ flex-direction:row; align-items:baseline; gap:8px; }
  .hero-footer .hero-stat-num{ font-size:24px; }
  .hero-footer .hero-stat-label{ font-size:9.5px; }

  .hero-scroll{
    justify-self:center; display:flex; flex-direction:column; align-items:center; gap:8px;
    font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--muted); text-decoration:none;
  }
  .hero-scroll:hover{ color:var(--text); }
  .hero-scroll-mouse{
    position:relative; width:22px; height:34px; border-radius:12px; border:1.5px solid rgba(var(--text-rgb),0.35);
  }
  .hero-scroll-mouse span{
    position:absolute; left:50%; top:7px; width:3px; height:7px; margin-left:-1.5px; border-radius:2px;
    background:var(--teal); animation:scrollDot 1.8s ease-in-out infinite;
  }
  @keyframes scrollDot{ 0%{ opacity:0; transform:translateY(-3px); } 40%{ opacity:1; } 100%{ opacity:0; transform:translateY(10px); } }

  .hero-hint{
    justify-self:end; display:inline-flex; align-items:center; gap:10px;
    padding:9px 16px; border-radius:999px; font-size:12.5px; color:var(--muted);
    background:var(--glass-bg); border:1px solid var(--glass-border);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    transition:opacity .5s ease;
  }
  .hero-hint.is-used{ opacity:0; pointer-events:none; }
  .hero-hint-dot{
    width:8px; height:8px; border-radius:50%; background:var(--teal);
    box-shadow:0 0 0 0 rgba(94,234,212,0.6); animation:hintPulse 2s ease-out infinite;
  }
  @keyframes hintPulse{ 0%{ box-shadow:0 0 0 0 rgba(94,234,212,0.55); } 100%{ box-shadow:0 0 0 10px rgba(94,234,212,0); } }

  .headline, .headline-wrap{ font-size:clamp(34px, 5vw, 68px); }
  .hero-text, .hero-bottom{ transition:filter .6s ease; }
  .is-planet-focus .hero-text, .is-planet-focus .hero-bottom{ filter:opacity(0.14) blur(2px); pointer-events:none; }
  :root[data-theme="light"] .planet-label{ filter:brightness(0.5) saturate(1.6); }
  @media (max-width:480px){ .hero-kicker-extra{ display:none; } }

  /* planet names ride along with the orrery on larger screens (gem name appears on hover) */
  @media (min-width:1024px) and (hover:hover){ #planet-labels{ display:block; } }

  /* planet info card: glass, with the paired stone as a shoppable row */
  #planet-info{ right:40px; bottom:130px; max-width:300px; padding:22px 24px; border-radius:22px; }
  #planet-info .pi-name{ font-size:24px; }
  #planet-info .pi-gem{ color:var(--teal); font-weight:500; }
  .pi-stone{
    display:flex; align-items:center; gap:12px; margin-top:16px; padding:8px 14px 8px 8px; border-radius:16px;
    text-decoration:none; color:var(--text);
    background:rgba(var(--text-rgb),0.05); border:1px solid var(--glass-border);
    transition:border-color .2s ease, transform .2s ease;
  }
  .pi-stone:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--glow, var(--teal)) 60%, transparent); }
  .pi-stone img{ width:48px; height:48px; border-radius:12px; object-fit:cover; box-shadow:0 0 20px -4px var(--glow, var(--teal)); }
  .pi-stone-text{ display:flex; flex-direction:column; gap:2px; }
  #pi-price{ font-family:'JetBrains Mono', monospace; font-size:14px; color:var(--price); }
  .pi-stone-cta{ font-size:12.5px; color:var(--muted); }
  .pi-stone:hover .pi-stone-cta{ color:var(--text); }

  @media (max-width:1100px){
    .hero-scroll{ display:none; }
    .hero-footer{ grid-template-columns:1fr auto; }
  }
  @media (max-width:860px){
    .hero{ padding-bottom:150px; }
    .hero-scrim{ background:linear-gradient(to bottom, rgba(var(--bg-rgb),0.2), rgba(var(--bg-rgb),0.7) 55%, rgba(var(--bg-rgb),0.2)); }
    .hero-footer{ left:20px; right:20px; bottom:26px; grid-template-columns:1fr; }
    .hero-footer .hero-stats{ justify-content:space-between; gap:10px; }
    .hero-footer .hero-stat{ flex-direction:column; gap:3px; }
    .hero-footer .hero-stat-num{ font-size:22px; }
    .hero-hint{ display:none; }
    .hero-actions .hero-match{ margin-left:0; }
    .hero-btn--lg{ padding:14px 22px; font-size:14px; }
  }
  @media (max-width:760px){ #planet-info{ right:20px; left:20px; bottom:120px; max-width:none; } }
  @media (prefers-reduced-motion: reduce){
    .hero-in, .hero-scroll-mouse span, .hero-hint-dot{ animation:none !important; }
  }

  /* ---------- responsive pass ---------- */
  nav.links a, .contact-btn{ white-space:nowrap; }
  .price-off{ white-space:nowrap; }
  @media (max-width:1180px){ nav.links{ gap:22px; } nav.links a{ font-size:13.5px; } }
  @media (max-width:1100px){ nav.links{ display:none; } }
  @media (max-width:360px){
    header{ padding:0 8px; }
    .header-inner{ padding:6px 6px 6px 12px; gap:8px; }
    .header-actions{ gap:4px; }
    .brand{ font-size:14px; gap:6px; }
    .brand svg{ width:15px; height:15px; }
    .theme-toggle, .account-btn, .cart-btn{ width:30px; height:30px; }
    .theme-toggle svg, .account-btn svg, .cart-btn svg{ width:14px; height:14px; }
  }

  /* hero stats never clip on narrow phones */
  @media (max-width:420px){
    .hero-footer .hero-stats{ display:grid; grid-template-columns:repeat(3, auto); justify-content:space-between; }
    .hero-footer .hero-stat-dot{ display:none; }
    .hero-footer .hero-stat-label{ white-space:normal; font-size:8.5px; line-height:1.4; max-width:90px; }
  }

  /* match card: buttons stack neatly on phones */
  @media (max-width:480px){
    .match-actions{ width:100%; }
    .match-actions .gem-add-btn{ flex:1 1 100%; }
    .match-actions .hero-btn{ flex:1; }
    .match-alt{ width:100%; }
  }

  /* planet filter: one swipeable row on small screens instead of three wrapped rows */
  @media (max-width:860px){
    .planet-chips{
      flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
      margin-left:-24px; margin-right:-24px; padding:2px 24px;
      -webkit-mask-image:linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 40px), transparent);
              mask-image:linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 40px), transparent);
    }
    .planet-chips::-webkit-scrollbar{ display:none; }
    .planet-chip{ flex-shrink:0; }
  }

  /* product carousels (home grid, "you may also like"): swipe sideways on phones, next card peeks in */
  @media (max-width:560px){
    .gem-grid--carousel{
      display:grid; grid-auto-flow:column; grid-auto-columns:80%; grid-template-columns:none;
      gap:14px; overflow-x:auto; overscroll-behavior-x:contain;
      scroll-snap-type:x mandatory; scroll-padding:0 24px; scrollbar-width:none;
      margin-left:-24px; margin-right:-24px; padding:6px 24px 18px;
    }
    .gem-grid--carousel::-webkit-scrollbar{ display:none; }
    .gem-grid--carousel > .gem-card{ scroll-snap-align:start; }
  }
  .carousel-dots{ display:none; justify-content:center; align-items:center; gap:7px; margin-top:4px; }
  .carousel-dots.is-on{ display:flex; }
  .carousel-dots button{
    width:7px; height:7px; padding:0; border:none; border-radius:4px; cursor:pointer;
    background:rgba(var(--text-rgb),0.22); transition:width .3s ease, background .3s ease;
  }
  .carousel-dots button.is-active{ width:22px; background:linear-gradient(90deg, var(--teal), var(--purple)); }

  /* catalog page: compact two-up shop grid on phones */
  @media (max-width:560px){
    .gem-grid--compact{ grid-template-columns:repeat(2, 1fr); gap:10px; }
    .gem-grid--compact .gem-card{ padding:7px 7px 12px; border-radius:18px; }
    .gem-grid--compact .gem-card .gem-photo{ border-radius:13px; }
    .gem-grid--compact .gem-card-top{ top:14px; left:14px; right:14px; }
    .gem-grid--compact .gem-match-ribbon{ top:14px; left:14px; }
    .gem-grid--compact .gem-badge{ font-size:8px; padding:3px 7px; }
    .gem-grid--compact .wishlist-btn{ width:28px; height:28px; }
    .gem-grid--compact .wishlist-btn svg{ width:14px; height:14px; }
    .gem-grid--compact .gem-card-body{ padding:10px 4px 0; }
    .gem-grid--compact .gem-meta-row{ margin-bottom:4px; }
    .gem-grid--compact .gem-ruled{ font-size:9px; letter-spacing:0.06em; }
    .gem-grid--compact .gem-rating-compact{ font-size:10px; }
    .gem-grid--compact .gem-rating-compact span,
    .gem-grid--compact .gem-desc,
    .gem-grid--compact .gem-view-link,
    .gem-grid--compact .price-original{ display:none; }
    .gem-grid--compact .gem-name{ font-size:16px; margin-bottom:0; }
    .gem-grid--compact .gem-price-row{ margin-top:6px; gap:6px; flex-grow:1; align-items:center; }
    .gem-grid--compact .gem-price-row .price-current{ font-size:15px; }
    .gem-grid--compact .price-off{ font-size:9.5px; padding:2px 6px; }
    .gem-grid--compact .gem-stock{ font-size:9.5px; margin-top:4px; }
    .gem-grid--compact .gem-card-actions{ margin-top:10px; }
    .gem-grid--compact .gem-add-btn{ padding:9px 8px; font-size:12px; }
    .gem-grid--compact .gem-card.is-spotlight{ translate:0 -3px; }
  }

  /* footer: link columns side by side on phones */
  @media (max-width:640px){
    .footer-top{ display:grid; grid-template-columns:repeat(3, 1fr); gap:30px 12px; }
    .footer-brand{ grid-column:1 / -1; }
    .footer-col{ min-width:0; }
    .footer-col a{ font-size:13px; }
    footer{ padding:48px 20px 0; }
  }

  /* decorative drifting planets shouldn't sit bright behind copy on small screens */
  @media (max-width:860px){ .drift-planet{ opacity:0.45; } }