/* ============================================================
   RevenueTHESIS BRAND TOKENS
============================================================ */

:root{

  /* Core neutrals */
  --bg:#111318;
  --bg-deep:#0B0D11;

  --panel:#23252A;
  --panel-deep:#17191E;

  --panel-hi:rgba(255,255,255,0.045);

  /* Brand brass / champagne */
  --gold:#C9A65B;
  --gold-hi:#D9BC78;

  --gold-soft:rgba(201,166,91,0.13);
  --gold-line:rgba(201,166,91,0.34);

  /* Typography */
  --text:#F4F0E8;
  --dim:#B7B2A9;
  --dim-2:#7D7E83;

  --line:rgba(255,255,255,0.085);

  /* Reserved accent */
  --green:#6E9E7A;

  /* Typography families */
  --font-display:'Orbitron',sans-serif;
  --font-head:'Rajdhani',sans-serif;
  --font-cond:'Barlow Condensed',sans-serif;
  --font-body:'Barlow',sans-serif;
}


/* ============================================================
   RESET
============================================================ */

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

html,
body{
  min-height:100%;
}

html{
  background:var(--bg-deep);
}

body{

  font-family:var(--font-body);

  color:var(--text);

  min-height:100vh;

  display:flex;

  align-items:flex-start;

  justify-content:center;

  padding:
    clamp(14px,2.4vh,26px)
    clamp(14px,3vw,32px);

  background:
    linear-gradient(
      180deg,
      #15171C 0%,
      #101217 45%,
      #0C0E12 100%
    );

  overflow-x:hidden;

  position:relative;
}


/* ============================================================
   SUBTLE BACKGROUND ATMOSPHERE
============================================================ */

body::before,
body::after{

  content:'';

  position:fixed;

  border-radius:50%;

  filter:blur(105px);

  z-index:0;

  pointer-events:none;
}

body::before{

  width:540px;
  height:540px;

  top:-210px;
  left:-170px;

  background:
    radial-gradient(
      circle,
      rgba(201,166,91,0.18),
      rgba(201,166,91,0.06) 38%,
      transparent 72%
    );

  animation:
    drift1 20s ease-in-out infinite alternate;
}

body::after{

  width:500px;
  height:500px;

  bottom:-190px;
  right:-150px;

  background:
    radial-gradient(
      circle,
      rgba(110,158,122,0.07),
      transparent 72%
    );

  animation:
    drift2 24s ease-in-out infinite alternate;
}

@keyframes drift1{

  from{
    transform:translate(0,0);
  }

  to{
    transform:translate(45px,32px);
  }
}

@keyframes drift2{

  from{
    transform:translate(0,0);
  }

  to{
    transform:translate(-36px,-26px);
  }
}


/* ============================================================
   WRAPPER
============================================================ */

.wrap{

  width:100%;

  max-width:840px;

  position:relative;

  z-index:1;
}


/* ============================================================
   BRAND HEADER
============================================================ */

.brand-row{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:14px;

  margin-bottom:8px;
}

.brand-icon{

  width:clamp(46px,8vw,58px);

  height:clamp(46px,8vw,58px);

  object-fit:contain;

  filter:
    drop-shadow(
      0 5px 12px rgba(0,0,0,0.36)
    );

  flex-shrink:0;
}

.brand-stack{

  display:flex;

  flex-direction:column;

  gap:3px;

  text-align:left;
}

.brand-word{

  font-family:var(--font-display);

  font-weight:900;

  font-size:
    clamp(
      22px,
      4.4vw,
      30px
    );

  letter-spacing:-0.35px;

  color:var(--text);

  line-height:1;
}

.brand-word .accent{

  color:var(--gold);
}

.page-tag{

  font-family:var(--font-cond);

  font-size:11px;

  font-weight:600;

  letter-spacing:2px;

  color:var(--dim);

  text-transform:uppercase;

  line-height:1;
}


/* ============================================================
   H1
============================================================ */

.site-h1{

  font-family:var(--font-cond);

  font-size:
    clamp(
      11px,
      1.8vw,
      13px
    );

  font-weight:500;

  line-height:1.35;

  letter-spacing:.8px;

  text-align:center;

  color:var(--dim-2);

  margin:
    0 0 14px;
}


/* ============================================================
   MAIN STAGE
============================================================ */

.stage{

  position:relative;

  background:
    linear-gradient(
      145deg,
      rgba(38,40,45,0.95),
      rgba(22,24,29,0.97)
    );

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  border:
    1px solid rgba(255,255,255,0.09);

  border-radius:26px;

  box-shadow:
    0 28px 70px -27px rgba(0,0,0,0.76),
    inset 0 1px 0 rgba(255,255,255,0.05);

  overflow:hidden;
}


/* ============================================================
   PROGRESS BAR
============================================================ */

.stage-topbar{

  display:flex;

  align-items:center;

  justify-content:center;

  padding:
    10px 18px 0;

  min-height:6px;
}

.progress-pill-wrap{

  flex:1;

  max-width:340px;
}

.progress-pill-track{

  height:5px;

  border-radius:99px;

  background:
    rgba(255,255,255,0.075);

  overflow:hidden;
}

.progress-pill-fill{

  height:5px;

  border-radius:99px;

  width:0%;

  background:
    linear-gradient(
      90deg,
      #A98648,
      var(--gold),
      var(--gold-hi)
    );

  box-shadow:
    0 2px 8px rgba(201,166,91,0.24);

  transition:
    width .5s cubic-bezier(.4,0,.2,1);
}


/* ============================================================
   STAGE BODY
============================================================ */

