/* ============================================================
   ALTURAX VISUALS — design system (R1 foundation)
   Tokens extracted from the live site's CSS — see rebuild/DESIGN-DNA.md
   ============================================================ */

/* ---------- fonts (self-hosted) ---------- */
@font-face{
  font-family:'Bebas Neue';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/bebas-neue-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2500,U+25B8;
}
@font-face{
  font-family:'Bebas Neue';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/bebas-neue-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA;
}
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/outfit-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2500,U+25B8;
}
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA;
}

/* ---------- tokens (extracted from live CSS) ---------- */
:root{
  /* grounds — three-step dark ladder */
  --bg-base:#05050A;
  --bg-panel:#0B0B12;
  --bg-footer:#030308;
  --bg-hover-grad:linear-gradient(225deg,#0A1B24 0%,#0B0B12 23%);

  /* the cyan system */
  --cyan:#00D4FF;
  --cyan-deep:#00B3DE;
  --cyan-30:#00D4FF4D;
  --cyan-35:#00D4FF59;
  --cyan-stroke:#00D9FF;

  /* text ramp — brightened per approved accessibility deviation:
     readable text >= --ink-65; --ink-22 is DECORATIVE ONLY */
  --text:#FFFFFF;
  --text-near:#F8F8F8;
  --ink-80:#EDEDF3CC;   /* body text (brightened from live #EDEDF373) */
  --ink-65:#EDEDF3A6;   /* secondary readable */
  --ink-45:#EDEDF373;   /* captions/large-text minimum */
  --ink-22:#EDEDF338;   /* whisper tier — ornaments, ticker, micro-labels only */

  /* structure */
  --border:#302F35;
  --hairline:#FFFFFF0F;

  /* buttons */
  --btn-ink:#121212;
  --shadow-pop:2px 3px 0 0 rgba(255,255,255,.61);

  /* effects */
  --grad-blue:linear-gradient(to right,#00D4FF,#0066FF);
  --glow-radial:radial-gradient(at center,#0050FF57 0%,transparent 60%);

  /* type */
  --display:'Bebas Neue',Impact,sans-serif;
  --body-font:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* layout */
  --container:1320px;
  --section-pad:clamp(64px,9vw,120px);
  --header-h:72px;
}

/* ---------- reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg-base);color:var(--ink-80);
  font-family:var(--body-font);font-size:16px;font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video{max-width:100%;height:auto}
a{color:var(--cyan);text-decoration:none}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:1px}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
section{padding:var(--section-pad) 0}

/* skip link */
.skip-link{
  position:absolute;left:16px;top:-48px;z-index:200;background:var(--cyan);color:var(--btn-ink);
  font:600 13px/1 var(--body-font);text-transform:uppercase;letter-spacing:.08em;
  padding:12px 18px;transition:top .2s;
}
.skip-link:focus{top:12px}

/* ---------- typography system ---------- */
.display{
  font-family:var(--display);font-weight:600;color:var(--text);
  text-transform:uppercase;line-height:1.02;margin:0 0 .35em;
}
h1.display,.h1{font-size:clamp(70px,11vw,166px);letter-spacing:6.2px;line-height:.96}
h2.display,.h2{font-size:clamp(42px,6vw,70px);letter-spacing:4.8px}
.h2-tight{letter-spacing:.8px}
h3.display,.h3{font-size:clamp(22px,2.4vw,28px);letter-spacing:1px}
.card-title{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:1px;color:var(--text);text-transform:uppercase;margin:0 0 10px}

/* the stroke word — THE signature */
.stroke{
  color:transparent;
  -webkit-text-stroke:.5px rgba(255,255,255,.6);
  paint-order:stroke;
}
.stroke-cyan{color:transparent;-webkit-text-stroke:.5px var(--cyan-stroke)}
@supports not (-webkit-text-stroke:1px black){
  .stroke{color:var(--ink-45)}
  .stroke-cyan{color:var(--cyan-deep)}
}

/* eyebrow ritual */
.eyebrow{
  font:600 13px/1.2 var(--body-font);text-transform:uppercase;letter-spacing:.14em;
  color:var(--cyan);margin:0 0 18px;
}
/* ─── kicker ornament */
.kicker{
  font:600 14px/1.4 var(--body-font);text-transform:uppercase;letter-spacing:.18em;
  color:var(--cyan);text-align:center;margin:0 0 22px;
}
/* micro-label — decorative tier */
.micro{font:500 12px/1.4 var(--body-font);text-transform:uppercase;letter-spacing:.22em;color:var(--ink-22)}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--ink-65);max-width:62ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--body-font);text-transform:uppercase;
  cursor:pointer;border:1px solid transparent;transition:background .25s,color .25s,box-shadow .25s,border-color .25s;
  text-align:center;
}
.btn-primary{
  background:var(--cyan);color:var(--btn-ink);
  font-size:14px;font-weight:500;letter-spacing:.8px;padding:16px 34px;
}
.btn-primary:hover,.btn-primary:focus-visible{background:#fff;color:#000;box-shadow:var(--shadow-pop)}
.btn-ghost{
  background:transparent;color:var(--cyan);border-color:var(--cyan);
  font-size:15px;font-weight:400;letter-spacing:.8px;padding:15px 32px;
}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--cyan);color:var(--btn-ink)}
.btn-nav{font-size:13px;padding:10px 20px}
.text-link{font:600 13px/1 var(--body-font);text-transform:uppercase;letter-spacing:.08em;color:var(--cyan-deep)}
.text-link:hover{color:var(--cyan)}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(5,5,10,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline);
}
.header-inner{
  max-width:var(--container);margin:0 auto;padding:0 24px;height:var(--header-h);
  display:flex;align-items:center;gap:28px;
}
.brand{display:flex;align-items:center;gap:12px;position:relative;flex:none}
.brand-logo{width:40px;height:auto;position:relative;z-index:1}
.brand-arc{
  position:absolute;left:-8px;top:50%;translate:0 -50%;
  width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(0,200,255,.25);border-top-color:var(--cyan-stroke);
  box-shadow:0 0 12px rgba(0,212,255,.18) inset;
  animation:arcSpin 9s linear infinite;
}
@keyframes arcSpin{to{transform:rotate(360deg)}}
.brand-name{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:2px;color:var(--text);text-transform:uppercase}
.brand-name-thin{color:var(--ink-45)}
.main-nav{margin-left:auto}
.main-nav ul{display:flex;gap:30px}
.main-nav a{
  font:500 13px/1 var(--body-font);text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-65);padding:8px 2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.main-nav a:hover,.main-nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--cyan)}
