:root{
  --bg: #07070a;
  --fg: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --shadow: 0 24px 90px rgba(0,0,0,.65);
  --max: 1120px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--fg);
  background: radial-gradient(1200px 800px at 20% 0%, rgba(90,110,255,.12), transparent 60%),
              radial-gradient(900px 650px at 90% 10%, rgba(0,255,200,.08), transparent 55%),
              var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{color:inherit; text-decoration:none}
.container{width:min(var(--max), 100%); margin:0 auto; padding: 0 20px}
.muted{color: var(--muted)}
.small{font-size: 13px; color: var(--muted)}

.topbar{
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; z-index:50;
  background: linear-gradient(to bottom, rgba(0,0,0,.74), rgba(0,0,0,.18));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand{display:flex; align-items:baseline; gap:10px; letter-spacing:.20em; text-transform:uppercase}
.brand__mark{font-weight:900; font-size:18px}
.brand__name{font-weight:600; font-size:12px; opacity:.84}
.nav{display:flex; gap:14px; align-items:center; font-size:13px; letter-spacing:.06em; text-transform:uppercase}
.nav a{padding:10px 10px; border-radius:999px}
.nav__cta{border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06)}

.hamburger{
  display:none; width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  cursor:pointer; padding: 10px;
}
.hamburger span{display:block; height:2px; width:100%; background: rgba(255,255,255,.92); border-radius: 2px; margin: 5px 0}

.mobileNav{
  position:fixed; inset:0; z-index: 70;
  background: rgba(0,0,0,.58); backdrop-filter: blur(6px);
  display:none; align-items:flex-start; justify-content:flex-end;
  padding: 76px 14px 14px;
}
.mobileNav.is-open{display:flex}
.mobileNav__panel{
  width: min(420px, 100%); border-radius: 18px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.62); backdrop-filter: blur(12px);
  box-shadow: 0 30px 120px rgba(0,0,0,.75); overflow:hidden;
}
.mobileNav__head{display:flex; align-items:center; justify-content:space-between; padding: 14px; border-bottom: 1px solid rgba(255,255,255,.10)}
.mobileNav__title{font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: rgba(255,255,255,.85)}
.mobileNav__close{width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: rgba(255,255,255,.95); font-size: 26px; cursor:pointer}
.mobileNav__links{display:flex; flex-direction:column; padding: 12px}
.mobileNav__links a{padding: 14px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); margin-bottom: 10px; letter-spacing:.08em; text-transform:uppercase; font-size: 12px}
.mobileNav__foot{padding: 12px 14px 14px; border-top: 1px solid rgba(255,255,255,.08)}

.hero{position:relative; padding-top: 92px; min-height: 86vh; display:flex; align-items:center}
.hero__bg{
  position:absolute; inset:0;
  background-image:
    radial-gradient(900px 600px at 20% 20%, rgba(90,110,255,.22), transparent 62%),
    radial-gradient(700px 500px at 80% 35%, rgba(0,255,200,.14), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.82)),
    var(--img);
  background-size: cover; background-position:center;
}
.hero__inner{position:relative; z-index:2; padding: 62px 20px}
.kicker{letter-spacing:.26em; text-transform:uppercase; font-size: 12px; color: rgba(255,255,255,.72); margin: 0 0 10px}
h1{
  margin: 0 0 12px; font-weight: 900; letter-spacing: -0.02em;
  font-size: clamp(42px, 5.4vw, 74px); line-height: 1.12;
  text-transform: uppercase; overflow: visible; padding-bottom: .08em;
}
.sub{color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.65; max-width: 70ch; margin: 0 0 16px}
.ctaRow{display:flex; gap: 12px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  font-size: 13px; letter-spacing:.10em; text-transform:uppercase;
}
.btn--primary{background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.26)}
.btn--ghost{background: rgba(0,0,0,.30)}
.chips{display:flex; flex-wrap:wrap; gap: 10px; margin-top: 18px}
.chip{display:inline-flex; padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.30); font-size: 11px; letter-spacing:.10em; text-transform:uppercase; color: rgba(255,255,255,.84)}

