/* ============================================================
   Horizon Tech Ventures — design tokens + base + interactions
   Recreated from the Claude Design prototype (Horizon.dc.html).
   Accent = Teal. Type = Lora / DM Sans / DM Mono.
   ============================================================ */

:root{
  --accent:#047857; --accent-deep:#065F46; --accent-soft:#D1FAE5; --accent-glow:#10b981;
  --accent-rgb:4,120,87; --accent-glow-rgb:16,185,129;
  --amber:#F59E0B; --amber-soft:#FEF3C7; --indigo:#6366F1; --indigo-soft:#E0E7FF;
  --ink:#0D0D0D; --gray-600:#525252; --gray-500:#737373; --gray-400:#a3a3a3;
  --gray-300:#d4d4d4; --gray-200:#e5e5e5; --gray-100:#f5f5f5;
  --warm-bg:#F3F1EE; --white:#FAFAFA; --pure-white:#FFFFFF;
  --border-1:#e5e5e5; --border-2:#d4d4d4;
  --font-serif:'Lora','Source Serif Pro',Georgia,serif;
  --font-sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'DM Mono','JetBrains Mono',ui-monospace,monospace;
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --shadow-xs:0 1px 2px rgba(13,13,13,0.04);
  --shadow-sm:0 1px 2px rgba(13,13,13,0.04),0 1px 3px rgba(13,13,13,0.06);
  --shadow-md:0 4px 6px -2px rgba(13,13,13,0.05),0 10px 20px -6px rgba(13,13,13,0.08);
  --shadow-lg:0 10px 20px -6px rgba(13,13,13,0.08),0 24px 48px -12px rgba(13,13,13,0.14);
  --shadow-glow:0 0 0 4px rgba(var(--accent-glow-rgb),0.15);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#FAFAFA;color:#0D0D0D;font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent-soft);color:var(--accent-deep)}

/* ---- scroll reveal ---- */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
[data-reveal].in{opacity:1;transform:none}

/* ---- keyframes ---- */
@keyframes breath{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes corepulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
@keyframes floaty{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,18px)}}
@keyframes driftin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important}*{animation:none!important}}

