/* ── HEARTI Leader Quotient ── taste-skill v2 ──────────────
   DESIGN_VARIANCE: 7   MOTION_INTENSITY: 7   VISUAL_DENSITY: 3
   Fonts: Playfair Display (serif) + Lato (sans)
──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400;1,700&family=Lato:wght@300;400;700&display=swap');

:root {
  --purple:#4B3FA0; --purple-mid:#7C6FD4; --purple-light:#EDE9FA; --purple-deep:#1a1244;
  --dark:#0F0E1A; --ink:#1A1A2E; --text:#2C2C2C; --muted:#6B6B80; --ghost:#9999bb; --dim:#444466;
  --white:#FFFFFF; --off:#F9F8FF; --line:#E4E2F0; --card-bg:#F5F4FF;
  --teal:#1D9E75; --teal-light:#E1F5EE; --teal-dim:#5DCAA5;
  --amber:#BA7517; --amber-light:#FAEEDA; --amber-bright:#EF9F27;
  --coral:#D85A30; --coral-light:#FAECE7;
  --r:10px; --r-sm:6px; --r-lg:14px;
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 2px 8px rgba(75,63,160,.08);
  --shadow-md:0 8px 32px rgba(75,63,160,.12);
  --shadow-lg:0 16px 56px rgba(75,63,160,.18);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Lato',system-ui,sans-serif;font-size:16px;line-height:1.7;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--purple);text-decoration:none}
a:hover{text-decoration:underline}

/* ── TYPOGRAPHY ───────────────────────────────────────────── */
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;line-height:1.12;color:var(--ink)}
h1{font-size:clamp(2.4rem,5.5vw,4rem);font-style:italic;font-weight:700}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-style:italic;font-weight:700}
h3{font-size:clamp(1.1rem,1.8vw,1.4rem);font-weight:700}
p{margin-bottom:1rem}p:last-child{margin-bottom:0}
.lead{font-size:1.1rem;color:var(--muted);line-height:1.75}

/* ── KICKER LINES ─────────────────────────────────────────── */
.kicker{display:flex;align-items:center;gap:.6rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.85rem}
.kicker::before{content:'';flex-shrink:0;width:22px;height:1.5px;background:currentColor}
.kicker--teal{color:var(--teal-dim)}
.kicker--purple{color:var(--purple)}
.kicker--white{color:rgba(255,255,255,.5)}
.kicker--amber{color:var(--amber-bright)}

/* ── LAYOUT ──────────────────────────────────────────────── */
.container{max-width:1120px;margin:0 auto;padding:0 1.75rem}
.container--narrow{max-width:720px;margin:0 auto;padding:0 1.75rem}
section{padding:6rem 0}

/* ── SCROLL PROGRESS ─────────────────────────────────────── */
.scroll-progress{position:fixed;top:0;left:0;width:0%;height:3px;background:linear-gradient(90deg,var(--teal),var(--purple));z-index:300;transition:width .08s linear;pointer-events:none}

/* ── NAV ─────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:200;background:rgba(15,14,26,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:66px}
.nav__logo img{height:34px}
.nav__links{display:flex;align-items:center;gap:1.75rem;list-style:none}
.nav__links a{font-size:.82rem;font-weight:700;color:var(--ghost);transition:color .15s;letter-spacing:.02em}
.nav__links a:hover{color:var(--white);text-decoration:none}
.nav__cta{background:var(--teal)!important;color:var(--white)!important;padding:.5rem 1.15rem;border-radius:20px;font-weight:700;font-size:.82rem;transition:all .2s}
.nav__cta:hover{background:#178a64!important;transform:translateY(-1px);text-decoration:none}
.nav__hamburger{display:none;cursor:pointer;border:none;background:none;padding:.5rem}
.nav__hamburger span{display:block;width:20px;height:1.5px;background:var(--ghost);margin:5px 0;transition:all .2s}

/* ── HERO — asymmetric split ─────────────────────────────── */
.hero{background:var(--dark);padding:5rem 0 0;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-160px;left:-160px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(75,63,160,.28) 0%,transparent 70%);pointer-events:none}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;position:relative;z-index:1}
.hero__text{padding-bottom:4.5rem}
.hero h1{color:var(--white);margin-bottom:1.1rem}
.hero h1 .accent{color:var(--teal-dim)}
.hero__sub{font-size:1rem;color:var(--ghost);line-height:1.7;margin-bottom:1.75rem;max-width:360px}
.hero__actions{display:flex;flex-direction:column;gap:.75rem;align-items:stretch}
.hero__meta{font-size:.78rem;color:var(--dim);margin-top:.75rem}

