:root{
  --bg:#0b0e12;
  --fg:#e9eef7;
  --muted:#9aa6b2;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.10);
  --accent:#8fb6ff;
  --accent2:#a6ffd6;
  --shadow: 0 30px 80px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.55;
  overflow-x:hidden;
}

/* Background */
.bg{position:fixed; inset:0; z-index:-2; pointer-events:none;}
.orb{position:absolute; width:520px; height:520px; border-radius:50%; filter: blur(60px); opacity:.28; animation: floaty 18s ease-in-out infinite;}
.o1{top:-120px; left:-120px; background: radial-gradient(circle at 30% 30%, var(--accent), transparent 55%);}
.o2{bottom:-160px; right:-160px; background: radial-gradient(circle at 30% 30%, var(--accent2), transparent 55%); animation-duration: 22s;}
.o3{top:35%; left:55%; width:420px; height:420px; opacity:.18; background: radial-gradient(circle at 30% 30%, #b98cff, transparent 58%); animation-duration: 26s;}
@keyframes floaty{0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(18px,-22px,0)}}
.grain{position:absolute; inset:0; opacity:.08; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode: overlay;}

/* Layout */
.wrap{max-width:1040px; margin:auto; padding:2.25rem 1.5rem 3rem}
.section{margin-top:2.25rem}
h1,h2,h3{line-height:1.12; margin:0 0 .65rem}
h1{font-size:2.45rem; letter-spacing:-.02em}
h2{font-size:1.4rem; margin-top:1.3rem}
h3{font-size:1.05rem}
.lede{color:var(--muted); font-size:1.06rem; max-width:68ch}
.kicker{color:rgba(255,255,255,.75); letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; margin:0 0 .5rem}
.micro{color:var(--muted); font-size:.92rem; margin:.85rem 0 0}
a{color:inherit}

/* Top bar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:.75rem 0 1.25rem;
}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none}
.brandMark{
  width:18px; height:18px; border-radius:6px;
  background: linear-gradient(135deg, var(--accent), rgba(255,255,255,.15));
  box-shadow: 0 10px 30px rgba(143,182,255,.18);
}
.brandText{font-weight:750; letter-spacing:.02em; color:rgba(255,255,255,.9)}
.nav{display:flex; gap:1rem; align-items:center; flex-wrap:wrap}
.nav a{color:rgba(255,255,255,.72); text-decoration:none; font-size:.95rem}
.nav a:hover{color:rgba(255,255,255,.95)}
.navCta{padding:.5rem .8rem; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.03)}

/* Hero */
.hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:1.5rem;
  padding:1.25rem 0 1.5rem;
  border-bottom:1px solid var(--line);
}
.heroCtas{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem}
.badges{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem}
.badge{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  padding:.35rem .6rem;
  border-radius:999px;
  color:rgba(255,255,255,.72);
  font-size:.84rem;
}
.tileGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:.8rem;
  align-content:start;
}
.tile{
  border:1px solid var(--line);
  border-radius:16px;
  padding:1rem;
  min-height:112px;
  background:
    radial-gradient(600px 140px at 10% 10%, rgba(143,182,255,.20), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.tile::after{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(400px 160px at 10% 10%, rgba(166,255,214,.18), transparent 55%);
  opacity:.55;
}
.tileLabel{position:relative; font-weight:800}
.tileMeta{position:relative; color:rgba(255,255,255,.70); font-size:.92rem; margin-top:.35rem}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
}

/* Grids */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1rem}
@media (max-width: 900px){
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
}

.panel{
  background: linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid var(--line);
  border-radius:16px;
  padding:1rem;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.panel.tight{padding:.85rem}

.cleanList{margin:.35rem 0 0; padding-left:1.15rem}
.cleanList li{margin:.32rem 0; color:rgba(255,255,255,.82)}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.72rem 1rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.01em;
  border:1px solid transparent;
  position:relative;
}
.btn.primary{
  background: linear-gradient(135deg, rgba(143,182,255,.95), rgba(255,255,255,.20));
  color:#07090d;
  box-shadow: 0 18px 50px rgba(143,182,255,.18);
}
.btn.ghost{
  border-color:var(--line);
  background:rgba(255,255,255,.02);
  color:rgba(255,255,255,.88);
}
.btn.ghost:hover{border-color:rgba(255,255,255,.20)}
.shimmer{overflow:hidden}
.shine{
  position:absolute; inset:-40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: rotate(20deg) translateX(-120%);
  animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine{0%,65%{transform: rotate(20deg) translateX(-120%)} 100%{transform: rotate(20deg) translateX(120%)}}

/* Contact section */
.contactShell{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:1rem;
  margin-top:1rem;
}
@media (max-width: 900px){
  .contactShell{grid-template-columns:1fr}
}

.formLux{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:16px;
  padding:1rem;
  box-shadow: var(--shadow);
}

label{display:block}
label span{
  display:block;
  font-size:.86rem;
  color:rgba(255,255,255,.72);
  margin:.25rem 0 .35rem;
}
input, select, textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(5,7,10,.55);
  color:var(--fg);
  padding:.78rem .8rem;
  outline:none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(143,182,255,.55);
  box-shadow: 0 0 0 4px rgba(143,182,255,.12);
}
textarea{min-height:140px; resize:vertical}

.row2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:.75rem;
}
@media (max-width: 700px){
  .row2{grid-template-columns:1fr}
}

.submitRow{margin-top:.75rem; display:grid; gap:.5rem}

.footer{
  margin-top:3rem;
  border-top:1px solid var(--line);
  padding-top:1.25rem;
  color:rgba(255,255,255,.65);
  font-size:.92rem;
}

/* Reveal animation */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform: translateY(0)}