:root {
  --bg:#08111f;
  --bg2:#0d1728;
  --panel:rgba(12,22,38,.78);
  --panel2:rgba(18,31,52,.94);
  --line:rgba(255,255,255,.10);
  --text:#eef5ff;
  --muted:#9fb3ca;
  --accent:#47d7c7;
  --accent2:#7d8dff;
  --accent3:#ffba72;
  --max:1200px;
  --radius:26px;
  --radius2:20px;
  --shadow:0 28px 80px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Plus Jakarta Sans',sans-serif;
  background:
    radial-gradient(circle at 15% 20%, rgba(71,215,199,.16), transparent 24%),
    radial-gradient(circle at 85% 12%, rgba(125,141,255,.18), transparent 22%),
    linear-gradient(135deg,#06101d 0%, #091321 48%, #06111f 100%);
  color:var(--text);
  overflow-x:hidden;
}
body::before{
  content:'';
  position:fixed; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 92%);
  pointer-events:none; z-index:0;
}
a{color:inherit; text-decoration:none}
.wrap{position:relative; z-index:1}
.container{width:min(var(--max), calc(100% - 40px)); margin:0 auto}
.topbar{position:sticky; top:0; z-index:40; backdrop-filter:blur(18px); background:rgba(5,11,20,.66); border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0}
.brand{display:flex; align-items:center; gap:14px}
.brand-logo-link{display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.brand-logo{width:40px; height:auto; max-height:36px; display:block; filter:drop-shadow(0 10px 18px rgba(71,215,199,.16))}
.mark{width:48px; height:48px; border-radius:16px; display:grid; place-items:center; font-family:'Space Grotesk',sans-serif; font-weight:800; color:#06101d; background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 16px 30px rgba(71,215,199,.22)}
.brand strong{display:block; font-family:'Space Grotesk',sans-serif; font-size:1.1rem}
.brand span{display:block; color:var(--muted); font-size:.9rem; margin-top:2px}
.navlinks{display:flex; flex-wrap:wrap; justify-content:center; gap:16px}
.navlinks a{color:var(--muted); font-weight:700; font-size:.95rem; transition:.25s ease}
.navlinks a:hover{color:var(--text); transform:translateY(-1px)}
.cta{padding:12px 18px; border-radius:999px; font-weight:800; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#06101d; box-shadow:0 14px 34px rgba(71,215,199,.22); transition:.25s ease}
.cta:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(71,215,199,.28)}
.hero{padding:56px 0 36px; min-height:46vh; display:grid; align-items:center}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--muted); font-weight:800; font-size:.9rem; margin-bottom:18px}
.eyebrow i{width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px rgba(71,215,199,.12)}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; letter-spacing:-.04em}
h1{font-size:clamp(2.7rem, 6vw, 5.7rem); line-height:.95; margin:0; max-width:11ch}
.gradient-text{background:linear-gradient(90deg,#fff 0%, #c8fff5 35%, #a7b8ff 68%, #ffd6a0 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{margin:20px 0 28px; max-width:60ch; color:#c8d6e7; font-size:1.06rem; line-height:1.8}
.actions{display:flex; gap:14px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 20px; border-radius:16px; border:1px solid rgba(255,255,255,.10); font-weight:800; transition:.25s ease; backdrop-filter:blur(10px)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#06101d}
.btn.secondary{background:rgba(255,255,255,.05)}
.btn:hover{transform:translateY(-3px)}
.panel{padding:24px; border-radius:28px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border:1px solid var(--line); box-shadow:var(--shadow)}
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.cardx{position:relative; padding:22px; border-radius:var(--radius2); background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04)); border:1px solid var(--line); overflow:hidden; transition:transform .28s ease, border-color .28s ease}
.cardx:hover{transform:translateY(-8px); border-color:rgba(71,215,199,.35)}
.cardx::after{content:''; position:absolute; right:-30px; bottom:-30px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, rgba(71,215,199,.18), transparent 70%)}
.cardx .icon{width:54px; height:54px; border-radius:18px; display:grid; place-items:center; background:rgba(255,255,255,.07); margin-bottom:16px; font-size:1.3rem}
.cardx p,.sub,.item p,.meta{color:var(--muted); line-height:1.75}
.sub{max-width:64ch}
.section{padding:22px 0 70px}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:24px}
.section-head p{margin:0; max-width:60ch}
.stack{position:relative; min-height:520px; border-radius:28px; overflow:hidden; border:1px solid var(--line); background:rgba(255,255,255,.04)}
.stack img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.floating{position:absolute; padding:16px 18px; border-radius:18px; background:rgba(6,13,22,.82); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(14px); animation:float 8s ease-in-out infinite}
.floating.one{left:18px; top:18px}
.floating.two{right:18px; top:100px; animation-delay:-2s}
.floating.three{left:18px; bottom:18px; animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.badge-pill{display:inline-flex; padding:9px 12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--muted); font-weight:700; font-size:.88rem}
.stat{padding:18px; border-radius:20px; background:rgba(255,255,255,.05); border:1px solid var(--line)}
.stat strong{display:block; font-family:'Space Grotesk',sans-serif; font-size:1.7rem}
.stat span{color:var(--muted)}
.timeline{display:grid; gap:14px}
.step{display:grid; grid-template-columns:64px 1fr; gap:14px; padding:18px; border-radius:20px; background:rgba(255,255,255,.05); border:1px solid var(--line)}
.no{width:64px; height:64px; border-radius:20px; display:grid; place-items:center; font-size:1.5rem; font-weight:800; font-family:'Space Grotesk',sans-serif; background:linear-gradient(135deg, rgba(71,215,199,.24), rgba(125,141,255,.20)); border:1px solid rgba(255,255,255,.10)}
.blog-card{display:flex; flex-direction:column; min-height:100%}
.blog-card img{width:100%; height:210px; object-fit:cover; border-radius:18px; margin-bottom:16px}
.blog-card .meta-row{display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:.9rem; margin-bottom:8px}
.blog-card h3{margin:0 0 8px}
.form{display:grid; gap:14px}
.input,.textarea{width:100%; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); color:var(--text); padding:14px 16px; font:inherit; outline:none}
.textarea{min-height:160px; resize:vertical}
.input:focus,.textarea:focus{border-color:rgba(71,215,199,.42); box-shadow:0 0 0 4px rgba(71,215,199,.10)}
.footer{padding:34px 0 42px; color:var(--muted); border-top:1px solid rgba(255,255,255,.08); margin-top:26px}
.reveal{opacity:0; transform:translateY(18px); transition:.7s ease}
.reveal.visible{opacity:1; transform:translateY(0)}
@media (max-width:1024px){.hero-grid,.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.section-head{flex-direction:column; align-items:flex-start}}
@media (max-width:720px){.nav{flex-wrap:wrap; justify-content:center}.brand{width:100%; justify-content:center}.navlinks{width:100%; justify-content:center}.hero{min-height:auto; padding-top:34px}.cta,.btn{width:100%; justify-content:center}.stack{min-height:380px}.blog-card img{height:190px}}