@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

:root { --ink:#060B12; --surface:#0E1624; --accent:#6EA8FE; --text:#F1F5F9; --muted:#94A3B8; --line:#243044; --max:1200px; --ease:cubic-bezier(.16,1,.3,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--text); font:17px/1.65 Inter,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.container { width:min(calc(100% - 40px),var(--max)); margin-inline:auto; }
.skip-link { position:absolute; left:-10000px; top:0; z-index:10; background:white; color:var(--ink); padding:.7rem 1rem; }
.skip-link:focus { left:1rem; top:1rem; }
.site-header { position:sticky; top:0; z-index:5; border-bottom:1px solid var(--line); background:rgba(6,11,18,.92); backdrop-filter:blur(14px); }
.nav { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { font:700 1.25rem 'Space Grotesk',sans-serif; letter-spacing:-.04em; }.brand span { color:var(--accent); }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:.7rem 1rem; border:1px solid var(--accent); border-radius:12px; font-size:.94rem; font-weight:700; transition:transform 180ms var(--ease),box-shadow 180ms ease,background-color 180ms ease; }
.button-primary { background:var(--accent); color:#07111F; }.button-secondary { background:transparent; color:var(--text); }.button-small { min-height:42px; padding:.55rem .8rem; font-size:.84rem; }.button:active { transform:scale(.97); }
.hero { padding:clamp(5rem,12vw,9rem) 0 clamp(4.5rem,8vw,6.5rem); border-bottom:1px solid var(--line); }.hero-copy { max-width:none; }
.eyebrow { margin:0 0 .8rem; color:var(--accent); font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
/* Do not narrow short titles: they use the complete desktop content width before naturally wrapping. */
h1 { width:100%; max-width:none; margin:0; font:700 clamp(2.7rem,7vw,6rem)/1.02 'Space Grotesk',sans-serif; letter-spacing:-.065em; }
.subheadline { width:100%; max-width:none; margin:1.2rem 0 1.8rem; color:var(--muted); font-size:clamp(1.1rem,2vw,1.35rem); }
.actions { display:flex; flex-wrap:wrap; gap:.75rem; }.content { max-width:900px; padding-block:5rem; }.content section { margin-bottom:4rem; }.content h2 { margin:0 0 .9rem; font:700 clamp(1.75rem,4vw,2.45rem)/1.16 'Space Grotesk',sans-serif; letter-spacing:-.045em; }.content p { color:var(--muted); }.inline-link,.site-footer a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.use-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; margin-top:1.2rem; }.use-card { padding:1rem 1.1rem; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--muted); }.use-card:before { content:'✓'; color:var(--accent); font-weight:700; margin-right:.55rem; }
.availability { padding:2.25rem; border:1px solid var(--line); border-radius:20px; background:var(--surface); }.availability h2 { color:var(--text); }
details { border-top:1px solid var(--line); padding:1rem 0; } details:last-child { border-bottom:1px solid var(--line); } summary { cursor:pointer; font:600 1rem 'Space Grotesk',sans-serif; } details p { margin:.6rem 0 0; font-size:.95rem; }
.site-footer { border-top:1px solid var(--line); padding:3rem 0; color:var(--muted); font-size:.9rem; }.footer-content { display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; }.site-footer p { margin:0; }.site-footer strong { color:var(--text); }
/* Quiet cinematic motion: entrance is deliberate; buttons remain responsive. */
.js .hero .eyebrow,.js .hero h1,.js .hero .subheadline,.js .hero .actions { opacity:0; transform:translateY(20px) scale(.99); transition:opacity 520ms var(--ease),transform 520ms var(--ease); }.motion-ready .hero .eyebrow { opacity:1; transform:none; transition-delay:25ms; }.motion-ready .hero h1 { opacity:1; transform:none; transition-delay:125ms; }.motion-ready .hero .subheadline { opacity:1; transform:none; transition-delay:225ms; }.motion-ready .hero .actions { opacity:1; transform:none; transition-delay:325ms; }
.js [data-reveal] { opacity:0; transform:translateY(18px); transition:opacity 420ms var(--ease),transform 420ms var(--ease); }.js [data-reveal].is-visible { opacity:1; transform:none; }
@media (hover:hover) and (pointer:fine) { .button:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(110,168,254,.22); }.use-card { transition:transform 280ms var(--ease),border-color 280ms ease; }.use-card:hover { transform:translateY(-5px); border-color:var(--accent); } }
@media (max-width:700px) { .content { padding-block:3.75rem; }.content section { margin-bottom:3rem; }.use-grid { grid-template-columns:1fr; }.availability { padding:1.5rem; } }
@media (max-width:520px) { body { font-size:16px; }.container { width:min(calc(100% - 32px),var(--max)); }.button-small { font-size:.76rem; }.hero { padding-top:4.5rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }.js .hero .eyebrow,.js .hero h1,.js .hero .subheadline,.js .hero .actions,.js [data-reveal] { opacity:1; transform:none; } }