@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg: #ffffff; --bg2: #f7f8fa; --bg3: #f0f1f5;
  --card: #ffffff; --card-hover: #f4f5f8;
  --text: #111218; --text2: #4a4d5c; --text3: #8b8fa8;
  --accent: #1a1a2e; --blue: #3b5cff; --blue2: #5b78ff;
  --border: #e4e5ee; --border2: #eeeff5;
  --green: #22c55e; --amber: #f59e0b; --gray: #9ca0b8;
  --road: #d0d2dc; --road2: #dfe0e8; --road3: #e8eaef;
  --shadow: 0 1px 4px rgba(0,0,0,.06); --shadow2: 0 4px 16px rgba(0,0,0,.09);
  --r: 10px; --r2: 16px; --r3: 24px;
  --t: .2s ease;
}
[data-theme="dark"] {
  --bg: #09090f; --bg2: #111118; --bg3: #18181f;
  --card: #14141c; --card-hover: #1c1c26;
  --text: #f0f0f6; --text2: #9fa3b8; --text3: #6b6e88;
  --border: #22222e; --border2: #1a1a26;
  --road: #2a2a3c; --road2: #333345; --road3: #3a3a50;
  --shadow: 0 1px 4px rgba(0,0,0,.3); --shadow2: 0 4px 16px rgba(0,0,0,.5);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;transition:background var(--t),color var(--t)}
a{color:inherit;text-decoration:none}

/* ── HEADER ── */
.header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:14px 32px;background:rgba(255,255,255,.75);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);transition:background var(--t), border-color var(--t)}
[data-theme="dark"] .header{background:rgba(9,9,15,.8)}
.header__brand{display:flex;align-items:center;gap:12px;cursor:pointer}
.header__name{font-weight:700;font-size:15px;letter-spacing:-.02em}
.header__sep{width:1px;height:16px;background:var(--border)}
.header__role{font-size:12px;color:var(--text3);font-weight:400}
.header__right{display:flex;align-items:center;gap:8px}

/* Header Brand Logo styling */
#header-logo-container {
  display: none;
}
body.brand-ebg-active #header-logo-container {
  display: block;
}
body.brand-ebg-active .header__name,
body.brand-ebg-active .header__sep,
body.brand-ebg-active .header__role {
  display: none;
}
.header-ebg-logo-img {
  height: 42px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
  transition: filter var(--t);
}
[data-theme="light"] .header-ebg-logo-img {
  filter: invert(1);
}
[data-theme="dark"] .header-ebg-logo-img {
  filter: none;
}

/* Premium Sliding Theme Toggle Switch */
.theme-toggle-switch {
  position: relative;
  width: 60px;
  height: 30px;
  border-radius: 15px;
  border: 1px solid var(--border);
  background: var(--bg3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  outline: none;
  transition: all var(--t);
  overflow: hidden;
}
.theme-toggle-switch:hover {
  border-color: var(--blue);
}
.theme-toggle-switch__icon {
  font-size: 13px;
  user-select: none;
  z-index: 1;
  transition: opacity var(--t);
}
.theme-toggle-switch__icon--sun {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
}
.theme-toggle-switch__icon--moon {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
}
.theme-toggle-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform var(--t), background-color var(--t);
  z-index: 2;
}