.story{padding: 30px 0 40px}
.story__stack{display:flex; flex-direction:column; gap: 18px; padding: 12px 0 26px}
.panel{
  position:relative; overflow:hidden;
  border-radius: 26px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28); box-shadow: var(--shadow);
  min-height: 520px;
}
.panel__bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.82)),
    var(--img);
  background-size: cover; background-position:center;
}
.panel__content{position:relative; z-index:2; padding: 54px 46px; max-width: 900px}
.eyebrow{letter-spacing:.22em; text-transform:uppercase; font-size: 12px; color: rgba(255,255,255,.72); margin: 0 0 10px}
h2{
  margin: 0 0 10px; font-weight: 900; letter-spacing: -0.01em;
  font-size: clamp(28px, 3.0vw, 46px); line-height: 1.14;
  text-transform: uppercase; overflow: visible; padding-bottom: .08em;
}
.lead{margin: 0 0 14px; color: rgba(255,255,255,.80); font-size: 16px; line-height: 1.75}
.list{margin: 14px 0 0; padding-left: 18px; color: rgba(255,255,255,.82)}
.list li{margin: 10px 0}

.cards{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 16px}
.cards--2{grid-template-columns: repeat(2, minmax(0,1fr))}
.card{border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.42); backdrop-filter: blur(10px); padding: 14px}
.card h3{margin:0 0 8px; font-weight: 800; letter-spacing: -0.01em; text-transform:uppercase; font-size: 13px}
.card p{margin:0; color: rgba(255,255,255,.78); line-height:1.55}

.gallery{margin-top: 16px; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px}
.thumb{padding:0; border:none; background: transparent; cursor:pointer; border-radius: 18px; overflow:hidden; border: 1px solid rgba(255,255,255,.14); box-shadow: var(--shadow)}
.thumb img{display:block; width:100%; height:auto; transform: scale(1.02); transition: transform .25s ease}
.thumb:hover img{transform: scale(1.06)}

.contactSection{padding: 46px 0 70px}
.contactGrid{display:grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items:start}
.contact{margin-top: 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.38); backdrop-filter: blur(10px); box-shadow: var(--shadow); padding: 14px}
.contact__row{display:flex; justify-content:space-between; gap: 14px; padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,.08)}
.contact__row:last-child{border-bottom:none}
.contact__label{color: rgba(255,255,255,.62); text-transform:uppercase; letter-spacing:.14em; font-size: 11px}
.contact__value{font-weight:700}

.formWrap{border-radius: 20px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.38); backdrop-filter: blur(10px); box-shadow: var(--shadow); padding: 16px}
.formTitle{margin: 4px 0 8px; font-weight: 900; letter-spacing: -.01em}
.form__grid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px}
.field{display:flex; flex-direction:column; gap:8px}
.field--full{grid-column: 1 / -1}
.field__label{color: rgba(255,255,255,.62); text-transform:uppercase; letter-spacing:.14em; font-size: 11px}
.field__input{width: 100%; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.28); color: rgba(255,255,255,.92); padding: 12px; outline: none}
.field__input::placeholder{color: rgba(255,255,255,.45)}
.field__input:focus{border-color: rgba(255,255,255,.28)}
.field__textarea{resize: vertical; min-height: 120px}
.form__actions{display:flex; gap: 12px; flex-wrap:wrap; margin-top: 12px}
.footer{grid-column: 1 / -1; margin-top: 10px}

.lightbox{position:fixed; inset:0; background: rgba(0,0,0,.78); display:none; align-items:center; justify-content:center; padding: 28px; z-index: 80}
.lightbox.is-open{display:flex}
.lightbox__img{width:min(1080px, 100%); height:auto; border-radius: 16px; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 30px 120px rgba(0,0,0,.75)}
.lightbox__close{position:absolute; top: 16px; right: 18px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.20); background: rgba(255,255,255,.08); color: white; font-size: 26px; cursor:pointer}

@media (max-width: 980px){
  .nav{display:none}
  .hamburger{display:inline-flex}
  .panel__content{padding: 38px 22px}
  .cards{grid-template-columns: 1fr}
  .cards--2{grid-template-columns: 1fr}
  .gallery{grid-template-columns: 1fr}
  .contactGrid{grid-template-columns: 1fr}
  .form__grid{grid-template-columns: 1fr}
}