.stage-body{

  padding:
    clamp(
      14px,
      3vw,
      22px
    );

  min-height:340px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  position:relative;
}


/* ============================================================
   INITIALIZATION SEQUENCE
============================================================ */

#initScreen{

  position:absolute;

  inset:0;

  z-index:20;

  border-radius:26px;

  background:
    linear-gradient(
      145deg,
      rgba(38,40,45,0.98),
      rgba(22,24,29,0.99)
    );

  min-height:320px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  gap:16px;

  opacity:1;

  transform:
    scale(1);

  filter:
    blur(0);

  transition:
    opacity .48s ease,
    transform .65s cubic-bezier(.22,.61,.36,1),
    filter .55s ease;
}

#initScreen.exit{

  opacity:0;

  pointer-events:none;

  transform:
    scale(.985);

  filter:
    blur(3px);
}


/* ============================================================
   INIT ORB
============================================================ */

.intro-orb{

  width:76px;

  height:76px;

  border-radius:50%;

  background:
    radial-gradient(
      circle at 34% 30%,
      rgba(217,188,120,.85),
      rgba(201,166,91,.17) 56%,
      rgba(201,166,91,.06) 72%
    );

  border:
    1px solid rgba(217,188,120,.18);

  box-shadow:
    0 14px 36px rgba(0,0,0,.28),
    inset 0 1px 8px rgba(255,255,255,.10);

  display:flex;

  align-items:center;

  justify-content:center;

  animation:
    pulseOrb 3.2s ease-in-out infinite;
}

.intro-orb img{

  width:38px;

  height:38px;

  object-fit:contain;
}

@keyframes pulseOrb{

  0%,
  100%{

    transform:
      scale(1);
  }

  50%{

    transform:
      scale(1.045);
  }
}

#initSub{

  font-family:var(--font-cond);

  font-size:11px;

  font-weight:700;

  letter-spacing:3.5px;

  color:var(--dim-2);

  text-transform:uppercase;
}

#initStatus{

  font-family:var(--font-cond);

  font-size:11px;

  font-weight:700;

  letter-spacing:2.5px;

  color:var(--dim);

  text-transform:uppercase;

  min-height:16px;

  margin-top:2px;
}

.analyze-steps{

  display:flex;

  gap:6px;
}

.analyze-step-dot{

  width:6px;

  height:6px;

  border-radius:50%;

  background:
    rgba(255,255,255,.11);

  transition:
    background .3s,
    box-shadow .3s,
    transform .3s;
}

.analyze-step-dot.active{

  background:
    var(--gold);

  box-shadow:
    0 2px 7px
    rgba(201,166,91,.38);

  transform:
    scale(1.12);
}


/* ============================================================
   CINEMATIC HERO REVEAL
============================================================ */

.hero-reveal{

  display:block;

  position:relative;

  width:100%;

  opacity:1;

  transform:
    translateY(0)
    scale(1);

  filter:
    blur(0)
    brightness(1);

  margin-bottom:6px;

  transform-origin:center center;
}

.hero-banner{

  display:block;

  width:100%;

  height:auto;

  border-radius:18px;

  border:
    1px solid rgba(255,255,255,.08);

  box-shadow:
    0 18px 44px -24px rgba(0,0,0,.92),
    0 4px 18px rgba(0,0,0,.25);
}


/* restrained cinematic light sweep */

.hero-reveal::after{

  content:'';

  position:absolute;

  inset:0;

  pointer-events:none;

  border-radius:18px;

  background:
    linear-gradient(
      108deg,
      transparent 12%,
      rgba(229,205,150,.065) 46%,
      transparent 72%
    );

  opacity:0;
}

.hero-reveal.visible::after{

  animation:
    heroLightSweep 1.8s ease .15s both;
}

@keyframes heroLightSweep{

  0%{

    opacity:0;

    transform:
      translateX(-18%);
  }

  35%{

    opacity:.72;
  }

  100%{

    opacity:0;

    transform:
      translateX(14%);
  }
}


/* ============================================================
   MAIN CONTENT REVEAL
============================================================ */

#mainScreen{

  display:block;

  opacity:1;

  transform:
    translateY(0);
}


/* ============================================================
   STATUS
============================================================ */

.status-pill{

  display:inline-block;

  background:
    rgba(201,166,91,.10);

  color:
    var(--gold-hi);

  border:
    1px solid rgba(201,166,91,.29);

  border-radius:999px;

  padding:
    3px 12px;

  font-family:
    var(--font-cond);

  font-size:10px;

  font-weight:700;

  letter-spacing:2px;

  text-transform:uppercase;

  margin-top:0;

  margin-bottom:9px;
}


/* ============================================================
   NARRATIVE
============================================================ */

.narrative{

  font-family:
    var(--font-body);

  font-size:14px;

  line-height:1.75;

  color:
    var(--text);

  background:
    rgba(255,255,255,.035);

  border:
    1px solid rgba(255,255,255,.075);

  border-radius:17px;

  padding:
    16px 18px;

  margin-bottom:16px;
}

.narrative strong{

  color:
    var(--gold-hi);
}

.narrative a{

  color:
    inherit;

  text-decoration:none;
}

.narrative .thesis-line{

  font-family:
    var(--font-head);

  font-weight:700;

  font-size:16px;

  color:
    var(--gold-hi);

  display:block;

  margin-bottom:8px;
}


/* ============================================================
   CTA
============================================================ */

.cta-row{

  display:flex;

  gap:10px;

  flex-wrap:wrap;

  margin-bottom:18px;
}

