/* Falcon Aerospace: shared styles for the public pages */
:root{
  --display:'Space Grotesk',sans-serif; --title:'Michroma',sans-serif; color-scheme:dark;
  --bg:#04060c; --panel:rgba(9,13,23,0.78); --panel-solid:#090d17; --line:rgba(255,255,255,0.10); --line-2:rgba(255,255,255,0.16);
  --ink:#eef3fa; --body:#aab7c9; --dim:#74839a; --a:#62b8ee; --a-soft:rgba(98,184,238,0.12); --warm:#f2b36b;
  --max:1560px; --pad:clamp(20px,4vw,56px); --r:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{background:var(--bg); color:var(--body); font:16px/1.7 Inter,-apple-system,"Segoe UI",sans-serif; text-rendering:optimizeLegibility;
  background-image:radial-gradient(ellipse 60% 45% at 80% 8%, rgba(98,184,238,0.09), transparent 70%),
                   radial-gradient(ellipse 50% 40% at 10% 90%, rgba(120,100,220,0.06), transparent 70%);
  background-attachment:fixed}
a{color:var(--a); text-decoration:none}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--a); outline-offset:3px; border-radius:4px}
img{max-width:100%; display:block}
#stars{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.page{position:relative; z-index:1}
.container{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}

/* Header */
.site-header{position:sticky; top:0; z-index:20; background:rgba(4,6,12,0.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:68px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); font:400 14px var(--title); letter-spacing:.2em; text-transform:uppercase}
.brand .brand-2{font-weight:400; color:#9fd0f2}
.brand:hover{color:#fff}
.brand i{width:9px; height:9px; border-radius:50%; background:var(--a); box-shadow:0 0 14px var(--a)}
.nav{display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); font-size:15px}
.nav a{color:var(--body)}
.nav a:hover, .nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--a); padding-bottom:3px}
@media (max-width:720px){
  .site-header .container{padding-top:12px; padding-bottom:10px; gap:8px}
  .nav{width:100%; overflow-x:auto; gap:22px; padding-bottom:4px}
  .nav .btn{margin-left:auto}
}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:500 15px Inter,sans-serif; border-radius:999px;
  padding:13px 24px; border:1px solid var(--line-2); color:var(--ink); background:transparent; cursor:pointer; white-space:nowrap; transition:background .15s,border-color .15s,color .15s}
