/* ===========================================================================
   Red Mercury — studio stylesheet
   Brand: a quicksilver lab. Where sortafun is warm paper and candy, the studio
   that makes it is dark glass and liquid metal — same house, other room.
   Shared DNA with sortafun: system sans, mono eyebrows, one Georgia italic wink.
   No webfonts.
   =========================================================================== */

:root{
  color-scheme:dark;
  --void:#0C0B0F;         /* deep lab dark */
  --void-2:#100E14;       /* section band */
  --panel:#16141B;        /* raised surface */
  --panel-2:#1C1922;      /* raised surface, lighter */
  --chrome:#ECEAF0;       /* primary text — cool off-white */
  --muted:#9C97A6;        /* secondary text */
  --faint:#6B6675;        /* tertiary text */
  --line:rgba(236,234,240,0.10);
  --line-2:rgba(236,234,240,0.06);
  /* mercury red */
  --merc:#E5372B; --merc-hi:#FF6A5A; --merc-lo:#8E1B12; --merc-deep:#5E0F0A;
  /* quicksilver chrome */
  --silver:#D6DAE2; --silver-lo:#8A909E;
  /* sortafun's candy jar — used only as label chips, to signal the family tie */
  --or:#F5872E; --gr:#54B948; --pk:#EC4F8F; --bl:#3E97E4;
  --pu:#9C5BD3; --rd:#EF4B3E; --tl:#2BB3A3; --yl:#F7A31C;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:1140px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--chrome);
  background:
    radial-gradient(75rem 42rem at 108% -12%, rgba(229,55,43,0.14), transparent 58%),
    radial-gradient(60rem 40rem at -12% 4%, rgba(122,144,255,0.06), transparent 60%),
    radial-gradient(80rem 60rem at 50% 128%, rgba(229,55,43,0.05), transparent 62%),
    var(--void);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* fine lab-glass grid */
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(236,234,240,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236,234,240,0.022) 1px, transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 92%);}
a{color:var(--merc-hi); text-decoration:none;}
a:hover{color:var(--chrome);}
img{max-width:100%; display:block;}
::selection{background:rgba(229,55,43,0.32); color:#fff;}

.spill-overlay{position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;}
.page{position:relative; z-index:2;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

/* ---------- nav ---------- */
.nav{display:flex; align-items:center; justify-content:space-between; padding:22px 0;
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(140%) blur(10px); -webkit-backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(12,11,15,0.82), rgba(12,11,15,0));}
.brandmark{display:flex; align-items:center; gap:11px;}
.brandmark .lm{height:30px; width:auto;}
.brandmark .wm{font-weight:800; font-size:18px; letter-spacing:-0.02em; color:var(--chrome);
  background:linear-gradient(180deg,#FFFFFF,#AFB4C0 74%,#8A909E); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent;}
.nav-links{display:flex; gap:26px; align-items:center; font-size:14px;}
.nav-links a{color:var(--muted); font-weight:600; display:inline-flex; align-items:center; gap:5px;}
.nav-links a:hover{color:var(--chrome);}
.nav-cta{padding:9px 16px; border:1px solid rgba(229,55,43,0.42); border-radius:12px; color:#fff!important;
  background:rgba(229,55,43,0.12);}
.nav-cta:hover{background:var(--merc); border-color:var(--merc);}
.ext{font-size:11px; opacity:.7;}

/* ---------- eyebrow / mono label ---------- */
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--merc-hi);}

/* ---------- hero ---------- */
.hero{padding:70px 0 44px; text-align:center; position:relative;}
.hero .eyebrow{margin-bottom:26px; display:inline-flex; align-items:center; gap:10px;}
.hero .eyebrow .beat{width:6px; height:6px; border-radius:50%; background:var(--merc);
  box-shadow:0 0 10px var(--merc); animation:beat 2s ease-in-out infinite;}
@keyframes beat{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.7);}}

