/* ===========================================================
   ACEYantraa — Design System
   Display: Bricolage Grotesque · Body: IBM Plex Sans · Data: IBM Plex Mono
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* --- color --- */
  --navy-950:#0B1330;
  --navy-900:#111B3F;
  --navy-800:#182556;
  --navy-700:#22326E;
  --cream:#F6F1E3;
  --cream-dim:#ECE4CE;
  --paper:#FBF8EF;
  --ink:#1B2033;
  --slate:#5B6478;
  --slate-soft:#8791A3;
  --saffron:#E7A034;
  --saffron-deep:#B87A1E;
  --saffron-pale:#FBE7C4;
  --line-on-cream:rgba(27,32,51,0.12);
  --line-on-navy:rgba(246,241,227,0.16);
  --good:#3F7A5C;
  --bad:#B24A3C;

  /* --- type --- */
  --f-display:'Bricolage Grotesque', system-ui, sans-serif;
  --f-body:'IBM Plex Sans', system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, monospace;

  /* --- layout --- */
  --maxw:1180px;
  --pad:clamp(20px, 5vw, 64px);
  --radius:14px;
  --radius-sm:8px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--f-display); margin:0; font-weight:700; letter-spacing:-0.01em;}
p{margin:0;}
:focus-visible{outline:2px solid var(--saffron-deep); outline-offset:3px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);}
.section{padding:clamp(56px,9vw,108px) 0;}
.section-navy{background:var(--navy-950); color:var(--paper);}
.section-cream-dim{background:var(--cream-dim);}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--saffron-deep); margin-bottom:16px;
}
.section-navy .eyebrow{color:var(--saffron);}
.eyebrow::before{content:""; width:22px; height:1px; background:currentColor; display:inline-block;}

h2.h-section{font-size:clamp(28px,3.6vw,42px); line-height:1.12; max-width:820px;}
.section-navy h2.h-section{color:var(--paper);}
.lede{font-size:18px; line-height:1.65; color:var(--slate); max-width:640px; margin-top:16px;}
.section-navy .lede{color:rgba(246,241,227,0.72);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-body); font-weight:600; font-size:15px;
  padding:13px 24px; border-radius:999px; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--saffron); color:var(--navy-950); border-color:var(--saffron);}
.btn-primary:hover{background:var(--saffron-deep); border-color:var(--saffron-deep);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-on-cream);}
.btn-ghost:hover{border-color:var(--ink);}
.section-navy .btn-ghost{color:var(--paper); border-color:var(--line-on-navy);}
.section-navy .btn-ghost:hover{border-color:var(--paper);}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px;}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(246,241,227,0.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-on-cream);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--f-display); font-weight:700; font-size:19px; color:var(--ink);}
.brand-mark{width:32px; height:32px; flex-shrink:0; object-fit:contain;}
.nav-links{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0;}
.nav-links a{text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ink); position:relative;}
.nav-links a[aria-current="page"]{color:var(--saffron-deep);}
.nav-dropdown{position:relative;}
.nav-dropdown > .nav-drop-trigger{display:flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer; font:inherit; color:inherit; padding:0;}
.nav-dropdown .caret{font-size:11px; transition:transform .15s ease;}
.nav-dropdown.open .caret{transform:rotate(180deg);}
.nav-dropdown-panel{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  background:var(--paper); border:1px solid var(--line-on-cream); border-radius:var(--radius-sm);
  padding:8px; min-width:230px; box-shadow:0 18px 40px rgba(11,19,48,0.14);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s ease;
  z-index:10;
}
.nav-dropdown.open .nav-dropdown-panel{opacity:1; visibility:visible; pointer-events:auto;}
.nav-dropdown-panel a{display:block; padding:10px 12px; border-radius:6px; font-size:14px; white-space:nowrap;}
.nav-dropdown-panel a:hover{background:var(--cream-dim);}
@media (max-width:880px){
  .nav-dropdown-panel{position:static; transform:none; box-shadow:none; border:none; padding:4px 0 4px 14px; min-width:0; max-height:0; overflow:hidden; opacity:1; visibility:visible; pointer-events:auto; transition:max-height .2s ease;}
  .nav-dropdown.open .nav-dropdown-panel{max-height:200px;}
}
.nav-cta{display:flex; align-items:center; gap:18px;}
.nav-toggle{display:none; background:none; border:none; cursor:pointer;}
@media (max-width: 880px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
  .nav-cta .btn-primary{padding:10px 16px; font-size:13.5px;}
}

