:root{--bg:#0b1020;--muted:#0f1630;--card:#111a34;--accent:#48c4ed;--accent2:#8df0c0;--text:#e7ecff;--sub:#9fb0d4}
html,body{height:100%}
body{font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Noto Sans';background:
  radial-gradient(1200px 600px at 15% -10%, rgba(72,196,237,.23), transparent),
  radial-gradient(1000px 500px at 110% 15%, rgba(141,240,192,.18), transparent),
  var(--bg);color:var(--text)}
.bg-blur{background:rgba(17,26,52,.65)!important;backdrop-filter:blur(8px)}
.brand{color:var(--text);text-shadow:0 0 18px rgba(72,196,237,.55)}
.nowrap{white-space:nowrap}
.link-fade{color:var(--accent);text-decoration:none}.link-fade:hover{opacity:.85}
/* HERO */
.hero{position:relative;overflow:hidden}
.hero-title{font-weight:700;line-height:1.1;font-size:clamp(28px,3.5vw,56px);white-space:nowrap}
.hero-sub{font-size:clamp(15px,1.3vw,18px);color:var(--sub)}
.typed-wrapper{display:block;min-height:2.2rem;max-width:100%}
.typed{display:inline-block;white-space:nowrap;overflow:hidden;border-right:2px solid var(--accent);font-size:clamp(16px,1.6vw,22px);max-width:100%}
/* cards */
.soft-card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:1.25rem;overflow:hidden}
.chip{font-size:.75rem;padding:.35rem .6rem;border-radius:999px;background:rgba(72,196,237,.12);border:1px solid rgba(72,196,237,.35);color:#b8ebff}
/* marquee */
.marquee{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent,white 10%,white 90%,transparent)}
.marquee-track{display:flex;gap:1rem;animation:scroll 30s linear infinite;will-change:transform}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mcard{min-width:290px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:1rem;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:.35s ease}
.mcard:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 12px 36px rgba(72,196,237,.18)}
/* badges */
.badge-pill{border:1px solid rgba(255,255,255,.15);background:#0d1530}
/* footer */
footer a{color:#c9d4ff}
/* spacing bump below fixed nav */
.bump{margin-top:100px}
@media (max-width:991.98px){.hero .col-visual{margin-top:.75rem}}