:root {
  --bg: #060b14;
  --bg-deep: #040810;
  --surface: #0b1422;
  --surface-2: #101b2b;
  --line: rgba(148, 163, 184, 0.14);
  --line-bright: rgba(70, 151, 255, 0.45);
  --text: #f2f7ff;
  --muted: #8fa2bb;
  --blue: #2f81f7;
  --cyan: #35c7ef;
  --green: #48d597;
  --max: 1180px;
  --radius: 18px;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 82% 7%, rgba(38, 127, 255, 0.19), transparent 30rem),
    radial-gradient(circle at 10% 50%, rgba(28, 137, 214, 0.11), transparent 34rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(101, 148, 205, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 148, 205, 0.024) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
  z-index: -1;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
ul { margin: 0; padding: 0; }

.container { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.section { padding: 118px 0; }
.section-tight { padding: 54px 0 100px; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
  transform: translateY(-160%);
  transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); }

.site-noise {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.16;
  background-image: repeating-radial-gradient(circle at 30% 20%, rgba(255,255,255,.055) 0 1px, transparent 1px 4px);
  background-size: 9px 11px;
  mix-blend-mode: soft-light;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
.site-header.is-scrolled {
  border-color: var(--line);
  background: rgba(5, 10, 18, 0.8);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.nav { height: 74px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -0.02em; }
.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-bright);
  border-radius: 9px;
  color: #b9dcff;
  background: linear-gradient(145deg, rgba(47, 129, 247, .18), rgba(47, 129, 247, .04));
  font: 700 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  box-shadow: inset 0 0 20px rgba(47, 129, 247, .08), 0 0 28px rgba(47, 129, 247, .1);
}
.nav-menu { display: flex; align-items: center; gap: 30px; }
.nav-menu > a:not(.nav-cta) { color: var(--muted); font-size: 13px; font-weight: 600; transition: color 180ms ease; }
.nav-menu > a:not(.nav-cta):hover, .nav-menu > a:not(.nav-cta):focus-visible { color: var(--text); }
.nav-cta { padding: 9px 15px; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; font-weight: 700; background: rgba(255,255,255,.025); transition: 180ms ease; }
.nav-cta:hover, .nav-cta:focus-visible { border-color: var(--line-bright); background: rgba(47,129,247,.09); transform: translateY(-1px); }
.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.nav-toggle span { width: 18px; height: 1px; display: block; margin: 6px auto; background: var(--text); transition: transform 180ms ease; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.hero { min-height: 760px; padding: 140px 0 82px; display: grid; align-items: center; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr); align-items: center; gap: clamp(50px, 8vw, 110px); }
.eyebrow, .section-index, .project-meta, .role-type, .recognition-label, .recognition-card p, .article-copy p {
  font: 600 11px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 28px; color: #9bb1c9; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(72,213,151,.09), 0 0 16px rgba(72,213,151,.6); }
.hero-kicker { margin-bottom: 10px; color: #a8bdd5; font-weight: 600; }
.hero h1 { margin-bottom: 24px; font-size: clamp(50px, 6.3vw, 82px); line-height: .98; letter-spacing: -.062em; font-weight: 730; }
.hero h1 span { color: transparent; -webkit-text-stroke: 1px rgba(132,190,255,.75); text-shadow: 0 0 38px rgba(47,129,247,.2); }
.hero-lead { max-width: 620px; margin-bottom: 34px; color: var(--muted); font-size: clamp(17px, 2vw, 20px); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 46px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 0 20px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 750; transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button-primary { color: #fff; background: linear-gradient(135deg, #2378ed, #1764ce); box-shadow: 0 10px 32px rgba(28,111,225,.22), inset 0 1px rgba(255,255,255,.2); }
.button-primary:hover, .button-primary:focus-visible { box-shadow: 0 14px 38px rgba(28,111,225,.36), 0 0 0 4px rgba(47,129,247,.09); }
.button-ghost { border-color: var(--line); background: rgba(255,255,255,.025); }
.button-ghost:hover, .button-ghost:focus-visible { border-color: var(--line-bright); background: rgba(47,129,247,.07); }
.hero-proof { display: flex; gap: 0; }
.hero-proof > div { min-width: 128px; padding-right: 28px; margin-right: 28px; border-right: 1px solid var(--line); }
.hero-proof > div:last-child { margin: 0; padding: 0; border: 0; }
.hero-proof strong { display: block; margin-bottom: 4px; font-size: 25px; line-height: 1; color: #d9ecff; }
.hero-proof span { display: block; color: #70849b; font-size: 11px; }

.hero-visual { min-width: 0; }
.portrait-shell { position: relative; aspect-ratio: 4 / 5.15; max-height: 590px; overflow: hidden; border: 1px solid rgba(89,151,226,.23); border-radius: 0; background: #08101b; box-shadow: var(--shadow), 0 0 80px rgba(30,104,207,.11); isolation: isolate; }
.portrait-shell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #06101e 0%, transparent 36%), linear-gradient(100deg, rgba(8,26,50,.2), transparent); pointer-events: none; z-index: 2; }
.portrait-shell img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; filter: saturate(.82) contrast(1.05); transition: transform 700ms cubic-bezier(.2,.8,.2,1), filter 700ms ease; }
.portrait-shell:hover img { transform: scale(1.028); filter: saturate(.94) contrast(1.04); }
.portrait-grid { position: absolute; inset: 0; z-index: 1; opacity: .22; background-image: linear-gradient(rgba(71,149,245,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(71,149,245,.15) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(to top, black, transparent 62%); }
.portrait-label { position: absolute; z-index: 4; border: 1px solid rgba(115,177,255,.24); color: #bdd9f6; background: rgba(5,12,23,.74); backdrop-filter: blur(10px); font: 600 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.portrait-label-top { top: 22px; right: 22px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.portrait-label-top span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }
.portrait-label-bottom { left: 22px; right: 22px; bottom: 20px; padding: 15px 17px; }
.portrait-label-bottom small { display: block; margin-bottom: 6px; color: #5f7d9d; font-size: 8px; }
.corner { position: absolute; z-index: 5; width: 22px; height: 22px; box-sizing: border-box; border: 0 solid var(--cyan); opacity: .75; pointer-events: none; }
.corner-tl { top: 10px; left: 10px; border-top-width: 1px; border-left-width: 1px; }
.corner-tr { top: 10px; right: 10px; border-top-width: 1px; border-right-width: 1px; }
.corner-bl { bottom: 10px; left: 10px; border-bottom-width: 1px; border-left-width: 1px; }
.corner-br { bottom: 10px; right: 10px; border-bottom-width: 1px; border-right-width: 1px; }

.section-intro { display: grid; grid-template-columns: .75fr 2fr; align-items: end; gap: 32px; margin-bottom: 32px; }
.section-index { margin-bottom: 14px; color: #5192dd; }
.section-intro .section-index { margin: 0 0 8px; }
.section-intro h2, .section-heading h2, .experience-sticky h2 { margin: 0; font-size: clamp(32px, 4vw, 49px); line-height: 1.08; letter-spacing: -.045em; }
.capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: rgba(8,16,28,.6); }
.capability-card { min-height: 275px; position: relative; padding: 27px; border-right: 1px solid var(--line); overflow: hidden; isolation:isolate; transition: background-color 220ms ease, transform 220ms ease; }
.capability-card:last-child { border: 0; }
.capability-card::before,.capability-card::after { content:""; position:absolute; pointer-events:none; transition:opacity 220ms ease; }
.capability-card:nth-child(1)::before { z-index:-2; inset:-80px -45px; opacity:.25; background-image:linear-gradient(rgba(68,155,255,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(68,155,255,.18) 1px,transparent 1px); background-size:54px 54px; transform:rotate(-8deg); animation:hospitality-grid 13s linear infinite; }
.capability-card:nth-child(1)::after { z-index:-1; width:145%; height:58px; left:-24%; top:-75px; opacity:.42; background:linear-gradient(90deg,transparent,rgba(55,151,255,.32),rgba(112,199,255,.55),transparent); filter:blur(15px); transform:rotate(-8deg); animation:hospitality-light 7s ease-in-out infinite; }
.capability-card:nth-child(2)::before { z-index:-2; inset:0; opacity:.34; background-image:linear-gradient(90deg,transparent 0 14%,rgba(62,153,255,.24) 14% 14.6%,transparent 14.6% 48%,rgba(62,153,255,.16) 48% 48.5%,transparent 48.5%),linear-gradient(0deg,transparent 0 22%,rgba(62,153,255,.2) 22% 22.8%,transparent 22.8% 72%,rgba(62,153,255,.14) 72% 72.6%,transparent 72.6%); background-size:130px 76px; animation:infrastructure-circuit 10s linear infinite; }
.capability-card:nth-child(2)::after { z-index:-1; left:-20%; right:-20%; top:12%; height:2px; opacity:.68; background:linear-gradient(90deg,transparent,rgba(70,177,255,.24),#70c6ff,rgba(70,177,255,.24),transparent); box-shadow:0 0 15px rgba(55,158,255,.72),0 0 34px rgba(40,122,255,.36); animation:infrastructure-scan 5.5s ease-in-out infinite alternate; }
.capability-card:nth-child(3)::before { z-index:-2; width:390px; height:260px; left:-105px; bottom:-72px; opacity:.31; border-radius:50%; background:repeating-radial-gradient(ellipse at 18% 52%,transparent 0 27px,rgba(72,171,255,.3) 28px 29px,transparent 30px 49px); transform-origin:18% 52%; animation:event-signal 6.4s ease-in-out infinite; }
.capability-card:nth-child(3)::after { z-index:-1; width:135%; height:150px; left:17%; top:31%; opacity:.26; background:linear-gradient(90deg,rgba(100,199,255,.42),rgba(54,145,255,.18) 42%,transparent 84%); clip-path:polygon(0 47%,100% 5%,100% 95%,0 53%); filter:blur(8px); transform-origin:left center; animation:event-beam 7.5s ease-in-out infinite alternate; }
.capability-card:nth-child(4)::before { z-index:-2; width:310px; height:310px; right:-105px; bottom:-135px; opacity:.42; border:1px solid rgba(65,159,255,.28); border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 31px,rgba(71,166,255,.2) 32px 33px,transparent 34px 49px); box-shadow:inset 0 0 45px rgba(31,112,220,.15),0 0 35px rgba(31,112,220,.08); animation:security-radar-pulse 4.2s ease-in-out infinite alternate; }
.capability-card:nth-child(4)::after { z-index:-1; width:310px; height:310px; right:-105px; bottom:-135px; opacity:.5; border-radius:50%; background:conic-gradient(from 0deg,transparent 0 300deg,rgba(70,172,255,.04) 318deg,rgba(88,190,255,.52) 354deg,transparent 360deg); -webkit-mask:radial-gradient(circle,#000 0 69%,transparent 70%); mask:radial-gradient(circle,#000 0 69%,transparent 70%); animation:security-radar-sweep 6s linear infinite; }
.capability-card:hover { z-index: 2; background: rgba(15,29,48,.75); transform: translateY(-4px); }
.capability-card:hover::before { opacity:.5; }
.capability-card:hover::after { opacity:.78; }
.card-icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 46px; border: 1px solid rgba(95,173,255,.38); border-radius: 14px; background:linear-gradient(145deg,rgba(47,129,247,.15),rgba(8,26,48,.6)); box-shadow:inset 0 0 18px rgba(52,143,255,.08),0 8px 24px rgba(0,0,0,.18); transition:transform 220ms ease,border-color 220ms ease,box-shadow 220ms ease; }
.card-icon img{width:27px;height:27px;display:block;filter:drop-shadow(0 0 7px rgba(76,168,255,.42))}
.capability-card:hover .card-icon{transform:translateY(-3px) scale(1.06);border-color:rgba(112,190,255,.72);box-shadow:inset 0 0 20px rgba(52,143,255,.15),0 0 25px rgba(42,134,255,.18)}
.card-number { position: absolute; top: 28px; right: 26px; color: #43566e; font: 600 10px/1 ui-monospace, monospace; }
.capability-card h3 { margin-bottom: 10px; font-size: 17px; }
.capability-card p:not(.card-number) { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

@keyframes hospitality-grid{from{background-position:0 0,0 0;transform:rotate(-8deg) translate3d(0,0,0)}to{background-position:0 -108px,-108px 0;transform:rotate(-8deg) translate3d(18px,16px,0)}}
@keyframes hospitality-light{0%,12%{transform:translate3d(0,0,0) rotate(-8deg);opacity:0}45%,60%{opacity:.48}100%{transform:translate3d(0,430px,0) rotate(-8deg);opacity:0}}
@keyframes infrastructure-circuit{from{background-position:0 0,0 0}to{background-position:260px 0,0 -152px}}
@keyframes infrastructure-scan{from{transform:translateY(0);opacity:.24}to{transform:translateY(225px);opacity:.78}}
@keyframes event-signal{0%,100%{transform:scale(.82);opacity:.16}48%{transform:scale(1.08);opacity:.42}68%{transform:scale(.96);opacity:.3}}
@keyframes event-beam{from{transform:rotate(-5deg) scaleX(.72);opacity:.12}to{transform:rotate(6deg) scaleX(1.08);opacity:.34}}
@keyframes security-radar-pulse{from{transform:scale(.9);opacity:.28}to{transform:scale(1.06);opacity:.52}}
@keyframes security-radar-sweep{to{transform:rotate(360deg)}}

.projects { background: linear-gradient(to bottom, rgba(8,17,30,.52), rgba(5,10,18,.08)); border-top: 1px solid rgba(148,163,184,.06); border-bottom: 1px solid rgba(148,163,184,.06); }
.section-heading { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); align-items: end; gap: 60px; margin-bottom: 48px; }
.section-heading p:last-child { max-width: 470px; margin: 0; color: var(--muted); font-size: 14px; }
.projects-heading { grid-template-columns: 1fr auto; }
.projects-intro { max-width: 820px; margin: -26px 0 13px; color: #8fa5bc; font-size: 13px; line-height: 1.75; }
.projects-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(285px, calc((100% - 42px) / 4)); align-items: stretch; gap: 14px; overflow-x: auto; padding: 8px 2px 22px; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: rgba(76,159,255,.72) transparent; }
.project-card { min-width: 0; height: 100%; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: linear-gradient(155deg, rgba(14,27,44,.92), rgba(7,14,24,.96)); box-shadow: 0 18px 45px rgba(0,0,0,.18); scroll-snap-align: start; transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease, box-shadow 260ms ease; }
.project-card:hover { transform: translateY(-7px); border-color: rgba(72,141,227,.47); box-shadow: 0 24px 60px rgba(0,0,0,.3), 0 0 30px rgba(35,113,221,.08); }
.project-visual { position: relative; height: 185px; overflow: hidden; border-bottom: 1px solid var(--line); background-color: #08111e; transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
.project-card:hover .project-visual { transform: scale(1.018); }
.project-body { flex: 1; display: flex; flex-direction: column; padding: 22px 20px 20px; }
.project-meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 17px; color: #5e9be1; font-size: 8px; }
.project-body h3 { min-height: 69px; margin-bottom: 12px; font-size: 18px; line-height: 1.28; letter-spacing: -.025em; }
.project-body > p { min-height: 81px; margin-bottom: 17px; color: var(--muted); font-size: 12.5px; line-height: 1.62; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 20px; list-style: none; }
.tags li, .timeline-tags span { padding: 4px 7px; border: 1px solid rgba(111,160,218,.15); border-radius: 5px; color: #88a7c8; background: rgba(92,137,194,.045); font: 600 8px/1.2 ui-monospace, monospace; }
.project-impact { min-height: 48px; display: flex; gap: 12px; align-items: end; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line); }
.project-impact span { color: #6e839b; font-size: 8px; line-height: 1.2; }
.project-impact strong { display: block; margin-bottom: 3px; color: #b9dcff; font-size: 11px; }

.dashboard-visual { padding: 18px; background-image: radial-gradient(circle at 80% 10%,rgba(18,121,245,.18),transparent 55%), linear-gradient(rgba(47,129,247,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(47,129,247,.05) 1px,transparent 1px); background-size:auto,18px 18px,18px 18px; }
.dash-top { display:flex; gap:5px; margin-bottom:13px}.dash-top span{width:5px;height:5px;border-radius:50%;background:#2269ad}.dash-top span:first-child{background:var(--cyan)}
.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.dash-stats i{height:28px;border:1px solid rgba(56,136,225,.2);background:linear-gradient(135deg,rgba(47,129,247,.16),rgba(47,129,247,.02))}
.dash-chart{position:relative;height:60px;margin-top:7px;border:1px solid rgba(56,136,225,.2);background:repeating-linear-gradient(to bottom,transparent 0 14px,rgba(77,141,212,.08) 15px)}
.dash-chart span{position:absolute;left:4%;right:3%;top:24px;height:1px;background:var(--cyan);box-shadow:25px -12px 0 -0.2px var(--cyan),50px 7px 0 -0.2px var(--cyan),75px -4px 0 -0.2px var(--cyan),100px 10px 0 -0.2px var(--cyan);transform:rotate(-2deg)}
.dash-bars{display:flex;align-items:end;gap:4px;height:23px;margin-top:6px}.dash-bars i{flex:1;background:#185da6;height:45%}.dash-bars i:nth-child(2){height:80%}.dash-bars i:nth-child(3){height:55%}.dash-bars i:nth-child(4){height:95%;background:#2aaad5}.dash-bars i:nth-child(5){height:65%}.dash-bars i:nth-child(6){height:76%}
.environment-visual{background:radial-gradient(circle at 50% 50%,rgba(29,136,225,.17),transparent 52%),linear-gradient(135deg,#08111d,#071827)}
.temp-ring{position:absolute;left:25px;top:28px;width:92px;height:92px;display:grid;place-content:center;border:1px solid rgba(52,195,237,.48);border-radius:50%;color:#bdeaff;box-shadow:inset 0 0 22px rgba(25,151,214,.15),0 0 24px rgba(25,151,214,.1)}.temp-ring::after{content:"";position:absolute;inset:7px;border:4px solid transparent;border-top-color:var(--cyan);border-right-color:var(--blue);border-radius:50%;transform:rotate(34deg)}.temp-ring strong{font:700 23px/1 ui-monospace,monospace}.temp-ring small{margin-left:3px;color:#6c99c0;font-size:9px}
.env-lines{position:absolute;right:22px;top:32px;width:92px}.env-lines span{display:block;height:28px;margin-bottom:6px;border:1px solid rgba(72,145,219,.16);background:linear-gradient(90deg,rgba(35,112,193,.2),transparent)}.env-lines span::before{content:"";display:block;width:42%;height:2px;margin:8px;background:#2179c5;box-shadow:0 6px #153b64}
.env-status{position:absolute;left:25px;right:22px;bottom:17px;padding-top:9px;border-top:1px solid rgba(77,143,208,.18);color:#48d597;font:600 8px/1 monospace;letter-spacing:.12em}
.radio-visual{background:radial-gradient(circle at 55% 35%,rgba(26,110,194,.2),transparent 48%),linear-gradient(135deg,#090e17,#0a1725)}
.radio-device{position:absolute;left:38px;top:18px;width:67px;height:137px;border:1px solid #324762;border-radius:10px 10px 15px 15px;background:linear-gradient(145deg,#1a2735,#070b11);box-shadow:18px 18px 35px rgba(0,0,0,.38)}.radio-device i{position:absolute;left:12px;right:12px;top:18px;height:34px;border:1px solid #284b69;background:#0a2635}.radio-device b{position:absolute;left:22px;top:-15px;width:7px;height:26px;border-radius:3px;background:#354a5b}.radio-device span{position:absolute;left:19px;top:67px;width:29px;height:29px;border:4px solid #27394b;border-radius:50%;box-shadow:0 0 0 1px #42627d}.radio-device small{position:absolute;left:14px;right:14px;bottom:17px;height:16px;background:repeating-linear-gradient(90deg,#1b2a38 0 3px,transparent 3px 6px)}
.radio-data{position:absolute;right:24px;top:31px;width:110px}.radio-data span{display:block;height:25px;margin-bottom:7px;border-left:2px solid #247ad0;background:linear-gradient(90deg,rgba(36,122,208,.18),transparent)}.radio-data span::after{content:"";display:block;width:55%;height:2px;transform:translate(10px,7px);background:#295a85;box-shadow:0 6px #173854}
.archive-visual{background:radial-gradient(circle at 50% 100%,rgba(184,120,40,.12),transparent 60%),linear-gradient(135deg,#0b111a,#101722)}
.shelf{position:absolute;left:23px;right:23px;top:34px;height:74px;display:flex;align-items:end;gap:7px;border-bottom:4px solid #2b3542}.shelf i{flex:1;height:64px;border:1px solid #526175;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#253344,#121a24);box-shadow:inset 5px 0 rgba(184,123,48,.18)}.shelf i:nth-child(2){height:55px}.shelf i:nth-child(4){height:68px}.shelf i::after{content:"";display:block;height:1px;margin:12px 6px;background:#907145;box-shadow:0 7px #475565}
.archive-search{position:absolute;left:23px;right:23px;bottom:26px;height:28px;border:1px solid #34455b;background:#0a111b}.archive-search span{display:block;width:55%;height:2px;margin:9px;background:#344c68;box-shadow:0 6px #1d3148}.archive-search b{position:absolute;right:9px;top:7px;width:12px;height:12px;border:1px solid var(--cyan);border-radius:50%}.archive-search b::after{content:"";position:absolute;width:6px;height:1px;background:var(--cyan);right:-5px;bottom:-2px;transform:rotate(45deg)}
.archive-count{position:absolute;left:23px;bottom:9px;color:#6c8cab;font:600 7px/1 monospace;letter-spacing:.12em}

.experience-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 100px; align-items: start; }
.experience-sticky { position: sticky; top: 118px; }
.experience-sticky p:last-child { max-width: 390px; margin: 25px 0 0; color: var(--muted); font-size: 14px; }
.timeline { position: relative; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 9px; bottom: 0; width: 1px; background: linear-gradient(to bottom, var(--blue), var(--line), transparent); }
.timeline-item { position: relative; display: grid; grid-template-columns: 155px 1fr; gap: 28px; padding: 0 0 42px 28px; }
.timeline-item::before { content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border: 2px solid var(--blue); border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 5px rgba(47,129,247,.08),0 0 18px rgba(47,129,247,.35); }
.timeline-date { padding-top: 1px; color: #7990aa; font: 600 10px/1.4 ui-monospace, monospace; }
.timeline-card { padding: 0 0 36px; border-bottom: 1px solid var(--line); }
.role-type { margin-bottom: 9px; color: #4a8fdc; font-size: 8px; }
.timeline-card h3 { margin-bottom: 3px; font-size: 22px; letter-spacing: -.03em; }
.company { color: #9eb2c8; font-size: 14px; }
.timeline-card ul { display: grid; gap: 9px; margin: 22px 0; list-style: none; }
.timeline-card li { position: relative; padding-left: 18px; color: var(--muted); font-size: 13px; }
.timeline-card li::before { content: ""; position: absolute; left: 0; top: .75em; width: 6px; height: 1px; background: var(--blue); }
.timeline-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.timeline-card small { display: block; margin-top: 17px; color: #5f7186; font-size: 10px; line-height: 1.55; }

.recognition { position: relative; background: #070d17; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.recognition::before { content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 45%,rgba(27,108,214,.09),transparent 30rem);pointer-events:none }
.recognition-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; }
.recognition-featured { grid-row: span 2; display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 27px; padding: 34px; border: 1px solid rgba(58,137,234,.37); border-radius: var(--radius); background: linear-gradient(145deg,rgba(20,50,84,.62),rgba(7,16,29,.82)); box-shadow: inset 0 0 45px rgba(35,111,206,.07), 0 24px 70px rgba(0,0,0,.18); }
.recognition-emblem { width: 112px; height: 112px; display: grid; place-content:center; border: 1px solid rgba(73,156,255,.5); border-radius: 50%; text-align:center; background: repeating-radial-gradient(circle,transparent 0 10px,rgba(47,129,247,.07) 11px),radial-gradient(circle,rgba(47,129,247,.13),transparent 70%);box-shadow:0 0 40px rgba(47,129,247,.11)}
.recognition-emblem span { font-size: 32px; font-weight: 750; line-height:1; }.recognition-emblem small{color:#70a5d9;font:600 8px/1.5 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.13em}
.recognition-label { color:#4f9bf0;font-size:8px}.recognition-featured h3{margin-bottom:10px;font-size:24px;line-height:1.25;letter-spacing:-.035em}.recognition-featured p:not(.recognition-label){margin-bottom:22px;color:var(--muted);font-size:13px}.recognition-stat{display:flex;align-items:end;gap:8px}.recognition-stat strong{color:#b9dcff;font-size:28px;line-height:1}.recognition-stat span{color:#66809a;font-size:9px}
.recognition-card { min-height: 145px; display: flex; align-items: center; gap: 20px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: rgba(12,22,36,.7); transition: transform 220ms ease,border-color 220ms ease,background-color 220ms ease; }
.recognition-card:hover{transform:translateY(-4px);border-color:rgba(64,140,232,.37);background:rgba(15,31,51,.86)}
.recognition-monogram{flex:0 0 52px;height:52px;display:grid;place-items:center;border:1px solid rgba(83,151,232,.27);border-radius:12px;color:#9bcaff;background:rgba(47,129,247,.07);font:700 12px/1 ui-monospace,monospace}
.recognition-card p{margin-bottom:6px;color:#467fbf;font-size:7px}.recognition-card h3{margin-bottom:3px;font-size:15px}.recognition-card span{color:#71869c;font-size:10px}

.skills-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.skill-card { position: relative; grid-column: span 2; min-height: 218px; padding: 27px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg,rgba(13,24,40,.72),rgba(7,13,23,.72)); transition: transform 220ms ease,border-color 220ms ease; }
.skill-card:nth-child(4),.skill-card:nth-child(5){grid-column:span 3}
.skill-card:hover{transform:translateY(-4px);border-color:rgba(65,135,220,.35)}
.skill-index{position:absolute;right:23px;top:22px;color:#3e5369;font:600 9px/1 ui-monospace,monospace}.skill-card h3{max-width:75%;margin-bottom:28px;font-size:17px;line-height:1.3}.skill-list{display:flex;flex-wrap:wrap;gap:7px}.skill-list span{padding:7px 9px;border:1px solid rgba(119,158,204,.13);border-radius:6px;color:#8ca6c1;background:rgba(87,133,187,.035);font:600 9px/1 ui-monospace,monospace;transition:color 180ms ease,border-color 180ms ease,background-color 180ms ease}.skill-list span:hover{color:#b8ddff;border-color:rgba(58,145,249,.3);background:rgba(47,129,247,.07)}

.article-list { border-top: 1px solid var(--line); }
.article-row { display: grid; grid-template-columns: 80px 1fr 50px; align-items: center; min-height: 132px; border-bottom: 1px solid var(--line); transition: background-color 200ms ease,padding 200ms ease; }
.article-row:hover,.article-row:focus-visible{padding-inline:14px;background:linear-gradient(90deg,rgba(35,101,184,.09),transparent 70%)}
.article-num{color:#485b70;font:600 10px/1 ui-monospace,monospace}.article-copy p{margin-bottom:8px;color:#4387d0;font-size:8px}.article-copy h3{margin:0;font-size:clamp(17px,2.2vw,24px);letter-spacing:-.025em}.article-arrow{justify-self:end;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:#79a9d8;transition:transform 200ms ease,border-color 200ms ease}.article-row:hover .article-arrow{transform:rotate(45deg);border-color:rgba(60,144,242,.45)}

.contact { padding-bottom: 90px; }
.contact-shell { position: relative; min-height: 440px; overflow: hidden; padding: 64px; border: 1px solid rgba(59,137,231,.3); border-radius: 22px; background: radial-gradient(circle at 85% 50%,rgba(28,109,220,.18),transparent 35%),linear-gradient(135deg,#0b1c32,#08111e 60%); box-shadow: inset 0 0 80px rgba(37,107,193,.06),0 30px 90px rgba(0,0,0,.26); }
.contact-grid{position:absolute;inset:0;opacity:.35;background-image:linear-gradient(rgba(60,139,229,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(60,139,229,.08) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(90deg,transparent 35%,black)}
.contact-shell::after{content:"";position:absolute;right:9%;top:15%;width:250px;height:250px;border:1px solid rgba(66,153,255,.18);border-radius:50%;box-shadow:0 0 0 42px rgba(66,153,255,.025),0 0 0 84px rgba(66,153,255,.018),0 0 80px rgba(35,116,216,.12)}
.contact-chat-visual{position:absolute;right:9%;top:15%;z-index:2;width:250px;height:250px;display:grid;place-items:center;pointer-events:none}
.contact-chat-visual::before,.contact-chat-visual::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(70,165,255,.42);opacity:0;animation:chat-ring 3s ease-out infinite}
.contact-chat-visual::before{width:104px;height:104px}.contact-chat-visual::after{width:104px;height:104px;animation-delay:1.5s}
.chat-bubble-icon{position:relative;width:86px;height:66px;display:flex;align-items:center;justify-content:center;gap:7px;border:3px solid #66b8ff;border-radius:24px;background:linear-gradient(145deg,rgba(32,130,255,.22),rgba(4,38,81,.76));box-shadow:0 0 14px rgba(48,143,255,.85),0 0 38px rgba(32,122,255,.62),inset 0 0 20px rgba(72,162,255,.18);animation:chat-float 3s ease-in-out infinite}
.chat-bubble-icon::after{content:"";position:absolute;left:13px;bottom:-10px;width:18px;height:18px;border-left:3px solid #66b8ff;border-bottom:3px solid #66b8ff;border-bottom-left-radius:7px;background:#0a2b55;transform:skewY(-28deg);filter:drop-shadow(-3px 5px 5px rgba(38,133,255,.4))}
.chat-bubble-icon i{position:relative;z-index:1;width:8px;height:8px;border-radius:50%;background:#a9dcff;box-shadow:0 0 9px #49a8ff;animation:chat-dot 1.35s ease-in-out infinite}.chat-bubble-icon i:nth-child(2){animation-delay:.16s}.chat-bubble-icon i:nth-child(3){animation-delay:.32s}
.contact-shell:hover .chat-bubble-icon{border-color:#a3d8ff;box-shadow:0 0 18px rgba(71,164,255,1),0 0 52px rgba(32,122,255,.8),inset 0 0 24px rgba(91,181,255,.25)}
.contact-shell>*:not(.contact-grid):not(.contact-chat-visual){position:relative;z-index:2}.contact-shell h2{margin:18px 0 23px;font-size:clamp(43px,6vw,72px);line-height:1.03;letter-spacing:-.055em}.contact-shell h2 span{color:#71b5ff}.contact-shell>p:not(.section-index){max-width:590px;margin-bottom:33px;color:#9bafc6;font-size:16px}.contact-actions{display:flex;align-items:center;gap:25px}.text-link{color:#a9bdd2;font-size:13px;font-weight:700}.text-link:hover{text-decoration:underline;text-underline-offset:5px}

@keyframes chat-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.035)}}
@keyframes chat-dot{0%,60%,100%{transform:translateY(0);opacity:.62}30%{transform:translateY(-6px);opacity:1}}
@keyframes chat-ring{0%{transform:scale(.58);opacity:.65}75%,100%{transform:scale(1.7);opacity:0}}

.footer { padding: 34px 0; border-top: 1px solid var(--line); background: var(--bg-deep); }
.footer-inner { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.footer .brand { margin-bottom: 12px; }.footer-inner p { margin: 0; color:#64778c;font-size:10px;line-height:1.65}.footer-inner>p{text-align:right}

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 650ms ease var(--reveal-delay,0ms), transform 650ms cubic-bezier(.2,.8,.2,1) var(--reveal-delay,0ms); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

:focus-visible { outline: 2px solid #61aaff; outline-offset: 4px; }
::selection { color: #fff; background: rgba(47,129,247,.65); }

@media (max-width: 1080px) {
  .projects-track { grid-auto-columns: minmax(300px,calc((100% - 14px) / 2)); }
  .project-body h3,.project-body>p{min-height:0}
  .capability-grid { grid-template-columns: repeat(2,1fr); }
  .capability-card:nth-child(2) { border-right:0 }.capability-card:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .experience-layout { gap: 55px; }
  .recognition-grid { grid-template-columns: 1.2fr 1fr; }.recognition-featured{grid-row:span 2}.recognition-card:last-child{grid-column:2}
}

@media (max-width: 860px) {
  .section { padding: 92px 0; }
  .nav-toggle { display: block; }
  .nav-menu { position: fixed; top: 74px; left: 18px; right: 18px; display: grid; gap: 0; padding: 12px; border:1px solid var(--line);border-radius:14px;background:rgba(7,14,24,.97);box-shadow:var(--shadow);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transform:translateY(-10px);transition:180ms ease }
  .nav-menu.is-open{opacity:1;visibility:visible;transform:translateY(0)}
  .nav-menu>a:not(.nav-cta){padding:13px 10px;border-bottom:1px solid rgba(148,163,184,.08);font-size:14px}.nav-cta{margin-top:10px;text-align:center}
  .hero{padding-top:120px}.hero-grid{grid-template-columns:1fr;gap:55px}.hero-copy{text-align:center}.eyebrow{justify-content:center}.hero-lead{margin-inline:auto}.hero-actions,.hero-proof{justify-content:center}.hero-visual{width:min(100%,470px);margin-inline:auto}
  .section-intro,.section-heading { grid-template-columns: 1fr; gap: 19px; }.section-heading p:last-child{max-width:620px}
  .experience-layout { grid-template-columns: 1fr; gap: 52px; }.experience-sticky{position:static}.experience-sticky p:last-child{max-width:620px}
  .recognition-grid{grid-template-columns:1fr 1fr}.recognition-featured{grid-column:1/-1;grid-row:auto}.recognition-card:last-child{grid-column:auto}
  .skills-grid{grid-template-columns:1fr 1fr}.skill-card,.skill-card:nth-child(4),.skill-card:nth-child(5){grid-column:auto}
}

@media (max-width: 600px) {
  .container { width: min(calc(100% - 30px), var(--max)); }
  .section { padding: 78px 0; }.section-tight{padding:20px 0 76px}
  .brand-text{font-size:14px}.nav{height:68px}.nav-menu{top:68px}
  .hero{min-height:auto;padding:108px 0 65px}.hero h1{font-size:clamp(44px,14.5vw,64px)}.hero-lead{font-size:16px}.hero-actions{display:grid}.button{width:100%}
  .hero-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.hero-proof>div{min-width:0;margin:0;padding:0 8px}.hero-proof strong{font-size:21px}.hero-proof span{font-size:8px}
  .portrait-shell{border-radius:0}.portrait-label-top{top:16px;right:16px}.portrait-label-bottom{left:16px;right:16px;bottom:16px}
  .section-intro h2,.section-heading h2,.experience-sticky h2{font-size:36px}
  .capability-grid,.recognition-grid,.skills-grid{grid-template-columns:1fr}
  .capability-card{min-height:245px;border-right:0;border-bottom:1px solid var(--line)}.capability-card:nth-child(3){border-bottom:1px solid var(--line)}
  .project-visual{height:210px}.project-card{min-height:520px}
  .timeline-item{grid-template-columns:1fr;gap:13px;padding-left:25px}.timeline-date{padding-top:0}.timeline-card h3{font-size:20px}
  .recognition-featured{grid-template-columns:1fr;padding:27px}.recognition-emblem{width:88px;height:88px}.recognition-card:last-child{grid-column:auto}
  .skill-card{min-height:190px}
  .article-row{grid-template-columns:45px 1fr 38px;min-height:145px}.article-copy h3{font-size:17px}.article-arrow{width:32px;height:32px}
  .contact{padding-bottom:62px}.contact-shell{min-height:620px;padding:40px 25px 155px}.contact-shell::after,.contact-chat-visual{width:160px;height:160px;right:-6px;top:auto;bottom:10px}.contact-shell h2{font-size:44px}.contact-actions{display:grid;align-items:start}.contact-actions .button{width:max-content}.footer-inner{align-items:start;flex-direction:column}.footer-inner>p{text-align:left}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Hospitality-focused revision */
.nav-brandless { justify-content: flex-end; }
.hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(350px, .85fr); }
.hero h1 { font-size: clamp(46px, 5vw, 66px); }
.hero h1 .hero-line { display: block; white-space: nowrap; }
.hero h1 .hero-solid { color: var(--text); -webkit-text-stroke: 0; text-shadow: none; }
.hero h1 .hero-outline { color: transparent; -webkit-text-stroke: 1px rgba(151,207,255,.96); text-shadow: 0 0 20px rgba(61,147,255,.62),0 0 58px rgba(36,121,255,.42); }
.hero h1 .hero-specialty { font-size: .8em; letter-spacing: -.04em; }
.portrait-clean { border-color: rgba(92,172,255,.34); box-shadow: var(--shadow); }
.portrait-clean::after { background: linear-gradient(to top, rgba(6,16,30,.72) 0%, transparent 25%); }
.portrait-clean .portrait-grid { opacity: .34; }

.social-links { display: flex; flex-wrap: wrap; gap: 9px; }
.social-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 12px 7px 8px; border: 1px solid var(--line); border-radius: 9px; color: #91a9c2; background: rgba(255,255,255,.022); font-size: 11px; font-weight: 700; transition: 180ms ease; }
.social-links a:hover,.social-links a:focus-visible { color: var(--text); border-color: var(--line-bright); background: rgba(47,129,247,.07); transform: translateY(-2px); }
.social-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #dcecff; background: rgba(47,129,247,.16); font: 800 15px/1 Arial,sans-serif; }
.social-in { font-size: 10px; }.social-medium { font-family: Georgia,serif; font-size: 13px; }

.project-photo { margin: 0; padding: 0; background: #07101d; }
.project-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 600ms cubic-bezier(.2,.8,.2,1), filter 300ms ease; }
.project-card:hover .project-photo img { transform: scale(1.055); filter: saturate(1.08); }
.recognition-heading { grid-template-columns: 1fr auto; }
.carousel-controls { display: flex; gap: 9px; justify-self: end; }
.carousel-controls button { width: 45px; height: 45px; border: 1px solid var(--line); border-radius: 50%; color: #a9c8e8; background: rgba(255,255,255,.025); cursor: pointer; font-size: 18px; transition: 180ms ease; }
.carousel-controls button:hover,.carousel-controls button:focus-visible { border-color: rgba(102,181,255,.82); color: #fff; background: rgba(47,129,247,.16); box-shadow: 0 0 25px rgba(47,140,255,.34); transform: translateY(-2px); }
.recognition-intro { max-width: 820px; margin: -26px 0 13px; color: #8fa5bc; font-size: 13px; line-height: 1.75; }
.swipe-hint { margin: 0 0 22px; color: #607991; font-size: 11px; }
.recognition-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(330px, 34%); align-items: start; gap: 14px; overflow-x: auto; padding: 8px 2px 22px; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: rgba(76,159,255,.72) transparent; }
.recognition-slide { min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0; border: 1px solid rgba(86,156,240,.24); border-radius: 16px; color: var(--text); text-align: left; background: linear-gradient(145deg,rgba(14,30,51,.96),rgba(7,14,24,.98)); box-shadow: 0 0 26px rgba(35,119,226,.06); cursor: pointer; scroll-snap-align: start; transition: transform 220ms ease,border-color 220ms ease,box-shadow 220ms ease; }
.recognition-slide:hover,.recognition-slide:focus-visible { transform: translateY(-5px); border-color: rgba(91,171,255,.78); box-shadow: 0 22px 50px rgba(0,0,0,.26),0 0 28px rgba(47,140,255,.28),0 0 68px rgba(35,106,231,.17); }
.recognition-image { height: 190px; display: block; overflow: hidden; border-bottom: 1px solid var(--line); background: #fff; }
.recognition-image img { display: block; width: 100%; height: 100%; }
.certificate-full img { object-fit: contain; }
.logo-crop img { object-fit: cover; object-position: center 8%; }
.logo-ptdi img,.logo-purwakarta img,.logo-manggarai img,.logo-itb img,.logo-kemenag img,.logo-airlangga img { object-position: center 8%; }
.logo-thales img { object-position: center top; }
.logo-nebraska img,.logo-oslo img,.logo-groningen img { object-position: left top; }
.recognition-content { display: flex; flex-direction: column; padding: 24px; }
.recognition-content small { margin-bottom: 13px; color: #4e93df; font: 700 8px/1.4 ui-monospace,monospace; letter-spacing: .13em; }
.recognition-content strong { margin-bottom: 10px; font-size: 19px; line-height: 1.28; }
.recognition-issuer { display: block; margin-bottom: 13px; color: #a9c5e1; font-size: 11px; font-weight: 700; line-height: 1.45; }
.recognition-description { display: block; color: #7f95ac; font-size: 11px; line-height: 1.65; }
.recognition-source-label { width:max-content; display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:6px 9px; border:1px solid rgba(65,189,142,.24); border-radius:999px; color:#85d9b8; background:rgba(32,160,112,.07); font-size:9px; font-weight:750; letter-spacing:.02em; text-decoration:none; transition:180ms ease; }
.recognition-source-label:hover,.recognition-source-label:focus-visible{color:#c8ffe9;border-color:rgba(78,220,163,.6);background:rgba(32,160,112,.15);box-shadow:0 0 20px rgba(45,196,139,.14);transform:translateY(-1px)}
.recognition-content .certificate-cta { width:max-content; display: flex; align-items: center; gap: 8px; margin-top: 20px; padding: 0; border:0; color: #9fd1ff; background:none; font:inherit; font-size: 11px; font-weight: 800; cursor:pointer; }
.certificate-cta:focus-visible{outline:2px solid rgba(102,181,255,.72);outline-offset:4px;border-radius:3px}
.certificate-cta b { font-size: 13px; transition: transform 180ms ease; }
.recognition-slide:hover .certificate-cta b,.recognition-slide:focus-visible .certificate-cta b { transform: translate(2px,-2px); }
.recognition-bssn { border-color: rgba(73,149,242,.42); }

.modal-open { overflow: hidden; }
.certificate-modal { --modal-gutter: clamp(12px,2.5vw,32px); inset: 0; width: 100%; height: 100%; height: 100dvh; max-width: 100%; max-height: 100%; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; color: var(--text); background: #050b13; box-shadow: none; }
.certificate-modal[open] { display: grid; grid-template-rows: auto minmax(0,1fr); animation: certificate-in 320ms cubic-bezier(.2,.8,.2,1) both; }
.certificate-modal::backdrop { background: rgba(2,6,12,.92); backdrop-filter: blur(10px); animation: backdrop-in 260ms ease both; }
.certificate-modal.is-closing { animation: certificate-out 230ms ease both; }
.certificate-modal.is-closing::backdrop { animation: backdrop-out 230ms ease both; }
.modal-header { width: 100%; min-width: 0; min-height: 68px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 20px; padding: 13px clamp(17px,3vw,38px); overflow: hidden; border-bottom: 1px solid var(--line); background: rgba(8,16,28,.94); }
.modal-header h2 { flex:1; min-width:0; margin: 0; overflow: hidden; color: #dbeafe; font-size: clamp(13px,1.4vw,18px); line-height: 1.3; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.modal-header-actions{min-width:0;display:flex;align-items:center;gap:10px}.modal-official-link{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 15px;border:1px solid rgba(72,168,255,.36);border-radius:999px;color:#a9d6ff;background:rgba(47,129,247,.09);font-size:11px;font-weight:800;white-space:nowrap;transition:180ms ease}.modal-official-link:hover,.modal-official-link:focus-visible{color:#fff;border-color:rgba(101,189,255,.72);background:rgba(47,129,247,.18);box-shadow:0 0 22px rgba(47,140,255,.22);transform:translateY(-1px)}.modal-official-link[hidden]{display:none}
.modal-header button { position: relative; flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: #dbeafe; background: rgba(255,255,255,.03); cursor: pointer; font-size: 0; line-height: 0; transition: 180ms ease; }
.modal-header button::before,.modal-header button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; border-radius: 999px; background: currentColor; transform-origin: center; }
.modal-header button::before { transform: translate(-50%,-50%) rotate(45deg); }
.modal-header button::after { transform: translate(-50%,-50%) rotate(-45deg); }
.modal-header button:hover,.modal-header button:focus-visible { border-color: rgba(80,160,255,.55); background: rgba(47,129,247,.13); transform: rotate(4deg); }
.modal-image-wrap { width: 100%; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; padding: var(--modal-gutter); background: radial-gradient(circle at center,rgba(25,61,103,.22),transparent 52%),#02060b; }
.modal-image-wrap img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; margin: 0; border-radius: 5px; object-fit: contain; filter: drop-shadow(0 18px 35px rgba(0,0,0,.48)); }
@keyframes certificate-in { from { opacity: 0; transform: scale(.975); } to { opacity: 1; transform: scale(1); } }
@keyframes certificate-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.985); } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-out { from { opacity: 1; } to { opacity: 0; } }

.skills-dense { grid-template-columns: repeat(2,minmax(0,1fr)); }
.skills-dense .skill-card,.skills-dense .skill-card:nth-child(4),.skills-dense .skill-card:nth-child(5) { grid-column: auto; min-height: 250px; padding: 30px; }
.skills-dense .skill-card h3 { max-width: 85%; margin-bottom: 25px; font-size: 20px; }
.tool-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.tool { min-height: 45px; display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px 7px 7px; border: 1px solid rgba(111,160,218,.16); border-radius: 9px; color: #b5cae0; background: rgba(92,137,194,.045); font-size: 13px; font-weight: 750; text-decoration: none; transition: 180ms ease; }
.tool::after { content: "↗"; margin-left: 1px; color: #4e8fd4; font-size: 10px; opacity: 0; transform: translate(-3px,3px); transition: 180ms ease; }
.tool:hover,.tool:focus-visible { color: #e7f2ff; border-color: rgba(58,145,249,.34); background: rgba(47,129,247,.08); transform: translateY(-2px); }
.tool:hover::after,.tool:focus-visible::after { opacity: 1; transform: translate(0,0); }
.tool-logo,.tool-mark { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: rgba(255,255,255,.06); font-style: normal; }
.tool-logo img { width: 19px; height: 19px; object-fit: contain; }
.tool[href*="adobe.com/products/photoshop"] .tool-logo{background:rgba(49,168,255,.14)}
.tool[href*="adobe.com/products/photoshop"] .tool-logo img{filter:invert(62%) sepia(99%) saturate(4199%) hue-rotate(183deg) brightness(103%) contrast(102%)}
.tool[href*="canva.com"] .tool-logo{background:rgba(0,196,204,.14)}
.tool[href*="canva.com"] .tool-logo img{filter:invert(71%) sepia(96%) saturate(1933%) hue-rotate(131deg) brightness(94%) contrast(101%)}
.tool-mark { color: #b9dcff; border: 1px solid rgba(74,146,233,.2); background: rgba(47,129,247,.1); font: 800 9px/1 ui-monospace,monospace; }
.brand-fortinet,.brand-zabbix { color:#ff726d; background:rgba(212,0,0,.12); }.brand-proxmox,.brand-grafana,.brand-prometheus,.brand-codeigniter { color:#ff9a58; background:rgba(229,112,0,.12); }.brand-linux,.brand-js { color:#ffe36a; background:rgba(247,223,30,.1); }.brand-n8n { color:#ff6f9b; background:rgba(234,75,113,.12); }.brand-docker,.brand-telegram,.brand-wireshark,.brand-python,.brand-mysql,.brand-photoshop { color:#75bfff; background:rgba(36,150,237,.12); }.brand-burp { color:#ff8a66; background:rgba(255,102,51,.12); }.brand-php { color:#b2a8ff; background:rgba(119,123,180,.13); }.brand-canva { color:#60e5e4; background:rgba(0,196,204,.12); }

.article-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; border: 0; }
.article-cards .article-row { min-height: 380px; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg,rgba(13,24,40,.72),rgba(7,13,23,.72)); }
.article-cards .article-row:hover,.article-cards .article-row:focus-visible { padding: 0; transform: translateY(-5px); border-color: rgba(60,144,242,.4); }
.article-cards .article-row>img { width: 100%; height: 170px; object-fit: cover; border-bottom: 1px solid var(--line); }
.article-cards .article-copy { flex: 1; padding: 24px 22px; }
.article-cards .article-copy h3 { font-size: 19px; line-height: 1.35; }
.article-cards .article-arrow { margin: 0 20px 20px auto; }
.medium-profile-link { width: max-content; display: flex; gap: 10px; margin: 24px 0 0 auto; color: #9cc7f3; font-size: 13px; font-weight: 700; }
.medium-profile-link:hover { text-decoration: underline; text-underline-offset: 5px; }

a.contact-shell { display: block; color: var(--text); }
.contact-shell:hover { border-color: rgba(89,164,255,.58); box-shadow: inset 0 0 80px rgba(37,107,193,.09),0 34px 100px rgba(0,0,0,.34),0 0 55px rgba(41,118,216,.1); }
.contact-button { width: max-content; }
.footer-simple { display: flex; justify-content: space-between; gap: 30px; }
.footer-simple p { margin: 0; color: #64778c; font-size: 10px; }

@media (max-width: 860px) {
  .nav-brandless { justify-content: flex-end; }
  .hero-grid { grid-template-columns: minmax(0,1fr); gap: 55px; }
  .hero-visual { order: -1; width: min(100%,470px); max-width: 100%; margin-inline: auto; }
  .hero-copy { order: 2; }
  .hero h1 { font-size: clamp(42px,10vw,64px); }
  .hero h1 .hero-line { white-space: normal; }
  .projects-track { grid-auto-columns: minmax(290px,68%); }
  .recognition-track { grid-auto-columns: minmax(290px,68%); }
  .skills-dense { grid-template-columns: 1fr; }
  .skills-dense .skill-card:first-child { grid-column: auto; }
  .article-cards { grid-template-columns: 1fr; }
  .article-cards .article-row { min-height: 245px; display: grid; grid-template-columns: 180px 1fr 45px; }
  .article-cards .article-row>img { width: 180px; height: 100%; border: 0; border-right: 1px solid var(--line); }
  .article-cards .article-copy { align-self: center; }
  .article-cards .article-arrow { align-self: center; margin: 0 12px 0 0; }
}

@media (max-width: 600px) {
  body { font-size: 15px; line-height: 1.72; }
  .certificate-modal { --modal-gutter: 8px; }
  .modal-header { min-height: 62px; gap: 8px; padding: 8px 10px 8px 12px; }
  .modal-header h2 { display: -webkit-box; overflow: hidden; font-size: 11px; line-height: 1.35; text-overflow: clip; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .modal-header-actions { gap: 6px; }
  .modal-official-link { width: 38px; min-height: 38px; padding: 0; font-size: 0; }
  .modal-official-link span { font-size: 14px; }
  .modal-header button { flex-basis: 38px; width: 38px; height: 38px; }
  .hero { padding-bottom: 76px; }
  .hero-grid { gap: 55px; }
  .hero-visual { position: relative; z-index: 1; }
  .hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; margin-top: -280px; padding-top: 94px; background: linear-gradient(to bottom,transparent 0,rgba(6,11,20,.9) 84px,var(--bg) 142px); }
  .hero-copy .hero-kicker { order: 1; }
  .hero-copy #hero-title { order: 2; }
  .hero-copy .hero-lead { order: 3; margin-bottom: 24px; }
  .hero-copy .eyebrow { order: 4; margin: 0 0 30px; }
  .hero-copy .hero-actions { order: 5; }
  .hero-copy .social-links { order: 6; width: 100%; }
  .hero-visual.reveal { --reveal-delay: 0ms !important; transform: translateY(-22px) scale(.965); transition-duration: 850ms; }
  .hero-copy.reveal { --reveal-delay: 170ms !important; transform: translateY(38px); transition-duration: 850ms; }
  .hero-visual.reveal.is-visible,.hero-copy.reveal.is-visible { transform: translateY(0) scale(1); }
  .hero-kicker { margin-bottom: 14px; font-size: 14px; line-height: 1.5; }
  .hero h1 { width: 100%; margin-bottom: 28px; font-size: clamp(34px,10.7vw,43px); line-height: 1.08; letter-spacing: -.038em; }
  .hero h1 .hero-line { white-space: nowrap; }
  .hero h1 .hero-line + .hero-line { margin-top: 3px; }
  .hero h1 .hero-outline { color: #69b2ff; -webkit-text-stroke: 0; text-shadow: 0 0 15px rgba(55,146,255,.48),0 0 34px rgba(36,121,255,.22); }
  .hero h1 .hero-specialty { font-size: clamp(26px,8.2vw,32px); line-height: 1.16; letter-spacing: -.03em; }
  .hero-lead { max-width: 33ch; font-size: 15px; line-height: 1.78; }
  .hero-copy .eyebrow { max-width: 100%; justify-content: center; font-size: 9px; line-height: 1.5; letter-spacing: .12em; }
  .hero-actions { width: 100%; gap: 12px; margin-bottom: 32px; }
  .social-links { display: grid; grid-template-columns: 1fr 1fr; }
  .social-links a { min-height: 44px; justify-content: flex-start; padding-block: 8px; }
  .section { padding: 86px 0; }
  .section-tight { padding: 28px 0 84px; }
  .section-intro,.section-heading { gap: 24px; margin-bottom: 42px; }
  .section-intro h2,.section-heading h2,.experience-sticky h2 { font-size: clamp(30px,9.4vw,36px); line-height: 1.16; letter-spacing: -.035em; }
  .section-heading p:last-child,.experience-sticky p:last-child { font-size: 14px; line-height: 1.78; }
  .capability-card { min-height: 258px; padding: 29px 24px; }
  .card-icon { margin-bottom: 42px; }
  .capability-card h3 { margin-bottom: 13px; font-size: 19px; line-height: 1.35; }
  .capability-card p:not(.card-number) { font-size: 13px; line-height: 1.75; }
  .projects-heading,.recognition-heading { grid-template-columns: 1fr; }
  .carousel-controls { justify-self: start; }
  .swipe-hint { margin-top: -4px; }
  .projects-track,.recognition-track { grid-auto-columns: 87%; }
  .project-body { padding: 24px 21px 22px; }
  .project-body h3 { margin-bottom: 14px; font-size: 19px; line-height: 1.38; }
  .project-body > p { margin-bottom: 19px; font-size: 13px; line-height: 1.72; }
  .timeline-item { gap: 16px; padding-bottom: 48px; }
  .timeline-card h3 { margin-bottom: 6px; font-size: 20px; line-height: 1.35; letter-spacing: -.025em; }
  .company { font-size: 13px; line-height: 1.6; }
  .timeline-card ul { gap: 12px; margin: 24px 0; }
  .timeline-card li { font-size: 13px; line-height: 1.72; }
  .recognition-slide { min-height: 0; }
  .recognition-content { padding: 25px 22px 27px; }
  .recognition-content strong { font-size: 19px; line-height: 1.36; }
  .recognition-description { line-height: 1.72; }
  .skills-dense .skill-card,.skills-dense .skill-card:nth-child(4),.skills-dense .skill-card:nth-child(5) { padding: 24px; }
  .skills-dense .skill-card h3 { margin-bottom: 27px; font-size: 19px; line-height: 1.38; }
  .tool { font-size: 11px; }
  .article-cards .article-row { min-height: 390px; display: flex; }
  .article-cards .article-row>img { width: 100%; height: 175px; border: 0; border-bottom: 1px solid var(--line); }
  .article-cards .article-copy { padding: 25px 21px; }
  .article-cards .article-copy h3 { font-size: 18px; line-height: 1.42; }
  .article-cards .article-arrow { margin: 0 20px 20px auto; }
  .contact-shell { padding-inline: 24px; }
  .contact-shell h2 { font-size: clamp(36px,11vw,43px); line-height: 1.1; letter-spacing: -.04em; }
  .contact-shell>p:not(.section-index) { font-size: 15px; line-height: 1.78; }
  .footer-simple { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .recognition-slide,.tool,.article-row,.social-links a,.project-photo img,.certificate-modal,.certificate-modal::backdrop { animation: none !important; transition: none !important; }
}