/* ═══════════════════════════════════════════════════════════════
   BLOGTEXTIFY — HOMEPAGE REDESIGN  (load AFTER home_side.css)
   Uses ONLY the official tokens from home_side.css:
   --teal / --teal2 / --bg* / --surface* / --border* / --text*
   Fonts: Instrument Serif (headings) · IBM Plex Sans (body) · IBM Plex Mono (labels)
═══════════════════════════════════════════════════════════════ */

/* ── DESIGN SYSTEM TOKENS (additive, no colour changes) ── */
:root,[data-theme="dark"]{
  --on-teal:#04130f;                       /* text on teal buttons */
  --teal-line:rgba(0,212,168,.28);
  --sp-section:clamp(96px,11vw,152px);     /* vertical rhythm between sections */
  --sp-head:clamp(48px,6vw,72px);          /* heading → content gap */
  --card-pad:clamp(26px,3vw,40px);
  --hp-shadow:0 40px 100px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03);
}
[data-theme="light"]{
  --on-teal:#ffffff;
  --teal-line:rgba(0,122,99,.28);
  --hp-shadow:0 40px 90px -24px rgba(15,23,42,.22),0 2px 8px rgba(15,23,42,.06);
}

/* ── LAYOUT ── */
.hp section{padding:var(--sp-section) 0}
.hp .hp-wrap{max-width:1160px;margin:0 auto;padding:0 32px;width:100%}
.hp .hp-narrow{max-width:720px;margin-left:auto;margin-right:auto;text-align:center}

/* ── TYPE ── */
.hp-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:24px}
.hp-eyebrow::before{content:'';width:22px;height:1px;background:var(--teal)}
.hp-h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.9rem,6.4vw,5.6rem);line-height:1.02;letter-spacing:-.035em;color:var(--text)}
.hp-h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,4vw,3.3rem);line-height:1.08;letter-spacing:-.028em;color:var(--text)}
.hp-h1 em,.hp-h2 em{font-style:italic;color:var(--teal)}
.hp-lead{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.75;color:var(--text2);margin-top:24px}
.hp-sec-head{margin-bottom:var(--sp-head)}
.hp-sec-head .hp-lead{max-width:600px}
.hp-narrow .hp-lead{margin-left:auto;margin-right:auto}
.hp-narrow .hp-eyebrow::after{content:'';width:22px;height:1px;background:var(--teal)}

/* ── BUTTONS (one primary, one quiet) ── */
.hp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 32px;border-radius:var(--r12);background:var(--teal);color:var(--on-teal);font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:.005em;text-decoration:none;border:1px solid transparent;transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer}
.hp-btn:hover{background:var(--teal2);transform:translateY(-2px);box-shadow:0 18px 44px -8px var(--teal-glow-lg,rgba(0,212,168,.38))}
.hp-btn svg{transition:transform .2s}.hp-btn:hover svg{transform:translateX(3px)}
.hp-link{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:500;font-size:.95rem;text-decoration:none;border-bottom:1px solid var(--border2);padding-bottom:3px;transition:color .15s,border-color .15s}
.hp-link:hover{color:var(--teal);border-color:var(--teal)}
.hp-note{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--text3);margin-top:20px}

/* ── CARD ── */
.hp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r16);padding:var(--card-pad);transition:border-color .25s,transform .25s,box-shadow .25s}
.hp-card:hover{border-color:var(--teal-line)}
.hp-card h3{font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1.15;letter-spacing:-.02em;color:var(--text);margin-bottom:14px}
.hp-card p{font-size:.98rem;line-height:1.75;color:var(--text2)}

/* ═════════ HERO ═════════ */
.hp-hero{position:relative;padding:150px 0 0!important;text-align:center;overflow:visible!important}
.hp-hero::before{content:'';position:absolute;top:-120px;left:50%;width:min(1100px,140vw);height:760px;transform:translateX(-50%);background:radial-gradient(ellipse at center,var(--tdim) 0%,transparent 65%);pointer-events:none;z-index:-1}
.hp-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 10px;border:1px solid var(--border);background:var(--surface);border-radius:100px;font-size:.82rem;color:var(--text2);margin-bottom:36px;text-decoration:none;transition:border-color .2s}
.hp-pill:hover{border-color:var(--teal-line)}
.hp-pill b{font-family:var(--mono);font-weight:500;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;background:var(--tdim);color:var(--teal);padding:4px 10px;border-radius:100px}
.hp-hero .hp-lead{max-width:640px;margin:28px auto 0}
.hp-hero-cta{margin-top:44px;display:flex;flex-direction:column;align-items:center}
.hp-hero-sub{margin-top:26px;display:flex;gap:28px;flex-wrap:wrap;justify-content:center;font-size:.85rem;color:var(--text2)}
.hp-hero-sub span::before{content:'✓';color:var(--teal);margin-right:8px;font-weight:700}