.pill-btn{

  background:
    linear-gradient(
      135deg,
      #D9BC78,
      #C9A65B
    );

  color:
    #211B10;

  border:
    1px solid rgba(255,255,255,.08);

  font-family:
    var(--font-cond);

  font-weight:700;

  font-size:14px;

  letter-spacing:1.45px;

  padding:
    15px 30px;

  border-radius:999px;

  cursor:pointer;

  text-transform:uppercase;

  box-shadow:
    0 10px 25px
    rgba(0,0,0,.20);

  transition:
    transform .15s ease,
    box-shadow .2s ease,
    filter .2s ease;

  text-decoration:none;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  flex:1;
}

.pill-btn:hover{

  transform:
    translateY(-2px);

  box-shadow:
    0 14px 30px
    rgba(0,0,0,.27);

  filter:
    brightness(1.04);
}

.pill-btn.soft{

  background:
    rgba(255,255,255,.04);

  color:
    var(--text);

  border:
    1px solid rgba(255,255,255,.10);

  box-shadow:none;

  flex:0 0 auto;
}

.pill-btn.soft:hover{

  border-color:
    var(--gold-line);

  background:
    rgba(255,255,255,.055);
}


/* ============================================================
   FAQ
============================================================ */

.grid-title{

  font-family:
    var(--font-cond);

  font-size:11px;

  font-weight:700;

  letter-spacing:3px;

  color:
    var(--dim-2);

  text-transform:uppercase;

  margin-bottom:12px;
}

.faq-list{

  display:flex;

  flex-direction:column;

  gap:9px;
}

.faq-item{

  background:
    rgba(255,255,255,.032);

  border:
    1px solid rgba(255,255,255,.075);

  border-radius:17px;

  overflow:hidden;

  transition:
    border-color .18s ease,
    background .18s ease;
}

.faq-item:hover{

  background:
    rgba(255,255,255,.045);
}

.faq-item[open]{

  border-color:
    rgba(201,166,91,.30);
}

.faq-item summary{

  list-style:none;

  cursor:pointer;

  font-family:
    var(--font-head);

  font-size:15px;

  color:
    var(--text);

  font-weight:600;

  padding:
    15px 18px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  transition:
    color .18s ease;
}

.faq-item summary::-webkit-details-marker{

  display:none;
}

.faq-item summary:hover{

  color:
    var(--gold-hi);
}

.faq-item summary .q-toggle{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  flex-shrink:0;

  width:22px;

  height:22px;

  border-radius:50%;

  background:
    rgba(201,166,91,.10);

  border:
    1px solid rgba(201,166,91,.26);

  color:
    var(--gold-hi);

  font-weight:700;

  font-size:14px;

  transition:
    transform .2s ease;
}

.faq-item[open] summary .q-toggle{

  transform:
    rotate(45deg);
}

.faq-a{

  font-family:
    var(--font-body);

  font-size:13px;

  color:
    var(--dim);

  line-height:1.7;

  padding:
    0 18px 16px;
}

.faq-a strong{

  color:
    var(--text);

  font-weight:600;
}

.faq-a a{

  color:
    var(--gold-hi);

  text-decoration:none;

  font-weight:600;
}

.faq-a a:hover{

  text-decoration:underline;
}

.faq-a .principle-tag{

  display:inline-block;

  font-family:
    var(--font-cond);

  font-size:10px;

  font-weight:700;

  letter-spacing:1px;

  text-transform:uppercase;

  color:
    var(--gold-hi);

  background:
    rgba(201,166,91,.10);

  border:
    1px solid rgba(201,166,91,.26);

  border-radius:999px;

  padding:
    2px 9px;

  margin-left:
    6px;

  vertical-align:
    middle;
}


/* ============================================================
   FOOTER
============================================================ */

.site-footer{

  margin-top:14px;

  text-align:center;

  font-family:
    var(--font-cond);

  font-size:10.5px;

  color:
    var(--dim-2);

  letter-spacing:.5px;
}

.site-footer a{

  color:
    var(--dim);

  text-decoration:none;

  margin:
    0 8px;

  transition:
    color .18s ease;
}

.site-footer a:hover{

  color:
    var(--gold-hi);

  text-decoration:underline;
}

.site-footer .copyright{

  display:block;

  margin-top:8px;
}


/* ============================================================
   CRAWLER FALLBACK
============================================================ */

.static-fallback{

  position:absolute;

  width:1px;

  height:1px;

  overflow:hidden;

  clip:
    rect(0,0,0,0);

  white-space:nowrap;
}

body.js-disabled .static-fallback{

  position:static;

  width:auto;

  height:auto;

  overflow:visible;

  clip:auto;

  white-space:normal;

  padding:20px;

  font-family:
    var(--font-body);

  font-size:14px;

  line-height:1.8;

  color:
    var(--text);
}

body.js-disabled #initScreen{

  display:none;
}

body.js-disabled #mainScreen{

  display:block;

  opacity:1;

  transform:none;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width:640px){

  body{

    padding:
      14px 12px 20px;
  }

  .stage{

    border-radius:20px;
  }

  .stage-body{

    padding:
      12px;
  }

  .hero-banner{

    border-radius:15px;
  }

  .hero-reveal::after{

    border-radius:15px;
  }

  #initScreen{

    min-height:280px;
  }

  .narrative{

    padding:
      15px 16px;
  }

}


/* ============================================================
   TOP NAV
============================================================ */

.site-nav{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  margin-bottom:10px;

  position:relative;
}

