/*
 * ═══════════════════════════════════════════════════════════════════════════════
 *  CSSADEWALE PORTFOLIO — GLOBAL STYLESHEET v3.0
 *  Author  : Adewale Samson Adeagbo
 *  Site    : cssadewale.pages.dev
 *  Updated : June 2026
 *
 *  TABLE OF CONTENTS
 *  ─────────────────
 *  01. CSS Custom Properties (Design Tokens)
 *  02. Reset & Base Styles
 *  03. Typography Scale
 *  04. Scrollbar & Selection
 *  05. Navigation (Desktop + Mobile)
 *  06. Page Hero (Inner Pages)
 *  07. Section Patterns & Labels
 *  08. Buttons
 *  09. Badges & Pills
 *  10. Cards (Generic)
 *  11. Skill / Tech Tags
 *  12. Stats Numbers
 *  13. Project Cards
 *  14. Tab System
 *  15. Filter Chip Bar
 *  16. Timeline
 *  17. Progress Bars
 *  18. Form Elements
 *  19. Animations & Keyframes
 *  20. Footer
 *  21. Print Styles
 *  22. Responsive Breakpoints
 * ═══════════════════════════════════════════════════════════════════════════════
 */

/* ════════════════════════════════════════════════════════════════
   01. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   - All colours, spacing, and font values live here.
   - Change a value here and it updates the entire site.
════════════════════════════════════════════════════════════════ */
:root {
  /* ── Background Layers ── */
  --bg:   #070b14;   /* Deepest background — page base          */
  --bg2:  #0c1220;   /* Slightly lighter — alternating sections  */
  --bg3:  #111827;   /* Used for input fields and stat boxes     */
  --bg4:  #1a2236;   /* Tags, hover states, subtle raised areas  */
  --card: #0f1724;   /* Card backgrounds                         */
  --card2:#141e2e;   /* Slightly lighter card (modals)           */

  /* ── Borders ── */
  --border:  #1e2d45;  /* Default border for cards and inputs    */
  --border2: #243352;  /* Hover/focus border, slightly brighter  */

  /* ── Primary Accent: Professional Gold/Amber ── */
  --gold:     #f5b342;  /* Main CTA colour, headings, accents     */
  --gold2:    #fcd27a;  /* Lighter shade for gradients            */
  --gold-glow:rgba(245,179,66,.13); /* Soft gold background       */

  /* ── Builder Identity Colours ── */
  --edtech:      #22c55e;            /* Green  — EdTech Builder    */
  --edtech-bg:   rgba(34,197,94,.08);
  --datatech:    #818cf8;            /* Indigo — DataTech Builder  */
  --datatech-bg: rgba(129,140,248,.08);
  --faith:       #38bdf8;            /* Sky   — FaithTech Builder  */
  --faith-bg:    rgba(56,189,248,.08);

  /* ── Text ── */
  --text:  #e8edf5;  /* Primary text — near-white                */
  --text2: #a8b4c8;  /* Secondary text — muted body copy         */
  --muted: #5a6a82;  /* Placeholder text, labels                 */

  /* ── Status Colours ── */
  --live: #22c55e;   /* Green — live / active indicators         */
  --soon: #f59e0b;   /* Amber — pending / coming soon            */
  --rose: #f43f5e;   /* Red   — error / alert                    */

  /* ── Spacing & Shape ── */
  --radius:    10px;  /* Small card corners                       */
  --radius-lg: 16px;  /* Standard card corners                    */
  --radius-xl: 24px;  /* Large card corners (hero card, modals)   */

  /* ── Typography ── */
  --ff:      'Segoe UI', system-ui, -apple-system, sans-serif;
  --ff-mono: 'Cascadia Code', 'Fira Code', 'Courier New', monospace;

  /* ── Shadows ── */
  --shadow:    0 4px 24px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.55);
  --shadow-gold: 0 4px 24px rgba(245,179,66,.18);

  /* ── Transitions ── */
  --tr: .22s ease;
}