.btn:hover{border-color:var(--a); color:#fff}
.btn-primary{background:var(--a); border-color:var(--a); color:#04060c}
.btn-primary:hover{background:#fff; border-color:#fff; color:#04060c}
.btn-warm{border-color:rgba(242,179,107,0.5); color:var(--warm)}
.btn-warm:hover{border-color:var(--warm); color:#fff; background:rgba(242,179,107,0.08)}
.btn-sm{padding:8px 16px; font-size:14px}
.btn:disabled{opacity:.5; cursor:default}
.btn-row{display:flex; flex-wrap:wrap; gap:12px}

/* Type */
h1,h2,h3{color:#fff; font-family:var(--display); font-weight:300; letter-spacing:-.015em; line-height:1.12; text-wrap:balance}
h1{font-weight:200; font-size:clamp(42px,6.2vw,86px); letter-spacing:-.03em; line-height:1.02}
h2{font-size:clamp(28px,3.4vw,44px)}
h3{font-size:clamp(20px,1.8vw,24px); line-height:1.25}
.lede{font-size:clamp(17px,1.4vw,20px); line-height:1.65; color:#c7d2e0; max-width:62ch; text-wrap:pretty}
.muted{color:var(--dim)}
.small{font-size:14px}
.mono{font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.04em}
p{max-width:70ch}

/* Sections */
section{padding:clamp(56px,8vw,110px) 0}
.section-head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:16px 40px; margin-bottom:clamp(28px,4vw,48px)}
.section-head p{margin-top:10px}
.divider{border-top:1px solid var(--line)}

/* Page hero (inner pages) */
.page-hero{padding-top:clamp(56px,9vw,120px); padding-bottom:clamp(36px,5vw,60px)}
.page-hero h1{font-size:clamp(40px,5.4vw,72px)}
.page-hero .lede{margin-top:18px}
.crumbs{font-size:14px; color:var(--dim); margin-bottom:18px}
.crumbs a{color:var(--dim)} .crumbs a:hover{color:#fff}

/* Cards */
.grid{display:grid; gap:clamp(16px,2vw,24px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){ .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:680px){ .g2,.g3,.g4{grid-template-columns:1fr} }
.card{background:var(--panel); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,2.4vw,32px);
  display:flex; flex-direction:column; gap:12px; min-width:0}
a.card{color:inherit; transition:border-color .2s, transform .2s}
a.card:hover{border-color:rgba(98,184,238,0.55); transform:translateY(-2px)}
.card .more{margin-top:auto; padding-top:8px; color:var(--a); font-weight:500; font-size:15px}
.card p{font-size:15.5px}
.icon{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--a-soft); color:var(--a)}
.icon svg{width:22px; height:22px}
.badge{display:inline-flex; align-items:center; gap:7px; width:max-content; font:500 12px 'IBM Plex Mono',monospace; letter-spacing:.04em;
  padding:5px 11px; border-radius:999px; border:1px solid var(--line-2); color:var(--body)}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.badge.live{color:#6ee7a8; border-color:rgba(110,231,168,0.35)}
.badge.soon{color:var(--warm); border-color:rgba(242,179,107,0.35)}
.badge.plan{color:var(--a); border-color:rgba(98,184,238,0.35)}

/* Lists */
.ticks{list-style:none; display:grid; gap:10px}
.ticks li{position:relative; padding-left:26px}
.ticks li::before{content:""; position:absolute; left:2px; top:.62em; width:12px; height:7px; border-left:2px solid var(--a); border-bottom:2px solid var(--a); transform:rotate(-45deg) translateY(-3px)}
.steps{list-style:none; display:grid; gap:0; border-top:1px solid var(--line)}
.steps li{display:grid; grid-template-columns:48px 1fr; gap:14px; padding:14px 2px; border-bottom:1px solid var(--line)}
.steps li b{font:500 13px 'IBM Plex Mono',monospace; color:var(--dim); padding-top:3px}
.steps li span{color:#dfe7f1}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips span{font-size:14px; padding:6px 13px; border-radius:999px; background:rgba(255,255,255,0.04); border:1px solid var(--line); color:#d3dce8}

/* Price: IBM Plex so "$" and "5" are clearly different; the $ is small and blue */
.price{display:flex; align-items:center; gap:12px 14px; flex-wrap:wrap}
.price b{font:600 clamp(44px,4.6vw,58px)/1 Inter,sans-serif; color:#fff; letter-spacing:-.02em}
.price .cur{font-size:.5em; vertical-align:.72em; margin-right:3px; color:var(--a); font-weight:500}
.price s{font:400 20px Inter,sans-serif; color:var(--dim)}
.price .save{font:600 13px Inter,sans-serif; color:#04060c; background:var(--a); padding:5px 11px; border-radius:999px}
.price em{font-style:normal; width:100%}


/* Band (call to action) */
.band{border:1px solid var(--line); border-radius:calc(var(--r) + 6px); padding:clamp(28px,4vw,56px); background:
  linear-gradient(135deg, rgba(98,184,238,0.10), rgba(242,179,107,0.06) 60%, transparent), var(--panel);
  display:flex; flex-wrap:wrap; gap:24px 48px; align-items:center; justify-content:space-between}
.band h2{font-size:clamp(26px,3vw,38px)}
.band p{margin-top:10px}

/* Footer */
.site-footer{position:relative; border-top:1px solid var(--line); padding:clamp(48px,6vw,80px) 0 32px; margin-top:clamp(40px,6vw,80px);
  background:linear-gradient(180deg, rgba(6,9,17,0.6), rgba(4,6,12,0.95))}
.site-footer::before{content:""; position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:min(560px,70%); height:1px;
  background:linear-gradient(90deg,transparent,var(--a),transparent); opacity:.7}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:clamp(28px,4vw,56px)}
.foot-brand p{margin-top:16px; max-width:34ch; font-size:14.5px; color:var(--dim); line-height:1.7}
.foot-grid h4{font:500 12px 'IBM Plex Mono',monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--a); margin-bottom:16px}
.foot-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:15px}
.foot-grid ul a{color:var(--body); transition:color .15s; overflow-wrap:anywhere}
.foot-grid ul a:hover{color:#fff}
.foot-note{margin-top:clamp(36px,5vw,56px); padding-top:22px; border-top:1px solid var(--line); font-size:13px; color:var(--dim);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px}
.foot-note p{max-width:none; margin:0}
@media (max-width:1100px){ .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .foot-brand{grid-column:1 / -1} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-grid > div:last-child{grid-column:1 / -1} }

/* Headings: a touch heavier for clarity */
h1,h2,h3{font-weight:500; letter-spacing:-.02em}
h1{font-weight:400}

/* ---------- Hero title ---------- */
.hero{position:relative; min-height:calc(100vh - 68px); display:grid; place-items:center; text-align:center; padding:60px 0 90px; overflow:hidden}
.hero .nebula{position:absolute; inset:-10%; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse 38% 30% at 50% 46%, rgba(98,184,238,0.20), transparent 70%),
             radial-gradient(ellipse 30% 22% at 58% 54%, rgba(242,179,107,0.08), transparent 70%)}
.title-wrap{position:relative; display:grid; justify-items:center}
.orbit{position:absolute; left:50%; top:50%; width:118%; transform:translate(-50%,-56%) rotate(-7deg); overflow:visible; pointer-events:none}
.orbit .ring{fill:none; stroke:url(#ringGrad); stroke-width:1.2; stroke-dasharray:1; stroke-dashoffset:1; opacity:.9}
.orbit .sat{fill:#bfe6ff; filter:drop-shadow(0 0 6px #62b8ee); opacity:0}
.wm{font-family:var(--title); font-weight:400; font-size:clamp(40px,8.6vw,128px); line-height:1; letter-spacing:.12em; padding-left:.12em;
  text-transform:uppercase; display:flex; position:relative; color:#fff}
.wm i{font-style:normal; display:inline-block; opacity:0;
  background:linear-gradient(180deg,#ffffff 10%,#d8ecfa 55%,#7fc0ec 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.sub{margin-top:clamp(14px,1.6vw,24px); font:500 clamp(13px,1.7vw,24px)/1 var(--display); letter-spacing:.9em; padding-left:.9em;
  text-transform:uppercase; opacity:0;
  background:linear-gradient(90deg,#62b8ee,#eaf5fd 50%,#f2b36b); -webkit-background-clip:text; background-clip:text; color:transparent}
.tag{margin-top:clamp(26px,3vw,40px); font:400 clamp(16px,1.6vw,22px)/1.4 var(--display); color:#e6edf7; letter-spacing:.08em; opacity:0;
  display:flex; align-items:center; gap:16px}
.tag::before,.tag::after{content:""; height:1px; width:0; background:linear-gradient(90deg,transparent,var(--a))}
.tag::after{background:linear-gradient(90deg,var(--a),transparent)}
.hero .lede{margin:22px auto 0; opacity:0}
.hero .btn-row{justify-content:center; margin-top:34px; opacity:0}
.scroll-hint{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:grid; justify-items:center; gap:8px;
  font:500 11px 'IBM Plex Mono',monospace; letter-spacing:.3em; color:var(--dim); opacity:0}
.scroll-hint span{width:1px; height:34px; background:linear-gradient(var(--a),transparent); animation:drip 2s ease-in-out infinite}

/* sequence (runs whenever .play is added) */
.play .nebula{animation:fadeIn 2.4s ease .1s forwards}
.play .orbit .ring{animation:draw 2.2s cubic-bezier(.6,.05,.25,1) .9s forwards}
.play .orbit .sat{animation:fadeIn .6s ease 2.6s forwards}
.play .wm i{animation:warpIn 1.3s cubic-bezier(.16,.84,.24,1) forwards; animation-delay:calc(var(--o) * 120ms + 250ms)}
.play .sub{animation:trackIn 1.8s cubic-bezier(.2,.75,.2,1) 1.2s forwards}
.play .tag{animation:fadeUp 1s ease 1.9s forwards}
.play .tag::before,.play .tag::after{animation:grow 1s ease 2.2s forwards}
.play .lede{animation:fadeUp 1s ease 2.2s forwards}
.play .btn-row{animation:fadeUp 1s ease 2.45s forwards}
.play .scroll-hint{animation:fadeIn 1s ease 3.2s forwards}

@keyframes warpIn{0%{opacity:0; transform:scale(2.4) translateY(-6%); filter:blur(18px)}
  60%{opacity:1; filter:blur(0)} 100%{opacity:1; transform:none; filter:drop-shadow(0 0 24px rgba(98,184,238,.35))}}
@keyframes trackIn{from{opacity:0; letter-spacing:.1em; padding-left:.1em; filter:blur(6px)} to{opacity:1; letter-spacing:.9em; padding-left:.9em; filter:blur(0)}}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@keyframes fadeIn{to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes grow{to{width:clamp(28px,4vw,56px)}}
@keyframes drip{0%{transform:scaleY(0); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){
  .hero *{animation:none!important}
  .nebula,.wm i,.sub,.tag,.hero .lede,.hero .btn-row,.scroll-hint,.orbit .sat{opacity:1!important}
  .orbit .ring{stroke-dashoffset:0}.tag::before,.tag::after{width:40px}
}

@media (max-width:600px){ .tag::before,.tag::after{display:none} .tag{letter-spacing:.04em} }


@media (prefers-reduced-motion:reduce){ *{transition:none!important; scroll-behavior:auto!important} }