/* ============================================
   CODAGE — Liquid Glass Design System
   ============================================ */

:root {
  --bg-base: #06080C;
  --bg-elevated: #0C1018;
  --bg-deep: #04060A;

  --surface-glass: rgba(180, 200, 230, 0.06);
  --surface-glass-strong: rgba(180, 200, 230, 0.10);
  --border-glass: rgba(200, 220, 245, 0.10);
  --border-highlight: rgba(220, 235, 255, 0.18);

  --accent-ice: #A8C5E8;
  --accent-ice-bright: #C4DBF0;
  --accent-silver: #D4DCE6;
  --accent-deep: #6B8AB5;

  --text-primary: #EEF2F8;
  --text-secondary: rgba(238, 242, 248, 0.62);
  --text-tertiary: rgba(238, 242, 248, 0.40);

  --glow-ice: 0 0 32px rgba(168, 197, 232, 0.20);

  --font-serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --font-body: "Geist", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", monospace;

  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x: clip prevents horizontal overflow WITHOUT establishing a scroll container,
     so descendant `position: sticky` actually works (e.g. MethodSection 480vh scroll-pin).
     `hidden` would silently force `overflow-y: auto` on the body, which kills sticky.
     Browser support: Chrome 90+, Edge 90+, Firefox 81+, Safari 16+. */
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}

/* Touch ergonomics — kill iOS link previews on glass cards/tiles, kill default tap highlight everywhere */
.glass, .glass-strong, .bento-tile, .agent-card, .mock-card, .faq-row, .footer-link, .nav-link, .btn {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
button, a { -webkit-tap-highlight-color: transparent; }

body {
  cursor: none;
}

@media (max-width: 900px) {
  body { cursor: auto; }
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: none; }

/* ===== Background gradient mesh ===== */
.bg-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 0% 0%, #0C1430 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, #0A1828 0%, transparent 50%),
    linear-gradient(180deg, #04060A 0%, #06080C 50%, #04060A 100%);
}
.bg-mesh::before,
.bg-mesh::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
}
.bg-mesh::before {
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(120, 160, 220, 0.18) 0%, transparent 70%);
  top: -20vw; left: -10vw;
  animation: drift1 90s ease-in-out infinite;
}
.bg-mesh::after {
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(180, 200, 230, 0.12) 0%, transparent 70%);
  bottom: -15vw; right: -10vw;
  animation: drift2 120s ease-in-out infinite;
}
@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20vw, 15vh) scale(1.15); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-15vw, -10vh) scale(1.2); }
}

.bg-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* ===== Glass surfaces ===== */
.glass {
  background: var(--surface-glass);
  backdrop-filter: blur(48px) saturate(180%) brightness(1.1);
  -webkit-backdrop-filter: blur(48px) saturate(180%) brightness(1.1);
  border: 1px solid var(--border-glass);
  border-top: 1px solid var(--border-highlight);
  border-bottom: 1px solid rgba(160, 180, 210, 0.04);
  box-shadow:
    inset 0 1px 0 0 rgba(220, 235, 255, 0.10),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.20),
    0 32px 64px -16px rgba(0, 0, 0, 0.50),
    0 8px 16px -8px rgba(0, 20, 60, 0.30);
  position: relative;
  overflow: hidden;
}

.glass-strong {
  background: var(--surface-glass-strong);
  backdrop-filter: blur(60px) saturate(180%) brightness(1.1);
  -webkit-backdrop-filter: blur(60px) saturate(180%) brightness(1.1);
}

/* Caustic sweep overlay for interactive cards */
.glass-interactive {
  transition: transform 600ms var(--ease-out-expo), border-color 400ms ease;
}
.glass-interactive::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(220, 235, 255, 0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 800ms var(--ease-out-expo);
  pointer-events: none;
}
.glass-interactive:hover {
  transform: scale(1.008) translateY(-2px);
  border-top-color: rgba(220, 235, 255, 0.28);
}
.glass-interactive:hover::after {
  transform: translateX(100%);
}

/* ===== Typography ===== */
.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.02em; }
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: var(--accent-ice);
  font-weight: 500;
}