/* ═════════ DASHBOARD WINDOW ═════════ */
.hp-stage{margin-top:80px;position:relative;perspective:1800px;padding-bottom:0}
.hp-window{background:var(--bg1);border:1px solid var(--border2);border-radius:var(--r16) var(--r16) 0 0;box-shadow:var(--hp-shadow);overflow:hidden;text-align:left;transform:rotateX(4deg);transform-origin:50% 100%;border-bottom:0}
.hp-win-bar{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--surface)}
.hp-dots{display:flex;gap:7px}.hp-dots i{width:11px;height:11px;border-radius:50%;background:var(--border2)}
.hp-url{flex:1;text-align:center;font-family:var(--mono);font-size:.7rem;color:var(--text3)}
.hp-live{font-family:var(--mono);font-size:.64rem;color:var(--teal);letter-spacing:.08em;display:flex;align-items:center;gap:7px}
.hp-live::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--teal);animation:beacon 2s infinite}
.hp-dash{display:grid;grid-template-columns:200px 1fr;min-height:420px}
.hp-side{border-right:1px solid var(--border);padding:24px 16px;display:flex;flex-direction:column;gap:4px;background:var(--bg)}
.hp-side a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r8);font-size:.82rem;color:var(--text2);pointer-events:none}
.hp-side a.on{background:var(--tdim);color:var(--teal);font-weight:500}
.hp-side a span{width:14px;height:14px;border-radius:4px;background:currentColor;opacity:.35}
.hp-main{padding:28px;display:flex;flex-direction:column;gap:20px}
.hp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hp-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);padding:18px 20px}
.hp-stat small{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:8px}
.hp-stat strong{font-family:var(--serif);font-weight:400;font-size:2.1rem;line-height:1;color:var(--text);letter-spacing:-.02em}
.hp-stat em{font-style:normal;font-family:var(--mono);font-size:.68rem;color:var(--teal);margin-left:8px}
.hp-panels{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
.hp-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);padding:20px}
.hp-panel h4{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);font-weight:500;margin-bottom:14px}
.hp-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--border);font-size:.82rem;color:var(--text)}
.hp-row:first-of-type{border-top:0}
.hp-row span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:100px;background:var(--tdim);color:var(--teal);white-space:nowrap}
.hp-tag.wip{background:var(--adim);color:var(--amber)}
.hp-tag.new{background:var(--bdim);color:var(--blue)}
.hp-bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:8px}
.hp-bars i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--teal),var(--tdim));transform-origin:bottom;animation:hpGrow 1.4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*.07s + .5s)}
@keyframes hpGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.hp-stage-fade{position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none}

/* get-found strip */
.hp-found{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;padding:56px 0 0}
.hp-found>span{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-right:8px}
.hp-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border:1px solid var(--border);border-radius:100px;background:var(--surface);font-size:.85rem;color:var(--text)}
.hp-chip i{width:8px;height:8px;border-radius:50%}

/* ═════════ DEMO (how it works) ═════════ */
.hp-demo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,88px);align-items:center}
.hp-steps{display:flex;flex-direction:column;gap:12px}
.hp-step{all:unset;box-sizing:border-box;display:block;cursor:pointer;padding:26px 28px;border:1px solid transparent;border-radius:var(--r16);transition:all .3s;position:relative;overflow:hidden}
.hp-step:hover{background:var(--surface)}
.hp-step:focus-visible{outline:2px solid var(--teal)}
.hp-step.on{background:var(--surface);border-color:var(--border)}
.hp-step b{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--text3);font-weight:500;transition:color .3s}
.hp-step.on b{color:var(--teal)}
.hp-step h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;line-height:1.15;letter-spacing:-.02em;color:var(--text);margin:8px 0 0}
.hp-step p{font-size:.95rem;line-height:1.7;color:var(--text2);max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .35s ease,margin .35s}
.hp-step.on p{max-height:160px;opacity:1;margin-top:12px}
.hp-step::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--teal)}
.hp-step.on.run::after{animation:hpProg var(--dur,5s) linear forwards}
@keyframes hpProg{to{width:100%}}

