/* ---- Aureon Labs v2 Pro + Typing ---- */
:root{
  --bg:#0a1022; --panel:#111733; --ink:#eaf2ff; --muted:#9fb6da;
  --primary:#63a3ff; --accent:#22f2ff; --outline:#7db2ff;
  --ring: 0 0 0 2px rgba(125,178,255,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background: radial-gradient(1000px 600px at 20% -10%, #15306b55 0, transparent 50%),
             radial-gradient(900px 480px at 110% 10%, #0c5a6b55 0, transparent 55%),
             var(--bg);
  color:var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  overflow-x:hidden;
}
a{color:inherit}
#orbs{position:fixed; inset:0; pointer-events:none; z-index:-1; filter: blur(70px) saturate(130%); opacity:.7}
#orbs .o{position:absolute; border-radius:50%; mix-blend-mode:screen}
#orbs .o1{width:520px; height:520px; left:-120px; top:-60px; background:#22f2ff55; animation:float1 18s ease-in-out infinite}
#orbs .o2{width:600px; height:600px; right:-180px; top:-40px; background:#63a3ff55; animation:float2 22s ease-in-out infinite}
#orbs .o3{width:500px; height:500px; left:30%; bottom:-160px; background:#7a5cff55; animation:float3 24s ease-in-out infinite}
@keyframes float1{0%{transform:translateY(-2%)}100%{transform:translateY(2%)}}
@keyframes float2{0%{transform:translateX(0)}100%{transform:translateX(-2%)}}
@keyframes float3{0%{transform:translateY(0)}100%{transform:translateY(-2%)}}
.container{max-width:1200px; margin:0 auto; padding:0 24px}
.nav{position:sticky; top:0; z-index:20; backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(9,14,30,.85), rgba(9,14,30,.55));
  border-bottom:1px solid rgba(255,255,255,.06);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand img{width:36px; height:36px; border-radius:11px; box-shadow: 0 10px 30px #22f2ff35}
.brand span{font-weight:800; letter-spacing:.6px}
.nav a{text-decoration:none; padding:10px 14px; border-radius:12px; transition:transform .2s ease, background .2s ease, box-shadow .2s ease;}
.nav a:hover{transform:translateY(-2px); background: rgba(255,255,255,.06); box-shadow: 0 8px 24px rgba(98,161,255,.25)}
.hero{padding:64px 0 34px}
.kicker{color:#a8c7ff; letter-spacing:.3em; text-transform:uppercase; font-size:12px}
h1{font-size:clamp(34px, 5.6vw, 64px); line-height:1.05; margin:12px 0 10px}
h1.gradient{background: linear-gradient(90deg, #e9f3ff, #b9d8ff, #e6ffff); -webkit-background-clip:text; background-clip:text; color:transparent; animation:hue 16s linear infinite}
@keyframes hue{from{filter:hue-rotate(0)}to{filter:hue-rotate(360deg)}}
.sub{color:var(--muted); font-size:clamp(14px,2.2vw,18px); max-width:820px}
/* typing effect */
.type{
  display:inline-block; position:relative; min-height:1.2em;
  border-right:2px solid #bfe0ff; padding-right:6px; animation: caret .9s steps(1,end) infinite;
}
@keyframes caret{50%{border-color:transparent}}
.btn{display:inline-block; padding:12px 18px; border-radius:14px; position:relative; overflow:hidden;
  text-decoration:none; isolation:isolate; border:1px solid rgba(255,255,255,.12); transition:.25s ease all;}
.btn:hover{transform:translateY(-2px); box-shadow: 0 18px 50px rgba(125,178,255,.25)}
.btn:focus-visible{outline:none; box-shadow:var(--ring)}
.btn.primary{background: linear-gradient(90deg, var(--primary), var(--accent)); color:#001226; font-weight:800}
.btn.ghost{background: rgba(255,255,255,.04);}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.section{padding:34px 0}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px}
.card{background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:18px; min-height:160px; transition:.25s ease all; transform-style:preserve-3d; perspective:800px;}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 60px rgba(107,152,255,.25)}
.col{padding:16px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); transition:.25s ease all}
.col:hover{transform: translateY(-3px); box-shadow:0 8px 30px rgba(99,163,255,.25)}
.marquee{overflow:hidden; white-space:nowrap; border-top:1px dashed rgba(255,255,255,.15); border-bottom:1px dashed rgba(255,255,255,.15); padding:10px 0; margin-top:22px}
.marquee span{display:inline-block; padding-right:60px; animation:scrollx 22s linear infinite}
@keyframes scrollx{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
footer{padding:34px 0; color:var(--muted); display:flex; gap:14px; align-items:center; justify-content:space-between}
.x{display:inline-flex; align-items:center; gap:8px; text-decoration:none; padding:8px 12px; border-radius:12px; background: rgba(255,255,255,.06); transition: .2s ease all}
.x:hover{background: rgba(255,255,255,.12); transform: translateY(-2px)}
.x svg{width:16px; height:16px}
.reveal{opacity:0; transform: translateY(14px); transition: .6s ease all}
.reveal.show{opacity:1; transform:none}
h2{margin:0 0 8px; font-size:clamp(22px,3.2vw,32px)}
h3{margin:0 0 8px; font-size:clamp(18px,2.4vw,22px)}
p{margin:0 0 10px}
small{color:var(--muted)}

/* Gradient applied directly to typing span so text isn't transparent */
.gradient-text{
  background: linear-gradient(90deg, #e9f3ff, #b9d8ff, #e6ffff);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  animation:hue 16s linear infinite;
}