@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Bebas+Neue&family=Crimson+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   PRELOADER — Friday Technology inspired, AFG branded
   ============================================================ */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: opacity 0.6s cubic-bezier(.16,1,.3,1), visibility 0.6s;
}

.preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* Brand logo mark */
.preloader-logo {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  opacity: 0;
  animation: preloader-fade-in 0.6s 0.2s var(--ease, cubic-bezier(.16,1,.3,1)) forwards;
}

.preloader-logo .dot {
  color: #1E3A8A;
}

/* Spinning ring */
.preloader-ring {
  position: relative;
  width: 64px;
  height: 64px;
  opacity: 0;
  animation: preloader-fade-in 0.6s 0.3s cubic-bezier(.16,1,.3,1) forwards;
}

.preloader-ring::before,
.preloader-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

/* outer pulse */
.preloader-ring::before {
  border: 2px solid rgba(30, 58, 138,0.15);
  animation: preloader-pulse 2s ease-in-out infinite;
}

/* spinning arc */
.preloader-ring::after {
  border: 2px solid transparent;
  border-top-color: #1E3A8A;
  border-right-color: rgba(30, 58, 138,0.4);
  animation: preloader-spin 0.9s linear infinite;
}

/* Center dot inside ring */
.preloader-ring-dot {
  position: absolute;
  inset: 50%;
  transform: translate(-50%,-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1E3A8A;
  animation: preloader-dot-pulse 1.8s ease-in-out infinite;
}

/* Loading bar */
.preloader-bar-wrap {
  width: 160px;
  height: 2px;
  background: rgba(0,0,0,0.08);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  animation: preloader-fade-in 0.6s 0.5s cubic-bezier(.16,1,.3,1) forwards;
}

.preloader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1E3A8A, #00bfff);
  border-radius: 2px;
  animation: preloader-fill 1.8s cubic-bezier(.4,0,.2,1) 0.6s forwards;
}

/* Loading label */
.preloader-label {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
  opacity: 0;
  animation: preloader-fade-in 0.6s 0.6s cubic-bezier(.16,1,.3,1) forwards;
}

/* Keyframes */
@keyframes preloader-fade-in {
  to { opacity: 1; }
}

@keyframes preloader-spin {
  to { transform: rotate(360deg); }
}

@keyframes preloader-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%       { transform: scale(1.15); opacity: 0.2; }
}

@keyframes preloader-dot-pulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1); }
  50%       { transform: translate(-50%,-50%) scale(1.5); }
}

@keyframes preloader-fill {
  0%   { width: 0%; }
  60%  { width: 75%; }
  100% { width: 100%; }
}

/* PAGE TRANSITION — smooth inter-page sweep */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.page-transition .pt-layer {
  position: absolute;
  inset: 0;
  background: #f5f5f7;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(.76,0,.24,1);
}

.page-transition.active .pt-layer {
  transform: translateY(0%);
}

/* Prevent FOUC — body hidden until preloader fires */
body.preloading {
  overflow: hidden;
}

/* ============================================================
   THE INNER-CIRCLE · APPLE-STYLE GLOBAL DESIGN SYSTEM
   White · Dodger Blue theme · Gold accent · Inter / Outfit sans-serif
   ============================================================ */

:root {
  --bg:          #ffffff;
  --bg-alt:      #f5f5f7;
  --bg-dark:     #ffffff;
  --text:        #1d1d1f;
  --text-muted:  #86868b;
  --text-light:  #1d1d1f;
  --accent:      #1E3A8A;
  --accent-hover:#2A52CC;
  --gold:        #d4af37;
  --gold-hover:  #bfa02c;
  --gold-deep:   #9a7d1e;
  --gold-grad:   linear-gradient(135deg, #e7c75a 0%, #d4af37 45%, #b8901f 100%);
  --ink:         #14110a;
  --border:      rgba(0, 0, 0, .08);
  --border-light:rgba(0, 0, 0, .12);

  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-bebas:  'Bebas Neue', 'Outfit', sans-serif;
  --font-serif:  'Crimson Pro', Georgia, serif;

  --nav-h:       56px;
  --ease:        cubic-bezier(.16, 1, 0.3, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* TYPOGRAPHY ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: inherit;
}
h1, .h1 { font-size: clamp(40px, 5.5vw, 64px); font-weight: 500; }
h2, .h2 { font-size: clamp(30px, 3.8vw, 44px); font-weight: 500; }
h3, .h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 500; }
p { font-size: 15px; line-height: 1.55; }
.lead { font-size: 17px; line-height: 1.5; }

/* NAVIGATION ─────────────────────────────────────────────────
 * Apple glass header style. Translucent white floating pill/banner.
 * ─────────────────────────────────────────────────────────── */
.tnav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h); z-index: 1000;
  display: flex; align-items: center;
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: top .25s var(--ease), left .25s var(--ease), right .25s var(--ease),
              width .25s var(--ease), height .25s var(--ease), background .2s var(--ease),
              border-radius .25s var(--ease), border-color .2s var(--ease),
              box-shadow .2s var(--ease);
}
.tnav::before {
  content: '';
  display: none;
}

.tnav.scrolled, .tnav.on-dark {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 4px 18px rgba(0,0,0,.04);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

@media (min-width: 901px) {
  .tnav.scrolled {
    top: 14px;
    left: 24px;
    right: 24px;
    width: calc(100% - 48px);
    margin: 0 auto;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05),
                0 2px 8px  rgba(0, 0, 0, .02);
    height: 52px;
  }
  body.nav-on-dark .tnav.scrolled {
    background: rgba(255, 255, 255, .92);
    border-color: rgba(0, 0, 0, .08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
  }
  body.nav-on-dark .tnav.scrolled .tnav-logo,
  body.nav-on-dark .tnav.scrolled .tnav-links a,
  body.nav-on-dark .tnav.scrolled .tnav-right a {
    color: var(--text);
    text-shadow: none;
  }
  body.nav-on-dark .tnav.scrolled .tnav-links a:hover,
  body.nav-on-dark .tnav.scrolled .tnav-right a:hover {
    background: rgba(0, 0, 0, .04);
  }
}
.tnav.scrolled::before, .tnav.on-dark::before { opacity: 0; }

.tnav-logo { font-weight: 600; font-size: 16px; letter-spacing: -.01em; color: var(--text); margin-right: 32px; white-space: nowrap; transition: color .25s var(--ease); }
.tnav-logo .dot { color: var(--accent); }
.tnav-links { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.tnav-links a, .tnav-right a {
  font-size: 14px; font-weight: 500;
  padding: 6px 14px; border-radius: 6px;
  color: var(--text);
  transition: background .15s var(--ease), color .25s var(--ease);
}
.tnav-links a:hover, .tnav-right a:hover { background: rgba(0, 0, 0, .04); }
.tnav-links a.active { color: var(--accent); }
.tnav-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }

/* Keep links dark on header regardless of body class since we have a solid glass header */
body.nav-on-dark .tnav:not(.scrolled) .tnav-logo,
body.nav-on-dark .tnav:not(.scrolled) .tnav-links a,
body.nav-on-dark .tnav:not(.scrolled) .tnav-right a {
  color: var(--text);
  text-shadow: none;
}
body.nav-on-dark .tnav:not(.scrolled) .tnav-toggle span { background: var(--text); }
body.nav-on-dark .tnav:not(.scrolled) .tnav-links a:hover,
body.nav-on-dark .tnav:not(.scrolled) .tnav-right a:hover { background: rgba(0, 0, 0, .04); }

/* Onboarding CTA uses Gold to highlight where we want attention to flow */
body.nav-on-dark .tnav:not(.scrolled) .tnav-cta {
  background: var(--gold);
  color: #000;
  text-shadow: none;
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 600;
}
body.nav-on-dark .tnav:not(.scrolled) .tnav-cta:hover { background: var(--gold-hover); }
.tnav-cta {
  background: var(--gold);
  color: #000 !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  font-weight: 600;
}
.tnav-cta:hover { background: var(--gold-hover) !important; }

.tnav-toggle { display: none; flex-direction: column; justify-content: center; width: 28px; height: 28px; margin-left: auto; }
.tnav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--text); margin: 2px auto; transition: transform .3s var(--ease), opacity .2s var(--ease); }
.tnav-toggle.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.tnav-toggle.open span:nth-child(2) { opacity: 0; }
.tnav-toggle.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.tnav-mobile { position: fixed; inset: var(--nav-h) 0 0 0; background: var(--bg); z-index: 999; padding: 24px; display: none; flex-direction: column; gap: 4px; overflow-y: auto; }
.tnav-mobile.open { display: flex; }
.tnav-mobile a { display: block; padding: 14px 16px; font-size: 16px; font-weight: 500; border-radius: 8px; color: var(--text); }
.tnav-mobile a:hover { background: var(--bg-alt); }

@media (max-width: 900px) {
  .tnav-links, .tnav-right { display: none; }
  .tnav-toggle { display: flex; }
}

/* BUTTONS (Tesla paired-CTA pattern) ────────────────────── */
.tbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 256px; height: 42px; padding: 0 24px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 500; letter-spacing: .02em;
  text-align: center; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: all .35s var(--ease);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}
.tbtn::after {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 30%; height: 200%;
  background: rgba(255, 255, 255, 0.16);
  transform: rotate(30deg);
  transition: transform .6s var(--ease);
  pointer-events: none;
}
.tbtn:hover::after {
  transform: translate(400%, -50%) rotate(30deg);
}