/* ════════════════════════════════════════════════════════════════
   02. RESET & BASE STYLES
   - Normalize inconsistencies across browsers.
   - Set sensible defaults for all elements.
════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a   { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--ff); cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
input, select, textarea { font-family: var(--ff); }

/* ════════════════════════════════════════════════════════════════
   03. TYPOGRAPHY SCALE
════════════════════════════════════════════════════════════════ */
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 900; line-height: 1.12; }
h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.2; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 700; }
p  { line-height: 1.8; }

/* ════════════════════════════════════════════════════════════════
   04. SCROLLBAR & SELECTION
════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

::selection { background: var(--gold); color: var(--bg); }

/* ════════════════════════════════════════════════════════════════
   05. NAVIGATION
   - Fixed top bar, 64px tall.
   - Glass-morphism backdrop blur.
   - Mobile: links hidden, hamburger shows.
════════════════════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(7,11,20,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  height: 64px;
  display: flex; align-items: center;
  padding: 0 2rem;
}
.nav-inner {
  max-width: 1280px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
}

/* Logo */
.nav-logo {
  font-size: 1.05rem; font-weight: 800; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
}
.nav-logo span {
  -webkit-text-fill-color: var(--text2);
  font-weight: 400; font-size: .76rem; margin-left: .4rem;
}

/* Desktop Links */
.nav-links { display: flex; align-items: center; gap: .2rem; }
.nav-links a {
  font-size: .81rem; color: var(--text2); font-weight: 500;
  padding: .42rem .75rem; border-radius: 7px;
  transition: color var(--tr), background var(--tr);
}
.nav-links a:hover { color: var(--text); background: var(--bg4); }
.nav-links a.active { color: var(--gold); }

/* CTA button in nav */
.nav-cta {
  background: linear-gradient(135deg, var(--gold), #e8960a) !important;
  color: var(--bg) !important; font-weight: 700 !important;
  padding: .42rem 1.1rem !important; border-radius: 8px !important;
  margin-left: .5rem;
  transition: opacity var(--tr) !important;
}
.nav-cta:hover { opacity: .88 !important; background: var(--bg4) !important; }

/* Hamburger (mobile) */
.nav-burger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: .4rem; border-radius: 6px;
  transition: background var(--tr);
}
.nav-burger:hover { background: var(--bg4); }
.nav-burger span {
  width: 22px; height: 2px; background: var(--text2);
  border-radius: 2px; display: block;
  transition: transform .3s, opacity .3s;
}
/* Burger → X animation when open */
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav-mobile {
  display: none; position: fixed;
  top: 64px; left: 0; right: 0;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  padding: 1rem 1.5rem; z-index: 999;
  flex-direction: column; gap: .25rem;
  animation: slideDown .2s ease;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  font-size: .88rem; color: var(--text2); font-weight: 500;
  padding: .65rem 1rem; border-radius: 9px;
  transition: all var(--tr); display: block;
}
.nav-mobile a:hover, .nav-mobile a.active {
  color: var(--gold); background: var(--gold-glow);
}
@keyframes slideDown {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════
   06. PAGE HERO (INNER PAGES)
   - Used on About, Projects, Journey, CV pages.
   - Includes breadcrumb, section label, title, subtitle.
════════════════════════════════════════════════════════════════ */
.page-hero {
  padding: 120px 2rem 4rem;
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at 80% 50%,
    rgba(245,179,66,.05) 0%, transparent 70%);
}
.page-hero-inner { max-width: 1280px; margin: 0 auto; position: relative; }
.breadcrumb { font-size: .74rem; color: var(--muted); margin-bottom: 1rem; }
.breadcrumb a { color: var(--text2); transition: color var(--tr); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: var(--gold); }