.hp-screen{background:var(--bg1);border:1px solid var(--border2);border-radius:var(--r16);box-shadow:var(--hp-shadow);overflow:hidden;position:relative}
.hp-screen-body{position:relative;height:440px}
.hp-scene{position:absolute;inset:0;padding:32px;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .55s ease,transform .55s ease;pointer-events:none;display:flex;flex-direction:column;gap:14px}
.hp-scene.on{opacity:1;transform:none;pointer-events:auto}
.hp-scene-title{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text3)}
/* scene 1 — trends */
.hp-trend{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);font-size:.92rem;color:var(--text)}
.hp-trend em{font-style:normal;font-family:var(--mono);font-size:.7rem;color:var(--teal);margin-left:auto;white-space:nowrap}
.hp-trend.pick{border-color:var(--teal-line);background:linear-gradient(135deg,var(--tdim),var(--surface))}
.hp-trend .spark{width:60px;height:22px;flex-shrink:0}
.hp-scene.on .hp-trend{animation:up .6s ease both}
.hp-scene.on .hp-trend:nth-of-type(2){animation-delay:.15s}.hp-scene.on .hp-trend:nth-of-type(3){animation-delay:.3s}.hp-scene.on .hp-trend:nth-of-type(4){animation-delay:.45s}
/* scene 2 — writing */
.hp-doc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);padding:26px;flex:1;overflow:hidden;display:flex;flex-direction:column;gap:12px}
.hp-doc h5{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.2;letter-spacing:-.02em;color:var(--text)}
.hp-ln{height:9px;border-radius:5px;background:var(--border);transform-origin:left;width:0}
.hp-scene.on .hp-ln{animation:hpLine .9s ease forwards;animation-delay:calc(var(--i)*.22s + .3s)}
@keyframes hpLine{to{width:var(--w)}}
.hp-kw{display:flex;gap:8px;flex-wrap:wrap}
.hp-kw span{font-family:var(--mono);font-size:.62rem;padding:5px 11px;border-radius:100px;background:var(--tdim);color:var(--teal);letter-spacing:.04em}
.hp-score{display:flex;align-items:center;justify-content:space-between;font-size:.82rem;color:var(--text2);padding:0 4px}
.hp-score strong{font-family:var(--serif);font-weight:400;font-size:1.8rem;color:var(--teal);letter-spacing:-.02em}
/* scene 3 — published */
.hp-publish{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);overflow:hidden;display:flex;flex-direction:column}
.hp-art{height:170px;position:relative;overflow:hidden}
.hp-art svg{width:100%;height:100%;display:block}
.hp-publish-body{padding:20px 24px;display:flex;flex-direction:column;gap:10px}
.hp-publish-body h5{font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.2;color:var(--text);letter-spacing:-.02em}
.hp-publish-body small{font-family:var(--mono);font-size:.64rem;color:var(--text3);letter-spacing:.06em}
.hp-toast{position:absolute;right:32px;bottom:32px;display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--teal-line);color:var(--text);padding:12px 18px;border-radius:var(--r12);font-size:.82rem;box-shadow:var(--shadow);opacity:0;transform:translateY(12px)}
.hp-toast i{width:20px;height:20px;border-radius:50%;background:var(--teal);color:var(--on-teal);font-style:normal;font-size:.7rem;display:flex;align-items:center;justify-content:center;font-weight:700}
.hp-scene.on .hp-toast{animation:hpToast .5s ease 1.4s forwards}
@keyframes hpToast{to{opacity:1;transform:none}}
.hp-scene .shimmer{animation:hpShim 2.4s ease-in-out infinite}
@keyframes hpShim{0%,100%{opacity:.75}50%{opacity:1}}

/* ═════════ BENTO BENEFITS ═════════ */
.hp-bento{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.hp-bento .hp-card{display:flex;flex-direction:column;min-height:440px}
.hp-viz{margin-top:auto;padding-top:36px}
.hp-eyebrow-sm{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:18px;display:block}
/* serp + ai mini */
.hp-serp{display:flex;flex-direction:column;gap:10px}
.hp-serp-i{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r12);background:var(--bg1);font-size:.84rem;color:var(--text2)}
.hp-serp-i.top{border-color:var(--teal-line);color:var(--text)}
.hp-serp-i b{font-family:var(--mono);font-size:.7rem;color:var(--teal);width:28px;font-weight:500}
.hp-serp-i em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;padding:4px 10px;border-radius:100px;background:var(--tdim);color:var(--teal);white-space:nowrap}
/* AI art tiles */
.hp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hp-tile{aspect-ratio:4/5;border-radius:var(--r12);overflow:hidden;border:1px solid var(--border);position:relative}
.hp-tile svg{width:100%;height:100%;display:block;transition:transform .8s ease}
.hp-card:hover .hp-tile svg{transform:scale(1.06)}
.hp-tile span{position:absolute;left:10px;bottom:10px;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;background:var(--bg);color:var(--text);padding:4px 9px;border-radius:100px;border:1px solid var(--border)}
/* links graph */
.hp-graph{width:100%;height:150px}
.hp-graph line{stroke:var(--border2);stroke-width:1.2}
.hp-graph .e{stroke:var(--teal);stroke-dasharray:4 5;animation:hpDash 2.2s linear infinite}
@keyframes hpDash{to{stroke-dashoffset:-18}}
.hp-graph circle{fill:var(--surface2);stroke:var(--border2);stroke-width:1.2}
.hp-graph .c{fill:var(--teal);stroke:none}
/* langs */
.hp-langs{display:flex;flex-wrap:wrap;gap:9px}
.hp-langs span{font-size:.84rem;padding:8px 16px;border:1px solid var(--border);border-radius:100px;color:var(--text2);background:var(--bg1)}
.hp-langs span.on{border-color:var(--teal-line);color:var(--teal);background:var(--tdim)}
.hp-more{margin-top:var(--sp-head);text-align:center}