.tbtn-primary   { background: rgba(23,26,32,.85); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.08); }
.tbtn-primary:hover { background: rgba(23,26,32,1); box-shadow: 0 10px 25px rgba(0,0,0,0.12); }
.tbtn-secondary { background: rgba(244,244,244,.7); color: var(--text); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(0,0,0,0.04); }
.tbtn-secondary:hover { background: rgba(244,244,244,.95); box-shadow: 0 10px 25px rgba(0,0,0,0.04); }
.tbtn-accent    { background: var(--gold); color: #000; font-weight: 600; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2); }
.tbtn-accent:hover { background: var(--gold-hover); color: #000; box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4); }
.tbtn-ghost     { background: transparent; color: var(--text); border-color: rgba(0,0,0,.15); }
.tbtn-ghost:hover { border-color: var(--text); background: rgba(0,0,0,.02); }

.tbtn-on-dark.tbtn-primary   { background: rgba(255,255,255,.92); color: var(--text); border-color: transparent; }
.tbtn-on-dark.tbtn-primary:hover { background: #fff; box-shadow: 0 10px 25px rgba(255,255,255,0.15); }
.tbtn-on-dark.tbtn-secondary { background: rgba(0,0,0,.45); color: #fff; border-color: rgba(255,255,255,.15); }
.tbtn-on-dark.tbtn-secondary:hover { background: rgba(0,0,0,.65); box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
.tbtn-on-dark.tbtn-ghost     { color: #fff; border-color: rgba(255,255,255,.35); }
.tbtn-on-dark.tbtn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.tbtn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
@media (max-width: 600px) {
  .tbtn { min-width: 0; width: 100%; max-width: 320px; }
  .tbtn-row { flex-direction: column; align-items: center; gap: 10px; }
}

/* SCROLL-SNAP SECTIONS ──────────────────────────────────── */
.snap-container { scroll-snap-type: y mandatory; height: 100vh; overflow-y: scroll; overflow-x: hidden; }
.tsection {
  position: relative; width: 100%; min-height: 100vh;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: calc(var(--nav-h) + 48px) 24px 60px;
  overflow: hidden;
  background: var(--bg); color: var(--text);
}
.tsection.dark { 
  background: var(--bg-dark); 
  color: var(--text-light); 
  position: relative;
}
.tsection.dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 80% 20%, rgba(30, 58, 138, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 15% 80%, rgba(212, 175, 55, 0.03) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}
.tsection.alt  { background: var(--bg-alt); }
.tsection-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.tsection-bg::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(2px); }
.tsection-top, .tsection-bottom { position: relative; z-index: 2; text-align: center; width: 100%; max-width: 1200px; }
.tsection-top { padding-top: 12px; }
.tsection-eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.tsection-title { font-size: clamp(32px, 4.5vw, 48px); font-weight: 500; letter-spacing: -.015em; line-height: 1.1; }
.tsection-sub { margin-top: 12px; font-size: 15px; opacity: .82; }
.tsection.dark .tsection-sub { opacity: .8; }
.tsection-bottom { padding-bottom: 12px; }
.tsection-disclaimer { font-size: 11px; margin-top: 14px; opacity: .55; }
.tsection-cue { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 22px; animation: bounce 2s ease-in-out infinite; opacity: .55; }
@keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }

/* GENERIC LAYOUT (non-snap pages) ───────────────────────── */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 720px; }
.container-md { max-width: 960px; }
.page-pad-top { padding-top: calc(var(--nav-h) + 64px); }
.section-pad { padding: 96px 0; }
.section-pad-sm { padding: 64px 0; }

.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.title-lg { font-size: clamp(32px, 4.5vw, 48px); font-weight: 500; letter-spacing: -.015em; line-height: 1.1; }
.title-md { font-size: clamp(24px, 2.6vw, 32px); font-weight: 500; letter-spacing: -.01em; line-height: 1.15; }
.sub-lg { font-size: 17px; line-height: 1.5; color: var(--text-muted); margin-top: 14px; }
.sub-md { font-size: 15px; line-height: 1.55; color: var(--text-muted); margin-top: 10px; }
.text-center { text-align: center; }
.muted { color: var(--text-muted); }
.accent { color: var(--accent); }

/* GRID HELPERS ─────────────────────────────────────────── */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* CARDS ────────────────────────────────────────────────── */
.tcard { 
  background: var(--bg); 
  border: 1px solid var(--border); 
  border-radius: 12px; 
  padding: 28px; 
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease); 
  box-shadow: 0 4px 20px rgba(0, 0, 0, .01);
}
.tcard:hover { 
  border-color: rgba(30, 58, 138, .3); 
  transform: translateY(-4px); 
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, .04),
    0 0 0 1px rgba(30, 58, 138, 0.08); 
}
.tcard-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.tcard-title { font-size: 22px; font-weight: 500; letter-spacing: -.015em; margin-bottom: 8px; font-family: var(--font-display); }
.tcard-body { font-size: 14px; color: var(--text-muted); line-height: 1.55; }
.tcard-price { font-size: 28px; font-weight: 500; margin: 16px 0 6px; font-family: var(--font-display); }
.tcard-price small { font-size: 13px; color: var(--text-muted); font-weight: 400; }
.tcard-cta { margin-top: 20px; }
.tsection.dark .tcard { background: rgba(0, 0, 0, 0.02); border-color: var(--border); color: var(--text); }
.tsection.dark .tcard:hover { 
  border-color: rgba(30, 58, 138, .4); 
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, .05),
    0 0 20px rgba(30, 58, 138, .12); 
}
.tsection.dark .tcard-eyebrow { color: var(--text-muted); }
.tsection.dark .tcard-body { color: var(--text-muted); }
.tsection.dark .tcard-price small { color: var(--text-muted); }

/* STATS BAR ────────────────────────────────────────────── */
.stats-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--border); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stats-bar .stat { background: var(--bg); padding: 32px 24px; text-align: center; }
.stats-bar .stat strong { display: block; font-size: 32px; font-weight: 500; letter-spacing: -.02em; color: var(--text); margin-bottom: 6px; }
.stats-bar .stat span { font-size: 12px; color: var(--text-muted); letter-spacing: .04em; }

/* FOOTER ───────────────────────────────────────────────── */
.tfooter { background: var(--bg); border-top: 1px solid var(--border); padding: 28px 24px 18px; font-size: 12px; color: var(--text-muted); }
.tfooter-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin-bottom: 16px; }
.tfooter-row a { color: var(--text-muted); font-weight: 500; letter-spacing: .02em; transition: color .15s var(--ease); }
.tfooter-row a:hover { color: var(--text); }
.tfooter-copy { text-align: center; font-size: 11px; color: var(--text-muted); }

/* FORMS ────────────────────────────────────────────────── */
.tinput, .tselect, .ttextarea { width: 100%; padding: 14px 16px; font-family: var(--font-sans); font-size: 15px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; transition: border-color .15s var(--ease); }
.tinput:focus, .tselect:focus, .ttextarea:focus { outline: none; border-color: var(--text); }
.tlabel { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }

/* REVEAL + UTILITIES ──────────────────────────────────── */
.reveal, .reveal-item { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.visible, .reveal-item.is-visible { opacity: 1; transform: none; }

.no-margin { margin: 0 !important; }
.mt-sm { margin-top: 12px; }
.mt-md { margin-top: 24px; }
.mt-lg { margin-top: 48px; }
.mt-xl { margin-top: 80px; }

/* Strip legacy curtain/cursor remnants */
.cinematic-curtain, .curtain-logo, .curtain-line, .ambient-spotlight, .elite-frame,
.new-cursor-dot, .new-cursor-outline, .scroll-progress-container, .scroll-progress-bar { display: none !important; }
.magnetic { transform: none !important; }

@media print { .tnav, .tnav-mobile, .tfooter { display: none !important; } }

/* ============================================================
   GLOWING INNER-CIRCLE ORB (homepage centerpiece)
   ============================================================ */
.ic-orb-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 24px 0;
  perspective: 1000px;
}
.ic-orb {
  position: relative;
  width: clamp(260px, 38vmin, 440px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  animation: ic-orb-float 4.5s ease-in-out infinite;
}
.ic-orb-glow {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      rgba(30, 58, 138, .42) 0%,
      rgba(30, 58, 138, .22) 25%,
      rgba(30, 58, 138, .08) 50%,
      transparent 70%);
  filter: blur(28px);
  animation: ic-orb-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
.ic-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(30, 58, 138, .28);
  box-shadow:
    0 0 60px 4px rgba(30, 58, 138, .25),
    0 0 120px 16px rgba(30, 58, 138, .12),
    inset 0 0 60px rgba(30, 58, 138, .08),
    inset 0 0 1px rgba(255, 255, 255, .5);
  animation: ic-orb-pulse 2.4s ease-in-out infinite;
}
.ic-orb-ring-2 {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .06);
  animation: ic-orb-rotate 10s linear infinite;
}
.ic-orb-ring-2::before,
.ic-orb-ring-2::after {
  content: '';
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px 2px var(--accent);
}
.ic-orb-ring-2::before { top: -2px; left: 50%; transform: translateX(-50%); }
.ic-orb-ring-2::after  { bottom: -2px; left: 50%; transform: translateX(-50%); opacity: .5; }
.ic-orb-core {
  position: relative;
  z-index: 2;
  width: 70%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5) 0%, transparent 60%),
    radial-gradient(circle at center, rgba(255, 255, 255, .92) 0%, rgba(245, 245, 247, .96) 100%);
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow:
    inset 0 0 40px rgba(30, 58, 138, .06),
    0 12px 50px rgba(0, 0, 0, .06);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
}
.ic-orb-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .45);
}
.ic-orb-name {
  display: block;
  font-size: clamp(22px, 3.4vmin, 38px);
  font-weight: 500;
  letter-spacing: -.02em;
  color: #1d1d1f;
  margin-top: 10px;
}
.ic-orb-name .dot { color: var(--accent); }
.ic-orb-tag {
  display: block;
  font-size: 11px;
  color: rgba(0, 0, 0, .45);
  margin-top: 10px;
  letter-spacing: .04em;
}

@keyframes ic-orb-pulse {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.045); }
}
@keyframes ic-orb-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes ic-orb-rotate {
  to { transform: rotate(360deg); }
}

/* ============================================================
   CINEMATIC INTRO (homepage entrance choreography)
   ============================================================ */