/* ════════════════════════════════════════════════════════════════
   07. SECTION PATTERNS & LABELS
════════════════════════════════════════════════════════════════ */
section { padding: 5rem 2rem; }
.section-inner { max-width: 1280px; margin: 0 auto; }

/* Small uppercase label above headings */
.section-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .5rem;
  display: flex; align-items: center; gap: .5rem;
}
.section-label::before {
  content: ''; width: 24px; height: 2px;
  background: var(--gold); border-radius: 1px; flex-shrink: 0;
}

.section-title { font-weight: 800; margin-bottom: .9rem; }
.section-title em { font-style: normal; color: var(--gold); }
.section-sub { color: var(--text2); font-size: .94rem; max-width: 620px; line-height: 1.8; }

.divider { border: none; border-top: 1px solid var(--border); }

/* ════════════════════════════════════════════════════════════════
   08. BUTTONS
   - .btn is the base class.
   - Modifiers: btn-gold, btn-outline, btn-ghost, btn-sm,
     btn-edtech, btn-datatech, btn-faith
════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.5rem; border-radius: 9px;
  font-size: .88rem; font-weight: 700;
  transition: all var(--tr); font-family: var(--ff); border: none;
  cursor: pointer; white-space: nowrap;
}

/* Gold / Primary CTA */
.btn-gold {
  background: linear-gradient(135deg, var(--gold), #e8960a);
  color: var(--bg);
}
.btn-gold:hover {
  opacity: .9; transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(245,179,66,.3);
}

/* Outlined secondary */
.btn-outline {
  border: 1px solid var(--border2); color: var(--text2); background: transparent;
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-glow); }

/* Ghost / subtle */
.btn-ghost { color: var(--text2); background: var(--bg4); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--border2); }

/* Size modifier */
.btn-sm { padding: .4rem .95rem; font-size: .76rem; border-radius: 7px; }
.btn-xs { padding: .3rem .7rem;  font-size: .7rem;  border-radius: 6px; }

/* Identity-coloured */
.btn-edtech   { background: var(--edtech-bg);   color: var(--edtech);   border: 1px solid rgba(34,197,94,.25); }
.btn-edtech:hover   { border-color: var(--edtech);   box-shadow: 0 0 16px rgba(34,197,94,.15); }
.btn-datatech { background: var(--datatech-bg); color: var(--datatech); border: 1px solid rgba(129,140,248,.25); }
.btn-datatech:hover { border-color: var(--datatech); box-shadow: 0 0 16px rgba(129,140,248,.15); }
.btn-faith    { background: var(--faith-bg);    color: var(--faith);    border: 1px solid rgba(56,189,248,.25); }
.btn-faith:hover    { border-color: var(--faith);    box-shadow: 0 0 16px rgba(56,189,248,.15); }

/* ════════════════════════════════════════════════════════════════
   09. BADGES & PILLS
   - Small inline status indicators.
════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .63rem; font-weight: 700; padding: .2rem .65rem;
  border-radius: 50px; text-transform: uppercase; letter-spacing: .06em;
}
.badge-live     { background: rgba(34,197,94,.12);  color: var(--live);     border: 1px solid rgba(34,197,94,.3); }
.badge-soon     { background: rgba(245,158,11,.1);  color: var(--soon);     border: 1px solid rgba(245,158,11,.3); }
.badge-gold     { background: var(--gold-glow);      color: var(--gold);     border: 1px solid rgba(245,179,66,.3); }
.badge-edtech   { background: var(--edtech-bg);      color: var(--edtech);   border: 1px solid rgba(34,197,94,.3); }
.badge-datatech { background: var(--datatech-bg);    color: var(--datatech); border: 1px solid rgba(129,140,248,.3); }
.badge-faith    { background: var(--faith-bg);       color: var(--faith);    border: 1px solid rgba(56,189,248,.3); }

/* Pulsing live dot */
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: inline-block;
  animation: blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

