/* ============================================================
   XP ONE — Production Design System
   Brutalist · Gold · Noir · Blanc
   Zero external dependency — system fonts only — bulletproof
   ============================================================ */

:root{
  /* Surfaces */
  --bg:#FAFAF7;
  --bg-2:#F4F3EE;
  --bg-3:#EEEDE6;
  --paper:#FFFFFF;

  /* Dark surfaces */
  --bg-dark:#080808;
  --bg-dark-2:#0F0F0F;
  --bg-dark-3:#161616;

  /* Ink (text on light) */
  --ink:#0A0A0A;
  --ink-2:#1A1A1A;
  --ink-3:#3B3B3B;
  --ink-4:#6B6B6B;
  --ink-5:#9A9A95;
  --line:rgba(10,10,10,0.10);
  --line-strong:rgba(10,10,10,0.18);
  --line-d:rgba(255,255,255,0.08);
  --line-d-strong:rgba(255,255,255,0.16);

  /* Gold lingot palette (saturated for white bg) */
  --grad-1:#B8862F;
  --grad-2:#8B6314;
  --grad-3:#5C4416;
  --grad-4:#2D1F08;
  --gold-glow:#D4A84A;
  --gold-bright:#E5BD68;
  --positive:#7A8A5E;

  /* Easings */
  --easeOut:cubic-bezier(0.2,0.7,0.2,1);
  --easeInOut:cubic-bezier(0.4,0,0.2,1);

  /* Layout */
  --maxw:1320px;
  --maxw-prose:760px;
  --pad-x:32px;
  --radius:0px; /* brutalist — no rounding */
}

/* Dark sections inherit brighter gold tokens */
.section-dark, .dark{
  --grad-1:#E5BD68;
  --grad-2:#C9A14E;
  --grad-3:#A07E1C;
}

/* ============================================================
   Reset + base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI","Inter",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.5;letter-spacing:-0.013em;
  font-variant-ligatures:common-ligatures contextual;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;color:inherit;font:inherit;padding:0}
input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}
table{border-collapse:collapse}

.mono{font-family:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code","Roboto Mono",Consolas,Menlo,monospace}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}
.narrow{max-width:var(--maxw-prose);margin:0 auto;padding:0 var(--pad-x)}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   Gradient text utilities (gold)
   ============================================================ */
