/* ============================================================
   Tatra Digital — landing page styles
   Plain CSS. No build step, no framework.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --night:      #04101a;
  --night-2:    #061924;
  --deep:       #082433;
  --brand:      #0f688b;
  --brand-2:    #1a8cba;
  --brand-3:    #3fc0e6;
  --ice:        #a9dcee;
  --mist:       #eef5f9;
  --mist-2:     #dfeaf1;
  --snow:       #ffffff;
  --sun:        #ffb877;
  --sun-2:      #ff8a6b;
  --ink:        #0b1f2a;
  --ink-2:      #4a6373;

  --ridge-1:    #030c13;
  --ridge-2:    #072031;
  --ridge-3:    #0c3448;
  --ridge-4:    #164e69;
  --snowcap:    #d5ecf7;

  --shell:      1180px;
  --gutter:     clamp(1.15rem, 4vw, 2.5rem);
  --radius:     18px;
  --radius-sm:  12px;

  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22,.68,.28,1);
  --shadow-lg: 0 26px 60px -28px rgba(4,16,26,.55);
  --shadow-card: 0 1px 2px rgba(11,31,42,.05), 0 18px 40px -30px rgba(11,31,42,.45);
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
body{
  margin:0;
  background:var(--night);
  color:var(--mist);
  font-family:var(--font-body);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand-3);outline-offset:3px;border-radius:4px}

.shell{width:min(100% - (var(--gutter) * 2),var(--shell));margin-inline:auto}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* stroke-drawn icons share one style */
.card__icon svg,.contact__list svg,.btn__icon{
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

.skip-link{
  position:absolute;left:1rem;top:-100px;z-index:200;
  background:var(--brand-3);color:var(--night);
  padding:.7rem 1.1rem;border-radius:10px;font-weight:600;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:1rem}

/* Reveal-on-scroll (only armed when JS is present) */
.js .reveal{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:var(--d,0ms);
}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- 3. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.92rem 1.5rem;border-radius:999px;border:1px solid transparent;
  font-weight:600;font-size:.98rem;letter-spacing:.01em;
  cursor:pointer;position:relative;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease);
}
.btn__icon{width:1.1em;height:1.1em;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .btn__icon{transform:translateX(4px)}
.btn--sm{padding:.62rem 1.15rem;font-size:.9rem}
.btn--primary{
  background:linear-gradient(135deg,var(--brand-2),var(--brand));
  color:#fff;
  box-shadow:0 12px 30px -14px rgba(26,140,186,.9);
}
.btn--primary:hover{box-shadow:0 18px 40px -14px rgba(26,140,186,1)}
.btn--ghost{
  border-color:rgba(169,220,238,.3);
  color:var(--ice);
  background:rgba(169,220,238,.05);
}
.btn--ghost:hover{border-color:var(--brand-3);background:rgba(63,192,230,.12)}

/* ---------- 4. Eyebrow / section chrome ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ice);margin-bottom:1.15rem;
}
.eyebrow--dark{color:var(--brand)}
.eyebrow__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--brand-3);
  box-shadow:0 0 0 4px rgba(63,192,230,.16);
}
.eyebrow--dark .eyebrow__dot{background:var(--brand);box-shadow:0 0 0 4px rgba(15,104,139,.14)}

.section{position:relative;padding:clamp(4.5rem,9vw,8rem) 0;isolation:isolate}
.section__head{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section__head--center{margin-inline:auto;text-align:center}
.section__head--center .eyebrow{justify-content:center}
.section__title{font-size:clamp(2rem,1.3rem + 2.6vw,3.15rem);margin-bottom:1rem}
.section__lede{font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);opacity:.82;max-width:42rem}
.section__head--center .section__lede{margin-inline:auto}

.section--light{background:var(--mist);color:var(--ink)}
.section--light .section__lede{color:var(--ink-2);opacity:1}
.section--mist{background:linear-gradient(180deg,var(--mist) 0%,var(--mist-2) 100%);color:var(--ink)}
.section--mist .section__lede{color:var(--ink-2);opacity:1}
.section--dark{background:var(--deep)}
.section--deep{background:linear-gradient(180deg,var(--deep),var(--night-2))}
.section--night{background:var(--night)}

/* Ridge divider that bites into the top of a dark section */
.section__ridge{position:absolute;left:0;width:100%;height:clamp(46px,6vw,90px);display:block}
.section__ridge--top{top:0;fill:var(--mist-2)}
.section__ridge--night{fill:var(--ridge-1)}
.section__ridge path{fill:inherit}

/* Topographic contour wash */
.topo::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-radial-gradient(circle at 8% 112%,transparent 0 44px,rgba(15,104,139,.07) 44px 45px),
    repeating-radial-gradient(circle at 92% -12%,transparent 0 56px,rgba(15,104,139,.055) 56px 57px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
}
.topo--dark::before{
  background:
    repeating-radial-gradient(circle at 8% 112%,transparent 0 44px,rgba(63,192,230,.09) 44px 45px),
    repeating-radial-gradient(circle at 92% -12%,transparent 0 56px,rgba(63,192,230,.07) 56px 57px);
}

/* ---------- 5. Header ---------- */
.scroll-progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:120;pointer-events:none}
.scroll-progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--brand),var(--brand-3));
  box-shadow:0 0 12px rgba(63,192,230,.6);
}
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:110;
  padding:.9rem 0;
  transition:background-color .3s var(--ease),backdrop-filter .3s var(--ease),box-shadow .3s var(--ease),padding .3s var(--ease);
}
.site-header.is-stuck{
  background:rgba(4,16,26,.82);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 rgba(169,220,238,.12),0 18px 40px -30px rgba(0,0,0,.9);
  padding:.55rem 0;
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}