.header-actions{display:flex;align-items:center;gap:18px}
.header-phone{
  display:flex;align-items:center;gap:8px;
  font:500 13px/1 var(--body-font);letter-spacing:.06em;color:var(--ink-65);transition:color .2s;
}
.header-phone:hover{color:var(--cyan)}
.nav-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);margin:5px 0;transition:transform .25s,opacity .25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile nav */
.mobile-nav{
  position:fixed;inset:var(--header-h) 0 0 0;background:var(--bg-base);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:40px 24px calc(24px + env(safe-area-inset-bottom));z-index:99;overflow-y:auto;
}
.mobile-nav ul{display:flex;flex-direction:column;gap:4px}
.mobile-nav a{
  display:block;font-family:var(--display);font-weight:600;font-size:44px;letter-spacing:2px;
  text-transform:uppercase;color:var(--text);padding:10px 0;border-bottom:1px solid var(--hairline);
}
.mobile-nav a:hover{color:var(--cyan)}
.mobile-nav .mobile-cta{color:var(--cyan)}
.mobile-phone{
  display:block;text-align:center;font:500 18px/1 var(--body-font);letter-spacing:.04em;
  color:var(--btn-ink);background:var(--cyan);padding:18px;margin-top:24px;
}
body.nav-open{overflow:hidden}

