/* Homepage hero — three switchable styles (see includes/home_hero.php).
   Uses the site theme tokens so light and dark both work. */
.ft-hero{--fth-glow-a:rgba(37,99,235,.16);--fth-glow-b:rgba(124,58,237,.09);
  position:relative;overflow:hidden;
  background:
    radial-gradient(38% 60% at 22% 30%,var(--fth-glow-a),transparent 70%),
    radial-gradient(35% 55% at 92% 12%,var(--fth-glow-b),transparent 70%),
    linear-gradient(180deg,var(--bg-card) 0%,var(--bg-card) 68%,var(--bg) 100%)}
html[data-theme="dark"] .ft-hero{--fth-glow-a:rgba(59,111,246,.30);--fth-glow-b:rgba(139,92,246,.16)}
.ft-hero .hero-particles{-webkit-mask-image:radial-gradient(90% 80% at 50% 30%,#000 30%,transparent 80%);mask-image:radial-gradient(90% 80% at 50% 30%,#000 30%,transparent 80%);opacity:.7}
.ft-hero>*:not(.hero-particles){position:relative;z-index:1}
.fth-shell{width:min(100% - 40px,1200px);margin-inline:auto;padding-block:72px 64px}

html[data-theme] .ft-hero h1{margin:0;color:var(--text)!important;text-wrap:balance}
html[data-theme] .ft-hero h1 span{color:var(--primary)}
html[data-theme] .ft-hero .fth-lead{margin:0;font-size:18px!important;line-height:1.65!important;color:var(--text-2)!important;max-width:56ch}

.fth-pill{display:inline-flex;align-items:center;gap:10px;width:max-content;max-width:100%;padding:6px 12px 6px 9px;border:1px solid var(--border);border-radius:999px;background:color-mix(in srgb,var(--bg-card) 80%,transparent);font:500 12px/1.4 var(--font-mono);letter-spacing:.02em;color:var(--text-2)}
.fth-dot{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.15);flex:none}

.fth-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.fth-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;padding:12px 18px;font:600 15px var(--font);border:1px solid transparent;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
.fth-btn svg{width:16px;height:16px}
html[data-theme] .fth-btn-primary{background:var(--fill);color:#fff!important}
html[data-theme] .fth-btn-primary:hover{background:var(--fill-hover)}
html[data-theme] .fth-btn-ghost{background:var(--bg-card);color:var(--text)!important;border-color:var(--border)}
html[data-theme] .fth-btn-ghost:hover{border-color:color-mix(in srgb,var(--primary) 50%,var(--border))}
html[data-theme] .fth-btn-ghost svg{color:inherit!important}

.fth-logos{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}
.fth-cap{font:500 11.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fth-logos img{height:26px;width:auto;max-width:120px;object-fit:contain;opacity:.85}
.fth-logos img.is-tile{height:30px;border-radius:7px;opacity:1}
html[data-theme="dark"] .fth-logos img:not(.is-tile){filter:brightness(0) invert(1);opacity:.8}

/* browser frame showing real work */
.fth-browser{display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;text-decoration:none;
  box-shadow:0 2px 4px rgba(11,21,48,.04),0 24px 60px rgba(11,21,48,.14)}
html[data-theme="dark"] .fth-browser{box-shadow:0 30px 70px rgba(1,4,14,.7)}
.fth-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--border-light);background:var(--bg-alt)}
.fth-bar i{width:9px;height:9px;border-radius:50%;background:var(--border)}
.fth-bar span{margin-left:10px;font:500 11px var(--font-mono);color:var(--muted);background:var(--bg-card);border:1px solid var(--border-light);border-radius:6px;padding:3px 10px;flex:1;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fth-browser img{display:block;width:100%;height:auto;aspect-ratio:1280/760;object-fit:cover;object-position:top}

.fth-result{display:inline-flex;align-items:center;gap:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--text);box-shadow:0 1px 2px rgba(11,21,48,.05),0 8px 24px rgba(11,21,48,.08)}
.fth-result b{font-weight:600}
html[data-theme] .fth-result small{display:block;font:500 11px var(--font-mono)!important;color:var(--muted);letter-spacing:.03em}
.fth-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--fill) 12%,transparent);color:var(--primary);flex:none}
.fth-ic svg{width:16px;height:16px}