/* ═════════ COMPARE ═════════ */
.hp-compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;margin:0 auto}
.hp-compare .hp-card{padding:var(--card-pad)}
.hp-compare h3{font-size:1.5rem}
.hp-compare ul{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:28px}
.hp-compare li{display:flex;gap:14px;align-items:center;font-size:.98rem;color:var(--text)}
.hp-compare li::before{content:'✕';width:22px;height:22px;border-radius:50%;background:var(--rdim);color:var(--red);font-size:.68rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hp-compare .us{border-color:var(--teal-line);background:linear-gradient(145deg,var(--tdim),var(--surface) 55%)}
.hp-compare .us li::before{content:'✓';background:var(--tdim);color:var(--teal);font-weight:700}
.hp-compare .them li{color:var(--text2)}

/* ═════════ GOOGLE DATA (compliance) ═════════ */
.hp-gsc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:start}
.hp-gsc .hp-card{padding:var(--card-pad)}
.hp-gsc h4{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);font-weight:500;margin:0 0 14px}
.hp-gsc ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.hp-gsc li{font-size:.92rem;line-height:1.65;color:var(--text2);padding-left:22px;position:relative}
.hp-gsc li::before{content:'→';position:absolute;left:0;color:var(--teal)}
.hp-gsc li strong{color:var(--text);font-weight:600}
.hp-gsc a{color:var(--teal)}
.hp-fine{font-size:.82rem;line-height:1.7;color:var(--text3);border-top:1px solid var(--border);padding-top:20px}

/* ═════════ PROOF ═════════ */
.hp-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hp-quote{display:flex;flex-direction:column;gap:28px}
.hp-quote blockquote{font-family:var(--serif);font-size:1.3rem;line-height:1.45;color:var(--text);letter-spacing:-.01em}
.hp-quote figcaption{margin-top:auto;font-size:.85rem;color:var(--text2);line-height:1.5}
.hp-quote figcaption strong{display:block;color:var(--text);font-weight:600}
.hp-stars{color:var(--amber);letter-spacing:.14em;font-size:.8rem}

/* ═════════ FAQ ═════════ */
.hp-faq{max-width:780px;margin:0 auto}
.hp-faq .faq-list{list-style:none}
.hp-faq .faq-q{font-size:1.08rem;padding:28px 0}
.hp-faq .faq-a{font-size:.98rem;line-height:1.8;color:var(--text2);max-width:680px}
.hp-faq .faq-item.open .faq-a{max-height:520px;padding-bottom:28px}
.hp-faq .faq-toggle{font-size:1.4rem}

/* ═════════ FINAL CTA ═════════ */
.hp-final{text-align:center}
.hp-final-box{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:28px;background:var(--surface);padding:clamp(64px,9vw,120px) 32px}
.hp-final-box::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 50% 120%,var(--tdim),transparent 70%);pointer-events:none}
.hp-final-box>*{position:relative}
.hp-final .hp-cta-row{margin-top:44px;display:flex;flex-direction:column;align-items:center}

/* ── motion preference ── */
@media (prefers-reduced-motion:reduce){
  .hp-bars i,.hp-ln,.hp-scene.on .hp-trend,.hp-toast,.hp-graph .e{animation:none!important}
  .hp-ln{width:var(--w)}.hp-toast{opacity:1;transform:none}
}

/* ── responsive ── */
@media(max-width:980px){
  .hp-dash{grid-template-columns:1fr}.hp-side{display:none}
  .hp-demo,.hp-gsc{grid-template-columns:1fr}
  .hp-quotes{grid-template-columns:1fr}
  .hp-window{transform:none}
}
@media(max-width:720px){
  .hp .hp-wrap{padding:0 22px}
  .hp-hero{padding-top:118px!important}
  .hp-stats{grid-template-columns:1fr}.hp-panels{grid-template-columns:1fr}.hp-panels .hp-panel:last-child{display:none}
  .hp-main{padding:18px}
  .hp-bento,.hp-compare{grid-template-columns:1fr}
  .hp-bento .hp-card{min-height:0}
  .hp-screen-body{height:480px}.hp-scene{padding:20px}
  .hp-btn{width:100%}
}

