/* ============================================================
   Skytech website UI kit — layout & component styles
   Builds on colors_and_type.css (tokens). Dark-first, aurora.
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--void);
  color:var(--fg-2);
  font-family:var(--font-text);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(101,195,233,0.3);color:var(--fg-1)}

/* focus */
:focus-visible{outline:none;box-shadow:var(--glow-focus);border-radius:var(--r-sm)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:860px}
.section{position:relative;padding:var(--space-9) 0}
.section-sm{padding:var(--space-8) 0}
.center{text-align:center}
.stack{display:flex;flex-direction:column}
.eyebrow-line{display:inline-flex;align-items:center;gap:12px;margin-bottom:18px}
.eyebrow-line::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--aurora)}

/* ---------- the scroll sky ---------- */
.sky-root{position:fixed;inset:0;z-index:-2;background:linear-gradient(180deg,
    #010206 0%, #02040b 16%, #04060f 34%, #060c1a 56%, #081424 78%, #0a1c30 100%);}
.sky-stars{position:absolute;inset:0;z-index:-2;transform:translateZ(0);will-change:transform}
/* Aurora: a luminous band that blooms ABOVE the ridgeline — the highlight.
   Glow centres sit just above the mountain peaks (~66% from top) and rise
   into the sky; the dark ridge silhouette occludes the lower half. */
.sky-aurora{position:fixed;left:-12%;right:-12%;bottom:0;height:92vh;z-index:-2;
  pointer-events:none;filter:blur(64px);opacity:0.0;transition:opacity 1.4s ease;
  background:
    radial-gradient(46% 56% at 17% 70%, rgba(127,94,199,0.42), transparent 72%),
    radial-gradient(52% 62% at 39% 65%, rgba(58,131,245,0.50), transparent 72%),
    radial-gradient(56% 66% at 62% 63%, rgba(101,195,233,0.58), transparent 72%),
    radial-gradient(50% 60% at 85% 67%, rgba(122,232,171,0.50), transparent 72%);}
.sky-aurora.lit{opacity:0.92}
.sky-ridge{position:fixed;left:0;right:0;bottom:0;z-index:-1;height:34vh;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity 1s ease}
.sky-ridge.lit{opacity:1}
.sky-ridge svg{width:100%;height:100%}
/* Decorative element resting ON the ridge crest (preview tweak). Its bottom
   edge sits at the peak line and the shape rises into the sky. */
.sky-decor{position:fixed;left:0;right:0;bottom:21vh;z-index:-1;height:28vh;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity 1.1s ease}
.sky-decor.lit{opacity:0.95}
.sky-decor-art{height:100%;max-width:94%;background-repeat:no-repeat;
  background-position:bottom center;background-size:contain;
  filter:drop-shadow(0 0 26px rgba(101,195,233,0.4))}
@media (prefers-reduced-motion: reduce){
  .twinkle{animation:none !important}
}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:all .4s cubic-bezier(.22,1,.36,1)}
.nav-inner{display:flex;align-items:center;gap:30px;padding:20px 28px;max-width:1180px;margin:0 auto}
.nav.scrolled{background:rgba(6,9,16,0.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline)}
.nav-logo{height:44px;cursor:pointer}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-link{position:relative;padding:9px 12px;font-size:14.5px;letter-spacing:0.03em;color:var(--fg-2);
  cursor:pointer;border-radius:var(--r-sm);transition:color .3s;white-space:nowrap}
.nav-link:hover{color:var(--fg-1)}
.nav-link.active{color:var(--fg-1)}
.nav-link.active::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  background:var(--aurora);border-radius:2px}
.nav-burger{display:none;margin-left:auto;background:none;border:0;color:var(--fg-1);cursor:pointer}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-text);font-weight:600;
  font-size:14px;letter-spacing:0.02em;cursor:pointer;border:0;border-radius:var(--r-pill);
  padding:10px 20px;transition:all .4s cubic-bezier(.22,1,.36,1);white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--aurora-cta);color:var(--void)}
.btn-primary:hover{box-shadow:var(--bloom-cyan);transform:translateY(-2px)}
.btn-primary:active{transform:scale(.97)}
.btn-solid{background:var(--sky-cyan);color:var(--void)}
.btn-solid:hover{background:var(--sky-cyan-soft);box-shadow:var(--bloom-cyan)}
.btn-ghost{background:transparent;color:var(--fg-1);border:1px solid var(--hairline-2)}
.btn-ghost:hover{border-color:var(--sky-cyan);color:var(--sky-cyan)}
.btn-link{background:none;color:var(--sky-cyan);padding:14px 6px}
.btn-link:hover{color:var(--sky-cyan-soft)}
.btn-lg{padding:12px 24px;font-size:14.5px}

/* ---------- badges / pills ---------- */
.badge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  letter-spacing:0.05em;padding:7px 14px;border-radius:var(--r-pill)}
.badge-soft{background:rgba(101,195,233,0.12);color:var(--sky-cyan);border:1px solid rgba(101,195,233,0.35)}
.badge-mint{background:rgba(122,232,171,0.12);color:var(--glow-mint);border:1px solid rgba(122,232,171,0.35)}
.badge-solid{background:var(--glow-mint);color:var(--void)}
.dot-pill{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--fg-2);
  background:rgba(17,26,43,0.6);border:1px solid var(--hairline);padding:8px 16px;border-radius:var(--r-pill)}
.dot-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--glow-mint);box-shadow:0 0 9px var(--glow-mint)}