.intro-stage {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #000;
  pointer-events: none;
  opacity: 1;
  transition: opacity .8s cubic-bezier(.4, 0, .2, 1) .2s;
}
body.intro-done .intro-stage { opacity: 0; visibility: hidden; }
.intro-stage::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(30, 58, 138, .25) 0%, transparent 50%);
  opacity: 0;
  animation: intro-flash 1s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes intro-flash {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Staged element entry */
.intro-stage-bg, .intro-stage-orb, .intro-stage-title,
.intro-stage-sub, .intro-stage-cta, .intro-stage-cue {
  opacity: 0;
  will-change: opacity, transform;
}
body.intro-ready .intro-stage-bg     { animation: intro-bg    .85s cubic-bezier(.4,0,.2,1) .05s forwards; }
body.intro-ready .intro-stage-orb    { animation: intro-orb    .7s cubic-bezier(.34,1.56,.64,1) .3s forwards; }
body.intro-ready .intro-stage-title  { animation: intro-rise   .55s cubic-bezier(.4,0,.2,1) .55s forwards; }
body.intro-ready .intro-stage-sub    { animation: intro-rise   .5s cubic-bezier(.4,0,.2,1) .75s forwards; }
body.intro-ready .intro-stage-cta    { animation: intro-rise   .5s cubic-bezier(.4,0,.2,1) .9s forwards; }
body.intro-ready .intro-stage-cue    { animation: intro-fade   .4s cubic-bezier(.4,0,.2,1) 1.1s forwards; }

@keyframes intro-bg {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes intro-orb {
  from { opacity: 0; transform: scale(.4) rotate(-8deg); filter: blur(12px); }
  60%  { filter: blur(0); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
}
@keyframes intro-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes intro-fade {
  from { opacity: 0; }
  to   { opacity: .6; }
}

/* Respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
  .ic-orb, .ic-orb-glow, .ic-orb-ring, .ic-orb-ring-2 { animation: none !important; }
  .intro-stage-bg, .intro-stage-orb, .intro-stage-title,
  .intro-stage-sub, .intro-stage-cta, .intro-stage-cue { opacity: 1 !important; animation: none !important; }
  .intro-stage { display: none !important; }
}

/* ============================================================
   DEVICE OWNERSHIP TIMELINE (rent-to-own visualization)
   ============================================================ */
.own-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .01);
}
.own-card:hover {
  border-color: rgba(30, 58, 138, .3);
  transform: translateY(-4px);
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, .04),
    0 0 0 1px rgba(30, 58, 138, 0.08);
}
.tsection.dark .own-card { background: rgba(0, 0, 0, 0.02); border-color: var(--border); color: var(--text); }
.tsection.dark .own-card:hover { 
  border-color: rgba(30, 58, 138, .4); 
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, .05),
    0 0 20px rgba(30, 58, 138, .12);
}
.own-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.own-name { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.own-msrp { font-size: 13px; color: var(--text-muted); }
.tsection.dark .own-msrp { color: var(--text-muted); }
.own-bar {
  position: relative;
  height: 6px;
  background: rgba(0, 0, 0, .07);
  border-radius: 999px;
  overflow: hidden;
}
.tsection.dark .own-bar { background: rgba(0, 0, 0, .08); }
.own-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0%, #00bfff 100%);
  box-shadow: 0 0 12px rgba(30, 58, 138, .35);
}
.own-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: .02em;
}
.tsection.dark .own-meta { color: var(--text-muted); }
.own-meta strong { color: var(--text); font-weight: 600; }
.tsection.dark .own-meta strong { color: var(--text); }
.own-cta {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  margin-top: 4px;
}
.own-months {
  display: inline-block;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
}
.tsection.dark .own-months { color: var(--text); }
.own-months small { font-size: 13px; color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.tsection.dark .own-months small { color: rgba(255,255,255,.6); }

/* ============================================================
   MATRIX RED/BLUE PILL — the Inner-Circle membership choice
   ============================================================ */

/* Stage that holds both pills */
.matrix-stage {
  position: relative;
  z-index: 2;
  display: flex;
  gap: clamp(20px, 6vmin, 80px);
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  padding: 24px 0;
  flex-wrap: wrap;
}

/* Base pill — capsule shape with 3D look */
.matrix-pill {
  position: relative;
  width: clamp(180px, 22vmin, 260px);
  height: clamp(72px, 9vmin, 104px);
  border-radius: 999px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), filter .35s ease, box-shadow .35s ease;
  text-decoration: none;
  display: block;
}

/* Glossy top-light highlight */
.matrix-pill::before {
  content: '';
  position: absolute;
  top: 10%; left: 8%; right: 8%;
  height: 35%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 100%);
  filter: blur(3px);
  pointer-events: none;
  z-index: 1;
}

/* Pill seam (matrix capsule look) */
.matrix-pill::after {
  content: '';
  position: absolute;
  top: 50%; left: 8%; right: 8%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .35) 50%, transparent);
  pointer-events: none;
  z-index: 1;
}

/* Red pill (member / awake) */
.matrix-pill-red {
  background:
    linear-gradient(135deg, #ff5454 0%, #d40000 38%, #7a0000 100%);
  box-shadow:
    inset 0 -10px 18px rgba(0, 0, 0, .45),
    inset 0 10px 18px rgba(255, 255, 255, .14),
    0 28px 50px rgba(30, 58, 138, .55),
    0 0 90px rgba(30, 58, 138, .35);
  animation: pill-float-red 5s ease-in-out infinite;
}

/* Blue pill (asleep / non-member) */
.matrix-pill-blue {
  background:
    linear-gradient(135deg, #5599ff 0%, #0050d4 38%, #001f6e 100%);
  box-shadow:
    inset 0 -10px 18px rgba(0, 0, 0, .45),
    inset 0 10px 18px rgba(255, 255, 255, .14),
    0 28px 50px rgba(0, 80, 212, .5),
    0 0 90px rgba(0, 80, 212, .3);
  animation: pill-float-blue 5.5s ease-in-out infinite;
}

/* Label inside the pill */
.matrix-pill-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 600;
  font-size: clamp(11px, 1.3vmin, 13px);
  letter-spacing: .26em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
  z-index: 2;
  padding: 0 12px;
  text-align: center;
}

/* Caption that sits below each pill */
.matrix-caption {
  position: absolute;
  left: 50%;
  top: calc(100% + 16px);
  transform: translateX(-50%);
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .65);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.matrix-caption strong { color: #fff; font-weight: 600; }

/* Wrapper to hold each pill + caption together */
.matrix-pill-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 56px;
}

/* Hover lifts the pill out of float */
.matrix-pill:hover {
  transform: rotateX(0) rotateY(0) translateY(-8px) scale(1.04);
  animation-play-state: paused;
  filter: brightness(1.08) saturate(1.15);
}
.matrix-pill-red:hover {
  box-shadow:
    inset 0 -10px 18px rgba(0, 0, 0, .45),
    inset 0 10px 18px rgba(255, 255, 255, .2),
    0 36px 60px rgba(30, 58, 138, .65),
    0 0 110px rgba(30, 58, 138, .5);
}
.matrix-pill-blue:hover {
  box-shadow:
    inset 0 -10px 18px rgba(0, 0, 0, .45),
    inset 0 10px 18px rgba(255, 255, 255, .2),
    0 36px 60px rgba(0, 80, 212, .65),
    0 0 110px rgba(0, 80, 212, .45);
}

/* Click → activate sequence */
.matrix-pill.activating {
  animation: pill-activate 1.4s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes pill-activate {
  0%   { transform: scale(1) rotateY(0); filter: brightness(1); }
  35%  { transform: scale(.92) rotateY(180deg); filter: brightness(2); }
  70%  { transform: scale(1.4) rotateY(360deg); filter: brightness(2.5); }
  100% { transform: scale(2.2) rotateY(360deg); filter: brightness(3) blur(8px); opacity: 0; }
}

/* Floating idle animations — opposing wobble for visual rhythm */
@keyframes pill-float-red {
  0%, 100% { transform: rotateX(8deg) rotateY(-14deg) translateY(0); }
  50%      { transform: rotateX(6deg) rotateY(-10deg) translateY(-10px); }
}
@keyframes pill-float-blue {
  0%, 100% { transform: rotateX(8deg) rotateY(14deg) translateY(0); }
  50%      { transform: rotateX(6deg) rotateY(10deg) translateY(-10px); }
}

/* ============================================================
   MEMBER BADGE — small status pill for activated subscribers
   ============================================================ */
.member-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(30, 58, 138, .18), rgba(30, 58, 138, .06));
  border: 1px solid rgba(30, 58, 138, .45);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  text-shadow: none;
}
.member-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: badge-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
.member-badge.inactive {
  background: linear-gradient(135deg, rgba(0, 80, 212, .14), rgba(0, 80, 212, .04));
  border-color: rgba(0, 80, 212, .4);
  color: #2266dd;
}
.member-badge.inactive::before { background: #2266dd; box-shadow: 0 0 10px #2266dd; }

@keyframes badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.18); }
}

/* On dark sections, keep badge readable */
.tsection.dark .member-badge {
  background: linear-gradient(135deg, rgba(135, 206, 250, .18), rgba(30, 58, 138, .06));
  color: #ff6464;
}
.tsection.dark .member-badge.inactive {
  background: linear-gradient(135deg, rgba(100, 160, 255, .15), rgba(0, 80, 212, .05));
  color: #6aa5ff;
}

/* ============================================================
   SERVICE CARDS — bookable tech-service tile
   ============================================================ */
.svc-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .015);
}
.svc-card:hover {
  border-color: rgba(30, 58, 138, .3);
  transform: translateY(-4px);
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, .04),
    0 0 0 1px rgba(30, 58, 138, 0.08);
}
.svc-card:hover .svc-arrow { transform: translateX(4px); color: var(--accent); }

.svc-card-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.svc-card-title {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.25;
}
.svc-card-body {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 14px;
  flex: 1;
}
.svc-card-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  gap: 10px;
}
.svc-card-price {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
  white-space: nowrap;
}
.svc-card-price small {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 2px;
}
.svc-card-time {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.svc-arrow {
  font-size: 14px;
  color: var(--text-muted);
  transition: transform .2s var(--ease), color .2s var(--ease);
}

/* Dark section variant */
.tsection.dark .svc-card,
.svc-card.on-dark {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .09);
  color: var(--text-light);
}
.tsection.dark .svc-card:hover,
.svc-card.on-dark:hover {
  border-color: rgba(30, 58, 138, .5);
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, .35),
    0 0 20px rgba(30, 58, 138, .18);
}
.tsection.dark .svc-card-title,
.svc-card.on-dark .svc-card-title { color: #fff; }
.tsection.dark .svc-card-body,
.svc-card.on-dark .svc-card-body { color: rgba(255, 255, 255, .7); }
.tsection.dark .svc-card-eyebrow,
.svc-card.on-dark .svc-card-eyebrow { color: rgba(255, 255, 255, .55); }
.tsection.dark .svc-card-price,
.svc-card.on-dark .svc-card-price { color: #fff; }
.tsection.dark .svc-card-time,
.svc-card.on-dark .svc-card-time { color: rgba(255, 255, 255, .55); }
.tsection.dark .svc-card-meta,
.svc-card.on-dark .svc-card-meta { border-color: rgba(255, 255, 255, .12); }

/* Category strip with anchor jumps */
.svc-cats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 40px;
}
.svc-cats a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  transition: all .2s var(--ease);
  text-decoration: none;
}
.svc-cats a:hover {
  border-color: var(--text);
  background: var(--text);
  color: #fff;
}