/* ═══════════ HERO — split layout, theme-aware image (copy left · image right) ═══════════ */
.hp .hp-hero{padding:128px 0 0!important;text-align:left;overflow:visible!important}
.hp .hp-hero::before{display:none}
.hp .hp-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:clamp(32px,4.5vw,72px);align-items:center}
.hp .hp-hero .hp-h1{font-size:clamp(2.5rem,4.15vw,4.5rem)}
.hp .hp-hero .hp-lead{margin:26px 0 0;max-width:540px}
.hp .hp-hero .hp-pill{margin-bottom:32px}
.hp .hp-hero-cta{align-items:flex-start;margin-top:40px}
.hp .hp-cta-row{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.hp .hp-hero-sub{justify-content:flex-start;gap:12px 26px;margin-top:28px}
.hp .hp-stage{margin-top:104px}

.hp .hp-hero-visual{position:relative;isolation:isolate}
.hp .hp-hero-visual::before{content:'';position:absolute;inset:-6% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 52%,var(--tdim),transparent 70%)}
.hp .hp-hero-visual picture,.hp .hp-hero-visual img{display:block;width:100%;height:auto;border:0;border-radius:0;box-shadow:none}

/* DARK (default): transparent cut-out floats on the page; soft depth shadow */
.hp .hp-hero-visual picture.hv-light{display:none}
.hp .hv-dark img{filter:drop-shadow(0 28px 44px rgba(0,0,0,.55)) drop-shadow(0 0 60px rgba(0,212,168,.07))}

/* LIGHT: original artwork, edges feathered into the page so there is no visible box */
[data-theme="light"] .hp .hp-hero-visual picture.hv-dark{display:none}
[data-theme="light"] .hp .hp-hero-visual picture.hv-light{display:block}
[data-theme="light"] .hp .hv-light img{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 3%,#000 94%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 3%,#000 94%,transparent 100%);
  filter:drop-shadow(0 24px 40px rgba(15,23,42,.10))}
[data-theme="light"] .hp .hp-hero-visual::before{background:radial-gradient(ellipse 60% 55% at 50% 52%,var(--tdim),transparent 72%)}

@media(max-width:980px){
  .hp .hp-hero{padding-top:112px!important}
  .hp .hp-hero-grid{grid-template-columns:1fr;gap:44px}
  .hp .hp-hero-visual{max-width:620px;margin:0 auto}
  .hp .hp-stage{margin-top:72px}
}
@media(max-width:720px){
  .hp .hp-hero .hp-h1{font-size:clamp(2.3rem,10vw,3rem)}
  .hp .hp-cta-row{width:100%}
}


/* ═══════════ Round 3 — spacing, AI image tiles, internal-link visual, FAQ layout ═══════════ */
.hp .hp-found--spaced{padding:88px 0 var(--sp-section);margin:0}

/* AI imagery tiles (real images) */
.hp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hp-tile{position:relative;margin:0;aspect-ratio:1/1.08;border-radius:var(--r12);overflow:hidden;border:1px solid var(--border);background:var(--surface2)}
.hp-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.hp-card:hover .hp-tile img{transform:scale(1.06)}
.hp-tile figcaption{position:absolute;left:10px;bottom:10px;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;background:var(--bg);color:var(--text);padding:5px 10px;border-radius:100px;border:1px solid var(--border)}

/* Internal linking visual */
.hp-linkviz{display:flex;flex-direction:column;gap:0}
.hp-lv-text{font-size:.9rem;line-height:1.75;color:var(--text2);background:var(--bg1);border:1px solid var(--border);border-radius:var(--r12);padding:18px 20px}
.hp-lv-text a{color:var(--teal);font-weight:500;border-bottom:1.5px solid var(--teal);padding-bottom:1px;text-decoration:none}
.hp-lv-arrows{display:grid;grid-template-columns:repeat(3,1fr);height:34px}
.hp-lv-arrows span{position:relative}
.hp-lv-arrows span::before{content:'';position:absolute;left:50%;top:0;bottom:6px;width:0;border-left:1.5px dashed var(--teal);animation:hpLvDash 1.6s linear infinite}
.hp-lv-arrows span::after{content:'';position:absolute;left:50%;bottom:0;width:7px;height:7px;margin-left:-4px;border-right:1.5px solid var(--teal);border-bottom:1.5px solid var(--teal);transform:rotate(45deg)}
@keyframes hpLvDash{to{border-left-color:var(--teal-line)}}
.hp-lv-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hp-lv-posts div{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--teal-line);background:var(--tdim);border-radius:var(--r12);font-size:.8rem;line-height:1.35;color:var(--text);min-width:0}
.hp-lv-posts b{color:var(--teal);font-weight:600;font-size:.9rem}
.hp-lv-posts em{font-style:normal;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-top:auto}

