:root{
  --navy:#0e1d43;
  --navy-2:#142953;
  --ink:#0b1832;
  --blue:#496bf2;
  --blue-2:#7e99ff;
  --soft:#f3f6fb;
  --line:#dde5f1;
  --muted:#6f7f9b;
  --white:#fff;
  --green:#1d9e68;
  --shadow:0 18px 50px rgba(13,30,66,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:#fff}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.91);backdrop-filter:blur(14px);border-bottom:1px solid rgba(221,229,241,.8)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:.04em}
.brand-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#e2e9ff,#9eb2ff);color:#0d1b42;font-weight:800}
nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:600}
nav a{color:#52617d}
nav a:hover{color:#173379}
.nav-cta{padding:11px 16px;border:1px solid #cdd8ed;border-radius:12px;color:#18336e!important;background:white}
.nav-toggle{display:none;border:0;background:none;font-size:24px}

.hero{background:linear-gradient(135deg,#0d1b40 0%,#132957 58%,#172e60 100%);color:white;overflow:hidden}
.hero-grid{min-height:710px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:70px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.17em;color:#9bb1ff}
.eyebrow.dark{color:#617393}
.hero h1{font-family:"Space Grotesk",sans-serif;font-size:clamp(48px,6vw,82px);line-height:.98;letter-spacing:-.04em;margin:18px 0 26px;max-width:720px}
.hero h1 span{color:#89a1ff}
.hero-text{font-size:18px;line-height:1.75;color:#d8e0f5;max-width:680px}
.hero-actions{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 19px;border-radius:12px;font-weight:700;font-size:14px;transition:.2s}
.btn.primary{background:#4c6df3;color:white;box-shadow:0 12px 28px rgba(71,101,240,.3)}
.btn.primary:hover{transform:translateY(-1px);background:#5b79f3}
.btn.secondary{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:white}
.hero-meta{display:flex;gap:34px;margin-top:52px}
.hero-meta div{display:grid;gap:4px}
.hero-meta b{font-size:13px;color:#9bb0f8}
.hero-meta span{font-size:12px;color:#aebbd7}
.hero-visual{height:540px;position:relative;display:grid;place-items:center}
.core-orb{width:260px;height:260px;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at 35% 30%,#809aff,#3752bd 40%,#17295e 75%);box-shadow:0 0 0 32px rgba(91,117,226,.08),0 0 0 78px rgba(91,117,226,.04),0 35px 90px rgba(0,0,0,.35)}
.core-orb span{font-family:"Space Grotesk";font-size:30px;font-weight:700;letter-spacing:.05em}
.core-orb small{font-size:9px;letter-spacing:.18em;margin-top:7px;color:#d2dcff}
.floating-card{position:absolute;background:rgba(255,255,255,.96);color:#0e1e45;padding:15px 18px;border-radius:15px;box-shadow:0 18px 38px rgba(0,0,0,.22);min-width:180px}
.floating-card span{display:block;font-size:9px;letter-spacing:.15em;color:#7685a4;font-weight:800;margin-bottom:5px}
.floating-card b{font-size:13px}
.card-a{top:80px;left:10px}.card-b{right:0;top:220px}.card-c{bottom:80px;left:40px}
.glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.25}.glow.one{width:240px;height:240px;background:#738fff;right:30px;top:20px}.glow.two{width:220px;height:220px;background:#4f70ff;left:0;bottom:0}

.section{padding:105px 0}
.muted{background:var(--soft)}
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:85px;align-items:center}
.portrait-card{position:relative}
.portrait-frame{aspect-ratio:4/5;border-radius:26px;overflow:hidden;background:#eef2fa;box-shadow:var(--shadow)}
.portrait-frame img{width:100%;height:100%;object-fit:cover;display:block}
.portrait-note{margin-top:14px;border:1px dashed #bdc9df;border-radius:14px;padding:14px 16px;color:#75839e;font-size:12px}
.portrait-note span{font-size:10px;font-weight:800;letter-spacing:.14em;color:#526382}
.portrait-note p{margin:5px 0 0;line-height:1.5}
code{background:#eef2f8;padding:2px 5px;border-radius:5px}
.section-copy h2,.section-head h2,.demo-section h2,.vision-grid h2,.contact h2{font-family:"Space Grotesk";font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-.03em;margin:14px 0 22px}
.section-copy>p{font-size:16px;line-height:1.8;color:#5e6c86}
.quote{margin-top:28px;padding:22px 24px;border-left:4px solid #5373f5;background:#f7f9fd;border-radius:0 14px 14px 0;display:flex;gap:14px}
.quote span{font-family:Georgia;font-size:42px;color:#5878f7;line-height:.8}.quote p{margin:0;font-weight:600;line-height:1.55}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:44px}
.section-head>p{max-width:480px;color:#66758f;line-height:1.65}
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.project{background:white;border:1px solid #e2e8f2;border-radius:22px;padding:28px;box-shadow:0 8px 24px rgba(20,40,80,.04);display:flex;flex-direction:column;min-height:350px}
.project.featured{border-color:#b9c7fb;box-shadow:0 18px 46px rgba(50,76,180,.09)}
.project-top{display:flex;align-items:center;justify-content:space-between}
.icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:#e9eeff;color:#2848b0;font-weight:800;font-family:"Space Grotesk"}
.badge{font-size:9px;letter-spacing:.12em;font-weight:800;padding:7px 9px;border-radius:999px;background:#eef2f7;color:#6c7890}.badge.live{background:#e6f7ef;color:#168154}
.project h3{font-family:"Space Grotesk";font-size:25px;margin:24px 0 11px}
.project p{color:#65728a;line-height:1.65;margin:0}
.project ul{padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:22px 0}
.project li{font-size:12px;color:#485873}.project li::before{content:"✓";color:#4c6df3;font-weight:800;margin-right:8px}
.project-actions{margin-top:auto;display:flex;gap:18px;padding-top:16px}
.text-link{font-size:13px;font-weight:800;color:#3556d4}.text-link.subtle{color:#78859a}.text-link.disabled{color:#a0aabd}
.coming{align-items:center;justify-content:center;text-align:center;border-style:dashed;background:transparent}.coming .plus{font-size:52px;color:#8b9ab4}

.demo-section{background:#0f2048;color:white}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.demo-grid p{color:#c7d2ed;line-height:1.75;font-size:16px}
.demo-console{background:#0a1531;border:1px solid rgba(255,255,255,.13);border-radius:18px;overflow:hidden;box-shadow:0 28px 70px rgba(0,0,0,.3)}
.console-head{height:52px;display:flex;align-items:center;gap:7px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.console-head span{width:9px;height:9px;border-radius:50%;background:#6a789a}.console-head b{font-size:10px;letter-spacing:.13em;margin-left:8px;color:#8fa1ca}
.demo-row{display:flex;align-items:center;justify-content:space-between;padding:22px;border-bottom:1px solid rgba(255,255,255,.07)}
.demo-row:last-child{border-bottom:0}.demo-row small{display:block;font-size:9px;letter-spacing:.14em;color:#788cb8;margin-bottom:5px}.demo-row strong{font-size:14px}
.demo-status{font-size:9px;font-weight:800;letter-spacing:.11em;color:#7f91b9}.demo-status.online{color:#4bd19b}

.vision-grid{display:grid;grid-template-columns:90px 1fr;gap:55px 30px}
.vision-number{font-family:"Space Grotesk";font-size:56px;color:#dce4f3;font-weight:700}
.vision-grid>div:nth-child(even){border-bottom:1px solid var(--line);padding-bottom:45px}
.vision-grid p{color:#65728a;line-height:1.75;max-width:780px}

.contact{padding-top:30px}
.contact-card{background:linear-gradient(135deg,#101f46,#183269);color:white;padding:50px;border-radius:26px;display:flex;align-items:center;justify-content:space-between;gap:45px}
.contact-card h2{margin-bottom:10px}.contact-card p{color:#c8d4ed;line-height:1.7;max-width:650px}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap}.btn.light{background:white;color:#14285a}.btn.ghost{border:1px solid rgba(255,255,255,.23);color:white}

footer{border-top:1px solid var(--line);padding:30px 0;color:#7b889e;font-size:12px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center}.footer-brand{color:#22355f}.footer-right{text-align:right}

@media(max-width:900px){
  nav{display:none;position:absolute;top:76px;left:0;right:0;background:white;flex-direction:column;align-items:stretch;padding:20px;border-bottom:1px solid var(--line)}
  nav.open{display:flex}.nav-toggle{display:block}
  .hero-grid,.about-grid,.demo-grid{grid-template-columns:1fr}
  .hero-grid{padding:80px 0 60px}.hero-visual{height:430px}
  .about-grid{gap:40px}.portrait-card{max-width:480px;margin:auto}
  .projects-grid{grid-template-columns:1fr}.section-head{align-items:flex-start;flex-direction:column}
  .contact-card{align-items:flex-start;flex-direction:column}
}
@media(max-width:620px){
  .container{width:min(100% - 28px,1180px)}
  .section{padding:75px 0}.hero-grid{min-height:auto}.hero h1{font-size:48px}.hero-text{font-size:16px}
  .hero-meta{gap:17px;flex-wrap:wrap}.hero-visual{height:360px}.core-orb{width:200px;height:200px}.floating-card{min-width:150px;padding:12px}.card-a{top:45px}.card-b{top:170px}.card-c{bottom:45px}
  .projects-grid{gap:14px}.project{padding:22px}.project ul{grid-template-columns:1fr}
  .vision-grid{grid-template-columns:55px 1fr;gap:35px 18px}.vision-number{font-size:40px}
  .contact-card{padding:30px}.footer-grid{grid-template-columns:1fr;gap:15px;text-align:center}.footer-right{text-align:center}.footer-brand{justify-content:center}
}