/* Spectra floats up from bottom */
.hero__spectra{display:flex;align-items:flex-end;justify-content:center}
.spectra-float{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:1.75rem 1.75rem 0;width:100%;text-align:center}
.spectra-float__label{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(153,153,187,.6);margin-bottom:.5rem}
.spectra-float__name{font-family:'Playfair Display',serif;font-size:.95rem;color:var(--white);font-style:italic;margin-bottom:1rem}
.spectra-float svg{margin:0 auto;max-width:100%;height:auto}
.spectra-result{display:flex;gap:.5rem;justify-content:center;margin:1rem 0 1.25rem}
.spectra-pill{font-size:.72rem;font-weight:700;padding:.25rem .75rem;border-radius:20px}

/* radar animations */
@keyframes radar-draw{from{stroke-dashoffset:500;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@keyframes radar-fill{from{opacity:0}to{opacity:1}}
@keyframes radar-pulse{0%,100%{opacity:.9}50%{opacity:.5}}
.radar-path{stroke-dasharray:500;stroke-dashoffset:500;animation:radar-draw 1.6s var(--ease-out) .3s forwards}
.radar-area{opacity:0;animation:radar-fill .7s ease-out 1.7s forwards}
.radar-dot{animation:radar-pulse 2.8s ease-in-out infinite}

/* ── TICKER ──────────────────────────────────────────────── */
.ticker{background:#080717;padding:.7rem 0;overflow:hidden;border-top:1px solid rgba(255,255,255,.04)}
.ticker__inner{display:flex;width:max-content;animation:tick 36s linear infinite}
.ticker__item{font-size:.8rem;color:#555577;padding:0 2rem;white-space:nowrap;border-right:1px solid rgba(255,255,255,.05);flex-shrink:0}
.ticker__item strong{color:#7777aa}
@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── DATA STRIP ──────────────────────────────────────────── */
.data-strip{background:var(--dark);padding:3.5rem 0;border-top:1px solid rgba(255,255,255,.05)}
.data-strip__grid{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.data-num{font-family:'Playfair Display',serif;font-size:3.2rem;color:var(--white);display:block;font-style:italic;line-height:1}
.data-label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:.4rem;display:block}
.data-divider{border-left:1px solid rgba(255,255,255,.06)}

/* ── QUIZ TEASER ─────────────────────────────────────────── */
.quiz{background:var(--purple-light);padding:5.5rem 0}
.quiz__inner{max-width:640px;margin:0 auto}
.quiz__card{background:var(--white);border-radius:var(--r);padding:1.75rem;margin:1.25rem 0;border-left:3px solid var(--purple)}
.quiz__qlabel{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.quiz__qtext{font-size:1.05rem;font-weight:700;color:var(--ink);line-height:1.5}
.quiz__opts{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1rem}
.quiz__opt{background:var(--white);border:2px solid var(--line);border-radius:var(--r-sm);padding:.8rem;font-size:.9rem;font-family:'Lato',sans-serif;color:var(--text);cursor:pointer;transition:all .18s var(--ease-spring);text-align:center}
.quiz__opt:hover{border-color:var(--purple-mid);transform:translateY(-1px)}
.quiz__opt.sel{border-color:var(--purple);background:var(--purple-light);color:var(--purple);font-weight:700;transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.quiz__opt--wide{grid-column:span 2}
.quiz__reveal{display:none;background:var(--dark);border-radius:var(--r);padding:2rem;text-align:center}
.quiz__reveal.show{display:block;animation:fadeUp .4s var(--ease-out)}
.quiz__stat{font-family:'Playfair Display',serif;font-size:3.5rem;color:#9990e8;display:block;line-height:1;font-style:italic;margin-bottom:.3rem}
.quiz__reveal-text{font-size:.9rem;color:var(--ghost);line-height:1.65;margin-bottom:1.5rem}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.4rem;font-family:'Lato',sans-serif;font-weight:700;font-size:.92rem;padding:.78rem 1.75rem;border-radius:var(--r-sm);border:2px solid transparent;cursor:pointer;transition:all .2s var(--ease-spring);text-decoration:none;letter-spacing:.01em}
.btn--teal{background:var(--teal);color:var(--white);border-color:var(--teal)}
.btn--teal:hover{background:#178a64;transform:translateY(-2px);box-shadow:0 8px 28px rgba(29,158,117,.28);text-decoration:none}
.btn--primary{background:var(--purple);color:var(--white);border-color:var(--purple)}
.btn--primary:hover{background:#3a3090;transform:translateY(-2px);box-shadow:var(--shadow-md);text-decoration:none}
.btn--amber{background:var(--amber);color:var(--white);border-color:var(--amber)}
.btn--amber:hover{background:#9c6313;transform:translateY(-2px);text-decoration:none}
.btn--outline{background:transparent;color:var(--purple);border-color:var(--purple)}
.btn--outline:hover{background:var(--purple-light);transform:translateY(-1px);text-decoration:none}
.btn--ghost-white{background:transparent;color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.25)}
.btn--ghost-white:hover{background:rgba(255,255,255,.08);text-decoration:none}
.btn--lg{font-size:1rem;padding:.88rem 2.1rem}
.btn--full{width:100%;justify-content:center;display:flex}

/* ── PRICING ──────────────────────────────────────────────── */
.pricing{background:var(--white);padding:6rem 0}
.pricing__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:start;margin-top:2.25rem}
.pricing__card{background:var(--off);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:1.85rem;position:relative;transition:all .22s var(--ease-spring)}
.pricing__card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.pricing__card--offset{margin-top:1.75rem}
.pricing__card--featured{outline:2.5px solid var(--purple);background:var(--white)}
.pricing__card--featured::before{content:"Most popular";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--purple);color:var(--white);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.22rem .85rem;border-radius:20px;white-space:nowrap}
.pricing__tier{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.pricing__price{font-family:'Playfair Display',serif;font-size:2.8rem;color:var(--ink);line-height:1;font-style:italic;margin-bottom:.25rem}
.pricing__cadence{font-size:.82rem;color:var(--muted);margin-bottom:1.25rem}
.pricing__feats{list-style:none;margin-bottom:1.5rem}
.pricing__feats li{font-size:.88rem;padding:.38rem 0;border-bottom:.5px solid var(--line);color:var(--text)}
.pricing__feats li:last-child{border-bottom:none}
.pricing__feats li::before{content:"— ";color:var(--teal);font-weight:700}

/* Foundations bar */
.foundations-bar{background:linear-gradient(135deg,#1a0e00,#2a1600);border-radius:var(--r-lg);padding:1.85rem 2rem;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin-top:1.25rem;flex-wrap:wrap}
.foundations-bar__text{}
.foundations-bar__tier{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-bright);margin-bottom:.3rem}
.foundations-bar__name{font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--white);font-style:italic}
.foundations-bar__sub{font-size:.85rem;color:#9a7a40;margin-top:.25rem}
.foundations-bar__right{text-align:right;flex-shrink:0}
.foundations-bar__price{font-family:'Playfair Display',serif;font-size:2.6rem;color:var(--amber-bright);font-style:italic;line-height:1}
.pricing__teams{text-align:center;margin-top:1.75rem;font-size:.88rem;color:var(--muted)}
.pricing__teams a{color:var(--purple);font-weight:700}

/* ── LOGOS ──────────────────────────────────────────────── */
.client-logos{background:var(--off);padding:3rem 0;border-top:.5px solid var(--line);border-bottom:.5px solid var(--line)}
.logos-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.5rem 2.5rem;margin-top:1.5rem}
.logos-grid img{height:28px;opacity:.45;filter:grayscale(100%);transition:all .25s var(--ease-out)}
.logos-grid img:hover{opacity:1;filter:grayscale(0%);transform:scale(1.05)}

/* ── STEPS ──────────────────────────────────────────────── */
.steps{background:var(--white);padding:6rem 0}
.steps__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:3rem;counter-reset:steps}
.step-card{position:relative}
.step-card::before{counter-increment:steps;content:counter(steps);display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--purple);color:var(--white);font-weight:700;font-size:1rem;font-family:'Playfair Display',serif;margin-bottom:1rem;font-style:italic}
.step-card h3{font-size:1rem;margin-bottom:.55rem}
.step-card p{font-size:.88rem;color:var(--muted)}

/* ── TESTIMONIALS ──────────────────────────────────────── */
.testimonials{background:var(--dark);padding:6rem 0}
.testimonials__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem}
.testimonial{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:var(--r-lg);padding:1.85rem;transition:all .22s}
.testimonial:hover{background:rgba(75,63,160,.08);border-color:rgba(75,63,160,.3);transform:translateY(-2px)}
.testimonial__quote{font-size:.9rem;line-height:1.72;color:#cccce0;font-style:italic;margin-bottom:1.25rem}
.testimonial__quote::before{content:'\201C';font-family:'Playfair Display',serif;font-size:2rem;color:var(--purple-mid);line-height:0;vertical-align:-.55rem;margin-right:.15rem}
.testimonial__name{font-size:.85rem;font-weight:700;color:var(--white)}
.testimonial__title{font-size:.78rem;color:#666688;margin-top:.2rem}

/* ── BOTTOM CTA ─────────────────────────────────────────── */
.bottom-cta{background:linear-gradient(135deg,var(--dark) 0%,var(--purple-deep) 100%);padding:7rem 0;text-align:center;position:relative;overflow:hidden}
.bottom-cta::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:300px;background:radial-gradient(ellipse,rgba(75,63,160,.22) 0%,transparent 70%);pointer-events:none}
.bottom-cta .kicker{justify-content:center;position:relative}
.bottom-cta h2{color:var(--white);max-width:580px;margin:.75rem auto 1rem;position:relative}
.bottom-cta p{color:rgba(255,255,255,.6);margin-bottom:2rem;position:relative}

/* ── EXIT MODAL ─────────────────────────────────────────── */
.exit-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:999;align-items:center;justify-content:center}
.exit-overlay.show{display:flex}
.exit-modal{background:var(--white);border-radius:var(--r-lg);padding:3rem;max-width:460px;width:90%;text-align:center;animation:fadeUp .3s var(--ease-out)}
.exit-modal__close{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--muted)}
.exit-modal h3{font-family:'Playfair Display',serif;font-style:italic;margin-bottom:.75rem}
.exit-modal p{color:var(--muted);font-size:.9rem;margin-bottom:1.75rem}

/* ── FOOTER ─────────────────────────────────────────────── */
.footer{background:#06060F;color:var(--ghost);padding:4.5rem 0 2rem}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem;margin-bottom:3.5rem}
.footer__tagline{font-family:'Playfair Display',serif;font-style:italic;font-size:1.05rem;color:var(--white);margin-top:.5rem}
.footer__brand p{font-size:.85rem;margin-top:.75rem;max-width:270px;line-height:1.7;color:#666688}
.footer__logo img{height:28px;filter:brightness(0) invert(1);opacity:.55}
.footer__links h4{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--white);margin-bottom:1rem}
.footer__links ul{list-style:none}
.footer__links li{margin-bottom:.55rem}
.footer__links a{font-size:.85rem;color:#555577;transition:color .15s}
.footer__links a:hover{color:var(--white);text-decoration:none}
.footer__bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:1.75rem;display:flex;justify-content:space-between;font-size:.78rem;flex-wrap:wrap;gap:.75rem;color:#333355}

/* ── SCROLL ANIMATIONS ──────────────────────────────────── */
.fade-up{opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.fade-up.visible{opacity:1;transform:translateY(0)}
.fade-up-d1{transition-delay:.1s}.fade-up-d2{transition-delay:.2s}.fade-up-d3{transition-delay:.3s}.fade-up-d4{transition-delay:.4s}

/* ── UTILS ──────────────────────────────────────────────── */
.text-center{text-align:center}
.callout{background:var(--purple-light);border-left:3px solid var(--purple);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:1.25rem 1.5rem;font-style:italic;line-height:1.65;color:var(--text)}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:960px){
  .hero__grid{grid-template-columns:1fr;align-items:start}.hero__text{padding-bottom:0}
  .hero__spectra{padding-top:2rem}.spectra-float{border-radius:var(--r-lg)}
  .pricing__grid{grid-template-columns:1fr;max-width:380px;margin-left:auto;margin-right:auto}
  .pricing__card--offset{margin-top:0}
  .testimonials__grid{grid-template-columns:1fr}
  .steps__grid{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .data-strip__grid{grid-template-columns:1fr;gap:2.5rem}
  .data-divider{border-left:none;border-top:1px solid rgba(255,255,255,.06);padding-top:2.5rem}
}
@media(max-width:640px){
  section{padding:4rem 0}
  h1{font-size:2.2rem}
  .hero{padding:3.5rem 0 0}
  .quiz__opts{grid-template-columns:1fr}
  .quiz__opt--wide{grid-column:span 1}
  .steps__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:2rem}
  .footer__bottom{flex-direction:column;text-align:center}
  .hero__actions .btn{width:100%;justify-content:center;text-align:center}
  .logos-grid{gap:1.25rem 2rem}
  .logos-grid img{height:22px}
  .nav__links{display:none;position:absolute;top:66px;left:0;right:0;background:rgba(15,14,26,.98);flex-direction:column;gap:0;border-bottom:1px solid rgba(255,255,255,.08);padding:1rem 1.75rem;z-index:100}
  .nav__links.open{display:flex}
  .nav__hamburger{display:block}
}

/* Generic: prevent horizontal scroll on small screens */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Adjust the selector to match your actual button container in the hero */
.hero-cta,
.hero__buttons,
.hero-buttons,
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Mobile layout for hero CTAs */
@media (max-width: 768px) {
  .hero-cta,
  .hero__buttons,
  .hero-buttons,
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-cta a,
  .hero__buttons a,
  .hero-buttons a,
  .hero-actions a,
  .hero-cta button,
  .hero__buttons button,
  .hero-buttons button,
  .hero-actions button {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    white-space: normal;
  }

  /* Optional: slightly reduce padding so buttons do not feel oversized on mobile */
  .hero-cta a,
  .hero__buttons a,
  .hero-buttons a,
  .hero-actions a,
  .hero-cta button,
  .hero__buttons button,
  .hero-buttons button,
  .hero-actions button {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
}