:root{
  --bg:#0a101c;
  --bg2:#0f1930;
  --txt:#eef0f3;
  --muted:rgba(238,240,243,.66);
  --muted2:rgba(238,240,243,.56);
  --gold:#4aa3ff;
  --gold2:#1b6bff;
  --stroke:rgba(238,240,243,.88);
  --card:#111b2f;
  --card2:#0c1425;
  --border:rgba(255,255,255,.13);
  --shadow:0 18px 50px rgba(0,0,0,.5);
  --radius:18px;
  --radius2:26px;
  --w:1120px;
  --ease:cubic-bezier(.16,1,.3,1);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:var(--bg);
  color:var(--txt);
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}

.bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(1000px 700px at calc(15% + var(--mx,0px)*.06) calc(12% + var(--my,0px)*.06), rgba(74,163,255,.16), transparent 60%),
    radial-gradient(850px 600px at calc(85% + var(--mx,0px)*-.05) calc(20% + var(--my,0px)*.05), rgba(27,107,255,.12), transparent 62%),
    radial-gradient(1200px 900px at 50% 96%, rgba(74,163,255,.10), transparent 65%),
    radial-gradient(900px 700px at 50% 50%, rgba(255,255,255,.05), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 75%, #050608 100%);
  transform:translateZ(0);
}

.bg-noise{
  position:absolute;
  inset:-80px;
  background-image:var(--noise);
  mix-blend-mode:overlay;
  opacity:.18;
  filter:contrast(120%) brightness(110%);
  pointer-events:none;
  transform:translateZ(0);
}

.bg-vignette{
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(1200px 850px at 50% 10%, transparent 30%, rgba(0,0,0,.42) 72%, rgba(0,0,0,.62) 100%),
    radial-gradient(900px 600px at 50% 50%, rgba(0,0,0,.08), rgba(0,0,0,.62));
  pointer-events:none;
}

.container{
  width:min(var(--w), calc(100% - 56px));
  margin:0 auto;
}

.header{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 28px;
  backdrop-filter:blur(18px);
  background:linear-gradient(180deg, rgba(10,16,28,.76), rgba(10,16,28,.22));
  border-bottom:1px solid rgba(255,255,255,.06);
}

.brand{
  letter-spacing:.24em;
  font-weight:800;
  font-size:12px;
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  text-transform:uppercase;
}
.brand-word{opacity:.9}
.brand-accent{color:var(--gold)}

.btn-ghost{
  padding:10px 14px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.14));
  color:rgba(238,240,243,.84);
  border-color:rgba(255,255,255,.10);
  box-shadow:none;
}
.btn-ghost:hover{
  transform:translateY(-1px);
  border-color:rgba(74,163,255,.22);
  box-shadow:0 18px 55px rgba(0,0,0,.55);
}
.btn-ghost:active{transform:translateY(0)}

.nav{
  display:flex;
  align-items:center;
  gap:22px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(238,240,243,.86);
}

.nav-link{
  position:relative;
  padding:10px 4px;
  opacity:.82;
  transition:opacity 220ms var(--ease);
}
.nav-link::after{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  bottom:6px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(74,163,255,.85), transparent);
  transform:scaleX(.2);
  opacity:0;
  transition:transform 260ms var(--ease), opacity 260ms var(--ease);
  transform-origin:center;
}
.nav-link:hover{opacity:1}
.nav-link:hover::after{opacity:1;transform:scaleX(1)}

.hero{
  min-height:86vh;
  display:flex;
  align-items:center;
  padding:76px 0 54px;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:center;
}
.hero-copy{
  max-width:720px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border:1px solid rgba(74,163,255,.24);
  color:rgba(74,163,255,.92);
  border-radius:999px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  background:linear-gradient(180deg, rgba(74,163,255,.08), rgba(74,163,255,.03));
}
.eyebrow-dot{
  width:6px;height:6px;border-radius:999px;
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(74,163,255,.10);
}

.hero-title{
  margin:18px 0 12px;
  line-height:.9;
  font-family:"Bebas Neue",ui-sans-serif,sans-serif;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:clamp(56px, 7.7vw, 112px);
}
.hero-title-left{text-align:left}