/* ===== Layout ===== */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 2;
}
@media (max-width: 768px) {
  .container { padding: 0 24px; }
}

main {
  position: relative;
  z-index: 2;
}

/* ===== Section background rhythm ===== */
section[data-bg="elevated"] { background: var(--bg-elevated); }
section[data-bg="deep"] { background: var(--bg-deep); }
section[data-bg="base"] { background: var(--bg-base); }

/* ===== Section hairline ===== */
.section-hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168, 197, 232, 0.5), transparent);
  width: 100%;
  margin: 0 auto;
  transform-origin: left;
}

/* ===== Custom cursor ===== */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--accent-ice);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(168, 197, 232, 0.8);
}
.cursor-ring {
  width: 28px; height: 28px;
  border: 1px solid rgba(168, 197, 232, 0.4);
  border-radius: 50%;
  transition: width 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
              height 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 200ms ease,
              background 200ms ease;
}
.cursor-ring.hover {
  width: 56px; height: 56px;
  background: rgba(168, 197, 232, 0.08);
  border-color: rgba(168, 197, 232, 0.6);
}

@media (max-width: 900px) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(168, 197, 232, 0.2);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(168, 197, 232, 0.4); }

/* ===== Section reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
}
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 60ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 120ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 180ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 360ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 420ms; opacity: 1; transform: translateY(0); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  border-radius: 999px;
  position: relative;
  transition: all 300ms var(--ease-out-expo);
  letter-spacing: -0.01em;
}
.btn-primary {
  background: linear-gradient(180deg, rgba(168, 197, 232, 0.25) 0%, rgba(168, 197, 232, 0.12) 100%);
  border: 1px solid rgba(168, 197, 232, 0.35);
  color: var(--text-primary);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    inset 0 1px 0 0 rgba(220, 235, 255, 0.25),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.15),
    0 8px 24px -8px rgba(168, 197, 232, 0.4);
}
.btn-primary:hover {
  transform: translateY(-2px);
  border-color: rgba(168, 197, 232, 0.6);
  box-shadow:
    inset 0 1px 0 0 rgba(220, 235, 255, 0.4),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.15),
    0 12px 32px -8px rgba(168, 197, 232, 0.5);
}
.btn-secondary {
  background: rgba(180, 200, 230, 0.04);
  border: 1px solid var(--border-glass);
  color: var(--text-primary);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}
.btn-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(220, 235, 255, 0.12) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 1s ease-out;
}
.btn-secondary:hover::before { transform: translateX(100%); }
.btn-secondary:hover {
  border-color: var(--border-highlight);
  background: rgba(180, 200, 230, 0.08);
}

.arrow-icon { transition: transform 300ms var(--ease-out-expo); }
.btn:hover .arrow-icon { transform: translateX(4px); }

/* ===== Status dot ===== */
.status-dot {
  width: 6px; height: 6px;
  background: var(--accent-ice);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px var(--accent-ice);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--accent-ice); }
  50% { opacity: 0.5; box-shadow: 0 0 16px var(--accent-ice); }
}

/* ===== Chips ===== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(180, 200, 230, 0.05);
  border: 1px solid var(--border-glass);
  border-top-color: rgba(220, 235, 255, 0.12);
  border-radius: 999px;
  color: var(--text-secondary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.chip.ice { color: var(--accent-ice-bright); border-color: rgba(168, 197, 232, 0.25); }

/* ============================================
   RESPONSIVE BREAKPOINTS
   mobile:  320–767px   (primary)
   tablet:  768–1023px
   desktop: 1024–1439px
   wide:    1440px+
   ============================================ */

/* ===== Touch device gates (any breakpoint) ===== */
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none !important; }
  body { cursor: auto !important; }
  button, a { cursor: pointer !important; }
  /* kill hover-only sweep on touch — replaced by tap-down state */
  .glass-interactive::after { display: none !important; }
  .glass-interactive:hover { transform: none !important; }
}

