/* =====================================================================
   Aigency landing pages — shared system (v2, REAL-animation base)
   Visual base = production aigency.ai hero: fixed gradient+texture bg +
   the newsplashexportanimation Hype animation. Tokens from repo source.
   Sections (See/Control/Sell, problem, proof, FAQ, CTA) build on top.
   ===================================================================== */

:root{
  --blue:#5BC4FF;
  --purple:#9042DB;
  --grad:linear-gradient(96deg,#5BC4FF 0%,#9042DB 100%);
  --ink:#202020;
  --muted:#767676;
  --line:rgba(140,140,140,.20);
  --btn-shadow:0 4px 12px rgba(125,57,191,.20);
  --btn-shadow-hi:0 10px 24px rgba(125,57,191,.30);
  --radius:100px;
  --maxw:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y proximity}
/* gentle snap: scrolling settles on a section's top, but `proximity` never traps
   sections taller than the viewport (e.g. the See/Control/Sell stack) */
.hero,.section,.cta-band{scroll-snap-align:start}
body{
  margin:0;
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:6px}

/* ---- fixed background (exact production recipe) ---- */
.fixed-background{
  position:fixed;inset:0;width:100vw;height:100dvh;z-index:0;pointer-events:none;
  background-color:#F9F9F9;
  background-image:
    linear-gradient(170deg,rgba(91,196,255,.08) 7.48%,rgba(144,66,219,.08) 100%),
    url("assets/blurred-pattern.avif");
  background-position:center;background-size:auto;
}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:15px;font-weight:600;line-height:1;
  border-radius:var(--radius);padding:0 26px;height:46px;
  border:none;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.btn-lg{height:54px;font-size:16px;padding:0 32px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--btn-shadow)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--btn-shadow-hi)}
.btn-ghost{background:rgba(255,255,255,.85);color:var(--ink);border:1.5px solid var(--line);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--blue)}

/* ---- nav (overlaid on hero) ---- */
.nav{position:absolute;top:0;left:0;right:0;z-index:1100}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:26px 24px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:600;font-size:22px;letter-spacing:.06em;color:var(--ink)}
.nav-links{display:flex;gap:30px;font-size:15px;font-weight:500;color:var(--muted)}
.nav-links a:hover{color:var(--ink)}
@media(max-width:820px){.nav-links{display:none}}

/* ---- hero (full-viewport animation splash) ---- */
.hero{position:relative;width:100%;height:100dvh;min-height:600px;overflow:hidden;z-index:1}
#newsplashexportanimation_hype_container,.HYPE_document{position:absolute;inset:0;width:100%!important;height:100%!important}
.hero-text{
  position:absolute;left:50%;bottom:8%;transform:translateX(-50%);
  width:100%;max-width:780px;padding:0 24px;text-align:center;
  z-index:1000;pointer-events:none;
}
.hero-text>*{pointer-events:auto}
/* The Hype scene's "A" is width-scaled and centered, with scattered query-bubbles
   around it, while the hero copy is anchored near the bottom. At full size the
   bubbles drift down over the copy.
   Narrow screens (mobile/tablet, <=1024px): hide the animation, clean centered hero. */
@media(max-width:1024px){
  #newsplashexportanimation_hype_container{display:none}
  .hero-text{bottom:auto;top:50%;transform:translate(-50%,-50%)}
}
/* Desktop + laptop (animation shown): compress the whole scene from the top so the
   "A" AND its scattered bubbles lift into the upper area and clear the copy, which
   stays pinned at the bottom. The "A" is width-scaled, so height alone can't
   separate them — the transform does; origin top-center anchors the top and pulls
   the artwork up as it shrinks. The chevron would collide with the bottom-anchored
   CTAs, so it's dropped here (kept on mobile/tablet).
   (.hero prefix: the base .scroll-indicator rule is defined later, so equal
   specificity would otherwise win.) */
@media(min-width:1025px){
  #newsplashexportanimation_hype_container{
    transform:scale(.62);
    transform-origin:top center;
  }
  /* smaller hero copy frees vertical room so the "A" can stay larger while its
     scattered bubbles still clear the text (.hero-text prefix beats the later base rule) */
  .hero-text .hero-title{font-size:46px}
  .hero-text .hero-sub{font-size:19px}
  .hero-text{bottom:5%}
  .hero .scroll-indicator{display:none}
}
/* The "A" grows with available height: taller viewports get more room before the
   animation's lowest bubble reaches the copy, so we scale up there and down on short
   laptops. Tuned by measuring the lowest VISIBLE bubble across the animation cycle
   (the bubbles fade/move, so a single frame undercounts). */
