/* ============================================================
   MONARCH — Flagship marketing site
   Premium · dark · metallic silver · clean
   Loads after colors_and_type.css
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--ink);color:var(--fg-1)}
body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(255,184,48,.20)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* film grain — premium texture, very subtle */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
  mix-blend-mode:overlay;
}

/* ---------- layout ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 48px}
.wrap-narrow{max-width:920px;margin:0 auto;padding:0 48px}
.section{padding:140px 0;position:relative}
.section-sm{padding:96px 0;position:relative}
.hairline{height:1px;background:var(--hairline);border:none;margin:0}

/* ---------- type helpers ---------- */
.eyebrow{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.26em;color:var(--gold);margin:0}
.serif{font-family:var(--font-serif);font-weight:400;letter-spacing:-.01em}
.display{font-family:var(--font-serif);font-weight:400;line-height:1.02;letter-spacing:-.015em}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.lead{font-size:18px;line-height:1.62;color:var(--fg-2);font-weight:400}
.body{font-size:15px;line-height:1.66;color:var(--fg-2)}
.fg1{color:var(--fg-1)}.fg2{color:var(--fg-2)}.fg3{color:var(--fg-3)}

/* metal text */
.metal-text{
  background:linear-gradient(92deg,#6b6b6b 0%,#cfcfcf 28%,#ffffff 48%,#cfcfcf 64%,#7a7a7a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- buttons ---------- */
.btn{font-family:var(--font-sans);font-size:16px;font-weight:600;border-radius:999px;border:none;cursor:pointer;
  padding:15px 34px;display:inline-flex;align-items:center;justify-content:center;gap:10px;position:relative;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),filter .25s,box-shadow .3s;white-space:nowrap}
.btn:active{transform:scale(.975)}
.btn svg{width:17px;height:17px}

.btn-primary{color:#0b0b0b;background:linear-gradient(92deg,#3a3a3a 0%,#8e8d8d 20%,#eaeaea 42%,#ffffff 50%,#eaeaea 58%,#8e8d8d 80%,#3a3a3a 100%);
  background-size:200% 100%;background-position:50% 0;box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.6)}
.btn-primary:hover{filter:brightness(1.05);background-position:64% 0;box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 28px rgba(234,234,234,.12),inset 0 1px 0 rgba(255,255,255,.7)}