/* Builder identity pills (larger than badges) */
.builder-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem 1.05rem; border-radius: 50px;
  font-size: .78rem; font-weight: 700; border: 1px solid;
}
.pill-edtech   { border-color: rgba(34,197,94,.35);   color: var(--edtech);   background: var(--edtech-bg); }
.pill-datatech { border-color: rgba(129,140,248,.35);  color: var(--datatech); background: var(--datatech-bg); }
.pill-faith    { border-color: rgba(56,189,248,.35);   color: var(--faith);    background: var(--faith-bg); }

/* ════════════════════════════════════════════════════════════════
   10. CARDS (GENERIC)
════════════════════════════════════════════════════════════════ */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border2); }

/* ════════════════════════════════════════════════════════════════
   11. SKILL / TECH TAGS
════════════════════════════════════════════════════════════════ */
.tag {
  display: inline-block; font-size: .7rem; font-weight: 500;
  background: var(--bg4); color: var(--text2);
  border: 1px solid var(--border); padding: .22rem .62rem;
  border-radius: 5px;
}
.tag-edtech   { background: var(--edtech-bg);   color: var(--edtech);   border-color: rgba(34,197,94,.22); }
.tag-datatech { background: var(--datatech-bg); color: var(--datatech); border-color: rgba(129,140,248,.22); }
.tag-faith    { background: var(--faith-bg);    color: var(--faith);    border-color: rgba(56,189,248,.22); }
.tag-gold     { background: var(--gold-glow);   color: var(--gold);     border-color: rgba(245,179,66,.22); }

/* ════════════════════════════════════════════════════════════════
   12. STATS NUMBERS
════════════════════════════════════════════════════════════════ */
.stat-num {
  font-size: 2.2rem; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-lbl { font-size: .72rem; color: var(--text2); margin-top: .3rem; line-height: 1.3; }

/* ════════════════════════════════════════════════════════════════
   13. PROJECT CARDS
════════════════════════════════════════════════════════════════ */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 1.4rem; }

.proj-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.6rem;
  display: flex; flex-direction: column;
  transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.proj-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border2); }

/* Special flagship card */
.proj-card.flagship {
  border-color: rgba(34,197,94,.3);
  background: linear-gradient(135deg, rgba(34,197,94,.04) 0%, var(--card) 60%);
}
.proj-card.flagship:hover {
  border-color: rgba(34,197,94,.55);
  box-shadow: 0 8px 32px rgba(34,197,94,.1);
}

.proj-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .9rem; }
.proj-cat-label { font-size: .64rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; text-align: right; }
.proj-name { font-size: 1rem; font-weight: 800; margin-bottom: .5rem; line-height: 1.35; }
.proj-desc { font-size: .83rem; color: var(--text2); flex: 1; margin-bottom: 1rem; line-height: 1.72; }
.proj-metrics { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.proj-metric {
  font-size: .67rem; background: var(--bg4); border: 1px solid var(--border);
  border-radius: 4px; padding: .18rem .52rem; color: var(--gold);
  font-weight: 700; font-family: var(--ff-mono);
}
.proj-stack { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.proj-links { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: auto; }
.proj-link {
  font-size: .75rem; color: var(--text2); font-weight: 600;
  padding: .32rem .82rem; border: 1px solid var(--border);
  border-radius: 6px; transition: all var(--tr);
  display: inline-flex; align-items: center; gap: .3rem;
}
.proj-link:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-glow); }
.proj-link.primary { background: var(--gold-glow); border-color: rgba(245,179,66,.38); color: var(--gold); }

