/* Shared styles for the inner pages. Same tokens and type as the homepage. */
:root {
  --ink: #0a1316; --ink-2: #0f1f26; --ink-3: #16303a;
  --teal: #1a7894; --sky: #5ab8d4; --mist: #e2eef2; --mist-2: #cfe3ea;
  --paper: #f4f6f5; --card: #ffffff; --text: #15191a; --muted: #5f6a6e; --line: #d9dfde;
  --on-dark: #eef4f6; --on-dark-muted: #9fb3ba;
  --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Hanken Grotesk', system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: linear(0, 0.009, 0.281 6.7%, 0.723 12.9%, 1.077, 1.149 24.3%, 1.163, 1.154 29.9%, 1.009 41.1%, 0.915 53%, 0.95 68.7%, 1.013 89.5%, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.02; letter-spacing: -0.015em; margin: 0; }
p { margin: 0; }
.num { font-family: var(--sans) !important; font-weight: 600 !important; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.wrap { width: min(1200px, 100% - 40px); margin: 0 auto; }
.dark { background: var(--ink); color: var(--on-dark); }
.slate { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--teal); }
.slate::before { content: "✱"; font-size: 16px; letter-spacing: 0; }
.dark .slate { color: var(--sky); }
.btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 15px 26px; font: 600 15.5px/1 var(--sans); text-decoration: none; border: 0; cursor: pointer; transition: transform .5s var(--spring), background .25s, box-shadow .25s; }
.btn.pri { background: var(--sky); color: var(--ink); box-shadow: 0 12px 30px -12px rgba(90, 184, 212, .8); }
.btn.pri:hover { transform: translateY(-2px) scale(1.02); background: #74c6de; }
.btn.dark-btn { background: var(--ink); color: var(--on-dark); }
.btn.dark-btn:hover { transform: translateY(-2px); background: var(--ink-3); }
.btn.ghost { box-shadow: inset 0 0 0 1.5px currentColor; background: transparent; color: inherit; }
.btn.ghost:hover { transform: translateY(-2px); }
.btn .ar { transition: transform .4s var(--spring); } .btn:hover .ar { transform: translateX(4px); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.note { font-size: 13px; color: var(--muted); } .dark .note { color: var(--on-dark-muted); }
.rv { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; }
section { position: relative; }
.pad { padding: 120px 0; }
.head { max-width: 780px; }
.head h2 { font-size: clamp(40px, 5.2vw, 70px); margin-top: 18px; }
.head h2 em { color: var(--teal); } .dark .head h2 em { color: var(--sky); }
.head p { font-size: 19px; color: var(--muted); margin-top: 18px; max-width: 660px; }
.dark .head p { color: var(--on-dark-muted); }
#bar { position: fixed; left: 0; top: 0; height: 3px; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--teal), var(--sky)); z-index: 60; }

/* nav (shared with the homepage) */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: 18px 0; transition: background .3s, padding .3s, box-shadow .3s; }
.nav .wrap { display: flex; align-items: center; gap: 26px; }
.brand { display: flex; align-items: center; gap: 10px; font: 600 24px/1 var(--serif); color: var(--on-dark); text-decoration: none; white-space: nowrap; }
.brand i { font-style: normal; color: var(--sky); font-size: 22px; display: inline-block; transition: transform .8s var(--spring); }
.brand:hover i { transform: rotate(90deg); }
.nav .links { margin-left: auto; display: flex; gap: 26px; font: 500 15px/1 var(--sans); }
.nav .links a { color: var(--on-dark); opacity: .8; text-decoration: none; position: relative; } .nav .links a:hover, .nav .links a[aria-current] { opacity: 1; }
.nav .btn { padding: 11px 18px; font-size: 14px; white-space: nowrap; } .nav .btn .sm { display: none; }
.nav.solid { background: rgba(10, 19, 22, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 10px 0; box-shadow: 0 1px 0 rgba(255,255,255,.06); }

/* inner-page hero: the letterbox opens, lines rise */
.phero { overflow: hidden; padding: 170px 0 110px; }
.phero::before, .phero::after { content: ""; position: absolute; left: 0; right: 0; height: 50%; background: #000; z-index: 5; transition: transform 1.4s var(--ease) .1s; pointer-events: none; }
.phero::before { top: 0; } .phero::after { bottom: 0; }
.ready .phero::before { transform: translateY(-100%); } .ready .phero::after { transform: translateY(100%); }
.phero .beam { position: absolute; width: 900px; height: 900px; right: -300px; top: -260px; background: radial-gradient(circle, rgba(90,184,212,.2), transparent 62%); pointer-events: none; }
.phero .grain { position: absolute; inset: -50%; opacity: .06; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0) } 33% { transform: translate(-3%,2%) } 66% { transform: translate(2%,-3%) } 100% { transform: translate(0,0) } }
.phero .wrap { position: relative; }
.phero h1 { font-size: clamp(56px, 8.4vw, 124px); line-height: .94; letter-spacing: -0.02em; margin-top: 22px; }
.phero h1 em { color: var(--sky); }
.phero .lead { font-size: clamp(18px, 1.5vw, 21px); color: var(--on-dark-muted); max-width: 640px; margin-top: 28px; }
.phero .lead b { color: var(--on-dark); font-weight: 600; }
.ml { display: block; overflow: hidden; padding-bottom: .22em; margin-bottom: -.16em; }
.ml > span { display: block; transform: translateY(108%); transition: transform 1.2s var(--ease); }
.ready .ml > span { transform: none; }
.ready .ml:nth-child(1) > span { transition-delay: .75s; } .ready .ml:nth-child(2) > span { transition-delay: .87s; } .ready .ml:nth-child(3) > span { transition-delay: .99s; }
.fu { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.ready .fu { opacity: 1; transform: none; }
.ready .t1 { transition-delay: .65s; } .ready .t2 { transition-delay: 1.15s; } .ready .t3 { transition-delay: 1.3s; } .ready .t4 { transition-delay: 1.45s; }
.ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 34px; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 44px; border-top: 1px solid rgba(255,255,255,.12); max-width: 860px; }
.facts div { padding: 18px 16px 0 0; }
.facts b { display: block; font-size: 30px; color: var(--on-dark); line-height: 1.1; }
.facts span { font-size: 13.5px; color: var(--on-dark-muted); }

.mcta { display: none; }

/* closing call to action */
.final { text-align: center; padding: 150px 0; overflow: hidden; }
.final h2 { font-size: clamp(44px, 6.2vw, 88px); max-width: 1000px; margin: 22px auto 0; }
.final h2 em { color: var(--sky); }
.final p { color: var(--on-dark-muted); font-size: 19px; max-width: 640px; margin: 24px auto 0; }
.final .ctas { justify-content: center; }
.final .orbit { position: absolute; left: 50%; top: 50%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; border-radius: 50%; border: 1px solid rgba(90,184,212,.12); animation: spin 60s linear infinite; pointer-events: none; }
.final .orbit::before { content: "✱"; position: absolute; left: 50%; top: -14px; color: var(--sky); font-size: 22px; }
.final .orbit.o2 { width: 760px; height: 760px; margin: -380px 0 0 -380px; animation-duration: 40s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .nav .links { display: none; } .nav .btn { margin-left: auto; }
  .nav .btn .lg { display: none; } .nav .btn .sm { display: inline; } .brand { font-size: 21px; }
  .pad { padding: 84px 0; }
  .phero { padding: 130px 0 80px; }
  .facts { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .mcta { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; transform: translateY(140%); transition: transform .5s var(--spring); }
  .mcta.on { transform: none; } .mcta .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .phero::before, .phero::after { display: none; }
  .ml > span, .fu, .rv { opacity: 1 !important; transform: none !important; }
}