.svc-section-header {
  text-align: center;
  padding: 60px 0 32px;
}
.svc-section-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 10px;
}
.svc-section-title {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.1;
}

/* ============================================================
   PORTFOLIO GALLERY — featured properties + before/after
   ============================================================ */

/* Featured-property tiles (large image cards) */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.feat-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg-alt);
  aspect-ratio: 4 / 3;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.feat-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.feat-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease), filter .3s var(--ease);
}
.feat-card:hover img { transform: scale(1.04); filter: brightness(1.05); }
.feat-card .feat-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.7) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 24px;
  color: #fff;
  pointer-events: none;
}
.feat-card .feat-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.feat-card .feat-title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.15;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.feat-card.feat-wide { aspect-ratio: 16 / 9; grid-column: span 2; }
@media (max-width: 720px) {
  .feat-card.feat-wide { grid-column: span 1; aspect-ratio: 4 / 3; }
}

/* Before/After transformation grid */
.transform-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.transform-card {
  background: var(--bg-alt);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.transform-card img {
  width: 100%;
  height: auto;
  display: block;
}
.transform-card .transform-meta {
  padding: 20px 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.transform-card .transform-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
}
.transform-card .transform-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Hero/section that USES an inline image */
.feat-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* ============================================================
   TWO-WAYS / COMPARISON TABLE (membership vs pay-as-you-go)
   ============================================================ */
.two-ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 760px) { .two-ways { grid-template-columns: 1fr; } }

.way-card {
  position: relative;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 28px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .01);
}
.way-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 0, 0, .3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .06);
}
.way-card.recommended {
  border-color: var(--accent);
  background:
    radial-gradient(circle at 50% 0%, rgba(30, 58, 138, .06) 0%, transparent 70%),
    var(--bg);
  box-shadow: 0 16px 40px rgba(30, 58, 138, .08);
}
.way-card.recommended:hover {
  border-color: var(--accent);
  box-shadow: 
    0 20px 48px rgba(30, 58, 138, .14),
    0 0 0 1px rgba(30, 58, 138, 0.08);
}
.way-card.recommended::after {
  content: 'RECOMMENDED';
  position: absolute;
  top: -10px;
  right: 22px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(30, 58, 138, .4);
}
.way-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.way-card.recommended .way-num { color: var(--accent); }
.way-title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.15;
}
.way-pay {
  font-size: 13px;
  color: var(--text-muted);
  padding: 10px 12px;
  background: var(--bg-alt);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.way-pay strong { color: var(--text); font-weight: 600; }
.way-list { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.way-list li {
  font-size: 14px;
  color: var(--text);
  line-height: 1.45;
  padding-left: 22px;
  position: relative;
}
.way-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 11px; height: 7px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.way-list li strong { font-weight: 600; }
.way-cta { margin-top: auto; padding-top: 8px; }

/* Comparison table */
.cmp-table {
  width: 100%;
  max-width: 920px;
  margin: 48px auto 0;
  border-collapse: collapse;
  font-size: 14px;
}
.cmp-table th,
.cmp-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.cmp-table thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-alt);
}
.cmp-table thead th.col-accent {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}
.cmp-table tbody td:first-child {
  font-weight: 600;
  color: var(--text);
  width: 30%;
}
.cmp-table td.col-accent {
  color: var(--text);
  font-weight: 500;
  background: rgba(30, 58, 138, .03);
}
.cmp-table td.col-accent strong { color: var(--accent); }
.cmp-table tr:last-child td { border-bottom: none; }

.bottom-line {
  margin: 28px auto 0;
  max-width: 720px;
  padding: 18px 22px;
  background: var(--bg-alt);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
}
.bottom-line strong { color: var(--accent); }


/* ============================================================
   ACCUSATION AUDIT — Chris Voss "Never Split the Difference"
   Named fears + direct responses. Positioned before pricing.
   ============================================================ */

.audit-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 32px 0;
  align-items: start;
}
.audit-card:first-of-type { border-top: 1px solid rgba(255, 255, 255, .08); }

.audit-fear {
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.4;
  color: rgba(255, 255, 255, .5);
  padding-right: 32px;
  font-style: italic;
}

.audit-response {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
  padding-left: 32px;
  border-left: 2px solid rgba(30, 58, 138, .5);
}

.audit-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.audit-timeline-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.audit-timeline-row:last-child { border-bottom: none; }

.audit-step {
  flex-shrink: 0;
  min-width: 60px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 2px;
}

.audit-step-text {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .8);
}

@media (max-width: 720px) {
  .audit-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .audit-fear {
    padding-right: 0;
    color: rgba(255, 255, 255, .6);
  }
  .audit-response {
    padding-left: 16px;
  }
}

/* ============================================================
   THE STACK — before/after bill comparison table
   ============================================================ */

.stack-table {
  width: 100%;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 24px;
}

.stack-header, .stack-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 0;
}

.stack-header {
  background: rgba(255,255,255,.06);
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.stack-col-label { }
.stack-col-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  text-align: right;
}
.stack-col-after { color: rgba(255,255,255,.55); }
.stack-col-saved { color: rgba(100,220,120,.7); }

.stack-row {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  align-items: center;
  transition: background .15s ease;
}
.stack-row:last-child { border-bottom: none; }
.stack-row:hover { background: rgba(255,255,255,.03); }

.stack-bill {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  line-height: 1.4;
}

.stack-before {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,100,100,.7);
  text-align: right;
  text-decoration: line-through;
  text-decoration-color: rgba(255,100,100,.4);
}

.stack-after {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,.9);
  text-align: right;
}

.stack-saved {
  font-size: 14px;
  font-weight: 600;
  color: rgba(100,220,120,.85);
  text-align: right;
}

/* Total row */
.stack-total {
  background: rgba(255,255,255,.04);
  border-top: 1px solid rgba(255,255,255,.1) !important;
  padding-top: 16px;
  padding-bottom: 16px;
}
.stack-total .stack-bill {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.stack-before-total {
  font-size: 18px !important;
  color: rgba(135, 206, 250,.65) !important;
}
.stack-after-total {
  font-size: 18px !important;
  color: #fff !important;
}
.stack-saved-total {
  font-size: 16px !important;
  color: #6ddc7a !important;
}

/* Annual math summary */
.stack-math {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 28px 32px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  flex-wrap: wrap;
}

.stack-math-col {
  text-align: center;
}

.stack-math-num {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -.02em;
  color: #fff;
}

.stack-math-label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-top: 4px;
}

.stack-math-divider {
  font-size: 28px;
  color: rgba(255,255,255,.2);
  font-weight: 300;
}

.stack-math-win .stack-math-num {
  color: #6ddc7a;
}
.stack-math-win .stack-math-label {
  color: rgba(109,220,122,.6);
}

@media (max-width: 600px) {
  .stack-header, .stack-row {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .stack-col-head:first-of-type { display: none; }
  .stack-before { display: none; }
  .stack-math { gap: 12px; padding: 20px 16px; }
}

/* ============================================================
   TIER CARDS — expanded categorized membership cards
   ============================================================ */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

.tier-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: start;
}

.tier-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  position: relative;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .01);
}
.tier-card:hover {
  transform: translateY(-4px);
  border-color: rgba(30, 58, 138, .25);
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, .04),
    0 0 0 1px rgba(30, 58, 138, 0.05);
}

.tier-card-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.tier-card-featured:hover {
  box-shadow: 
    0 20px 48px rgba(30, 58, 138, .15),
    0 0 0 1px var(--accent);
}

.tier-card-apex {
  background: linear-gradient(160deg, rgba(30, 58, 138,.03) 0%, rgba(0,0,0,.01) 100%);
  border-color: rgba(30, 58, 138,.25);
}
.tier-card-apex:hover {
  border-color: var(--accent);
  box-shadow: 
    0 20px 48px rgba(30, 58, 138, .12),
    0 0 0 1px rgba(30, 58, 138, 0.2);
}

.tier-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.tier-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.tier-price {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1;
  margin: 8px 0;
}
.tier-price small {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
}

.tier-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  min-height: 40px;
}

.tier-category {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 18px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.tier-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tier-list li {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  padding: 3px 0 3px 14px;
  position: relative;
}
.tier-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 1000px) {
  .tier-grid { grid-template-columns: 1fr 1fr; }
  .tier-card:last-child { grid-column: 1 / -1; }
  .tier-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .tier-grid { grid-template-columns: 1fr; }
  .tier-card:last-child { grid-column: auto; }
  .tier-grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   MEMBER DASHBOARD — gamification, score, and celebrations
   ============================================================ */

.db-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  margin-top: 32px;
}

@media (max-width: 900px) {
  .db-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.db-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .01);
}

.db-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 100% 0%, rgba(30, 58, 138, 0.03) 0%, transparent 60%);
  pointer-events: none;
}

.db-card:hover {
  border-color: rgba(30, 58, 138, .25);
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, .03),
    0 0 0 1px rgba(30, 58, 138, 0.05);
}

.db-card.diminished {
  border-color: rgba(30, 58, 138, .3);
  background: linear-gradient(170deg, rgba(30, 58, 138,.03) 0%, var(--bg) 100%);
  box-shadow: 0 0 25px rgba(30, 58, 138,.04);
}

.score-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.score-dial-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.score-dial-svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.score-dial-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 10;
}

.score-dial-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 628; /* 2 * PI * 100 */
  stroke-dashoffset: 628;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.1, 0.8, 0.25, 1);
}

.score-text-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.score-val {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  letter-spacing: -.02em;
}

.score-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 6px;
}

.streak-tracker {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  width: 100%;
}

.streak-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.streak-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
}

.streak-days {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.streak-day-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.streak-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}

.streak-dot.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 10px rgba(30, 58, 138, 0.4);
  transform: scale(1.1);
}