/* Story rows used inside detailed project cards */
.proj-story { margin-bottom: .9rem; }
.story-row { display: flex; gap: .5rem; margin-bottom: .45rem; }
.story-lbl {
  font-size: .6rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; padding: .18rem .52rem; border-radius: 4px;
  white-space: nowrap; align-self: flex-start; margin-top: .12rem;
}
.sl-problem  { background: rgba(244,63,94,.1);   color: #f87171; }
.sl-solution { background: var(--datatech-bg);    color: var(--datatech); }
.sl-impact   { background: var(--edtech-bg);      color: var(--edtech); }
.sl-notable  { background: var(--gold-glow);       color: var(--gold); }
.story-text  { font-size: .8rem; color: var(--text2); line-height: 1.65; }

/* ════════════════════════════════════════════════════════════════
   14. TAB SYSTEM
════════════════════════════════════════════════════════════════ */
.tabs {
  display: flex; gap: .45rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0; margin-bottom: 2.5rem;
}
.tab-btn {
  font-size: .82rem; font-weight: 600; padding: .62rem 1.2rem;
  border: none; background: transparent; color: var(--text2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; transition: all var(--tr); font-family: var(--ff);
  border-radius: 6px 6px 0 0;
}
.tab-btn:hover { color: var(--text); background: var(--bg4); }
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); background: transparent; }
.tab-btn.tab-edtech.active   { color: var(--edtech);   border-bottom-color: var(--edtech); }
.tab-btn.tab-datatech.active { color: var(--datatech); border-bottom-color: var(--datatech); }
.tab-btn.tab-faith.active    { color: var(--faith);    border-bottom-color: var(--faith); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ════════════════════════════════════════════════════════════════
   15. FILTER CHIP BAR
════════════════════════════════════════════════════════════════ */
.filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.filter-chip {
  font-size: .73rem; font-weight: 600; padding: .34rem .9rem;
  border-radius: 50px; border: 1px solid var(--border);
  background: transparent; color: var(--text2); cursor: pointer;
  transition: all var(--tr); font-family: var(--ff);
}
.filter-chip:hover { border-color: var(--border2); color: var(--text); }
.filter-chip.active { background: var(--gold-glow); border-color: rgba(245,179,66,.42); color: var(--gold); }

/* ════════════════════════════════════════════════════════════════
   16. TIMELINE
════════════════════════════════════════════════════════════════ */
.tl-main { position: relative; padding-left: 2.5rem; }
.tl-main::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--border) 100%);
}
.tl-item { position: relative; margin-bottom: 2rem; }
.tl-dot {
  position: absolute; left: -2.9rem; top: .5rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--gold);
}
.tl-dot.g     { background: var(--edtech);   box-shadow: 0 0 0 2px var(--edtech); }
.tl-dot.b     { background: var(--faith);    box-shadow: 0 0 0 2px var(--faith); }
.tl-dot.p     { background: var(--datatech); box-shadow: 0 0 0 2px var(--datatech); }
.tl-dot.pulse { animation: dpulse 2s infinite; }
@keyframes dpulse {
  0%,100% { box-shadow: 0 0 0 2px var(--edtech); }
  50%     { box-shadow: 0 0 0 6px rgba(34,197,94,.15); }
}

/* Timeline cards */
.tl-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.6rem; transition: border-color var(--tr); }
.tl-card.active-c  { border-color: rgba(34,197,94,.38); background: linear-gradient(135deg, rgba(34,197,94,.04) 0%, var(--card) 60%); }
.tl-card.faith-c   { border-color: rgba(56,189,248,.28); }
.tl-card.identity-c{ border-color: rgba(245,179,66,.3);  background: linear-gradient(135deg, rgba(245,179,66,.04) 0%, var(--card) 60%); }
.tl-card:hover { border-color: rgba(245,179,66,.35); }
.tl-card.active-c:hover { border-color: rgba(34,197,94,.6); }

.era-label {
  font-size: .67rem; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: .12em;
  margin: 3rem 0 1.5rem; padding: .3rem 1rem;
  background: var(--gold-glow); border: 1px solid rgba(245,179,66,.22);
  border-radius: 50px; display: inline-block;
}
.era-label:first-child { margin-top: 0; }