/* ---- form + details primitives ---- */
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
input,textarea,select,button{font-family:inherit}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)!important;box-shadow:0 0 0 4px rgba(var(--accent-glow-rgb),.15)}
input::placeholder,textarea::placeholder{color:#a3a3a3}

/* ============================================================
   Interaction classes (ported from prototype style-hover/active)
   ============================================================ */

/* Primary teal button */
.btn-primary{transition:transform .16s ease,background .2s}
.btn-primary:hover{background:var(--accent-glow)!important;border-color:var(--accent-glow)!important;transform:translateY(-2px)}
.btn-primary:active{transform:scale(.98)}

/* Light ghost / outline button */
.btn-ghost{transition:transform .16s ease,background .2s,border-color .2s}
.btn-ghost:hover{background:#FFFFFF;border-color:#a3a3a3}
.btn-ghost:active{transform:scale(.98)}
/* variant that fades to off-white on hover */
.btn-ghost--soft:hover{background:#FAFAFA;border-color:#a3a3a3}

/* Ghost button on dark backgrounds (CTA band) */
.btn-ghost-dark{transition:transform .16s ease,background .2s,border-color .2s}
.btn-ghost-dark:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.btn-ghost-dark:active{transform:scale(.98)}

/* Dark solid button (newsletter) */
.btn-dark{transition:transform .15s,background .2s}
.btn-dark:hover{background:#262626;transform:translateY(-1px)}
.btn-dark:active{transform:scale(.98)}

/* styled link-buttons are real <a> now (multi-page) — kill the default underline */
a.btn-primary,a.btn-ghost,a.btn-ghost--soft,a.btn-ghost-dark,a.btn-dark,a.tlink,a.tlink-glow,a.navlink{text-decoration:none}

/* Card hover lifts */
.card-lift{transition:transform .2s,box-shadow .2s}
.card-lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.card-lift-lg{transition:transform .2s,box-shadow .2s}
.card-lift-lg:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
/* dark cards lift to a deeper shadow */
.card-lift-dark:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

/* Nav links */
a.navlink{transition:color .2s}
a.navlink:hover{color:#0D0D0D!important}

/* Press-strip logos */
.press-logo{transition:color .2s}
.press-logo:hover{color:#525252!important}

/* Press logo marquee (monochrome, auto-rotating) */
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;align-items:center;gap:52px;width:max-content;animation:press-marquee 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes press-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* Inline text links with animated underline */
.tlink{border-bottom:1px solid transparent;transition:border-color .2s}
.tlink:hover{border-bottom-color:var(--accent-deep)}
.tlink-glow{border-bottom:1px solid transparent;transition:border-color .2s}
.tlink-glow:hover{border-bottom-color:var(--accent-glow)}

/* Capability rail buttons */
.rail-btn{transition:transform .15s}
.rail-btn:hover{transform:translateX(3px)}
.rail-ind{display:none}
.rail-btn.is-active .rail-ind{display:block}

/* Nav active underline */
.nav-underline{display:none}
[data-nav].is-active .nav-underline{display:block}

/* Footer links */
.flink{transition:color .2s}
.flink:hover{color:#fff!important}

/* FAQ: rotate the "+" into an "×" when open */
details > summary > span:last-child{transition:transform .25s ease}
details[open] > summary > span:last-child{transform:rotate(45deg)}

/* Mobile nav toggle (hamburger) — hidden on desktop */
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;background:none;border:0;cursor:pointer;color:#0D0D0D;border-radius:10px;margin-left:auto}
.nav-toggle:hover{background:rgba(13,13,13,.05)}

/* Accessible focus rings (keyboard only) */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none}

/* Magnetic primary buttons — JS nudges --mx/--my, CSS does the smooth motion */
.magnetic{will-change:transform}
.btn-primary.magnetic{transform:translate(var(--mx,0),var(--my,0))}
.btn-primary.magnetic:hover{transform:translate(var(--mx,0),calc(var(--my,0) - 2px))}

/* Operator credibility chips */
.op-chip{transition:transform .18s ease,box-shadow .18s ease,border-color .2s}
.op-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--accent)}

/* Editorial capability list (home) */
.cap-row{transition:background .2s ease,transform .2s ease}
.cap-row:hover{background:rgba(var(--accent-rgb),.045);transform:translateX(4px)}
@media(max-width:560px){.cap-row{grid-template-columns:52px 1fr!important;gap:16px!important}}

/* Footer newsletter capture */
.foot-nl-input::placeholder{color:#6b6b6b}
.foot-nl-btn{transition:transform .15s,background .2s}
.foot-nl-btn:hover{background:var(--accent-glow);transform:translateY(-1px)}
.foot-nl-btn:active{transform:scale(.98)}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:920px){
  .grid-2,.grid-2-asym{grid-template-columns:1fr!important}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr!important}
  .hero-grid{grid-template-columns:1fr!important;gap:40px!important}
  .cap-map{grid-template-columns:1fr!important}
  .method-row{grid-template-columns:1fr 1fr!important}
  .method-line{display:none!important}
}
@media(max-width:640px){
  .grid-3,.grid-4,.method-row{grid-template-columns:1fr!important}
  .founder-card{grid-template-columns:1fr!important;text-align:center;justify-items:center}
  /* hamburger menu */
  .nav-toggle{display:inline-flex;order:3}
  .nav-cta{order:2}
  .nav-links{
    display:none!important;position:absolute;top:72px;left:0;right:0;
    background:rgba(250,250,250,.98);backdrop-filter:blur(12px);
    border-bottom:1px solid #e5e5e5;flex-direction:column;
    gap:0!important;margin-left:0!important;padding:6px 0 10px;
    white-space:normal!important;box-shadow:var(--shadow-md)
  }
  .nav-links.open{display:flex!important}
  .nav-links a.navlink{padding:14px 32px!important;font-size:16px}
  .nav-links .nav-underline{display:none!important}
}