/* FAQ — original content with the side card */
.hp-faqcols{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,4vw,56px);align-items:start}
.hp-faqaside{position:sticky;top:110px;display:flex;flex-direction:column;align-items:flex-start;gap:90px}
.hp-faqaside-q{font-family:var(--serif);font-size:1.5rem;line-height:1.3;letter-spacing:-.015em;color:var(--text)}
.hp-faqcols .hp-faq{max-width:none;margin:0}
@media(max-width:980px){
  .hp-faqcols{grid-template-columns:1fr}
  .hp-faqaside{position:static}
}
@media(max-width:560px){
  .hp-lv-posts{grid-template-columns:1fr}.hp-lv-arrows{display:none}
  .hp-tiles{gap:10px}
}

/* image a little larger: bleeds toward the viewport edge on wide screens (never causes overflow) */
.hp .hp-hero-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.24fr)}
@media(min-width:981px){.hp .hp-hero-visual{margin-right:calc(-1 * clamp(0px,(100vw - 1224px) / 2,130px))}}
[data-theme="light"] .hp .hv-light img{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 100%),linear-gradient(180deg,transparent 0,#000 3%,#000 94%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 100%),linear-gradient(180deg,transparent 0,#000 3%,#000 94%,transparent 100%);
  mask-composite:intersect}


/* Demo scenes — richer article preview with real image + text */
.hp-doc{gap:12px;padding:22px}
.hp-doc h5{font-size:1.35rem}
.hp-doc-img{position:relative;height:110px;flex-shrink:0;border-radius:var(--r8);overflow:hidden;border:1px solid var(--border)}
.hp-doc-img img,.hp-art img{display:block;width:100%;height:100%;object-fit:cover}
.hp-doc-p{font-size:.84rem;line-height:1.65;color:var(--text2);opacity:0;transform:translateY(8px)}
.hp-doc-p a{color:var(--teal);border-bottom:1px solid var(--teal);text-decoration:none}
.hp-scene.on .hp-doc-p{animation:hpUp .7s ease forwards;animation-delay:calc(var(--i)*.6s + .5s)}
.hp-scene.on .hp-doc-img{animation:hpUp .7s ease both;animation-delay:.25s}
@keyframes hpUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hp-art{height:150px}
.hp-publish-body{gap:8px}
.hp-trend span{flex:1;min-width:0}
@media(prefers-reduced-motion:reduce){.hp-doc-p,.hp-doc-img{opacity:1!important;transform:none!important;animation:none!important}}

/* demo scene 2: make the whole article preview fit */
.hp-doc{gap:10px;padding:18px 20px}
.hp-doc h5{font-size:1.2rem}
.hp-doc-img{height:84px}
.hp-doc-img img{object-position:78% 42%}
.hp-doc-p{font-size:.8rem;line-height:1.6}
.hp-art img{object-position:60% 16%}

/* AI imagery: one large hero tile + two stacked */
.hp-tiles{grid-template-columns:1.35fr 1fr;grid-template-rows:repeat(2,112px);gap:12px}
.hp-tiles .hp-tile{aspect-ratio:auto}
.hp-tiles .hp-tile:first-child{grid-row:span 2}
.hp-tiles .hp-tile:first-child img{object-position:50% 50%}
.hp-serp-i span{flex:1;min-width:0}
.hp-card .hp-faqaside-q{font-family:var(--serif);font-size:1.5rem;line-height:1.3;letter-spacing:-.015em;color:var(--text)}
.hp-card .hp-note{font-size:.68rem;line-height:1.8;color:var(--text3)}

/* dashboard: full rounded window (no fade over the chart) + consistent "Get found on" chips */
.hp .hp-found>.hp-chip{font-family:var(--sans);font-size:.85rem;letter-spacing:0;text-transform:none;color:var(--text);margin:0}
.hp .hp-found>span:not(.hp-chip){font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-right:8px}

/* Hero image: complete, uncropped artwork — larger column, bleeds toward the viewport edge, aligned with the nav on the left */
.hp .hp-hero-grid{grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:48px}
.hp .hp-hero .hp-h1{font-size:clamp(2.4rem,3.7vw,3.9rem)}
@media(min-width:981px){.hp .hp-hero-visual{margin-right:calc(-1 * clamp(0px,(100vw - 1096px) / 2 - 24px,240px))}}
@media(max-width:980px){.hp .hp-hero-grid{grid-template-columns:1fr}.hp .hp-hero-visual{margin-right:0;max-width:760px}}
.hp .hp-hero-visual picture,.hp .hp-hero-visual img{width:100%;height:auto;object-fit:contain}