.hero-mark{width:min(72vw,132px); margin:0 auto 8px; display:block;}
.hero-wm{font-weight:800; letter-spacing:-0.045em; line-height:0.9;
  font-size:clamp(52px,12vw,132px); margin:6px 0 0;
  background:linear-gradient(176deg,#FFFFFF 4%,#E9EBF0 30%,#AAB0BD 60%,#7E8492 78%,#B9808A 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--chrome);
  position:relative; display:inline-block;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,0.5)) drop-shadow(0 14px 40px rgba(229,55,43,0.18));}
/* a specular sweep that travels across the wordmark once in a while */
.hero-wm::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.9) 50%, transparent 58%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  mix-blend-mode:screen; opacity:0; background-size:280% 100%; background-position:120% 0;}
.hero-wm.sweep::after{animation:sweep 1.1s ease-in-out;}
@keyframes sweep{0%{opacity:0;background-position:120% 0;}18%{opacity:1;}100%{opacity:0;background-position:-40% 0;}}

.hero .tag{font-size:clamp(21px,3.4vw,32px); font-weight:800; letter-spacing:-0.03em;
  margin:30px auto 0; max-width:20ch; color:var(--chrome);}
.hero .tag .never{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--merc-hi);}
.hero p.sub{max-width:60ch; margin:22px auto 0; color:var(--muted);
  font-size:clamp(16px,2.1vw,19px); line-height:1.65;}
.hero p.sub b{color:var(--chrome); font-weight:700;}

.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px;}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:15px;
  font-weight:800; font-size:15px; letter-spacing:-0.01em; cursor:pointer; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:linear-gradient(180deg,var(--merc-hi),var(--merc) 55%,#C4271C); color:#fff!important;
  box-shadow:0 10px 30px rgba(229,55,43,0.4), inset 0 1px 0 rgba(255,255,255,0.35);}
.btn-primary:hover{box-shadow:0 16px 40px rgba(229,55,43,0.52), inset 0 1px 0 rgba(255,255,255,0.4);}
.btn-ghost{background:var(--panel); color:var(--chrome)!important; border-color:var(--line);}
.btn-ghost:hover{border-color:rgba(236,234,240,0.24); background:var(--panel-2);}
.btn .arw{transition:transform .15s ease;}
.btn:hover .arw{transform:translateX(3px);}
.btn-primary:hover .arw{transform:translateX(3px);}

/* ---------- studio ticker (mirrors sortafun's review marquee) ---------- */
.ticker{margin-top:52px; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.tk-track{display:inline-flex; gap:40px; padding:13px 0; white-space:nowrap; animation:tk 40s linear infinite;}
.tk-track:hover{animation-play-state:paused;}
.tk{font-family:var(--mono); font-size:12.5px; color:var(--muted); display:inline-flex; gap:10px; align-items:center;}
.tk b{color:var(--chrome); font-weight:600;}
.tk .mk{color:var(--merc-hi);}
@keyframes tk{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- section scaffold ---------- */
.section{padding:82px 0;}
.section.band{background:
    linear-gradient(180deg, rgba(255,255,255,0.015), transparent 30%),
    var(--void-2);
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);}
.section-head{text-align:center; max-width:64ch; margin:0 auto 46px;}
.section-head h2{font-size:clamp(29px,4.4vw,46px); font-weight:800; letter-spacing:-0.035em;
  margin:12px 0 0; color:var(--chrome);}
.section-head p{color:var(--muted); margin:15px auto 0; max-width:60ch; font-size:16px;}

/* ---------- principles grid ---------- */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:900px; margin:0 auto;}
.card{border:1px solid var(--line-2); border-radius:20px; padding:28px; background:var(--panel);
  box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 18px 40px rgba(0,0,0,0.32);
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease; position:relative; overflow:hidden;}
.card:hover{transform:translateY(-4px); border-color:rgba(236,234,240,0.14);
  box-shadow:0 1px 0 rgba(255,255,255,0.05) inset, 0 26px 54px rgba(0,0,0,0.4);}