.hero-title-line{display:block}
.hero-title-solid{color:rgba(238,240,243,.96)}
.hero-title-accent{color:var(--gold)}
.hero-title-stroke{
  color:transparent;
  -webkit-text-stroke:2px var(--stroke);
  text-shadow:0 26px 80px rgba(0,0,0,.35);
}

.hero-subtitle{
  margin:0 auto 22px;
  max-width:560px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.hero-subtitle-left{margin:0 0 22px;max-width:520px}

.hero-actions{display:flex;justify-content:center}
.hero-actions-left{justify-content:flex-start}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:12px;
  letter-spacing:.18em;
  font-size:11px;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 34px rgba(0,0,0,.45);
  transform:translateZ(0);
  transition:transform 220ms var(--ease), filter 220ms var(--ease), box-shadow 220ms var(--ease);
  will-change:transform;
}

.btn-primary{
  background:linear-gradient(180deg, #7ac1ff, #4aa3ff 60%, #1b6bff 140%);
  color:#071018;
  border-color:rgba(74,163,255,.25);
  box-shadow:0 18px 50px rgba(74,163,255,.12), 0 20px 60px rgba(0,0,0,.6);
}
.btn-primary:hover{
  transform:translateY(-2px);
  filter:saturate(1.05);
  box-shadow:0 28px 70px rgba(74,163,255,.16), 0 24px 70px rgba(0,0,0,.62);
}
.btn-primary:active{transform:translateY(0)}
.btn-arrow{font-size:13px}

.btn-card{
  padding:10px 12px;
  border-radius:12px;
  font-size:10px;
  letter-spacing:.18em;
  box-shadow:0 16px 40px rgba(0,0,0,.30);
  border:1px solid rgba(74,163,255,.18);
  background:linear-gradient(180deg, rgba(74,163,255,.16), rgba(0,0,0,.18));
  color:rgba(238,240,243,.92);
}
.btn-card:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
  border-color:rgba(74,163,255,.30);
  box-shadow:0 20px 55px rgba(0,0,0,.38), 0 0 0 1px rgba(74,163,255,.10), 0 0 60px rgba(74,163,255,.10);
}
.btn-card:active{transform:translateY(0)}

.section{
  padding:92px 0 76px;
  border-top:1px solid rgba(255,255,255,.06);
}
.section-soft{
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.00));
}

.section-head{
  max-width:760px;
  margin:0 0 34px;
}
.section-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  color:rgba(74,163,255,.92);
  letter-spacing:.24em;
  font-size:11px;
  text-transform:uppercase;
}
.kicker-line{
  width:20px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, rgba(74,163,255,.0), rgba(74,163,255,.9));
}

.section-title{
  margin:14px 0 10px;
  font-family:"Bebas Neue",ui-sans-serif,sans-serif;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:.95;
  font-size:clamp(44px, 5.5vw, 74px);
}
.section-title-left{text-align:left}
.section-title-solid{color:rgba(238,240,243,.96)}
.section-title-accent{color:var(--gold)}

.section-desc{
  margin:0;
  max-width:540px;
  color:var(--muted2);
  font-size:13px;
  line-height:1.55;
}

.grid{
  display:grid;
  gap:16px;
}

.grid-packs{
  grid-template-columns:repeat(12, 1fr);
  align-items:stretch;
}
.grid-2{
  grid-template-columns:repeat(2, 1fr);
}

.card{
  position:relative;
  padding:18px 18px 16px;
  border-radius:var(--radius);
  background:
    radial-gradient(520px 220px at calc(50% + var(--rx,0deg)*260) calc(20% + var(--ry,0deg)*220), rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.03)),
    linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid var(--border);
  box-shadow:0 18px 45px rgba(0,0,0,.34);
  overflow:hidden;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform 260ms var(--ease), border-color 260ms var(--ease), box-shadow 260ms var(--ease);
  will-change:transform;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.03);
  pointer-events:none;
}
.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:radial-gradient(560px 240px at calc(30% + var(--lx,0px)) calc(10% + var(--ly,0px)), rgba(74,163,255,.16), transparent 55%);
  opacity:.0;
  transition:opacity 260ms var(--ease);
  pointer-events:none;
}
.card:hover{
  border-color:rgba(74,163,255,.22);
  box-shadow:0 26px 70px rgba(0,0,0,.50), 0 0 0 1px rgba(74,163,255,.10), 0 0 70px rgba(74,163,255,.08);
}
.card:hover::before{opacity:1}