.brand{display:inline-flex;align-items:center;gap:.7rem}
.brand__mark{width:46px;height:auto;aspect-ratio:520.7/214.03;color:var(--brand-3);flex:none;
  filter:drop-shadow(0 2px 10px rgba(63,192,230,.35));transition:transform .4s var(--ease)}
.brand:hover .brand__mark{transform:translateY(-2px) scale(1.04)}
.brand__text{display:flex;flex-direction:column;line-height:1;font-family:var(--font-display)}
.brand__text strong{font-size:1.02rem;font-weight:700;letter-spacing:.22em;color:var(--snow)}
.brand__text span{font-size:.62rem;font-weight:600;letter-spacing:.42em;color:var(--ice);opacity:.75;margin-top:.28rem}

.nav{display:flex;align-items:center;gap:2rem}
.nav__list{display:flex;align-items:center;gap:1.9rem}
.nav__list a{
  font-size:.94rem;font-weight:500;color:rgba(234,243,247,.78);
  position:relative;padding:.35rem 0;transition:color .25s var(--ease);
}
.nav__list a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:linear-gradient(90deg,var(--brand-3),var(--brand));
  transition:width .3s var(--ease);
}
.nav__list a:hover,.nav__list a.is-active{color:var(--snow)}
.nav__list a:hover::after,.nav__list a.is-active::after{width:100%}

