:root{
  --bg:#0a0b0f; --bg-2:#0f1118; --fg:#e6ecf1; --muted:#9fb2c3;
  --primary:#71c0ec; --accent:#6a8bff; --brand:#2c3178;
  --ring:rgba(108,164,255,0.55); --glow:rgba(53,138,255,0.32); --tile:#131722;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--fg);
  background:
    radial-gradient(1200px 800px at 10% -10%, #17203a 0%, transparent 60%),
    radial-gradient(1000px 600px at 90% 10%, #1a1e2a 0%, transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.5; overflow-x:hidden;
}

/* grid overlay */
.overlay-grid{position:fixed; inset:0; pointer-events:none; z-index: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:40px 40px, 40px 40px;
  mask-image:radial-gradient(1000px 600px at 50% 30%, black 0%, transparent 70%);
}

.bg{position:fixed; inset:0; z-index:0}
.wrap{max-width:1200px; margin:0 auto; padding:24px}

/* NAV */
.nav{position:sticky; top:0; z-index:5; backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(10,11,15,.7), rgba(10,11,15,.25));
  border-bottom:1px solid rgba(255,255,255,.06)}
.nav .bar{display:flex; align-items:center; justify-content:space-between; gap:16px}
.nav-links{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
a{color:var(--fg); text-decoration:none}
a:hover{color:var(--primary)}

.btn{display:inline-block; padding:10px 14px; border:1px solid rgba(255,255,255,.12);
  border-radius:10px; background:rgba(255,255,255,.02);
  transition:transform .15s ease, border-color .3s ease, box-shadow .3s ease;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 0 12px rgba(0,0,0,.2)}
.btn:hover{transform:translateY(-1px); border-color:var(--ring); box-shadow:0 10px 30px var(--glow)}
.btn--pri{background:linear-gradient(135deg, var(--accent), var(--primary)); color:black; border-color:transparent; font-weight:600}

main{position:relative; z-index:1}
footer{padding:24px 0; border-top:1px solid rgba(255,255,255,.08); background:rgba(10,11,15,.4)}

/* HERO (Android-friendly height + smooth video) */
.hero{
  position:relative;
  /* Use modern viewport units to avoid URL-bar “vh” jump on Android */
  min-height:100svh;          /* stable visual viewport */
  min-height:100dvh;          /* dynamic viewport (newer Chrome) */
  padding:72px 0;
  display:grid; place-items:center; text-align:center;
}
.hero .copy{position:relative; z-index:2; max-width:900px}
.hero .kicker{color:var(--muted); font-weight:600; letter-spacing:.16em; text-transform:uppercase}
.hero h1{font-size:clamp(36px,8vw,72px); line-height:1.06; margin:12px 0 8px}
.hero p{font-size:clamp(16px,2.5vw,22px); color:#bcd0e0}

/* Video must truly cover; promote to its own layer for smoother playback */
.hero video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center center;
  z-index:0;
  filter:brightness(.35) contrast(1.05) saturate(1.05);
  will-change:transform; transform:translateZ(0); backface-visibility:hidden;
}

/* SECTIONS */
.section{position:relative; padding:80px 0; overflow:clip}
.section::before{content:""; position:absolute; inset:-40% -10% auto -10%; height:80%;
  background:radial-gradient(40% 60% at 30% 0%, rgba(96,140,255,.12), transparent 50%),
             radial-gradient(50% 60% at 80% 20%, rgba(20,76,140,.18), transparent 60%);
  filter:blur(40px); z-index:0}
.section .wrap{position:relative; z-index:1}

/* TILES */
.tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:18px}
.tile{background:var(--tile); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; position:relative; overflow:hidden;
  transition:transform .2s ease, box-shadow .3s ease, border-color .3s ease;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.3)}
.tile::before{content:""; position:absolute; inset:-120% -40% auto -40%; height:180%;
  background:radial-gradient(40% 40% at 20% 20%, rgba(110,190,255,.18), transparent 60%),
             conic-gradient(from 0turn, transparent, rgba(110,190,255,.28), transparent);
  filter:blur(60px); opacity:.6; pointer-events:none}
.tile:hover{transform:translateY(-2px); box-shadow:0 22px 60px rgba(110,190,255,.22); border-color:rgba(110,190,255,.4)}
.tile .corner{position:absolute; top:14px; right:14px; opacity:.95; filter:drop-shadow(0 6px 22px rgba(110,190,255,.25))}
.tile .corner svg{width:30px; height:30px; display:block}

/* BRAND — exact sizing (32/24) */
.brand{ display:flex; align-items:center; gap:.5rem }
.brand img, .brand svg{ height:32px }
@media (max-width:768px){ .brand img, .brand svg{ height:24px } }

/* Reveal/parallax */
.reveal{opacity:0; transform:translateY(14px) scale(.98); filter:blur(4px); transition:opacity .6s ease, transform .6s ease, filter .6s ease}
.in{opacity:1; transform:none; filter:none}
.parallax{transform:translate3d(0, calc(var(--py, 0) * 140px), 0); will-change:transform}

/* Details */
details{background:#0d111a; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:14px 16px}
details + details{margin-top:10px}
summary{cursor:pointer; list-style:none; font-weight:600; display:flex; align-items:center; gap:10px}
summary::marker, summary::-webkit-details-marker{display:none}
summary .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent)}
details[open]{box-shadow:0 10px 40px rgba(110,190,255,.15)}

/* perf */
.section, .tile{content-visibility:auto; contain-intrinsic-size:700px 400px}

@media (max-width:700px){
  .nav .nav-links{gap:6px}
  .btn{padding:9px 12px}
  /* smaller hero padding on phones */
  .hero{padding:56px 0}
}

@media (prefers-reduced-motion){
  .tile,.reveal,.parallax{transition:none; transform:none !important; filter:none}
}