.streak-day-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: .05em;
}

.streak-day-node.active .streak-day-label {
  color: var(--accent);
  font-weight: 600;
}

/* Daily Task Styling */
.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: rgba(0, 0, 0, .01);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
  transition: all .3s var(--ease);
}

.task-item:hover {
  border-color: rgba(30, 58, 138, 0.15);
  background: rgba(30, 58, 138, 0.005);
}

.task-item.completed {
  opacity: 0.65;
  background: rgba(0, 0, 0, 0.02);
  border-color: var(--border);
}

.task-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.01em;
}

.task-item.completed .task-title {
  text-decoration: line-through;
}

.task-points {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.task-action-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  color: var(--text);
}

.task-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.task-item.completed .task-action-btn {
  border-color: var(--border);
  color: var(--text-muted);
  cursor: default;
}

/* Diminishing Returns Visual block */
.diminished-notice {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(30, 58, 138, 0.04);
  border: 1px solid rgba(30, 58, 138, 0.15);
  border-radius: 12px;
  padding: 20px;
  margin-top: 24px;
  color: var(--text);
}

.diminished-icon {
  font-size: 28px;
  color: var(--accent);
}

.diminished-text {
  font-size: 13px;
  line-height: 1.5;
}

.diminished-text strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--accent);
  font-family: var(--font-display);
}

/* Confetti overlay */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
}

/* Glassmorphic overlay modals */
.celebration-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 20px;
}

.celebration-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.celebration-content {
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 40px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  transform: scale(0.9);
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.celebration-modal.active .celebration-content {
  transform: scale(1);
}

.celebration-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.celebration-badge {
  width: 72px;
  height: 72px;
  background: rgba(30, 58, 138, 0.08);
  border: 1px solid rgba(30, 58, 138, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 32px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.celebration-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.02em;
  margin-bottom: 12px;
  color: var(--text);
}

.celebration-msg {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 24px;
}

.celebration-points {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 24px;
  letter-spacing: -.01em;
}

/* Authentication styles */
.auth-stage {
  max-width: 420px;
  width: 100%;
  margin: 100px auto;
  padding: 40px 32px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .02);
  text-align: center;
}

.auth-stage h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.020em;
  margin-bottom: 8px;
}

.auth-stage p {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 28px;
}

.auth-form-group {
  margin-bottom: 16px;
  text-align: left;
}

.auth-form-group label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.auth-form-group input {
  width: 100%;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  color: var(--text);
  outline: none;
  transition: border-color .3s;
}

.auth-form-group input:focus {
  border-color: var(--accent);
}

/* Tier Badges & Perks */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 18px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  transition: all .4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tier-starter {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  border-color: var(--border);
}

.tier-bronze {
  background: rgba(205, 127, 50, 0.08);
  color: #cd7f32;
  border-color: rgba(205, 127, 50, 0.25);
  box-shadow: 0 4px 15px rgba(205, 127, 50, 0.1);
}

.tier-silver {
  background: rgba(192, 192, 192, 0.08);
  color: #a8a8a8;
  border-color: rgba(192, 192, 192, 0.25);
  box-shadow: 0 4px 15px rgba(192, 192, 192, 0.1);
}

.tier-gold {
  background: rgba(30, 58, 138, 0.08);
  color: #1E3A8A;
  border-color: rgba(30, 58, 138, 0.3);
  box-shadow: 0 4px 20px rgba(30, 58, 138, 0.15);
}

.tier-perk {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  text-align: center;
  transition: opacity .3s ease;
}

/* Digital Detox / Pulse styling */
@keyframes detoxPulse {
  0%, 100% { box-shadow: 0 0 15px rgba(39, 174, 96, 0.15); border-color: rgba(39, 174, 96, 0.25); }
  50% { box-shadow: 0 0 30px rgba(39, 174, 96, 0.3); border-color: rgba(39, 174, 96, 0.4); }
}

.score-dial-fill.detox-pulse {
  stroke: #27ae60 !important;
  filter: drop-shadow(0 0 8px rgba(39, 174, 96, 0.4));
}

.db-card.detox-active {
  animation: detoxPulse 4s infinite ease-in-out;
}

/* Checked Streak Dot */
.streak-dot.checked {
  background: #27ae60 !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(39, 174, 96, 0.4);
  transform: scale(1.1);
}

/* ============================================================
   CINEMATIC TEASER SECTIONS
   ============================================================ */
.cinematic-teaser {
  position: relative;
  height: 100vh;
  min-height: 650px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--text-light);
}

.teaser-bg-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg-dark);
}

.teaser-bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), transform 4s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(1.05);
}

.teaser-bg-img.primary {
  background-image: url('cinematic_teaser.jpg');
  opacity: 0.35;
  z-index: 1;
}

.teaser-bg-img.secondary {
  background-image: url('project_alpine.jpg');
  opacity: 0;
  z-index: 2;
}

/* When declassified, fade primary down, fade secondary up & zoom out */
.cinematic-teaser.declassified .teaser-bg-img.primary {
  opacity: 0.08;
}

.cinematic-teaser.declassified .teaser-bg-img.secondary {
  opacity: 0.55;
  transform: scale(1);
}

.teaser-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: 
    linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.2) 65%, rgba(0, 0, 0, 0.75) 100%),
    radial-gradient(circle at center, transparent 15%, rgba(0, 0, 0, 0.65) 85%);
  pointer-events: none;
}

/* GLASS PANEL GATES */
.teaser-glass-panel {
  position: relative;
  z-index: 10;
  width: calc(100% - 48px);
  max-width: 520px;
  padding: 36px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: 
    border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    transform 0.4s var(--ease),
    max-width 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.8s var(--ease);
}

.teaser-glass-panel:hover {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 
    0 30px 60px -10px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.teaser-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 16px;
}

.teaser-status-glow {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 10px rgba(255, 59, 48, 0.6);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
  animation: alarmPulse 1.8s infinite ease-in-out;
}

@keyframes alarmPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; filter: brightness(1.2); }
}

.teaser-status-glow.secure {
  background: #4cd964;
  box-shadow: 0 0 12px rgba(76, 217, 100, 0.8);
  animation: none;
}

.teaser-panel-title {
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.55);
}

.teaser-passcode-wrap {
  display: flex;
  gap: 12px;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.teaser-passcode-input {
  flex: 1;
  padding: 14px 16px;
  font-family: monospace;
  font-size: 16px;
  letter-spacing: 0.25em;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.teaser-passcode-input:focus {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.08);
}

.teaser-submit-btn {
  padding: 0 24px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  border-radius: 8px;
}

.teaser-feedback {
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #ff3b30;
  margin-top: 12px;
  min-height: 14px;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.teaser-feedback.visible {
  opacity: 1;
}

.teaser-feedback.success-text {
  color: #4cd964;
}

/* ERROR SHAKE */
.teaser-glass-panel.shake {
  animation: errorShake 0.4s cubic-bezier(.36,.07,.19,.97) both;
  border-color: rgba(255, 59, 48, 0.35);
}

@keyframes errorShake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* DOSSIER UNLOCKED STATE */
.teaser-glass-panel.unlocked {
  max-width: 760px;
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(76, 217, 100, 0.35);
  box-shadow: 
    0 35px 70px -15px rgba(0, 0, 0, 0.8),
    0 0 25px rgba(76, 217, 100, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dossier-wrap {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  height: 0;
  overflow: hidden;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.teaser-glass-panel.unlocked .dossier-wrap {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  height: auto;
}

.teaser-glass-panel.unlocked .teaser-passcode-wrap {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  height: 0;
  margin: 0;
  overflow: hidden;
}

.dossier-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 16px;
}

.dossier-field {
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  padding-left: 14px;
}

.dossier-field.highlight-field {
  border-color: var(--accent);
}

.dossier-label {
  font-family: monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 4px;
}

.dossier-val {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.dossier-val strong {
  color: #fff;
}

.confidential-stamp {
  position: absolute;
  top: 24px;
  right: 36px;
  font-size: 9px;
  font-weight: 700;
  color: #ff3b30;
  border: 1.5px solid rgba(255, 59, 48, 0.8);
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  transform: rotate(6deg);
  background: rgba(255, 59, 48, 0.04);
  box-shadow: 0 0 10px rgba(255, 59, 48, 0.08);
  user-select: none;
  pointer-events: none;
}

.confidential-stamp.declassified {
  color: #4cd964;
  border-color: rgba(76, 217, 100, 0.8);
  background: rgba(76, 217, 100, 0.04);
  box-shadow: 0 0 10px rgba(76, 217, 100, 0.08);
}

@media (max-width: 700px) {
  .dossier-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .teaser-glass-panel {
    padding: 24px;
  }
  .confidential-stamp {
    position: relative;
    top: auto;
    right: auto;
    display: inline-block;
    margin-bottom: 18px;
    transform: rotate(3deg);
  }
}

/* ============================================================
   PORTFOLIO DROPDOWN, MOBILE NAV Drawer GROUPINGS,
   & ANNUAL PRICING TOGGLE SYSTEM (QUIET LUXURY)
   ============================================================ */

/* Desktop Portfolio Dropdown */
.tnav-dropdown {
  position: relative;
  display: inline-block;
}

.tnav-dropdown-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.tnav-dropdown-trigger .chevron {
  font-size: 9px;
  opacity: 0.6;
  transition: transform 0.25s var(--ease);
}

.tnav-dropdown:hover .tnav-dropdown-trigger .chevron {
  transform: rotate(180deg);
}

.tnav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  width: 280px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s var(--ease);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: auto;
}

.tnav-dropdown:hover .tnav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(4px);
}

/* Adjustments when header is scrolled or has dark hero behind it */
body.nav-on-dark .tnav:not(.scrolled) .tnav-dropdown-menu {
  background: rgba(15, 15, 15, 0.96);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.tnav-dropdown-item {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  text-decoration: none;
  background: transparent !important;
  border: none !important;
  transition: background 0.2s var(--ease) !important;
  text-align: left;
}

.tnav-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

body.nav-on-dark .tnav:not(.scrolled) .tnav-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.tnav-dropdown-item .item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text) !important;
  text-shadow: none !important;
  line-height: 1.2;
}

body.nav-on-dark .tnav:not(.scrolled) .tnav-dropdown-item .item-title {
  color: #fff !important;
}

.tnav-dropdown-item .item-desc {
  font-size: 10.5px;
  color: var(--text-muted) !important;
  margin-top: 2px;
  font-weight: 400;
  text-shadow: none !important;
  line-height: 1.35;
}

body.nav-on-dark .tnav:not(.scrolled) .tnav-dropdown-item .item-desc {
  color: rgba(255, 255, 255, 0.5) !important;
}

.tnav-dropdown-item.view-all {
  margin-top: 2px;
}

.tnav-dropdown-item.view-all .item-title {
  color: var(--accent) !important;
}

.dropdown-divider {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin: 6px 8px;
}

body.nav-on-dark .tnav:not(.scrolled) .dropdown-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Mobile Nav Section Headers */
.tnav-mobile-section-label {
  font-family: monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  padding: 12px 16px 4px 16px;
  opacity: 0.65;
}

.tnav-mobile-sublink {
  display: block;
  padding: 8px 16px 8px 36px !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
  opacity: 0.85;
}

.tnav-mobile-sublink:hover {
  color: var(--accent) !important;
  opacity: 1;
}

/* Interactive Monthly / Annual Pricing Toggle */
.pricing-toggle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px auto 40px;
  position: relative;
  z-index: 5;
}

.pricing-toggle-pill {
  position: relative;
  display: flex;
  background: var(--bg-alt);
  padding: 4px;
  border-radius: 99px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  width: fit-content;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.03);
}