.nav-toggle{
  display:none;width:44px;height:44px;border:1px solid rgba(169,220,238,.25);
  border-radius:12px;background:rgba(169,220,238,.06);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav-toggle span{display:block;width:19px;height:1.8px;background:var(--ice);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:clamp(8rem,16vh,11rem) 0 clamp(13rem,30vh,20rem);
  overflow:hidden;isolation:isolate;
}
.hero__scene{position:absolute;inset:0;z-index:-1}
.hero__scene::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:72px;background:var(--ridge-1);
}
.sky{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 70% at 50% 100%,rgba(15,104,139,.34) 0%,transparent 60%),
    linear-gradient(180deg,#02070c 0%,#04121d 34%,#07293b 68%,#0d4460 100%);
}
.stars{
  position:absolute;inset:0 0 34% 0;
  animation:twinkle 7s ease-in-out infinite alternate;
  background-image:radial-gradient(2px 2px at 20.54% 15.52%,rgba(255,255,255,.65),transparent 60%),radial-gradient(2px 2px at 45.57% 7.02%,rgba(255,255,255,.45),transparent 60%),radial-gradient(1.3px 1.3px at 83.26% 49.86%,rgba(255,255,255,.65),transparent 60%),radial-gradient(1.6px 1.6px at 50.14% 59.55%,rgba(255,255,255,.65),transparent 60%),radial-gradient(1.3px 1.3px at 98.83% 40.64%,rgba(255,255,255,.45),transparent 60%),radial-gradient(2px 2px at 5.80% 8.50%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1px 1px at 77.59% 3.02%,rgba(255,255,255,.65),transparent 60%),radial-gradient(1px 1px at 12.11% 61.00%,rgba(255,255,255,.65),transparent 60%),radial-gradient(2px 2px at 38.27% 26.92%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1.3px 1.3px at 48.42% 58.69%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1.3px 1.3px at 64.47% 47.69%,rgba(255,255,255,.95),transparent 60%),radial-gradient(1.3px 1.3px at 93.79% 11.56%,rgba(255,255,255,.65),transparent 60%),radial-gradient(1.3px 1.3px at 9.40% 3.07%,rgba(255,255,255,.45),transparent 60%),radial-gradient(1px 1px at 51.12% 40.49%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1px 1px at 19.25% 43.59%,rgba(255,255,255,.65),transparent 60%),radial-gradient(1.6px 1.6px at 52.01% 70.74%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1.3px 1.3px at 37.60% 47.47%,rgba(255,255,255,.95),transparent 60%),radial-gradient(2px 2px at 42.56% 56.38%,rgba(255,255,255,.95),transparent 60%),radial-gradient(2px 2px at 69.85% 54.77%,rgba(255,255,255,.95),transparent 60%),radial-gradient(1px 1px at 86.29% 2.90%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1.6px 1.6px at 80.44% 37.74%,rgba(255,255,255,.65),transparent 60%),radial-gradient(2px 2px at 5.33% 74.78%,rgba(255,255,255,.65),transparent 60%),radial-gradient(1px 1px at 56.55% 36.58%,rgba(255,255,255,.95),transparent 60%),radial-gradient(1.3px 1.3px at 76.53% 45.21%,rgba(255,255,255,.95),transparent 60%),radial-gradient(1px 1px at 59.79% 5.53%,rgba(255,255,255,.65),transparent 60%),radial-gradient(1px 1px at 77.48% 74.86%,rgba(255,255,255,.95),transparent 60%),radial-gradient(2px 2px at 19.73% 38.15%,rgba(255,255,255,.45),transparent 60%),radial-gradient(1.3px 1.3px at 84.42% 23.51%,rgba(255,255,255,.45),transparent 60%),radial-gradient(1.6px 1.6px at 44.58% 77.53%,rgba(255,255,255,.45),transparent 60%),radial-gradient(2px 2px at 23.38% 32.03%,rgba(255,255,255,.65),transparent 60%),radial-gradient(1px 1px at 15.56% 37.59%,rgba(255,255,255,.95),transparent 60%),radial-gradient(1.6px 1.6px at 48.15% 23.70%,rgba(255,255,255,.45),transparent 60%),radial-gradient(1.3px 1.3px at 9.23% 41.04%,rgba(255,255,255,.95),transparent 60%),radial-gradient(1px 1px at 71.13% 50.32%,rgba(255,255,255,.65),transparent 60%),radial-gradient(1px 1px at 51.07% 76.92%,rgba(255,255,255,.95),transparent 60%),radial-gradient(1.6px 1.6px at 12.00% 4.94%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1.6px 1.6px at 82.23% 39.19%,rgba(255,255,255,.95),transparent 60%),radial-gradient(1px 1px at 61.13% 32.68%,rgba(255,255,255,.65),transparent 60%),radial-gradient(1.6px 1.6px at 73.10% 17.34%,rgba(255,255,255,.65),transparent 60%),radial-gradient(2px 2px at 34.30% 72.04%,rgba(255,255,255,.45),transparent 60%),radial-gradient(2px 2px at 39.05% 28.08%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1px 1px at 94.43% 10.58%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1.6px 1.6px at 85.61% 55.55%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1.3px 1.3px at 87.24% 41.56%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1px 1px at 85.81% 66.98%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1px 1px at 56.53% 29.13%,rgba(255,255,255,.45),transparent 60%),radial-gradient(1.3px 1.3px at 75.31% 9.84%,rgba(255,255,255,.45),transparent 60%),radial-gradient(2px 2px at 83.69% 52.07%,rgba(255,255,255,.65),transparent 60%),radial-gradient(1px 1px at 79.90% 16.53%,rgba(255,255,255,.95),transparent 60%),radial-gradient(1.3px 1.3px at 39.69% 41.05%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1px 1px at 68.16% 63.63%,rgba(255,255,255,.65),transparent 60%),radial-gradient(1px 1px at 11.34% 9.80%,rgba(255,255,255,.65),transparent 60%),radial-gradient(1.3px 1.3px at 22.07% 59.54%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1px 1px at 79.79% 3.70%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1.3px 1.3px at 14.08% 57.55%,rgba(255,255,255,.65),transparent 60%),radial-gradient(1px 1px at 54.16% 66.66%,rgba(255,255,255,.45),transparent 60%),radial-gradient(2px 2px at 55.38% 35.69%,rgba(255,255,255,.65),transparent 60%),radial-gradient(2px 2px at 91.61% 66.84%,rgba(255,255,255,.45),transparent 60%),radial-gradient(1px 1px at 23.45% 74.87%,rgba(255,255,255,.65),transparent 60%),radial-gradient(1px 1px at 44.59% 26.28%,rgba(255,255,255,.95),transparent 60%),radial-gradient(1px 1px at 64.51% 30.37%,rgba(255,255,255,.65),transparent 60%),radial-gradient(1px 1px at 38.69% 57.13%,rgba(255,255,255,.65),transparent 60%),radial-gradient(1.3px 1.3px at 90.70% 55.96%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1px 1px at 97.45% 67.01%,rgba(255,255,255,.45),transparent 60%);background-repeat:no-repeat;
}
.stars--sparse{inset:0;opacity:.5;background-image:radial-gradient(1.8px 1.8px at 94.98% 70.39%,rgba(255,255,255,.85),transparent 60%),radial-gradient(1.8px 1.8px at 54.09% 75.42%,rgba(255,255,255,.85),transparent 60%),radial-gradient(1.8px 1.8px at 18.03% 45.12%,rgba(255,255,255,.85),transparent 60%),radial-gradient(1.4px 1.4px at 23.23% 31.02%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1.4px 1.4px at 43.91% 5.81%,rgba(255,255,255,.4),transparent 60%),radial-gradient(1.4px 1.4px at 84.58% 74.52%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1px 1px at 61.06% 7.88%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1px 1px at 79.10% 17.61%,rgba(255,255,255,.4),transparent 60%),radial-gradient(1.8px 1.8px at 91.97% 64.80%,rgba(255,255,255,.85),transparent 60%),radial-gradient(1.8px 1.8px at 8.34% 46.89%,rgba(255,255,255,.85),transparent 60%),radial-gradient(1.4px 1.4px at 48.61% 75.89%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1px 1px at 56.28% 43.28%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1px 1px at 16.56% 77.25%,rgba(255,255,255,.85),transparent 60%),radial-gradient(1.4px 1.4px at 18.99% 52.78%,rgba(255,255,255,.85),transparent 60%),radial-gradient(1px 1px at 10.65% 68.06%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1.8px 1.8px at 38.06% 18.78%,rgba(255,255,255,.85),transparent 60%),radial-gradient(1.8px 1.8px at 4.17% 21.36%,rgba(255,255,255,.85),transparent 60%),radial-gradient(1.8px 1.8px at 46.67% 33.07%,rgba(255,255,255,.85),transparent 60%),radial-gradient(1px 1px at 20.91% 73.00%,rgba(255,255,255,.4),transparent 60%),radial-gradient(1.4px 1.4px at 18.38% 35.36%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1px 1px at 29.13% 29.01%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1.4px 1.4px at 48.59% 74.38%,rgba(255,255,255,.4),transparent 60%),radial-gradient(1px 1px at 53.57% 9.82%,rgba(255,255,255,.85),transparent 60%),radial-gradient(1.8px 1.8px at 87.15% 71.35%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1.8px 1.8px at 81.90% 43.44%,rgba(255,255,255,.85),transparent 60%),radial-gradient(1px 1px at 95.56% 26.92%,rgba(255,255,255,.85),transparent 60%),radial-gradient(1px 1px at 75.78% 34.40%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1.8px 1.8px at 70.16% 33.00%,rgba(255,255,255,.4),transparent 60%),radial-gradient(1px 1px at 83.47% 14.11%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1px 1px at 57.41% 24.59%,rgba(255,255,255,.85),transparent 60%);background-repeat:no-repeat;}
.sunrise{
  position:absolute;left:0;right:0;bottom:12%;
  width:min(1500px,150vw);aspect-ratio:2.2/1;margin-inline:auto;
  background:
    radial-gradient(ellipse at 50% 100%,rgba(255,184,119,.5) 0%,rgba(255,138,107,.22) 26%,rgba(26,140,186,.12) 48%,transparent 70%);
}
.sunrise::after{
  content:"";position:absolute;left:50%;bottom:6%;width:clamp(90px,11vw,150px);aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,226,190,.95) 0%,rgba(255,184,119,.65) 42%,transparent 70%);
  filter:blur(6px);
  animation:pulse 9s ease-in-out infinite alternate;
}
.aurora{
  position:absolute;inset:-15% -10% 32% -10%;
  background:
    radial-gradient(58% 44% at 22% 34%,rgba(63,192,230,.2),transparent 70%),
    radial-gradient(48% 40% at 76% 20%,rgba(15,104,139,.28),transparent 72%);
  filter:blur(28px);
  animation:drift 22s ease-in-out infinite alternate;
}
.ridge{position:absolute;left:-6%;width:112%;max-width:none;display:block;will-change:transform}
.ridge--4{bottom:20%;height:clamp(120px,22vw,270px)}
.ridge--3{bottom:11%;height:clamp(150px,26vw,320px)}
.ridge--2{bottom:2%;height:clamp(210px,33vw,410px)}
.ridge--1{bottom:0;height:clamp(120px,17vw,230px)}
.fog{
  position:absolute;left:-12%;width:124%;height:clamp(80px,12vw,150px);
  background:linear-gradient(180deg,transparent,rgba(169,220,238,.13) 55%,rgba(169,220,238,.2));
  filter:blur(16px);will-change:transform;
}
.fog--far{bottom:21%}
.fog--mid{bottom:12%}
.fog--near{bottom:3%;background:linear-gradient(180deg,transparent,rgba(169,220,238,.09) 55%,rgba(169,220,238,.16))}

