@layer base, components, utilities;

@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/Inter-Regular.woff2") format("woff2");
}

@font-face{
  font-family:"Inter";
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/Inter-Italic.woff2") format("woff2");
}

@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/assets/fonts/Inter-Bold.woff2") format("woff2");
}

@font-face{
  font-family:"Inter";
  font-style:italic;
  font-weight:700;
  font-display:swap;
  src:url("/assets/fonts/Inter-BoldItalic.woff2") format("woff2");
}

:root{
  /* Brand core */
  --brand-blue:#0b84ff;          /* brighter blue from palette */
  --brand-blue-2:#3da5ff;
  --brand-orange:#ff8a1a;        /* bright orange */
  --brand-green:#10d58a;         /* bright mint/teal */
  --brand-mint:#2fe6b3;
  --brand-green-500:#12b16a;     /* WCAG AA on #0b1620 (>=7.0:1) */
  --brand-green-600:#0e7a3f;     /* Light-mode text AA on #ffffff */
  --brand-green-800:#064f2e;
  --badge-title-dark: #7ef5c0;   /* Dark surface accent */
  --badge-title-light: var(--brand-green-600);
  --brand-linkedin:#0a66c2;
  --brand-surface:#0b1620;
  --brand-surface-2:#0f1d2a;
  --brand-text:#eaf2ff;
  --brand-muted:#a8c1d9;
  --ring:#57d6ff;

  /* Extended brand tokens */
  --deep-blue:#0077CC;
  --glass-green:#00CC88;
  --accent-purple:#0b84ff;
  --energy-orange:#FF9900;
  --silver-gray:#AAAAAA;
  --badge-green-50:#d6f6e6;
  --badge-green-500:var(--brand-green-500);
  --badge-green-600:var(--brand-green-600);
  --badge-green-contrast-aa:4.5;

  /* Focus + navigation */
  --focus-ring:#0b84ff;
  --focus-color:#0b84ff;
  --dge-logo-size: clamp(96px, 12vh, 120px);
  --dge-header-height: 0px;
  --dge-safe-area-top: env(safe-area-inset-top, 0px);
  --dge-nav-font: clamp(15px, 0.9rem + 0.35vw, 19px);
  --dge-nav-gap: 26px;

  /* Glass overlays */
  --glass-bg: rgba(20,36,64,0.44);
  --glass-edge: rgba(126,186,255,0.16);
  --glass-highlight: rgba(194,232,255,0.32);

  /* Spacing scale for consistent vertical rhythm */
  --space-0:0;
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:20px;
  --space-5:24px;
  --space-6:28px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:64px;
}

@media (max-width:1024px){
  :root{ --dge-nav-font: clamp(15px, 0.9rem + 0.25vw, 18px); --dge-nav-gap: 20px; }
}

@media (max-width:768px){
  :root{ --dge-nav-font: 16px; }
}

@media (max-width:480px){
  :root{ --dge-logo-size: clamp(84px, 14vh, 108px); }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--brand-text);
  background-color:#0b1620;
}

body.not-found-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

body.not-found-page main{
  flex:1 0 auto;
}

/* Header & navigation */
.header{
  position:sticky;
  top:0;
  z-index:100;
  min-height:calc(var(--dge-logo-size) + (var(--dge-header-height) * 2));
  padding-top:max(0px, var(--dge-safe-area-top));
  padding-bottom:0;
  background:rgba(12,22,40,.58);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  background-clip:padding-box;
  border-bottom:1px solid rgba(255,255,255,0.06);
  overflow:visible;
}

@supports (padding: constant(safe-area-inset-top)){
  :root{ --dge-safe-area-top: constant(safe-area-inset-top); }
  .header{ padding-top:max(0px, var(--dge-safe-area-top)); }
}

@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){
  .header{ background: linear-gradient(180deg, #0e284a 0%, #0a1e35 100%); }
}

.container{max-width:1100px; margin:0 auto; padding: var(--space-4) var(--space-5);}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  width:100%;
  height:100%;
}

.header .container.nav{
  width:100%;
  max-width:none;
  margin:0;
  padding-inline:clamp(16px, 4vw, 24px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  height:100%;
  position:relative;
}

.header .brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:600;
  color:var(--brand-text);
  line-height:1;
  min-height:var(--dge-logo-size);
}

.header .brand span{margin:0; padding:0; text-shadow:0 1px 1px rgba(0,0,0,.25);}

.header .brand img{
  height:var(--dge-logo-size);
  max-height:var(--dge-logo-size);
  width:auto;
  display:block;
  object-fit:contain;
  border-radius:50%;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.4));
}

