:root {
  --navy-950: #070d18;
  --navy-900: #0b1220;
  --navy-800: #111c30;
  --navy-700: #1d2a43;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --cyan-400: #38bdf8;
  --amber-400: #fbbf24;
  --slate-950: #0f172a;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --white: #fff;
  --page: #f8fafc;
  --card: rgba(255, 255, 255, .92);
  --border: rgba(15, 23, 42, .10);
  --shadow: 0 24px 70px rgba(15, 23, 42, .12);
  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 32px;
  --max: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--slate-950);
  background: var(--page);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 10%, rgba(56, 189, 248, .09), transparent 26rem),
    radial-gradient(circle at 90% 26%, rgba(37, 99, 235, .08), transparent 30rem),
    linear-gradient(#f8fafc, #f8fafc);
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
::selection { color: white; background: var(--blue-600); }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  transform: translateY(-160%);
  border-radius: 10px;
  padding: 10px 14px;
  color: white;
  background: var(--navy-900);
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.section { padding: 104px 0; }
.section.compact { padding: 78px 0; }
.section.dark {
  color: white;
  background:
    radial-gradient(circle at 12% 10%, rgba(56, 189, 248, .14), transparent 32rem),
    linear-gradient(140deg, var(--navy-950), var(--navy-800));
}
.section.soft { background: rgba(226, 232, 240, .54); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
  background: rgba(248, 250, 252, .88);
  backdrop-filter: blur(18px);
}
.nav-shell {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--slate-950);
  text-decoration: none;
}
.brand img { width: 42px; height: 42px; }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { font-size: 15px; letter-spacing: .04em; }
.brand-copy span { margin-top: 5px; color: var(--slate-500); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 3px; }
.nav-links a {
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--slate-600);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--slate-950); background: var(--slate-100); outline: none; }
.nav-links .nav-cta { margin-left: 8px; color: white; background: var(--navy-900); }
.nav-links .nav-cta:hover, .nav-links .nav-cta:focus-visible { color: white; background: var(--blue-600); }
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--slate-950);
  background: white;
  cursor: pointer;
}

.hero {
  position: relative;
  min-height: 790px;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: white;
  background: var(--navy-950);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 13, 24, .98) 0%, rgba(7, 13, 24, .92) 48%, rgba(7, 13, 24, .42) 100%),
    url("25-317495072_5698336490213901_4348783923011605031.jpg") 70% center / cover;
}
.hero::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  top: -200px;
  left: 46%;
  border-radius: 50%;
  background: rgba(37, 99, 235, .24);
  filter: blur(80px);
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .72fr);
  align-items: center;
  gap: 76px;
  padding: 110px 0 84px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.dark .eyebrow, .hero .eyebrow { color: #7dd3fc; }
.eyebrow::before { content: ""; width: 30px; height: 2px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 820px;
  margin-bottom: 24px;
  font-size: clamp(3.45rem, 7vw, 6.7rem);
  line-height: .93;
  letter-spacing: -.062em;
}
.hero-lead {
  max-width: 710px;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, .76);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 17px;
  font-weight: 850;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); outline: none; box-shadow: 0 14px 30px rgba(15, 23, 42, .18); }
.btn.primary { color: white; background: var(--blue-600); }
.btn.primary:hover { background: var(--blue-500); }
.btn.light { color: var(--navy-900); background: white; }
.btn.ghost { border-color: rgba(255, 255, 255, .28); color: white; background: rgba(255, 255, 255, .08); }
.btn.ghost-dark { border-color: var(--slate-300); color: var(--slate-950); background: white; }
.btn.small { min-height: 42px; padding: 9px 14px; font-size: 13px; }

.hero-profile {
  position: relative;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 30px;
  padding: 12px;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .33);
  backdrop-filter: blur(12px);
}
.hero-profile img { width: 100%; aspect-ratio: 4 / 5; border-radius: 22px; object-fit: cover; object-position: center 22%; }
.profile-caption {
  position: absolute;
  right: -28px;
  bottom: 30px;
  max-width: 260px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  padding: 17px 18px;
  color: rgba(255, 255, 255, .78);
  background: rgba(11, 18, 32, .88);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  backdrop-filter: blur(12px);
}
.profile-caption strong { display: block; margin-bottom: 4px; color: white; font-size: 15px; }
.profile-caption span { font-size: 12px; }
.hero-metrics {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(7, 13, 24, .64);
  backdrop-filter: blur(12px);
}
.metric { padding: 26px 0; text-align: center; }
.metric + .metric { border-left: 1px solid rgba(255, 255, 255, .12); }
.metric strong { display: block; color: white; font-size: 1.75rem; line-height: 1; }
.metric span { display: block; margin-top: 8px; color: rgba(255, 255, 255, .58); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }

.section-head { max-width: 760px; margin-bottom: 42px; }
.section-head.split { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.section-head h2 { margin-bottom: 15px; font-size: clamp(2.25rem, 5vw, 4.7rem); line-height: .98; letter-spacing: -.052em; }
.section-head p { margin-bottom: 0; color: var(--slate-600); font-size: 1.04rem; }
.dark .section-head p { color: rgba(255, 255, 255, .68); }

.about-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 72px; align-items: center; }
.about-photo { position: relative; }
.about-photo img { width: 100%; max-height: 650px; border-radius: var(--radius-lg); object-fit: cover; box-shadow: var(--shadow); }
.about-photo::after { content: ""; position: absolute; right: -22px; bottom: -22px; width: 46%; height: 46%; z-index: -1; border-radius: 28px; background: linear-gradient(145deg, var(--cyan-400), var(--blue-600)); }
.about-copy h2 { margin-bottom: 24px; font-size: clamp(2.5rem, 5vw, 5rem); line-height: .98; letter-spacing: -.055em; }
.about-copy > p { color: var(--slate-600); font-size: 1.08rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 27px; }
.tag { border: 1px solid var(--slate-200); border-radius: 999px; padding: 7px 11px; color: var(--slate-700); background: white; font-size: 12px; font-weight: 800; }