/* ---------- stat bar ---------- */
.statbar{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:48px;}
.stat b{display:block; font-family:var(--f-mono); font-size:clamp(28px,3.4vw,40px); color:var(--saffron); font-weight:600;}
.stat span{font-size:13px; color:var(--slate-soft); line-height:1.4; display:block; margin-top:6px;}
.section-navy .stat span{color:rgba(246,241,227,0.6);}
@media (max-width:760px){.statbar{grid-template-columns:repeat(2,1fr); row-gap:32px;}}

.tickertrack{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--line-on-navy);
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:0.04em; color:rgba(246,241,227,0.45);
  overflow:hidden; white-space:nowrap;
}

/* ---------- pattern / pain cards ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:44px;}
@media (max-width:880px){.grid-3,.grid-2{grid-template-columns:1fr;}}
.card{
  background:var(--paper); border:1px solid var(--line-on-cream); border-radius:var(--radius);
  padding:28px 26px;
}
.card .tag{font-family:var(--f-mono); font-size:12px; color:var(--saffron-deep); letter-spacing:0.05em;}
.card h3{font-size:18px; margin:10px 0 10px; line-height:1.35;}
.card p{color:var(--slate); font-size:15px; line-height:1.6;}
blockquote.pull{
  font-family:var(--f-display); font-weight:500; font-size:clamp(19px,2.3vw,25px); line-height:1.5;
  color:var(--ink); border-left:3px solid var(--saffron); padding-left:24px; margin:40px 0 0; max-width:760px;
}
.section-navy blockquote.pull{color:var(--paper); border-left-color:var(--saffron);}

/* ---------- comparison table ---------- */
.comp-table{width:100%; border-collapse:collapse; margin-top:40px; font-size:15px;}
.comp-table th,.comp-table td{padding:16px 18px; text-align:left; border-bottom:1px solid var(--line-on-cream); vertical-align:top;}
.comp-table th{font-family:var(--f-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate-soft); font-weight:500;}
.comp-table td:first-child{color:var(--slate); width:26%;}
.comp-table td.win{color:var(--good); font-weight:600;}
.comp-table td.lose{color:var(--bad);}
@media (max-width:700px){.comp-table{font-size:13.5px;} .comp-table th,.comp-table td{padding:12px 10px;}}

/* ---------- tier / pricing cards ---------- */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; align-items:stretch;}
@media (max-width:960px){.tiers{grid-template-columns:1fr; max-width:440px; margin-left:auto; margin-right:auto;}}
.tier-card{
  background:var(--paper); border:1px solid var(--line-on-cream); border-radius:var(--radius);
  padding:32px 28px; display:flex; flex-direction:column; position:relative;
}
.tier-card.featured{border-color:var(--saffron); box-shadow:0 20px 44px rgba(231,160,52,0.16);}
.tier-badge{
  position:absolute; top:-13px; left:28px; background:var(--saffron); color:var(--navy-950);
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; font-weight:600;
}
.tier-num{font-family:var(--f-mono); font-size:12.5px; color:var(--slate-soft);}
.tier-card h3{font-size:22px; margin:8px 0 10px;}
.tier-for{font-size:13.5px; color:var(--slate); margin-bottom:18px;}
.tier-price{font-family:var(--f-mono); font-size:28px; color:var(--navy-950); margin-top:auto; padding-top:18px;}
.tier-price small{display:block; font-size:12.5px; color:var(--slate-soft); font-weight:400; margin-top:4px;}
.tier-list{list-style:none; margin:18px 0; padding:0; display:flex; flex-direction:column; gap:10px; flex-grow:1;}
.tier-list li{font-size:14px; color:var(--slate); padding-left:20px; position:relative; line-height:1.5;}
.tier-list li::before{content:"→"; position:absolute; left:0; color:var(--saffron-deep);}
.tier-card .btn{margin-top:18px; justify-content:center; width:100%;}

/* ---------- essentials strip ---------- */
.essentials{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px;}
@media (max-width:860px){.essentials{grid-template-columns:1fr 1fr;}}
.essential-item .emoji{font-size:22px;}
.essential-item b{display:block; font-size:15px; margin:10px 0 4px;}
.essential-item p{font-size:13.5px; color:var(--slate); line-height:1.5;}

/* ---------- recognise-yourself list ---------- */
.recognise{display:flex; flex-direction:column; gap:0; margin-top:40px; border-top:1px solid var(--line-on-cream);}
.recognise-item{display:grid; grid-template-columns:64px 1fr; gap:20px; padding:26px 0; border-bottom:1px solid var(--line-on-cream);}
.recognise-item .num{font-family:var(--f-mono); font-size:14px; color:var(--saffron-deep); padding-top:4px;}
.recognise-item h3{font-size:17px; margin-bottom:8px;}
.recognise-item p{color:var(--slate); font-size:14.5px; line-height:1.6;}
@media (max-width:640px){.recognise-item{grid-template-columns:1fr; gap:6px;}}