.grad{
  background:linear-gradient(95deg, var(--grad-1) 0%, var(--grad-2) 50%, var(--grad-3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.grad-warm{
  background:linear-gradient(95deg, var(--grad-1) 0%, var(--grad-2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================================================
   Navbar (sticky, brutalist)
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,250,247,0.85);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.nav-brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-0.025em;font-size:17px}
.nav-brand img{width:24px;height:24px}
.nav-links{display:flex;align-items:center;gap:28px;font-size:14px;color:var(--ink-3);font-weight:500}
.nav-links a{transition:color .15s var(--easeOut)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-cta{display:flex;gap:10px;align-items:center}
@media(max-width:880px){.nav-links{display:none}}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;font-weight:700;font-size:14px;letter-spacing:-0.01em;
  border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);
  transition:transform .15s var(--easeOut), background .15s var(--easeOut), color .15s var(--easeOut);
}
.btn:hover{transform:translateY(-1px);background:var(--ink-2)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-gold{
  background:linear-gradient(95deg,var(--grad-1),var(--grad-2));
  border-color:transparent;color:#fff;
}
.btn-gold:hover{filter:brightness(1.08)}
.btn-lg{padding:14px 22px;font-size:15px}

/* ============================================================
   Hero
   ============================================================ */
.hero{padding:120px 0 100px;position:relative}
.hero-eyebrow{
  font-family:ui-monospace,"SF Mono","JetBrains Mono",Consolas,monospace;
  font-size:12px;letter-spacing:0.06em;color:var(--ink-4);
  text-transform:uppercase;margin-bottom:24px;
  display:inline-flex;align-items:center;gap:10px;
}
.hero-eyebrow::before{
  content:'';width:7px;height:7px;background:var(--grad-2);border-radius:50%;
  box-shadow:0 0 8px var(--grad-2);animation:pulseFade 1.6s infinite;
}
@keyframes pulseFade{0%,100%{opacity:.5}50%{opacity:1}}

.hero h1, .h-display{
  font-size:clamp(48px, 8.5vw, 128px);
  font-weight:900;line-height:0.95;letter-spacing:-0.053em;margin-bottom:32px;
}
.hero p, .h-sub{
  font-size:clamp(17px, 1.5vw, 21px);
  color:var(--ink-3);max-width:640px;line-height:1.5;letter-spacing:-0.013em;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.hero-meta{
  margin-top:28px;font-family:ui-monospace,"SF Mono","JetBrains Mono",Consolas,monospace;
  font-size:12px;color:var(--ink-4);letter-spacing:0.04em;
}

/* ============================================================
   Sections
   ============================================================ */
section{position:relative}
.sec{padding:120px 0;border-top:1.5px solid var(--ink)}
.sec-dark{
  padding:140px 0;background:var(--bg-dark);color:#fff;
  border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  position:relative;overflow:hidden;
}
.sec-dark p{color:rgba(255,255,255,0.7)}
.sec-eyebrow{
  font-family:ui-monospace,"SF Mono","JetBrains Mono",Consolas,monospace;
  font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:18px;
}
.sec-h{font-size:clamp(36px,5vw,72px);font-weight:900;letter-spacing:-0.045em;line-height:1;margin-bottom:24px}
.sec-sub{font-size:18px;color:var(--ink-3);max-width:640px;line-height:1.55;letter-spacing:-0.013em}
.sec-dark .sec-eyebrow{color:rgba(255,255,255,0.5)}
.sec-dark .sec-h{color:#fff}
.sec-dark .sec-sub{color:rgba(255,255,255,0.7)}

/* ============================================================
   Agents grid (6 AI Agents)
   ============================================================ */
.agents{display:grid;grid-template-columns:1fr;gap:0;border:1.5px solid var(--ink);margin-top:64px}
@media(min-width:760px){.agents{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.agents{grid-template-columns:repeat(3,1fr)}}
.agent{padding:40px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.agent-num{font-family:ui-monospace,monospace;font-size:11px;color:var(--ink-5);letter-spacing:0.08em;margin-bottom:18px}
.agent-name{font-size:24px;font-weight:900;letter-spacing:-0.03em;margin-bottom:10px}
.agent-role{font-family:ui-monospace,monospace;font-size:11.5px;color:var(--grad-2);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:18px;font-weight:600}
.agent-desc{font-size:14.5px;color:var(--ink-3);line-height:1.55}

/* ============================================================
   Stats / numbers
   ============================================================ */
.stats{display:grid;grid-template-columns:1fr;gap:0;border:1.5px solid var(--ink);margin-top:64px}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:36px 28px;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat-v{font-size:48px;font-weight:900;letter-spacing:-0.04em;line-height:1;margin-bottom:8px}
.stat-l{font-family:ui-monospace,monospace;font-size:11px;color:var(--ink-4);letter-spacing:0.06em;text-transform:uppercase}

/* ============================================================
   Testimonials
   ============================================================ */
.testis{display:grid;grid-template-columns:1fr;gap:0;border:1.5px solid var(--ink);margin-top:64px}
@media(min-width:880px){.testis{grid-template-columns:1fr 1fr}}
.testi{padding:40px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.testi-q{font-size:18px;font-weight:500;line-height:1.5;letter-spacing:-0.018em;color:var(--ink);margin-bottom:24px}
.testi-q::before{content:'"';color:var(--grad-2)}
.testi-q::after{content:'"';color:var(--grad-2)}
.testi-who{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--ink-4)}
.testi-who strong{color:var(--ink);font-weight:600}

/* ============================================================
   Pricing
   ============================================================ */
.pricing-grid{display:grid;grid-template-columns:1fr;gap:0;border:1.5px solid var(--line-d-strong)}
@media(min-width:900px){.pricing-grid{grid-template-columns:repeat(3,1fr)}}
.price-card{padding:52px 36px;border-right:1px solid var(--line-d);border-bottom:1px solid var(--line-d);display:flex;flex-direction:column;position:relative;transition:background .3s var(--easeOut)}
.price-card:last-child{border-right:none}
.price-card:hover{background:rgba(255,255,255,0.03)}
.price-card.featured{background:linear-gradient(180deg,rgba(212,168,74,0.09) 0%,rgba(212,168,74,0.02) 100%)}
.price-card.featured:hover{background:linear-gradient(180deg,rgba(212,168,74,0.13) 0%,rgba(212,168,74,0.04) 100%)}
.price-tag{position:absolute;top:24px;right:24px;font-family:ui-monospace,monospace;font-size:10px;background:linear-gradient(95deg,var(--gold-bright),var(--grad-1));color:#fff;padding:5px 9px;letter-spacing:0.06em;text-transform:uppercase;font-weight:700}
.price-id{font-family:ui-monospace,monospace;font-size:11px;color:rgba(255,255,255,0.5);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:14px}
.price-card.featured .price-id{color:var(--gold-bright)}
.price-name{font-size:32px;font-weight:900;letter-spacing:-0.035em;line-height:1;margin-bottom:18px}
.price-amt{font-size:clamp(56px,6vw,72px);font-weight:900;letter-spacing:-0.05em;line-height:1;display:flex;align-items:baseline;gap:4px}
.price-amt .cent{font-size:0.42em;color:rgba(255,255,255,0.5);font-weight:700}
.price-amt .per{font-size:0.28em;color:rgba(255,255,255,0.5);font-weight:500;margin-left:6px;letter-spacing:-0.02em}
.price-alt{margin-top:10px;font-family:ui-monospace,monospace;font-size:12px;color:rgba(255,255,255,0.5)}
.price-alt .annual{color:var(--positive)}
.price-founding{margin-top:16px;padding:10px 12px;background:rgba(212,168,74,0.10);border-left:2px solid var(--gold-glow);font-family:ui-monospace,monospace;font-size:11.5px;color:rgba(212,168,74,0.95)}
.price-founding .v{color:var(--gold-glow);font-weight:700}
.price-feats{display:flex;flex-direction:column;gap:11px;margin:36px 0;flex:1;padding-top:32px;border-top:1px solid var(--line-d)}
.price-feats li{font-size:14px;color:rgba(255,255,255,0.78);display:flex;gap:12px;align-items:flex-start;letter-spacing:-0.005em;line-height:1.5}
.price-feats li::before{content:'+';color:var(--gold-bright);font-weight:900;flex-shrink:0;font-family:ui-monospace,monospace;font-size:16px;line-height:1.2}
.price-cta{display:block;text-align:center;padding:14px 22px;font-weight:700;font-size:14px;border:1.5px solid rgba(255,255,255,0.3);color:#fff;transition:all .2s var(--easeOut)}
.price-cta:hover{background:#fff;color:var(--bg-dark);border-color:#fff}
.price-cta.primary{background:linear-gradient(95deg,var(--gold-bright),var(--grad-1));border-color:transparent;color:#fff}
.price-cta.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* ============================================================
   Manifesto block (dark)
   ============================================================ */
.manifesto-text{font-size:clamp(36px,5.5vw,80px);font-weight:900;line-height:1.04;letter-spacing:-0.04em;max-width:1100px}
.manifesto-text .dim{color:rgba(255,255,255,0.32)}

/* ============================================================
   Comparison tables
   ============================================================ */
.compare{width:100%;border:1.5px solid var(--ink);margin:48px 0;background:var(--paper);overflow-x:auto;display:block}
.compare table{width:100%;min-width:640px}
.compare th,.compare td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
.compare th{font-family:ui-monospace,monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-4);font-weight:600;background:var(--bg-2)}
.compare td.win{background:rgba(184,134,47,0.08);font-weight:600;color:var(--ink)}
.compare td.lose{color:var(--ink-4)}
.compare td .ok{color:var(--positive);font-weight:700}
.compare td .ko{color:#B85C3E;font-weight:700}

/* ============================================================
   FAQ
   ============================================================ */
.faq{margin:48px 0}
.faq details{border-bottom:1px solid var(--line);padding:24px 0;cursor:pointer}
.faq details[open]{padding-bottom:32px}
.faq summary{list-style:none;font-size:19px;font-weight:700;letter-spacing:-0.02em;display:flex;justify-content:space-between;align-items:center;gap:24px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:24px;font-weight:300;color:var(--grad-2);transition:transform .2s var(--easeOut)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq-body{margin-top:14px;color:var(--ink-3);line-height:1.65;font-size:15.5px}
.faq-body p+p{margin-top:12px}

/* ============================================================
   Blog index
   ============================================================ */
.blog-grid{display:grid;grid-template-columns:1fr;gap:0;border:1.5px solid var(--ink);margin-top:48px}
@media(min-width:760px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.blog-card{padding:32px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:14px;transition:background .2s var(--easeOut)}
.blog-card:hover{background:var(--bg-2)}
.blog-tag{font-family:ui-monospace,monospace;font-size:11px;color:var(--grad-2);text-transform:uppercase;letter-spacing:0.06em;font-weight:600}
.blog-card h3{font-size:21px;font-weight:800;letter-spacing:-0.028em;line-height:1.2}
.blog-card p{font-size:14px;color:var(--ink-3);line-height:1.55;flex:1}
.blog-meta{font-family:ui-monospace,monospace;font-size:11px;color:var(--ink-5);letter-spacing:0.04em;display:flex;justify-content:space-between}

/* Article body (long-form) */
.article{padding:80px 0 120px;background:var(--paper)}
.article-head{margin-bottom:48px;padding-bottom:32px;border-bottom:1.5px solid var(--ink)}
.article-tag{display:inline-block;font-family:ui-monospace,monospace;font-size:11px;color:var(--grad-2);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:16px;font-weight:600}
.article h1{font-size:clamp(36px,5vw,64px);font-weight:900;letter-spacing:-0.045em;line-height:1.05;margin-bottom:20px}
.article-lede{font-size:21px;color:var(--ink-3);line-height:1.55;letter-spacing:-0.013em}
.article-meta{margin-top:24px;font-family:ui-monospace,monospace;font-size:12px;color:var(--ink-4);letter-spacing:0.04em}
.article-body{font-size:17.5px;line-height:1.7;color:var(--ink-2)}
.article-body h2{font-size:32px;font-weight:900;letter-spacing:-0.035em;line-height:1.1;margin:64px 0 20px;padding-top:32px;border-top:1px solid var(--line)}
.article-body h3{font-size:22px;font-weight:800;letter-spacing:-0.025em;margin:40px 0 14px}
.article-body p+p,.article-body ul+p,.article-body ol+p{margin-top:20px}
.article-body ul,.article-body ol{margin:20px 0 20px 24px;padding-left:0}
.article-body ul li,.article-body ol li{margin-bottom:8px;list-style-position:outside}
.article-body ul li{list-style-type:'— ';padding-left:8px}
.article-body ol li{list-style:decimal}
.article-body strong{font-weight:700;color:var(--ink)}
.article-body a{color:var(--grad-2);border-bottom:1px solid var(--grad-2);font-weight:500;transition:opacity .15s}
.article-body a:hover{opacity:0.6}
.article-body blockquote{margin:32px 0;padding:20px 24px;border-left:3px solid var(--grad-2);background:var(--bg-2);font-size:18px;font-style:italic;color:var(--ink-2)}
.article-body code{font-family:ui-monospace,monospace;font-size:0.88em;background:var(--bg-3);padding:2px 6px}
.article-body pre{background:var(--bg-dark);color:#E5E5E5;padding:20px;margin:24px 0;overflow-x:auto;font-size:13.5px;line-height:1.5}
.article-body pre code{background:none;padding:0;color:inherit}
.article-body img{margin:32px 0;border:1.5px solid var(--ink)}
.article-body table{width:100%;margin:32px 0;border:1.5px solid var(--ink)}
.article-body th,.article-body td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:14.5px}
.article-body th{background:var(--bg-2);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-4)}

.article-cta{margin:64px 0 0;padding:36px;border:1.5px solid var(--ink);background:var(--bg-2);text-align:center}
.article-cta h3{font-size:24px;font-weight:900;letter-spacing:-0.03em;margin-bottom:8px}
.article-cta p{color:var(--ink-3);margin-bottom:18px}

/* Table of contents */
.toc{background:var(--bg-2);border:1.5px solid var(--ink);padding:24px 28px;margin:32px 0}
.toc-h{font-family:ui-monospace,monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-4);margin-bottom:14px}
.toc ol{margin:0;padding:0}
.toc li{padding:6px 0;border-bottom:1px dotted var(--line);font-size:14.5px;list-style:decimal-leading-zero;list-style-position:inside}
.toc li:last-child{border:none}
.toc a{color:var(--ink-2)}
.toc a:hover{color:var(--grad-2)}

/* ============================================================
   Footer
   ============================================================ */
.foot{background:var(--bg-dark);color:#fff;padding:80px 0 40px;border-top:1.5px solid var(--ink)}
.foot p{color:rgba(255,255,255,0.7)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:48px;margin-bottom:48px}
@media(min-width:760px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.foot-brand h4{font-size:24px;font-weight:900;letter-spacing:-0.03em;margin-bottom:12px}
.foot-brand h4 .grad{background:linear-gradient(95deg,var(--gold-bright),var(--grad-1));-webkit-background-clip:text;background-clip:text;color:transparent}
.foot-brand p{font-size:14px;line-height:1.55;color:rgba(255,255,255,0.65);max-width:320px}
.foot-col h5{font-family:ui-monospace,monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.5);margin-bottom:18px}
.foot-col ul li{margin-bottom:10px}
.foot-col a{font-size:14px;color:rgba(255,255,255,0.78);transition:color .15s}
.foot-col a:hover{color:var(--gold-bright)}
.foot-base{padding-top:32px;border-top:1px solid var(--line-d);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;font-family:ui-monospace,monospace;font-size:12px;color:rgba(255,255,255,0.5);letter-spacing:0.04em}

/* ============================================================
   Forms
   ============================================================ */
input[type=email],input[type=text],textarea{display:block;width:100%;padding:14px 16px;border:1.5px solid var(--ink);background:var(--paper);font-size:15px;letter-spacing:-0.01em;transition:border-color .15s var(--easeOut)}
input:focus,textarea:focus{outline:none;border-color:var(--grad-2)}

/* ============================================================
   Utility
   ============================================================ */
.eyebrow{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-4)}
.dim{color:var(--ink-4)}
.center{text-align:center}
.flex{display:flex}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}.mb-48{margin-bottom:48px}.mb-64{margin-bottom:64px}

/* ============================================================
   Reveal-on-scroll (progressive enhancement)
   ============================================================ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--easeOut), transform .8s var(--easeOut)}
.reveal.on{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}

/* Print */
@media print{
  .nav,.foot,.btn,.price-cta,.article-cta{display:none}
  body{background:#fff;color:#000}
  .article{padding:0}
  a{color:#000;text-decoration:underline}
}

/* ============================================================
   CRO + MOTION LAYER · top 1% B2B SaaS feel
   Linear / Vercel / Stripe-grade interactions
   ============================================================ */

/* Scroll progress bar (top of page, gold) */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--gold-bright),var(--grad-1),var(--grad-2));
  transition:width .15s linear;pointer-events:none;
}

/* Hero word-stagger reveal (load-time animation) */
.word-stagger .w{
  display:inline-block;opacity:0;transform:translateY(20px);
  animation:wordIn .7s var(--easeOut) forwards;
}
.word-stagger .w:nth-child(1){animation-delay:0.05s}
.word-stagger .w:nth-child(2){animation-delay:0.18s}
.word-stagger .w:nth-child(3){animation-delay:0.31s}
.word-stagger .w:nth-child(4){animation-delay:0.44s}
.word-stagger .w:nth-child(5){animation-delay:0.57s}
.word-stagger .w:nth-child(6){animation-delay:0.70s}
@keyframes wordIn{
  to{opacity:1;transform:none}
}

/* Hero sub-fade-in (delayed) */
.hero-fade{opacity:0;animation:heroFade .9s var(--easeOut) .9s forwards}
.hero-fade-2{opacity:0;animation:heroFade .9s var(--easeOut) 1.1s forwards}
.hero-fade-3{opacity:0;animation:heroFade .9s var(--easeOut) 1.3s forwards}
@keyframes heroFade{from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none}}

/* Gradient shimmer on hero gold text */
.grad-shimmer{
  background-size:200% auto;
  animation:shimmer 4.5s linear infinite;
}
@keyframes shimmer{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}

/* Magnetic cursor-follow gold orb (hero/dark sections background) */
.magnetic-orb{
  position:absolute;top:0;left:0;pointer-events:none;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,168,74,0.30) 0%,rgba(184,134,47,0.12) 30%,transparent 65%);
  transform:translate(-50%,-50%);filter:blur(20px);
  opacity:0;transition:opacity .4s var(--easeOut);
  mix-blend-mode:screen;z-index:0;
}
.magnetic-orb.on{opacity:1}
.hero,.sec-dark{position:relative}
.hero > .container,.sec-dark > .container{position:relative;z-index:1}

/* Tabular numerals for animated counters */
[data-count]{font-variant-numeric:tabular-nums}

/* Hover lifts on cards (subtle but premium) */
.agent,.blog-card,.testi{transition:transform .25s var(--easeOut), background .25s var(--easeOut), border-color .25s var(--easeOut), box-shadow .25s var(--easeOut)}
.agent:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(212,168,74,0.04),transparent);
}
.dark .agent:hover{background:linear-gradient(180deg,rgba(212,168,74,0.08),transparent)}
.blog-card:hover{transform:translateY(-2px)}
.price-card{transition:transform .25s var(--easeOut), background .3s var(--easeOut)}
.price-card:not(.featured):hover{transform:translateY(-3px)}
.price-card.featured:hover{transform:translateY(-3px) scale(1.005)}

/* Button magnetic lift */
.btn{transition:transform .15s var(--easeOut), background .15s var(--easeOut), color .15s var(--easeOut), box-shadow .2s var(--easeOut)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(10,10,10,0.15)}
.btn-gold:hover,.price-cta.primary:hover{box-shadow:0 8px 28px rgba(184,134,47,0.35)}

/* Link underline animation */
.nav-links a{position:relative}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;width:0;height:1.5px;
  background:linear-gradient(90deg,var(--grad-1),var(--grad-2));
  transition:width .25s var(--easeOut);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%}

/* Pulsing dot indicator (live / online) */
.live-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#4ADE80;box-shadow:0 0 0 0 rgba(74,222,128,0.7);
  animation:livePulse 1.8s infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,0.6)}
  70%{box-shadow:0 0 0 12px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}

/* ============================================================
   Logo bar / "Replaces these tools" marquee
   ============================================================ */
.tools-bar{
  padding:32px 0;background:var(--bg-2);
  border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  overflow:hidden;position:relative;
}
.tools-bar::before,.tools-bar::after{
  content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;
}
.tools-bar::before{left:0;background:linear-gradient(90deg,var(--bg-2),transparent)}
.tools-bar::after{right:0;background:linear-gradient(-90deg,var(--bg-2),transparent)}
.tools-bar-h{
  text-align:center;font-family:ui-monospace,monospace;font-size:11px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-4);
  margin-bottom:18px;
}
.tools-marquee{
  display:flex;gap:64px;animation:marquee 30s linear infinite;
  width:max-content;
}
.tools-marquee:hover{animation-play-state:paused}
.tools-marquee span{
  font-size:22px;font-weight:700;letter-spacing:-0.025em;color:var(--ink-3);
  position:relative;white-space:nowrap;
}
.tools-marquee span::after{
  content:'';position:absolute;left:0;right:0;top:50%;height:2px;
  background:var(--grad-2);transform:scaleX(0.95) rotate(-3deg);
  opacity:0.7;
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ============================================================
   Star ratings
   ============================================================ */
.stars{display:inline-flex;gap:2px;color:var(--gold-glow);font-size:14px;letter-spacing:0.1em}
.stars::before{content:'★★★★★'}

/* Testimonial author with initials avatar */
.testi-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--grad-1),var(--grad-2));
  color:#fff;font-weight:800;font-size:14px;letter-spacing:-0.02em;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}