.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.product-card.featured { grid-column: 1 / -1; }
.product-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 34px;
  color: white;
  background: linear-gradient(145deg, #0b1220, #172554);
  box-shadow: var(--shadow);
}
.product-card.secondary { color: var(--slate-950); background: white; }
.product-card.apps-card { background: linear-gradient(145deg, #ffffff, #eef6ff); }
.product-card::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -100px;
  top: -110px;
  border-radius: 50%;
  background: rgba(56, 189, 248, .18);
  filter: blur(10px);
}
.product-meta { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 34px; }
.product-kicker { font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; color: #7dd3fc; }
.secondary .product-kicker { color: var(--blue-600); }
.status-badge { border-radius: 999px; padding: 6px 10px; color: #bae6fd; background: rgba(56, 189, 248, .12); font-size: 11px; font-weight: 850; }
.secondary .status-badge { color: var(--blue-600); background: #eff6ff; }
.product-card h3 { position: relative; z-index: 1; margin-bottom: 14px; font-size: clamp(2rem, 4vw, 3.9rem); line-height: .98; letter-spacing: -.04em; }
.product-card p { position: relative; z-index: 1; max-width: 720px; color: rgba(255, 255, 255, .70); }
.product-card.secondary p { color: var(--slate-600); }
.product-features { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 28px 0 30px; padding: 0; list-style: none; }
.product-features li { border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 11px 13px; color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .05); font-size: 12px; font-weight: 700; }
.secondary .product-features { grid-template-columns: 1fr; }
.secondary .product-features li { border-color: var(--slate-200); color: var(--slate-700); background: var(--slate-100); }
.product-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.product-visual {
  position: relative;
  z-index: 1;
  margin: 34px 0 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  padding: 12px;
  background: rgba(2, 6, 23, .46);
}
.mock-window { overflow: hidden; border-radius: 12px; background: #f8fafc; color: var(--slate-950); }
.mock-bar { height: 35px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--slate-200); background: white; }
.mock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--slate-300); }
.mock-layout { min-height: 220px; display: grid; grid-template-columns: 126px 1fr; }
.mock-sidebar { padding: 14px 10px; color: #cbd5e1; background: var(--navy-900); }
.mock-brand { width: 64%; height: 12px; margin-bottom: 20px; border-radius: 4px; background: #38bdf8; }
.mock-navline { height: 8px; margin: 10px 0; border-radius: 4px; background: rgba(255, 255, 255, .17); }
.mock-main { padding: 18px; }
.mock-title { width: 40%; height: 15px; margin-bottom: 16px; border-radius: 5px; background: var(--slate-300); }
.mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mock-stat { height: 58px; border: 1px solid var(--slate-200); border-radius: 9px; background: white; box-shadow: 0 6px 16px rgba(15, 23, 42, .05); }
.mock-table { height: 86px; margin-top: 12px; border: 1px solid var(--slate-200); border-radius: 9px; background: repeating-linear-gradient(#fff 0 16px, #f1f5f9 16px 17px); }

.experience-grid { display: grid; grid-template-columns: 330px 1fr; gap: 52px; }
.sticky-note { position: sticky; top: 112px; align-self: start; }
.sticky-note h2 { margin-bottom: 17px; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: .98; letter-spacing: -.052em; }
.sticky-note p { color: var(--slate-600); }
.timeline { position: relative; display: grid; gap: 14px; }
.timeline::before { content: ""; position: absolute; left: 25px; top: 34px; bottom: 34px; width: 1px; background: var(--slate-200); }
.role-card {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 18px;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px;
  background: white;
  box-shadow: 0 12px 35px rgba(15, 23, 42, .05);
}
.role-logo { position: relative; z-index: 1; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--slate-200); border-radius: 15px; padding: 7px; background: white; }
.role-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.role-card h3 { margin-bottom: 3px; font-size: 1.05rem; }
.role-card p { margin-bottom: 7px; color: var(--slate-600); font-size: 13px; }
.role-card ul { margin: 0; padding-left: 18px; color: var(--slate-700); font-size: 13px; }
.role-date { border-radius: 999px; padding: 6px 9px; white-space: nowrap; color: var(--blue-600); background: #eff6ff; font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }

.capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.capability-card { border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; padding: 24px; background: rgba(255, 255, 255, .05); }
.capability-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 12px; color: var(--navy-900); background: #7dd3fc; font-weight: 950; }
.capability-card h3 { margin-bottom: 9px; font-size: 1rem; }
.capability-card p { margin: 0; color: rgba(255, 255, 255, .60); font-size: 13px; }

.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.project-card { overflow: hidden; border: 1px solid var(--border); border-radius: 22px; color: inherit; background: white; text-decoration: none; box-shadow: 0 12px 35px rgba(15, 23, 42, .05); transition: transform .2s ease, box-shadow .2s ease; }
.project-card:hover, .project-card:focus-visible { transform: translateY(-5px); outline: none; box-shadow: var(--shadow); }
.project-thumb { min-height: 168px; display: grid; place-items: center; padding: 20px; color: white; background: linear-gradient(145deg, #172554, #0f172a); }
.project-thumb span { border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 8px 12px; background: rgba(255, 255, 255, .08); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.project-thumb.physics { background: radial-gradient(circle at 65% 30%, #38bdf8, transparent 25%), linear-gradient(145deg, #0f172a, #172554); }
.project-thumb.arcade { background: radial-gradient(circle at 70% 30%, #fbbf24, transparent 25%), linear-gradient(145deg, #3f1d70, #111827); }
.project-thumb.chess { background: radial-gradient(circle at 30% 30%, #fb7185, transparent 25%), linear-gradient(145deg, #1f2937, #111827); }
.project-thumb.memory { background: radial-gradient(circle at 72% 28%, #a78bfa, transparent 24%), radial-gradient(circle at 28% 70%, #22d3ee, transparent 24%), linear-gradient(145deg, #312e81, #0f172a); }
.project-thumb.education { background: radial-gradient(circle at 70% 28%, #facc15, transparent 23%), radial-gradient(circle at 26% 72%, #34d399, transparent 23%), linear-gradient(145deg, #0f766e, #0f172a); }
.project-body { padding: 22px; }
.project-label { color: var(--blue-600); font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.project-body h3 { margin: 7px 0 8px; font-size: 1.08rem; }
.project-body p { margin: 0; color: var(--slate-600); font-size: 13px; }

.credentials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.credential-card { border: 1px solid var(--border); border-radius: 22px; padding: 28px; background: white; }
.credential-card.wide { grid-column: 1 / -1; }
.credential-card h3 { margin-bottom: 15px; font-size: 1.1rem; }
.credential-card ul { margin: 0; padding-left: 19px; color: var(--slate-600); }
.credential-card li + li { margin-top: 9px; }
.credential-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 !important; list-style: none; }
.credential-tags li { margin: 0 !important; border: 1px solid var(--slate-200); border-radius: 999px; padding: 8px 11px; color: var(--slate-700); background: var(--slate-100); font-size: 12px; font-weight: 750; }
.credential-tags a { text-decoration: none; }

.gallery-strip { display: grid; grid-template-columns: 1.3fr .7fr .7fr; gap: 14px; }
.gallery-strip figure { position: relative; min-height: 360px; margin: 0; overflow: hidden; border-radius: 22px; }
.gallery-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-strip figure:hover img { transform: scale(1.035); }
.gallery-strip figcaption { position: absolute; left: 16px; bottom: 16px; border-radius: 999px; padding: 7px 11px; color: white; background: rgba(7, 13, 24, .72); font-size: 11px; font-weight: 850; backdrop-filter: blur(10px); }

.contact-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  border-radius: var(--radius-lg);
  padding: 50px;
  color: white;
  background: linear-gradient(145deg, var(--navy-900), #172554);
  box-shadow: var(--shadow);
}
.contact-panel::after { content: ""; position: absolute; right: -90px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: rgba(56, 189, 248, .16); }
.contact-panel > * { position: relative; z-index: 1; }
.contact-panel h2 { margin-bottom: 12px; font-size: clamp(2.25rem, 5vw, 4.4rem); line-height: .98; letter-spacing: -.05em; }
.contact-panel p { max-width: 720px; margin-bottom: 0; color: rgba(255, 255, 255, .68); }
.contact-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

.site-footer { padding: 38px 0; color: var(--slate-500); font-size: 12px; }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-grid a { font-weight: 750; text-decoration: none; }

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Case-study page */
.case-hero { padding: 112px 0 78px; color: white; background: linear-gradient(145deg, var(--navy-950), #172554); }
.breadcrumb { display: inline-flex; margin-bottom: 26px; color: #7dd3fc; font-size: 12px; font-weight: 850; text-decoration: none; }
.case-hero h1 { max-width: 900px; font-size: clamp(3.1rem, 7vw, 6.5rem); }
.case-hero p { max-width: 760px; color: rgba(255, 255, 255, .70); font-size: 1.1rem; }
.case-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 42px; }
.case-meta div { border: 1px solid rgba(255, 255, 255, .12); border-radius: 15px; padding: 16px; background: rgba(255, 255, 255, .05); }
.case-meta span { display: block; color: rgba(255, 255, 255, .46); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.case-meta strong { display: block; margin-top: 5px; font-size: 13px; }
.case-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 64px; }
.case-aside { position: sticky; top: 110px; align-self: start; border: 1px solid var(--border); border-radius: 20px; padding: 24px; background: white; }
.case-aside h3 { margin-bottom: 14px; }
.case-aside dl { margin: 0; }
.case-aside dt { margin-top: 14px; color: var(--slate-500); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.case-aside dd { margin: 4px 0 0; color: var(--slate-700); font-size: 13px; }
.case-content h2 { margin: 0 0 16px; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1; letter-spacing: -.04em; }
.case-content h3 { margin: 38px 0 12px; }
.case-content p, .case-content li { color: var(--slate-600); }
.case-content section + section { margin-top: 58px; }
.case-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.case-feature { border: 1px solid var(--border); border-radius: 18px; padding: 21px; background: white; }
.case-feature h3 { margin: 0 0 8px; font-size: 1rem; }
.case-feature p { margin: 0; font-size: 13px; }
.notice { border-left: 4px solid var(--blue-600); border-radius: 0 14px 14px 0; padding: 17px 20px; color: var(--slate-700); background: #eff6ff; }

@media (max-width: 1050px) {
  .hero-grid { grid-template-columns: 1fr .65fr; gap: 38px; }
  .product-grid, .about-grid { grid-template-columns: 1fr; }
  .product-card.featured { grid-column: auto; }
  .product-card.secondary { min-height: auto; }
  .experience-grid { grid-template-columns: 1fr; }
  .sticky-note { position: static; }
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .case-layout { grid-template-columns: 1fr; }
  .case-aside { position: static; }
}

@media (max-width: 820px) {
  .container { width: min(100% - 28px, var(--max)); }
  .section { padding: 80px 0; }
  .nav-toggle { display: inline-grid; place-items: center; }
  .nav-links {
    position: absolute;
    top: calc(100% + 1px);
    left: 14px;
    right: 14px;
    display: none;
    align-items: stretch;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 10px;
    background: white;
    box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 11px 12px; }
  .nav-links .nav-cta { margin: 3px 0 0; text-align: center; }
  .hero { min-height: auto; }
  .hero::before { background: linear-gradient(rgba(7, 13, 24, .95), rgba(7, 13, 24, .86)), url("25-317495072_5698336490213901_4348783923011605031.jpg") center / cover; }
  .hero-grid { grid-template-columns: 1fr; padding: 90px 0 58px; }
  .hero-profile { max-width: 450px; }
  .profile-caption { right: 8px; bottom: 20px; }
  .hero-metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .metric:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, .12); }
  .section-head.split { display: block; }
  .section-head.split .btn { margin-top: 18px; }
  .gallery-strip { grid-template-columns: 1fr 1fr; }
  .gallery-strip figure:first-child { grid-column: 1 / -1; }
  .contact-panel { grid-template-columns: 1fr; padding: 34px; }
  .contact-links { justify-content: flex-start; }
  .case-meta { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  h1 { font-size: clamp(3rem, 17vw, 4.8rem); }
  .brand-copy span { display: none; }
  .hero-profile { margin-right: 7px; }
  .profile-caption { position: static; max-width: none; margin-top: 10px; }
  .product-card { padding: 25px; }
  .product-features, .secondary .product-features { grid-template-columns: 1fr; }
  .mock-layout { grid-template-columns: 84px 1fr; }
  .mock-stats { grid-template-columns: 1fr; }
  .mock-stat:nth-child(n+2) { display: none; }
  .role-card { grid-template-columns: 46px 1fr; gap: 13px; padding: 18px; }
  .role-logo { width: 46px; height: 46px; }
  .role-date { grid-column: 2; justify-self: start; }
  .capability-grid, .project-grid, .credentials-grid, .case-feature-grid { grid-template-columns: 1fr; }
  .credential-card.wide { grid-column: auto; }
  .gallery-strip { grid-template-columns: 1fr; }
  .gallery-strip figure:first-child { grid-column: auto; }
  .gallery-strip figure { min-height: 290px; }
  .footer-grid { align-items: flex-start; flex-direction: column; }
  .case-meta { grid-template-columns: 1fr; }
}

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



/* Featured product carousel — screenshot-first, high-contrast */
.product-carousel{position:relative;margin-top:34px;padding:18px 0 20px;border:1px solid #d8e1eb;border-radius:30px;background:#eef3f8;box-shadow:0 24px 64px rgba(15,23,42,.13);overflow:hidden}
.product-carousel-topline{display:flex;align-items:center;justify-content:space-between;padding:0 28px 15px;color:#334155;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.product-carousel-live{color:#64748b}.product-carousel-live strong{color:#0f172a;font-size:15px}
.product-carousel-viewport{overflow:hidden;padding:0 72px 4px 28px;touch-action:pan-y}
.product-carousel-track{display:flex;gap:22px;will-change:transform;transition:transform .52s cubic-bezier(.22,.61,.36,1)}
.product-slide{flex:0 0 calc(100% - 92px);min-width:0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr);align-items:stretch;gap:0;border:1px solid #d5dee8;border-radius:24px;background:#fff;box-shadow:0 16px 38px rgba(15,23,42,.12);overflow:hidden}
.product-slide-media{min-width:0;margin:0;padding:0;background:#e6edf5;border-right:1px solid #d8e1eb;overflow:hidden}
.product-browserbar{height:38px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#f8fafc;border-bottom:1px solid #d8e1eb;color:#526174;font-size:10px;font-weight:800}
.product-browserbar span{width:9px;height:9px;border-radius:50%;background:#cbd5e1}.product-browserbar span:first-child{background:#f28a8a}.product-browserbar span:nth-child(2){background:#f3c76b}.product-browserbar span:nth-child(3){background:#76c894}.product-browserbar strong{margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-slide-media img{display:block;width:100%;height:100%;min-height:390px;max-height:540px;object-fit:contain;object-position:center;background:#edf2f7}
.product-slide-copy{display:flex;flex-direction:column;justify-content:center;padding:34px;color:#172033;background:#fff}
.product-slide .product-meta{margin-bottom:18px}.product-slide .product-kicker{color:#2456a6}.product-slide .status-badge{color:#0f6d63;background:#e5f6f2;border-color:#ccebe5}
.product-slide h3{margin:0 0 15px;color:#101827;font-size:clamp(1.9rem,3vw,3.25rem);line-height:1;letter-spacing:-.045em}
.product-slide p{margin:0;color:#4b5b70;font-size:15px;line-height:1.7}
.product-slide .product-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:22px 0 25px;padding:0;list-style:none}
.product-slide .product-features li{padding:10px 11px;border:1px solid #dbe4ed;border-radius:12px;background:#f7fafc;color:#2f4054;font-size:11px;font-weight:800;line-height:1.25}
.product-slide .product-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px}
.product-carousel-arrow{position:absolute;top:50%;z-index:4;width:50px;height:50px;display:grid;place-items:center;border:1px solid #c8d4e1;border-radius:50%;background:#fff;color:#172033;box-shadow:0 10px 26px rgba(15,23,42,.17);font:900 20px/1 inherit;cursor:pointer;transform:translateY(-50%);transition:transform .18s ease,background .18s ease,border-color .18s ease}
.product-carousel-arrow:hover,.product-carousel-arrow:focus-visible{background:#eaf3ff;border-color:#7aa7dc;outline:none;transform:translateY(-50%) scale(1.06)}
.product-carousel-arrow-prev{left:9px}.product-carousel-arrow-next{right:9px}
.product-carousel-controls{display:flex;align-items:center;justify-content:center;gap:18px;padding:16px 28px 0}
.product-carousel-dots{display:flex;align-items:center;gap:8px}.product-carousel-dots button{width:10px;height:10px;padding:0;border:0;border-radius:999px;background:#9fb0c2;cursor:pointer;transition:width .2s ease,background .2s ease}.product-carousel-dots button.is-active{width:34px;background:#2f6fb2}
.product-carousel-hint{margin:0;color:#637487;font-size:11px;font-weight:700}

@media(max-width:1040px){.product-carousel-viewport{padding-right:48px}.product-slide{flex-basis:calc(100% - 42px);grid-template-columns:1fr}.product-slide-media{border-right:0;border-bottom:1px solid #d8e1eb}.product-slide-media img{min-height:330px;max-height:460px}.product-slide-copy{padding:28px}}
@media(max-width:640px){.product-carousel{border-radius:22px}.product-carousel-topline{padding:0 18px 12px}.product-carousel-viewport{padding:0 28px 2px 16px}.product-carousel-track{gap:12px}.product-slide{flex-basis:calc(100% - 18px);border-radius:18px}.product-slide-media img{min-height:210px;max-height:280px}.product-slide-copy{padding:22px}.product-slide .product-features{grid-template-columns:1fr}.product-carousel-arrow{width:42px;height:42px}.product-carousel-arrow-prev{left:3px}.product-carousel-arrow-next{right:3px}.product-carousel-controls{padding:14px 18px 0}.product-carousel-hint{display:none}}
@media(prefers-reduced-motion:reduce){.product-carousel-track{transition:none}}


/* Portfolio contrast correction */
.site-footer{
  padding:30px 0!important;
  border-top:1px solid #24334a!important;
  background:#0b1220!important;
  color:#d7e2ef!important;
}
.site-footer .footer-grid>span{color:#d7e2ef!important;opacity:1!important}
.site-footer .footer-built{color:#b9d8fa!important}
.site-footer .footer-built strong{color:#7dd3fc!important;letter-spacing:.025em!important}
.site-footer a{color:#93c5fd!important}
.mtbc-product-copy,.mtbc-product-copy h3,.mtbc-product-copy p,.mtbc-product-copy li{opacity:1!important}
.mtbc-product-copy h3{color:#101827!important}
.mtbc-product-copy p{color:#40536a!important}
.mtbc-product-copy li{color:#26394e!important;background:#f7fafc!important}
@media(max-width:720px){.site-footer .footer-grid{gap:9px!important}.site-footer{padding:24px 0!important}}