/* ─────────────────────────────────────────────────────────────
   GOGOALA — flight-plan landing page
   ───────────────────────────────────────────────────────────── */

:root{
  /* Brand palette */
  --white:#FDFDFD;
  --alice:#DFEDF4;
  --navy:#223C59;        /* deep space blue */
  --dusk:#3B526B;
  --aqua:#54CEFE;

  /* Derived */
  --void:#0E1B2A;        /* navy deepened, for night sky + panels */
  --accent:var(--aqua);
  --accent-deep:#1B9FD8; /* aqua shade, for gradients + light-bg hover */
  --ink:var(--navy);     /* text on light sections */

  --paper:var(--white);
  --paper-dim:rgba(223,237,244,.66);
  --paper-faint:rgba(223,237,244,0.64);
  --line:rgba(84,206,254,.18);
  --nav-h:74px;
  --pad:clamp(20px,5vw,80px);
  --font-display:"Instrument Serif",Georgia,serif;
  --font-body:"Archivo",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--void);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── Atmosphere: fixed sky layers cross-faded on scroll ─────── */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none}
.sky__layer{position:absolute;inset:0}

/* Night: deep space blue, aqua glow on the horizon below */
.sky__night{
  background:
    radial-gradient(120% 80% at 50% 108%, rgba(84,206,254,.22) 0%, transparent 58%),
    radial-gradient(90% 60% at 78% 8%, rgba(34,60,89,.85) 0%, transparent 70%),
    linear-gradient(180deg,#0A1522 0%,#0E1B2A 45%,#1B3049 100%);
}
/* Dusk: climbing into thinner air, horizon lighting up */
.sky__dusk{
  opacity:0;
  background:
    radial-gradient(130% 70% at 50% 106%, rgba(84,206,254,.55) 0%, rgba(84,206,254,.15) 34%, transparent 66%),
    linear-gradient(180deg,#16263A 0%,#223C59 44%,#2F4459 100%);
}

/* starfield */
.stars{position:absolute;inset:0}
.star{
  position:absolute;border-radius:50%;background:#FDFDFD;
  animation:tw var(--d) ease-in-out infinite alternate;
}
@keyframes tw{from{opacity:.12}to{opacity:var(--o)}}

/* aeronautical chart grid */
.chart-grid{
  position:absolute;inset:-1px;opacity:.5;
  background-image:
    linear-gradient(to right,var(--line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  mask-image:radial-gradient(130% 100% at 50% 40%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(130% 100% at 50% 40%,#000 20%,transparent 78%);
}

/* film grain */
.grain{
  position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Flight layer ───────────────────────────────────────────── */
.trail{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:visible}
.trail__plan{
  fill:none;stroke:rgba(84,206,254,.30);stroke-width:1.4;
  stroke-dasharray:2 9;stroke-linecap:round;
}
.trail__flown{
  fill:none;stroke:url(#trailGrad);stroke-width:2.8;stroke-linecap:round;
}

.plane{
  position:fixed;top:0;left:0;z-index:45;pointer-events:none;
  width:64px;height:64px;margin:-32px 0 0 -32px;
  will-change:transform,opacity;
}
.plane svg{display:block;width:100%;height:100%;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.55))}
/* Navy outline so the white fuselage still reads once the sky goes bright */
.plane__body{fill:#FDFDFD;stroke:rgba(34,60,89,.75);stroke-width:2.5}
.plane__shade{fill:rgba(14,27,42,.28)}
.plane__burn{fill:var(--accent-deep);opacity:.9}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--aqua);color:#0E1B2A;padding:13px 22px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
}
.skip:focus{left:10px;top:10px}
.daylight-foot{position:relative;z-index:10;background:#FDFDFD}

/* ── Nav ────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(14,27,42,.72),rgba(14,27,42,0));
  border-bottom:1px solid transparent;transition:border-color .4s,background .4s;
}
.nav.is-stuck{border-bottom-color:var(--line);background:rgba(14,27,42,.78)}
/* .nav__links a (0,1,1) outranks .btn--primary (0,1,0), so the CTA needs
   its colours restated here or it inherits link grey on an aqua fill. */
.nav__links a.btn--primary{color:#0E1B2A}
.nav__links a.btn--ghost{color:var(--paper)}
.nav.is-light{background:rgba(253,253,253,.82);border-bottom-color:rgba(34,60,89,.18)}
.nav.is-light .brand{color:#223C59}
.nav.is-light .brand__mark path{fill:#0E6E9E}
.nav.is-light .nav__links a{color:rgba(34,60,89,.78)}
.nav.is-light .nav__links a:hover{color:#0E6E9E}
.nav.is-light .nav__links a.btn--primary{background:#54CEFE;color:#0E1B2A}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--paper)}
.brand__mark{width:22px;height:22px;flex:none}
.brand__mark path{fill:var(--accent)}
.brand__name{
  font-family:var(--font-mono);font-weight:600;font-size:15px;
  letter-spacing:.20em;text-transform:uppercase;
}
.nav__links{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px)}
.nav__links a{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper-dim);text-decoration:none;transition:color .25s;
}
.nav__links a:hover{color:var(--accent)}
@media(max-width:820px){.nav__links a:not(.btn){display:none}}

/* ── Buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:14px 24px;border-radius:2px;border:1px solid transparent;
  cursor:pointer;text-align:center;
  transition:transform .3s cubic-bezier(.2,.9,.3,1),box-shadow .3s,background .3s,color .3s;
}
@media(max-width:560px){
  /* "Let's talk about your hiring needs" is 34 uppercase tracked characters —
     it does not fit a phone unless the button owns the row. */
  .signup .btn,.hero__actions .btn{width:100%;justify-content:center}
  .nav__links a.btn{padding:11px 14px;font-size:11px;letter-spacing:.07em}
  .brand__name{font-size:13px;letter-spacing:.13em}
}
.btn--primary{
  background:var(--accent);color:#0E1B2A;
  box-shadow:0 0 0 rgba(84,206,254,0),0 10px 30px rgba(84,206,254,.22);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(84,206,254,.45),0 14px 36px rgba(84,206,254,.3)}
.btn--ghost{border-color:rgba(223,237,244,.28);color:var(--paper)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn__arrow{transition:transform .3s cubic-bezier(.2,.9,.3,1)}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* ── Layout primitives ──────────────────────────────────────── */
.wrap{position:relative;z-index:10}
section{position:relative;padding:clamp(96px,13vh,170px) var(--pad)}
.inner{max-width:1180px;margin:0 auto}
.eyebrow{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:12px;margin-bottom:26px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--accent);opacity:.7}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
p{text-wrap:pretty}
/* Copy is written one sentence per paragraph; keep the beats tight so they
   read as line breaks rather than as separate blocks. */
.lede+.lede{margin-top:.55em}
.card p+p,.step__body p+p{margin-top:.6em}
h1{font-size:clamp(46px,8.2vw,116px)}
h2{font-size:clamp(34px,5.4vw,74px);margin-bottom:22px}
h3{font-size:clamp(21px,2.1vw,28px);line-height:1.15}
.em{font-style:italic;color:var(--accent)}
.lede{font-size:clamp(17px,1.4vw,21px);color:var(--paper-dim);max-width:62ch;line-height:1.62}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--nav-h) + 40px);padding-bottom:clamp(90px,16vh,180px);
}
.hero h1{max-width:15ch;margin-bottom:30px}
.hero .lede{max-width:56ch;margin-bottom:42px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:64px}

.trustbar{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,40px);
  padding-top:28px;border-top:1px solid var(--line)}
.trustbar__label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper-faint);max-width:22ch;line-height:1.5;
}
.trustbar__logos{display:flex;flex-wrap:wrap;gap:clamp(18px,2.6vw,34px);align-items:center}
.trustbar__logos span{
  font-family:var(--font-display);font-size:clamp(17px,1.7vw,23px);
  color:var(--paper);opacity:.42;transition:opacity .3s;letter-spacing:.01em;
}
.trustbar__logos span:hover{opacity:.9}

/* approach lighting */
.runway{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;gap:9px;align-items:flex-end}
.runway i{
  width:5px;height:5px;border-radius:50%;background:var(--accent);
  opacity:.18;animation:approach 1.9s linear infinite;
}
@keyframes approach{0%,72%{opacity:.14;box-shadow:none}
  80%{opacity:1;box-shadow:0 0 12px 2px rgba(84,206,254,.75)}100%{opacity:.14}}

/* ── Cards / grids ──────────────────────────────────────────── */
.grid{display:grid;gap:clamp(14px,1.6vw,22px)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.g-3,.g-2{grid-template-columns:1fr}}

.card{
  position:relative;padding:clamp(26px,3vw,38px);
  background:rgba(34,60,89,.62);border:1px solid var(--line);border-radius:3px;
  transition:border-color .4s,background .4s,transform .4s cubic-bezier(.2,.9,.3,1);
}
.card:hover{border-color:rgba(84,206,254,.42);background:rgba(34,60,89,.78);transform:translateY(-4px)}
.card p{color:var(--paper-dim);font-size:15.5px}
.card h3{margin-bottom:12px}
.card__stat{
  font-family:var(--font-display);font-size:clamp(50px,6vw,84px);line-height:.94;
  color:var(--accent);margin-bottom:14px;letter-spacing:-.02em;
}
.card__tag{
  position:absolute;top:16px;right:18px;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.16em;color:var(--paper-faint);
}

/* steps */
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px);
  padding:clamp(26px,3.4vw,42px) 0;border-top:1px solid var(--line);align-items:start}