/* ============================================================
   Founding 100 live counter + progress bar
   ============================================================ */
.founding{
  background:var(--bg-dark-2);border:1.5px solid rgba(212,168,74,0.25);
  padding:28px 32px;margin:24px auto;max-width:680px;
  display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;
  position:relative;overflow:hidden;
}
.founding::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center top,rgba(212,168,74,0.10),transparent 60%);
  pointer-events:none;
}
.founding-h{
  font-family:ui-monospace,monospace;font-size:11px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-glow);
  display:inline-flex;align-items:center;gap:8px;font-weight:700;
}
.founding-count{font-size:32px;font-weight:900;letter-spacing:-0.035em;color:#fff;line-height:1}
.founding-count span{color:var(--gold-bright)}
.founding-bar{
  width:100%;max-width:380px;height:6px;background:rgba(255,255,255,0.08);
  position:relative;overflow:hidden;
}
.founding-bar-fill{
  height:100%;background:linear-gradient(90deg,var(--grad-1),var(--gold-bright),var(--grad-1));
  background-size:200% 100%;animation:shimmer 3s linear infinite;
  transition:width 1.2s var(--easeOut);
}
.founding-cta{font-size:13.5px;color:rgba(255,255,255,0.7)}
.founding-cta strong{color:var(--gold-bright)}

/* ============================================================
   ROI Calculator widget
   ============================================================ */
.roi{
  border:1.5px solid var(--ink);background:var(--paper);
  display:grid;grid-template-columns:1fr;gap:0;
  margin:48px 0;overflow:hidden;
}
@media(min-width:880px){.roi{grid-template-columns:1fr 1fr}}
.roi-input{padding:48px 40px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.roi-output{
  padding:48px 40px;background:var(--bg-dark);color:#fff;
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
}
.roi-output::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 600px 300px at 50% 50%,rgba(212,168,74,0.10),transparent 70%);
  pointer-events:none;
}
.roi-output > *{position:relative;z-index:1}
.roi-eyebrow{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-4);margin-bottom:12px}
.roi-h{font-size:28px;font-weight:900;letter-spacing:-0.03em;line-height:1.1;margin-bottom:24px}
.roi-label{font-size:13.5px;color:var(--ink-3);margin-bottom:8px;font-weight:500}
.roi-control{margin-bottom:24px}
.roi-control input[type=range]{
  width:100%;accent-color:var(--grad-2);height:6px;
}
.roi-control input[type=number]{
  width:100%;padding:12px 14px;border:1.5px solid var(--ink);font-size:18px;
  font-weight:700;letter-spacing:-0.02em;
}
.roi-value{
  font-family:ui-monospace,monospace;font-size:14px;color:var(--grad-2);
  font-weight:700;margin-top:6px;
}
.roi-output .roi-eyebrow{color:rgba(255,255,255,0.5)}
.roi-savings{
  font-size:64px;font-weight:900;letter-spacing:-0.045em;line-height:1;
  background:linear-gradient(95deg,var(--gold-bright),var(--grad-1),var(--gold-bright));
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 5s linear infinite;
  margin-bottom:8px;
}
.roi-per{
  font-family:ui-monospace,monospace;font-size:12px;
  color:rgba(255,255,255,0.55);letter-spacing:0.06em;text-transform:uppercase;
  margin-bottom:20px;
}
.roi-note{font-size:13.5px;color:rgba(255,255,255,0.7);line-height:1.55}