/* ---------- method steps ---------- */
.method-row{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:44px; background:var(--line-on-cream); border-radius:var(--radius); overflow:hidden;}
@media (max-width:880px){.method-row{grid-template-columns:1fr;}}
.method-step{background:var(--paper); padding:28px 22px;}
.method-step .n{font-family:var(--f-mono); font-size:22px; color:var(--saffron-deep);}
.method-step h4{font-size:16px; margin:14px 0 8px;}
.method-step p{font-size:13.5px; color:var(--slate); line-height:1.55;}

/* ---------- FAQ ---------- */
.faq{max-width:760px; margin-top:40px;}
.faq-item{border-bottom:1px solid var(--line-on-cream);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:22px 0; font-family:var(--f-body); font-weight:600; font-size:16px; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.faq-q .plus{font-family:var(--f-mono); color:var(--saffron-deep); font-size:20px; flex-shrink:0; transition:transform .2s ease;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{color:var(--slate); font-size:14.5px; line-height:1.65; padding-bottom:22px; max-width:640px;}

/* ---------- velocity score widget ---------- */
.vscore{
  background:var(--navy-950); color:var(--paper); border-radius:20px;
  padding:clamp(28px,5vw,52px); margin-top:44px; position:relative; overflow:hidden;
}
.vscore-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:44px; align-items:start;}
@media (max-width:860px){.vscore-grid{grid-template-columns:1fr;}}
.vq{display:none;}
.vq.active{display:block;}
.vq .qlabel{font-family:var(--f-mono); font-size:12px; color:var(--saffron); letter-spacing:0.08em;}
.vq h4{font-size:19px; margin:12px 0 20px; line-height:1.4;}
.vq-opts{display:flex; flex-direction:column; gap:10px;}
.vq-opt{
  text-align:left; background:rgba(246,241,227,0.05); border:1px solid var(--line-on-navy); color:var(--paper);
  padding:14px 16px; border-radius:10px; cursor:pointer; font-family:var(--f-body); font-size:14.5px;
  transition:border-color .15s ease, background .15s ease;
}
.vq-opt:hover{border-color:var(--saffron);}
.vq-opt.picked{border-color:var(--saffron); background:rgba(231,160,52,0.12);}
.vprogress{display:flex; gap:6px; margin-bottom:26px;}
.vprogress i{height:3px; flex:1; background:var(--line-on-navy); border-radius:2px; display:block;}
.vprogress i.done{background:var(--saffron);}
.vresult{display:none;}
.vresult.active{display:block;}
.vresult .score{font-family:var(--f-mono); font-size:54px; color:var(--saffron); line-height:1;}
.vresult .band{font-family:var(--f-display); font-weight:700; font-size:22px; margin:10px 0 14px;}
.vresult p{color:rgba(246,241,227,0.72); font-size:14.5px; line-height:1.6; max-width:440px;}
.vdial{
  border:1px solid var(--line-on-navy); border-radius:14px; padding:24px;
  font-family:var(--f-mono); font-size:12.5px; color:rgba(246,241,227,0.55);
}
.vdial .eq{color:var(--paper); font-size:15px; line-height:1.8; margin-bottom:14px;}
.vdial .eq b{color:var(--saffron);}

/* ---------- blog ---------- */
.post-list{display:flex; flex-direction:column; margin-top:40px;}
.post-row{display:grid; grid-template-columns:120px 1fr; gap:24px; padding:26px 0; border-top:1px solid var(--line-on-cream); text-decoration:none; color:inherit;}
.post-row:last-child{border-bottom:1px solid var(--line-on-cream);}
.post-row .pdate{font-family:var(--f-mono); font-size:13px; color:var(--slate-soft); padding-top:4px;}
.post-row h3{font-size:18px; margin-bottom:8px;}
.post-row p{color:var(--slate); font-size:14.5px;}
.post-row:hover h3{color:var(--saffron-deep);}
@media (max-width:600px){.post-row{grid-template-columns:1fr; gap:6px;}}
.empty-note{margin-top:40px; padding:26px; border:1px dashed var(--line-on-cream); border-radius:var(--radius); color:var(--slate); font-size:14.5px;}

/* ---------- footer ---------- */
footer.site{background:var(--navy-950); color:rgba(246,241,227,0.65); padding:56px 0 30px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid var(--line-on-navy);}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr; gap:28px;}}
.foot-brand{font-family:var(--f-display); font-weight:700; font-size:19px; color:var(--paper);}
.foot-tag{font-size:13.5px; margin-top:10px; max-width:280px; line-height:1.6;}
.foot-col h5{font-family:var(--f-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(246,241,227,0.4); margin-bottom:14px;}
.foot-col a{display:block; font-size:14px; text-decoration:none; color:rgba(246,241,227,0.72); margin-bottom:10px;}
.foot-col a:hover{color:var(--saffron);}
.foot-bottom{display:flex; justify-content:space-between; padding-top:24px; font-size:12.5px; flex-wrap:wrap; gap:10px;}

/* ---------- whatsapp float ---------- */
.wa-float{
  position:fixed; bottom:22px; right:22px; z-index:60;
  width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,0.24); transition:transform .15s ease;
}
.wa-float:hover{transform:scale(1.06);}