/* ===== Touch target utility (44x44 minimum) ===== */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== Tablet ===== */
@media (max-width: 1023px) {
  .container { padding: 0 24px; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .bento-grid { grid-template-columns: 1fr !important; }
  .bento-grid > a { grid-column: span 1 !important; height: 360px !important; }
  .agent-carousel-track > div { flex: 0 0 calc(50% - 10px) !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
  .industries-head { grid-template-columns: 1fr !important; gap: 24px !important; }
  .industries-head p { justify-self: start !important; }
  .method-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* ===== Mobile ===== */
@media (max-width: 767px) {
  .container { padding: 0 20px; }

  /* Glass: lower blur for battery + Android jank */
  .glass { backdrop-filter: blur(28px) saturate(180%) brightness(1.1) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.1) !important; }
  .glass-strong { backdrop-filter: blur(36px) saturate(180%) brightness(1.1) !important; -webkit-backdrop-filter: blur(36px) saturate(180%) brightness(1.1) !important; }
  .glass-interactive:hover { transform: none !important; }
  .glass-interactive:active { transform: scale(0.985) !important; }
  .glass-interactive::after { display: none; }

  /* Form input font-size floor — prevents iOS zoom-on-focus */
  input, select, textarea, button {
    font-size: 16px !important;
  }

  /* Body text floor */
  html, body { font-size: 16px; }

  .stats-grid { grid-template-columns: 1fr !important; }
  .stats-anchor-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .stats-anchor-num { font-size: clamp(96px, 28vw, 160px) !important; }
  .stats-sat-num { font-size: clamp(36px, 11vw, 56px) !important; }
  .lab-mid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .lab-lead-title { font-size: clamp(32px, 11vw, 56px) !important; }
  .lab-mid-title { font-size: clamp(20px, 6vw, 28px) !important; }
  .lab-archive a { grid-template-columns: 80px 1fr 60px !important; gap: 16px !important; font-size: 10px !important; }
  .closing-ghost { font-size: clamp(120px, 38vw, 220px) !important; opacity: 0.7 !important; }
  .values-head { grid-template-columns: 1fr !important; gap: 24px !important; }
  .value-row { grid-template-columns: 50px 1fr !important; gap: 18px !important; padding: 28px 0 !important; }
  .value-row p { grid-column: 1 / -1; padding-left: 68px; }
  .locations-strip { grid-template-columns: 1fr !important; gap: 40px !important; }
  .locations-strip > div:nth-child(2) { display: none !important; }
  .agent-name-moment { font-size: clamp(56px, 18vw, 96px) !important; }
  .agent-metrics-row { grid-template-columns: 1fr !important; }
  .agent-metrics-row > div { border-left: none !important; border-top: 1px solid var(--border-glass) !important; padding: 18px 8px !important; }
  .agent-metrics-row > div:first-child { border-top: none !important; }
  .agent-meta-strip { gap: 12px !important; }
  .agent-meta-strip > span:nth-child(even) { display: none; }
  .agent-row { grid-template-columns: 1fr !important; gap: 32px !important; direction: ltr !important; }
  .case-meta-strip { gap: 10px !important; }
  .case-meta-strip > span:nth-child(even) { display: none; }
  .case-headline { font-size: clamp(40px, 12vw, 72px) !important; }
  .case-grid { grid-template-columns: 1fr !important; gap: 12px !important; padding: 20px 0 !important; }
  .case-metrics-row { grid-template-columns: 1fr !important; }
  .case-metrics-row > div { border-left: none !important; border-top: 1px solid var(--border-glass) !important; padding: 22px 8px !important; }
  .case-metrics-row > div:first-child { border-top: none !important; }
  .case-pullquote { padding: 32px 0 !important; }
  .faq-head { grid-template-columns: 1fr !important; gap: 24px !important; }
  .faq-list button { grid-template-columns: 36px 1fr 28px !important; gap: 14px !important; padding: 20px 0 !important; }
  .faq-list > div > div { grid-template-columns: 36px 1fr !important; gap: 14px !important; padding-bottom: 24px !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .agent-carousel-track > div { flex: 0 0 calc(88% - 10px) !important; min-height: auto !important; scroll-snap-align: center; }
  .nav-desktop { display: none !important; }
  .nav-mobile { display: flex !important; }

  .showcase-track { gap: 14px !important; padding: 16px !important; -webkit-overflow-scrolling: touch; }
  .agent-carousel-track { -webkit-overflow-scrolling: touch; }
  .method-mobile-track { -webkit-overflow-scrolling: touch; }
  .mock-frame { width: calc(100vw - 60px) !important; max-width: 380px !important; height: 320px !important; }

  .hero-terminal { max-width: 380px !important; height: clamp(280px, 70vw, 380px) !important; }
  .hero-terminal > div:nth-child(3) { font-size: 11px !important; padding: 18px 16px 14px !important; line-height: 1.7 !important; }

  .typo-break { font-size: clamp(48px, 13vw, 64px) !important; }
  .hero-h1 { font-size: clamp(40px, 12vw, 56px) !important; line-height: 1.04 !important; }
  .section-h2 { font-size: clamp(32px, 7vw, 40px) !important; }
  .stat-num { font-size: clamp(56px, 14vw, 72px) !important; }
  .cta-h2 { font-size: clamp(40px, 9vw, 56px) !important; }

  /* Hero — 85vh, leave a peek of the next section. Use dvh where supported (iOS Safari toolbar). */
  .hero-section { min-height: 85vh !important; padding-top: clamp(110px, 18vh, 140px) !important; padding-bottom: clamp(40px, 8vh, 80px) !important; }
  @supports (min-height: 85dvh) {
    .hero-section { min-height: 85dvh !important; }
  }
  .hero-cta-row { flex-direction: column !important; align-items: stretch !important; }
  .hero-cta-row .btn { justify-content: center; width: 100%; }

  /* StatsRow mobile: anchor 96px serif, satellites stacked with hairlines */
  .stats-anchor-section { padding-top: clamp(80px, 12vh, 120px) !important; padding-bottom: clamp(80px, 12vh, 120px) !important; }
  .stats-anchor-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .stats-anchor-num { font-size: clamp(72px, 24vw, 104px) !important; text-shadow: 0 0 28px rgba(168,197,232,0.18) !important; }

  /* TypoBreak — full-screen typographic moment with smaller serif sizes and short gaps */
  .typo-break > div { margin-top: 8px !important; }
  .typo-break > div:first-child { margin-top: 0 !important; }

  /* IndustriesBento — alternating full-bleed and contained for rhythm */
  .bento-grid { gap: 16px !important; }
  .bento-grid > a { grid-column: span 1 !important; }
  .bento-tile.bento-oil { margin-left: -24px !important; margin-right: -24px !important; height: 360px !important; border-radius: 0 !important; }
  .bento-tile.bento-banking { height: 280px !important; }
  .bento-tile.bento-insurance { margin-left: -24px !important; margin-right: -24px !important; height: 320px !important; border-radius: 0 !important; }
  .bento-tile.bento-fintech { height: 300px !important; }
  .bento-tile.bento-energy { margin-left: -24px !important; margin-right: -24px !important; height: 340px !important; border-radius: 0 !important; }

  /* Closing CTA mobile — stacked button layout, full-width primary */
  .closing-cta { padding-top: clamp(80px, 14vh, 120px) !important; padding-bottom: clamp(80px, 14vh, 120px) !important; }
  .closing-cta .btn-primary { width: 100%; justify-content: center; }
  .closing-cta .btn-secondary { width: 100%; justify-content: center; }
  .closing-cta a + a { margin-top: 8px; }
  .closing-cta > div > div > div:last-child { flex-direction: column !important; align-items: stretch !important; }

  .method-section-stage { position: relative !important; }
  .method-artifact-stage { height: 240px !important; }

  /* Touch targets */
  .btn { min-height: 44px; }
  .nav-link { min-height: 44px; display: inline-flex; align-items: center; }

  /* hide agent carousel buttons on mobile, use swipe/scroll-snap */
  .agent-nav-btns { display: none !important; }
}

/* ===== Safe-area insets (notch + home indicator) ===== */
@supports (padding-top: env(safe-area-inset-top)) {
  header.app-header { padding-top: env(safe-area-inset-top) !important; }
  body { padding-bottom: env(safe-area-inset-bottom); }
  /* Stretch the closing-cta + footer's bottom padding under the home indicator */
  .closing-cta { padding-bottom: calc(clamp(120px, 20vh, 200px) + env(safe-area-inset-bottom)); }
  footer { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* ===== Ambient motion ===== */

/* Closing CTA wordmark — slow breathe (8s) */
.closing-ghost.breathe { animation: ghostBreathe 8s ease-in-out infinite; }
@keyframes ghostBreathe {
  0%, 100% { opacity: 0.06; }
  50% { opacity: 0.10; }
}
/* Mobile glass C mark — same breathe rhythm, slightly higher base */
.closing-mark.breathe { animation: closingMarkBreathe 8s ease-in-out infinite; }
@keyframes closingMarkBreathe {
  0%, 100% { opacity: 0.16; }
  50% { opacity: 0.24; }
}

/* Bento per-tile ambient motion — applied to the inner SVG */
.bento-amb-drift-x { animation: bentoDriftX 24s linear infinite; }
@keyframes bentoDriftX {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-8px); }
}
.bento-amb-drift-x-slow { animation: bentoDriftXSlow 30s linear infinite; }
@keyframes bentoDriftXSlow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
.bento-amb-pulse { animation: bentoPulse 3s ease-in-out infinite; }
@keyframes bentoPulse {
  0%, 100% { opacity: 0.65; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.06); }
}

/* Bento tile bespoke hover states (one per sector) */
.bento-tile { transition: transform 600ms var(--ease-out-expo), border-color 400ms ease; }
.bento-tile:hover { transform: translateY(-2px); }

/* Oil & Gas — strata drift accelerates on hover */
.bento-oil:hover .bento-amb-drift-x { animation-duration: 8s; }
.bento-oil:hover .bento-title { transform: translateX(2px); transition: transform 400ms var(--ease-out-expo); }
.bento-tile.bento-oil .bento-title { transition: transform 600ms var(--ease-out-expo); }

/* Banking — dimension labels fade up */
.bento-banking [data-bp-fade] { opacity: 0; transition: opacity 400ms var(--ease-out-expo), transform 400ms var(--ease-out-expo); transform: translateY(4px); }
.bento-banking:hover [data-bp-fade] { opacity: 1; transform: translateY(0); }

/* Insurance — document edge glow on hover */
.bento-insurance .doc-stack-edge { transition: stroke 400ms ease, stroke-width 400ms ease; }
.bento-insurance:hover .doc-stack-edge[data-doc-i="2"] { stroke: rgba(220,235,255,0.65); stroke-width: 1.4; }

/* Fintech — highlight bar grows + nudges chart upward */
.bento-fintech:hover .bento-amb-pulse { animation-duration: 1.2s; }

/* Energy — contour ring intensifies */
.bento-energy .topo-ring-hilite { transition: stroke 500ms ease, stroke-width 500ms ease; }
.bento-energy:hover .topo-ring-hilite { stroke: var(--accent-ice-bright); stroke-width: 1.8; }

@media (hover: none) {
  .bento-tile:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bento-banking [data-bp-fade] { opacity: 1; transform: none; }
}

/* Agent card thumb hover crossfade */
.agent-card-thumb { position: relative; }
.agent-thumb-detail {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 320ms var(--ease-out-expo);
  pointer-events: none;
}
.agent-card:hover .agent-thumb-detail { opacity: 1; }
.agent-thumb-base { transition: opacity 320ms var(--ease-out-expo); }
.agent-card:hover .agent-thumb-base { opacity: 0.18; }
@media (hover: none) { .agent-thumb-detail, .agent-thumb-base { opacity: 1 !important; transition: none; } }

/* FAQ — hairline thicken + summary color shift on hover; height transition */
.faq-row { border-top: 1px solid var(--border-glass); transition: border-top-color 240ms ease; position: relative; }
.faq-row::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 2px;
  background: var(--accent-ice);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms var(--ease-out-expo);
}
.faq-row:hover::after,
.faq-row.is-open::after { transform: scaleX(0.18); }
.faq-row:hover .faq-q,
.faq-row.is-open .faq-q { color: var(--text-primary); }
.faq-q { color: var(--text-primary); transition: color 240ms ease; }

.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 360ms var(--ease-out-expo), opacity 280ms ease;
  overflow: hidden;
}
.faq-body > div { min-height: 0; }
.faq-row.is-open .faq-body {
  grid-template-rows: 1fr;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .faq-body { transition: none; }
  .faq-row.is-open .faq-body { grid-template-rows: 1fr; }
}