.dark-mode-toggle-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.toggle-btn {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 8px 18px;
  border: none;
  background: transparent;
  border-radius: 99px;
  cursor: pointer;
  z-index: 2;
  transition: color 0.3s var(--ease);
}

.toggle-btn:hover {
  color: var(--text);
}

.toggle-btn.active {
  color: #fff;
}

/* Active sliding backdrop slider */
.pricing-toggle-slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: var(--accent);
  border-radius: 99px;
  z-index: 1;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.25);
}

.pricing-toggle-pill.annual-active .pricing-toggle-slider {
  transform: translateX(100%);
}

.pricing-toggle-pill.annual-active .toggle-btn.monthly-btn {
  color: var(--text-muted);
}
body.nav-on-dark .toggle-btn.active, 
.dark-mode-toggle-pill .toggle-btn.active {
  color: #fff;
}

/* Badge overlay indicators */
.annual-badge-text {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, #1E3A8A 0%, #00bfff 100%);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgba(30, 58, 138, 0.2);
}

/* Custom services upgrade banner styling */
.services-membership-banner {
  background: linear-gradient(135deg, var(--green-dark) 0%, rgba(9, 29, 21, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 40px;
  color: #fff;
  margin: 60px auto 20px;
  max-width: 1100px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.services-membership-banner::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -150px;
  width: 300px;
  height: 300px;
  background: var(--accent);
  filter: blur(140px);
  opacity: 0.15;
  pointer-events: none;
}

.services-membership-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.services-membership-left h3 {
  font-family: var(--font-serif, serif);
  font-size: 28px;
  color: #fff;
  margin-bottom: 12px;
}

.services-membership-left p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14.5px;
  line-height: 1.6;
}

.services-membership-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(255, 255, 255, 0.03);
  padding: 24px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.services-membership-benefit {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.services-membership-benefit span.bullet {
  color: var(--accent);
  font-size: 16px;
  line-height: 1;
}

.services-membership-benefit div.text {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

@media (max-width: 850px) {
  .services-membership-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* Portfolio Asset Classes Grid Overhaul */
.portfolio-class-section {
  padding: 80px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.portfolio-class-section:last-of-type {
  border-bottom: none;
}

.portfolio-class-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px;
  align-items: center;
}

.portfolio-class-info {
  grid-column: span 5;
}

.portfolio-class-visual {
  grid-column: span 7;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  aspect-ratio: 16 / 10;
  background: var(--bg-alt);
}

.portfolio-class-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.portfolio-class-visual:hover img {
  transform: scale(1.03);
}

.portfolio-class-section.reverse .portfolio-class-info {
  grid-column: span 5;
  order: 2;
}

.portfolio-class-section.reverse .portfolio-class-visual {
  grid-column: span 7;
  order: 1;
}

.portfolio-class-title {
  font-family: var(--font-serif, serif);
  font-size: 32px;
  margin-top: 8px;
  margin-bottom: 16px;
  line-height: 1.25;
}

.portfolio-class-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.portfolio-class-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  border-left: 2px solid var(--accent);
  padding-left: 16px;
}

.portfolio-class-meta-item {
  font-size: 13.5px;
  line-height: 1.4;
}

.portfolio-class-meta-item strong {
  color: var(--text);
}

@media (max-width: 900px) {
  .portfolio-class-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .portfolio-class-info, 
  .portfolio-class-visual {
    grid-column: span 12 !important;
    order: unset !important;
  }
}

/* Portfolio Community Cohort Investment Grids */
.portfolio-community-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 48px;
}

.portfolio-community-card {
  background: var(--bg-alt);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.portfolio-community-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
}

body.nav-on-dark .portfolio-community-card,
.dark-mode .portfolio-community-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

.cohort-label {
  font-family: monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 8px;
}

.cohort-title {
  font-family: var(--font-serif, serif);
  font-size: 24px;
  margin-bottom: 12px;
}

.cohort-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.cohort-focus-box {
  background: rgba(0, 0, 0, 0.02);
  border: 1px dashed rgba(0, 0, 0, 0.1);
  padding: 18px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.nav-on-dark .cohort-focus-box,
.dark-mode .cohort-focus-box {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}

.cohort-focus-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.4;
}

.cohort-focus-item span.bullet {
  color: var(--accent);
}

@media (max-width: 800px) {
  .portfolio-community-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ============================================================
   SERVICES FLOW, DEEP SEO, & BLUE OCEAN A/B TESTING OVERHAUL
   ============================================================ */

/* ─── Service Card Side-by-Side Rates & Badges ─── */
.svc-price-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.svc-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.svc-price-regular {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.svc-price-regular.discounted {
  text-decoration: line-through;
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 400;
}

.svc-price-regular-now {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.svc-price-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 500;
}

.svc-price-member-badge {
  font-family: monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(30, 58, 138, 0.1);
  color: #1E3A8A;
  border: 1px solid rgba(30, 58, 138, 0.25);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ─── Blue Ocean vs. Red Ocean Comparative Section ─── */
.blue-ocean-wrapper {
  padding: 96px 24px;
  background: var(--bg-alt);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

body.nav-on-dark .blue-ocean-wrapper,
.dark-mode .blue-ocean-wrapper {
  background: rgba(255, 255, 255, 0.01);
  border-color: rgba(255, 255, 255, 0.03);
}

.blue-ocean-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1080px;
  margin: 48px auto 0;
}

.ocean-card {
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  border: 1px solid;
}

.ocean-card.red-ocean {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(30, 58, 138, 0.08);
  color: var(--text-muted);
}

body.nav-on-dark .ocean-card.red-ocean,
.dark-mode .ocean-card.red-ocean {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 0, 0, 0.08);
}

.ocean-card.blue-ocean {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(30, 58, 138, 0.2);
  box-shadow: 0 20px 45px rgba(30, 58, 138, 0.04);
}

body.nav-on-dark .ocean-card.blue-ocean,
.dark-mode .ocean-card.blue-ocean {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(30, 58, 138, 0.25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.ocean-card.blue-ocean::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 160px;
  height: 160px;
  background: var(--accent);
  filter: blur(80px);
  opacity: 0.12;
  pointer-events: none;
}

.ocean-title {
  font-family: var(--font-serif, serif);
  font-size: 24px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ocean-card.red-ocean .ocean-title {
  color: #ff5b5b;
}

.ocean-card.blue-ocean .ocean-title {
  color: #1E3A8A;
}

.ocean-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ocean-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
}

.ocean-item span.bullet {
  font-size: 16px;
  line-height: 1;
}

.ocean-card.red-ocean .ocean-item span.bullet {
  color: #ff5b5b;
}

.ocean-card.blue-ocean .ocean-item span.bullet {
  color: #1E3A8A;
}

.ocean-item strong {
  color: var(--text);
}

.ocean-card.blue-ocean .ocean-item strong {
  color: #fff;
}

.ocean-card.blue-ocean .ocean-item p {
  color: rgba(255, 255, 255, 0.75);
  margin: 4px 0 0 0;
}

.ocean-card.red-ocean .ocean-item p {
  color: var(--text-muted);
  margin: 4px 0 0 0;
}

@media (max-width: 800px) {
  .blue-ocean-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ─── Floating A/B Testing Control Console ─── */
.ab-controller-badge {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 99999;
  background: rgba(23, 26, 32, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 200px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ab-controller-badge:hover {
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

.ab-badge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ab-badge-title {
  font-family: monospace;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ab-badge-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: monospace;
  font-size: 9px;
  color: #00ff66;
}

.ab-badge-status::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #00ff66;
  border-radius: 50%;
  box-shadow: 0 0 8px #00ff66;
  animation: ab-pulse 2s infinite;
}

@keyframes ab-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

.ab-toggle-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  padding: 3px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.02);
}

.ab-toggle-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 0;
  cursor: pointer;
  border-radius: 4px;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}

.ab-toggle-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.02);
}

.ab-toggle-btn.active {
  color: #fff;
  background: #1E3A8A;
  font-weight: 600;
}

/* ─── Diagnostic & Pricing Toggle Dashboard ─── */
.diag-pricing-dashboard {
  background: rgba(23, 26, 32, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 24px;
  margin: 36px auto 48px;
  max-width: 1080px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}

.diag-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 16px;
}

.diag-title-wrap h3 {
  font-family: var(--font-serif, serif);
  font-size: 18px;
  color: #fff;
  font-weight: 500;
  margin: 0;
}

.diag-title-wrap p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 0 0;
}

/* Dynamic Pricing Toggle */
.pricing-toggle-container {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 6px 14px;
  border-radius: 50px;
}

.pricing-toggle-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.3s;
}

.pricing-toggle-label.active {
  color: #1E3A8A;
  text-shadow: 0 0 8px rgba(30, 58, 138, 0.4);
}

.pricing-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.pricing-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.pricing-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: .4s;
  border-radius: 34px;
}

.pricing-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