/* Light/Dark state transitions */
html[data-theme="light"] .theme-toggle-switch__knob {
  transform: translateX(0);
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
html[data-theme="dark"] .theme-toggle-switch__knob {
  transform: translateX(30px);
  background: #111118;
}
html[data-theme="light"] .theme-toggle-switch {
  background: #e4e5ee;
}
html[data-theme="dark"] .theme-toggle-switch {
  background: #1e1e2f;
}

/* ── HERO ── */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px}
.hero__badge{display:inline-flex;align-items:center;gap:7px;padding:5px 14px;border-radius:100px;font-size:12px;font-weight:500;background:var(--bg2);border:1px solid var(--border);color:var(--text3);margin-bottom:24px}
.hero__dot{width:6px;height:6px;border-radius:50%;background:var(--amber);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero__h1{font-size:clamp(40px,7vw,72px);font-weight:800;letter-spacing:-.04em;line-height:1.1;margin-bottom:12px;max-width:680px}
.hero__socials{display:flex;gap:16px;margin-bottom:32px;justify-content:center;align-items:center}
.hero__socials a{display:inline-flex;color:var(--text3);width:32px;height:32px;transition:color var(--t), transform var(--t)}
.hero__socials a:hover{color:var(--blue);transform:translateY(-2px)}
.hero__resume{width:auto !important;height:32px;padding:0 16px;border-radius:100px;background:var(--bg2);border:1px solid var(--border);color:var(--text2) !important;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;align-items:center}
.hero__resume:hover{border-color:var(--blue);color:var(--blue) !important;background:var(--card)}
.hero__h2{font-size:clamp(20px,3vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.3;margin-bottom:18px;max-width:680px;color:var(--text2)}
.text-blue{color:var(--blue)}
.hero__desc{font-size:clamp(14px,1.8vw,17px);color:var(--text2);max-width:500px;line-height:1.75;margin-bottom:44px}
.hero__cta{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text3);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.hero__arrow{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;animation:bob 2s ease-in-out infinite;color:var(--text2);font-size:13px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ── PROJECTS ── */
.projects{max-width:780px;margin:0 auto;padding:40px 24px 100px}
.projects__head{margin-bottom:48px}
.projects__title{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.projects__sub{font-size:14px;color:var(--text3)}

.pcard{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:28px;margin-bottom:36px;box-shadow:var(--shadow);opacity:0;transform:translateY(28px);transition:opacity .5s ease,transform .5s ease,box-shadow var(--t),border-color var(--t)}
.pcard.show{opacity:1;transform:translateY(0)}
.pcard:hover{box-shadow:var(--shadow2)}
.pcard.has-brand{border-left-width:3px}

.pcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.pcard__num{font-size:11px;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.pcard__title{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.pcard__sub{font-size:13px;color:var(--text3);margin-top:3px}
.pcard__meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex-shrink:0}
.pcard__date{font-size:12px;color:var(--text3);padding:3px 10px;border-radius:100px;background:var(--bg2);border:1px solid var(--border2)}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:100px}
.badge--completed{background:#dcfce7;color:#15803d}
.badge--in-progress{background:#fef3c7;color:#92400e}
.badge--paused{background:#fef3c7;color:#92400e}
.badge--planned{background:var(--bg2);color:var(--text3)}
[data-theme="dark"] .badge--completed{background:#14532d30;color:#4ade80}
[data-theme="dark"] .badge--in-progress{background:#78350f30;color:#fbbf24}
[data-theme="dark"] .badge--paused{background:#78350f30;color:#fbbf24}

.pcard__body{display:flex;flex-direction:column;gap:14px}
.field__label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--text3);margin-bottom:5px}
.field__val{font-size:14px;color:var(--text2);line-height:1.65}
.field__empty{font-size:13px;color:var(--text3);font-style:italic;padding:9px 12px;border:1.5px dashed var(--border);border-radius:6px;background:var(--bg2)}
.tech-wrap{display:flex;flex-wrap:wrap;gap:5px}
.tech-tag{padding:3px 9px;border-radius:100px;font-size:11px;font-weight:500;background:var(--bg2);border:1px solid var(--border);color:var(--text2)}
.links{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.link-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r);font-size:12px;font-weight:500;background:var(--bg2);border:1px solid var(--border);color:var(--text2);transition:all var(--t);cursor:pointer}
.link-btn:hover{transform: translateY(-1px); box-shadow: var(--shadow);}
.link-btn svg{width:14px;height:14px;fill:currentColor;flex-shrink:0;transition:transform var(--t)}
.link-btn:hover svg{transform:scale(1.15)}

.highlight-text {
  font-weight: 600;
  color: var(--blue);
}
[data-theme="dark"] .highlight-text {
  color: var(--blue2);
}
.overlay--ebg .highlight-text {
  color: #cda053;
}
.overlay--daewoo .highlight-text {
  color: #045cb4 !important;
}
.overlay--swapnow .highlight-text {
  color: #01BF62 !important;
}
.overlay--carlton .highlight-text {
  color: #cda053;
}
.overlay--ageon .highlight-text {
  color: #00A896;
}
.overlay--kabego .highlight-text {
  color: #60a5fa;
}
.overlay--franchise .highlight-text {
  color: #f87171;
}
.overlay--python .highlight-text {
  color: #3776AB;
}
.overlay--supabase .highlight-text {
  color: #4682B4;
}
.overlay--adhira .highlight-text {
  color: #F24C4C;
}

/* Brand specific styling for link buttons */
.link-btn--github,
[class*="overlay--"].overlay--swapnow .link-btn--github,
[class*="overlay--"].overlay--daewoo .link-btn--github {
  background: #ffffff !important;
  border-color: #000000 !important;
  color: #000000 !important;
}
.link-btn--github svg,
[class*="overlay--"].overlay--swapnow .link-btn--github svg,
[class*="overlay--"].overlay--daewoo .link-btn--github svg {
  fill: #000000 !important;
}
.link-btn--github:hover,
[class*="overlay--"].overlay--swapnow .link-btn--github:hover,
[class*="overlay--"].overlay--daewoo .link-btn--github:hover {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}
.link-btn--github:hover svg,
[class*="overlay--"].overlay--swapnow .link-btn--github:hover svg,
[class*="overlay--"].overlay--daewoo .link-btn--github:hover svg {
  fill: #ffffff !important;
}

/* Dark mode / dark overlay overrides */
[data-theme="dark"] .link-btn--github,
[class*="overlay--"]:not(.overlay--swapnow):not(.overlay--daewoo) .link-btn--github {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}
[data-theme="dark"] .link-btn--github svg,
[class*="overlay--"]:not(.overlay--swapnow):not(.overlay--daewoo) .link-btn--github svg {
  fill: #ffffff !important;
}
[data-theme="dark"] .link-btn--github:hover,
[class*="overlay--"]:not(.overlay--swapnow):not(.overlay--daewoo) .link-btn--github:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
}
[data-theme="dark"] .link-btn--github:hover svg,
[class*="overlay--"]:not(.overlay--swapnow):not(.overlay--daewoo) .link-btn--github:hover svg {
  fill: #000000 !important;
}

.link-btn--drive:hover{border-color:#34a853;color:#34a853;background:rgba(52,168,83,.04)}
[data-theme="dark"] .link-btn--drive:hover{border-color:#4ade80;color:#4ade80;background:rgba(74,222,128,.08)}

.link-btn--live:hover{border-color:var(--blue);color:var(--blue);background:rgba(59,92,255,.04)}
.link-btn--live svg {
  fill: #2563eb !important;
}
.link-btn--download:hover {
  border-color: #045cb4;
  color: #045cb4;
  background: rgba(4, 92, 180, 0.04);
}
[data-theme="dark"] .link-btn--download:hover {
  border-color: #0693e3;
  color: #0693e3;
  background: rgba(6, 147, 227, 0.08);
}
.link-btn--download svg {
  fill: currentColor !important;
}
.detail-btn{display:inline-flex;align-items:center;gap:5px;padding:9px 18px;border-radius:var(--r);font-size:13px;font-weight:600;color:#fff;background:var(--blue);border:none;cursor:pointer;margin-top:8px;transition:background var(--t)}
.detail-btn:hover{background:var(--blue2)}

/* completeness */
.compl{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border2)}
.compl__bar{flex:1;height:3px;border-radius:3px;background:var(--bg3);overflow:hidden}
.compl__fill{height:100%;border-radius:3px;transition:width .6s ease}
.compl__pct{font-size:11px;font-weight:600;color:var(--text3);white-space:nowrap}
.missing{margin-top:10px;padding:10px 14px;border-radius:6px;background:var(--bg2);border:1px solid var(--border2)}
.missing__title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:5px}
.missing__tags{display:flex;flex-wrap:wrap;gap:5px}
.missing__tag{font-size:11px;color:var(--amber);font-weight:500;padding:2px 7px;background:#fef3c718;border-radius:4px}

/* ── DETAIL OVERLAY ── */
.overlay{display:none;position:fixed;inset:0;z-index:200;overflow-y:auto;background:var(--bg)}
.overlay.open{display:block}
.overlay__inner{max-width:760px;margin:0 auto;padding:60px 20px 80px;position:relative;z-index:2}

/* ── BRAND-SPECIFIC OVERLAY SYSTEM ── */
/* Each brand gets its own pitch-dark background, all share the same content overrides */

.overlay--ebg       { background: #000000 !important; }
.overlay--daewoo    { background: #ffffff !important; }
.overlay--swapnow   { background: #ffffff !important; }
.overlay--carlton   { background: #0a0f18 !important; }
.overlay--ageon     { background: #041210 !important; }
.overlay--kabego    { background: #060d1c !important; }
.overlay--franchise { background: #120505 !important; }
.overlay--python    { background: #080e16 !important; }
.overlay--supabase  { background: #0c1015 !important; }
.overlay--adhira    { background: #140808 !important; }

/* Watermark + logo layer — fixed behind scrollable content */
.overlay-brand-bg {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.overlay-brand-bg__logo {
  position: absolute;
  top: 20px;
  left: 32px;
  height: 40px;
  width: auto;
  object-fit: contain;
  filter: none;
  opacity: .85;
  z-index: 1;
}
.overlay-brand-bg__logo--svg {
  display: flex;
  align-items: center;
  height: auto;
}
.overlay-brand-bg__center-logo {
  width: clamp(240px, 48vw, 480px);
  max-height: 144px;
  object-fit: contain;
  opacity: 0.08;
  filter: none;
  z-index: 0;
}
.overlay-brand-bg__center-logo--svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(300px, 60vw, 600px);
  max-height: none;
  opacity: 1;
}
.overlay-brand-bg__brand-text {
  position: absolute;
  top: 22px;
  left: 32px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .9;
  z-index: 1;
  font-family: 'Inter', sans-serif;
}
.overlay-brand-bg__watermark {
  font-size: clamp(100px, 20vw, 260px);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.04);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  user-select: none;
  font-family: 'Inter', sans-serif;
  line-height: 1;
}
/* EBG watermark is more visible (user requested 50% opacity) */
.overlay--ebg .overlay-brand-bg__watermark {
  color: rgba(255, 255, 255, 0.5);
}

/* ── SwapNow LIGHT overlay — white bg, black heading, ash grey text ── */
.overlay--swapnow .overlay__back { color: #888 !important; }
.overlay--swapnow .overlay__back:hover { color: #01BF62 !important; }
.overlay--swapnow .overlay__num { color: #01BF62 !important; }
.overlay--swapnow .overlay__title { color: #000000 !important; }
.overlay--swapnow .overlay__sub { color: #6b6b76 !important; }
.overlay--swapnow .pcard__date {
  background: #f3f3f5 !important;
  border-color: #e0e0e4 !important;
  color: #5a5a66 !important;
}
.overlay--swapnow .badge--completed { background: #dcfce7 !important; color: #166534 !important; }
.overlay--swapnow .badge--in-progress { background: #fef3c7 !important; color: #92400e !important; }
.overlay--swapnow .badge--paused { background: #fef3c7 !important; color: #92400e !important; }
.overlay--swapnow .osec__title {
  color: #888892 !important;
  border-bottom-color: #e8e8ec !important;
}
.overlay--swapnow .osec__content { color: #000000 !important; }
.overlay--swapnow .tech-tag {
  background: #f3f3f5 !important;
  border-color: #e0e0e4 !important;
  color: #5a5a66 !important;
}
.overlay--swapnow .link-btn {
  background: #f3f3f5 !important;
  border-color: #e0e0e4 !important;
  color: #5a5a66 !important;
}
.overlay--swapnow .link-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 2px 8px rgba(0,0,0,.08) !important; border-color: #01BF62 !important; color: #01BF62 !important; }

.overlay--swapnow .link-btn--live svg { fill: #2563eb !important; }
.overlay--swapnow .link-btn--live { color: #000000 !important; }
.overlay--swapnow .compl__bar { background: #f0f0f3 !important; }
.overlay--swapnow .compl__pct { color: #888892 !important; }
.overlay--swapnow .field__empty {
  color: #aaaaB4 !important;
  border-color: #e8e8ec !important;
  background: #fafafa !important;
}
.overlay--swapnow .missing {
  background: #fafafa !important;
  border-color: #e8e8ec !important;
}
.overlay--swapnow .missing__title { color: #888892 !important; }
.overlay--swapnow img[loading="lazy"] {
  border-color: #e0e0e4 !important;
}
.overlay--swapnow .pcard__brand-logo-capsule {
  background: #f3f3f5 !important;
  border-color: #e0e0e4 !important;
  color: #5a5a66 !important;
}
.overlay--swapnow .pcard__brand-logo-capsule:hover {
  border-color: #01BF62 !important;
  color: #01BF62 !important;
}
.overlay--swapnow .overlay-brand-bg__center-logo {
  opacity: 0.09;
  transition: opacity 0.3s ease;
}

/* ── Shared dark-mode content overrides for ALL branded overlays ── */
[class*="overlay--"] .overlay__back { color: #888; }
[class*="overlay--"] .overlay__back:hover { color: var(--overlay-accent, #3b5cff); }
[class*="overlay--"] .overlay__num { color: var(--overlay-accent, #3b5cff); }
[class*="overlay--"] .overlay__title { color: #f0f0f6; }
[class*="overlay--"] .overlay__sub { color: #9fa3b8; }
[class*="overlay--"] .pcard__date {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #9fa3b8;
}
[class*="overlay--"] .badge--completed { background: #14532d30; color: #4ade80; }
[class*="overlay--"] .badge--in-progress { background: #78350f30; color: #fbbf24; }
[class*="overlay--"] .osec__title {
  color: #6b6e88;
  border-bottom-color: rgba(255,255,255,.08);
}
[class*="overlay--"] .osec__content { color: #c8cad4; }
[class*="overlay--"] .tech-tag {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  color: #9fa3b8;
}
[class*="overlay--"] .link-btn {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: #c8cad4;
}
[class*="overlay--"] .link-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.5); }
[class*="overlay--"] .compl__bar { background: rgba(255,255,255,.08); }
[class*="overlay--"] .compl__pct { color: #6b6e88; }
[class*="overlay--"] .field__empty {
  color: #6b6e88;
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
[class*="overlay--"] .missing {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
}
[class*="overlay--"] .missing__title { color: #6b6e88; }

/* Flow diagram dark overrides inside branded overlays */
[class*="overlay--"] .flow-node {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
[class*="overlay--"] .flow-node:hover {
  border-color: var(--overlay-accent, #3b5cff);
  background: rgba(255,255,255,.07);
}
[class*="overlay--"] .flow-node::before { background: rgba(255,255,255,.06); }
[class*="overlay--"] .flow-node:hover::before { background: var(--overlay-accent, #3b5cff); }
[class*="overlay--"] .flow-node__title { color: #f0f0f6; }
[class*="overlay--"] .flow-node__sub { color: #6b6e88; }
[class*="overlay--"] .flow-arrow { color: var(--overlay-accent, #3b5cff); }

/* Assets inside branded overlays */
[class*="overlay--"] .asset-ph {
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  color: #6b6e88;
}
[class*="overlay--"] img[loading="lazy"] {
  border-color: rgba(255,255,255,.1) !important;
}
.overlay__back{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--text3);margin-bottom:28px;cursor:pointer;border:none;background:none;transition:color var(--t)}
.overlay__back:hover{color:var(--blue)}
.overlay__num{font-size:12px;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.overlay__title{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-bottom:6px}
.overlay__sub{font-size:16px;color:var(--text3);margin-bottom:18px}
.overlay__meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:36px}
.overlay__meta-left{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.overlay__meta-right{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.osec{margin-bottom:30px}
.osec__title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--text3);padding-bottom:8px;border-bottom:1px solid var(--border2);margin-bottom:10px}
.osec__content{font-size:15px;color:var(--text2);line-height:1.7}
.assets-grid{margin-top:8px}
.assets-col-wrap {
  display: flex;
  gap: 12px;
  width: 100%;
}
.assets-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
}
.assets-col img {
  width: 100%;
  border-radius: var(--r);
  border: 1px solid var(--border);
  display: block;
}
.asset-ph{aspect-ratio:16/10;border-radius:var(--r);border:2px dashed var(--border);background:var(--bg2);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:12px;font-weight:500;width:100%}

/* ── CONTROLS & FILTERS ── */
.controls-sec {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px 32px;
}
.controls-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 24px;
  box-shadow: var(--shadow);
}
.view-tabs {
  display: flex;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: 4px;
  align-self: center;
}
.tab-btn {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r);
  border: none;
  background: none;
  color: var(--text3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--t);
}
.tab-btn:hover {
  color: var(--text2);
}
.tab-btn.active {
  background: var(--card);
  color: var(--blue);
  box-shadow: var(--shadow);
}

.filters-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.filter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text3);
}
.search-wrapper {
  position: relative;
  width: 100%;
}
#search-input {
  width: 100%;
  padding: 11px 16px 11px 38px;
  font-size: 14px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  font-family: inherit;
  transition: all var(--t);
}
#search-input:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--card);
  box-shadow: 0 0 0 3px rgba(59, 92, 255, 0.12);
}
.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: .5;
}

.pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
  padding: 2px;
}
.pill-btn {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text2);
  cursor: pointer;
  transition: all var(--t);
}
.pill-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.pill-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #ffffff;
}

/* ── TIMELINE VIEW ── */
.timeline-sec {
  padding: 20px 0 60px;
  overflow: hidden;
}
.timeline-wrap {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 24px;
}
.timeline-wrap::before {
  content: '';
  position: absolute;
  left: 40px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--blue) 0%, var(--border) 100%);
  z-index: 1;
}
.timeline-group {
  margin-bottom: 48px;
}
.timeline-year-header {
  position: relative;
  left: 40px;
  transform: translateX(-50%);
  display: inline-block;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: var(--blue);
  padding: 4px 14px;
  border-radius: 100px;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(59, 92, 255, 0.4);
}
.timeline-item {
  position: relative;
  padding-left: 64px;
  margin-bottom: 32px;
}
.timeline-item:last-child {
  margin-bottom: 0;
}
.timeline-badge {
  position: absolute;
  left: 40px;
  top: 18px;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background: var(--card);
  border: 3px solid var(--blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--text);
  box-shadow: var(--shadow);
  z-index: 5;
  transition: transform var(--t);
}
.timeline-item:hover .timeline-badge {
  transform: translate(-50%, -50%) scale(1.15);
}
.timeline-content .pcard {
  opacity: 1 !important;
  transform: none !important;
  margin-bottom: 0;
}

/* ── BENTO GRID VIEW ── */
.bento-sec {
  padding: 20px 0 60px;
}
.bento-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap: 14px;
}
.bento-tile {
  position: relative;
  border-radius: var(--r2);
  background: var(--card);
  border: 1px solid var(--border);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.bento-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow2);
  border-color: var(--blue);
}
/* brand accent bar at top */
.bento-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tile-accent, var(--blue));
  border-radius: var(--r2) var(--r2) 0 0;
  opacity: .7;
  transition: opacity .2s;
}
.bento-tile:hover::before {
  opacity: 1;
}
/* subtle brand glow on hover */
.bento-tile::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(180deg, var(--tile-accent, var(--blue)) 0%, transparent 100%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  border-radius: var(--r2) var(--r2) 0 0;
}
.bento-tile:hover::after {
  opacity: .06;
}

/* tile sizes — large tiles span 2 cols or 2 rows */
.bento-tile--lg {
  grid-column: span 2;
  grid-row: span 2;
}
.bento-tile--wide {
  grid-column: span 2;
}
.bento-tile--tall {
  grid-row: span 2;
}

/* tile content */
.bento-tile__top {
  position: relative;
  z-index: 2;
}
.bento-tile__num {
  font-size: 10px;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.bento-tile__title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bento-tile--lg .bento-tile__title {
  font-size: 22px;
  -webkit-line-clamp: 3;
}
.bento-tile__sub {
  font-size: 12px;
  color: var(--text3);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bento-tile--lg .bento-tile__sub {
  -webkit-line-clamp: 3;
  font-size: 13px;
}

.bento-tile__bottom {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bento-tile__tech {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.bento-tile__tech-tag {
  padding: 2px 7px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 500;
  background: var(--bg2);
  border: 1px solid var(--border2);
  color: var(--text3);
}

.bento-tile__compl {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.bento-tile__compl .compl__bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--bg3);
  overflow: hidden;
  position: relative;
}
.bento-tile__compl .compl__fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}
.bento-tile__compl .compl__pct {
  font-size: 10px;
  font-weight: 600;
  color: var(--text3);
  white-space: nowrap;
}

.bento-tile__brand img {
  height: 16px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}

.bento-tile__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bento-tile__brand {
  font-size: 10px;
  font-weight: 600;
  color: var(--tile-accent, var(--text3));
  text-transform: uppercase;
  letter-spacing: .06em;
}

.bento-tile__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
}
.bento-tile__status--completed {
  background: #dcfce7;
  color: #15803d;
}
.bento-tile__status--in-progress {
  background: #fef3c7;
  color: #92400e;
}
.bento-tile__status--paused {
  background: #fef3c7;
  color: #92400e;
}
[data-theme="dark"] .bento-tile__status--completed {
  background: #14532d30;
  color: #4ade80;
}
[data-theme="dark"] .bento-tile__status--in-progress {
  background: #78350f30;
  color: #fbbf24;
}
[data-theme="dark"] .bento-tile__status--paused {
  background: #78350f30;
  color: #fbbf24;
}


/* empty state */
.bento-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text3);
  font-size: 14px;
}

/* ── FOOTER ── */
.footer{padding:42px 24px;text-align:center;border-top:1px solid var(--border);font-size:12px;color:var(--text3)}
.footer a{color:var(--blue)}

/* ── RESPONSIVE ── */
@media(max-width:640px){
  .header{padding:12px 16px}
  .header__sep,.header__role{display:none}
  .pcard{padding:18px}
  .pcard__top{flex-direction:column;gap:8px;}
  .projects{padding:20px 16px 80px}
  .hero{padding:80px 16px 40px}
  .hero__h1{font-size:clamp(32px, 10vw, 40px);}
  .hero__h2{font-size:clamp(18px, 5vw, 24px);}
  .hero__socials{flex-wrap:wrap;}
  .overlay__title{font-size:32px;}
  .assets-col-wrap {
    flex-direction: column;
  }

  .timeline-wrap::before {
    left: 20px;
  }
  .timeline-year-header {
    left: 20px;
  }
  .timeline-item {
    padding-left: 36px;
  }
  .timeline-badge {
    left: 20px;
    width: 24px;
    height: 24px;
    border-width: 2px;
  }

  .bento-wrap {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .bento-tile--lg,
  .bento-tile--wide,
  .bento-tile--tall {
    grid-column: span 1;
    grid-row: span 1;
  }
}

@media(min-width:641px) and (max-width:900px) {
  .bento-wrap {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 170px;
  }
  .bento-tile--lg {
    grid-column: span 2;
    grid-row: span 2;
  }
  .bento-tile--tall {
    grid-row: span 2;
  }
}

/* Interactive High-Level Data Flow Diagram */
.flow-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 20px auto;
  width: 100%;
}
.flow-node {
  width: 100%;
  max-width: 480px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 18px;
  text-align: center;
  transition: all var(--t);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.flow-node:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 4px 12px rgba(59, 92, 255, 0.15);
  background: var(--card);
}
.flow-node::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--border2);
  transition: background var(--t);
}
.flow-node:hover::before {
  background: var(--blue);
}
.flow-node__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.flow-node__sub {
  font-size: 12px;
  color: var(--text3);
}
.flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  height: 20px;
  opacity: 0.8;
  animation: bounceDown 2s infinite;
}
.flow-arrow svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.brand-logo-svg {
  height: 12px;
  width: auto;
  fill: currentColor;
  vertical-align: middle;
  display: inline-block;
  transition: fill var(--t), color var(--t);
}
/* Adjust logo styling in filters and pills */
.pill-btn .brand-logo-svg {
  margin-top: -1px;
}
.pill-btn:hover .brand-logo-svg {
  color: var(--blue);
}
.pill-btn.active .brand-logo-svg {
  color: #ffffff;
}

/* EBG JPG Logo styling and blending */
.ebg-logo-img {
  height: 24px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
  transition: filter var(--t);
}
[data-theme="light"] .ebg-logo-img {
  filter: invert(1);
}
[data-theme="dark"] .ebg-logo-img {
  filter: none;
}

/* Adjust EBG logo size inside filter pills */
.pill-btn .ebg-logo-img {
  height: 18px;
}

/* EBG Brand logo inside details overlay (circle dark badge) */
.pcard__brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #111111;
  overflow: hidden;
  border: 1px solid var(--border);
  vertical-align: middle;
  padding: 3px;
  box-shadow: var(--shadow);
}
.pcard__brand-logo img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  filter: none !important;
}

/* EBG Brand logo inside details overlay (capsule/pill badge) */
.pcard__brand-logo-capsule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  color: var(--text2);
  vertical-align: middle;
  font-size: 12px;
  font-weight: 500;
  box-shadow: var(--shadow);
  transition: all var(--t);
}
.pcard__brand-logo-capsule a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}
.ebg-logo-img-capsule {
  height: 18px;
  width: auto;
  object-fit: contain;
  filter: none;
  display: inline-block;
}
[data-theme="light"] .ebg-logo-img-capsule {
  filter: invert(1);
}
[data-theme="dark"] .ebg-logo-img-capsule {
  filter: none;
}

/* Inside detail overlay, adjust style to match other pills */
[class*="overlay--"] .pcard__brand-logo-capsule {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #9fa3b8;
}
[class*="overlay--"] .pcard__brand-logo-capsule a {
  color: inherit;
}
[class*="overlay--"] .pcard__brand-logo-capsule:hover {
  border-color: var(--overlay-accent, #3b5cff);
  color: #ffffff;
}
[class*="overlay--"] .ebg-logo-img-capsule {
  filter: none !important;
}

/* ── SwapNow PNG logo in bento tiles & capsules ── */
.swapnow-logo-img {
  display: inline-block;
  vertical-align: middle;
  height: 18px;
  width: auto;
  object-fit: contain;
}
.swapnow-logo-img-capsule {
  height: 18px;
  width: auto;
  object-fit: contain;
  filter: none;
  display: inline-block;
}

.pcard__brand-logo-capsule--swapnow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pcard__brand-logo-capsule--swapnow a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}
.bento-tile__brand .swapnow-logo-img {
  height: 14px;
}

/* Dynamic Header background blending when any brand active */
body[class*="brand-"] .header {
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
}

/* Brand backgrounds and custom themes */
body.brand-ebg-active {
  --bg: #f5f5f5;
  --bg2: #ffffff;
  --card: #ffffff;
  --border: #e2e8f0;
}
[data-theme="dark"] body.brand-ebg-active {
  --bg: #0a0a0a;
  --bg2: #111111;
  --card: #141414;
  --border: #222222;
}

body.brand-swapnow-active {
  --bg: #f4f7f6;
  --bg2: #ffffff;
  --card: #ffffff;
  --border: #e0eae5;
  --text: #0d2b1d;
  --text2: #2d5543;
}
[data-theme="dark"] body.brand-swapnow-active {
  --bg: #0b1a13;
  --bg2: #12241b;
  --card: #152b20;
  --border: #1e3a2d;
  --text: #e0f2e9;
  --text2: #9ecdb5;
}

body.brand-carlton-active {
  --bg: #fafafa;
  --bg2: #ffffff;
  --card: #ffffff;
  --border: #e5e8eb;
  --text: #0a1b2e;
  --text2: #34485e;
}
[data-theme="dark"] body.brand-carlton-active {
  --bg: #0a121e;
  --bg2: #121c2b;
  --card: #162234;
  --border: #202e42;
  --text: #e1e9f0;
  --text2: #9eb2c5;
}

body.brand-ageon-active {
  --bg: #f0faf9;
  --bg2: #ffffff;
  --card: #ffffff;
  --border: #dbebe9;
  --text: #052624;
  --text2: #24524f;
}
[data-theme="dark"] body.brand-ageon-active {
  --bg: #091615;
  --bg2: #102220;
  --card: #142a28;
  --border: #1e3a37;
  --text: #e0f2f1;
  --text2: #9ec4c2;
}

body.brand-kabego-active {
  --bg: #f4f7fa;
  --bg2: #ffffff;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #081d38;
  --text2: #304868;
}
[data-theme="dark"] body.brand-kabego-active {
  --bg: #0a101f;
  --bg2: #12182c;
  --card: #161e34;
  --border: #202b42;
  --text: #e1e8f2;
  --text2: #9eb0cc;
}

body.brand-franchise-active {
  --bg: #fff5f5;
  --bg2: #ffffff;
  --card: #ffffff;
  --border: #f5e2e2;
  --text: #330808;
  --text2: #662424;
}
[data-theme="dark"] body.brand-franchise-active {
  --bg: #1a0a0a;
  --bg2: #241212;
  --card: #2a1616;
  --border: #3d2020;
  --text: #fbe6e6;
  --text2: #cc9e9e;
}

body.brand-python-active {
  --bg: #f5f8fa;
  --bg2: #ffffff;
  --card: #ffffff;
  --border: #e0e6eb;
  --text: #0e2030;
  --text2: #304b61;
}
[data-theme="dark"] body.brand-python-active {
  --bg: #0f1c24;
  --bg2: #172733;
  --card: #1c2e3c;
  --border: #2b3e4f;
  --text: #e2ecf2;
  --text2: #a2bccc;
}

body.brand-supabase-active {
  --bg: #f6f8fa;
  --bg2: #ffffff;
  --card: #ffffff;
  --border: #e1e4e8;
  --text: #24292e;
  --text2: #586069;
}
[data-theme="dark"] body.brand-supabase-active {
  --bg: #14171a;
  --bg2: #1e2227;
  --card: #24292e;
  --border: #3b424a;
  --text: #f6f8fa;
  --text2: #a1aab5;
}

body.brand-adhira-active {
  --bg: #fffbfb;
  --bg2: #ffffff;
  --card: #ffffff;
  --border: #f8e5e5;
  --text: #380d0d;
  --text2: #6b2d2d;
}
[data-theme="dark"] body.brand-adhira-active {
  --bg: #1d0f0f;
  --bg2: #271717;
  --card: #2e1d1d;
  --border: #3f2c2c;
  --text: #f8e8e8;
  --text2: #cca2a2;
}

body.brand-daewoo-active {
  --bg: #f4f9fc;
  --bg2: #ffffff;
  --card: #ffffff;
  --border: #8ed1fc;
  --text: #05223c;
  --text2: #204566;
}
[data-theme="dark"] body.brand-daewoo-active {
  --bg: #031627;
  --bg2: #082136;
  --card: #0b2842;
  --border: #0693e3;
  --text: #e2ecf2;
  --text2: #a2bccc;
}

/* ── Daewoo PNG logo in bento tiles & capsules ── */
.daewoo-logo-img {
  display: inline-block;
  vertical-align: middle;
  height: 18px;
  width: auto;
  object-fit: contain;
}
.daewoo-logo-img-capsule {
  height: 18px;
  width: auto;
  object-fit: contain;
  filter: none;
  display: inline-block;
}
.pcard__brand-logo-capsule--daewoo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pcard__brand-logo-capsule--daewoo a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}
.bento-tile__brand .daewoo-logo-img {
  height: 14px;
}
[data-theme="light"] .daewoo-logo-img {
  filter: invert(1);
}
[data-theme="light"] .daewoo-logo-img-capsule {
  filter: invert(1);
}

/* Daewoo Overlay Overrides */
.overlay--daewoo .pcard__brand-logo-capsule {
  background: transparent !important;
  border-color: #045cb4 !important;
  color: #045cb4 !important;
}
.overlay--daewoo .pcard__brand-logo-capsule a {
  color: #045cb4 !important;
}
.overlay--daewoo .daewoo-logo-img-capsule {
  filter: brightness(0) invert(0.24) sepia(0.91) saturate(22.06) hue-rotate(198deg) brightness(0.91) contrast(0.98) !important;
}
.overlay--daewoo .overlay-brand-bg__logo {
  filter: brightness(0) invert(0.24) sepia(0.91) saturate(22.06) hue-rotate(198deg) brightness(0.91) contrast(0.98) !important;
  opacity: 0.85 !important;
}
.overlay--daewoo .overlay__back {
  color: #888 !important;
}
.overlay--daewoo .overlay__back:hover {
  color: #045cb4 !important;
}
.overlay--daewoo .overlay__num {
  color: #045cb4 !important;
}
.overlay--daewoo .overlay__title {
  color: #000000 !important;
}
.overlay--daewoo .overlay__sub {
  color: #000000 !important;
}
.overlay--daewoo .osec__title {
  color: #888892 !important;
  border-bottom-color: #e8e8ec !important;
}
.overlay--daewoo .osec__content {
  color: #000000 !important;
}
.overlay--daewoo .tech-tag {
  background: #f3f3f5 !important;
  border-color: #e0e0e4 !important;
  color: #5a5a66 !important;
}
.overlay--daewoo .link-btn {
  background: #045cb4 !important;
  border-color: #045cb4 !important;
  color: #ffffff !important;
}
.overlay--daewoo .link-btn:hover {
  background: #0693e3 !important;
  border-color: #0693e3 !important;
  color: #ffffff !important;
}

.overlay--daewoo .link-btn--live svg {
  fill: currentColor !important;
}
.overlay--daewoo .compl__bar {
  background: rgba(4, 92, 180, 0.1) !important;
}
.overlay--daewoo .compl__pct {
  color: #888892 !important;
}
.overlay--daewoo .pcard__date {
  background: #f3f3f5 !important;
  border-color: #e0e0e4 !important;
  color: #5a5a66 !important;
}
.overlay--daewoo .badge--completed {
  background: #dcfce7 !important;
  color: #166534 !important;
}
.overlay--daewoo .badge--in-progress {
  background: #fef3c7 !important;
  color: #92400e !important;
}
.overlay--daewoo .badge--paused {
  background: #fef3c7 !important;
  color: #92400e !important;
}
.overlay--daewoo .overlay-brand-bg__watermark {
  color: rgba(4, 92, 180, 0.05) !important;
}
.overlay--daewoo .overlay-brand-bg__center-logo {
  filter: invert(1) !important;
  opacity: 0.08;
  transition: opacity 0.3s ease;
}
.overlay--daewoo img[loading="lazy"] {
  border-color: rgba(4, 92, 180, 0.15) !important;
}
.pill-btn .daewoo-logo-img {
  height: 18px;
}