.nav-links{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:2px;

  flex:1;

  background:
    rgba(255,255,255,.035);

  border:
    1px solid rgba(255,255,255,.075);

  border-radius:999px;

  padding:5px;
}

.nav-links a{

  font-family:var(--font-cond);

  font-size:12px;

  font-weight:600;

  letter-spacing:.9px;

  text-transform:uppercase;

  color:var(--dim);

  text-decoration:none;

  padding:9px 14px;

  border-radius:999px;

  transition:color .18s ease, background .18s ease;

  white-space:nowrap;

  text-align:center;

  flex:1;
}

.nav-links a:hover,
.nav-links a.active{

  color:var(--gold-hi);

  background:rgba(201,166,91,.10);
}

.nav-apply{

  padding:10px 18px;

  font-size:12px;

  flex:0 0 auto;

  margin-left:10px;
}

.nav-drop{

  position:relative;

  flex:1;
}

.nav-drop-trigger{

  -webkit-appearance:none;

  -moz-appearance:none;

  appearance:none;

  width:100%;

  background:none !important;

  border:none !important;

  box-shadow:none !important;

  outline:none;

  font-family:var(--font-cond) !important;

  font-size:12px !important;

  font-weight:600;

  letter-spacing:.9px;

  text-transform:uppercase;

  color:var(--dim) !important;

  padding:9px 14px;

  margin:0;

  border-radius:999px;

  cursor:pointer;

  white-space:nowrap;

  transition:color .18s ease, background .18s ease;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:4px;

  line-height:1;
}

.nav-drop-trigger:hover,
.nav-drop.open .nav-drop-trigger{

  color:var(--gold-hi) !important;

  background:rgba(201,166,91,.10);
}

.nav-caret{

  font-size:9px;

  transition:transform .18s ease;
}

.nav-drop.open .nav-caret{

  transform:rotate(180deg);
}

.nav-drop-menu{

  position:absolute;

  top:calc(100% + 10px);

  left:50%;

  transform:translateX(-50%);

  min-width:230px;

  background:rgba(23,25,30,.98);

  backdrop-filter:blur(18px);

  border:1px solid var(--gold-line);

  border-radius:16px;

  padding:8px;

  box-shadow:0 20px 48px -20px rgba(0,0,0,.7);

  opacity:0;

  pointer-events:none;

  transform:translateX(-50%) translateY(-6px);

  transition:opacity .18s ease, transform .18s ease;

  z-index:50;
}

.nav-drop.open .nav-drop-menu{

  opacity:1;

  pointer-events:auto;

  transform:translateX(-50%) translateY(0);
}

.nav-drop-menu a{

  display:block;

  font-family:var(--font-body);

  font-size:12.5px;

  color:var(--text);

  text-decoration:none;

  padding:9px 12px;

  border-radius:9px;

  transition:background .15s ease, color .15s ease;

  white-space:nowrap;
}

.nav-drop-menu a:hover{

  background:rgba(201,166,91,.10);

  color:var(--gold-hi);
}

@media (max-width:760px){

  .nav-drop{

    flex:none;
  }

  .nav-drop-trigger{

    justify-content:flex-start;

    text-align:left;
  }

  .nav-drop-menu{

    position:static;

    transform:none;

    opacity:1;

    pointer-events:auto;

    display:none;

    background:rgba(255,255,255,.03);

    border:none;

    box-shadow:none;

    margin:2px 0 4px;

    backdrop-filter:none;
  }

  .nav-drop.open .nav-drop-menu{

    display:block;
  }

  .nav-drop-menu a{

    padding:11px 20px;
  }

}

.nav-toggle{

  display:none;

  width:38px;

  height:38px;

  border-radius:10px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.09);

  color:var(--text);

  cursor:pointer;

  align-items:center;

  justify-content:center;

  font-size:18px;
}

@media (max-width:760px){

  .nav-links{

    position:fixed;

    inset:auto 12px 12px 12px;

    flex-direction:column;

    align-items:stretch;

    background:rgba(23,25,30,.98);

    backdrop-filter:blur(18px);

    border-radius:18px;

    padding:10px;

    transform:translateY(130%);

    opacity:0;

    pointer-events:none;

    transition:transform .3s ease, opacity .3s ease;

    z-index:40;

    box-shadow:0 -14px 40px rgba(0,0,0,.5);
  }

  .nav-links.open{

    transform:translateY(0);

    opacity:1;

    pointer-events:auto;
  }

  .nav-links a{

    text-align:center;

    padding:13px 14px;
  }

  .nav-toggle{

    display:flex;
  }

}


/* ============================================================
   TICKER
============================================================ */

.ticker-wrap{

  overflow:hidden;

  border-top:1px solid rgba(255,255,255,.075);

  border-bottom:1px solid rgba(255,255,255,.075);

  background:rgba(255,255,255,.025);

  padding:10px 0;

  margin-bottom:14px;

  white-space:nowrap;

  position:relative;

  display:flex;

  align-items:center;
}

.ticker-track{

  display:inline-flex;

  align-items:center;

  gap:38px;

  animation:tickerScroll 32s linear infinite;

  padding-left:38px;

  line-height:1;
}

.ticker-track span{

  font-family:var(--font-cond);

  font-size:11px;

  font-weight:600;

  letter-spacing:1.4px;

  text-transform:uppercase;

  color:var(--dim);

  display:inline-flex;

  align-items:center;

  line-height:1;

  gap:8px;
}

.ticker-track span::before{

  content:'◆';

  color:var(--gold);

  font-size:8px;

  line-height:1;

  display:inline-block;

  transform:translateY(-1px);
}