.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(3,12,19,.9) 0%,rgba(3,12,19,.7) 40%,rgba(3,12,19,.3) 66%,transparent 86%);
}
.hero__content{position:relative;z-index:2;max-width:52rem}
.hero__title{font-size:clamp(2.35rem,1.35rem + 4.8vw,5.1rem);margin-bottom:1.4rem}
.grad{
  display:block;
  background:linear-gradient(100deg,var(--brand-3) 0%,var(--ice) 42%,var(--sun) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lede{font-size:clamp(1.05rem,1rem + .45vw,1.3rem);color:rgba(234,243,247,.8);max-width:38rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;
  margin-top:clamp(2.8rem,6vw,4.2rem);padding-top:2rem;
  border-top:1px solid rgba(169,220,238,.16);max-width:44rem;
}
.stat dd{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);
  color:var(--snow);line-height:1;margin:0 0 .35rem;text-shadow:0 2px 18px rgba(3,12,19,.95)}
.stat dt{order:2;font-size:.78rem;line-height:1.4;color:rgba(197,229,242,.82);
  text-shadow:0 1px 14px rgba(3,12,19,.98),0 0 6px rgba(3,12,19,.9)}
.stat{display:flex;flex-direction:column}

.scroll-cue{
  position:absolute;left:50%;bottom:clamp(1.6rem,4vh,2.6rem);transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(169,220,238,.7);
}
.scroll-cue__line{
  width:1px;height:46px;background:linear-gradient(180deg,transparent,var(--brand-3));
  position:relative;overflow:hidden;
}
.scroll-cue__line::after{
  content:"";position:absolute;inset:0;background:var(--snow);
  animation:cue 2.4s var(--ease) infinite;
}

/* ---------- 7. Service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(1rem,2vw,1.5rem)}
.card{
  position:relative;background:var(--snow);border:1px solid rgba(15,104,139,.12);
  border-radius:var(--radius);padding:clamp(1.6rem,2.4vw,2.1rem);
  box-shadow:var(--shadow-card);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-3));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(11,31,42,.6);border-color:rgba(15,104,139,.28)}
.card:hover::before{transform:scaleX(1)}
.card__icon{
  display:grid;place-items:center;width:52px;height:52px;border-radius:14px;
  background:linear-gradient(140deg,rgba(63,192,230,.18),rgba(15,104,139,.12));
  color:var(--brand);margin-bottom:1.25rem;
}
.card__icon svg{width:26px;height:26px}
.card h3{font-size:1.28rem;color:var(--ink);margin-bottom:.6rem}
.card p{color:var(--ink-2);font-size:.98rem}
.card__tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.25rem}
.card__tags li{
  font-size:.74rem;font-weight:500;letter-spacing:.02em;color:var(--brand);
  background:rgba(15,104,139,.08);border-radius:999px;padding:.3rem .7rem;
}

/* ---------- 8. The ascent ---------- */
.ascent{position:relative;padding-top:clamp(90px,14vw,140px)}
.ascent__svg{position:absolute;left:0;top:0;width:100%;height:clamp(90px,14vw,140px);overflow:visible}
.ascent__mass{fill:url(#ascentFill);stroke:none}
.ascent__snow{fill:var(--snow);opacity:.85}
.ascent__track,.ascent__line{fill:none;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-width:2}
.ascent__track{stroke:rgba(15,104,139,.3);stroke-dasharray:5 9}
.ascent__camps{opacity:var(--draw,0);transition:opacity .4s var(--ease)}
.ascent__camps path{fill:none;stroke:rgba(15,104,139,.22);stroke-width:1.5;stroke-dasharray:3 6}
.ascent__camps circle{fill:var(--mist);stroke:var(--brand);stroke-width:2.5}
.ascent__line{stroke:var(--brand);stroke-width:2.5;
  stroke-dasharray:var(--len,1200);stroke-dashoffset:calc(var(--len,1200) * (1 - var(--draw,0)))}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem);position:relative}
.step{
  background:rgba(255,255,255,.72);border:1px solid rgba(15,104,139,.14);
  border-radius:var(--radius);padding:clamp(1.4rem,2.2vw,1.9rem);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow-card)}