@media(min-width:1025px) and (min-height:1000px){
  #newsplashexportanimation_hype_container{transform:scale(.74)}
}
@media(min-width:1025px) and (max-height:768px){
  #newsplashexportanimation_hype_container{transform:scale(.54)}
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--purple);
  background:rgba(255,255,255,.7);border:1px solid rgba(144,66,219,.18);
  padding:7px 16px;border-radius:100px;margin:0 0 18px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--purple)}
.hero-title{margin:0 0 16px;font-weight:700;font-size:54px;line-height:1.1;letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-sub{margin:0 0 28px;font-weight:400;font-size:22px;line-height:1.4;color:var(--ink);text-wrap:pretty}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

@media(max-width:768px){
  .hero-text{bottom:auto;top:47%;transform:translate(-50%,-50%);max-width:460px}
  .hero-title{font-size:36px}
  .hero-sub{font-size:18px}
}
@media(max-width:428px){
  .hero-title{font-size:30px}
  .hero-sub{font-size:16px}
  .btn-lg{width:100%}
  .hero-cta{flex-direction:column;align-items:stretch}
}

/* ---- scroll indicator (prod) ---- */
.scroll-indicator{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:50%;z-index:1000;cursor:pointer;
  box-shadow:0 4px 14px rgba(32,32,32,.10);
  animation:bounce 2s ease-in-out infinite;
}
.scroll-indicator:hover{animation:none}
.scroll-indicator img{width:auto;height:13px;padding-top:2px}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-7px)}}

/* ---- "works with" commerce-platform bar (below hero) ---- */
.trust-strip{position:relative;z-index:1;padding:clamp(30px,4.5vh,48px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-inner{text-align:center}
.ww-label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.ww-logos{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap}
.ww-logos img{height:28px;width:auto;border-radius:5px}
@media(max-width:760px){
  .ww-logos{gap:18px 28px}
}
@media(max-width:480px){
  .ww-logos img{height:24px}
  .ww-logos{gap:14px 18px}
}

/* ---- book-demo modal ---- */
.modal-overlay{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(32,32,32,.45);backdrop-filter:blur(4px)}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:24px;width:100%;max-width:440px;padding:34px;box-shadow:0 40px 90px rgba(32,32,32,.32);position:relative}
.modal h3{font-size:23px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
.modal .modal-sub{font-size:15px;color:var(--muted);margin:0 0 22px}
.modal .close{position:absolute;top:14px;right:18px;font-size:24px;line-height:1;color:var(--muted);background:none;border:none;cursor:pointer}
.field{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:14px;padding:13px 16px;margin-bottom:12px}
.field:focus{outline:none;border-color:var(--blue)}
textarea.field{resize:vertical;min-height:76px}
.modal .btn-primary{width:100%}
.modal .form-row{display:flex;gap:10px}
.modal .form-row .field{flex:1;min-width:0}

/* ===================== shared layout ===================== */
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{position:relative;z-index:1;padding:clamp(72px,9vw,128px) 0}
.section-head{max-width:740px;margin:0 auto 56px;text-align:center}
.eyebrow-c{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);margin-bottom:16px}
.h2{font-size:clamp(30px,3.7vw,46px);font-weight:700;letter-spacing:-.022em;line-height:1.1;margin:0 0 18px;text-wrap:balance}
.lead{font-size:clamp(17px,1.5vw,19px);color:var(--muted);line-height:1.6;margin:0 auto;max-width:640px;text-wrap:pretty}

/* assistant strip (problem) */
.assistant-strip{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:36px}
.assistant-strip .label{font-size:13px;font-weight:600;color:var(--muted);width:100%;text-align:center;margin-bottom:4px}
.ai-chip{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:100px;padding:8px 17px 8px 9px;box-shadow:0 4px 14px rgba(125,57,191,.06);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ai-chip img{width:22px;height:22px;border-radius:6px}

/* feature rows (See/Control/Sell) */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,84px);align-items:center}
.feature + .feature{margin-top:clamp(60px,8vw,104px)}
.feature.reverse .feature-media{order:-1}
.step{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--purple);margin-bottom:16px;text-transform:uppercase}
.feature-copy h3{font-size:clamp(24px,2.7vw,33px);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0 0 14px}
.feature-copy p{font-size:17px;color:var(--muted);line-height:1.6;margin:0 0 18px}
.boss{font-size:15px;font-weight:600;color:var(--ink);padding-left:15px;border-left:3px solid var(--purple)}