input:checked + .pricing-slider {
  background-color: rgba(30, 58, 138, 0.2);
  border-color: rgba(30, 58, 138, 0.4);
}

input:checked + .pricing-slider:before {
  transform: translateX(20px);
  background-color: #1E3A8A;
  box-shadow: 0 0 10px rgba(30, 58, 138, 0.8);
}

/* Symptom Grid Layout */
.diag-symptom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.diag-symptom-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
}

.diag-symptom-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  transform: translateY(-2px);
}

.diag-symptom-btn.active {
  background: rgba(30, 58, 138, 0.08);
  border-color: rgba(30, 58, 138, 0.4);
  color: #1E3A8A;
  box-shadow: 0 0 15px rgba(30, 58, 138, 0.1);
}

.diag-symptom-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  transition: transform 0.3s;
}

.diag-symptom-btn:hover svg {
  transform: scale(1.1);
}

.diag-symptom-btn.active svg {
  filter: drop-shadow(0 0 4px rgba(30, 58, 138, 0.6));
}

.diag-symptom-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

/* ─── Dynamic Pricing Display transitions ─── */
.svc-price-member-now {
  display: none;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

body.viewing-member-rates .svc-price-regular-now,
body.viewing-member-rates .svc-price-regular.discounted {
  display: none !important;
}

body.viewing-member-rates .svc-price-member-now {
  display: inline-block !important;
  opacity: 1;
  transform: scale(1);
  color: #1E3A8A;
  font-weight: 700;
  background: rgba(30, 58, 138, 0.12);
  border: 1px solid rgba(30, 58, 138, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 13px;
  letter-spacing: 0.02em;
  box-shadow: 0 0 10px rgba(30, 58, 138, 0.05);
  animation: bluePulse 2.5s infinite alternate;
}

@keyframes bluePulse {
  0% {
    box-shadow: 0 0 6px rgba(30, 58, 138, 0.05);
    border-color: rgba(30, 58, 138, 0.3);
  }
  100% {
    box-shadow: 0 0 14px rgba(30, 58, 138, 0.2);
    border-color: rgba(30, 58, 138, 0.6);
  }
}

/* ─── Category Filtering CSS transitions ─── */
.svc-cat-section {
  opacity: 1;
  max-height: 2500px;
  transform: scale(1);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.4s ease,
              padding 0.4s ease;
  overflow: visible;
}

.svc-cat-section.filtered-out {
  opacity: 0;
  max-height: 0 !important;
  transform: scale(0.97);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  pointer-events: none;
  border: none !important;
}

/* Glowing border highlighting for active diagnostic match */
.svc-cat-section.diagnostic-match {
  position: relative;
}

.svc-cat-section.diagnostic-match::after {
  content: '';
  position: absolute;
  inset: -12px;
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 24px;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.03);
  pointer-events: none;
  opacity: 0;
  animation: matchHighlight 2s ease-out forwards;
}

@keyframes matchHighlight {
  0% { opacity: 0; border-color: rgba(255, 215, 0, 0.6); box-shadow: 0 0 40px rgba(255, 215, 0, 0.15); }
  50% { opacity: 1; }
  100% { opacity: 1; border-color: rgba(255, 215, 0, 0.25); box-shadow: 0 0 20px rgba(255, 215, 0, 0.05); }
}

@media (max-width: 768px) {
  .diag-pricing-dashboard {
    padding: 16px;
  }
  .diag-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .pricing-toggle-container {
    width: 100%;
    justify-content: space-between;
  }
  .diag-symptom-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .diag-symptom-btn {
    padding: 10px 4px;
  }
  .diag-symptom-label {
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .diag-symptom-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── Premium Expandable Accordion Row System ─── */
.svc-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1080px;
  margin: 32px auto 0;
}

.svc-item-row {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}

.svc-item-row:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 215, 0, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.svc-item-row.active {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 215, 0, 0.3);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Header Trigger Bar */
.svc-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 28px;
  cursor: pointer;
  user-select: none;
  gap: 20px;
}

.svc-row-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.svc-row-title-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.svc-row-title {
  font-family: var(--font-serif, serif);
  font-size: 19px;
  font-weight: 500;
  color: #fff;
  margin: 0;
}

.svc-row-tagline {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Price & Chevron Wrap */
.svc-row-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.svc-row-chevron {
  font-size: 18px;
  color: #1E3A8A;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  line-height: 1;
}

.svc-item-row.active .svc-row-chevron {
  transform: rotate(180deg);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* Expandable Drawer */
.svc-row-drawer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  border-top: 1px solid transparent;
}

.svc-item-row.active .svc-row-drawer {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.05);
}

.svc-drawer-inner {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}

.svc-drawer-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 800px;
}

/* Inclusion List Grid */
.svc-inclusions-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.svc-included-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1E3A8A;
  margin: 0;
}

.svc-included-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}

.svc-included-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.4;
}

.svc-included-item::before {
  content: '✦';
  color: #1E3A8A;
  font-size: 12px;
  line-height: 1.4;
}

/* Bottom Action Bar */
.svc-row-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 20px;
  margin-top: 8px;
}

.svc-row-meta-info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.svc-row-meta-badge {
  font-size: 11px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.svc-row-book-btn {
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .svc-row-header {
    padding: 18px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .svc-row-right {
    width: 100%;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 12px;
  }
  .svc-drawer-inner {
    padding: 18px 20px 20px;
  }
  .svc-included-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .svc-row-action-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .svc-row-book-btn {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   INTERACTIVE INNER-TECH DIAGNOSTIC INTAKE QUIZ STYLES
   ============================================================ */

.diagnostic-quiz-section {
  padding: 80px 24px;
  position: relative;
  z-index: 2;
}

.diagnostic-quiz-container {
  max-width: 860px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px dashed rgba(255, 215, 0, 0.25);
  border-radius: 24px;
  padding: 48px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.diagnostic-quiz-container::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

/* Quiz Progress Bar */
.quiz-progress-wrapper {
  margin-bottom: 40px;
}

.quiz-progress-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 12px;
}

.quiz-progress-steps::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 1;
  transform: translateY(-50%);
}

.quiz-progress-bar-fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2px;
  background: var(--accent);
  z-index: 2;
  transform: translateY(-50%);
  transition: width 0.4s ease;
  width: 0%;
}

.quiz-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  position: relative;
  z-index: 3;
  transition: all 0.3s ease;
}

.quiz-step-dot.active {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
}

.quiz-step-dot.completed {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* Quiz Steps Container */
.quiz-steps-viewport {
  position: relative;
  min-height: 280px;
}

.quiz-step {
  display: none;
  opacity: 0;
}

.quiz-step.active {
  display: block;
  animation: quizFadeIn 0.45s ease forwards;
}

@keyframes quizFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.quiz-step-title {
  font-family: var(--font-serif, serif);
  font-size: 24px;
  color: #fff;
  margin-bottom: 10px;
  text-align: center;
}

.quiz-step-desc {
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 30px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

/* Options Selector Layout */
.quiz-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}

.quiz-option-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  user-select: none;
}

.quiz-option-btn:hover {
  border-color: rgba(255, 215, 0, 0.4);
  background: rgba(255, 215, 0, 0.02);
  transform: translateY(-2px);
}

.quiz-option-btn.selected {
  border-color: var(--accent);
  background: rgba(255, 215, 0, 0.06);
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.08);
}

.quiz-tile-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: transparent;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.quiz-option-btn.selected .quiz-tile-check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.quiz-tile-content {
  flex: 1;
}

.quiz-tile-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}

.quiz-tile-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Radio Specific Circles */
.quiz-options-grid.single-select .quiz-tile-check {
  border-radius: 50%;
}

.quiz-options-grid.single-select .quiz-option-btn.selected .quiz-tile-check::after {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--bg);
  border-radius: 50%;
}

/* Navigation Row */
.quiz-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Premium Diagnostics Report Box */
.report-box {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.06) 0%, rgba(0, 0, 0, 0.3) 100%);
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: 36px;
  margin-top: 24px;
  box-shadow: 0 15px 40px rgba(255, 215, 0, 0.04);
  transform: scale(0.97);
  opacity: 0;
  display: none;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.report-box.show {
  display: block;
  opacity: 1;
  transform: scale(1);
}

.report-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.report-title-icon {
  font-size: 24px;
}

.report-header-text {
  font-family: var(--font-serif, serif);
  font-size: 22px;
  color: #fff;
}

.report-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  margin-bottom: 28px;
}

.report-metric-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  border-left: 3px solid var(--accent);
}

.report-metric-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.report-metric-value {
  font-size: 36px;
  font-weight: 800;
  color: var(--accent);
  font-family: monospace;
}

.report-metric-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
}

.report-inclusions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.report-inclusion-item {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}

.report-inclusion-item span.bullet {
  color: var(--accent);
  flex-shrink: 0;
}

.report-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.report-action-desc {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 320px;
  line-height: 1.4;
}

/* Decoy pricing styling tweaks */
.pricing-card.featured-decoy {
  position: relative;
  overflow: hidden;
}

.pricing-card.featured-decoy::before {
  content: 'BEST VALUE';
  position: absolute;
  top: 12px;
  right: -25px;
  background: var(--accent);
  color: var(--bg);
  font-size: 8px;
  font-weight: 800;
  padding: 4px 28px;
  transform: rotate(45deg);
  letter-spacing: 0.05em;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .diagnostic-quiz-container {
    padding: 32px 20px;
    border-radius: 16px;
  }
  .report-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .report-action-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .report-action-desc {
    max-width: 100%;
    margin-bottom: 8px;
  }
  .report-action-bar .tbtn {
    width: 100%;
    justify-content: center;
  }
}

/* ─── Grid 5 Column Layout for Pricing ─── */
.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1200px) {
  .grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .grid-5 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PHASE 2: PREMIUM VISUAL POLISH & TRUST ARCHITECTURE
   ============================================================ */

/* 1 · Floating Hero Trust Badge */
.hero-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(30, 58, 138, 0.3);
  padding: 8px 16px 8px 8px;
  border-radius: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 15px rgba(30, 58, 138, 0.15);
  margin-top: 24px;
  cursor: pointer;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.hero-trust-badge:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(30, 58, 138, 0.7);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(30, 58, 138, 0.25);
}

.hero-trust-avatar-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #1E3A8A, #2A52CC);
}

.hero-trust-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #000;
}

