@layer base, components, utilities;

: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:#0f8f4b;     /* Light-mode text AA on #ffffff (>=4.6:1) */
  --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:#8855DD;
  --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: var(--accent-purple);
  --focus-color: var(--accent-purple);
  --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: radial-gradient(1200px 900px at 20% -10%, rgba(16,215,138,0.18), transparent 60%),
              radial-gradient(1200px 900px at 120% 20%, rgba(61,165,255,0.18), transparent 60%),
              linear-gradient(180deg, #050b12, #0b1620 35%, #0d1b28 100%);
}

/* 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;
  position:relative;
  z-index:9999;
}

/* Overscroll masking */
html,body{
  background-color: var(--deep-blue) !important;
  background-image: none !important;
  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:#9b7cff; --bg2:#6b5cff; } /* jewel violet */
.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);
}

.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,.6); 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 */

/* Decorative accent line (green) used consistently */
:root{
  --accent-green: linear-gradient(90deg, rgba(47,230,179,0.85), rgba(47,230,179,0.20) 45%, rgba(47,230,179,0) 70%);
}

/* helper class to add the thin accent line above a section */
.section-accent-top{
  position: relative;
  margin-top:12px !important;
  padding-top:32px !important;
}
.section-accent-top::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-12px; height:3px;
  background: var(--accent-green);
  border-radius: 2px;
  filter: blur(.2px);
}

/* 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 gradient accent instead of Let's Connect */
.footer{
  position: relative;
}
.footer::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:3px;
  background: var(--accent-green);
  border-radius:2px;
  filter: blur(.2px);
}

/* 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 */

/* Global ambient background (non-fixed for mobile smoothness) */
body{
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(47,230,179,.11), transparent 60%),
    radial-gradient(1200px 900px at 110% 20%, rgba(61,165,255,.10), transparent 60%),
    linear-gradient(180deg, #050b12, #0b1620 40%, #0d1b28 100%);
  background-attachment: scroll;
}

/* Accent line used above chosen sections */
:root{
  --accent-green: linear-gradient(90deg,
    rgba(47,230,179,.85), rgba(47,230,179,.25) 45%, rgba(47,230,179,0) 70%);
}
.section-accent-top{ position:relative; }
.section-accent-top::before{
  content:""; position:absolute; left:0; right:0; top:-12px; height:3px;
  background: var(--accent-green); border-radius:2px; filter: blur(.2px);
}

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

/* Respect reduced-transparency preference */
@media (prefers-reduced-transparency: reduce){
  .glass-card, .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;
}
:root{
  --cta-scale: 1.06;
  --cta-press: .985;
  --cta-shadow: 0 8px 20px rgba(0,0,0,.12);
  --cta-shadow-quiet: 0 2px 6px rgba(0,0,0,.10);
  --cta-focus: 2px solid #67e8f9; /* Liquid Glass accent (electric cyan) */
}
.cta-btn {
  transform: translateZ(0);
  transition:
    transform 160ms cubic-bezier(.2,.8,.2,1),
    box-shadow 160ms cubic-bezier(.2,.8,.2,1),
    filter 160ms cubic-bezier(.2,.8,.2,1);
  box-shadow: var(--cta-shadow-quiet);
  will-change: transform;
}
.cta-btn .cta-icon {
  display: inline-block;
  transform: translateZ(0);
  transition: transform 160ms cubic-bezier(.2,.8,.2,1);
}

@media (hover:hover) and (pointer:fine){
  .cta-btn:hover{
    transform: scale(var(--cta-scale));
    box-shadow: 0 14px 34px rgba(0,0,0,.20), 0 0 0 1px rgba(103,232,249,.25);
  }
  .cta-btn:hover .cta-icon {
    transform: translateX(4px);
  }
}

.cta-btn:active{
  transform: scale(var(--cta-press));
  filter: brightness(.98);
}

.cta-btn:focus-visible{
  outline: var(--cta-focus);
  outline-offset: 2px;
}

/* Shadow pulse variant (enable with .pulse) */
@keyframes ctaShadowPulse {
  0%,100% { box-shadow: 0 14px 34px rgba(0,0,0,.20), 0 0 0 1px rgba(103,232,249,.25); }
  50%     { box-shadow: 0 12px 28px rgba(0,0,0,.16); }
}
@media (hover:hover) and (pointer:fine){
  .cta-btn.pulse:hover{ animation: ctaShadowPulse 900ms ease-in-out; }
}

