/* GeoAI landing page, on top of ../reference/assets/reference.css
 * (colour tokens, type families, light/dark). Only the page layout lives here. */

.home{background:var(--paper)}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.block{padding-block:clamp(56px,8vw,96px)}
.home h1,.home h2,.home h3{font-family:var(--f-display);color:var(--ink);text-wrap:balance}
.home h2{border:0;padding:0;margin:0}
.big{font-size:clamp(28px,3.6vw,42px);font-weight:800;font-stretch:86%;line-height:1.08;letter-spacing:-.01em;margin:0 0 18px!important;max-width:24ch}
.lead{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:56ch}
.more{margin-top:26px;font-weight:600}
.more a{text-decoration:none}
.more a:hover{text-decoration:underline}
.illus{font-size:12.5px;color:var(--ink-3);margin:8px 2px 0}

/* ── Buttons ─────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-body);font-weight:600;font-size:16px;text-decoration:none;
  padding:12px 20px;border-radius:10px;background:var(--canal);color:var(--paper);border:1px solid var(--canal);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow);text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--ink-3)}
.btn.small{padding:8px 14px;font-size:14.5px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.ctas.center{justify-content:center}

/* ── Header ──────────────────────────────────── */
.hbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:20px;padding:12px clamp(16px,4vw,32px);
  background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.hnav{display:flex;gap:4px;margin-left:auto}
.signin{color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:600;padding:7px 4px}
.signin:hover{color:var(--ink)}
.hnav a{color:var(--ink-2);text-decoration:none;font-size:15px;padding:7px 11px;border-radius:8px}
.hnav a:hover{background:var(--sunk);color:var(--ink)}
@media (max-width:760px){.hnav{display:none}.signin{margin-left:auto}}

