/* ====================================================================
   ELITE RESTRUCTURE — base framework
   Shared tokens + primitives. Each Direction adds personality on top.
   ==================================================================== */

:root{
  /* === Two-blue stack === */
  --navy:#001C64;     /* foundation, headlines, footer */
  --navy-2:#0A2780;
  --cobalt:#0070BA;   /* primary CTA, action, links */
  --sky:#009CDE;      /* secondary, hover */
  --gold:#FFC439;     /* premium / pay-now / the heartbeat CTA */
  --gold-2:#E6A91A;

  /* === Surface === */
  --page:#FAF8F5;     /* off-white page */
  --surface:#FFFFFF;  /* card white */
  --soft:#F5F7FA;     /* subtle surface */
  --hairline:#E5E7EB;
  --divider:#D1D5DB;

  /* === Text === */
  --ink:#001435;
  --slate:#2C2E2F;
  --muted:#687173;
  --on-dark:#FFFFFF;
  --on-dark-2:#C7D2E8;
  --on-dark-3:#8AA0C8;

  /* === Semantic === */
  --success:#008C44;
  --error:#E22D2D;

  /* === Shadow (blue-tinted, never gray) === */
  --shadow-card:0 2px 8px rgba(0,28,100,.08);
  --shadow-elev:0 8px 24px rgba(0,28,100,.12);
  --shadow-cta: 0 6px 20px rgba(0,112,186,.28);
  --shadow-gold:0 6px 22px rgba(255,196,57,.45);

  /* === Radii === */
  --r-pill:999px;
  --r-card:16px;
  --r-hero:24px;
  --r-input:8px;
  --r-tag:4px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--page);
  color:var(--ink);
  font-family:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv11";
}
body{overflow-x:hidden;font-variant-numeric:tabular-nums}
::selection{background:var(--cobalt);color:#fff}

/* ===== TYPE ===== */
.hero-h{
  font-family:inherit;
  font-weight:700;
  font-size:clamp(48px, 9vw, 104px);
  line-height:1.02;
  letter-spacing:-.025em;
  color:var(--navy);
}
.hero-h em{font-style:normal;color:var(--cobalt)}
.hero-h .gold{color:var(--gold-2)}

.h1{font-weight:700;font-size:clamp(40px,5.8vw,72px);line-height:1.06;letter-spacing:-.02em;color:var(--navy)}
.h2{font-weight:700;font-size:clamp(28px,3.2vw,40px);line-height:1.1;letter-spacing:-.01em;color:var(--navy)}
.h3{font-weight:600;font-size:22px;line-height:1.25;color:var(--navy)}

.lede{font-weight:400;font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--slate);max-width:62ch;text-wrap:pretty}
.lede b{color:var(--ink);font-weight:600}

.body{font-weight:400;font-size:16px;line-height:1.6;color:var(--slate)}
.caption{font-weight:400;font-size:14px;line-height:1.45;color:var(--muted)}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:13px;
  letter-spacing:.04em;
  color:var(--cobalt);
}
.eyebrow::before{content:"";width:24px;height:1.5px;background:currentColor}

.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;
  font:inherit;font-weight:600;font-size:16px;letter-spacing:.005em;
  text-decoration:none;
  border-radius:var(--r-pill);
  border:2px solid transparent;
  cursor:pointer;
  transition:background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
  white-space:nowrap;
}
.btn .ar{display:inline-block;font-weight:600;font-size:18px;transition:transform .25s}
.btn:hover .ar{transform:translateX(3px)}

.btn-primary{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.btn-primary:hover{background:var(--navy);border-color:var(--navy);box-shadow:var(--shadow-cta)}

.btn-secondary{background:transparent;color:var(--cobalt);border-color:var(--cobalt)}
.btn-secondary:hover{background:rgba(0,112,186,.08)}

.btn-gold{background:var(--gold);color:var(--navy);border-color:var(--gold);font-weight:700}
.btn-gold:hover{background:var(--gold-2);border-color:var(--gold-2);box-shadow:var(--shadow-gold)}

.btn-ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost-dark:hover{background:#fff;color:var(--navy);border-color:#fff}

/* ===== CARDS ===== */
.card{background:var(--surface);border-radius:var(--r-card);padding:32px;box-shadow:var(--shadow-card);transition:box-shadow .25s, transform .25s}
.card:hover{box-shadow:var(--shadow-elev)}
.card-hero{border-radius:var(--r-hero);padding:40px}

/* ===== LAYOUT ===== */
.container{max-width:1280px;margin:0 auto;padding:0 28px}
.section{padding:96px 0}
.section-lg{padding:128px 0}

.section-head{display:flex;flex-direction:column;gap:16px;margin-bottom:64px;max-width:780px}

/* ===== TOPBAR / NAV ===== */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:150;
  padding:18px 28px;
  display:flex;justify-content:space-between;align-items:center;
  backdrop-filter:saturate(1.1) blur(8px);
  background:rgba(250,248,245,.85);
  border-bottom:1px solid var(--hairline);
}
.topbar.dark{background:rgba(0,28,100,.85);border-bottom-color:rgba(255,255,255,.08)}
.topbar.dark .mark{color:#fff}
.topbar.dark .right{color:var(--on-dark-2)}

.topbar .mark{font-weight:700;font-size:18px;color:var(--navy);display:flex;align-items:center;gap:10px;text-decoration:none}
.topbar .mark::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--cobalt);box-shadow:0 0 0 3px rgba(0,112,186,.15)}
.topbar .right{display:flex;gap:18px;align-items:center;font-size:13px;font-weight:500;color:var(--muted)}
.topbar .right .live{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(0,140,68,.6);animation:pulseDot 1.6s ease-out infinite;display:inline-block;margin-right:8px;transform:translateY(-1px)}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(0,140,68,.6)}100%{box-shadow:0 0 0 10px rgba(0,140,68,0)}}