/* ---------- page hero (sub-pages) ---------- */
.subhero{padding-top:64px; padding-bottom:20px;}
.subhero .eyebrow{margin-bottom:18px;}
.subhero h1{font-size:clamp(32px,4.6vw,52px); line-height:1.1; max-width:820px;}
.subhero .lede{margin-top:20px; font-size:18px;}

/* ---------- about photo + hero illustration ---------- */
.about-hero-grid{display:grid; grid-template-columns:1.35fr 0.65fr; gap:48px; align-items:center;}
@media (max-width:840px){.about-hero-grid{grid-template-columns:1fr; gap:28px;} .about-photo{max-width:280px; margin:0 auto;}}
.about-photo img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:20px; border:1px solid var(--line-on-cream); box-shadow:0 24px 50px rgba(11,19,48,0.14);}

.hero-illustration{margin-top:40px; border-radius:18px; overflow:hidden; border:1px solid var(--line-on-cream); box-shadow:0 30px 60px rgba(11,19,48,0.12);}
.hero-illustration img{width:100%; display:block;}

.divider{height:1px; background:var(--line-on-cream); border:none; margin:0;}

/* ---------- hero line spacing ---------- */
.h1-line{display:block;}
.h1-line + .h1-line{margin-top:0.22em;}

/* ---------- scrolling logo marquee ---------- */
.marquee-wrap{
  margin-top:44px; position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{display:flex; align-items:center; gap:56px; width:max-content; animation:marquee 34s linear infinite;}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }
.marquee-item{
  font-family:var(--f-mono); font-size:15px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--slate-soft); white-space:nowrap; flex-shrink:0;
}
.marquee-item img{height:34px; width:auto; display:block; flex-shrink:0; opacity:0.88; filter:grayscale(15%);}
.section-navy .marquee-item{color:rgba(246,241,227,0.42);}
.marquee-caption{font-family:var(--f-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate-soft); text-align:center; margin-bottom:6px;}

/* ---------- quiz teaser popup ---------- */
.quiz-popup{
  position:fixed; left:22px; bottom:22px; z-index:59; max-width:270px;
  background:var(--navy-950); color:var(--paper); border-radius:16px; padding:18px 18px 20px;
  box-shadow:0 20px 44px rgba(11,19,48,0.32);
  transform:translateY(18px); opacity:0; pointer-events:none; transition:transform .35s ease, opacity .35s ease;
}
.quiz-popup.show{transform:translateY(0); opacity:1; pointer-events:auto;}
.quiz-popup .qp-close{
  position:absolute; top:8px; right:10px; background:none; border:none; color:rgba(246,241,227,0.5);
  font-size:16px; cursor:pointer; line-height:1; padding:4px;
}
.quiz-popup .qp-close:hover{color:var(--paper);}
.quiz-popup a.qp-body{display:block; text-decoration:none; color:inherit;}
.quiz-popup .qp-eyebrow{font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--saffron);}
.quiz-popup h4{font-size:15.5px; margin:8px 0 6px; line-height:1.35;}
.quiz-popup p{font-size:13px; color:rgba(246,241,227,0.65); line-height:1.5;}
.quiz-popup .qp-cta{margin-top:10px; font-size:13px; font-weight:600; color:var(--saffron);}
@media (max-width:640px){ .quiz-popup{left:14px; right:14px; bottom:86px; max-width:none;} }
.section-navy .divider{background:var(--line-on-navy);}

.center{text-align:center;}
.mx-auto{margin-left:auto; margin-right:auto;}