.card-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.icon{
  width:30px;
  height:30px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  font-size:14px;
}
.icon-gold{
  background:linear-gradient(180deg, rgba(74,163,255,.20), rgba(74,163,255,.05));
  border-color:rgba(74,163,255,.28);
}
.icon-amber{
  background:linear-gradient(180deg, rgba(74,163,255,.18), rgba(27,107,255,.05));
  border-color:rgba(74,163,255,.22);
}

.pill{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(238,240,243,.74);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.05));
}
.pill-dark{
  color:rgba(12,10,6,.76);
  border-color:rgba(0,0,0,.18);
  background:rgba(0,0,0,.10);
}
.pill-amber{
  color:rgba(74,163,255,.88);
  border-color:rgba(74,163,255,.20);
  background:linear-gradient(180deg, rgba(74,163,255,.10), rgba(74,163,255,.02));
}

.card-title{
  margin:0 0 8px;
  font-size:16px;
  letter-spacing:.01em;
}
.card-text{
  margin:0;
  color:rgba(238,240,243,.62);
  font-size:12px;
  line-height:1.55;
  max-width:56ch;
}

.card-actions{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.card-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(12,10,6,.82);
  padding:9px 12px;
  border-radius:12px;
  background:rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.14);
  transition:transform 220ms var(--ease), filter 220ms var(--ease);
}
.card-link:hover{transform:translateY(-1px);filter:brightness(1.02)}

.card-featured{
  grid-column:span 8;
  border-radius:var(--radius2);
  background:linear-gradient(135deg, #7ac1ff 0%, #4aa3ff 52%, #1b6bff 100%);
  color:#071018;
  border-color:rgba(74,163,255,.20);
  box-shadow:0 22px 70px rgba(74,163,255,.10), 0 28px 80px rgba(0,0,0,.55);
}
.card-featured .card-text{color:rgba(7,16,24,.70)}
.card-featured .icon{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.14)}
.card-featured .btn-card{
  color:rgba(7,16,24,.84);
  border-color:rgba(0,0,0,.16);
  background:rgba(0,0,0,.10);
}
.card-featured .btn-card:hover{filter:brightness(1.03)}
.card-featured::before{display:none}

.grid-packs .card:not(.card-featured){
  grid-column:span 4;
}

.card-amber{
  background:
    radial-gradient(520px 260px at 50% 15%, rgba(74,163,255,.14), transparent 56%),
    linear-gradient(180deg, rgba(74,163,255,.06), rgba(0,0,0,.10)),
    linear-gradient(180deg, #0f1116, #0a0b0f);
  border-color:rgba(74,163,255,.12);
}

.footer{
  padding:34px 0 64px;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-min{
  padding:44px 0 54px;
}
.footer-min-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
}
.brand-footer{opacity:.95}
.footer-text{
  margin:10px 0 0;
  color:rgba(238,240,243,.55);
  font-size:12px;
}
.footer-link{
  display:inline-flex;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.12));
  color:rgba(238,240,243,.78);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:transform 220ms var(--ease), border-color 220ms var(--ease);
}
.footer-link:hover{transform:translateY(-1px);border-color:rgba(74,163,255,.20)}

[data-reveal]{
  opacity:0;
  transform:translateY(18px) scale(.99);
  filter:blur(6px);
  transition:opacity 800ms var(--ease), transform 850ms var(--ease), filter 900ms var(--ease);
}
[data-reveal].is-in{
  opacity:1;
  transform:none;
  filter:none;
}

@media (max-width: 980px){
  .grid-packs{grid-template-columns:repeat(6, 1fr)}
  .card-featured{grid-column:span 6}
  .grid-packs .card:not(.card-featured){grid-column:span 3}
}

@media (max-width: 700px){
  .header{padding:18px 16px}
  .nav{display:none}
  .container{width:min(var(--w), calc(100% - 34px))}
  .hero{min-height:78vh;padding:76px 0 32px}
  .hero-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .grid-packs{grid-template-columns:repeat(2, 1fr)}
  .grid-packs .card:not(.card-featured){grid-column:span 1}
  .card-featured{grid-column:span 2}
  .section{padding:78px 0 64px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn,.card,.nav-link::after,[data-reveal]{transition:none}
  [data-reveal]{opacity:1;transform:none;filter:none}
}