/* ---------- ticker ---------- */
.ticker{
  overflow:hidden;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  background:var(--bg-panel);padding:16px 0;
}
.ticker-track{display:flex;width:max-content;animation:tickerScroll 22s linear infinite}
.ticker-group{display:flex}
.ticker-item{
  font:500 12px/1 var(--body-font);text-transform:uppercase;letter-spacing:.25em;
  color:var(--ink-22);white-space:nowrap;padding:0 28px;position:relative;
}
.ticker-item::before{content:"▸";color:var(--cyan);position:absolute;left:-4px;font-size:10px;top:1px}
@keyframes tickerScroll{to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* ---------- radar / HQ card ---------- */
.hq-card{
  display:flex;align-items:center;gap:26px;background:var(--bg-panel);
  border:1px solid var(--border);padding:28px 32px;max-width:420px;
}
.hq-radar{position:relative;width:64px;height:64px;flex:none}
.hq-ring{
  position:absolute;inset:6px;border-radius:50%;
  border:1px solid rgba(0,212,255,.5);opacity:0;
  animation:radarPing 2.4s ease-out infinite;
}
.hq-ring.r2{animation-delay:.8s}
.hq-ring.r3{animation-delay:1.6s}
@keyframes radarPing{0%{transform:scale(.2);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.hq-dot{
  position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--cyan);animation:dotBreath 2.4s ease-in-out infinite;
}
@keyframes dotBreath{
  0%,100%{box-shadow:0 0 10px rgba(0,212,255,.9),0 0 20px rgba(0,212,255,.4)}
  50%{box-shadow:0 0 16px rgba(0,212,255,.9),0 0 34px rgba(0,212,255,.5)}
}
.hq-label{font:600 13px/1.2 var(--body-font);text-transform:uppercase;letter-spacing:.14em;color:var(--cyan);margin:0 0 4px}
.hq-city{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:1px;color:var(--text);text-transform:uppercase;margin:0}
.hq-sub{font:400 12px/1.4 var(--body-font);color:var(--ink-45);margin:4px 0 0}

/* ---------- numbered cards ---------- */
.card-grid{display:grid;gap:1px;background:var(--border);border:1px solid var(--border)}
@media(min-width:700px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.card-grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.num-card{
  display:block;background:var(--bg-base);padding:34px 30px 30px;position:relative;
  transition:background .3s;
}
a.num-card:hover,a.num-card:focus-visible{background:var(--bg-hover-grad)}
.num-card .num{font:600 13px/1 var(--body-font);letter-spacing:.08em;color:var(--cyan-30);display:block;margin-bottom:16px}
.num-card p{font-size:14.5px;color:var(--ink-65);margin:0 0 20px;line-height:1.6}
.num-card .text-link::after{content:" →"}

/* market chips */
.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  font:500 12.5px/1 var(--body-font);text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-65);border:1px solid var(--border);padding:9px 16px;white-space:nowrap;
}
.chip-featured{border-color:var(--cyan-35);color:var(--cyan)}

/* stat tiles */
.stat-row{display:grid;gap:1px;background:var(--border);border:1px solid var(--border)}
@media(min-width:700px){.stat-row{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--bg-panel);padding:30px 26px}
.stat-num{font-family:var(--display);font-weight:600;font-size:clamp(38px,4.5vw,56px);color:var(--text);line-height:1;letter-spacing:1px}
.stat-num .unit{color:var(--cyan)}
.stat-label{font-size:14px;color:var(--ink-65);margin:10px 0 0;line-height:1.5}
.stat-source{font:400 11.5px/1.4 var(--body-font);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-45);margin:8px 0 0}

/* ---------- dividers & glows ---------- */
.grad-line{height:1px;border:0;background:var(--grad-blue);margin:0}
.hairline{height:1px;border:0;background:var(--hairline);margin:0}
.glow-section{position:relative}
.glow-section::before{
  content:"";position:absolute;inset:0;background:var(--glow-radial);pointer-events:none;
}
.glow-section>*{position:relative}

/* ---------- FAQ (native details) ---------- */
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 4px;font:500 17px/1.4 var(--body-font);color:var(--text);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--display);font-size:26px;color:var(--cyan);flex:none;
  transition:transform .25s;line-height:1;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-a{padding:0 4px 24px;color:var(--ink-65);max-width:70ch}

/* ---------- forms ---------- */
.form-row{margin-bottom:18px}
.form-label{display:block;font:600 12px/1.4 var(--body-font);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-65);margin-bottom:8px}
.form-input,.form-select,.form-textarea{
  width:100%;background:var(--bg-panel);border:1px solid var(--hairline);color:var(--text);
  font:300 15px/1.5 var(--body-font);padding:14px 16px;transition:border-color .2s;
  border-radius:0;-webkit-appearance:none;appearance:none;
}
.form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2300D4FF' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--cyan);outline:none}
.form-input::placeholder,.form-textarea::placeholder{color:var(--ink-45)}
.form-note{font-size:12.5px;color:var(--ink-45)}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--bg-panel);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  text-align:center;position:relative;overflow:hidden;
}
.cta-band::before{content:"";position:absolute;inset:0;background:var(--glow-radial)}
.cta-band>.container{position:relative}
.cta-band .eyebrow{justify-content:center}
.cta-line{color:var(--ink-65);max-width:52ch;margin:0 auto 30px}

/* ---------- footer ---------- */
.site-footer{background:var(--bg-footer);border-top:1px solid var(--hairline);padding:70px 0 0}
.footer-grid{
  max-width:var(--container);margin:0 auto;padding:0 24px 50px;
  display:grid;gap:44px;grid-template-columns:1fr;
}
@media(min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.footer-tagline{font-size:14px;color:var(--ink-65);max-width:30ch;margin:16px 0 12px}
.footer-credential{font:600 11.5px/1.4 var(--body-font);text-transform:uppercase;letter-spacing:.14em;color:var(--cyan)}
.footer-heading{font:600 13px/1.2 var(--body-font);text-transform:uppercase;letter-spacing:.14em;color:var(--cyan);margin:0 0 18px}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:14px;color:var(--ink-65);transition:color .2s}
.footer-col a:hover{color:var(--text)}
.footer-secondary a{color:var(--ink-45)}
.footer-contact li{font-size:14px;color:var(--ink-65)}
.footer-travel{font-size:12.5px;color:var(--ink-45);margin-top:4px}
.footer-bar{
  border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  max-width:var(--container);margin:0 auto;padding:20px 24px;
}
.footer-bar p{margin:0;font-size:12.5px;color:var(--ink-45)}