/* product mock */
.mock{border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 24px 60px rgba(125,57,191,.14),0 3px 14px rgba(32,32,32,.05);border:1px solid rgba(140,140,140,.12)}
.mock-bar{display:flex;align-items:center;gap:7px;padding:12px 14px;background:#fbfbfd;border-bottom:1px solid rgba(140,140,140,.1)}
.mock-bar .dot{width:10px;height:10px;border-radius:50%}
.mock-url{flex:1;margin-left:8px;background:#fff;border:1px solid var(--line);border-radius:100px;font-size:12px;color:var(--muted);padding:6px 14px;text-align:center}
.mock-body{padding:20px}
.mock-cap{font-size:12px;font-weight:600;color:var(--muted);margin:0 0 12px}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.tile{background:#fafaff;border:1px solid rgba(140,140,140,.12);border-radius:12px;padding:14px}
.tile .k{font-size:12px;color:var(--muted);font-weight:500}
.tile .v{font-size:25px;font-weight:700;letter-spacing:-.02em;margin-top:5px}
.tile .v .up{font-size:12.5px;font-weight:600;color:#16a34a;margin-left:6px}
.asst-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-top:1px solid rgba(140,140,140,.1)}
.asst{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500}
.asst img{width:20px;height:20px;border-radius:5px}
.asst-n{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

.policy-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(140,140,140,.1)}
.policy-row:last-child{border-bottom:none}
.pill-state{font-size:12px;font-weight:600;padding:5px 13px;border-radius:100px}
.pill-allow{color:#16a34a;background:rgba(22,163,74,.1)}
.pill-rate{color:#9042db;background:rgba(144,66,219,.1)}
.pill-block{color:#dc2626;background:rgba(220,38,38,.1)}
.crawler-ic{width:20px;height:20px;border-radius:5px;background:rgba(140,140,140,.14);display:flex;align-items:center;justify-content:center;font-size:12px}

.rev{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.rev img{width:20px;height:20px;border-radius:5px}
.rev .label{width:84px;font-size:13px;font-weight:500}
.rev .bar{flex:1;height:9px;border-radius:100px;background:rgba(140,140,140,.12);overflow:hidden}
.rev .bar span{display:block;height:100%;border-radius:100px;background:var(--grad)}
.rev .amt{width:60px;text-align:right;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.sell-card{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:11px;margin-top:16px}
.sell-thumb{width:46px;height:46px;border-radius:9px;background:linear-gradient(135deg,rgba(91,196,255,.3),rgba(144,66,219,.3));flex:0 0 auto}
.sell-card .nm{font-size:13.5px;font-weight:600}
.sell-card .meta{font-size:12px;color:var(--muted);margin-top:2px}
.sell-card .added{margin-left:auto;font-size:12px;font-weight:700;color:#16a34a}

/* real product screenshots */
.shot{border-radius:14px;overflow:hidden;border:1px solid rgba(140,140,140,.14);box-shadow:0 24px 60px rgba(125,57,191,.14),0 3px 14px rgba(32,32,32,.05);background:#fff}
.shot-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#fbfbfd;border-bottom:1px solid rgba(140,140,140,.1)}
.shot-bar .dot{width:10px;height:10px;border-radius:50%}
.shot img{display:block;width:100%;height:auto}
.shot-wide{max-width:1000px;margin:0 auto}

/* differentiator */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:880px;margin:0 auto}
.vs-card{border-radius:18px;padding:30px;background:#fff;border:1px solid var(--line)}
.vs-card.us{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;box-shadow:0 24px 56px rgba(125,57,191,.14)}
.vs-card h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 18px;color:var(--muted);font-weight:700}
.vs-card.us h4{color:var(--purple)}
.vs-card ul{margin:0;padding:0;list-style:none}
.vs-card li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:15px;line-height:1.45}
.vs-ic{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:1px}
.them .vs-ic{background:rgba(140,140,140,.16);color:var(--muted)}
.us .vs-ic{background:var(--grad);color:#fff}

/* proof */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:920px;margin:0 auto}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 24px;text-align:center}
.stat-card .big{font-size:42px;font-weight:700;letter-spacing:-.02em;line-height:1}
.stat-card .cap{font-size:14.5px;color:var(--ink);margin-top:10px;line-height:1.45}
.stat-card .src{font-size:11.5px;color:var(--muted);margin-top:12px}
.pilot-note{text-align:center;color:var(--muted);margin:34px 0 0;font-size:14px;font-weight:500}

/* faq */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{font-size:17px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:300;color:var(--purple);line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{font-size:15.5px;color:var(--muted);line-height:1.6;margin:0 0 20px}

/* ai-search: GEO complementarity + AI citation card */
.complement{max-width:700px;margin:34px auto 0;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:16px;padding:16px 22px;font-size:15px;line-height:1.5;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.complement strong{color:var(--purple)}
.cite-card{max-width:460px;margin:36px auto 0;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:0 14px 40px rgba(125,57,191,.10)}
.cite-q{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink);margin:0 0 10px}
.cite-q img{width:22px;height:22px;border-radius:6px}
.cite-a{font-size:14px;color:#3a3a3a;line-height:1.55;margin:0}
.cite-a strong{color:var(--purple);font-weight:600}
.cite-src{margin-top:13px;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--muted);background:rgba(144,66,219,.07);border-radius:100px;padding:5px 12px}

/* closing CTA */
.cta-band{position:relative;z-index:1;padding:clamp(64px,8vw,108px) 24px}
.cta-band .inner{max-width:780px;margin:0 auto;text-align:center;background:linear-gradient(135deg,rgba(91,196,255,.12),rgba(144,66,219,.13));border:1px solid rgba(144,66,219,.16);border-radius:28px;padding:clamp(40px,6vw,64px)}
.cta-band h2{font-size:clamp(28px,3.5vw,44px);font-weight:700;letter-spacing:-.022em;margin:0 0 14px;text-wrap:balance}
.cta-band p{font-size:18px;color:var(--muted);margin:0 0 28px}

/* product showcase — Humans <-> AI agents crossfade (deck slide 5), transparent */
.cf-stage{position:relative;max-width:1180px;margin:0 auto}
.cf-stage picture,.cf-stage img{display:block;width:100%;height:auto}
.cf-humans{position:relative;opacity:1;animation:cfHumans 11s ease-in-out infinite}
.cf-ai{position:absolute;inset:0;opacity:0;animation:cfAI 11s ease-in-out infinite}
@keyframes cfHumans{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes cfAI{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
/* "The product" is a scroll-snap section, but the heading + the tall 2000x1180
   asset together exceed the viewport, so the asset's bottom clipped when the
   section snapped to the top. Make the section exactly one screen tall: heading
   pinned up top, the crossfade asset takes the remaining height and CONTAINS
   itself within it (object-fit) so it scales down to fit instead of clipping. */
#product{min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-start;padding-top:clamp(40px,6vh,72px);padding-bottom:clamp(40px,6vh,72px)}
#product>.section-head{flex:0 0 auto;margin-bottom:clamp(22px,4vh,48px)}
#product>.container:not(.section-head){flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;width:100%}
#product .cf-stage{height:100%;width:100%;max-width:1180px}
#product .cf-humans,#product .cf-ai{height:100%}
#product .cf-humans img,#product .cf-ai img{width:100%;height:100%;object-fit:contain;object-position:center}

/* footer */
.footer{position:relative;z-index:1;border-top:1px solid rgba(140,140,140,.12);padding:38px 0}
.footer .inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.footer .brand{font-size:18px;letter-spacing:.06em;color:var(--ink);font-weight:600}

/* scroll reveal (progressive enhancement) */
.reveal{transition:opacity .6s ease,transform .6s ease}
html.js .reveal{opacity:0;transform:translateY(18px)}
html.js .reveal.in{opacity:1;transform:none}

@media(max-width:820px){
  .feature{grid-template-columns:1fr;gap:30px}
  .feature.reverse .feature-media{order:0}
  .versus{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;max-width:400px}
}

/* ---- reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html.js .reveal{opacity:1!important;transform:none!important}
}