.step:last-child{border-bottom:1px solid var(--line)}
.step__no{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--accent);
  padding-top:8px;min-width:52px;
}
.step__body{max-width:64ch}
.step__body h3{margin-bottom:10px}
.step__body p{color:var(--paper-dim)}
.step__when{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-faint);margin-top:12px;
}

/* stats band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;overflow:hidden}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:rgba(16,30,46,.78);padding:clamp(26px,3vw,40px) clamp(18px,2vw,28px)}
.stat__n{font-family:var(--font-display);font-size:clamp(38px,4.6vw,62px);line-height:1;color:var(--paper)}
.stat__n small{font-size:.5em;color:var(--accent);margin-left:2px}
.stat__l{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-faint);margin-top:12px;line-height:1.5}

/* regions */
.regions{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.region{background:rgba(16,30,46,.78);padding:26px;transition:background .35s}
.region:hover{background:rgba(84,206,254,.07)}
.region__name{font-family:var(--font-display);font-size:26px;margin-bottom:6px}
.region__meta{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--paper-faint)}
.region__meta b{color:var(--aqua);font-weight:500}

/* quote */
.quote{max-width:940px;margin:0 auto;text-align:center}
.quote blockquote{
  font-family:var(--font-display);font-size:clamp(26px,3.6vw,48px);line-height:1.18;
  letter-spacing:-.01em;margin-bottom:30px;
}
.quote figcaption{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper-faint);line-height:1.9}
.quote figcaption b{color:var(--paper);font-weight:500}