.header .links{
  display:flex;
  gap:var(--dge-nav-gap);
  align-items:center;
  margin-left:auto;
}

.header .links a{
  color:var(--brand-text);
  text-decoration:none;
  opacity:.9;
  font-size:var(--dge-nav-font);
  font-weight:600;
  letter-spacing:0.1px;
  line-height:1.2;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
}

.header .links a:hover{opacity:1; text-decoration:underline;}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  width:44px;
  height:40px;
  padding:0;
  margin-left:auto;
  border:none;
  background:transparent;
  border-radius:8px;
  cursor:pointer;
  color:#e6f3ff;
  -webkit-tap-highlight-color:transparent;
}

.nav-toggle .bar{
  display:block;
  width:24px;
  height:2px;
  border-radius:1px;
  background-color:#e6eef7;
}

.nav-toggle:focus-visible{ outline:2px solid #7cc4ff; outline-offset:3px; }

@media (max-width:480px){
  .nav-toggle{ gap:5px; width:40px; height:36px; }
  .nav-toggle .bar{ width:22px; }
}

.header .links{ margin-left:auto; }

@media (min-width:901px){
  .header .links{ justify-content:flex-end; }
}

body.no-scroll{overflow:hidden;}

@media (max-width:900px){
  .header .links{
    display:none;
  }
  .header .links.open{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:100%;
    right:clamp(12px,3vw,24px);
    background:color-mix(in oklab, #0b1220 70%, transparent);
    padding:12px 14px;
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
    backdrop-filter:saturate(140%) blur(14px);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    gap:16px;
    z-index:50;
  }
  .header .links.open a{ padding:10px 12px; white-space:nowrap; }
  .nav-toggle{ display:inline-flex; }
}

@media (max-width:979.98px){
  .nav-toggle, .menu-toggle{ display:inline-flex; }
  .nav-toggle ~ .nav-toggle, .menu-toggle ~ .menu-toggle{ display:none !important; }
}

@media (min-width:980px){
  .header .links, #primary-nav, .primary-nav{ display:flex !important; }
  .nav-toggle, .menu-toggle{ display:none !important; }
}

/* Navigation focus adjustments */
:where(header, .site-header, .header, nav[role="navigation"], nav.site-nav) :is(a, button, [role="button"], .nav-toggle, .menu-toggle):focus{
  outline:none !important;
  box-shadow:none !important;
}

:where(header, .site-header, .header) button:-moz-focusring{ outline:none !important; }

:where(header, .site-header, .header, nav[role="navigation"]) :is(a, button, .nav-toggle, .menu-toggle){
  -webkit-tap-highlight-color:transparent;
}

:where(header, .site-header, .header, nav[role="navigation"], nav.site-nav) :is(a, button, [role="button"], .nav-toggle, .menu-toggle):focus-visible{
  outline:2px solid currentColor !important;
  outline-offset:3px;
  border-radius:10px;
  box-shadow:none !important;
}

/* Hero */
.hero{padding: var(--space-9) var(--space-5) var(--space-8);}
.hero-row{display:grid; grid-template-columns:1.2fr .9fr; gap:32px; align-items:center}
@media (max-width:980px){ .hero-row{grid-template-columns:1fr; gap:24px} }

.hero-portrait{
  height:auto !important;
  width:clamp(220px, 28vw, 360px);
  aspect-ratio:auto;
  object-fit:contain;
  display:block;
}

.hero-portrait img{ height:auto !important; }

.header + .hero.container{ padding-top:24px; }
.hero.container{ padding-top:24px !important; }

.header-spacer, .hero-spacer{ height:0 !important; margin:0 !important; padding:0 !important; }

.glass-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) , var(--glass-bg);
  border:1px solid var(--glass-edge);
  border-radius:22px;
  padding: var(--space-7);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 20px 60px rgba(0,0,0,0.35),
    0 8px 24px rgba(0,0,0,0.4);
}