/* ============================================================
   Pricing toggle (Monthly / Annual)
   ============================================================ */
.price-toggle{
  display:inline-flex;align-items:center;gap:0;
  border:1.5px solid rgba(255,255,255,0.25);
  font-family:ui-monospace,monospace;font-size:12px;letter-spacing:0.04em;
  text-transform:uppercase;font-weight:600;
}
.price-toggle button{
  padding:10px 18px;background:transparent;color:rgba(255,255,255,0.6);
  transition:all .2s var(--easeOut);
}
.price-toggle button.on{background:#fff;color:var(--bg-dark)}
.price-toggle .save{
  font-size:10px;background:var(--positive);color:#fff;
  padding:2px 6px;margin-left:6px;letter-spacing:0.04em;font-weight:700;
}

/* ============================================================
   Sticky CTA bar (appears after hero scroll)
   ============================================================ */
.sticky-cta{
  position:fixed;bottom:24px;left:50%;transform:translate(-50%,140%);
  z-index:80;background:var(--bg-dark);color:#fff;
  border:1.5px solid rgba(212,168,74,0.4);
  padding:14px 22px;display:flex;align-items:center;gap:18px;
  font-size:14px;font-weight:500;
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
  transition:transform .5s var(--easeOut);
  max-width:calc(100vw - 32px);
}
.sticky-cta.on{transform:translate(-50%,0)}
.sticky-cta .sc-text{display:flex;flex-direction:column;gap:2px}
.sticky-cta .sc-h{font-weight:700;letter-spacing:-0.015em}
.sticky-cta .sc-sub{font-size:11.5px;color:rgba(255,255,255,0.6);font-family:ui-monospace,monospace;letter-spacing:0.04em}
.sticky-cta .btn{padding:9px 16px;font-size:13px}
.sticky-cta .sc-x{
  background:transparent;color:rgba(255,255,255,0.5);font-size:18px;line-height:1;
  padding:4px 8px;margin-left:4px;
}
.sticky-cta .sc-x:hover{color:#fff}
@media(max-width:580px){
  .sticky-cta{flex-wrap:wrap;justify-content:center;text-align:center}
  .sticky-cta .sc-text{align-items:center}
}

/* ============================================================
   Live activity ticker (social proof)
   ============================================================ */
.live-ticker{
  position:fixed;bottom:24px;left:24px;z-index:75;
  background:var(--paper);border:1.5px solid var(--ink);
  padding:14px 18px;display:flex;align-items:center;gap:12px;
  font-size:13px;max-width:320px;
  box-shadow:0 14px 40px rgba(0,0,0,0.10);
  transform:translateX(-140%);transition:transform .5s var(--easeOut);
}
.live-ticker.on{transform:translateX(0)}
.live-ticker .lt-text{flex:1}
.live-ticker .lt-text strong{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.live-ticker .lt-text span{font-size:11.5px;color:var(--ink-4)}
@media(max-width:580px){.live-ticker{display:none}}

/* ============================================================
   Trust badges row
   ============================================================ */
.trust-row{
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:center;
  font-family:ui-monospace,monospace;font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-4);
  padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.trust-badge{display:inline-flex;align-items:center;gap:8px}
.trust-badge::before{
  content:'';width:10px;height:10px;display:inline-block;
  background:var(--positive);border-radius:50%;
}

/* Magnetic gold cursor (desktop only, decorative) */
.magnetic-cursor{
  position:fixed;width:14px;height:14px;border-radius:50%;
  background:rgba(212,168,74,0.5);pointer-events:none;
  z-index:99;mix-blend-mode:difference;
  transform:translate(-50%,-50%) scale(1);
  transition:transform .2s var(--easeOut), background .2s var(--easeOut);
  opacity:0;
}
.magnetic-cursor.on{opacity:1}
.magnetic-cursor.large{transform:translate(-50%,-50%) scale(3);background:rgba(212,168,74,0.4)}
@media(hover:none){.magnetic-cursor{display:none}}

/* Print */
@media print{
  .nav,.foot,.btn,.price-cta,.article-cta,.sticky-cta,.live-ticker,.scroll-progress,.magnetic-cursor,.magnetic-orb{display:none}
  body{background:#fff;color:#000}
  .article{padding:0}
  a{color:#000;text-decoration:underline}
}

/* Mobile responsive */
@media(max-width:640px){
  :root{--pad-x:20px}
  .sec,.sec-dark{padding:80px 0}
  .hero{padding:80px 0 60px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{justify-content:center}
  .price-card{padding:40px 24px}
  .agent{padding:32px 24px}
  .stat{padding:28px 22px}
  .stat-v{font-size:36px}
  .article-body{font-size:16.5px}
  .article-body h2{font-size:26px;margin:48px 0 16px;padding-top:24px}
  .magnetic-orb{width:320px;height:320px}
}