/* models */
.model{display:flex;flex-direction:column;height:100%}
.model--feature{border-color:rgba(84,206,254,.45);background:rgba(84,206,254,.10)}
.model__price{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  color:var(--accent);margin-bottom:18px;text-transform:uppercase}
.model ul{list-style:none;margin:20px 0 26px;display:grid;gap:11px}
.model li{position:relative;padding-left:22px;font-size:15px;color:var(--paper-dim)}
.model li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:1px;background:var(--accent)}
.model .btn{margin-top:auto;justify-content:center}

/* faq */
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;
  font-family:var(--font-display);font-size:clamp(19px,2vw,26px);transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:22px;color:var(--accent);transition:transform .3s;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 clamp(20px,8vw,120px) 28px 0;color:var(--paper-dim);max-width:75ch}
.faq details ul{list-style:none;padding:0 clamp(20px,8vw,120px) 28px 0;margin:-14px 0 0;max-width:75ch;display:grid;gap:11px}
.faq details li{position:relative;padding-left:22px;font-size:15px;line-height:1.55;color:var(--paper-dim)}
.faq details li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:1px;background:var(--accent)}
.faq details li strong{color:var(--paper)}

/* final CTA */
.cta{text-align:center;padding-top:clamp(110px,16vh,190px);padding-bottom:clamp(110px,16vh,190px)}
.cta .eyebrow{justify-content:center}
.cta h2{max-width:16ch;margin-inline:auto}
.cta .lede{margin:0 auto 40px}
.signup{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:560px;margin:0 auto 18px}
.signup input{
  flex:1 1 280px;padding:15px 18px;border-radius:2px;
  background:rgba(14,27,42,.55);border:1px solid rgba(223,237,244,.24);
  color:var(--paper);font-family:var(--font-mono);font-size:13.5px;letter-spacing:.03em;
  transition:border-color .3s,background .3s;
}
.signup input::placeholder{color:var(--paper-faint)}
.signup input:focus{outline:none;border-color:var(--accent);background:rgba(14,27,42,.82)}
.microcopy{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper-faint)}