.step__no{
  display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.85rem;
  letter-spacing:.12em;color:var(--brand);background:rgba(15,104,139,.1);
  border-radius:999px;padding:.28rem .7rem;margin-bottom:1rem;
}
.step h3{font-size:1.2rem;color:var(--ink);margin-bottom:.5rem}
.step p{color:var(--ink-2);font-size:.95rem}

/* ---------- 9. Engagement plans ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(1rem,2vw,1.5rem)}
.plan{
  position:relative;border:1px solid rgba(169,220,238,.16);border-radius:var(--radius);
  padding:clamp(1.7rem,2.6vw,2.2rem);
  background:linear-gradient(165deg,rgba(169,220,238,.07),rgba(169,220,238,.02));
  transition:transform .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease);
}
.plan:hover{transform:translateY(-6px);border-color:rgba(63,192,230,.42)}
.plan--feature{
  border-color:rgba(63,192,230,.4);
  background:linear-gradient(165deg,rgba(63,192,230,.14),rgba(15,104,139,.08));
  box-shadow:var(--shadow-lg);
}
.plan__flag{
  position:absolute;top:-.75rem;left:clamp(1.7rem,2.6vw,2.2rem);
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;
  border-radius:999px;padding:.3rem .8rem;
}
.plan h3{font-size:1.35rem;color:var(--snow);margin-bottom:.65rem}
.plan > p{color:rgba(234,243,247,.72);font-size:.98rem;margin-bottom:1.3rem}
.plan ul{display:grid;gap:.65rem;border-top:1px solid rgba(169,220,238,.14);padding-top:1.3rem}
.plan ul li{position:relative;padding-left:1.6rem;font-size:.94rem;color:rgba(234,243,247,.82)}
.plan ul li::before{
  content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;
  background:var(--brand-3);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}

/* ---------- 10. Marquee ---------- */
.marquee{
  margin-top:clamp(2rem,4vw,3rem);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__row{display:flex;gap:.75rem;padding-right:.75rem}
.marquee__row li{
  white-space:nowrap;font-family:var(--font-display);font-weight:600;font-size:.92rem;
  color:var(--ice);border:1px solid rgba(169,220,238,.18);border-radius:999px;
  padding:.6rem 1.25rem;background:rgba(169,220,238,.05);
}

/* ---------- 11. Contact ---------- */
.section--night{overflow:hidden}
.contact__sky{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(80% 60% at 50% 0%,rgba(15,104,139,.28),transparent 70%)}
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2.2rem,5vw,4.5rem);align-items:start}
.contact__list{display:grid;gap:1rem;margin-top:2.2rem}
.contact__list li{display:flex;align-items:center;gap:.9rem;font-size:1.02rem}
.contact__list svg{width:22px;height:22px;color:var(--brand-3);flex:none}
.contact__list a{border-bottom:1px solid transparent;transition:border-color .25s var(--ease),color .25s var(--ease)}
.contact__list a:hover{color:var(--brand-3);border-bottom-color:var(--brand-3)}