/* ===== TICKER ===== */
.ticker{
  position:fixed;top:74px;right:28px;z-index:160;
  background:#fff;border:1px solid var(--hairline);border-radius:12px;
  padding:10px 14px;box-shadow:var(--shadow-card);
  text-align:right;
}
.ticker .l{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.02em}
.ticker .v{font-weight:700;font-size:18px;color:var(--navy);margin-top:2px;font-variant-numeric:tabular-nums;transition:color .25s}
.ticker.flash .v{color:var(--cobalt)}

/* ===== PROGRESS ===== */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none}
.progress > i{display:block;height:100%;width:0;background:var(--cobalt);box-shadow:0 0 12px rgba(0,112,186,.6)}

/* ===== CURSOR ===== */
/* Use the visitor's normal system cursor */
.cursor,.cursor-trail{display:none !important}

/* ===== RECEIPT (mono allowed here — semantic thermal print) ===== */
.receipt{
  background:#FFFDF7;border-radius:var(--r-card);
  padding:32px 30px;position:relative;
  color:var(--ink);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  box-shadow: 0 24px 60px -28px rgba(0,28,100,.45);
}
.receipt::before,.receipt::after{
  content:"";position:absolute;left:0;right:0;height:14px;
  background-image:radial-gradient(circle at 8px 0, transparent 7px, #FFFDF7 7.5px);
  background-size:16px 14px;background-color:transparent;
}
.receipt::before{top:-14px;transform:scaleY(-1)}
.receipt::after{bottom:-14px}
.receipt .head{font-family:"DM Sans",sans-serif;font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--navy);margin-bottom:4px}
.receipt .sub{font-family:"DM Sans",sans-serif;font-weight:500;font-size:11px;color:var(--muted);margin-bottom:20px}
.receipt .line{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px dashed #d9d2bf;font-size:14px}
.receipt .line .k{font-family:"DM Sans",sans-serif;font-weight:500;color:var(--muted);font-size:12px}
.receipt .line .v{font-weight:700;font-size:17px;color:var(--ink)}
.receipt .line.apr{border-bottom:none;padding-top:22px}
.receipt .line.apr .k{color:var(--error);font-weight:600;font-size:12px}
.receipt .line.apr .v{color:var(--error);font-size:26px}
.receipt .stamp{margin-top:18px;padding-top:14px;border-top:1px solid #d9d2bf;font-family:"DM Sans",sans-serif;font-weight:500;font-size:11px;color:var(--muted);display:flex;justify-content:space-between}

/* ===== HUMAN PORTRAIT (shared) ===== */
.portrait{aspect-ratio:4/5;background:#001435;border-radius:var(--r-hero);position:relative;overflow:hidden;box-shadow:var(--shadow-elev)}
.portrait svg{width:100%;height:100%;display:block}
.availability{
  position:absolute;top:18px;right:18px;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.92);border-radius:var(--r-pill);
  padding:7px 12px 7px 10px;
  font-size:12px;font-weight:600;color:var(--ink);
  box-shadow:var(--shadow-card);
}
.availability::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--success);
  box-shadow:0 0 0 0 rgba(0,140,68,.7);animation:pulseDot 1.6s ease-out infinite;
}

/* ===== TWEAKS PANEL ===== */
#tweaks{
  position:fixed;bottom:18px;right:18px;z-index:300;
  background:#fff;border-radius:var(--r-pill);
  padding:10px 14px;box-shadow:var(--shadow-elev);
  display:none;gap:10px;align-items:center;
  font-size:12px;font-weight:600;color:var(--ink);
}
#tweaks span{padding-right:4px;color:var(--muted)}
#tweaks button{font:inherit;background:transparent;color:var(--ink);border:1.5px solid var(--hairline);border-radius:var(--r-pill);padding:6px 12px;cursor:pointer}
#tweaks button.active{background:var(--cobalt);border-color:var(--cobalt);color:#fff}