@keyframes tickerScroll{

  from{ transform:translateX(0); }

  to{ transform:translateX(-50%); }
}


/* ============================================================
   SECTION SCAFFOLDING
============================================================ */

.section{

  margin-bottom:22px;
}

.section-eyebrow{

  font-family:var(--font-cond);

  font-size:10.5px;

  font-weight:700;

  letter-spacing:2.6px;

  text-transform:uppercase;

  color:var(--gold-hi);

  margin-bottom:6px;

  display:block;
}

.section-h2{

  font-family:var(--font-head);

  font-size:clamp(19px,3.4vw,24px);

  font-weight:700;

  color:var(--text);

  margin-bottom:10px;

  line-height:1.25;
}

.section-sub{

  font-family:var(--font-body);

  font-size:13.5px;

  color:var(--dim);

  line-height:1.65;

  margin-bottom:16px;

  max-width:56ch;
}


/* ============================================================
   SCARCITY BANNER
============================================================ */

.scarcity-banner{

  display:flex;

  align-items:center;

  gap:12px;

  background:
    linear-gradient(135deg, rgba(201,166,91,.14), rgba(201,166,91,.045));

  border:1px solid var(--gold-line);

  border-radius:17px;

  padding:13px 16px;

  margin-bottom:16px;
}

.scarcity-dot{

  width:9px;

  height:9px;

  border-radius:50%;

  background:#DE6A5C;

  box-shadow:0 0 0 4px rgba(222,106,92,.18);

  flex-shrink:0;

  animation:scarcityPulse 1.8s ease-in-out infinite;
}

@keyframes scarcityPulse{

  0%,100%{ box-shadow:0 0 0 3px rgba(222,106,92,.18); }

  50%{ box-shadow:0 0 0 8px rgba(222,106,92,.05); }
}

.scarcity-text{

  font-family:var(--font-body);

  font-size:12.5px;

  color:var(--text);

  line-height:1.5;
}

.scarcity-text strong{

  color:var(--gold-hi);
}


/* ============================================================
   USP / VALUE GRID
============================================================ */

.value-grid{

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:10px;

  margin-bottom:4px;
}

@media (max-width:560px){

  .value-grid{ grid-template-columns:1fr; }
}

.value-card{

  background:rgba(255,255,255,.032);

  border:1px solid rgba(255,255,255,.075);

  border-radius:16px;

  padding:16px;

  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}

.value-card:hover{

  border-color:var(--gold-line);

  background:rgba(255,255,255,.045);

  transform:translateY(-2px);
}

.value-icon{

  width:34px;

  height:34px;

  border-radius:10px;

  background:rgba(201,166,91,.12);

  border:1px solid rgba(201,166,91,.26);

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:16px;

  margin-bottom:10px;
}

.value-card h3{

  font-family:var(--font-head);

  font-size:14.5px;

  font-weight:700;

  color:var(--text);

  margin-bottom:5px;
}

.value-card p{

  font-family:var(--font-body);

  font-size:12.5px;

  color:var(--dim);

  line-height:1.6;
}


/* ============================================================
   STAT STRIP
============================================================ */

.stat-strip{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:10px;

  margin-bottom:16px;
}

@media (max-width:560px){

  .stat-strip{ grid-template-columns:repeat(3,1fr); gap:6px; }
}

.stat-box{

  text-align:center;

  background:rgba(255,255,255,.03);

  border:1px solid rgba(255,255,255,.07);

  border-radius:14px;

  padding:14px 6px;
}

.stat-num{

  font-family:var(--font-display);

  font-weight:900;

  font-size:clamp(18px,4vw,24px);

  color:var(--gold-hi);

  line-height:1;

  margin-bottom:4px;
}

.stat-label{

  font-family:var(--font-cond);

  font-size:9.5px;

  font-weight:600;

  letter-spacing:.8px;

  text-transform:uppercase;

  color:var(--dim-2);
}


/* ============================================================
   IMAGE PLACEHOLDER
============================================================ */

.img-placeholder{

  width:100%;

  border-radius:16px;

  border:1px dashed rgba(201,166,91,.35);

  background:
    repeating-linear-gradient(
      135deg,
      rgba(201,166,91,.05),
      rgba(201,166,91,.05) 10px,
      rgba(255,255,255,.02) 10px,
      rgba(255,255,255,.02) 20px
    );

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  padding:26px 16px;

  gap:6px;

  margin-bottom:16px;

  min-height:150px;
}

.img-placeholder .ph-icon{

  font-size:22px;

  opacity:.6;
}

.img-placeholder .ph-label{

  font-family:var(--font-cond);

  font-size:11px;

  font-weight:700;

  letter-spacing:1.4px;

  text-transform:uppercase;

  color:var(--gold-hi);
}

.img-placeholder .ph-sub{

  font-family:var(--font-body);

  font-size:11.5px;

  color:var(--dim-2);

  max-width:38ch;
}


/* ============================================================
   SERVICE CARDS
============================================================ */

.service-list{

  display:flex;

  flex-direction:column;

  gap:10px;

  margin-bottom:16px;
}

.service-card{

  position:relative;

  background:rgba(255,255,255,.032);

  border:1px solid rgba(255,255,255,.075);

  border-radius:17px;

  padding:16px 18px;

  transition:border-color .18s ease, background .18s ease;
}

.service-card:hover{

  border-color:var(--gold-line);

  background:rgba(255,255,255,.045);
}

.service-card.popular{

  border-color:var(--gold-line);

  background:
    linear-gradient(135deg, rgba(201,166,91,.09), rgba(255,255,255,.03));
}