/* ════════════════════════════════════════════════════════════════
   17. PROGRESS BARS
════════════════════════════════════════════════════════════════ */
.progress-bar { background: var(--bg4); border-radius: 50px; height: 7px; overflow: hidden; }
.progress-fill {
  height: 100%; border-radius: 50px;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  transition: width 1.2s ease;
}

/* ════════════════════════════════════════════════════════════════
   18. FORM ELEMENTS
════════════════════════════════════════════════════════════════ */
.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; font-size: .77rem; color: var(--text2); margin-bottom: .45rem; font-weight: 600; }

.form-input, .form-select, .form-textarea {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); border-radius: 9px; padding: .75rem 1rem;
  font-size: .88rem; font-family: var(--ff); outline: none;
  transition: border-color var(--tr), box-shadow var(--tr);
  -webkit-appearance: none; appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,179,66,.12);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--muted); }
.form-textarea { resize: vertical; min-height: 118px; }
.form-select option { background: var(--bg3); color: var(--text); }

.form-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--gold), #e8960a);
  color: var(--bg); border: none; border-radius: 9px; padding: .88rem;
  font-size: .9rem; font-weight: 800; cursor: pointer;
  transition: opacity var(--tr), transform var(--tr);
  font-family: var(--ff); letter-spacing: .02em;
}
.form-submit:hover { opacity: .9; transform: translateY(-1px); }
.form-submit:active { transform: translateY(0); }

/* ════════════════════════════════════════════════════════════════
   19. ANIMATIONS & KEYFRAMES
════════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideDown {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
/* Intersection observer animation classes */
.animate-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════════════════════════════════════
   20. FOOTER
════════════════════════════════════════════════════════════════ */
.footer {
  background: var(--bg2); border-top: 1px solid var(--border);
  padding: 3.5rem 2rem 2rem;
}
.footer-inner { max-width: 1280px; margin: 0 auto; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem; margin-bottom: 3rem;
}
.footer-brand-name {
  font-size: 1.15rem; font-weight: 800; margin-bottom: .4rem;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.footer-brand-sub { font-size: .78rem; color: var(--text2); line-height: 1.7; max-width: 280px; margin-bottom: 1.3rem; }
.footer-socials { display: flex; gap: .55rem; flex-wrap: wrap; }
.footer-social {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--bg4); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; color: var(--text2); transition: all var(--tr);
}
.footer-social:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-glow); }
.footer-col-title {
  font-size: .68rem; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem;
}
.footer-links-list { display: flex; flex-direction: column; gap: .5rem; }
.footer-links-list a { font-size: .82rem; color: var(--text2); transition: color var(--tr); }
.footer-links-list a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
}
.footer-bottom-text    { font-size: .73rem; color: var(--muted); }
.footer-bottom-tagline { font-size: .71rem; color: var(--muted); font-style: italic; }

/* ════════════════════════════════════════════════════════════════
   21. PRINT STYLES
   - Used when someone prints the CV page.
════════════════════════════════════════════════════════════════ */
@media print {
  .nav, .nav-mobile, .footer, .btn, .cv-switcher,
  .page-hero, .breadcrumb { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .cv-card { border: none !important; box-shadow: none !important; }
  .cv-panel { display: block !important; }
  a { color: #000 !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ════════════════════════════════════════════════════════════════
   22. RESPONSIVE BREAKPOINTS
════════════════════════════════════════════════════════════════ */
/* ── 1024px: Tablet landscape ── */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* ── 768px: Tablet portrait / large mobile ── */
@media (max-width: 768px) {
  .nav-links  { display: none; }
  .nav-burger { display: flex; }
  section { padding: 3.5rem 1.2rem; }
  .page-hero { padding: 100px 1.2rem 3rem; }
  .proj-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ── 480px: Small mobile ── */
@media (max-width: 480px) {
  .nav { padding: 0 1rem; }
  section { padding: 3rem 1rem; }
  .footer { padding: 2.5rem 1rem 1.5rem; }
}