.apply{max-width:640px;margin:0 auto 20px;display:grid;gap:14px;text-align:left}
.apply__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.apply__row{grid-template-columns:1fr}}
.field{display:grid;gap:7px}
.field__label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-faint);
}
.field input,.field select{
  width:100%;padding:14px 16px;border-radius:2px;
  background:rgba(14,27,42,.55);border:1px solid rgba(223,237,244,.24);
  color:var(--paper);font-family:var(--font-mono);font-size:13.5px;
  transition:border-color .3s,background .3s;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);background:rgba(14,27,42,.82)}
.field input::placeholder{color:var(--paper-faint)}
.apply .btn{justify-content:center;margin-top:4px}
[data-tone="light"] .field input,[data-tone="light"] .field select{
  background:rgba(253,253,253,.8);border-color:rgba(34,60,89,.26);color:var(--navy);
}
[data-tone="light"] .field input:focus,[data-tone="light"] .field select:focus{border-color:var(--accent);background:#FDFDFD}
[data-tone="light"] .field input::placeholder{color:rgba(34,60,89,.74)}

.switch{padding-top:0}
.switch__box{
  display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between;
  padding:clamp(28px,3.6vw,44px);border:1px solid rgba(84,206,254,.42);border-radius:3px;
  background:rgba(14,27,42,.70);
}
.switch__box>div{max-width:56ch}
.switch__kicker{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px;
}
.switch__title{font-size:clamp(26px,3vw,40px);margin-bottom:10px}
.switch__body{color:var(--paper-dim);font-size:15.5px}
.switch__box .btn{flex:none}

/* footer */
footer{padding:56px var(--pad);border-top:1px solid var(--line);position:relative;z-index:10}
.foot{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;
  justify-content:space-between;align-items:center}
.foot p,.foot a{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper-faint);text-decoration:none}
.foot a:hover{color:var(--accent)}
.foot__links{display:flex;gap:24px;flex-wrap:wrap}

/* Opaque, so it scrolls over the sky as a hard horizon line. A fixed
   crossfade cannot hand over between two adjacent full-height sections:
   during the fade both share the viewport and one must be unreadable. */
.daylight{
  position:relative;z-index:10;
  background:linear-gradient(180deg,#DFEDF4 0%,#DFEDF4 26%,#F4FAFD 68%,#FDFDFD 100%);
  border-top:1px solid rgba(84,206,254,.55);
  box-shadow:0 -22px 70px rgba(84,206,254,.22);
}

/* ── Light tone ──────────────────────────────────────────────
   The sky finishes bright, so everything past the flight zone sits
   on daylight and has to flip to ink. Aqua fails contrast on a pale
   background (1.5:1), so accents drop to a deeper shade of it. */
[data-tone="light"]{
  --paper:var(--navy);
  --paper-dim:rgba(34,60,89,.74);
  --paper-faint:rgba(34,60,89,.74);
  --accent:#0E6E9E;                 /* aqua, darkened to 4.7:1 on alice-blue */
  --line:rgba(34,60,89,.20);
  color:var(--navy);
}
[data-tone="light"] .card{background:rgba(253,253,253,.82);border-color:rgba(34,60,89,.16)}
[data-tone="light"] .card:hover{background:rgba(253,253,253,.95);border-color:rgba(14,110,158,.5)}
[data-tone="light"] .model--feature{background:rgba(84,206,254,.07);border-color:#0E6E9E}
[data-tone="light"] .model--feature .card__tag{color:#0E6E9E}
[data-tone="light"] .btn--ghost{border-color:rgba(34,60,89,.34);color:var(--navy)}
[data-tone="light"] .btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
[data-tone="light"] .btn--primary{
  background:var(--aqua);color:#0E1B2A;
  box-shadow:0 10px 30px rgba(34,60,89,.18);
}
[data-tone="light"] .btn--primary:hover{box-shadow:0 0 30px rgba(84,206,254,.6),0 14px 34px rgba(34,60,89,.22)}
[data-tone="light"] .signup input{
  background:rgba(253,253,253,.8);border-color:rgba(34,60,89,.26);color:var(--navy);
}
[data-tone="light"] .signup input:focus{border-color:var(--accent);background:#FDFDFD}
[data-tone="light"] .signup input::placeholder{color:rgba(34,60,89,.74)}

/* reveal — gated on .js so the page is fully readable without scripts */
.js [data-reveal]{opacity:0;transform:translateY(26px)}
@media(prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1!important;transform:none!important}
  .star,.runway i{animation:none}
  html{scroll-behavior:auto}
}