.service-badge{

  position:absolute;

  top:-9px;

  right:16px;

  background:linear-gradient(135deg,#D9BC78,#C9A65B);

  color:#211B10;

  font-family:var(--font-cond);

  font-size:9.5px;

  font-weight:700;

  letter-spacing:1px;

  text-transform:uppercase;

  padding:4px 11px;

  border-radius:999px;

  box-shadow:0 4px 12px rgba(0,0,0,.3);
}

.service-top{

  display:flex;

  align-items:baseline;

  justify-content:space-between;

  gap:10px;

  margin-bottom:6px;

  flex-wrap:wrap;
}

.service-top h3{

  font-family:var(--font-head);

  font-size:16px;

  font-weight:700;

  color:var(--text);
}

.service-price{

  font-family:var(--font-cond);

  font-size:12.5px;

  font-weight:700;

  color:var(--gold-hi);

  white-space:nowrap;
}

.service-card p{

  font-family:var(--font-body);

  font-size:12.5px;

  color:var(--dim);

  line-height:1.65;

  margin-bottom:10px;
}

.service-card .pill-btn.soft{

  padding:9px 16px;

  font-size:11px;
}


/* ============================================================
   COMPARISON INFOGRAPHIC
============================================================ */

.compare-panel{

  max-width:400px;

  margin:0 auto 16px;

  border:1px solid rgba(255,255,255,.09);

  border-radius:18px;

  background:
    linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015));

  padding:16px 16px 8px;

  box-shadow:0 18px 40px -22px rgba(0,0,0,.7);
}

.compare-header{

  display:grid;

  grid-template-columns:1fr 58px 58px;

  align-items:end;

  gap:6px;

  margin-bottom:10px;

  padding-bottom:10px;

  border-bottom:1px solid rgba(255,255,255,.09);
}

.compare-header-col{

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:5px;
}

.compare-header-icon{

  width:32px;

  height:32px;

  border-radius:50%;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:14px;

  border:1px solid rgba(255,255,255,.1);

  background:rgba(255,255,255,.05);
}

.compare-header-col.us .compare-header-icon{

  background:linear-gradient(135deg,#D9BC78,#C9A65B);

  border-color:transparent;

  color:#211B10;

  box-shadow:0 6px 16px rgba(201,166,91,.28);
}

.compare-header-label{

  font-family:var(--font-cond);

  font-size:9px;

  font-weight:700;

  letter-spacing:.9px;

  text-transform:uppercase;

  color:var(--dim-2);

  text-align:center;

  line-height:1.2;
}

.compare-header-col.us .compare-header-label{

  color:var(--gold-hi);
}

.compare-row{

  display:grid;

  grid-template-columns:1fr 58px 58px;

  align-items:center;

  gap:6px;

  padding:9px 0;

  border-bottom:1px solid rgba(255,255,255,.055);
}

.compare-row:last-child{

  border-bottom:none;
}

.compare-label{

  font-family:var(--font-body);

  font-size:11.5px;

  font-weight:500;

  color:var(--text);

  line-height:1.3;
}

.compare-cell{

  display:flex;

  align-items:center;

  justify-content:center;
}

.compare-mark{

  width:22px;

  height:22px;

  border-radius:50%;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:11px;

  font-weight:700;

  line-height:1;
}

.compare-mark.yes{

  background:rgba(201,166,91,.16);

  border:1px solid rgba(201,166,91,.4);

  color:var(--gold-hi);
}

.compare-mark.no{

  background:rgba(255,255,255,.04);

  border:1px solid rgba(255,255,255,.09);

  color:var(--dim-2);

  font-size:9px;
}

.compare-mark.text{

  border-radius:8px;

  width:auto;

  min-width:40px;

  padding:3px 6px;

  font-size:9px;

  font-family:var(--font-cond);

  font-weight:700;

  letter-spacing:.4px;

  text-transform:uppercase;
}

.compare-note{

  margin-top:2px;

  margin-bottom:4px;
}


/* ============================================================
   TESTIMONIAL / PROOF
============================================================ */

.proof-card{

  background:rgba(255,255,255,.032);

  border:1px solid rgba(255,255,255,.075);

  border-radius:17px;

  padding:18px;

  margin-bottom:10px;
}

.proof-quote{

  font-family:var(--font-body);

  font-size:13.5px;

  color:var(--text);

  line-height:1.7;

  font-style:italic;

  margin-bottom:12px;
}

.proof-meta{

  display:flex;

  align-items:center;

  gap:10px;
}

.proof-avatar{

  width:36px;

  height:36px;

  border-radius:50%;

  background:rgba(201,166,91,.14);

  border:1px solid rgba(201,166,91,.3);

  display:flex;

  align-items:center;

  justify-content:center;

  font-family:var(--font-head);

  font-weight:700;

  color:var(--gold-hi);

  font-size:13px;

  flex-shrink:0;
}

.proof-name{

  font-family:var(--font-cond);

  font-size:12px;

  font-weight:700;

  color:var(--text);
}

.proof-role{

  font-family:var(--font-cond);

  font-size:10.5px;

  color:var(--dim-2);
}

.proof-note{

  font-family:var(--font-cond);

  font-size:10.5px;

  color:var(--dim-2);

  text-align:center;

  margin-top:4px;
}


/* ============================================================
   NEWSLETTER / INLINE CAPTURE
============================================================ */

.capture-box{

  background:
    linear-gradient(145deg, rgba(201,166,91,.1), rgba(255,255,255,.025));

  border:1px solid var(--gold-line);

  border-radius:18px;

  padding:18px;

  margin-bottom:18px;
}

.capture-box h3{

  font-family:var(--font-head);

  font-size:15.5px;

  font-weight:700;

  color:var(--text);

  margin-bottom:5px;
}

.capture-box p{

  font-family:var(--font-body);

  font-size:12px;

  color:var(--dim);

  margin-bottom:12px;

  line-height:1.55;
}

.capture-form{

  display:flex;

  gap:8px;

  flex-wrap:wrap;
}

.capture-form input[type=email]{

  flex:1;

  min-width:160px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.12);

  border-radius:999px;

  padding:12px 16px;

  color:var(--text);

  font-family:var(--font-body);

  font-size:13px;

  outline:none;

  transition:border-color .18s ease;
}