.form{
  display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;
  background:linear-gradient(165deg,rgba(169,220,238,.08),rgba(169,220,238,.02));
  border:1px solid rgba(169,220,238,.16);border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.3rem);box-shadow:var(--shadow-lg);
}
.field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-size:.82rem;font-weight:600;letter-spacing:.05em;color:var(--ice)}
.field .opt{font-weight:400;opacity:.6;letter-spacing:0}
.field input,.field select,.field textarea{
  width:100%;background:rgba(4,16,26,.55);border:1px solid rgba(169,220,238,.2);
  border-radius:var(--radius-sm);padding:.8rem .95rem;font-size:.96rem;color:var(--mist);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease);
}
.field textarea{resize:vertical;min-height:120px}
.field input::placeholder,.field textarea::placeholder{color:rgba(169,220,238,.4)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand-3);background:rgba(4,16,26,.8);
  box-shadow:0 0 0 3px rgba(63,192,230,.16);
}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ice) 50%),linear-gradient(135deg,var(--ice) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.6rem;
}
.field.has-error input,.field.has-error textarea{border-color:#ff8a6b;box-shadow:0 0 0 3px rgba(255,138,107,.14)}
.form__foot{flex-direction:row;flex-wrap:wrap;align-items:center;gap:1rem}
.form__note{font-size:.84rem;color:rgba(169,220,238,.66);margin:0}
.form__note.is-error{color:var(--sun-2)}
.form__note.is-ok{color:var(--brand-3)}

/* ---------- 12. Footer ---------- */
.site-footer{position:relative;background:#020a10;padding-top:clamp(5rem,9vw,8rem)}
.footer__ridge{position:absolute;top:0;left:0;width:100%;height:clamp(50px,7vw,110px);fill:var(--night)}
.site-footer__inner{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);padding-bottom:3rem;
}
.site-footer__brand p{margin-top:1.2rem;color:rgba(169,220,238,.6);font-size:.95rem;max-width:28rem}
.site-footer__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.site-footer__nav h2{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ice);margin-bottom:1rem}
.site-footer__nav ul{display:grid;gap:.6rem}
.site-footer__nav a,.site-footer__nav span{font-size:.94rem;color:rgba(234,243,247,.66);transition:color .25s var(--ease)}
.site-footer__nav a:hover{color:var(--brand-3)}
.site-footer__base{
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  border-top:1px solid rgba(169,220,238,.1);padding:1.6rem 0;
  font-size:.85rem;color:rgba(169,220,238,.5);
}
.site-footer__motto{font-style:italic}