/* Hero v3: complete banner image on top, intro text below it */
.hp .hp-hero{padding:104px 0 0!important}
.hp .hp-hero-grid{display:block}
.hp .hp-hero-visual{margin:0 auto;max-width:1280px;width:100%}
.hp .hp-hero-visual::before{inset:-4% 4% 0}
.hp .hv-dark img{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 95%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 95%,transparent 100%)}
.hp .hp-hero-copy{max-width:860px;margin:56px auto 0;text-align:center}
.hp .hp-hero .hp-pill{margin-bottom:28px}
.hp .hp-hero .hp-h1{font-size:clamp(2.5rem,5vw,4.5rem)}
.hp .hp-hero .hp-lead{margin:26px auto 0;max-width:640px}
.hp .hp-hero-cta{align-items:center;margin-top:36px}
.hp .hp-cta-row{justify-content:center}
.hp .hp-hero-sub{justify-content:center}
.hp .hp-stage{margin-top:96px}
@media(min-width:981px){.hp .hp-hero-visual{margin-right:auto}}
@media(max-width:720px){.hp .hp-hero{padding-top:92px!important}.hp .hp-hero-copy{margin-top:40px}.hp .hp-hero .hp-h1{font-size:clamp(2.2rem,9.5vw,3rem)}}

/* wider banner: extends past the text column (never beyond the viewport) */
@media(min-width:981px){
  .hp .hp-hero-visual{width:auto;max-width:none;margin-left:calc(-1 * clamp(0px,(100vw - 1096px) / 2 - 24px,112px));margin-right:calc(-1 * clamp(0px,(100vw - 1096px) / 2 - 24px,112px))}
}
@media(max-width:980px){.hp .hp-hero-visual{margin-left:auto;margin-right:auto;max-width:none}}

/* mobile: dashboard preview must fit its window (no clipped cards) */
.hp-dash{grid-template-columns:minmax(0,1fr) !important}
@media(min-width:981px){.hp-dash{grid-template-columns:200px minmax(0,1fr) !important}}
.hp-dash>*,.hp-main,.hp-stats>*,.hp-panels>*,.hp-panel{min-width:0}
@media(max-width:720px){
  .hp-url{display:none}
  .hp-win-bar{justify-content:space-between}
  .hp-live{margin-left:auto}
  .hp-stat strong{font-size:1.8rem}
}



/* ═══════════ Round 4 ═══════════ */
/* hero: single transparent banner for both themes */
.hp .hp-hero-visual .hv-banner{display:block;width:100%;height:auto;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 26px 40px rgba(0,0,0,.45))}
[data-theme="light"] .hp .hp-hero-visual .hv-banner{filter:drop-shadow(0 22px 36px rgba(15,23,42,.14))}