/* ---------- helpers ---------- */
.section-head{margin-bottom:44px}
.center{text-align:center}
main{padding-top:var(--header-h)}

/* ---------- responsive ---------- */
@media(max-width:1023px){
  .main-nav{display:none}
  .header-phone span{display:none}
  .header-phone{padding:14px;margin:-14px 0}  /* 44px tap target around the icon */
  .nav-toggle{display:block;padding:14px 10px;margin:-10px 0}
  .btn-nav{display:none}
}
@media(min-width:1024px){
  .mobile-nav{display:none !important}
}
@media(max-width:767px){
  h1.display,.h1{letter-spacing:3px}
  h2.display,.h2{letter-spacing:2.4px}
  .hq-card{flex-direction:row;padding:22px}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-track{animation:none;transform:none}
  .hq-ring{animation:none;opacity:.35;transform:scale(1)}
  .hq-dot{animation:none;box-shadow:0 0 10px rgba(0,212,255,.9)}
  .brand-arc{animation:none}
  *{transition-duration:.01ms !important}
}

/* ---------- breadcrumbs (R2) ---------- */
.breadcrumbs{padding:18px 0 0}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:6px;max-width:var(--container);margin:0 auto;padding:0 24px;list-style:none}
.breadcrumbs li{font:500 12px/1.4 var(--body-font);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-45)}
.breadcrumbs li:not(:last-child)::after{content:"›";margin-left:6px;color:var(--ink-22)}
.breadcrumbs a{color:var(--ink-65)}
.breadcrumbs a:hover{color:var(--cyan)}
.breadcrumbs [aria-current]{color:var(--cyan-deep)}

/* two-column split (R2 sections) */
.split{display:grid;gap:44px}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;align-items:start}}
.deliv-list li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--hairline);font-size:15px;color:var(--ink-80)}
.deliv-list li::before{content:"▸";color:var(--cyan);flex:none;font-size:12px;padding-top:3px}
/* package tier cards */
.tier{background:var(--bg-panel);border:1px solid var(--border);padding:34px 30px;display:flex;flex-direction:column;gap:14px}
.tier-name{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:1.2px;color:var(--text);text-transform:uppercase;margin:0}
.tier-tag{font:600 11.5px/1.3 var(--body-font);text-transform:uppercase;letter-spacing:.14em;color:var(--cyan)}
.tier p{font-size:14.5px;color:var(--ink-65);margin:0}
.tier .btn{margin-top:auto;align-self:flex-start}
/* dev placeholder marker — visible in preview, flagged by build */
.owner-todo{
  display:inline-block;font:600 11px/1.4 var(--body-font);letter-spacing:.06em;
  color:#FFC94D;border:1px dashed #FFC94D66;padding:3px 8px;text-transform:uppercase;
}

/* R2 page blocks */
.hero-sec{padding-top:clamp(56px,7vw,96px)}
.btn-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.deliv-name{color:var(--text);font-weight:600;text-transform:uppercase;font-size:13.5px;letter-spacing:.06em}
.deliv-grid{display:grid;gap:0 44px}
@media(min-width:820px){.deliv-grid{grid-template-columns:1fr 1fr}}
.tier-grid{display:grid;gap:20px;margin-top:8px}
@media(min-width:920px){.tier-grid{grid-template-columns:repeat(3,1fr)}}
.builtfor{background:var(--bg-panel);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:clamp(44px,6vw,70px) 0}
.cta-contacts{margin:22px 0 0;font-size:14px;color:var(--ink-65)}
.cta-contacts a{color:var(--ink-65)}
.cta-contacts a:hover{color:var(--cyan)}
.positioning-note{font-size:13.5px;color:var(--ink-45);max-width:60ch;margin:14px auto 0}
.fpv-band{border-top:1px solid var(--cyan-35);border-bottom:1px solid var(--cyan-35);background:var(--bg-panel);position:relative;overflow:hidden}
.fpv-band::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(0,212,255,.08),transparent 55%)}
.micro-line{font:600 13px/1.6 var(--body-font);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-deep)}
.founder-line{font-size:13px;color:var(--ink-45);border-left:2px solid var(--cyan-35);padding-left:14px;max-width:52ch}