.hero-trust-pulse {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #39ff14;
  border: 2px solid #000;
  box-shadow: 0 0 8px #39ff14;
}

.hero-trust-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-trust-name {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hero-trust-name .crown {
  color: #1E3A8A;
  font-size: 11px;
}

.hero-trust-meta {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* 2 · Glowing Guarantee Cards & Custom Icons */
.guarantee-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 58, 138, 0.05);
  border: 1px solid rgba(30, 58, 138, 0.15);
  margin-bottom: 20px;
  color: var(--accent);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.tcard:hover .guarantee-icon-wrap {
  transform: scale(1.1) rotate(2deg);
  background: rgba(30, 58, 138, 0.12);
  border-color: rgba(30, 58, 138, 0.45);
  box-shadow: 0 0 20px rgba(30, 58, 138, 0.15);
  color: #00bfff;
}

.tcard-glow {
  position: relative;
  overflow: hidden;
}

.tcard-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(800px circle at var(--x, 0px) var(--y, 0px), rgba(30, 58, 138, 0.06), transparent 40%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 1;
}

.tcard-glow:hover::after {
  opacity: 1;
}

/* 3 · Standalone "Meet Kareem" Showcase Section */
.meet-kareem-section {
  position: relative;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 100px 24px;
  overflow: hidden;
}

.meet-kareem-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 60px;
  align-items: center;
}

@media (max-width: 900px) {
  .meet-kareem-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.kareem-portrait-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border);
  aspect-ratio: 4 / 5;
  background: var(--bg-alt);
}

.kareem-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.kareem-portrait-wrap:hover .kareem-portrait-img {
  transform: scale(1.03);
}

.kareem-portrait-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 14px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.kareem-portrait-badge-title {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.kareem-portrait-badge-title .crown-icon {
  color: #1E3A8A;
}

.kareem-portrait-badge-desc {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.kareem-bio-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.kareem-quote {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  position: relative;
}

.kareem-quote::before {
  content: '“';
  position: absolute;
  top: -24px;
  left: -20px;
  font-size: 80px;
  font-family: serif;
  color: rgba(30, 58, 138, 0.12);
  line-height: 1;
}

.kareem-bio-paragraphs {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 32px;
}

.kareem-bio-paragraphs strong {
  color: var(--text);
}

.kareem-credentials {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--bg-alt);
  border-radius: 8px;
  border-left: 3px solid #1E3A8A;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 28px;
}

.kareem-credentials .tag {
  background: #1E3A8A;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 4 · Dark Glassmorphic Transparency Card */
.glass-transparency-card {
  position: relative;
  background: rgba(23, 26, 32, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px;
  padding: 32px 36px !important;
  border-left: 4px solid var(--accent) !important;
  color: #fff !important;
}

.glass-transparency-card .desc-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.glass-transparency-card p {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.8) !important;
  line-height: 1.65;
  margin: 0;
}

.glass-transparency-card strong {
  color: #fff !important;
}

/* ============================================================
   PHASE 3: FLOW SIMPLIFICATION & THREE CORE OFFERINGS
   ============================================================ */

/* 1 · Three Core Offerings Grid */
.three-ways-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  width: 100%;
  max-width: 1100px;
  margin: 48px auto 0;
}

@media (max-width: 900px) {
  .three-ways-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.way-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);
}

.way-card:hover {
  transform: translateY(-6px);
  border-color: rgba(30, 58, 138, 0.25);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(30, 58, 138, 0.04);
}

/* Recommended Membership highlight card styling */
.way-card.recommended {
  border: 2px solid var(--accent);
  background: rgba(30, 58, 138, 0.01);
  box-shadow: 0 10px 40px rgba(30, 58, 138, 0.04);
}

.way-card.recommended:hover {
  border-color: var(--accent);
  box-shadow: 0 20px 50px rgba(30, 58, 138, 0.08), 0 0 0 1px var(--accent);
}

/* Offering Tags */
.way-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: var(--bg-alt);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 24px;
}

.way-tag.recommended {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 2px 10px rgba(30, 58, 138, 0.25);
}

/* Icon, title & description */
.way-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 16px;
}

.way-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.way-price {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.way-price .price-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.way-desc {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
  flex: 1;
}

/* Special callout benefits */
.way-benefit {
  width: 100%;
  padding: 16px 20px;
  border-radius: 8px;
  background: var(--bg-alt);
  border-left: 3px solid #1E3A8A;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 28px;
}

.way-card.recommended .way-benefit {
  background: rgba(30, 58, 138, 0.03);
  border-left-color: var(--accent);
}

.way-benefit strong {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.way-benefit strong {
  color: var(--accent);
}

.way-card:not(.recommended) .way-benefit strong {
  color: #1E3A8A;
}

.way-card .tbtn {
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* 2 · Expandable Detailed Menu Drawer */
.detailed-menu-wrapper {
  background: #08090a;
  color: #ffffff;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.8s var(--ease), opacity 0.6s var(--ease), background 0.4s var(--ease);
}

.detailed-menu-wrapper.expanded {
  max-height: 12000px; /* Safe upper limit for all accordions */
  opacity: 1;
  padding: 60px 0 100px;
}

.detailed-menu-wrapper .svc-section-title {
  color: #ffffff !important;
}

.detailed-menu-trigger-card {
  max-width: 720px;
  margin: 32px auto 0;
  text-align: center;
  padding: 40px 32px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.detailed-menu-trigger-card .tbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.detailed-menu-trigger-card .tbtn .btn-chevron {
  transition: transform 0.4s var(--ease);
  display: inline-block;
}

.detailed-menu-trigger-card.active .tbtn .btn-chevron {
  transform: rotate(180deg);
}

.detailed-menu-trigger-card .menu-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 16px;
  line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════
   MEMBERSHIP TIERS · shared by inner-circle.html + services.html
   royal = structure/pop · gold = premium trim
════════════════════════════════════════════════════════ */
.ic2-tiers { background: #ffffff; padding: 100px 24px; position: relative; }
.ic2-tiers-inner { max-width: 1120px; margin: 0 auto; }
.ic2-tiers-top { text-align: center; margin-bottom: 56px; }
.ic2-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
@media (max-width: 880px) { .ic2-tier-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.ic2-tier { position: relative; background: var(--bg-alt); border: 1px solid rgba(0,0,0,.08); border-radius: 18px; padding: 32px 28px; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s, border-color .3s; }
.ic2-tier:hover { transform: translateY(-5px); border-color: rgba(30,58,138,.35); box-shadow: 0 22px 50px rgba(0,0,0,.10); }
.ic2-tier-featured { background: linear-gradient(180deg, #1E3A8A 0%, #15295f 100%); border-color: transparent; box-shadow: 0 24px 60px rgba(30,58,138,.30); }
.ic2-tier-featured::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 18px 18px 0 0; background: var(--gold-grad, linear-gradient(135deg,#e7c75a,#d4af37,#b8901f)); }
.ic2-tier-featured:hover { transform: translateY(-7px); box-shadow: 0 30px 70px rgba(30,58,138,.42); }
.ic2-tier-featured .ic2-tier-name, .ic2-tier-featured .ic2-tier-price { color: #fff; }
.ic2-tier-featured .ic2-tier-tag { color: #d4af37; }
.ic2-tier-featured .ic2-tier-for { color: rgba(255,255,255,.72); }
.ic2-tier-featured .ic2-tier-feats li { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.12); }
.ic2-tier-featured .ic2-tier-feats li::before { color: var(--gold, #d4af37); }
.ic2-tier-featured .ic2-tier-feats strong { color: #fff; }
.ic2-tier-featured .ic2-tier-price .per { color: rgba(255,255,255,.6); }
.ic2-tier-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--gold-grad, linear-gradient(135deg,#e7c75a,#d4af37,#b8901f)); color: #14110a; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 6px 16px; border-radius: 100px; box-shadow: 0 6px 16px rgba(212,175,55,.4); white-space: nowrap; }
.ic2-tier-head { margin-bottom: 16px; }
.ic2-tier-name { font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 4px; letter-spacing: -.01em; }
.ic2-tier-tag { font-size: 13.5px; color: var(--accent); font-weight: 600; margin: 0; }
.ic2-tier-price { font-size: 44px; font-weight: 800; color: var(--text); letter-spacing: -.03em; line-height: 1; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.ic2-tier-price .cur { font-size: 22px; font-weight: 700; vertical-align: super; margin-right: 2px; }
.ic2-tier-price .per { font-size: 15px; font-weight: 500; color: var(--text-muted); }
.ic2-tier-for { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); margin: 0 0 20px; }
.ic2-tier-feats { list-style: none; margin: 0 0 26px; padding: 0; flex: 1; }
.ic2-tier-feats li { position: relative; padding: 10px 0 10px 26px; font-size: 13.5px; line-height: 1.45; color: var(--text); border-bottom: 1px solid rgba(0,0,0,.06); }
.ic2-tier-feats li:last-child { border-bottom: none; }
.ic2-tier-feats li::before { content: '✓'; position: absolute; left: 0; top: 10px; color: var(--accent); font-weight: 800; }
.ic2-tier-cta { display: block; text-align: center; padding: 14px 20px; border-radius: 100px; font-size: 14px; font-weight: 600; text-decoration: none; background: rgba(30,58,138,.06); color: var(--accent); border: 1px solid rgba(30,58,138,.25); transition: transform .25s, box-shadow .25s, background .25s, border-color .25s; }
.ic2-tier-cta:hover { transform: translateY(-2px); border-color: var(--accent); }
.ic2-tier-cta-primary { background: var(--gold-grad, linear-gradient(135deg,#e7c75a,#d4af37,#b8901f)); color: #14110a; border: none; box-shadow: 0 10px 26px rgba(212,175,55,.4); }
.ic2-tier-cta-primary:hover { filter: brightness(1.06); box-shadow: 0 14px 32px rgba(212,175,55,.5); }
.ic2-tiers-foot { text-align: center; margin-top: 40px; font-size: 14.5px; color: var(--text-muted); }
.ic2-tiers-foot a { color: var(--accent); font-weight: 600; border-bottom: 1px solid rgba(30,58,138,.35); }
.ic2-tiers-foot a:hover { border-color: var(--accent); }
@media (max-width: 880px) { .ic2-tiers { padding: 72px 20px; } }