/* bento: equal columns that can never be stretched by an image */
.hp-bento{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.hp-bento .hp-card{min-width:0;min-height:0}
.hp-global-reach-img{width:100%}
.hp-global-reach-img img{display:block;width:100%;max-width:100%;height:auto}

/* analytics: image below the right-hand card */
.hp-gsc>*{min-width:0}
.hp-gsc-right{display:flex;flex-direction:column;gap:28px;min-width:0}
.hp-gsc-figure{margin:0}
.hp-gsc-figure img{display:block;width:100%;height:auto;border-radius:var(--r16)}

/* demo scenes — rich, no empty gaps */
.hp-screen-body{height:460px}
.hp-scene{padding:24px 26px;gap:14px;overflow:hidden}
.hp-scene-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hp-scan{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);white-space:nowrap}
.hp-scan i{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:beacon 2s infinite}
/* scene 1 */
.hp-tlist{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
.hp-trow{flex:1;min-height:0;display:flex;align-items:center;gap:14px;padding:8px 16px 8px 8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r12)}
.hp-trow.pick{border-color:var(--teal-line);background:linear-gradient(135deg,var(--tdim),var(--surface))}
.hp-tthumb{width:58px;height:58px;border-radius:var(--r8);object-fit:cover;flex-shrink:0;display:block}
.hp-ticon{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--green),color-mix(in srgb,var(--green) 50%,#000))}
.hp-tinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.hp-tinfo b{font-weight:600;font-size:.92rem;line-height:1.3;color:var(--text)}
.hp-tinfo small{font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;color:var(--text3)}
.hp-tgrow{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.hp-tgrow svg{width:58px;height:20px}
.hp-tgrow em{font-style:normal;font-family:var(--mono);font-size:.72rem;color:var(--teal)}
.hp-picktag{font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;background:var(--teal);color:var(--on-teal);padding:3px 9px;border-radius:100px}
.hp-scene.on .hp-trow{animation:hpUp .6s ease both}
.hp-scene.on .hp-trow:nth-child(2){animation-delay:.12s}.hp-scene.on .hp-trow:nth-child(3){animation-delay:.24s}.hp-scene.on .hp-trow:nth-child(4){animation-delay:.36s}
.hp-scene-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.8rem;color:var(--text2);padding:0 4px}
.hp-scene-foot b{font-family:var(--mono);font-weight:500;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
/* scene 2 */
.hp-doc2{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);padding:16px}
.hp-doc2-top{display:grid;grid-template-columns:172px minmax(0,1fr);gap:16px;align-items:stretch}
.hp-doc2-img{border-radius:var(--r8);overflow:hidden;border:1px solid var(--border);min-height:108px}
.hp-doc2-img img{display:block;width:100%;height:100%;object-fit:cover}
.hp-doc2-meta{display:flex;flex-direction:column;justify-content:center;gap:9px;min-width:0}
.hp-doc2-meta h5{font-family:var(--serif);font-weight:400;font-size:1.22rem;line-height:1.2;letter-spacing:-.02em;color:var(--text)}
.hp-readtime{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;color:var(--text3)}
.hp-doc2 .hp-doc-p{margin:0}
.hp-serp-prev{margin-top:auto;display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:var(--bg1);border:1px solid var(--border);border-radius:var(--r8)}
.hp-serp-prev small{font-size:.66rem;color:var(--text3)}
.hp-serp-prev b{font-weight:500;font-size:.86rem;color:var(--blue)}
.hp-serp-prev span{font-size:.74rem;line-height:1.45;color:var(--text2)}
/* scene 3 */
.hp-pub{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);padding:14px}
.hp-gal{display:grid;grid-template-columns:1.7fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:128px}
.hp-gal img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--r8);border:1px solid var(--border)}
.hp-gal img:first-child{grid-row:span 2}
.hp-pub-body{display:flex;flex-direction:column;gap:6px}
.hp-pub-body small{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;color:var(--text3)}
.hp-pub-body h5{font-family:var(--serif);font-weight:400;font-size:1.25rem;line-height:1.2;letter-spacing:-.02em;color:var(--text)}
.hp-pub-body p{font-size:.8rem;line-height:1.55;color:var(--text2)}
.hp-pub-stats{margin-top:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hp-pub-stats div{display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:var(--bg1);border:1px solid var(--border);border-radius:var(--r8)}
.hp-pub-stats b{font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.1;color:var(--text)}
.hp-pub-stats span{font-family:var(--mono);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.hp-scene[data-scene="2"] .hp-toast{top:64px;right:40px;bottom:auto}
@media(max-width:720px){
  .hp-screen-body{height:560px}
  .hp-scene{padding:18px 16px}
  .hp-tgrow svg{display:none}
  .hp-tthumb{width:48px;height:48px}
  .hp-doc2-top{grid-template-columns:1fr}.hp-doc2-img{height:96px;min-height:0}
  .hp-serp-prev{display:none}
  .hp-pub-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-gal{height:104px}
}

/* demo fixes: scene 2 fits its card, scene 3 gallery cannot grow past its box */
.hp-serp-prev>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-serp-prev{padding:9px 12px}
.hp-doc2{gap:10px;padding:14px}
.hp-doc2-img{min-height:92px}
.hp-doc2-meta h5{font-size:1.16rem}
.hp-gal{grid-template-rows:minmax(0,1fr) minmax(0,1fr);grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);overflow:hidden;border-radius:var(--r8)}
.hp-gal img{min-width:0;min-height:0}

.hp-gal{height:150px}
.hp-pub-body .hp-kw{margin-top:4px}
@media(max-width:720px){.hp-gal{height:110px}}

/* card 1 visual: fuller search-results mock (fills the card, no empty gap) */
.hp-serp{gap:10px}
.hp-serp-search{display:flex;align-items:center;gap:10px;padding:11px 16px;border:1px solid var(--border2);border-radius:100px;background:var(--bg1);font-size:.84rem;color:var(--text2)}
.hp-serp-search svg{color:var(--text3);flex-shrink:0}
.hp-serp-i{align-items:center}
.hp-serp-i>span{color:inherit}
.hp-serp-i>span small{font-family:var(--mono);font-size:.6rem;letter-spacing:.04em;color:var(--text3)}
.hp-serp-i.dim{opacity:.55}
/* keep the year inline inside the result title */
.hp-serp-i span span,.hp-serp-i span .dynamic-year{display:inline;flex:none}
.hp-serp-i>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
@media(max-width:720px){.hp-bento{grid-template-columns:minmax(0,1fr)}}
@media(min-width:981px){.hp-gsc>div:first-child{position:sticky;top:120px;align-self:start}}

/* analytics: organic-growth image sits under the left text */
@media(min-width:981px){.hp-gsc>div:first-child{position:static}}
.hp-gsc-figure{margin:36px 0 0}
.hp-gsc-figure img{display:block;width:100%;height:auto;border-radius:var(--r16)}

/* ── HOW IT WORKS: pipeline image (fits container, never overflows) ── */
.hp .hp-pipeline{width:100%;max-width:100%;margin:clamp(32px,5vw,56px) auto 0;overflow:hidden;text-align:center}
.hp .hp-pipeline img{display:block;width:100%;max-width:100%;height:auto;margin:0 auto;border:0;border-radius:0;box-shadow:none}