/* Footer link hover — color shift + animated ice underline */
.footer-link {
  position: relative;
  color: var(--text-tertiary);
  transition: color 200ms ease;
  display: inline-block;
}
.footer-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent-ice);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms var(--ease-out-expo);
}
.footer-link:hover { color: var(--text-primary); }
.footer-link:hover::after { transform: scaleX(1); }

/* Mockup card internal parallax on hover */
.mock-card { transition: transform 600ms var(--ease-out-expo); }
.mock-card .mock-frame > * { transition: transform 500ms var(--ease-out-expo); }
.mock-card:hover .mock-frame > * { transform: translateY(-2px); }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .mock-card:hover .mock-frame > * { transform: none; }
}

/* Use-case index row hover */
.usecase-row { transition: background 200ms ease; }
.usecase-row .uc-num { color: var(--text-tertiary); transition: color 240ms ease; }
.usecase-row .uc-suit { transform: translateX(-8px); opacity: 0; transition: transform 320ms var(--ease-out-expo), opacity 240ms ease; }
.usecase-row:hover { background: rgba(168,197,232,0.03); }
.usecase-row:hover .uc-num { color: var(--accent-ice); }
.usecase-row:hover .uc-suit { transform: translateX(0); opacity: 1; }
@media (hover: none) {
  .usecase-row:hover { background: transparent; }
  .usecase-row .uc-suit { transform: none; opacity: 1; }
}

