:root {
  --bg: #07111f;
  --bg-soft: #0d1a2b;
  --panel: rgba(13, 26, 43, 0.84);
  --panel-solid: #102238;
  --text: #eef5ff;
  --muted: #a9bdd5;
  --line: rgba(171, 204, 235, 0.16);
  --accent: #59b7ff;
  --accent-2: #8ad7ff;
  --good: #89e6c2;
  --max: 1180px;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.24);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }
.skip-link { position: fixed; top: -80px; left: 16px; padding: 10px 14px; background: #fff; color: #000; z-index: 100; border-radius: 8px; }
.skip-link:focus { top: 16px; }
.container { width: min(var(--max), calc(100% - 36px)); margin: 0 auto; }
.nav { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(16px); background: rgba(7,17,31,.82); border-bottom: 1px solid var(--line); }
.nav-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 760; letter-spacing: .01em; }
.brand-mark { width: 33px; height: 33px; border-radius: 10px; display:grid; place-items:center; background: linear-gradient(135deg, var(--accent), #17629a); color:#06101e; font-weight:900; }
.nav-links { display:flex; gap:18px; align-items:center; color:var(--muted); font-size:.92rem; }
.nav-links a:hover { color:var(--text); }
.nav-cta { padding: 9px 13px; border:1px solid rgba(89,183,255,.55); border-radius:10px; color:var(--accent-2) !important; }
.hero { position: relative; min-height: 760px; display: flex; align-items: center; overflow: hidden; border-bottom:1px solid var(--line); }
.hero::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(7,17,31,.99) 0%, rgba(7,17,31,.92) 42%, rgba(7,17,31,.64) 72%, rgba(7,17,31,.56) 100%), url('../img/hero-rack.jpg') center/cover; }
.hero::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 78% 24%, rgba(89,183,255,.18), transparent 34%); }
.hero-content { position:relative; z-index:1; padding: 92px 0 72px; max-width: 790px; }
.eyebrow { text-transform:uppercase; letter-spacing:.17em; font-size:.75rem; color:var(--accent-2); font-weight:760; margin:0 0 14px; }
h1 { font-size:clamp(3.3rem, 8vw, 6.7rem); line-height:.95; letter-spacing:-.075em; margin:0; max-width:780px; }
.hero-subtitle { margin:20px 0 0; max-width:690px; color:#d7e8fa; font-size:clamp(1.08rem, 2vw, 1.38rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 16px; border-radius:11px; border:1px solid var(--line); background:rgba(255,255,255,.045); color:var(--text); cursor:pointer; transition:.2s ease; }
.btn:hover { transform:translateY(-2px); border-color:rgba(89,183,255,.72); background:rgba(89,183,255,.12); }
.btn-primary { background:var(--accent); color:#05111d; border-color:var(--accent); font-weight:760; }
.btn-primary:hover { background:#86d3ff; color:#05111d; }
.hero-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.tag { padding:7px 11px; border-radius:999px; color:#d7ebff; border:1px solid rgba(154,200,240,.19); background:rgba(8,27,45,.48); font-size:.85rem; }
.section { padding:88px 0; border-bottom:1px solid var(--line); }
.section-head { display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:28px; }
.section h2 { font-size:clamp(2rem,4vw,3.4rem); letter-spacing:-.055em; line-height:1; margin:0; }
.section-copy { color:var(--muted); max-width:680px; margin:14px 0 0; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:28px; }
.stat { border:1px solid var(--line); background:linear-gradient(145deg, rgba(17,39,63,.88), rgba(11,25,42,.9)); border-radius:16px; padding:18px; box-shadow:var(--shadow); }
.stat strong { display:block; font-size:1.8rem; line-height:1; letter-spacing:-.055em; }
.stat span { display:block; color:var(--muted); font-size:.88rem; margin-top:8px; }
.grid-2 { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; }
.card { border:1px solid var(--line); background:linear-gradient(145deg, rgba(16,34,56,.92), rgba(9,22,38,.96)); border-radius:18px; padding:22px; box-shadow:var(--shadow); }
.card h3 { margin:0 0 8px; font-size:1.2rem; letter-spacing:-.02em; }
.card p { margin:0; color:var(--muted); }
.bullets { padding-left:18px; margin:15px 0 0; color:#d9e7f6; }
.bullets li { margin:8px 0; }
.gallery-shell { border:1px solid var(--line); border-radius:20px; background:rgba(9,22,38,.68); box-shadow:var(--shadow); overflow:hidden; }
.gallery-top { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px; border-bottom:1px solid var(--line); }
.filters { display:flex; gap:8px; flex-wrap:wrap; }
.filter { border:1px solid var(--line); color:var(--muted); background:transparent; padding:7px 11px; border-radius:999px; cursor:pointer; }
.filter.active, .filter:hover { color:#06101e; background:var(--accent-2); border-color:var(--accent-2); }
.gallery-controls { display:flex; gap:8px; }
.icon-btn { width:38px; height:38px; border-radius:10px; border:1px solid var(--line); color:var(--text); background:rgba(255,255,255,.045); cursor:pointer; }
.icon-btn:hover { border-color:var(--accent); background:rgba(89,183,255,.12); }
.gallery-rail { display:flex; gap:13px; overflow-x:auto; padding:15px; scrollbar-width:thin; scrollbar-color:rgba(138,215,255,.5) transparent; scroll-snap-type:x proximity; cursor:grab; }
.gallery-rail.dragging { cursor:grabbing; user-select:none; }
.photo-card { position:relative; flex:0 0 clamp(230px, 26vw, 320px); height:390px; scroll-snap-align:start; overflow:hidden; border-radius:14px; background:#0b1a2b; border:1px solid var(--line); cursor:pointer; }
.photo-card img { width:100%; height:100%; object-fit:cover; transition:transform .32s ease; }
.photo-card:hover img { transform:scale(1.04); }
.photo-card figcaption { position:absolute; inset:auto 0 0; padding:44px 13px 13px; font-size:.84rem; color:white; background:linear-gradient(transparent, rgba(0,0,0,.86)); }
.photo-kicker { display:block; color:var(--accent-2); font-size:.69rem; text-transform:uppercase; letter-spacing:.13em; margin-bottom:4px; }
.cert-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.cert-card { display:flex; flex-direction:column; min-height:315px; border:1px solid var(--line); border-radius:18px; padding:18px; background:linear-gradient(145deg,rgba(18,38,63,.93),rgba(9,22,38,.98)); box-shadow:var(--shadow); }
.cert-logo { height:135px; display:grid; place-items:center; border-radius:13px; background:#fff; padding:13px; overflow:hidden; }
.cert-logo img { max-height:110px; object-fit:contain; }
.azure-logo { background:linear-gradient(135deg,#eef8ff,#cdeaff); color:#0b2f57; }
.azure-mark { display:flex; align-items:center; gap:12px; font-size:1.1rem; font-weight:800; }
.ms-grid { display:grid; grid-template-columns:repeat(2,17px); grid-template-rows:repeat(2,17px); gap:3px; }
.ms-grid span { background:#107c10; } .ms-grid span:nth-child(2){background:#ffb900}.ms-grid span:nth-child(3){background:#f25022}.ms-grid span:nth-child(4){background:#00a4ef}
.cert-card h3 { margin:17px 0 2px; font-size:1.15rem; }
.cert-card p { margin:0; color:var(--muted); font-size:.9rem; }
.card-actions { margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; padding-top:16px; }
.small-link { color:var(--accent-2); font-size:.88rem; font-weight:700; }
.lab-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.lab-card { display:flex; flex-direction:column; overflow:hidden; border-radius:18px; border:1px solid var(--line); background:linear-gradient(145deg,rgba(17,38,62,.94),rgba(8,21,36,.97)); box-shadow:var(--shadow); }
.lab-card img { width:100%; aspect-ratio:16/9; object-fit:cover; border-bottom:1px solid var(--line); }
.lab-body { display:flex; flex-direction:column; height:100%; padding:17px; }
.lab-card h3 { margin:6px 0 7px; font-size:1.15rem; }
.lab-card p { margin:0; color:var(--muted); font-size:.93rem; }
.lab-tags { display:flex; gap:6px; flex-wrap:wrap; margin:13px 0; }
.lab-tags span { font-size:.75rem; padding:4px 7px; border:1px solid var(--line); color:#cfe6fb; border-radius:999px; }
.project { display:grid; grid-template-columns:1fr .82fr; gap:18px; align-items:stretch; }
.project-visual { border-radius:18px; min-height:260px; border:1px solid var(--line); background: radial-gradient(circle at 20% 20%, rgba(89,183,255,.22), transparent 35%), linear-gradient(145deg,#153250,#081522); padding:22px; display:flex; flex-direction:column; justify-content:end; box-shadow:var(--shadow); }
.project-video { border-radius:18px; border:1px solid var(--line); overflow:hidden; background:linear-gradient(145deg,#153250,#081522); box-shadow:var(--shadow); display:flex; flex-direction:column; }
.project-video video { width:100%; aspect-ratio:16/9; display:block; background:#050a10; object-fit:cover; border-bottom:1px solid var(--line); }
.video-copy { padding:18px 20px 20px; }
.video-copy .eyebrow { margin-bottom:7px; }
.video-copy h3 { margin:0; font-size:1.35rem; letter-spacing:-.025em; }
.video-copy p:last-child { margin:8px 0 0; color:var(--muted); font-size:.92rem; }

.code-lines { display:grid; gap:8px; opacity:.82; margin-bottom:auto; }
.code-lines span { height:7px; background:rgba(169,218,255,.28); border-radius:999px; } .code-lines span:nth-child(2){width:78%}.code-lines span:nth-child(3){width:58%}.code-lines span:nth-child(4){width:88%}
.contact { text-align:center; padding:100px 0; }
.contact h2 { max-width:800px; margin:0 auto; }
.contact p { color:var(--muted); max-width:650px; margin:16px auto 0; }
.footer { padding:22px 0; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
.footer-inner { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.lightbox { position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center; padding:22px; background:rgba(0,0,0,.89); }
.lightbox.open { display:flex; }
.lightbox-inner { position:relative; max-width:min(1000px,96vw); max-height:94vh; }
.lightbox img { max-height:82vh; margin:auto; border-radius:12px; box-shadow:0 28px 70px rgba(0,0,0,.45); }
.lightbox p { color:white; margin:12px 0 0; text-align:center; }
.lightbox-close { position:absolute; right:-6px; top:-48px; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.45); color:#fff; cursor:pointer; }
.detail-hero { padding:90px 0 45px; border-bottom:1px solid var(--line); background:radial-gradient(circle at 80% 10%, rgba(89,183,255,.18),transparent 32%); }
.detail-hero h1 { font-size:clamp(2.6rem,7vw,5.4rem); max-width:1000px; }
.detail-grid { display:grid; grid-template-columns:1fr 330px; gap:18px; align-items:start; }
.detail-sidebar { position:sticky; top:88px; }
.figure { margin:20px 0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; }
.figure img { width:100%; }
.figure figcaption { background:#0a1828; color:var(--muted); padding:10px 12px; font-size:.84rem; }
.info-table { width:100%; border-collapse:collapse; margin-top:13px; }
.info-table th,.info-table td { border-bottom:1px solid var(--line); text-align:left; vertical-align:top; padding:10px 0; font-size:.9rem; }
.info-table th { color:#d9ecff; width:38%; } .info-table td { color:var(--muted); }
@media(max-width:900px){
  .nav-links a:not(.nav-cta){display:none}.hero{min-height:700px}.stat-grid{grid-template-columns:repeat(2,1fr)}.grid-2,.project,.detail-grid{grid-template-columns:1fr}.cert-grid,.lab-grid{grid-template-columns:1fr}.detail-sidebar{position:static}.photo-card{flex-basis:270px;height:350px}
}
@media(max-width:1120px){
  .cert-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .container{width:min(100% - 24px,var(--max))}.hero{min-height:650px}.hero-content{padding:75px 0 48px}.section{padding:68px 0}.gallery-top{align-items:flex-start;flex-direction:column}.photo-card{flex-basis:245px;height:320px}.stat{padding:15px}.stat strong{font-size:1.55rem}.footer-inner{flex-direction:column}.hero-actions .btn{width:100%}
}