.btn-secondary{color:var(--fg-1);background:linear-gradient(var(--ink),var(--ink)) padding-box,
  linear-gradient(135deg,#3a3a3a,#9a9a9a 40%,#eaeaea 50%,#9a9a9a 60%,#3a3a3a) border-box;border:1.4px solid transparent}
.btn-secondary:hover{background:linear-gradient(#1c1c1c,#1c1c1c) padding-box,
  linear-gradient(135deg,#5a5a5a,#cfcfcf 40%,#ffffff 50%,#cfcfcf 60%,#5a5a5a) border-box}

.btn-ghost{background:none;color:var(--fg-2);font-weight:500;padding:15px 10px}
.btn-ghost:hover{color:var(--gold)}
.btn-ghost-gold:hover{background:linear-gradient(95deg,#9a6a16 0%,#e7b24e 32%,#fff3cf 50%,#e7b24e 68%,#9a6a16 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-ghost-gold:hover svg{stroke:#f4d489}
.btn-sm{font-size:14px;padding:11px 22px}

/* App Store badge */
.appstore{display:inline-flex;align-items:center;gap:13px;padding:11px 22px;border-radius:14px;
  background:linear-gradient(180deg,#1c1c1c,#141414);border:1px solid var(--hairline-2);color:var(--fg-1);
  transition:border-color .25s,transform .2s}
.appstore:hover{border-color:rgba(255,255,255,.28);transform:translateY(-1px)}
.appstore .as-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.appstore .sm{font-size:11px;letter-spacing:.02em;color:var(--fg-2);line-height:1.1}
.appstore .lg{font-size:18px;font-weight:600;line-height:1.15;margin-top:2px;letter-spacing:-.01em}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:20px;padding:32px;
  box-shadow:var(--shadow-card);position:relative;overflow:hidden}
.card-premium{background:#161513;border:1px solid transparent;
  background:linear-gradient(#161513,#161513) padding-box,var(--border-silver) border-box;box-shadow:var(--shadow-reserve)}
.card-hover{transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.card-hover:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.16);box-shadow:0 22px 50px rgba(0,0,0,.5)}

/* ---------- AI operating-system diagram ---------- */
.ai-ripple{fill:none;stroke:var(--gold);stroke-linecap:round;opacity:0;
  transform-box:view-box;transform-origin:50% 50%;
  animation:mon-ripple 2.7s ease-out infinite}
@keyframes mon-ripple{
  0%{transform:scale(.25);opacity:0}
  10%{opacity:.4}
  82%{opacity:.18}
  100%{transform:scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ai-ripple{animation:none;opacity:.14;transform:scale(1)}}
.ai-core-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,184,48,.22);
  animation:mon-core-ring 3.4s ease-out infinite}
@keyframes mon-core-ring{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
/* mobile concentric ripples — expand outward around the core, fitted to phone */
.ai-mring{position:absolute;left:50%;top:50%;width:248px;height:248px;margin:-124px 0 0 -124px;border-radius:50%;
  border:1px solid var(--gold);opacity:0;pointer-events:none;animation:mon-mring 4.2s ease-out infinite}
@keyframes mon-mring{0%{transform:scale(.34);opacity:0}14%{opacity:.42}82%{opacity:.1}100%{transform:scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.ai-mring{animation:none;opacity:.12;transform:scale(.78)}}

/* ---------- emblem (silver-masked) ---------- */
.emblem{display:inline-block;background:var(--silver-sweep-diagonal);
  -webkit-mask-image:var(--emblem-src);mask-image:var(--emblem-src);
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}

/* ---------- status pulse ---------- */
.dot{width:7px;height:7px;border-radius:999px;background:var(--gold);animation:mon-pulse 2.6s ease-out infinite}
@keyframes mon-pulse{0%{box-shadow:0 0 0 0 rgba(255,184,48,.5)}70%{box-shadow:0 0 0 9px rgba(255,184,48,0)}100%{box-shadow:0 0 0 0 rgba(255,184,48,0)}}
.dot-silver{background:linear-gradient(135deg,#8e8d8d,#f4f4f4 50%,#8e8d8d);animation:mon-pulse-silver 2.6s ease-out infinite}
.dot-gold-metal{background:linear-gradient(95deg,#9a6a16 0%,#e7b24e 32%,#fff3cf 50%,#e7b24e 68%,#9a6a16 100%);animation:mon-pulse 2.6s ease-out infinite}
@keyframes mon-pulse-silver{0%{box-shadow:0 0 0 0 rgba(234,234,234,.5)}70%{box-shadow:0 0 0 9px rgba(234,234,234,0)}100%{box-shadow:0 0 0 0 rgba(234,234,234,0)}}

/* ============================================================
   3D MEMBERSHIP PASS
   ============================================================ */
.pass-stage{perspective:1500px;perspective-origin:50% 40%}
.pass3d{position:relative;width:480px;max-width:88vw;aspect-ratio:1.62/1;border-radius:24px;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,8deg)) rotateY(calc(var(--ry,-14deg) + var(--flip,0deg)));
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
  will-change:transform}
.pass3d.flipped{--flip:180deg}
.pass3d.floating{animation:pass-float 9s ease-in-out infinite}
@keyframes pass-float{0%,100%{translate:0 -6px}50%{translate:0 10px}}
@media (prefers-reduced-motion:reduce){.pass3d.floating{animation:none}}

.pass3d .face{position:absolute;inset:0;border-radius:24px;overflow:hidden;
  background:radial-gradient(125% 135% at 12% 6%,#3a2a18 0%,#1d1712 36%,#121110 100%);
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 18px 60px rgba(89,52,25,.28),inset 0 1px 0 rgba(255,255,255,.06)}
.pass3d .pass-sheen{position:absolute;inset:0;background:var(--silver-sweep-diagonal);opacity:.10;mix-blend-mode:screen}
/* moving specular highlight, driven by --mx/--my */
.pass3d .spec{position:absolute;inset:-20%;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:radial-gradient(420px 420px at var(--mx,30%) var(--my,22%),rgba(255,255,255,.5),rgba(255,255,255,.08) 30%,transparent 60%)}
.pass3d .glow{position:absolute;left:-12%;top:-18%;width:62%;height:80%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,184,48,.28),rgba(255,184,48,0) 65%)}
.pass3d .pborder{position:absolute;inset:0;border-radius:24px;padding:1.3px;
  background:linear-gradient(135deg,rgba(255,184,48,.6),rgba(255,184,48,.08) 38%,rgba(234,234,234,.32) 70%,rgba(255,184,48,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.pass3d .stamp{position:absolute;right:5.5%;top:8%;width:18%;aspect-ratio:1;background:var(--silver-sweep-diagonal);opacity:.6;
  -webkit-mask-image:var(--emblem-src);mask-image:var(--emblem-src);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transform:translateZ(28px)}
/* two-sided faces */
.pass-face{position:absolute;inset:0;border-radius:24px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pass-back{transform:rotateY(180deg)}
/* front: RESERVE + engraved emblem */
.pass3d .pf-reserve{position:absolute;top:11%;left:0;right:0;text-align:center;font-size:clamp(13px,2.9vw,17px);letter-spacing:.42em;color:var(--gold);padding-left:.42em}
.pass3d .pf-emblem{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:33%;aspect-ratio:1;background:var(--silver-sweep-diagonal);opacity:.5;
  -webkit-mask-image:var(--emblem-src);mask-image:var(--emblem-src);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.5)) drop-shadow(0 -1px 0 rgba(255,255,255,.08))}
.pass3d .pf-tag{position:absolute;bottom:10%;left:0;right:0;text-align:center;font-family:var(--font-mono);font-size:clamp(7px,1.6vw,9px);letter-spacing:.3em;color:var(--fg-3)}
/* back: member details + barcode */
.pass3d .pb-name{position:absolute;left:8%;top:27%;font-family:var(--font-serif);font-size:clamp(20px,4.7vw,30px);color:var(--fg-1)}
.pass3d .pb-since{position:absolute;left:8%;top:42%;font-family:var(--font-mono);font-size:clamp(8px,1.8vw,10px);letter-spacing:.16em;color:var(--fg-3)}
.pass3d .pb-idlabel{position:absolute;left:8%;top:58%;font-size:clamp(7px,1.6vw,9px);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.pass3d .pb-id{position:absolute;left:8%;top:65%;font-family:var(--font-mono);font-size:clamp(10px,2.4vw,13px);letter-spacing:.14em;color:var(--fg-1)}
.pass3d .pb-barcode{position:absolute;left:8%;right:8%;bottom:10%;height:14%;display:flex;align-items:stretch;gap:0;opacity:.9}
.pass3d .pb-barcode span{display:block;height:100%}
/* reflection */
.pass-reflection{position:absolute;left:0;right:0;top:100%;height:60%;
  transform:rotateX(180deg) translateY(2px) scaleY(.9);transform-origin:top;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.28),transparent 55%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.28),transparent 55%);opacity:.5;pointer-events:none;filter:blur(1px)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;padding-top:env(safe-area-inset-top,0px);transition:background .4s,border-color .4s,backdrop-filter .4s}
/* solid dark fill for the status-bar inset so page content never peeks through above the nav */
.statusbar-scrim{position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:#0d0d0d;z-index:199;pointer-events:none}
.nav.scrolled .statusbar-scrim{background:rgba(12,12,12,.94)}
.nav.scrolled{background:rgba(12,12,12,.94);backdrop-filter:blur(18px) saturate(1.2);border-bottom:1px solid var(--hairline)}
.nav-inner{display:flex;align-items:center;height:76px}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:34px}
.nav-links a.link{font-size:14px;color:var(--fg-2);transition:color .2s}
.nav-links a.link:hover{color:var(--fg-1)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}.reveal-d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* spotlight bg used in hero/reserve */
.spotlight{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,rgba(120,90,55,.22),rgba(15,15,15,0) 55%)}
.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 200px 40px rgba(0,0,0,.6)}

/* divider mark */
.divmark{display:flex;align-items:center;justify-content:center;gap:18px;color:var(--fg-4)}
.divmark .ln{height:1px;width:60px;background:var(--hairline-2)}

@media (max-width:900px){
  .wrap,.wrap-narrow{padding:0 24px}
  .section{padding:90px 0}.section-sm{padding:64px 0}
  .nav-links{gap:18px}.nav-links .hide-sm{display:none}
}

/* ============================================================
   PRODUCT SHOWCASE — scroll-pinned phone + callouts
   ============================================================ */
.sc-phone-screen{position:absolute;inset:0;border-radius:42px;overflow:hidden;background:#0b0b0b}
.sc-screen{position:absolute;inset:0;opacity:0;z-index:1;background:#0b0b0b;transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);transform:scale(1.02)}
.sc-screen.on{opacity:1;z-index:2;transform:none}
.sc-screen img{width:100%;height:100%;object-fit:cover;display:block}

/* callouts */
.sc-callout{position:absolute;display:flex;align-items:center;gap:0;opacity:0;transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.sc-callout.on{opacity:1;transform:none!important}
.sc-callout .co-text .co-t{font-family:var(--font-serif);font-size:18px;color:var(--fg-1);line-height:1.2}
.sc-callout .co-text .co-d{font-size:12.5px;line-height:1.5;color:var(--fg-3);margin-top:5px;max-width:200px}
.sc-line{height:1px;background:linear-gradient(var(--co-dir,90deg),rgba(255,255,255,.5),rgba(255,255,255,.12));flex:none}
.sc-dot{width:6px;height:6px;border-radius:50%;background:#fff;flex:none;box-shadow:0 0 8px rgba(255,255,255,.5)}

/* left side */
.sc-callout.left{flex-direction:row;transform:translateX(-14px)}
.sc-callout.left .co-text{text-align:right;order:1}
.sc-callout.left .sc-line{order:2;background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.5))}
.sc-callout.left .sc-dot{order:3}
/* right side */
.sc-callout.right{flex-direction:row;transform:translateX(14px)}
.sc-callout.right .sc-dot{order:1}
.sc-callout.right .sc-line{order:2}
.sc-callout.right .co-text{order:3;text-align:left}

/* gold (Reserve) */
.sc-callout.gold .co-text .co-t{background:linear-gradient(95deg,#6e4708,#b8801f 30%,#f5c453 50%,#ffb830 62%,#b8801f 78%,#6e4708);-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-callout.gold .sc-dot{background:#ffb830;box-shadow:0 0 10px rgba(255,184,48,.7)}
.sc-callout.gold.left .sc-line{background:linear-gradient(90deg,rgba(255,184,48,.12),rgba(255,184,48,.6))}
.sc-callout.gold.right .sc-line{background:linear-gradient(90deg,rgba(255,184,48,.6),rgba(255,184,48,.12))}

.sc-roman{font-family:var(--font-serif);transition:color .6s ease}

/* placeholder screen */
.sc-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(120% 90% at 50% 30%,#161616,#0b0b0b)}

@media (max-width:900px){
  .sc-callout{display:none}
}
@media (max-width:760px){
  .rsv-split{grid-template-columns:1fr !important;gap:46px !important}
  .rsv-perks{grid-template-columns:1fr 1fr !important;gap:14px !important;margin-top:56px !important}
  .beyond-grid{grid-template-columns:1fr !important}
  .disc-factors{grid-template-columns:1fr 1fr !important;gap:24px 20px !important}
  .marquee-grid{grid-template-columns:1fr 1fr !important;gap:40px 28px !important;max-width:460px;margin-left:auto;margin-right:auto}
}
@media (max-width:430px){
  .rsv-perks{grid-template-columns:1fr !important}
}