.capture-form input[type=email]:focus{

  border-color:var(--gold-line);
}

.capture-form button{

  flex:0 0 auto;
}

.capture-note{

  font-family:var(--font-cond);

  font-size:10px;

  color:var(--dim-2);

  margin-top:8px;
}


/* ============================================================
   EDUCATION / RESOURCE GRID
============================================================ */

.edu-search{

  display:flex;

  align-items:center;

  gap:8px;

  background:rgba(255,255,255,.04);

  border:1px solid rgba(255,255,255,.09);

  border-radius:999px;

  padding:10px 16px;

  margin-bottom:14px;
}

.edu-search input{

  flex:1;

  background:none;

  border:none;

  outline:none;

  color:var(--text);

  font-family:var(--font-body);

  font-size:13px;
}

.edu-search input::placeholder{

  color:var(--dim-2);
}

.edu-topics{

  display:flex;

  flex-wrap:wrap;

  gap:6px;

  margin-bottom:14px;
}

.edu-topic-pill{

  font-family:var(--font-cond);

  font-size:10.5px;

  font-weight:700;

  letter-spacing:.6px;

  text-transform:uppercase;

  color:var(--dim);

  background:rgba(255,255,255,.04);

  border:1px solid rgba(255,255,255,.09);

  border-radius:999px;

  padding:7px 13px;

  cursor:pointer;

  transition:color .18s ease, border-color .18s ease, background .18s ease;
}

.edu-topic-pill.active,
.edu-topic-pill:hover{

  color:var(--gold-hi);

  border-color:var(--gold-line);

  background:rgba(201,166,91,.1);
}

.edu-grid{

  display:flex;

  flex-direction:column;

  gap:10px;

  margin-bottom:8px;
}

.edu-card{

  background:rgba(255,255,255,.032);

  border:1px solid rgba(255,255,255,.075);

  border-radius:16px;

  padding:15px 16px;

  text-decoration:none;

  display:block;

  transition:border-color .18s ease, background .18s ease;
}

.edu-card:hover{

  border-color:var(--gold-line);

  background:rgba(255,255,255,.045);
}

.edu-card-tag{

  font-family:var(--font-cond);

  font-size:9.5px;

  font-weight:700;

  letter-spacing:1px;

  text-transform:uppercase;

  color:var(--gold-hi);

  margin-bottom:6px;

  display:inline-block;
}

.edu-card h3{

  font-family:var(--font-head);

  font-size:14.5px;

  font-weight:700;

  color:var(--text);

  margin-bottom:5px;

  line-height:1.3;
}

.edu-card p{

  font-family:var(--font-body);

  font-size:12px;

  color:var(--dim);

  line-height:1.55;

  margin-bottom:8px;
}

.edu-card .read-more{

  font-family:var(--font-cond);

  font-size:11px;

  font-weight:700;

  color:var(--gold-hi);

  letter-spacing:.6px;

  text-transform:uppercase;
}

.edu-empty{

  text-align:center;

  color:var(--dim-2);

  font-family:var(--font-body);

  font-size:12.5px;

  padding:24px 10px;

  display:none;
}


/* ============================================================
   SOCIAL SHARE
============================================================ */

.share-row{

  display:flex;

  align-items:center;

  gap:8px;

  flex-wrap:wrap;

  padding:14px 0 4px;

  border-top:1px solid rgba(255,255,255,.075);

  margin-top:6px;
}

.share-label{

  font-family:var(--font-cond);

  font-size:10.5px;

  font-weight:700;

  letter-spacing:1.2px;

  text-transform:uppercase;

  color:var(--dim-2);

  margin-right:2px;
}

.share-btn{

  width:32px;

  height:32px;

  border-radius:50%;

  background:rgba(255,255,255,.045);

  border:1px solid rgba(255,255,255,.09);

  display:flex;

  align-items:center;

  justify-content:center;

  color:var(--dim);

  text-decoration:none;

  font-size:13px;

  cursor:pointer;

  transition:border-color .18s ease, color .18s ease, background .18s ease;
}

.share-btn:hover{

  border-color:var(--gold-line);

  color:var(--gold-hi);

  background:rgba(201,166,91,.1);
}


/* ============================================================
   GROWTH DIAGNOSTIC QUIZ
============================================================ */

.quiz-box{

  background:
    linear-gradient(145deg, rgba(38,40,45,.9), rgba(22,24,29,.95));

  border:1px solid var(--gold-line);

  border-radius:20px;

  padding:22px 20px;

  box-shadow:0 20px 48px -26px rgba(0,0,0,.75);
}

.quiz-progress-track{

  height:5px;

  border-radius:99px;

  background:rgba(255,255,255,.075);

  overflow:hidden;

  margin-bottom:10px;
}