/* ---------- 13. Animations ---------- */
@keyframes twinkle{from{opacity:.55}to{opacity:1}}
@keyframes pulse{from{opacity:.75;transform:translateX(-50%) scale(.96)}to{opacity:1;transform:translateX(-50%) scale(1.06)}}
@keyframes drift{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(3%,-2%,0)}}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- 14. Responsive ---------- */
@media (max-width:1000px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav-toggle{display:flex}
  .nav{
    position:fixed;inset:0 0 auto 0;top:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:6rem var(--gutter) 2rem;
    background:rgba(4,16,26,.97);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(169,220,238,.14);
    transform:translateY(-100%);opacity:0;visibility:hidden;
    transition:transform .38s var(--ease),opacity .3s var(--ease),visibility .38s;
  }
  .nav.is-open{transform:translateY(0);opacity:1;visibility:visible}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__list a{display:block;padding:1rem 0;font-size:1.1rem;border-bottom:1px solid rgba(169,220,238,.09)}
  .nav__cta{margin-top:1.6rem;align-self:flex-start}
  .hero{padding-bottom:clamp(11rem,26vh,15rem)}
  .hero::before{background:linear-gradient(180deg,rgba(3,12,19,.92) 0%,rgba(3,12,19,.66) 42%,rgba(3,12,19,.16) 72%,transparent 90%)}
  .stats{grid-template-columns:repeat(2,1fr);gap:1.4rem}
  .form{grid-template-columns:1fr}
  .site-footer__inner{grid-template-columns:1fr}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
  .hero__actions{flex-direction:column;align-items:stretch}
  .form__foot{flex-direction:column;align-items:stretch}
  .form__note{text-align:center}
  .site-footer__base{justify-content:flex-start}
  .brand__mark{width:40px}
  .eyebrow{font-size:.7rem;letter-spacing:.11em;gap:.5rem}
}
@media (max-width:1000px){
  .ascent__camps{display:none}
}
@media (min-width:1001px){
  .ascent{padding-top:200px}
  .ascent__svg{height:200px}
}

/* ---------- 15. Motion & print ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1;transform:none}
  .ridge,.fog,.stars,.aurora{transform:none !important}
}
@media print{
  .site-header,.scroll-cue,.hero__scene,.marquee,.scroll-progress{display:none}
  body{background:#fff;color:#000}
}