@media (prefers-reduced-motion: reduce){
  .cta-btn, .cta-btn .cta-icon{
    transition: none;
    animation: none !important;
  }
  .cta-btn:hover, .cta-btn:active{
    transform: none;
    filter: none;
    box-shadow: var(--cta-shadow-quiet);
  }
}

.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, #67e8f9 0%, #38bdf8 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;
}
/* CTA buttons, matching hero buttons */
.cta-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-weight:600; text-decoration:none;
}
.cta-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.22); }
.cta-btn:active{ transform: translateY(0); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.cta-btn:focus{ outline: 2px solid #67e8f9; outline-offset: 2px; }
/* 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;
  }
  .cta-btn{ background:#e2e8f0; color:#0f172a; box-shadow:none; }
}


/* Base still provided by .cta-btn; these only colorize */
.cta-btn{ color: #ffffff; }

/* Discuss Fit (soft amber/orange) */
.cta-discuss{
  background: linear-gradient(180deg, rgba(251,191,36,.26), rgba(245,158,11,.22));
  border-color: rgba(245,158,11,.45);
  box-shadow: 0 8px 20px rgba(245,158,11,.22), 0 1px 0 rgba(255,255,255,.10) inset;
}
.cta-discuss:hover{ box-shadow: 0 12px 26px rgba(245,158,11,.28); }
.cta-discuss:active{ box-shadow: 0 5px 14px rgba(245,158,11,.22); }

/* LinkedIn (soft brand blue) */
.cta-linkedin{
  background: linear-gradient(180deg, rgba(10,102,194,.28), rgba(10,102,194,.22));
  border-color: rgba(10,102,194,.45);
  box-shadow: 0 8px 20px rgba(10,102,194,.24), 0 1px 0 rgba(255,255,255,.10) inset;
}
.cta-linkedin:hover{ box-shadow: 0 12px 26px rgba(10,102,194,.30); }
.cta-linkedin:active{ box-shadow: 0 5px 14px rgba(10,102,194,.24); }

/* Recent Activity (soft violet/purple) */
.cta-activity{
  background: linear-gradient(180deg, rgba(168,85,247,.26), rgba(139,92,246,.22));
  border-color: rgba(168,85,247,.45);
  box-shadow: 0 8px 20px rgba(168,85,247,.24), 0 1px 0 rgba(255,255,255,.10) inset;
}
.cta-activity:hover{ box-shadow: 0 12px 26px rgba(168,85,247,.30); }
.cta-activity:active{ box-shadow: 0 5px 14px rgba(168,85,247,.24); }

/* Download/View Résumé (soft green) */
.cta-download{
  background: linear-gradient(180deg, rgba(34,197,94,.26), rgba(16,185,129,.22));
  border-color: rgba(34,197,94,.45);
  box-shadow: 0 8px 20px rgba(34,197,94,.24), 0 1px 0 rgba(255,255,255,.10) inset;
}
.cta-download:hover{ box-shadow: 0 12px 26px rgba(34,197,94,.30); }
.cta-download:active{ box-shadow: 0 5px 14px rgba(34,197,94,.24); }

/* High-contrast mode: keep color but reduce effects for readability */
@media (prefers-contrast: more){
  .cta-discuss, .cta-linkedin, .cta-activity, .cta-download{
    box-shadow: none;
  }
}



/* Base .cta-btn stays neutral glass; these add soft accent colors */
.cta-btn{ color:#fff; }

/* Discuss Fit -> soft amber/orange */
.cta-btn.btn-discuss{
  background: linear-gradient(180deg, rgba(251,191,36,.26), rgba(245,158,11,.22));
  border-color: rgba(245,158,11,.45);
  box-shadow: 0 8px 20px rgba(245,158,11,.22), 0 1px 0 rgba(255,255,255,.10) inset;
}
.cta-btn.btn-discuss:hover{ box-shadow: 0 12px 26px rgba(245,158,11,.30); }
.cta-btn.btn-discuss:active{ box-shadow: 0 5px 14px rgba(245,158,11,.22); }

/* Follow on LinkedIn -> softened LinkedIn blue */
.cta-btn.btn-linkedin{
  background: linear-gradient(180deg, rgba(10,102,194,.28), rgba(10,102,194,.22));
  border-color: rgba(10,102,194,.45);
  box-shadow: 0 8px 20px rgba(10,102,194,.24), 0 1px 0 rgba(255,255,255,.10) inset;
}
.cta-btn.btn-linkedin:hover{ box-shadow: 0 12px 26px rgba(10,102,194,.30); }
.cta-btn.btn-linkedin:active{ box-shadow: 0 5px 14px rgba(10,102,194,.24); }

/* See Recent Activity -> soft violet */
.cta-btn.btn-activity{
  background: linear-gradient(180deg, rgba(168,85,247,.26), rgba(139,92,246,.22));
  border-color: rgba(168,85,247,.45);
  box-shadow: 0 8px 20px rgba(168,85,247,.24), 0 1px 0 rgba(255,255,255,.10) inset;
}
.cta-btn.btn-activity:hover{ box-shadow: 0 12px 26px rgba(168,85,247,.30); }
.cta-btn.btn-activity:active{ box-shadow: 0 5px 14px rgba(168,85,247,.24); }

/* Download/View Résumé -> soft green */
.cta-btn.btn-download,
.cta-btn.btn-view{
  background: linear-gradient(180deg, rgba(34,197,94,.26), rgba(16,185,129,.22));
  border-color: rgba(34,197,94,.45);
  box-shadow: 0 8px 20px rgba(34,197,94,.24), 0 1px 0 rgba(255,255,255,.10) inset;
}
.cta-btn.btn-download:hover,
.cta-btn.btn-view:hover{ box-shadow: 0 12px 26px rgba(34,197,94,.30); }
.cta-btn.btn-download:active,
.cta-btn.btn-view:active{ box-shadow: 0 5px 14px rgba(34,197,94,.24); }



.cta-glass-light{
  /* lighter, airier glass */
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 10px 24px rgba(0,0,0,.18), 0 0 0 6px rgba(255,255,255,.04);
}

/* When a color variant is combined with .cta-glass-light, keep color but lighten fill */
.cta-glass-light.btn-view{
  background: linear-gradient(180deg, rgba(34,197,94,.22), rgba(16,185,129,.14));
  border-color: rgba(34,197,94,.38);
}
.cta-glass-light.btn-activity{
  background: linear-gradient(180deg, rgba(168,85,247,.22), rgba(139,92,246,.14));
  border-color: rgba(168,85,247,.38);
}
.cta-glass-light.btn-linkedin{
  background: linear-gradient(180deg, rgba(10,102,194,.24), rgba(10,102,194,.14));
  border-color: rgba(10,102,194,.38);
}
.cta-glass-light.btn-discuss{
  background: linear-gradient(180deg, rgba(251,191,36,.22), rgba(245,158,11,.14));
  border-color: rgba(245,158,11,.38);
}

/* Hover/active remain gentle */
.cta-btn.cta-glass-light:hover{ box-shadow: 0 14px 28px rgba(0,0,0,.22), 0 0 0 6px rgba(255,255,255,.06); transform: translateY(-1px); }
.cta-btn.cta-glass-light:active{ box-shadow: 0 6px 16px rgba(0,0,0,.18), 0 0 0 4px rgba(255,255,255,.05); transform: translateY(0); }


@layer components{
  /* Reaffirm CTA base and variants (existing definitions remain; this consolidates priority) */
  .cta-btn{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.55rem .9rem; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    font-weight:600; text-decoration:none; color:#fff;
    transition: box-shadow .2s ease, transform .15s ease;
  }
  .cta-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.22); }
  .cta-btn:active{ transform: translateY(0); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
  .cta-btn:focus{ outline: 2px solid #67e8f9; outline-offset: 2px; }
  /* Light glass modifier identical to hero */
  .cta-glass-light{
    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
    border-color: rgba(255,255,255,.28);
    box-shadow: 0 10px 24px rgba(0,0,0,.18), 0 0 0 6px rgba(255,255,255,.04);
  }
  /* Soft brand variants */
  .btn-view{      background: linear-gradient(180deg, rgba(34,197,94,.26), rgba(16,185,129,.22)); border-color: rgba(34,197,94,.45); }
  .btn-activity{  background: linear-gradient(180deg, rgba(168,85,247,.26), rgba(139,92,246,.22)); border-color: rgba(168,85,247,.45); }
  .btn-linkedin{  background: linear-gradient(180deg, rgba(10,102,194,.28), rgba(10,102,194,.22)); border-color: rgba(10,102,194,.45); }
  .btn-discuss{   background: linear-gradient(180deg, rgba(251,191,36,.26), rgba(245,158,11,.22)); border-color: rgba(245,158,11,.45); }
  /* When combined with light glass, soften further */
  .cta-glass-light.btn-view{     background: linear-gradient(180deg, rgba(34,197,94,.22), rgba(16,185,129,.14)); border-color: rgba(34,197,94,.38); }
  .cta-glass-light.btn-activity{ background: linear-gradient(180deg, rgba(168,85,247,.22), rgba(139,92,246,.14)); border-color: rgba(168,85,247,.38); }
  .cta-glass-light.btn-linkedin{ background: linear-gradient(180deg, rgba(10,102,194,.24), rgba(10,102,194,.14)); border-color: rgba(10,102,194,.38); }
  .cta-glass-light.btn-discuss{  background: linear-gradient(180deg, rgba(251,191,36,.22), rgba(245,158,11,.14)); border-color: rgba(245,158,11,.38); }
  @media (prefers-contrast: more){
    .cta-btn{ box-shadow:none; }
    .cta-glass-light{ box-shadow:none; }
  }
}

button.cta-btn, input.cta-btn[type="submit"], input.cta-btn[type="button"]{
  -webkit-appearance: none; appearance: none;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: .55rem .9rem;
  font-weight: 600;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
button.cta-btn:hover, input.cta-btn[type="submit"]:hover, input.cta-btn[type="button"]:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.22); }
button.cta-btn:active, input.cta-btn[type="submit"]:active, input.cta-btn[type="button"]:active{ transform: translateY(0); box-shadow: 0 4px 12px rgba(0,0,0,.18); }

/* color variants apply to form controls too */
button.cta-btn.btn-view,   input.cta-btn.btn-view{ background: linear-gradient(180deg, rgba(34,197,94,.26), rgba(16,185,129,.22)); border-color: rgba(34,197,94,.45); }
button.cta-btn.btn-activity, input.cta-btn.btn-activity{ background: linear-gradient(180deg, rgba(168,85,247,.26), rgba(139,92,246,.22)); border-color: rgba(168,85,247,.45); }
button.cta-btn.btn-discuss, input.cta-btn.btn-discuss{ background: linear-gradient(180deg, rgba(251,191,36,.26), rgba(245,158,11,.22)); border-color: rgba(245,158,11,.45); }
button.cta-btn.btn-linkedin, input.cta-btn.btn-linkedin{ background: linear-gradient(180deg, rgba(10,102,194,.28), rgba(10,102,194,.22)); border-color: rgba(10,102,194,.45); }

/* super-light modifier on form controls */
button.cta-btn.cta-glass-light, input.cta-btn.cta-glass-light{
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 10px 24px rgba(0,0,0,.18), 0 0 0 6px rgba(255,255,255,.04);
}
button.cta-btn.cta-glass-light.btn-view, input.cta-btn.cta-glass-light.btn-view{ background: linear-gradient(180deg, rgba(34,197,94,.22), rgba(16,185,129,.14)); border-color: rgba(34,197,94,.38); }
button.cta-btn.cta-glass-light.btn-discuss, input.cta-btn.cta-glass-light.btn-discuss{ background: linear-gradient(180deg, rgba(251,191,36,.22), rgba(245,158,11,.14)); border-color: rgba(245,158,11,.38); }
button.cta-btn.cta-glass-light.btn-activity, input.cta-btn.cta-glass-light.btn-activity{ background: linear-gradient(180deg, rgba(168,85,247,.22), rgba(139,92,246,.14)); border-color: rgba(168,85,247,.38); }


body.resume-page .cta-btn.btn-view.cta-glass-light{
  background: linear-gradient(180deg, rgba(34,197,94,.22), rgba(16,185,129,.14));
  border-color: rgba(34,197,94,.38);
}