/* ── A · proof-led split ── */
.fth-split{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.fth-copy{display:grid;gap:22px;align-content:start}
html[data-theme] .ft-hero--proof h1{font-size:clamp(36px,4.2vw,54px)!important;max-width:15ch}
.fth-stack{position:relative;height:440px}
.fth-stack .fth-browser{position:absolute;width:100%}
.fth-stack .s1{right:0;top:0;opacity:.92}
.fth-stack .s2{right:6%;top:56px}
.fth-stack .s3{right:12%;top:120px}
.fth-stack .fth-result{position:absolute;z-index:4;left:-10px;bottom:16px}

/* ── B · automation-led ── */
.fth-split--b{grid-template-columns:1.1fr .9fr}
html[data-theme] .ft-hero--automation h1{font-size:clamp(36px,4.6vw,58px)!important}
.fth-chips{display:flex;flex-wrap:wrap;gap:8px}
.fth-chips span{font:500 12px var(--font-mono);padding:6px 10px;border-radius:7px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-2)}
.fth-phone-wrap{position:relative;display:flex;justify-content:center;padding-block:36px}
.fth-phone{width:300px;border-radius:34px;padding:10px;background:#0b1220;box-shadow:0 30px 70px rgba(11,21,48,.25)}
.fth-screen{--chat-bg:#efe7dd;--in:#fff;--out:#d9fdd3;--ink:#111b21;border-radius:26px;overflow:hidden;background:var(--chat-bg)}
html[data-theme="dark"] .fth-screen{--chat-bg:#0b141a;--in:#202c33;--out:#005c4b;--ink:#e9edef}
.fth-wa-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#075e54;color:#fff}
html[data-theme="dark"] .fth-wa-head{background:#202c33}
.fth-wa-head i{width:30px;height:30px;border-radius:50%;background:#25d366;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px}
.fth-wa-head b{display:block;font-size:14px;font-weight:600;color:#fff}
html[data-theme] .fth-wa-head small{font-size:11px!important;color:rgba(255,255,255,.8)}
.fth-chat{height:380px;padding:14px 12px;display:flex;flex-direction:column;gap:8px;overflow:hidden;color:var(--ink);font-size:13px;line-height:1.45}
.fth-msg{max-width:82%;padding:7px 10px 5px;border-radius:9px;box-shadow:0 1px 1px rgba(0,0,0,.08);animation:fthPop .35s ease both}
.fth-msg time{display:block;text-align:right;font-size:10px;opacity:.55;margin-top:2px}
.fth-msg.in{align-self:flex-start;background:var(--in);border-top-left-radius:2px}
.fth-msg.out{align-self:flex-end;background:var(--out);border-top-right-radius:2px}
.fth-prod{display:flex;gap:8px;align-items:center;margin:4px 0;padding:6px;border-radius:7px;background:rgba(0,0,0,.05)}
.fth-prod>span:first-child{width:34px;height:34px;border-radius:6px;background:linear-gradient(135deg,#1d4ed8,#7c3aed);flex:none}
.fth-pay{display:block;text-align:center;margin-top:6px;padding:6px;border-radius:6px;background:rgba(37,211,102,.18);color:#0a7c3c;font-weight:600}
html[data-theme="dark"] .fth-pay{color:#6ee7a4}
.fth-typing{align-self:flex-start;background:var(--in);border-radius:9px;padding:9px 12px;display:flex;gap:4px}
.fth-typing i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;animation:fthBlink 1s infinite}
.fth-typing i:nth-child(2){animation-delay:.15s}.fth-typing i:nth-child(3){animation-delay:.3s}
.fth-phone-wrap .fth-result{position:absolute;z-index:2}
.fth-phone-wrap .r1{right:0;top:0}
.fth-phone-wrap .r2{left:0;bottom:0}
@keyframes fthPop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fthBlink{50%{opacity:1}}

/* ── C · centred showcase ── */
.fth-center{display:grid;justify-items:center;text-align:center;gap:22px;padding-bottom:40px}
html[data-theme] .ft-hero--showcase h1{font-size:clamp(38px,5.2vw,68px)!important;max-width:16ch}
html[data-theme] .ft-hero--showcase .fth-lead{text-align:center}
.fth-center .fth-ctas,.fth-center .fth-logos{justify-content:center}
.fth-proof{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;font:500 12.5px var(--font-mono);color:var(--muted)}
.fth-proof b{color:var(--text);font-weight:600}
.fth-showcase{position:relative;width:100%;max-width:1040px;margin-top:22px;height:400px;overflow:hidden}
.fth-showcase .fth-browser{position:absolute}
.fth-showcase .main{left:12%;right:12%;top:0;z-index:3}
.fth-showcase .side{width:40%;top:56px;z-index:1;opacity:.85}
.fth-showcase .left{left:0}.fth-showcase .right{right:0}
.fth-showcase::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;z-index:4;background:linear-gradient(180deg,transparent,var(--bg))}

@media (max-width:980px){
  .fth-shell{padding-block:44px 40px}
  .fth-split,.fth-split--b{grid-template-columns:1fr;gap:36px}
  .fth-stack{height:330px}
  .fth-showcase{height:300px}
  .fth-showcase .main{left:4%;right:4%}
  .fth-showcase .side{display:none}
  .fth-phone-wrap .fth-result{display:none}
}
@media (max-width:560px){
  .fth-shell{width:min(100% - 32px,1200px)}
  .fth-stack{height:270px}
  .fth-ctas .fth-btn{flex:1 1 100%}
  .fth-pill{font-size:11px}
}
@media (prefers-reduced-motion:reduce){.fth-msg{animation:none}.fth-typing i{animation:none;opacity:.6}}

/* Specificity guards: site-wide link/span colour rules (theme.css, home-agency.css)
   must not recolour the hero's buttons, accent or chat text. */
html[data-theme][data-theme] .ft-hero a.fth-btn.fth-btn-primary:not(#_){color:#fff!important}
html[data-theme][data-theme] .ft-hero a.fth-btn.fth-btn-ghost:not(#_){color:var(--text)!important}
html[data-theme][data-theme] .ft-hero h1 span:not(#_){color:var(--primary)!important}
html[data-theme][data-theme] .ft-hero .fth-chat span:not(.fth-pay):not(#_){color:inherit!important}
html[data-theme][data-theme] .ft-hero .fth-pay:not(#_){color:#0a7c3c!important}
html[data-theme="dark"][data-theme="dark"] .ft-hero .fth-pay:not(#_){color:#6ee7a4!important}
html[data-theme][data-theme] .ft-hero .fth-bar span:not(#_){color:var(--muted)!important}
html[data-theme][data-theme] .ft-hero .fth-cap:not(#_){color:var(--muted)!important}

/* Reassurance line directly under the buttons */
html[data-theme] .ft-hero .fth-note{display:flex;align-items:center;gap:8px;margin:-8px 0 0;font:500 12.5px/1.5 var(--font-mono)!important;letter-spacing:.01em;color:var(--muted)!important}
.ft-hero .fth-note svg{width:15px;height:15px;color:#16a34a;flex:none}
.fth-center .fth-note{justify-content:center}
@media (max-width:560px){html[data-theme] .ft-hero .fth-note{font-size:11.5px!important;align-items:flex-start}}

/* Never let content force the column wider than the screen */
.fth-split{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.fth-split--b{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.fth-split>*,.fth-center>*{min-width:0}
@media (max-width:980px){.fth-split,.fth-split--b{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.fth-pill{width:auto;white-space:normal;line-height:1.5}.fth-btn{white-space:normal;text-align:center}}