.quiz-progress-fill{

  height:5px;

  border-radius:99px;

  width:20%;

  background:linear-gradient(90deg,#A98648,var(--gold),var(--gold-hi));

  transition:width .4s cubic-bezier(.4,0,.2,1);
}

.quiz-step-label{

  font-family:var(--font-cond);

  font-size:10.5px;

  font-weight:700;

  letter-spacing:1.6px;

  text-transform:uppercase;

  color:var(--dim-2);

  margin-bottom:16px;
}

.quiz-q-text{

  font-family:var(--font-head);

  font-size:16.5px;

  font-weight:700;

  color:var(--text);

  line-height:1.4;

  margin-bottom:16px;

  min-height:44px;
}

.quiz-options{

  display:flex;

  flex-direction:column;

  gap:9px;
}

.quiz-opt{

  text-align:left;

  background:rgba(255,255,255,.035);

  border:1px solid rgba(255,255,255,.09);

  border-radius:13px;

  padding:13px 16px;

  color:var(--text);

  font-family:var(--font-body);

  font-size:13.5px;

  cursor:pointer;

  transition:border-color .18s ease, background .18s ease, transform .15s ease;
}

.quiz-opt:hover{

  border-color:var(--gold-line);

  background:rgba(201,166,91,.09);

  transform:translateX(2px);
}

.quiz-result{

  text-align:center;
}

.quiz-result-score{

  font-family:var(--font-display);

  font-weight:900;

  font-size:clamp(38px,9vw,52px);

  color:var(--gold-hi);

  line-height:1;

  margin-bottom:8px;
}

.quiz-result-title{

  font-family:var(--font-head);

  font-size:17px;

  font-weight:700;

  color:var(--text);

  margin-bottom:10px;
}

.quiz-result-body{

  font-family:var(--font-body);

  font-size:13px;

  color:var(--dim);

  line-height:1.65;

  margin-bottom:18px;

  max-width:48ch;

  margin-left:auto;

  margin-right:auto;
}

.quiz-result .capture-form{

  max-width:420px;

  margin:0 auto;
}

.quiz-retake{

  background:none;

  border:none;

  color:var(--dim-2);

  font-family:var(--font-cond);

  font-size:11px;

  font-weight:700;

  letter-spacing:1px;

  text-transform:uppercase;

  cursor:pointer;

  margin-top:14px;

  text-decoration:underline;

  text-underline-offset:3px;
}

.quiz-retake:hover{

  color:var(--gold-hi);
}


/* ============================================================
   VERIFIED PERFORMANCE CHARTS
============================================================ */

.scorecard-grid{

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:12px;

  margin-bottom:16px;
}

@media (max-width:640px){

  .scorecard-grid{

    grid-template-columns:1fr;
  }
}

.scorecard{

  background:
    linear-gradient(150deg, rgba(255,255,255,.045), rgba(255,255,255,.02));

  border:1px solid rgba(255,255,255,.08);

  border-left:3px solid var(--sc-accent, var(--gold));

  border-radius:14px;

  padding:14px 16px 12px;

  transition:border-color .18s ease, transform .18s ease;
}

.scorecard:hover{

  transform:translateY(-2px);
}

.scorecard-split{

  --sc-accent:#8FB0C9;
}

.scorecard-head{

  display:flex;

  align-items:baseline;

  justify-content:space-between;

  gap:8px;

  margin-bottom:2px;
}

.scorecard-label{

  font-family:var(--font-cond);

  font-size:10.5px;

  font-weight:700;

  letter-spacing:1px;

  text-transform:uppercase;

  color:var(--dim-2);
}

.scorecard-delta{

  font-family:var(--font-display);

  font-weight:900;

  font-size:17px;

  color:var(--sc-accent-hi, var(--gold-hi));

  white-space:nowrap;
}

.scorecard-svg text{

  font-family:var(--font-cond);
}

.scorecard-svg{

  display:block;

  width:100%;

  height:auto;

  margin-top:2px;
}

.scorecard-note{

  font-family:var(--font-body);

  font-size:11px;

  color:var(--dim-2);

  line-height:1.5;

  margin-top:2px;
}

.chart-source-note{

  font-family:var(--font-cond);

  font-size:10px;

  color:var(--dim-2);

  text-align:center;

  margin:4px 0 16px;

  line-height:1.6;
}


/* ============================================================
   STICKY DISCOVERY CTA
============================================================ */

.sticky-cta{

  position:fixed;

  left:50%;

  bottom:16px;

  transform:translate(-50%,140%);

  z-index:60;

  display:flex;

  align-items:center;

  gap:10px;

  background:rgba(23,25,30,.97);

  backdrop-filter:blur(18px);

  border:1px solid var(--gold-line);

  border-radius:999px;

  padding:9px 9px 9px 16px;

  box-shadow:0 16px 44px rgba(0,0,0,.5);

  transition:transform .4s cubic-bezier(.22,.61,.36,1);

  max-width:calc(100% - 24px);
}

.sticky-cta.visible{

  transform:translate(-50%,0);
}

.sticky-cta span{

  font-family:var(--font-cond);

  font-size:11.5px;

  font-weight:600;

  color:var(--text);

  white-space:nowrap;
}

.sticky-cta .pill-btn{

  padding:9px 16px;

  font-size:11px;

  flex:0 0 auto;
}

.sticky-cta-close{

  background:none;

  border:none;

  color:var(--dim-2);

  cursor:pointer;

  font-size:15px;

  padding:0 3px;
}

@media (max-width:560px){

  .sticky-cta span{ display:none; }
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{

    animation-duration:.01ms !important;

    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;
  }
}