/* ---------- cards ---------- */
.card{background:rgba(17,26,43,0.66);border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:28px;backdrop-filter:blur(8px);box-shadow:var(--shadow-md);
  transition:all .45s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
.card:hover{background:rgba(24,36,58,0.62);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card.glow-hover:hover{outline:1px solid rgba(101,195,233,0.6);box-shadow:var(--shadow-lg),var(--bloom-cyan)}
.card-ico{width:46px;height:46px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  background:rgba(101,195,233,0.1);border:1px solid var(--hairline);color:var(--sky-cyan);margin-bottom:18px}
.card h3{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-0.005em;color:var(--fg-1);margin:0 0 10px}
.card p{margin:0;color:var(--fg-2);font-size:14.5px;line-height:1.6}

/* image placeholder — branded plate that marks where real show photography goes */
.imgph{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hairline);
  background:linear-gradient(180deg,var(--void) 0%,#0a1322 52%,var(--midnight) 100%);
  display:flex;align-items:flex-end;min-height:220px}
.imgph .ph-stars{position:absolute;inset:0;opacity:.8;
  background-image:
    radial-gradient(1.3px 1.3px at 16% 18%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 34% 11%,#cfe6ff,transparent),
    radial-gradient(1.4px 1.4px at 52% 22%,#fff,transparent),
    radial-gradient(1px 1px at 70% 13%,#bcd9ff,transparent),
    radial-gradient(1.3px 1.3px at 84% 20%,#fff,transparent),
    radial-gradient(1px 1px at 44% 32%,#fff,transparent)}
.imgph .ph-aurora{position:absolute;left:-10%;right:-10%;bottom:18%;height:46%;filter:blur(34px);opacity:.5;
  background:radial-gradient(44% 120% at 45% 100%,rgba(101,195,233,.55),transparent 70%),
            radial-gradient(40% 120% at 64% 100%,rgba(122,232,171,.4),transparent 72%),
            radial-gradient(38% 120% at 28% 100%,rgba(127,94,199,.4),transparent 72%)}
.imgph .ph-ridge{position:absolute;left:0;right:0;bottom:0;height:54%;
  background-image:url("assets/decor/mountain-ridge.svg");
  background-repeat:no-repeat;background-position:bottom center;background-size:100% auto}
.imgph .ph-label{position:relative;z-index:2;margin:16px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--fg-2);display:inline-flex;align-items:center;gap:8px}
.imgph .ph-note{font-style:normal;text-transform:none;letter-spacing:0;color:var(--fg-4);
  font-size:11px;margin-left:4px}
/* interim brand plate caption (BrandPlate) */
.brand-plate{align-items:stretch}
.brand-plate .bp-caption{position:absolute;z-index:2;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:10px;padding:26px 28px;
  background:linear-gradient(0deg,rgba(2,4,11,0.72) 0%,transparent 100%)}
.brand-plate .bp-kicker{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--sky-cyan)}
.brand-plate .bp-line{font-family:var(--font-display);font-size:21px;line-height:1.25;
  color:var(--fg-1);max-width:24ch;text-wrap:pretty}

/* ---------- stat / spec ---------- */
.stat-num{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,1.4rem+2.4vw,3.2rem);
  letter-spacing:-0.01em;line-height:1;color:var(--fg-1)}
.stat-num .u{color:var(--sky-cyan)}
.stat-lbl{margin-top:10px;font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-3)}

/* ---------- footer ---------- */
.footer{position:relative;z-index:1;border-top:0;
  background:linear-gradient(180deg, transparent 0%, rgba(4,6,13,0.45) 24%, rgba(2,4,9,0.85) 70%, rgba(2,4,9,0.95) 100%);
  padding:var(--space-10) 0 var(--space-6)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer h5{font-family:var(--font-text);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--fg-3);margin:0 0 16px}
.footer a{display:block;color:var(--fg-2);font-size:14px;padding:6px 0;transition:color .3s}
.footer a:hover{color:var(--sky-cyan)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin-top:var(--space-7);padding-top:24px;border-top:1px solid var(--hairline);
  color:var(--fg-3);font-size:13px;flex-wrap:wrap}

/* ---------- forms ---------- */
.field{margin-bottom:18px}
.field label{display:block;font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:9px}
.field input,.field textarea,.field select{width:100%;font-family:var(--font-text);font-size:15px;color:var(--fg-1);
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);padding:14px 15px;
  transition:border-color .3s, box-shadow .3s;outline:none}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-4)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--sky-cyan);box-shadow:var(--glow-focus)}
.field textarea{min-height:130px;resize:vertical}

/* ---------- misc ---------- */
.divider{height:1px;background:var(--hairline);border:0;margin:var(--space-7) 0}
.aurora-rule{height:2px;width:64px;border-radius:2px;background:var(--aurora);border:0;margin:0}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

@keyframes twk{0%,100%{opacity:.25}50%{opacity:1}}
.twinkle{animation:twk 4s ease-in-out infinite;will-change:opacity}

@media (max-width:1024px){
  .nav-links{position:fixed;inset:84px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(6,9,16,0.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--hairline);
    padding:12px 20px 22px;transform:translateY(-160%);transition:transform .4s cubic-bezier(.22,1,.36,1)}
  .nav-links.open{transform:none}
  .nav-link{padding:14px 8px}
  .nav-link.active::after{display:none}
  .nav-burger{display:block}
}

@media (max-width:880px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}