/* ── Hero ────────────────────────────────────── */
.hero-band{position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 0% 0%,#14466F 0%,#0C2B47 45%,#07131F 100%);color:#E6EEF5}
.graph-sky{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
.hero-band .eyebrow{color:#9FD3A3}
.hero-band .btn:not(.ghost){background:#F1F6FA;color:#0C2B47;border-color:#F1F6FA}
.hero-band .btn.ghost{color:#F1F6FA;border-color:rgba(255,255,255,.35)}
.hero-band .btn.ghost:hover{border-color:#F1F6FA}
.hero-band .note::before{background:#9FD3A3}
.hero-band .illus{color:#8FA6BA}
.hero-band .copy h1{color:#F1F6FA}
.hero-band .copy .sub{color:#C3D3E0}
.hero-band .copy .note{color:#8FA6BA}
.hero-band .win{box-shadow:0 24px 70px -18px rgba(0,0,0,.6)}
.hero2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(48px,8vw,104px) clamp(48px,7vw,88px)}
@media (max-width:900px){.hero2{grid-template-columns:minmax(0,1fr)}}
.hero2 h1{font-size:clamp(40px,5vw,64px);font-weight:800;font-stretch:84%;line-height:.98;letter-spacing:-.02em;margin:6px 0 22px}
.hero2 .sub{font-size:clamp(17px,1.7vw,20px);line-height:1.55;color:var(--ink-2);max-width:34em;margin:0}
.hero2 .note{margin-top:22px;font-size:14px;color:var(--ink-3);display:flex;gap:8px;align-items:center}
.hero2 .note::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dyke);flex:none}

/* The product window illustration */
.win{color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:16px;box-shadow:0 1px 2px rgba(27,37,33,.06),0 24px 60px -20px rgba(27,37,33,.25);overflow:hidden}
.winbar{display:flex;gap:6px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--rule-2);background:var(--sunk)}
.winbar i{width:10px;height:10px;border-radius:50%;background:var(--rule)}
.winbar span{margin-left:8px;font-family:var(--f-display);font-weight:700;font-size:13px;color:var(--ink-3);letter-spacing:.04em}
.q{margin:14px 14px 8px;padding:11px 14px;border:1px solid var(--rule);border-radius:10px;font-size:15.5px;color:var(--ink);background:var(--paper)}
.typed{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:100%;border-right:2px solid var(--canal);
  animation:type 1.6s steps(40,end) .3s both,caret .8s step-end 2s 3 both}
@keyframes type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes caret{50%{border-color:transparent}}
.ticks{list-style:none;margin:0;padding:2px 16px 10px;display:grid;gap:3px;font-family:var(--f-mono);font-size:12.5px;color:var(--ink-2)}
.ticks li{opacity:0;animation:pop .35s ease-out both;animation-delay:calc(1.9s + var(--d) * .45s)}
.ticks li::before{content:"✓ ";color:var(--dyke)}
.ticks b{display:inline-block;min-width:4.6em;font-weight:500;color:var(--ink)}
.map{display:block;width:100%;height:auto;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.map .rings circle{opacity:0;animation:pop .5s ease-out 3.9s both}
.map .hits circle{opacity:0;transform-box:fill-box;transform-origin:center;animation:dot .4s ease-out both;animation-delay:calc(4.2s + var(--i) * .03s)}
.ans{padding:12px 16px 14px;display:grid;gap:2px;opacity:0;animation:pop .5s ease-out 5.2s both}
.ans b{font-family:var(--f-display);font-size:17px}
.ans span{font-size:13.5px;color:var(--ink-3)}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes dot{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion: reduce){
  .typed{animation:none;border-right:0}
  .ticks li,.map .rings circle,.map .hits circle,.ans{animation:none;opacity:1}
}

/* ── Facts strip ─────────────────────────────── */
.home .facts{margin:-36px 0 0;position:relative;box-shadow:var(--shadow)}

/* ── Cards ───────────────────────────────────── */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
@media (max-width:860px){.trio{grid-template-columns:1fr}}
.card3{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:22px 22px 20px}
.card3 svg{width:30px;height:30px;color:var(--canal);margin-bottom:12px}
.card3 h3{font-size:19px;margin:0 0 6px}
.card3 p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.55}

.band{background:var(--surface);border-block:1px solid var(--rule)}

.flow{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:none}
@media (max-width:960px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.flow{grid-template-columns:1fr}}
.flow li{position:relative;padding:20px 20px 18px;border:1px solid var(--rule);border-radius:14px;background:var(--paper)}
.flow span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--canal);color:var(--paper);font-family:var(--f-display);font-weight:800;margin-bottom:14px}
.flow h3{font-size:19px;margin:0 0 6px}
.flow p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.55}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}

.outcomes{display:grid;gap:12px}
.oc{border-radius:14px;padding:14px 18px;border:1px solid var(--rule);background:var(--surface)}
.oc small{display:block;font-family:var(--f-display);font-stretch:85%;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:4px}
.oc p{margin:0;font-size:16px;line-height:1.5}
.oc.ok{background:var(--dyke-soft);border-color:color-mix(in srgb,var(--dyke) 40%,var(--rule))}.oc.ok small{color:var(--dyke)}
.oc.ask{background:var(--target-soft);border-color:color-mix(in srgb,var(--target) 40%,var(--rule))}.oc.ask small{color:var(--target)}
.oc.stop{background:var(--stop-soft);border-color:color-mix(in srgb,var(--stop) 40%,var(--rule))}.oc.stop small{color:var(--stop)}

.caps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:14px;overflow:hidden;margin-top:34px}
@media (max-width:960px){.caps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.caps{grid-template-columns:1fr}}
.caps div{background:var(--paper);padding:18px 18px 20px}
.caps h3{font-size:16.5px;margin:0 0 8px}
.caps q{display:block;quotes:"“" "”";color:var(--ink-2);font-size:15px;line-height:1.5}

/* ── Dark band ───────────────────────────────── */
.dark{background:#15201B;color:#E3EAE6;--ink:#E3EAE6;--ink-2:#AEBBB4;--ink-3:#84928B;--rule:#2E3934;--surface:#1B2621;--canal:#7FB3DC;--dyke:#8CC08F}
.dark .stack{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dark .stack li{border:1px solid var(--rule);background:var(--surface);border-radius:12px;padding:14px 18px;display:grid;gap:2px}
.dark .stack b{font-family:var(--f-display);font-size:17.5px;color:var(--ink)}
.dark .stack span{color:var(--ink-2);font-size:15px}
.dark a{color:var(--canal)}

/* ── Try it ──────────────────────────────────── */
.shot{margin:0;padding:12px;border-radius:16px;background:var(--surface);border:1px solid var(--rule);box-shadow:var(--shadow)}
.shot img{min-width:0!important;width:100%}
@media (max-width:900px){.try .shot{order:2}}

/* ── Blog row ────────────────────────────────── */
.rowhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}
@media (max-width:900px){.posts{grid-template-columns:1fr}}
.post{display:block;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:14px;overflow:hidden;transition:border-color .15s,transform .15s}
.post:hover{border-color:var(--canal);transform:translateY(-2px)}
.post img{display:block;width:100%;height:auto;border-bottom:1px solid var(--rule)}
.post h3{font-size:19px;margin:14px 18px 6px;line-height:1.2}
.post p{margin:0 18px 18px;color:var(--ink-2);font-size:14.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ── Close + footer ──────────────────────────── */
.close{text-align:center}
.close .big,.close .lead{margin-inline:auto!important}
.hfoot{border-top:1px solid var(--rule);padding:26px 0 40px;color:var(--ink-3);font-size:14.5px}
.hfoot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hfoot b{color:var(--ink);font-family:var(--f-display)}
.hfoot nav{display:flex;gap:18px;flex-wrap:wrap}
.hfoot a{color:var(--ink-2);text-decoration:none}
.hfoot a:hover{color:var(--ink);text-decoration:underline}

/* Narrow phones: no typing effect, let the question wrap */
@media (max-width:560px){.typed{white-space:normal;animation:none;border-right:0}}