/* SVG path-draw on reveal (e.g. /work + /security diagrams) */
.path-draw {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1100ms var(--ease-out-expo);
}
.diagrams-in .path-draw { stroke-dashoffset: 0; }
.diagrams-in .path-draw[data-delay="1"] { transition-delay: 120ms; }
.diagrams-in .path-draw[data-delay="2"] { transition-delay: 220ms; }
.diagrams-in .path-draw[data-delay="3"] { transition-delay: 320ms; }
.diagrams-in .path-draw[data-delay="4"] { transition-delay: 420ms; }
.diagrams-in .path-draw[data-delay="5"] { transition-delay: 520ms; }

@media (prefers-reduced-motion: reduce) {
  .closing-ghost.breathe { animation: none !important; opacity: 0.08 !important; }
  .bento-amb-drift-x, .bento-amb-drift-x-slow, .bento-amb-pulse { animation: none !important; }
  .path-draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
}

/* ===== Founder portrait composition balance =====
   Goal: heads sit at ~same vertical position, faces fill ~same area in both cards.
   Elgun's source image has him farther from camera; zoom in slightly and shift framing.
   Inline objectPosition lives on the <img> tag, so we need !important to override. */
.founder-card[data-founder="elgun"] img {
  object-fit: cover !important;
  object-position: 60% center !important;
  transform: scale(1.12);
  transform-origin: center 40%;
}
.founder-card[data-founder="fatulla"] img {
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1);
}

/* ===== Hero italic glow (tapered on smaller viewports) ===== */
.hero-em-glow { text-shadow: 0 0 32px rgba(168, 197, 232, 0.3); }
@media (max-width: 1280px) {
  .hero-em-glow { text-shadow: 0 0 16px rgba(168, 197, 232, 0.24); }
}
@media (max-width: 767px) {
  .hero-em-glow { text-shadow: 0 0 10px rgba(168, 197, 232, 0.22); }
}

/* ===== Reduce motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .bg-mesh::before, .bg-mesh::after { animation: none !important; }
  .status-dot { animation: none !important; }
  .term-caret { animation: none !important; }
  /* hairlines render at full extent immediately */
  .section-hairline { transform: scaleX(1) !important; }
}