.card .num{font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:0.1em;}
.card h4{margin:12px 0 8px; font-size:18px; font-weight:800; letter-spacing:-0.01em; color:var(--chrome);}
.card p{color:var(--muted); font-size:14.5px; margin:0; line-height:1.62;}
.card .edge{position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--merc-hi),var(--merc-lo));}

/* ---------- flagship / label feature ---------- */
.labels{max-width:1040px; margin:0 auto;}
.flag{display:grid; grid-template-columns:1.05fr 0.95fr; gap:0; border-radius:26px; overflow:hidden;
  border:1px solid var(--line); background:
    radial-gradient(60rem 30rem at -10% -20%, rgba(236,79,143,0.10), transparent 60%),
    linear-gradient(180deg,#FBF6EA,#F4EDDB);
  box-shadow:0 30px 80px rgba(0,0,0,0.45);}
.flag-body{padding:40px 40px 38px; color:#3B3128;}
.flag-body .kicker{font-family:var(--mono); font-size:11.5px; letter-spacing:0.22em; text-transform:uppercase;
  color:#B4487C;}
.flag-logo{margin:16px 0 4px;}
.flag-logo img{height:44px; width:auto;}
.flag-body .lede{font-size:19px; font-weight:700; letter-spacing:-0.02em; color:#2E2620; margin:16px 0 0;}
.flag-body .lede .it{font-family:var(--serif); font-style:italic; font-weight:400; color:#B4487C;}
.flag-body p{color:#6E6252; font-size:14.5px; margin:12px 0 0; line-height:1.62;}
.flag-meta{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 26px;}
.chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px;
  color:#6E6252; background:#FFFDF4; border:1px solid rgba(59,49,40,0.12); border-radius:20px; padding:7px 13px;}
.chip .d{width:7px; height:7px; border-radius:50%;}
.flag-cta{display:inline-flex; align-items:center; gap:9px; padding:12px 22px; border-radius:14px;
  font-weight:800; font-size:14.5px; color:#fff!important; letter-spacing:-0.01em;
  background:linear-gradient(180deg,#EC4F8F,#D63E7B);
  box-shadow:0 10px 24px rgba(236,79,143,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
  transition:transform .15s ease, box-shadow .2s ease;}
.flag-cta:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(236,79,143,0.45);}
.flag-shot{position:relative; background:linear-gradient(160deg,#241F19,#141210); display:flex;
  align-items:center; justify-content:center; padding:34px 30px; overflow:hidden;}
.flag-shot::before{content:""; position:absolute; inset:0;
  background:radial-gradient(30rem 20rem at 70% 10%, rgba(236,79,143,0.22), transparent 60%);}
.flag-phone{position:relative; width:min(70%,230px); border-radius:34px; padding:8px;
  background:linear-gradient(180deg,#2A2E2B,#151815); border:1px solid rgba(0,0,0,0.5);
  box-shadow:0 26px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
  transform:rotate(3deg); transition:transform .3s ease;}
.flag:hover .flag-phone{transform:rotate(1deg) translateY(-4px);}
.flag-phone img{border-radius:27px; width:100%;}

/* upcoming / ghost labels */
.more-labels{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px;}
.ghost{border:1px dashed var(--line); border-radius:18px; padding:22px; background:rgba(255,255,255,0.012);
  color:var(--faint);}
.ghost .gt{font-weight:800; color:var(--muted); font-size:15px; letter-spacing:-0.01em;}
.ghost .gd{font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; margin-top:10px;}
.ghost.dots{display:flex; align-items:center; justify-content:center; gap:8px; min-height:96px;}
.ghost.dots span{width:9px; height:9px; border-radius:50%; opacity:.85;}

/* ---------- stats strip ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:960px; margin:0 auto;}
.stat{text-align:center; border:1px solid var(--line-2); border-radius:18px; padding:26px 16px;
  background:var(--panel);}
.stat .n{font-size:clamp(30px,4.4vw,42px); font-weight:800; letter-spacing:-0.03em; line-height:1;
  background:linear-gradient(180deg,#FFFFFF,#AEB3C0); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;}
.stat .n.red{background:linear-gradient(180deg,var(--merc-hi),var(--merc)); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent;}
.stat .l{font-family:var(--mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted); margin-top:12px;}

/* ---------- the name / lore ---------- */
.lore{max-width:820px; margin:0 auto; text-align:center;}
.lore .glyph{font-size:46px; line-height:1; color:var(--silver); opacity:.5; margin-bottom:8px;}
.lore h3{font-size:clamp(24px,3.4vw,34px); font-weight:800; letter-spacing:-0.03em; margin:6px 0 0;}
.lore p{color:var(--muted); font-size:16.5px; line-height:1.7; margin:18px auto 0; max-width:62ch;}
.lore p .it{font-family:var(--serif); font-style:italic; color:var(--chrome);}
.lore .fine{font-family:var(--mono); font-size:12px; color:var(--faint); margin-top:24px; letter-spacing:0.04em;}

/* ---------- contact ---------- */
.contact{text-align:center; max-width:640px; margin:0 auto;}
.contact h2{font-size:clamp(28px,4.2vw,44px); font-weight:800; letter-spacing:-0.035em; margin:12px 0 0;}
.contact p{color:var(--muted); margin:16px auto 0; font-size:16px;}
.mail{display:inline-flex; align-items:center; gap:10px; margin-top:28px; padding:15px 28px; border-radius:16px;
  font-weight:800; font-size:16px; letter-spacing:-0.01em; color:#fff!important;
  background:linear-gradient(180deg,var(--merc-hi),var(--merc) 55%,#C4271C);
  box-shadow:0 12px 34px rgba(229,55,43,0.42), inset 0 1px 0 rgba(255,255,255,0.35);
  transition:transform .15s ease, box-shadow .2s ease;}
.mail:hover{transform:translateY(-2px); box-shadow:0 18px 44px rgba(229,55,43,0.55);}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line-2); margin-top:0; padding:40px 0 64px; color:var(--muted); font-size:13px;}
.footer .row{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start;}
.footer a{color:var(--muted);} .footer a:hover{color:var(--chrome);}
.footer .note{max-width:46ch; line-height:1.6;}
.footer-brand{display:inline-flex; align-items:center; gap:9px; margin-bottom:14px;}
.footer-brand .lm{height:24px; width:auto;}
.footer-brand .wm{font-weight:800; font-size:15px; letter-spacing:-0.02em; color:var(--chrome);}
.footer .links{display:flex; gap:30px; flex-wrap:wrap;}
.footer .links .col{display:flex; flex-direction:column; gap:9px;}
.footer .links .ct{font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--faint); margin-bottom:2px;}
.footer-legal{margin-top:30px; padding-top:20px; border-top:1px solid var(--line-2);
  font-family:var(--mono); font-size:11.5px; color:var(--faint);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.footer-legal .psst{color:var(--faint);}
.footer-legal .psst:hover{color:var(--merc-hi); cursor:default;}

/* ---------- entrance animation ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}

@media (max-width:860px){
  .flag{grid-template-columns:1fr;}
  .flag-shot{order:-1; padding:30px 30px 0;}
  .flag-phone{transform:none; width:min(58%,210px);}
  .flag:hover .flag-phone{transform:translateY(-4px);}
  .stats{grid-template-columns:repeat(2,1fr);}
  .more-labels{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr;}
  .nav-links a:not(.nav-cta){display:none;}
  .footer-legal{flex-direction:column;}
}
@media (prefers-reduced-motion:reduce){
  .tk-track{animation:none;} .reveal{transition:none; opacity:1; transform:none;}
  .hero .eyebrow .beat{animation:none;} .hero-wm.sweep::after{animation:none;}
  html{scroll-behavior:auto;}
}