.lede-eyebrow{letter-spacing:.2em; text-transform:uppercase; color:#2fe6b3; font-weight:700; font-size:12px}
h1{font-size:40px; line-height:1.1; margin: 12px 0 16px}
p{color:var(--brand-muted); line-height:1.6;}

/* Accessibility enhancements */
a, button, [role="button"], input[type="submit"], input[type="button"], .btn{
  min-height:24px;
  min-width:24px;
  padding:8px 12px;
  line-height:1.25;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

nav a{padding:10px 12px; display:inline-block;}

:focus{
  outline:3px solid var(--focus-ring) !important;
  outline-offset:2px !important;
}

:where(a, button, [role="button"], input:not([type="hidden"]), select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus{
  position:relative;
  z-index:9999;
}

#main-content:focus{
  outline:none !important;
  position:static !important;
  z-index:auto !important;
}

#main-content:focus-visible{
  outline:3px solid var(--focus-ring) !important;
  outline-offset:4px !important;
}

/* Overscroll masking */
html,body{
  min-height:100%;
}

/* Buttons */
.btn-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; justify-content:flex-start}
.btn{
  --bg: #0b84ff;
  --bg2: #3da5ff;
  --ring: var(--ring);
  --txt: #ffffff;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:14px;
  font-weight:700; font-size:15px; letter-spacing:.2px;
  color:var(--txt); text-decoration:none;
  border:1px solid rgba(255,255,255,0.18);
  background: radial-gradient(120% 140% at 20% 0%, rgba(255,255,255,0.22), rgba(255,255,255,0) 40%),
             linear-gradient(180deg, var(--bg), var(--bg2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -10px 30px rgba(0,0,0,0.15),
    0 10px 30px rgba(0,0,0,0.35),
    0 8px 20px color-mix(in oklab, var(--bg) 30%, black);
  backdrop-filter: blur(8px) saturate(150%);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{ transform: translateY(-1px); filter:saturate(115%)}
.btn:active{ transform: translateY(0) scale(.99)}
.btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--bg) 25%, transparent),
    0 0 0 7px color-mix(in oklab, var(--bg) 45%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 10px 30px rgba(0,0,0,0.35);
}

.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.search-form{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  margin-top:24px;
}

.search-form .glass-input{
  flex:1 1 220px;
}

.glass-input{
  border-radius: calc(var(--glass-radius, 16px) - 4px);
  padding:.65rem .85rem;
  border:1px solid var(--glass-outline, rgba(255,255,255,.18));
  background: color-mix(in oklab, var(--glass-bg, rgba(255,255,255,.12)) 65%, transparent);
  color: inherit;
  min-width:200px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 var(--glass-inner, rgba(255,255,255,.08));
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.glass-input::placeholder{
  color: color-mix(in oklab, currentColor 60%, transparent);
}

.glass-input:focus{
  outline:none;
  border-color: color-mix(in oklab, var(--brand-blue, #0b84ff) 55%, currentColor 45%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-blue, #0b84ff) 25%, transparent);
  background: color-mix(in oklab, var(--glass-bg, rgba(255,255,255,.12)) 80%, transparent);
}

/* Button themes */
.btn-primary{background: var(--energy-orange) !important; color: #fff !important;}
.btn-secondary{background: var(--deep-blue) !important; color: #fff !important;}
.btn[disabled], .btn-disabled{background: var(--silver-gray) !important; color: #555 !important; cursor:not-allowed;}

.btn-view { --bg:#4bb3ff; --bg2:#0b84ff; }
.btn-activity { --bg:#38bdf8; --bg2:#0ea5e9; } /* sky blue */
.btn-download { --bg:#2fe6b3; --bg2:#10d58a; }
.btn-discuss { --bg:#ff9a2b; --bg2:#ff7a00; }
.btn-linkedin { --bg:#0a66c2; --bg2:#0b84ff; }

/* Sections */
.section{padding: var(--space-8) var(--space-5)}
.section-title{
  color:var(--badge-title-dark);
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:800;
  font-size:12px;
  margin-bottom:var(--space-4);
}

html[data-theme-v1="on"][data-theme="light"] .section-title,
html[data-theme-v1="on"]:not([data-theme="dark"]) .section-title {
  color: var(--badge-title-light);
}

html[data-theme-v1="on"][data-theme="light"] .lede-eyebrow,
html[data-theme-v1="on"]:not([data-theme="dark"]) .lede-eyebrow {
  color: var(--brand-green-800);
  text-shadow: none;
}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:980px){ .cards{grid-template-columns:1fr; } }

.card{
  border-radius:20px;
  padding:20px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--glass-inner) 75%, transparent),
      color-mix(in oklab, var(--card-bg) 55%, transparent)
    ),
    var(--card-bg);
  border:1px solid var(--glass-outline);
  box-shadow: var(--card-shadow), 0 1px 0 var(--glass-inner) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.kpis{display:flex; gap:16px; margin-top:10px; flex-wrap:wrap}
.kpi{background:rgba(255,255,255,0.06); padding:8px 12px; border-radius:999px; font-weight:700}

/* Resume highlights badges */
.badges{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:
    radial-gradient(120% 140% at 15% 0%, color-mix(in oklab, var(--badge-green-500) 28%, transparent), rgba(255,255,255,0) 48%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--badge-green-50) 70%, rgba(255,255,255,0.12)),
      color-mix(in oklab, var(--badge-green-500) 45%, rgba(6,26,18,0.42)));
  border:1px solid color-mix(in oklab, var(--badge-green-500) 45%, rgba(255,255,255,0.45));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 10px 30px rgba(0,0,0,.35);
  color:var(--brand-text);
}
.badge b{
  color:var(--badge-title-dark);
  text-shadow:0 0 12px color-mix(in srgb, var(--badge-title-dark) 45%, transparent);
}

/* Footer */
.footer{
  padding: calc(var(--space-6) / 2) var(--space-5);
  color: var(--brand-muted);
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(6,10,16,.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

figure.portrait{margin:0}
figure.portrait img{width:100%; border-radius:20px; box-shadow: 0 18px 50px rgba(0,0,0,.45);}

/* v12.1.1-staging — nav link spacing + anchor snap offset */
.links{ display:flex; gap:18px; }
.links a + a{ margin-left: 0; } /* explicit reset if old margins existed */

/* Prevent sticky header from covering anchor targets */
html{ scroll-padding-top: calc(var(--dge-logo-size) + (var(--dge-header-height) * 2) + var(--dge-safe-area-top) + 12px); }
#resume, #connect, #contact{ scroll-margin-top: calc(var(--dge-logo-size) + (var(--dge-header-height) * 2) + var(--dge-safe-area-top) + 18px); }
:target{ scroll-margin-top: calc(var(--dge-logo-size) + (var(--dge-header-height) * 2) + var(--dge-safe-area-top) + 24px); }

/* Neutralize odd background hotspot behind Selected Work */
/* neutral removed in 12.1.3 */

/* v12.1.2-staging — section accent line & layout fixes */

/* Ensure Let's Connect inherits the standard glass background */
#contact.section{
  background: var(--glass-bg);
  margin-bottom: var(--space-8);
}
#contact.glass-panel{ overflow:visible; }
#contact .glass-card{
  max-width:none;
  width:100%;
  margin:0;
  padding:clamp(1.5rem,4vw,2.25rem);
}
#contact .btn-row{ justify-content:center; }
#contact.section-accent-top::before{ display:none; }

/* Footer layout: right-justify Contact Us link */
.footer .container{
  display:flex; align-items:center; justify-content:space-between;
}
.footer .right-links a{
  color:var(--brand-text);
  text-decoration:none;
  margin-left:12px;
  transition:color .2s ease;
}
.footer .right-links a:hover,
.footer .right-links a:focus-visible{
  color:color-mix(in srgb, var(--brand-text) 88%, #ffffff 12%);
  text-decoration:underline;
}
html[data-theme-v1="on"][data-theme="light"] .footer .right-links a,
html[data-theme-v1="on"]:not([data-theme="dark"]) .footer .right-links a{
  color:var(--brand-blue-2);
}
html[data-theme-v1="on"][data-theme="light"] .footer .right-links a:hover,
html[data-theme-v1="on"][data-theme="light"] .footer .right-links a:focus-visible,
html[data-theme-v1="on"]:not([data-theme="dark"]) .footer .right-links a:hover,
html[data-theme-v1="on"]:not([data-theme="dark"]) .footer .right-links a:focus-visible{
  color:var(--brand-blue);
}

/* Nav links spacing (keep) */
.links{ display:flex; gap:18px; }

/* v12.1.3-staging — Unified ambient background + accent lines */

/* Ambient background now comes from assets/css/theme-v1.css (single source of truth). */

/* Accent line used above chosen sections */
:root{
  --accent-green: linear-gradient(90deg,
    rgba(47,230,179,.42), rgba(47,230,179,.14) 45%, rgba(47,230,179,0) 72%);
}
.section-accent-top{ position:relative; }
.section-accent-top::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height:1px;
  background: var(--accent-green); border-radius:1px; filter: none;
}

/* Footer accent line (thin) */
.footer{ position:relative; }
.footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background: var(--accent-green); border-radius:1px; filter: none;
}

html[data-theme-v1="on"][data-theme="light"] .section-accent-top::before,
html[data-theme-v1="on"]:not([data-theme="dark"]) .section-accent-top::before,
html[data-theme-v1="on"][data-theme="light"] .footer::before,
html[data-theme-v1="on"]:not([data-theme="dark"]) .footer::before{
  display:none;
}

html[data-theme-v1="on"][data-theme="light"] .footer,
html[data-theme-v1="on"]:not([data-theme="dark"]) .footer{
  color: rgba(32, 56, 84, 0.9);
  border-top-color: rgba(65, 103, 146, 0.26);
  background: rgba(158, 186, 214, 0.34);
}

/* Respect reduced-transparency preference */
@media (prefers-reduced-transparency: reduce){
  .glass-card, .ui-btn, .btn:not(.ui-btn), .cta:not(.ui-btn), .cta-btn:not(.ui-btn), .badge{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: color-mix(in oklab, black 78%, white 22% / .22);
  }
}

.container{padding-left:20px;padding-right:20px;}
.footer .container{padding-left:24px;padding-right:24px;}

.container{max-width:1380px;padding-left:16px;padding-right:16px;}
.footer .container{padding-left:20px;padding-right:20px;}
.hero.container{padding-left:16px;padding-right:16px;}
.hero-row{gap:24px;column-gap:24px;}
.header + .hero.container, .header + main .container:first-child{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.hero-headline {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeSlide 1.2s ease-out forwards;
}
@keyframes heroFadeSlide {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-title {
  position: relative;
  display: inline-block;
  padding-bottom: 0.3em;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #0b84ff 0%, #3da5ff 100%);
  border-radius: 2px;
}


:root{
  --glass-radius: 16px;
  --glass-bg: rgba(255,255,255,.12);
  --glass-inner: rgba(255,255,255,.08);
  --glass-outline: rgba(255,255,255,.10);
  --glass-shadow: 0 12px 36px rgba(0,0,0,.24);
  --card-bg: rgba(255,255,255,.10);
  --card-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.glass-panel{
  position: relative;
  border-radius: var(--glass-radius);
  background: var(--glass-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--glass-shadow), 0 1px 0 var(--glass-inner) inset;
  outline: 1px solid var(--glass-outline);
  overflow: hidden; isolation: isolate;
}
.glass-card{
  background: var(--card-bg);
  border-radius: calc(var(--glass-radius) - 2px);
  box-shadow: var(--card-shadow), 0 1px 0 var(--glass-inner) inset;
  overflow: hidden;
}
/* Browser-compat pass: keep header/logo stable even when advanced CSS features are unsupported. */
.header .container.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position:relative;
}
.header .links{
  display:flex;
  align-items:center;
  gap:20px;
  margin-left:auto;
}
.header .brand img{
  width:88px;
  height:88px;
  max-width:88px;
  max-height:88px;
  object-fit:contain;
}
@media (max-width:900px){
  .header .brand img{
    width:72px;
    height:72px;
    max-width:72px;
    max-height:72px;
  }
}
/* High contrast mode: flatten */
@media (prefers-contrast: more){
  .glass-panel, .glass-card{
    background:#0f172a; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    outline:1px solid #cbd5e1;
  }
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  flex-wrap:wrap;
}

.footer__credit{
  font-size:clamp(0.55rem, 1vw, 0.7rem);
  letter-spacing:0.02em;
}

.footer__meta{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  flex-wrap:wrap;
  justify-content:flex-end;
}

@media (max-width:640px){
  .footer__meta{
    width:100%;
    justify-content:space-between;
  }
}
/* Unified button system: canonical .ui-btn + legacy bridges */
:root {
  --btn-font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --btn-font-size: 0.95rem;
  --btn-font-weight: 700;
  --btn-letter-spacing: 0.01em;
  --btn-text-transform: none;
  --btn-radius: 999px;
  --btn-padding-y: 0.56rem;
  --btn-padding-x: 1rem;
  --btn-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
  --btn-focus-ring: 0 0 0 3px rgba(128, 218, 255, 0.38);
  --btn-shadow-rest: 0 8px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --btn-shadow-hover: 0 12px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --btn-shadow-active: 0 6px 14px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14);

  --btn-nav-bg-1: #244567;
  --btn-nav-bg-2: #1b3450;
  --btn-nav-border: #4c7aa7;
  --btn-nav-text: #f7fbff;

  --btn-hero-bg-1: #1c5d97;
  --btn-hero-bg-2: #174c7a;
  --btn-hero-border: #77bfff;
  --btn-hero-text: #f8fbff;

  --btn-resume-bg-1: #137652;
  --btn-resume-bg-2: #0f5e42;
  --btn-resume-border: #6de4b4;
  --btn-resume-text: #f3fff9;

  --btn-insights-bg-1: #355197;
  --btn-insights-bg-2: #273d76;
  --btn-insights-border: #9db7ff;
  --btn-insights-text: #f6f9ff;

  --btn-linkedin-bg-1: #0a66c2;
  --btn-linkedin-bg-2: #084d94;
  --btn-linkedin-border: #6db5ff;
  --btn-linkedin-text: #f8fbff;

  --btn-newsletter-bg-1: #0d6d78;
  --btn-newsletter-bg-2: #0b5962;
  --btn-newsletter-border: #7edce8;
  --btn-newsletter-text: #f2feff;

  --btn-contact-bg-1: #9a5b16;
  --btn-contact-bg-2: #7d470f;
  --btn-contact-border: #ffd089;
  --btn-contact-text: #fff8ef;
}

@media (prefers-color-scheme: light){
  html[data-theme-v1="on"]:not([data-theme="dark"]){
    --btn-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
    --btn-focus-ring: 0 0 0 3px rgba(30, 103, 171, 0.34);
    --btn-shadow-rest: 0 8px 18px rgba(20, 45, 73, 0.24), inset 0 1px 0 rgba(234, 246, 255, 0.3);
    --btn-shadow-hover: 0 11px 24px rgba(20, 45, 73, 0.28), inset 0 1px 0 rgba(234, 246, 255, 0.34);
    --btn-shadow-active: 0 6px 14px rgba(20, 45, 73, 0.22), inset 0 1px 0 rgba(234, 246, 255, 0.26);

    --btn-nav-bg-1:#3b6792;
    --btn-nav-bg-2:#2d527a;
    --btn-nav-border:#7ea4cb;
    --btn-nav-text:#f7fbff;

    --btn-hero-bg-1:#2d6fa8;
    --btn-hero-bg-2:#245b8b;
    --btn-hero-border:#7eb7ea;
    --btn-hero-text:#f8fbff;

    --btn-resume-bg-1:#1a8065;
    --btn-resume-bg-2:#13684f;
    --btn-resume-border:#73dcb7;
    --btn-resume-text:#f3fff9;

    --btn-insights-bg-1:#3e5ca3;
    --btn-insights-bg-2:#304984;
    --btn-insights-border:#a8c1f5;
    --btn-insights-text:#f6f9ff;

    --btn-newsletter-bg-1:#127684;
    --btn-newsletter-bg-2:#0d616c;
    --btn-newsletter-border:#7dd9e5;
    --btn-newsletter-text:#f2feff;

    --btn-contact-bg-1:#9a641f;
    --btn-contact-bg-2:#805313;
    --btn-contact-border:#f5ca82;
    --btn-contact-text:#fff8ef;
  }
}

html[data-theme-v1="on"][data-theme="light"]{
  --btn-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
  --btn-focus-ring: 0 0 0 3px rgba(30, 103, 171, 0.34);
  --btn-shadow-rest: 0 8px 18px rgba(20, 45, 73, 0.24), inset 0 1px 0 rgba(234, 246, 255, 0.3);
  --btn-shadow-hover: 0 11px 24px rgba(20, 45, 73, 0.28), inset 0 1px 0 rgba(234, 246, 255, 0.34);
  --btn-shadow-active: 0 6px 14px rgba(20, 45, 73, 0.22), inset 0 1px 0 rgba(234, 246, 255, 0.26);

  --btn-nav-bg-1:#3b6792;
  --btn-nav-bg-2:#2d527a;
  --btn-nav-border:#7ea4cb;
  --btn-nav-text:#f7fbff;

  --btn-hero-bg-1:#2d6fa8;
  --btn-hero-bg-2:#245b8b;
  --btn-hero-border:#7eb7ea;
  --btn-hero-text:#f8fbff;

  --btn-resume-bg-1:#1a8065;
  --btn-resume-bg-2:#13684f;
  --btn-resume-border:#73dcb7;
  --btn-resume-text:#f3fff9;

  --btn-insights-bg-1:#3e5ca3;
  --btn-insights-bg-2:#304984;
  --btn-insights-border:#a8c1f5;
  --btn-insights-text:#f6f9ff;

  --btn-newsletter-bg-1:#127684;
  --btn-newsletter-bg-2:#0d616c;
  --btn-newsletter-border:#7dd9e5;
  --btn-newsletter-text:#f2feff;

  --btn-contact-bg-1:#9a641f;
  --btn-contact-bg-2:#805313;
  --btn-contact-border:#f5ca82;
  --btn-contact-text:#fff8ef;
}

.ui-btn,
.cta:not(.ui-btn),
.btn:not(.ui-btn),
.cta-btn:not(.ui-btn),
.newsletter-filter-btn,
.header .links a.ui-btn {
  --btn-bg-1: var(--btn-hero-bg-1);
  --btn-bg-2: var(--btn-hero-bg-2);
  --btn-border: var(--btn-hero-border);
  --btn-text: var(--btn-hero-text);
  align-items: center;
  appearance: none;
  -webkit-appearance: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: linear-gradient(180deg, var(--btn-bg-1), var(--btn-bg-2));
  border: 1px solid color-mix(in oklab, var(--btn-border) 72%, black 28%);
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow-rest);
  color: var(--btn-text) !important;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-style: normal;
  font-weight: var(--btn-font-weight);
  justify-content: center;
  letter-spacing: var(--btn-letter-spacing);
  line-height: 1.15;
  min-height: 2.35rem;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  text-decoration: none;
  text-rendering: geometricPrecision;
  text-shadow: var(--btn-text-shadow);
  text-transform: var(--btn-text-transform);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
  white-space: nowrap;
}

.ui-btn:hover,
.cta:not(.ui-btn):hover,
.btn:not(.ui-btn):hover,
.cta-btn:not(.ui-btn):hover,
.newsletter-filter-btn:hover,
.header .links a.ui-btn:hover {
  box-shadow: var(--btn-shadow-hover);
  filter: saturate(1.05);
  transform: translateY(-1px);
}

.ui-btn:active,
.cta:not(.ui-btn):active,
.btn:not(.ui-btn):active,
.cta-btn:not(.ui-btn):active,
.newsletter-filter-btn:active,
.header .links a.ui-btn:active {
  box-shadow: var(--btn-shadow-active);
  filter: none;
  transform: translateY(0);
}

.ui-btn:focus-visible,
.cta:not(.ui-btn):focus-visible,
.btn:not(.ui-btn):focus-visible,
.cta-btn:not(.ui-btn):focus-visible,
.newsletter-filter-btn:focus-visible,
.header .links a.ui-btn:focus-visible {
  box-shadow: var(--btn-focus-ring), var(--btn-shadow-hover);
  outline: none;
}

.ui-btn--nav,
.header .links a.ui-btn {
  --btn-bg-1: var(--btn-nav-bg-1);
  --btn-bg-2: var(--btn-nav-bg-2);
  --btn-border: var(--btn-nav-border);
  --btn-text: var(--btn-nav-text);
  min-height: 2rem;
  padding: 0.48rem 0.85rem;
}

.ui-btn--hero { --btn-bg-1: var(--btn-hero-bg-1); --btn-bg-2: var(--btn-hero-bg-2); --btn-border: var(--btn-hero-border); --btn-text: var(--btn-hero-text); }
.ui-btn--resume { --btn-bg-1: var(--btn-resume-bg-1); --btn-bg-2: var(--btn-resume-bg-2); --btn-border: var(--btn-resume-border); --btn-text: var(--btn-resume-text); }
.ui-btn--insights { --btn-bg-1: var(--btn-insights-bg-1); --btn-bg-2: var(--btn-insights-bg-2); --btn-border: var(--btn-insights-border); --btn-text: var(--btn-insights-text); }
.ui-btn--linkedin { --btn-bg-1: var(--btn-linkedin-bg-1); --btn-bg-2: var(--btn-linkedin-bg-2); --btn-border: var(--btn-linkedin-border); --btn-text: var(--btn-linkedin-text); }
.ui-btn--newsletter { --btn-bg-1: var(--btn-newsletter-bg-1); --btn-bg-2: var(--btn-newsletter-bg-2); --btn-border: var(--btn-newsletter-border); --btn-text: var(--btn-newsletter-text); }
.ui-btn--contact { --btn-bg-1: var(--btn-contact-bg-1); --btn-bg-2: var(--btn-contact-bg-2); --btn-border: var(--btn-contact-border); --btn-text: var(--btn-contact-text); }

.ui-btn--ghost {
  background: linear-gradient(180deg, color-mix(in oklab, var(--btn-bg-1) 30%, transparent), color-mix(in oklab, var(--btn-bg-2) 26%, transparent));
}

.btn-view:not(.ui-btn),
.cta--view:not(.ui-btn) { --btn-bg-1: var(--btn-hero-bg-1); --btn-bg-2: var(--btn-hero-bg-2); --btn-border: var(--btn-hero-border); --btn-text: var(--btn-hero-text); }
.btn-download:not(.ui-btn),
.cta--download:not(.ui-btn) { --btn-bg-1: var(--btn-resume-bg-1); --btn-bg-2: var(--btn-resume-bg-2); --btn-border: var(--btn-resume-border); --btn-text: var(--btn-resume-text); }
.btn-activity:not(.ui-btn),
.cta--recent:not(.ui-btn) { --btn-bg-1: var(--btn-newsletter-bg-1); --btn-bg-2: var(--btn-newsletter-bg-2); --btn-border: var(--btn-newsletter-border); --btn-text: var(--btn-newsletter-text); }
.btn-linkedin:not(.ui-btn),
.cta--li:not(.ui-btn) { --btn-bg-1: var(--btn-insights-bg-1); --btn-bg-2: var(--btn-insights-bg-2); --btn-border: var(--btn-insights-border); --btn-text: var(--btn-insights-text); }
.btn-discuss:not(.ui-btn),
.cta--discuss:not(.ui-btn),
.cta-glass-light:not(.ui-btn) { --btn-bg-1: var(--btn-contact-bg-1); --btn-bg-2: var(--btn-contact-bg-2); --btn-border: var(--btn-contact-border); --btn-text: var(--btn-contact-text); }

.newsletter-filter-btn.is-active {
  --btn-bg-1: var(--btn-newsletter-bg-1);
  --btn-bg-2: color-mix(in oklab, var(--btn-newsletter-bg-2) 82%, black 18%);
  --btn-border: var(--btn-newsletter-border);
}

@media (forced-colors: active) {
  .ui-btn,
  .cta:not(.ui-btn),
  .btn:not(.ui-btn),
  .cta-btn:not(.ui-btn),
  .newsletter-filter-btn,
  .header .links a.ui-btn {
    background: ButtonFace;
    border-color: CanvasText;
    color: ButtonText !important;
    text-shadow: none;
  }
}