*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#040a15;--bg2:#071326;--panel:rgba(7,20,39,.78);
  --line:rgba(66,166,255,.20);--blue:#16a8ff;--blue2:#62d2ff;
  --white:#f4f8ff;--muted:#9cafc8;--max:1180px;
}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--white);line-height:1.6;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 75% 20%,rgba(0,139,255,.12),transparent 28%),radial-gradient(circle at 15% 70%,rgba(0,78,180,.09),transparent 30%);pointer-events:none;z-index:-3}
.bg-grid{position:fixed;inset:0;opacity:.13;z-index:-2;background-image:linear-gradient(rgba(53,139,220,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(53,139,220,.25) 1px,transparent 1px);background-size:55px 55px;mask-image:linear-gradient(to bottom,#000,transparent 90%)}
.glow{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:-1}
.glow-1{width:300px;height:300px;background:rgba(0,143,255,.12);top:10%;left:-100px}
.glow-2{width:260px;height:260px;background:rgba(0,93,255,.10);bottom:5%;right:-100px}
a{color:inherit;text-decoration:none}
.navbar{position:fixed;top:0;left:0;right:0;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100% - var(--max))/2));background:rgba(3,9,19,.76);backdrop-filter:blur(18px);border-bottom:1px solid rgba(85,170,255,.12);z-index:100}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{font-family:"Space Grotesk";font-size:21px;font-weight:800;color:#fff;background:linear-gradient(135deg,#20baff,#0879e8);padding:5px 8px;border-radius:9px;box-shadow:0 0 25px rgba(0,164,255,.25)}
.brand strong{display:block;font-size:13px;letter-spacing:.4px}
.brand small{display:block;color:#7890ad;font-size:11px}
nav{display:flex;gap:29px}
nav a{font-size:12px;font-weight:600;color:#c2d0e2;letter-spacing:.4px;padding:28px 0;position:relative}
nav a:hover,nav a.active{color:#36baff}
nav a.active:after{content:"";position:absolute;height:2px;left:0;right:0;bottom:20px;background:#1aaeff;box-shadow:0 0 10px #1aaeff}
.menu-toggle{display:none;background:none;border:0}
.menu-toggle span{display:block;width:25px;height:2px;background:white;margin:5px}
.section{width:min(var(--max),calc(100% - 48px));margin:auto;padding:105px 0}
.hero{min-height:760px;padding-top:145px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:35px}
.eyebrow,.section-label{font-size:11px;letter-spacing:2px;color:#46bfff;font-weight:700}
.eyebrow{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(40,166,255,.4);border-radius:30px;padding:8px 13px;background:rgba(0,119,255,.07)}
.eyebrow span{width:8px;height:8px;background:#20b8ff;border-radius:50%;box-shadow:0 0 10px #20b8ff}
h1{font-family:"Space Grotesk";font-size:clamp(60px,7vw,94px);line-height:.9;letter-spacing:-4px;margin:25px 0}
h1 span,h2 span{background:linear-gradient(90deg,#fff,#30baff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h2{max-width:600px;font-size:23px;line-height:1.35;margin-bottom:8px}
.school{color:#b4c7de;font-weight:500}
.lead{max-width:600px;color:#91a7c0;margin-top:18px;font-size:15px}
.hero-actions{display:flex;gap:13px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:18px;border-radius:10px;padding:14px 21px;font-size:13px;font-weight:700;transition:.25s;border:1px solid var(--line)}
.btn-primary{background:linear-gradient(135deg,#0a8eea,#1361e8);box-shadow:0 10px 30px rgba(0,139,255,.22)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 40px rgba(0,139,255,.35)}
.btn-outline{background:rgba(7,20,40,.4)}
.btn-outline:hover{border-color:#25aeff;background:rgba(20,126,255,.09);transform:translateY(-3px)}
.mini-stats{display:flex;gap:35px;margin-top:35px}
.mini-stats strong{display:block;color:#45bdff;font-family:"Space Grotesk";font-size:20px}
.mini-stats small{color:#6f86a3;font-size:10px;text-transform:uppercase;letter-spacing:1px}
.hero-visual{height:560px;position:relative;display:flex;align-items:center;justify-content:center}
.profile-frame{position:relative;width:min(390px,70vw);aspect-ratio:1;border-radius:50%;padding:10px;background:linear-gradient(135deg,#1caeff,#005eea);box-shadow:0 0 70px rgba(0,151,255,.23);z-index:4}
.profile-frame:after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(255,255,255,.3)}
.profile-frame img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:50%;display:block}
.orbit{position:absolute;border:1px solid rgba(26,166,255,.28);border-radius:50%}
.orbit-outer{width:530px;height:530px;animation:spin 20s linear infinite}
.orbit-inner{width:440px;height:440px;border-color:rgba(26,166,255,.13);animation:spin 13s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.floating-card{position:absolute;z-index:6;padding:11px 14px;border:1px solid rgba(39,170,255,.35);background:rgba(5,17,33,.85);backdrop-filter:blur(10px);border-radius:10px;min-width:120px;box-shadow:0 15px 30px rgba(0,0,0,.25)}
.floating-card .icon{display:block;color:#42bdff;font-size:20px;margin-bottom:2px}
.floating-card b{display:block;font-size:10px;letter-spacing:1px}
.floating-card small{color:#7891ad;font-size:9px}
.card-network{left:0;top:34%}.card-cloud{right:3%;top:12%}.card-ai{right:-2%;bottom:22%}.card-security{left:6%;bottom:14%}
.skill-strip{width:min(1160px,calc(100% - 48px));margin:0 auto 20px;display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.skill-item{padding:18px 8px;text-align:center;border:1px solid rgba(49,130,206,.19);background:rgba(7,20,39,.65);border-radius:8px;color:#c2d3e7;font-size:10px;font-weight:600}
.skill-item span{display:block;color:#25b3ff;font-size:22px;font-weight:800;margin-bottom:5px}
.split-section{display:grid;grid-template-columns:.55fr 1fr;gap:80px;border-top:1px solid rgba(75,149,220,.12)}
.section-content h2,.section-heading h2{font-family:"Space Grotesk";font-size:clamp(35px,4vw,55px);line-height:1.1;margin:12px 0 18px}
.section-content p,.section-heading p{color:#8fa5be;max-width:750px;font-size:14px;margin-bottom:15px}
.values{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
.values div{display:flex;gap:12px;padding:13px;border:1px solid var(--line);background:rgba(10,28,52,.45);border-radius:8px}
.values b{color:#28b6ff;font-size:11px}.values span{font-size:12px}
.section-heading{margin-bottom:45px}
.lab-section{border-top:1px solid rgba(75,149,220,.12)}
.topology{border:1px solid rgba(53,160,245,.25);border-radius:17px;padding:35px 25px;background:linear-gradient(145deg,rgba(9,29,53,.86),rgba(4,14,29,.86));position:relative;overflow:hidden}
.topology:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(30,125,215,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(30,125,215,.1) 1px,transparent 1px);background-size:35px 35px}
.topology-node,.infra-box{position:relative;z-index:2;border:1px solid rgba(47,169,255,.38);background:rgba(3,14,29,.86);border-radius:10px;padding:14px;text-align:center}
.topology-node{width:180px;margin:auto}.topology-node span,.infra-box span{display:block;color:#2db8ff;font-size:25px}
.topology-node strong,.infra-box strong{display:block;font-size:11px;letter-spacing:.6px}.topology-node small,.infra-box small{display:block;color:#718ba7;font-size:9px;margin-top:3px}
.topology-line{position:relative;z-index:2;height:34px;width:1px;background:#20a9ff;margin:auto;box-shadow:0 0 12px #20a9ff}
.topology-bottom{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:35px}
.architecture-notes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:13px}
.architecture-notes div{padding:16px;border:1px solid rgba(56,149,226,.14);background:rgba(8,23,43,.5);border-radius:8px}
.architecture-notes b{display:block;color:#34baff;font-size:10px;letter-spacing:1px}.architecture-notes span{display:block;color:#758da9;font-size:10px;margin-top:4px}
.project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.project-card{position:relative;padding:28px 22px;border:1px solid rgba(49,145,225,.2);border-radius:13px;background:linear-gradient(150deg,rgba(9,29,53,.75),rgba(5,15,29,.72));overflow:hidden;transition:.25s}
.project-card:hover{transform:translateY(-7px);border-color:rgba(44,177,255,.55);box-shadow:0 20px 50px rgba(0,120,255,.1)}
.project-number{position:absolute;right:17px;top:15px;color:#284562;font-size:12px}.project-icon{font-size:28px;color:#32b9ff;margin-bottom:25px}
.project-card h3{font-size:16px;margin-bottom:9px}.project-card p{color:#8198b3;font-size:12px;min-height:80px}.tags{display:flex;flex-wrap:wrap;gap:5px}.tags span{font-size:9px;color:#7ccfff;border:1px solid rgba(51,174,255,.2);padding:4px 7px;border-radius:20px}
.roadmap-section{border-top:1px solid rgba(75,149,220,.12)}
.roadmap{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:12px;align-items:center}
.road-step{padding:24px 18px;min-height:190px;border:1px solid rgba(47,150,235,.24);background:rgba(8,24,45,.7);border-radius:12px}
.step-circle{width:37px;height:37px;display:grid;place-items:center;border-radius:50%;background:#0a78d7;color:#fff;font-size:11px;font-weight:800;box-shadow:0 0 20px rgba(0,145,255,.25);margin-bottom:20px}
.road-step h3{font-size:15px;margin-bottom:8px}.road-step p{font-size:11px;color:#7f96b0}.road-arrow{color:#1aaeff;font-size:25px}
.contact-section{padding-top:70px;padding-bottom:70px}
.contact-card{border:1px solid rgba(50,159,245,.3);border-radius:16px;padding:45px;display:flex;justify-content:space-between;align-items:center;gap:30px;background:radial-gradient(circle at 80% 50%,rgba(0,128,255,.15),transparent 35%),rgba(7,22,42,.8)}
.contact-card h2{font-family:"Space Grotesk";font-size:38px;line-height:1.1;margin:12px 0}.contact-card p{color:#8097b2;max-width:600px;font-size:13px}.contact-actions{display:flex;gap:10px;flex-wrap:wrap}
footer{width:min(var(--max),calc(100% - 48px));margin:auto;padding:25px 0 35px;border-top:1px solid rgba(75,149,220,.12);display:flex;justify-content:space-between;color:#526a85;font-size:10px}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.show{opacity:1;transform:none}

@media(max-width:950px){
  nav{gap:16px}.hero{grid-template-columns:1fr}.hero-visual{height:500px;order:-1;margin-top:40px}.hero-copy{padding-bottom:30px}
  .skill-strip{grid-template-columns:repeat(4,1fr)}
  .project-grid{grid-template-columns:repeat(2,1fr)}
  .roadmap{grid-template-columns:1fr 1fr}.road-arrow{display:none}
  .architecture-notes{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .navbar{height:68px}.brand strong{font-size:11px}
  .menu-toggle{display:block;cursor:pointer}
  nav{display:none;position:absolute;top:68px;left:12px;right:12px;flex-direction:column;gap:0;padding:8px 18px;background:rgba(4,12,25,.97);border:1px solid var(--line);border-radius:10px}
  nav.open{display:flex}nav a{padding:13px 0}nav a.active:after{bottom:5px}
  .section{width:min(100% - 32px,560px);padding:80px 0}.hero{padding-top:105px;min-height:auto}
  h1{font-size:57px;letter-spacing:-3px}.hero h2{font-size:18px}.lead{font-size:13px}
  .hero-actions{flex-direction:column;align-items:stretch}.btn{justify-content:center}
  .hero-visual{height:390px}.profile-frame{width:275px}.orbit-outer{width:360px;height:360px}.orbit-inner{width:310px;height:310px}
  .floating-card{transform:scale(.8)}.card-network{left:-8px}.card-security{left:-10px}.card-cloud{right:-5px}.card-ai{right:-12px}
  .skill-strip{width:calc(100% - 32px);grid-template-columns:repeat(2,1fr)}
  .split-section{grid-template-columns:1fr;gap:20px}.values{grid-template-columns:1fr}
  .topology-bottom,.architecture-notes{grid-template-columns:1fr}.project-grid{grid-template-columns:1fr}
  .roadmap{grid-template-columns:1fr}.road-step{min-height:auto}
  .contact-card{padding:28px;flex-direction:column;align-items:flex-start}.contact-card h2{font-size:31px}
  footer{width:calc(100% - 32px);flex-direction:column;gap:7px}
}