/* ==========================================================================
BYTEBARD SHAD — style.css
css/style.css
==========================================================================
TABLE OF CONTENTS
--------------------------------------------------------------------------
1.  Design tokens (light + dark themes)
2.  Reset & base
3.  Shared section styles (reusable)
4.  Navbar
5.  Hero
6.  Showcase — featured work marquee
7.  Showcase modal
8.  Pricing
9.  Gallery (controls, cards, pagination)
10.  Skills
11.  Location
12.  Contact (form, submission state, status modal)
13.  FAQ
14.  Footer
15.  Image modal (gallery lightbox)
16.  Floating widgets (chat + scroll buttons)
17.  Currency selector
18.  Keyframes (all animations)
19.  Responsive breakpoints
19.1  Tablet  (max-width: 1024px)
19.2  Mobile  (max-width: 768px)
19.3  Small   (max-width: 480px)
19.4  Reduced motion
========================================================================== */

/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root {
  --bg: #ffffff;
  --bg-alt: #fafafa;
  --card-bg: #ffffff;
  --border: #e4e4e7;
  --border-subtle: rgba(0, 0, 0, 0.06);
  --accent: #18181b;
  --accent-fg: #ffffff;
  --accent-hover: #27272a;
  --primary: #09090b;
  --primary-fg: #ffffff;
  --primary-hover: #09090b;
  --primary-soft: rgba(15, 23, 41, 0.08);
  --text: #09090b;
  --text-dim: #71717a;
  --text-muted: #a1a1aa;
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
  --nav-bg: #ffffff;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bg: #09090b;
  --bg-alt: #0a0a0c;
  --card-bg: #18181b;
  --border: #27272a;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --accent: #fafafa;
  --accent-fg: #09090b;
  --accent-hover: #e4e4e7;
  --primary: #fafafa;
  --primary-fg: #ffffff;
  --primary-hover: #e4e4e7;
  --primary-soft: rgba(59, 130, 246, 0.12);
  --text: #fafafa;
  --text-dim: #a1a1aa;
  --text-muted: #71717a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --nav-bg: rgba(9, 9, 11, 0.8);
}

/* ==========================================================================
2. RESET & BASE
========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, 'Inter', 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

/* ==========================================================================
3. SHARED SECTION STYLES (reusable across all sections)
========================================================================== */
section { padding: 96px 24px; }
.section-container { max-width: 1280px; margin: 0 auto; }
.section-header { text-align: center; max-width: 640px; margin: 0 auto 56px; }

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
}

.section-header h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 12px;
}

.section-header p {
  color: var(--text-dim);
  font-size: 0.9375rem;
}

/* ==========================================================================
4. NAVBAR
========================================================================== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

.nav-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.nav-logo {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-logo .dot { color: var(--primary); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-dim);
  transition: color var(--transition);
}
.nav-links a:hover { color: var(--text); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-toggle {
  width: 36px; height: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  transition: all var(--transition);
}
.theme-toggle:hover { background: var(--bg-alt); }

.nav-cta {
  padding: 8px 16px;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--bg);
  font-size: 0.8125rem;
  font-weight: 500;
  border: none;
  transition: all var(--transition);
}
.nav-cta:hover { opacity: 0.9; }

.hamburger {
  display: none;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  align-items: center; justify-content: center;
}

/* ==========================================================================
   HERO SECTION — REDESIGNED (Bento Split-Card Layout)
   Replaces the original Section 5 (HERO) in style.css
   ========================================================================== */

/* --- Hero Scoped Tokens (Prevents bleeding into the rest of the site) --- */
.hero-wrap {
  --hero-bg: #f4f4f5;
  --hero-fade: #f4f4f5;
  --hero-border: #e4e4e7;
  --hero-card-solid: rgba(255,255,255,.90);
  --hero-card-border: rgba(17,17,17,.08);
  --hero-card-shadow: 0 24px 60px rgba(17,17,17,.10);
  --hero-text: #111114;
  --hero-muted: #55555e;
  --hero-accent: #dd7a26;
  --hero-badge-bg: #ffffff;
  --hero-badge-border: rgba(17,17,17,.08);
  --hero-btn-bg: #111114;
  --hero-btn-text: #ffffff;
  --hero-btn-shadow: 0 10px 24px rgba(17,17,17,.18);
  --hero-ghost-border: rgba(17,17,17,.16);
  --hero-ghost-hover: rgba(17,17,17,.34);
  --hero-exp-bg: #ffffff;
  --hero-exp-border: rgba(17,17,17,.07);
  --hero-exp-shadow: 0 14px 34px rgba(17,17,17,.14);
  --hero-code-color: #eaf6ff;
  --hero-code-glow: rgba(120,180,255,.75);
}

[data-theme="dark"] .hero-wrap {
  --hero-bg: #0a0a0c; 
  --hero-fade: #0a0a0c;
  --hero-border: #27231d;
  --hero-card-solid: rgba(21,17,13,.80);
  --hero-card-border: rgba(255,255,255,.09);
  --hero-card-shadow: 0 24px 70px rgba(0,0,0,.65), 0 0 90px rgba(245,154,60,.10);
  --hero-text: #f7f5f2;
  --hero-muted: #a9a29a;
  --hero-accent: #f59a3c;
  --hero-badge-bg: rgba(255,255,255,.06);
  --hero-badge-border: rgba(255,255,255,.10);
  --hero-btn-bg: #f5f4f1;
  --hero-btn-text: #141414;
  --hero-btn-shadow: 0 10px 30px rgba(0,0,0,.5);
  --hero-ghost-border: rgba(255,255,255,.18);
  --hero-ghost-hover: rgba(245,154,60,.65);
  --hero-exp-bg: rgba(20,16,12,.92);
  --hero-exp-border: rgba(245,154,60,.55);
  --hero-exp-shadow: 0 0 28px rgba(245,154,60,.30);
  --hero-code-color: #ffffff;
  --hero-code-glow: rgba(255,255,255,.65);
}

/* --- Transitions for Hero Elements --- */
.hero-wrap .hero, 
.hero-wrap .hero-card, 
.hero-wrap .badge, 
.hero-wrap .btn, 
.hero-wrap .exp-card, 
.hero-wrap .title, 
.hero-wrap .aka, 
.hero-wrap .desc,
.hero-wrap .exp-card strong, 
.hero-wrap .exp-card span, 
.hero-wrap .scroll-hint, 
.hero-wrap .scroll-hint .wheel {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* --- Hero Shell --- */
.hero-wrap {
  padding: 14px;
  max-width: 1560px;
  margin: 0 auto;
}

.hero-wrap .hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 46%) 1fr;
  /* min-height: clamp(560px, calc(100vh - 28px), 900px); */
  /* border: 1px solid var(--hero-border); */
  border-radius: 22px;
  overflow: hidden;
  background: var(--hero-bg);
}

/* --- Left: Content --- */
.hero-wrap .hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: clamp(28px, 4.5vw, 72px);
}

/* .hero-wrap .hero-card {
  width: 100%;
  max-width: 600px;
  border-radius: 22px;
  padding: clamp(26px, 3.2vw, 46px);
  background-color: var(--hero-card-solid);
  background-image: linear-gradient(150deg, rgba(255,255,255,.07), transparent 55%);
  border: 1px solid var(--hero-card-border);
  box-shadow: var(--hero-card-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hero-exp-border);
  box-shadow: var(--hero-exp-shadow);
} */

.hero-wrap .hero-card {
  width: 100%;
  max-width: 600px;
  border-radius: 22px;
  padding: clamp(26px, 3.2vw, 46px);

  /* Transparent border → the visible "border" is the border-box
     gradient layer below (this creates the multi-tone ring) */
  border: 1px solid transparent;

  /* ---------- LIGHT THEME : surface + ring ---------- */
  background:
    /* 1 · warm corner glow, top-left (like the sketch) */
    radial-gradient(120% 95% at 0% 0%, rgba(221,122,38,.14), transparent 55%) padding-box,
    /* 2 · creamy glass body */
    linear-gradient(160deg, rgba(255,255,255,.94), rgba(255,246,238,.88)) padding-box,
    /* 3 · GRADIENT BORDER RING : peach → soft grey → peach */
    linear-gradient(135deg,
      rgba(221,122,38,.55) 0%,
      rgba(221,122,38,.16) 30%,
      rgba(9,9,11,.10)     50%,
      rgba(221,122,38,.14) 74%,
      rgba(221,122,38,.50) 100%) border-box;

  box-shadow:
    0 24px 60px rgba(17,17,17,.10),
    0 0 44px -16px rgba(221,122,38,.30),
    inset 0 1px 0 rgba(255,255,255,.65);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ---------- DARK THEME : surface + ring ---------- */
[data-theme="dark"] .hero-wrap .hero-card {
  background:
    radial-gradient(120% 95% at 0% 0%, rgba(245,154,60,.16), transparent 55%) padding-box,
    linear-gradient(160deg, rgba(26,22,17,.86), rgba(13,11,9,.92)) padding-box,
    linear-gradient(135deg,
      rgba(245,154,60,.65) 0%,
      rgba(245,154,60,.22) 30%,
      rgba(255,255,255,.10) 50%,
      rgba(245,154,60,.18) 74%,
      rgba(245,154,60,.55) 100%) border-box;

  box-shadow:
    0 24px 70px rgba(0,0,0,.65),
    0 0 60px -18px rgba(245,154,60,.35),
    inset 0 1px 0 rgba(255,255,255,.07);
}


/* Scoped .badge and .dot to prevent breaking Gallery cards and Navbar logo */
.hero-wrap .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--hero-badge-bg);
  border: 1px solid var(--hero-badge-border);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--hero-text);
}

.hero-wrap .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  position: relative;
  flex: none;
}

.hero-wrap .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22c55e;
  animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}

.hero-wrap .title {
  margin: 22px 0 6px;
  font-size: clamp(2rem, 5.2vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.02;
  color: var(--hero-text);
}

.hero-wrap .aka {
  color: var(--hero-accent);
  font-weight: 700;
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  letter-spacing: .04em;
  margin-bottom: 18px;
}

.hero-wrap .desc {
  color: var(--hero-muted);
  line-height: 1.75;
  font-size: .98rem;
  max-width: 48ch;
  margin-bottom: 30px;
}

/* =========================================
   MOBILE & TABLET ADJUSTMENTS (Max 768px)
   ========================================= */
@media (max-width: 768px) {
  .hero-wrap .desc {
    font-size: 0.9rem;       /* Slightly smaller for mobile */
    line-height: 1.6;        /* Tighter line-height */
    margin-bottom: 24px;     /* Reduced bottom margin */
    max-width: 100%;         /* Allow text to use full screen width */
  }
}

/* =========================================
   SMALL MOBILE & 360px RESOLUTION (Max 480px)
   ========================================= */
@media (max-width: 480px) {
  .hero-wrap .desc {
    font-size: 0.85rem;      /* Compact font for 360px screens */
    line-height: 1.5;        /* Prevents text from taking up too much vertical space */
    margin-bottom: 16px;     /* Minimal spacing before the CTA buttons */
    max-width: 100%;
  }
}




.hero-wrap .cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Scoped Buttons to prevent overriding Gallery / Showcase buttons */
.hero-wrap .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: 10px;
  font-weight: 700;
  font-size: .92rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease, color .25s ease;
}

.hero-wrap .btn-primary {
  background: var(--hero-btn-bg);
  color: var(--hero-btn-text);
  box-shadow: var(--hero-btn-shadow);
}

.hero-wrap .btn-primary:hover {
  transform: translateY(-2px);
}

.hero-wrap .btn-primary .arrow {
  transition: transform .25s ease;
}

.hero-wrap .btn-primary:hover .arrow {
  transform: translateX(4px);
}

.hero-wrap .btn-ghost {
  border: 1px solid var(--hero-ghost-border);
  color: var(--hero-text);
  background: transparent;
}

.hero-wrap .btn-ghost:hover {
  border-color: var(--hero-ghost-hover);
}

.hero-wrap .btn:focus-visible {
  outline: 2px solid var(--hero-accent);
  outline-offset: 3px;
}

/* --- Right: Visual --- */
.hero-wrap .hero-visual {
  position: relative;
  z-index: 1;
  min-height: 480px;
}

.hero-wrap .hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  animation: heroFadeIn 1.2s ease both;
}

.hero-wrap .hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, var(--hero-fade) 0%, transparent 32%);
}

/* ==========================================================================
FLOATING </> — NEON-SIGN TREATMENT (matches the light/dark mockups)
Appended LAST so it safely overrides the previous .hero-wrap .code-float.
========================================================================== */
.hero-wrap .code-float {
  /* per-theme neon palette */
  --neon-core:  #eaf6ff;                          /* bright tube core (ice white) */
  --neon-mid:   rgba(125, 180, 255, .85);         /* ice-blue glow (light theme)  */
  --neon-halo:  rgba(120, 180, 255, .45);         /* soft outer halo              */
  --neon-ghost: rgba(120, 180, 255, .38);         /* offset echo stroke           */

  position: absolute;
  z-index: 2;
  top: 7%;
  left: 8%;
  font-size: clamp(1.9rem, 2.8vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
  color: var(--neon-core);
  /* tight layered glow = the "glass tube" itself */
  text-shadow:
    0 0 2px  var(--neon-core),
    0 0 8px  var(--neon-mid),
    0 0 18px var(--neon-mid);
  animation: code-float 6s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
  user-select: none;
}
[data-theme="dark"] .hero-wrap .code-float {
  --neon-core:  #ffffff;                          /* pure white tube (dark theme) */
  --neon-mid:   rgba(255, 255, 255, .80);
  --neon-halo:  rgba(255, 255, 255, .38);
  --neon-ghost: rgba(255, 255, 255, .30);
}

/* ghost echo — the bigger, offset "double stroke" visible in the mockups */
.hero-wrap .code-float::before {
  content: "</>";
  position: absolute;
  left: 0; top: 0;
  z-index: -1;
  transform: translate(.30em, .22em) scale(1.35) rotate(7deg);
  color: var(--neon-ghost);
  filter: blur(2.5px);
  opacity: .55;
  text-shadow: 0 0 22px var(--neon-halo);
}

/* breathing halo — soft outer bloom that slowly pulses */
.hero-wrap .code-float::after {
  content: "</>";
  position: absolute;
  left: 0; top: 0;
  z-index: -2;
  transform: scale(1.55);
  color: transparent;
  text-shadow: 0 0 34px var(--neon-halo), 0 0 70px var(--neon-halo);
  filter: blur(6px);
  animation: code-pulse 3.4s ease-in-out infinite;
}

/* float with a gentle neon-sign tilt (replaces the flat up/down floaty) */
@keyframes code-float {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50%      { transform: rotate(-4deg) translateY(-10px); }
}
@keyframes code-pulse {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wrap .code-float,
  .hero-wrap .code-float::after { animation: none; }
}

/* ==========================================================================
EXP CARD — gradient border + warm glass (same treatment as the hero-card)
Appended LAST so it wins over the previous .hero-wrap .exp-card rule.
========================================================================== */
.hero-wrap .exp-card {
  position: absolute;
  z-index: 4;
  right: clamp(18px, 3vw, 44px);
  bottom: clamp(103px, calc(4vw + 85px), 137px); /* keeps the raised position */

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 18px 30px;
  border-radius: 16px;
  text-align: center;

  /* Transparent border → the visible edge is the border-box gradient below */
  border: 1px solid transparent;

  /* LIGHT: cream glass + peach gradient ring */
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(221,122,38,.10), transparent 60%) padding-box,
    linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,246,238,.90)) padding-box,
    linear-gradient(135deg,
      rgba(221,122,38,.50) 0%,
      rgba(221,122,38,.15) 30%,
      rgba(9,9,11,.10)     50%,
      rgba(221,122,38,.14) 74%,
      rgba(221,122,38,.45) 100%) border-box;

  box-shadow:
    0 14px 34px rgba(17,17,17,.10),
    0 0 24px -10px rgba(221,122,38,.28),
    inset 0 1px 0 rgba(255,255,255,.60);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: box-shadow .35s ease, border-color .35s ease, background-color .35s ease;
}

/* DARK: smoky glass + amber gradient ring + glow */
[data-theme="dark"] .hero-wrap .exp-card {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(245,154,60,.14), transparent 60%) padding-box,
    linear-gradient(160deg, rgba(26,22,17,.88), rgba(13,11,9,.92)) padding-box,
    linear-gradient(135deg,
      rgba(245,154,60,.60) 0%,
      rgba(245,154,60,.20) 30%,
      rgba(255,255,255,.10) 50%,
      rgba(245,154,60,.18) 74%,
      rgba(245,154,60,.55) 100%) border-box;

  box-shadow:
    0 14px 40px rgba(0,0,0,.55),
    0 0 28px -6px rgba(245,154,60,.35),
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* Keep the mobile stacked/overlap behaviour exactly as before */
@media (max-width: 992px) {
  .hero-wrap .exp-card {
    position: relative;
    right: auto;
    bottom: auto;
    margin: -46px clamp(18px, 5vw, 48px) 30px auto;
    width: max-content;
  }
}
@media (max-width: 560px) {
  .hero-wrap .exp-card { margin-top: -40px; }
}


.hero-wrap .exp-card strong {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--hero-text);
}

.hero-wrap .exp-card span {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hero-muted);
}

/* --- Scroll Hint --- */
.hero-wrap .scroll-hint {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: 22px;
  height: 34px;
  border: 2px solid var(--hero-muted);
  border-radius: 999px;
  opacity: .7;
  bottom: clamp(103px, calc(4vw + 85px), 137px);

}

.hero-wrap .wheel {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 7px;
  background: var(--hero-muted);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: wheel 1.8s ease-in-out infinite;
}

/* --- Sparks (dark only) --- */
.hero-wrap .sparks i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--hero-accent);
  box-shadow: 0 0 10px var(--hero-accent);
  animation: twinkle 3.6s ease-in-out infinite;
}
.hero-wrap .sparks i:nth-child(2) { animation-delay: 1.1s; }
.hero-wrap .sparks i:nth-child(3) { animation-delay: .6s; }
.hero-wrap .sparks i:nth-child(4) { animation-delay: 1.8s; }
.hero-wrap .sparks i:nth-child(5) { animation-delay: 2.4s; }
.hero-wrap .sparks i:nth-child(6) { animation-delay: 3s; }

[data-theme="light"] .hero-wrap .sparks { display: none; }

/* --- Entrance Animations --- */
.hero-wrap .hero-card > * {
  opacity: 0;
  animation: rise .7s cubic-bezier(.22,.9,.3,1) forwards;
}
.hero-wrap .hero-card > *:nth-child(1) { animation-delay: .05s; }
.hero-wrap .hero-card > *:nth-child(2) { animation-delay: .15s; }
.hero-wrap .hero-card > *:nth-child(3) { animation-delay: .25s; }
.hero-wrap .hero-card > *:nth-child(4) { animation-delay: .35s; }
.hero-wrap .hero-card > *:nth-child(5) { animation-delay: .45s; }

/* --- Keyframes --- */
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes wheel { 0% { opacity: 1; transform: translate(-50%, 0); } 70% { opacity: 0; transform: translate(-50%, 10px); } 100% { opacity: 0; } }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.8); } 50% { opacity: .9; transform: scale(1.2); } }

/* --- Tablet & Mobile --- */
@media (max-width: 992px) {
  .hero-wrap .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-wrap .hero-visual { order: -1; min-height: 520px; }
  .hero-wrap .hero-visual::before { background: linear-gradient(180deg, transparent 55%, var(--hero-fade) 100%); }
  .hero-wrap .code-float { top: 22px; left: 22px; }
  .hero-wrap .hero-content { padding: 0 clamp(18px, 5vw, 48px) 34px; margin-top: -80px; }
  .hero-wrap .hero-card { max-width: 640px; margin: 0 auto; }
  .hero-wrap .scroll-hint { display: none; }
  .hero-wrap .exp-card {
    position: relative;
    right: auto;
    bottom: auto;
    margin: -46px clamp(18px, 5vw, 48px) 30px auto;
    width: max-content;
  }
}

@media (max-width: 560px) {
  .hero-wrap .hero-visual { min-height: 420px; }
  .hero-wrap .hero-content { margin-top: -125px; }
  /* .hero-wrap .title { font-size: clamp(2.2rem, 9vw, 3rem); } */
  .hero-wrap .cta-row { flex-direction: column; }
  .hero-wrap .btn { width: 100%; }
  .hero-wrap .exp-card { margin-top: -55px; }
}



/* ==========================================================================
6. SHOWCASE — FEATURED WORK MARQUEE
========================================================================== */
.showcase {
  padding: 96px 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.showcase-container {
  margin: 0 auto;
  padding: 0 24px;
}
.showcase .section-header { margin-bottom: 56px; }

.showcase-marquee {
  --showcase-gap: 24px;
  position: relative;
  display: flex;
  gap: var(--showcase-gap);
  overflow: hidden;
  margin: 0 -24px;
  padding: 0 24px;
}
.showcase-marquee::before,
.showcase-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12%;
  z-index: 2;
  pointer-events: none;
}
.showcase-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--bg) 0%, transparent 100%);
}
.showcase-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
}

.showcase-row {
  display: flex;
  gap: var(--showcase-gap);
  flex-shrink: 0;
  min-width: 100%;
  animation: showcase-scroll-left 110s linear infinite;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.showcase-marquee:hover .showcase-row { animation-play-state: paused; }

.showcase-card {
  flex-shrink: 0;
  width: 380px;
  height: 480px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card-bg);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s ease;
  display: flex;
  flex-direction: column;
}
.showcase-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.25);
  border-color: var(--text-muted);
}
.showcase-card:focus-within,
.showcase-card:focus {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.showcase-card__image {
  width: 100%;
  height: 400px;
  overflow: hidden;
  position: relative;
  background: var(--bg-alt);
}
.showcase-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.showcase-card:hover .showcase-card__image img { transform: scale(1.04); }

.showcase-card__content {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.showcase-card__category {
  font-size: 0.7875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  order: 2;
}
.showcase-card__title {
  letter-spacing: -0.01em;
  line-height: 1.3;
  order: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.showcase-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.showcase-card__badge {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-dim);
}

.showcase-cta {
  text-align: center;
  margin-top: 48px;
}
.showcase-cta .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: all var(--transition);
}
.showcase-cta .btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* ==========================================================================
7. SHOWCASE MODAL
========================================================================== */
.showcase-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 20px;
}
.showcase-modal.active { display: flex; }

.showcase-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: showcaseOverlayFade 0.3s ease;
}

.showcase-modal__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 90vh;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-lg) * 1.5);
  overflow: hidden;
  animation: showcaseModalPop 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
  display: flex;
  flex-direction: column;
}

.showcase-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  z-index: 10;
}
.showcase-modal__close:hover { background: rgba(0, 0, 0, 0.7); }

.showcase-modal__layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  overflow-y: auto;
}

.showcase-modal__gallery {
  position: relative;
  background: #000;
  display: flex;
  flex-direction: column;
}
.showcase-modal__main-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}
.showcase-modal__main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: showcaseImgFade 0.3s ease;
}

.showcase-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 5;
}
.showcase-modal__nav:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-50%) scale(1.1);
}
.showcase-modal__nav--prev { left: 16px; }
.showcase-modal__nav--next { right: 16px; }

.showcase-modal__thumbnails {
  display: flex;
  gap: 8px;
  padding: 16px;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.9);
}
.showcase-modal__thumb {
  flex-shrink: 0;
  width: 80px;
  height: 60px;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  opacity: 0.6;
}
.showcase-modal__thumb:hover { opacity: 1; }
.showcase-modal__thumb.is-active { border-color: #fff; opacity: 1; }
.showcase-modal__thumb img { width: 100%; height: 100%; object-fit: cover; }

.showcase-modal__details {
  padding: 40px 32px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.showcase-modal__header { display: flex; flex-direction: column; gap: 8px; }
.showcase-modal__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.showcase-modal__category {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.showcase-modal__description {
  font-size: 0.9375rem;
  color: var(--text-dim);
  line-height: 1.65;
}

.showcase-modal__section { display: flex; flex-direction: column; gap: 12px; }
.showcase-modal__section h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.showcase-modal__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.showcase-modal__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.showcase-modal__list li::before {
  content: '✓';
  color: #10b981;
  font-weight: 700;
  flex-shrink: 0;
}

.showcase-modal__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.showcase-modal__badge {
  padding: 6px 12px;
  border-radius: var(--radius);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text);
}

.showcase-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.showcase-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  transition: all var(--transition);
  cursor: pointer;
  border: none;
}
.showcase-modal__btn--primary { background: var(--text); color: var(--bg); }
.showcase-modal__btn--primary:hover { opacity: 0.9; transform: translateY(-1px); }
.showcase-modal__btn--secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.showcase-modal__btn--secondary:hover {
  background: var(--bg-alt);
  border-color: var(--text-muted);
}

/* ==========================================================================
8. PRICING
========================================================================== */
.pricing-section {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.pricing-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.pricing-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-dim);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  min-width: 160px;
}
.pricing-tab:hover {
  border-color: var(--text-muted);
  background: var(--bg-alt);
}
.pricing-tab.active {
  border-color: var(--text);
  background: var(--primary-soft);
  color: var(--text);
  box-shadow: var(--shadow);
}
.pricing-tab i {
  font-size: 1.25rem;
  margin-bottom: 4px;
  color: var(--text-muted);
}
.pricing-tab.active i {
  color: var(--text);
}
.pricing-tab-label {
  font-size: 0.9375rem;
  font-weight: 600;
}
.pricing-tab-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}

.pricing-card {
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card-bg);
  position: relative;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}
.pricing-card.featured {
  border-color: var(--text);
  box-shadow: var(--shadow);
}

.pricing-card.featured::before {
  content: 'Most Popular';
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
}

.pricing-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.pricing-price {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.pricing-price span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-dim);
}

.pricing-desc {
  color: var(--text-dim);
  font-size: 0.875rem;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.pricing-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 1px dashed var(--border);
  padding: 8px 12px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pricing-note i {
  color: var(--text-dim);
}

.pricing-features {
  list-style: none;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--text-dim);
}
.pricing-features li i { color: var(--text); font-size: 0.75rem; }

.pricing-feature-highlight {
  font-weight: 600;
  color: var(--text);
}

.pricing-btn {
  width: 100%;
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-weight: 500;
  font-size: 0.875rem;
  transition: all var(--transition);
}
.pricing-btn:hover { background: var(--bg-alt); }

.pricing-card.featured .pricing-btn {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.pricing-card.featured .pricing-btn:hover { opacity: 0.9; }

.pricing-btn[data-cta-action="enterprise"] {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.pricing-btn[data-cta-action="enterprise"]:hover { opacity: 0.9; }

.pricing-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.02em;
  z-index: 2;
}
.pricing-badge--blue { background: var(--text); color: var(--bg); }
.pricing-badge--gold {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
}
[data-theme="light"] .pricing-badge--gold {
  background: linear-gradient(135deg, #f59e0b, #b45309);
}
.pricing-badge--teal {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: #fff;
}
.pricing-badge--dark {
  background: #18181b;
  color: #fafafa;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-theme="light"] .pricing-badge--dark {
  background: #27272a;
  color: #fafafa;
}

.pricing-card.featured::before { display: none; }

.pricing-card--tier-secondary { animation: pricingCardFadeIn 0.4s ease both; }
.pricing-card--tier-secondary.is-hidden { display: none; }

.pricing-toggle-wrap {
  max-width: 1000px;
  margin: 36px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.pricing-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-weight: 500;
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}
.pricing-toggle-btn:hover {
  border-color: var(--text-muted);
  box-shadow: var(--shadow);
}
.pricing-toggle-btn i {
  font-size: 0.7rem;
  transition: transform var(--transition);
}
.pricing-toggle-btn i.is-rotated { transform: rotate(180deg); }

.pricing-disclaimers {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pricing-disclaimer {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}
.pricing-disclaimer i {
  font-size: 0.7rem;
  margin-right: 4px;
  color: var(--text-dim);
}
.pricing-disclaimer a {
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition);
}
.pricing-disclaimer a:hover { color: var(--text); }

.pricing-toggle-features {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  margin-top: 8px;
  border-radius: var(--radius);
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}
.pricing-toggle-features:hover {
  background: var(--bg-alt);
  color: var(--text);
  border-color: var(--text-muted);
}
.pricing-toggle-features i {
  font-size: 0.65rem;
  transition: transform var(--transition);
}
.pricing-toggle-features i.is-rotated { transform: rotate(180deg); }

/* ==========================================================================
9. GALLERY (controls, cards, pagination)
========================================================================== */
.gallery-controls {
  max-width: 1280px;
  margin: 0 auto 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.search-bar {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
}
.search-bar i { color: var(--text-dim); font-size: 0.875rem; }
.search-bar input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 0.875rem;
  font-family: inherit;
}
.search-bar input::placeholder { color: var(--text-muted); }

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.filter-btn {
  padding: 7px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  font-weight: 500;
}
.filter-btn:hover { background: var(--bg-alt); color: var(--text); }
.filter-btn.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
}

.no-results {
  display: none;
  text-align: center;
  color: var(--text-dim);
  padding: 60px 20px;
  grid-column: 1 / -1;
  font-size: 0.875rem;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
  display: flex;
  flex-direction: column;
}
.card:hover {
  border-color: var(--text-muted);
  box-shadow: var(--shadow-lg);
}

.card-thumb {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: var(--bg-alt);
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.card:hover .card-thumb img { transform: scale(1.04); }

.badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.card-body h3 { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.card-body p { color: var(--text-dim); font-size: 0.8125rem; flex: 1; }

.card-actions { display: flex; gap: 8px; margin-top: 12px; }

.btn {
  flex: 1;
  text-align: center;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: all var(--transition);
  text-decoration: none;
  color: var(--text);
  background: transparent;
  font-family: inherit;
}
.btn-photos:hover { background: var(--bg-alt); }
.btn-demo { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-demo:hover { opacity: 0.9; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
  padding: 0 20px;
}
.pagination button {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pagination button:hover:not(:disabled):not(.active) {
  background: var(--bg-alt);
  color: var(--text);
  border-color: var(--text-muted);
}
.pagination button.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination button.nav-btn { padding: 0 16px; gap: 6px; }
.pagination .ellipsis {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* ==========================================================================
10. SKILLS
========================================================================== */
.skills-section {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.skill-card {
  padding: 28px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card-bg);
  text-align: center;
  transition: all var(--transition);
}
.skill-card:hover { border-color: var(--text-muted); }

.skill-icon { font-size: 2.25rem; margin-bottom: 14px; }

.skill-card h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.skill-card p {
  color: var(--text-dim);
  font-size: 0.8125rem;
}

.skill-level {
  margin-top: 14px;
  height: 3px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.skill-level-fill {
  height: 100%;
  background: var(--text);
  border-radius: 999px;
  transition: width 1s ease;
}

/* ==========================================================================
11. LOCATION
========================================================================== */
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.location-info { display: flex; flex-direction: column; gap: 20px; }

.location-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  transition: all var(--transition);
}
.location-item:hover { border-color: var(--text-muted); }

.location-item-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.location-item h4 { font-size: 0.875rem; font-weight: 600; margin-bottom: 2px; }
.location-item p { color: var(--text-dim); font-size: 0.8125rem; }

.location-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4/3;
  background: var(--card-bg);
}
.location-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.3);
}
[data-theme="dark"] .location-map iframe {
  filter: grayscale(0.3) invert(0.92) hue-rotate(180deg);
}

/* ==========================================================================
12. CONTACT (form, submission state, status modal)
========================================================================== */
.contact-section {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: start;
}

.contact-info h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.contact-info > p {
  color: var(--text-dim);
  margin-bottom: 28px;
  font-size: 0.9375rem;
}

.contact-methods { display: flex; flex-direction: column; gap: 10px; }

.contact-method {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-bg);
  transition: all var(--transition);
  font-size: 0.875rem;
}
.contact-method:hover { border-color: var(--text-muted); }
.contact-method i { color: var(--text); font-size: 0.9rem; width: 18px; }
.contact-method span { color: var(--text-dim); }

.contact-form {
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card-bg);
}

.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 6px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--border-subtle);
}
.form-group textarea { resize: vertical; min-height: 100px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.submit-btn {
  width: 100%;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--bg);
  border: none;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all var(--transition);
  font-family: inherit;
}
.submit-btn:hover { opacity: 0.9; }

.contact-form.is-submitting input,
.contact-form.is-submitting textarea,
.contact-form.is-submitting select {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  transition: opacity var(--transition);
}
.submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.submit-btn.is-loading { pointer-events: none; }

.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite;
  flex-shrink: 0;
}

.status-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 20px;
}
.status-modal.active { display: flex; }

.status-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: statusOverlayFade 0.25s ease;
}

.status-modal__content {
  position: relative;
  z-index: 1;
  max-width: 440px;
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-lg) * 1.5);
  padding: 40px 32px 32px;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  animation: statusModalPop 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.status-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  cursor: pointer;
}
.status-modal__close:hover {
  background: var(--bg-alt);
  color: var(--text);
  border-color: var(--text-muted);
}

.status-modal__icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  animation: statusIconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
.status-modal__icon-wrap svg { width: 34px; height: 34px; display: block; }

.status-icon--success {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #10b981;
}
[data-theme="light"] .status-icon--success {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.2);
  color: #059669;
}

.status-icon--error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444;
}
[data-theme="light"] .status-icon--error {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
  color: #dc2626;
}

.status-icon--success svg path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: drawStatusCheck 0.5s ease-out 0.35s forwards;
}

.status-icon--error svg path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: drawStatusX 0.35s ease-out 0.35s forwards;
}
.status-icon--error svg path:nth-child(2) { animation-delay: 0.5s; }

.status-modal__title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  color: var(--text);
}

.status-modal__message {
  color: var(--text-dim);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin-bottom: 26px;
}
.status-modal__message p { margin-bottom: 10px; }
.status-modal__message p:last-child { margin-bottom: 0; }
.status-modal__message strong { color: var(--text); font-weight: 600; }

.status-modal__note {
  margin-top: 14px !important;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem !important;
  color: var(--text-muted);
}

.status-modal__action {
  width: 100%;
  padding: 11px 20px;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--bg);
  border: none;
  font-weight: 500;
  font-size: 0.875rem;
  font-family: inherit;
  transition: all var(--transition);
  cursor: pointer;
}
.status-modal__action:hover { opacity: 0.9; transform: translateY(-1px); }
.status-modal__action:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* ==========================================================================
13. FAQ
========================================================================== */
.faq-section {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  overflow: hidden;
  transition: all var(--transition);
}
.faq-item:hover { border-color: var(--text-muted); }
.faq-item.active {
  border-color: var(--text);
  box-shadow: var(--shadow);
}

.faq-question {
  width: 100%;
  padding: 20px 24px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: all var(--transition);
  letter-spacing: -0.01em;
}
.faq-question:hover { background: var(--bg-alt); }

.faq-question-text { flex: 1; }

.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--text-dim);
  flex-shrink: 0;
  transition: all var(--transition);
}
.faq-item.active .faq-icon {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 24px;
}
.faq-item.active .faq-answer {
  max-height: 500px;
  padding: 0 24px 20px;
}

.faq-answer-content {
  color: var(--text-dim);
  font-size: 0.875rem;
  line-height: 1.7;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.faq-answer-content ul { list-style: none; margin: 10px 0; padding: 0; }
.faq-answer-content ul li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
}
.faq-answer-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text);
}
.faq-answer-content strong { color: var(--text); font-weight: 600; }
.faq-answer-content p { margin-bottom: 8px; }
.faq-answer-content p:last-child { margin-bottom: 0; }

/* ==========================================================================
14. FOOTER
========================================================================== */
.footer {
  padding: 56px 24px 24px;
  border-top: 1px solid var(--border);
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand .nav-logo { margin-bottom: 12px; }
.footer-brand p {
  color: var(--text-dim);
  font-size: 0.875rem;
  max-width: 300px;
}

.footer-col h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col a {
  color: var(--text-dim);
  font-size: 0.8125rem;
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--text); }

.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom p { color: var(--text-dim); font-size: 0.8125rem; }
.footer-bottom p strong { color: var(--text); font-weight: 600; }

.footer-social { display: flex; gap: 8px; }
.footer-social a {
  width: 32px; height: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  transition: all var(--transition);
  font-size: 0.8125rem;
}
.footer-social a:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

/* ==========================================================================
FOOTER — HORIZONTAL COMPACT LAYOUT (fixes tall, half-empty tablet/mobile view)
Appended LAST so it safely overrides the 1-column rules above.
========================================================================== */

/* --- Tablet (≤1024px): brand on top, 3 link columns side by side --- */
@media (max-width: 1024px) {
  .footer { padding: 48px 24px 20px; }
  .footer-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 28px;
    margin-bottom: 32px;
  }
  .footer-brand { grid-column: 1 / -1; }   /* brand spans the full row */
  .footer-brand p { max-width: 560px; }
}

/* --- Mobile (≤768px): horizontal footer layout --- */
@media (max-width: 768px) {
  .footer { padding: 40px 20px 16px; }

  .footer-container {
    display: flex;          /* required — flex-direction only applies to flex containers */
    flex-direction: row;
    flex-wrap: wrap;        /* lets items wrap on narrow screens */
    gap: 28px 18px;
    margin-bottom: 28px;
  }

  .footer-brand { flex: 1 1 100%; }                  /* brand keeps its own full row */
  .footer-col   { flex: 1 1 30%; min-width: 150px; } /* the 3 columns sit side by side */

  .footer-col h4 { margin-bottom: 12px; }
  .footer-col ul { gap: 10px; }
  .footer-col a  { font-size: 0.8125rem; }
}
/* --- Small mobile (≤480px): 2 columns + "Connect" as a horizontal row --- */
@media (max-width: 480px) {
  .footer-container { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-brand,
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-col:last-child ul {          /* Facebook / GitHub / LinkedIn inline */
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 22px;
    
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 20px;
  }
}

/* ==========================================================================
FOOTER PATCH — vertical link lists on tablet & mobile
Appended LAST so it safely overrides the horizontal Connect row (≤480px).
Desktop (≥1025px) is untouched.
========================================================================== */
/* @media (max-width: 1024px) {
  .footer-col ul,
  .footer-col:last-child ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 8px;
  }
} */

/* ==========================================================================
15. IMAGE MODAL (gallery lightbox)
========================================================================== */
.modal {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal.active { display: flex; }

.modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  width: 100%;
  text-align: center;
  animation: modalFade 0.25s ease;
}

.modal-title {
  margin-bottom: 14px;
  font-size: 1.125rem;
  color: #fff;
  font-weight: 600;
}

.modal-close {
  position: absolute;
  top: -48px; right: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 36px; height: 36px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.2); }

.modal-image-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 300px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-image-wrap img,
.modal-image-wrap video {
  max-width: 100%;
  max-height: 70vh;
  border-radius: var(--radius-lg);
  animation: imgFade 0.25s ease;
}

.modal-nav {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 40px; height: 40px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  position: absolute;
  top: 50%; transform: translateY(-50%);
  transition: all 0.2s ease;
}
.modal-nav:hover { background: rgba(255, 255, 255, 0.2); }
.modal-nav.prev { left: 8px; }
.modal-nav.next { right: 8px; }

.modal-counter {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
}

/* ==========================================================================
16. FLOATING WIDGETS (chat + scroll buttons)
========================================================================== */
.chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 800;
}

.chat-toggle {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  border: 1px solid var(--border);
  font-size: 1.25rem;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.chat-toggle:hover { transform: scale(1.05); }
.chat-toggle.active { transform: rotate(45deg); }

.chat-options {
  position: absolute;
  bottom: 64px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: all 0.25s ease;
}
.chat-options.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.chat-option {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow);
  transition: all var(--transition);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.chat-option .tooltip {
  position: absolute;
  right: 54px;
  background: var(--text);
  color: var(--bg);
  padding: 5px 10px;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  border: 1px solid var(--border);
}
.chat-option:hover .tooltip { opacity: 1; }

.scroll-buttons {
  position: fixed;
  left: 16px;
  bottom: 24px;
  z-index: 700;
  display: none;
  flex-direction: column;
  gap: 8px;
}

.scroll-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius);
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  backdrop-filter: blur(10px);
  transition: all var(--transition);
  box-shadow: var(--shadow);
}
.scroll-btn:hover { background: var(--bg-alt); }

/* ==========================================================================
17. CURRENCY SELECTOR
========================================================================== */
.currency-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.currency-selector__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.currency-selector__btn:hover {
  background: var(--bg-alt);
  border-color: var(--text-muted);
}
.currency-selector__btn i.fa-chevron-down {
  font-size: 0.65rem;
  color: var(--text-dim);
  transition: transform var(--transition);
}
.currency-selector.is-open .currency-selector__btn i.fa-chevron-down {
  transform: rotate(180deg);
}

.currency-selector__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 230px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.2s ease;
  z-index: 100;
  max-height: 340px;
  overflow-y: auto;
}
.currency-selector.is-open .currency-selector__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.currency-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.8125rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
}
.currency-option:hover { background: var(--bg-alt); }
.currency-option.is-active { background: var(--bg-alt); font-weight: 600; }

.currency-option__flag { font-size: 1.1rem; line-height: 1; }

.currency-selector__current .fi,
.currency-option__flag.fi {
  display: inline-block;
  width: 1.25em;
  height: 0.9375em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 2px;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

.currency-option__code { font-weight: 600; min-width: 36px; }
.currency-option__name { color: var(--text-dim); flex: 1; }

.currency-selector--desktop { display: inline-flex; }
.currency-selector--mobile { display: none; }
.currency-selector--mobile .currency-selector__current,
.currency-selector--mobile .currency-selector__btn i.fa-chevron-down { display: none; }
.currency-selector--mobile .currency-selector__btn { padding: 7px 10px; }
.currency-selector--mobile .currency-selector__dropdown { right: 0; left: auto; }

/* ==========================================================================
18. KEYFRAMES (all animations, grouped)
========================================================================== */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes modalFade {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes imgFade { from { opacity: 0; } to { opacity: 1; } }

@keyframes btnSpin { to { transform: rotate(360deg); } }

@keyframes statusOverlayFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes statusModalPop {
  0% { opacity: 0; transform: scale(0.92) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes statusIconPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes drawStatusCheck { to { stroke-dashoffset: 0; } }
@keyframes drawStatusX { to { stroke-dashoffset: 0; } }

@keyframes pricingCardFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes showcase-scroll-left {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-100% - var(--showcase-gap)), 0, 0); }
}

@keyframes showcaseOverlayFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes showcaseModalPop {
  0% { opacity: 0; transform: scale(0.92) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes showcaseImgFade { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
19. RESPONSIVE BREAKPOINTS
========================================================================== */
@media (max-width: 1024px) {
  .hero { min-height: 550px; }
  .hero-stats { padding: 0.875rem 1.5rem; bottom: 2rem; }
  .stat-item { padding: 0.5rem 1.25rem; }
  .stat-num { font-size: 1.35rem; }

  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
  .location-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-container { grid-template-columns: 1fr 1fr; }

  .showcase-marquee { --showcase-gap: 20px; }
  .showcase-card { width: 340px; height: 440px; }
  .showcase-card__image { height: 360px; }

  .showcase-card { width: 300px; height: 400px; }
  .showcase-card__image { height: 200px; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .hamburger { display: flex; }

  .nav-links.mobile-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(12px);
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    gap: 14px;
  }

  .hero { min-height: 500px; }
  .hero-content { padding: 1.5rem; }
  .hero h1 { font-size: clamp(2rem, 8vw, 3rem); }
  .hero { font-size: clamp(0.95rem, 3vw, 1.2rem); }
  .subtitle { font-size: clamp(0.95rem, 3vw, 1.2rem); }
  .hero .hero-description { font-size: 0.9rem; margin-bottom: 24px; }
  
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary { width: 100%; max-width: 280px; justify-content: center; }

  .hero-stats {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    margin: 2rem auto 0;
    width: 90%;
    max-width: 400px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .stat-item { padding: 0.75rem 1rem; flex: 1; min-width: 100px; }
  .stat-item:not(:last-child) { border-right: none; }
  .stat-item:nth-child(1) { border-right: 1px solid rgba(255,255,255,0.12); }
  .stat-item:nth-child(2) { border-right: 1px solid rgba(255,255,255,0.12); }
  [data-theme="light"] .stat-item:nth-child(1) { border-right-color: rgba(0,0,0,0.1); }
  [data-theme="light"] .stat-item:nth-child(2) { border-right-color: rgba(0,0,0,0.1); }

  .features-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  /* .skills-grid { grid-template-columns: 1fr; } */
   .skills-grid {grid-template-columns: repeat(2, 1fr);} 

  .form-row { grid-template-columns: 1fr; }
  .footer-container { grid-template-columns: 1fr; }

  .scroll-buttons { display: flex; }
  section { padding: 64px 20px; }

  .faq-question { padding: 16px 18px; font-size: 0.875rem; }
  .faq-answer { padding: 0 18px; }
  .faq-item.active .faq-answer { padding: 0 18px 16px; }

  .currency-selector--desktop { display: none; }
  .currency-selector--mobile { display: inline-flex; }

  .pricing-toggle-features { display: inline-flex; }
  .pricing-features.is-collapsed li:nth-child(n+6) { display: none; }

  .showcase { padding: 64px 0; }
  .showcase-marquee { --showcase-gap: 16px; margin: 0 -16px; padding: 0 16px; }
  .showcase-marquee::before,
  .showcase-marquee::after { width: 8%; }
  
  .showcase-card { width: 300px; height: 400px; }
  .showcase-card__image { height: 330px; }
  .showcase-card__content { padding: 14px 16px; }
  .showcase-card__title { font-size: 0.9375rem; }

  .showcase-card { width: 280px; height: 380px; }
  .showcase-card__image { height: 450px; }
  .showcase-card__content { padding: 16px; }
  
  .showcase-modal__layout { grid-template-columns: 1fr; }
  .showcase-modal__gallery { max-height: 50vh; }
  .showcase-modal__details { padding: 24px 20px; }
  .showcase-modal__title { font-size: 1.5rem; }

  .showcase-modal__layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .showcase-modal__gallery { width: 100%; min-width: 0; }
  .showcase-modal__main-image { width: 100%; }
}

@media (max-width: 480px) {
  .hero { min-height: 480px; }
  .hero-content { padding: 1rem; }
  .hero h1 { font-size: clamp(1.75rem, 9vw, 2.5rem); }
  
  .hero-stats { width: 95%; padding: 0.75rem 1rem; }
  .stat-item { padding: 0.5rem 0.75rem; min-width: 80px; }
  .stat-num { font-size: 1.2rem; }
  .stat-label { font-size: 0.6rem; }

  .pagination { gap: 6px; margin-top: 32px; }
  .pagination button { min-width: 36px; height: 36px; font-size: 0.8125rem; }
  .pagination button.nav-btn { padding: 0 12px; }

  .status-modal__content { padding: 32px 20px 22px; }
  .status-modal__title { font-size: 1.2rem; }
  .status-modal__message { font-size: 0.875rem; }

  .showcase-card { width: 260px; height: 360px; }
  .showcase-card__image { height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-row { animation-duration: 180s; }
  .showcase-marquee:focus-within .showcase-row { animation-play-state: paused; }
}

/* ==========================================================================
   X. ABOUT SECTION
========================================================================== */
.about-section {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: center;
}

.about-media {
  position: relative;
}

.about-image-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  aspect-ratio: 4/5; /* Portrait orientation for profile/hero shot */
  background: var(--bg-alt);
}

.about-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.about-image-wrap:hover .about-img {
  transform: scale(1.02);
}

.about-experience-badge {
  position: absolute;
  bottom: 24px;
  right: -20px;
  background: var(--primary);
  color: var(--primary-fg);
  padding: 16px 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--border);
}

.badge-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.badge-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
  opacity: 0.8;
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.about-subtitle {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
  display: block;
}

.about-description {
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 32px;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.stat-block {
  display: flex;
  flex-direction: column;
}

.stat-val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.stat-lbl {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-image-wrap { max-width: 500px; margin: 0 auto; }
  .about-experience-badge { right: 20px; }
}

@media (max-width: 640px) {
  .about-stats { grid-template-columns: 1fr; gap: 16px; }
}


/* ==========================================================================
20. SHOWCASE REFINEMENT — premium marquee cards + modal polish
     (Appended LAST so it safely overrides earlier rules.
      Marquee mechanics, dimensions and breakpoints are untouched.)
========================================================================== */
/* --- Collapsed card: stronger title, refined metadata --- */
.showcase-card__content { gap: 6px; }
.showcase-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.showcase-card__category {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* --- Lucide ArrowUpRight interaction indicator --- */
.showcase-card__arrow {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow);
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.showcase-card__arrow svg {
  width: 15px; height: 15px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.showcase-card:hover .showcase-card__arrow { opacity: 1; transform: translateY(-2px); }
.showcase-card:hover .showcase-card__arrow svg { transform: translate(2px, -2px); }
/* --- Technology indicators: official colored logos on subtle chips --- */
.showcase-card__techs {
  order: 3;
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px;
}
.showcase-card__tech {
  width: 26px; height: 26px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.showcase-card__tech:hover { transform: translateY(-1px); border-color: var(--text-muted); }
.showcase-card__tech i { font-size: 15px; line-height: 1; }
.showcase-card__tech--text {
  width: auto; padding: 0 8px;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-dim);
}
/* --- Softer, more restrained hover lift --- */
.showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.28);
}
/* --- Modal: Lucide control sizing --- */
.showcase-modal__close svg { width: 16px; height: 16px; }
.showcase-modal__nav svg { width: 18px; height: 18px; }
.showcase-modal__category { display: inline-flex; align-items: center; gap: 7px; }
.showcase-modal__category svg { width: 14px; height: 14px; color: var(--text-muted); }
/* --- Modal lists: Lucide markers replace the old ✓ pseudo-element --- */
.showcase-modal__list li::before { content: none; }
.showcase-modal__list li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; }
#showcaseServices li svg { color: var(--text-faint); }
/* #showcaseFeatures li svg { color: #10b981; }
[data-theme="dark"] #showcaseFeatures li svg { color: #34d399; } */
/* --- Modal tech badges with brand glyphs --- */
.showcase-modal__badge { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; }
.showcase-modal__badge i { font-size: 14px; line-height: 1; }
/* --- Modal action buttons: icon alignment --- */
/* .showcase-modal__btn svg { width: 15px; height: 15px; } */

/* ==========================================================================
21. SHOWCASE PATCH v2 — modal split layout, list icons, marquee speed knob
     (Appended LAST so it safely overrides earlier rules.)
========================================================================== */
/* --- Marquee speed: ONE configurable knob -------------------------------
   Change --marquee-duration to retune scroll speed (lower = faster).
   From JS you can also do:
   document.querySelector('.showcase-marquee')
     .style.setProperty('--marquee-duration', '40s');                     */

     /* MARQUEE MOVEMENT */
.showcase-marquee { --marquee-duration: 85s; }
.showcase-row { animation-duration: var(--marquee-duration); }
@media (prefers-reduced-motion: reduce) {
  .showcase-row { animation-duration: calc(var(--marquee-duration) * 3); }
}

/* --- Modal: tighter vertical rhythm ------------------------------------ */
.showcase-modal__details { gap: 20px; }

/* --- Modal: Services + Features share one row on desktop (split3 look) -- */
@media (min-width: 1024px) {
  .showcase-modal__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 32px;
  }
  .showcase-modal__header,
  .showcase-modal__description,
  #showcaseTechSection,
  .showcase-modal__actions { grid-column: 1 / -1; }
  #showcaseServicesSection { grid-column: 1; grid-row: 3; }
  #showcaseFeaturesSection { grid-column: 2; grid-row: 3; }
  .showcase-modal__actions { flex-direction: row; }

}

    /* Action buttons sit side by side, like the reference */

  /* .showcase-modal__actions .showcase-modal__btn { flex: 1; } */
/* --- Section header icons (briefcase / star) ---------------------------- */
.showcase-modal__section h3 { display: flex; align-items: center; gap: 8px; }
.showcase-modal__section h3 svg { width: 14px; height: 14px; flex-shrink: 0; }
/* #showcaseServicesSection h3 svg { color: #d97706; }
#showcaseFeaturesSection h3 svg { color: #10b981; }
[data-theme="dark"] #showcaseServicesSection h3 svg { color: #fbbf24; }
[data-theme="dark"] #showcaseFeaturesSection h3 svg { color: #34d399; } */

/* --- List item icons: gold for Services, green for Features ------------- */
/* #showcaseServices li svg { color: #d97706; }
#showcaseFeatures li svg { color: #10b981; }
[data-theme="dark"] #showcaseServices li svg { color: #fbbf24; }
[data-theme="dark"] #showcaseFeatures li svg { color: #34d399; } */

/* ==========================================================================
22. SHOWCASE PATCH v3 — restore modal action buttons (stacked, compact icons)
     Appended LAST so it overrides the desktop row layout from Patch v2.
========================================================================== */
/* Back to the clean stacked, full-width buttons */
.showcase-modal__actions {
  flex-direction: column;
}
.showcase-modal__actions .showcase-modal__btn {
  flex: none;
  width: 100%;
}
/* Constrain the inline Lucide SVGs so they can never balloon again */
.showcase-modal__btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}


/* ==========================================================================
23. SHOWCASE PATCH v4 — Tech icon sizing, contrast & Bytebard CMS mark
========================================================================== */
/* --- Larger, more legible tech chips --- */
.showcase-card__tech {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s ease;
}

/* Subtle drop-shadow for all brand icons to ensure contrast in Light Mode */
.showcase-card__tech i,
.showcase-card__tech--custom svg {
  font-size: 18px; /* Larger Devicon render size */
  line-height: 1;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.15));
}

/* Specific fix for JavaScript: extra shadow to separate yellow from white bg */
.showcase-card__tech i.devicon-javascript-plain {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

/* Bytebard CMS custom icon: adapt stroke color for dark mode */
.showcase-card__tech--custom {
  color: #0f172a; /* Default dark slate for light mode */
}
[data-theme="dark"] .showcase-card__tech--custom {
  color: #f8fafc; /* Light slate for dark mode */
}
[data-theme="dark"] .showcase-card__tech--custom svg {
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.1));
}

/* Hover lift for tech chips */
.showcase-card__tech:hover {
  transform: translateY(-2px);
  border-color: var(--text-muted);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.1);
}


/* ==========================================================================
23. OFFICIAL INLINE SVG BRAND MARKS (Next.js / JSON / GitHub / Vercel / CMS)
========================================================================== */
.showcase-card__tech svg { width: 16px; height: 16px; display: block; }
.showcase-modal__badge svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Next.js official mark: keep the black disc defined on dark chips */
[data-theme="dark"] .showcase-card__tech .nx-logo,
[data-theme="dark"] .showcase-modal__badge .nx-logo {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.4));
}

/* ==========================================================================
24. JAVASCRIPT LOGO — theme-aware color
Light mode: monochrome (inherits the card's text color).
Dark mode: official brand yellow.
========================================================================== */
.showcase-card__tech i.devicon-javascript-plain,
.showcase-modal__badge i.devicon-javascript-plain {
  color: var(--text);
}

[data-theme="dark"] .showcase-card__tech i.devicon-javascript-plain,
[data-theme="dark"] .showcase-modal__badge i.devicon-javascript-plain {
  color: #F7DF1E;
}


/* ==========================================================================
   25. SHOWCASE PATCH v5 — overlap fix + single source of truth for sizing
   Card heights stay exactly as the original design. The IMAGE now flexes
   to fill the leftover space, so title/meta/tech chips can never be
   overlapped or clipped again, at any breakpoint.
   ========================================================================== */
/* Image = flexible element; content keeps its natural height */
.showcase-card__image { height: auto; flex: 1 1 auto; min-height: 0; }
.showcase-card__content { flex: 0 0 auto; }
.showcase-card__techs { margin-top: 4px; }

/* ONE clean size per breakpoint (appended last → wins over old duplicates) */
@media (max-width: 1024px) {
  .showcase-card { width: 300px; height: 400px; }
}
@media (max-width: 768px) {
  .showcase-card { width: 280px; height: 400px; }
  .showcase-card__content { padding: 14px 16px; }
  .showcase-card__title { font-size: 0.9375rem; }
}
@media (max-width: 480px) {
  .showcase-card { width: 260px; height: 400px; }
}


/* ==========================================================================
   26. NAV CTA — mobile menu item (desktop uses .nav-cta)
   ========================================================================== */
.nav-cta-item { display: none; }

@media (max-width: 768px) {
  .nav-cta-item { display: block; width: 100%; margin-top: 6px; }
  .nav-cta-item a {
    display: block;
    text-align: center;
    background: var(--text);
    color: var(--bg);
    padding: 11px 16px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.875rem;
    transition: opacity var(--transition);
  }
  .nav-cta-item a:hover { opacity: 0.9; color: var(--bg); }
}

/* ==========================================================================
   27. TOOLTIP — hover/focus hint for nav CTAs
   ========================================================================== */
/* ==========================================================================
   28. CUSTOM TOOLTIPS — theme-aware ink bubbles (Option 2)
   Usage:
     data-tooltip="Message"          → shows BELOW (default, header-safe)
     data-tooltip-side="top"         → shows ABOVE instead (mid-page elements)
     data-tooltip-align="right"      → right-aligns bubble (viewport-edge safe)
   Colors use var(--text)/var(--bg), so the bubble always inverts with the
   theme and can never blend into the page background.
   ========================================================================== */
[data-tooltip] { position: relative; }

[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1200;
  transition: opacity 0.18s ease, visibility 0.18s;
}

/* --- bubble (default: BELOW, centered) --- */
[data-tooltip]::after {
  content: attr(data-tooltip);
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(220px, 72vw);
  padding: 7px 11px;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--bg);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  white-space: normal;
  box-shadow: var(--shadow-lg);
}

/* --- caret (default: BELOW) --- */
[data-tooltip]::before {
  content: '';
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top: none;
  border-bottom-color: var(--text);
}

/* --- ABOVE variant (for mid-page elements like the pricing toggle) --- */
[data-tooltip-side="top"]::after {
  top: auto;
  bottom: calc(100% + 10px);
}
[data-tooltip-side="top"]::before {
  top: auto;
  bottom: calc(100% + 5px);
  border-top: 5px solid var(--text);
  border-bottom: none;
}

/* --- RIGHT-align variant (for buttons near the right viewport edge) --- */
[data-tooltip-align="right"]::after {
  left: auto;
  right: 0;
  transform: none;
}
[data-tooltip-align="right"]::before {
  left: auto;
  right: 12px;
  transform: none;
}

/* --- show on hover / keyboard focus --- */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* --- never stick on touch devices --- */
@media (hover: none) {
  [data-tooltip]::before,
  [data-tooltip]::after { display: none; }
}

/* ==========================================================================
   29. MOTION SYSTEM — scroll reveals + premium micro-interactions
   Transform/opacity only · reveals once · reduced-motion safe
   ========================================================================== */

/* --- Reveal system: neutralize legacy entrance animations once active --- */
.reveal-ready .card { opacity: 1; animation: none; }
.reveal-ready .pricing-card--tier-secondary { animation: none; }

/* Hidden state before entering the viewport */
.reveal-ready .reveal { opacity: 0; }

/* Entrance: gentle fade + rise + soft scale, staggered per group */
.reveal-ready .reveal.is-in {
  opacity: 1;
  animation: revealIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}
@keyframes revealIn {
  from { opacity: 0; transform: translateY(24px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* --- Nav links: underline glide (Linear/Vercel style) --- */
.nav-links a { position: relative; }
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -5px;
  height: 1.5px; border-radius: 1px;
  background: var(--text);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after { transform: scaleX(1); }

/* --- Gallery cards: lift + image zoom + badge inversion --- */
.card { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--text-muted); }
.card-thumb img { transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.card:hover .card-thumb img { transform: scale(1.05); }
.badge { transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.card:hover .badge { background: var(--text); color: var(--bg); border-color: var(--text); }

/* --- Skill cards: lift + icon float --- */
.skill-card { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; }
.skill-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--text-muted); }
.skill-icon { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.skill-card:hover .skill-icon { transform: translateY(-3px) scale(1.05); }

/* --- Pricing cards: consistent lift --- */
.pricing-card { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; }
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--text-muted); }
.pricing-card.featured:hover { border-color: var(--text); }

/* --- CTA buttons: icon nudge --- */
.btn-primary i { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.btn-primary:hover i { transform: translateX(3px); }

/* --- Reduced motion: everything visible, nothing animated --- */
@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal { opacity: 1 !important; animation: none !important; }
  .nav-links a::after { transition: none; }
  .card, .skill-card, .pricing-card { transition: none; }
}
/* ==========================================================================
   ABOUT SECTION — Bytebard monochrome theme + scroll reveal
   --about-accent defaults to the monochrome token system (matches the rest
   of the site). Prefer the Bytebard CMS bronze-gold? Swap the value below
   to: --about-accent: #b07d2e;
   ========================================================================== */
.about-section {
  --about-accent: var(--text);
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: center;
}

/* --- Scroll reveal engine (staggered via --about-delay) --- */
.about-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--about-delay, 0ms);
  will-change: opacity, transform;
}
.about-reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .about-reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Image column --- */
.about-media { position: relative; }

.about-image-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-lg);
}

.about-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-image-wrap:hover .about-img { transform: scale(1.04); }

/* Decorative: code icon (top-left) — monochrome on the photo */
.about-decor--code {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: rgba(9, 9, 11, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  z-index: 2;
}

/* Decorative: "CODE BUILD SOLVE" sign (top-right) — monochrome hierarchy */
.about-decor--sign {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(9, 9, 11, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}
.about-decor--sign span {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.3;
}
.about-decor--sign span:nth-child(2) { color: #ffffff; }
.about-decor--sign i {
  font-size: 0.85rem;
  color: #ffffff;
  margin-left: 2px;
}

/* Experience badge — theme-aware card, matches site tokens */
.about-experience-badge {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: 2;
  min-width: 80px;
}
.about-experience-badge .badge-value {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.about-experience-badge .badge-label {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-top: 2px;
}

/* --- Content column --- */
.about-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
.about-label::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #22c55e;
    animation: pulse 2s infinite;
}

/* .about-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
  margin: 0;
} */

.about-description {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-dim);
  margin: 0;
  max-width: 560px;
}

.about-divider {
  width: 100%;
  height: 1px;
  background: var(--border);
  border: none;
  margin: 4px 0;
}

/* Stats row */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.about-stat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card-bg);
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
.about-stat:hover {
  border-color: var(--text-muted);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.about-stat__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--about-accent);
  font-size: 1rem;
  flex-shrink: 0;
}

.about-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.about-stat__label {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1.3;
}

/* CTA link — monochrome dim → full on hover */
.about-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--transition), gap var(--transition);
  margin-top: 4px;
}
.about-cta:hover {
  color: var(--text);
  gap: 12px;
}
.about-cta i {
  font-size: 0.85rem;
  transition: transform var(--transition);
}
.about-cta:hover i { transform: translateX(3px); }

/* ==========================================================================
   ABOUT — RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-media { max-width: 560px; margin: 0 auto; width: 100%; }
  .about-content { text-align: center; align-items: center; }
  .about-description { max-width: 100%; }
  .about-stats { max-width: 480px; width: 100%; }
}

@media (max-width: 768px) {
  .about-stats { grid-template-columns: 1fr; max-width: 320px; }
  .about-stat { text-align: left; }
  .about-decor--sign { padding: 6px 10px; gap: 4px; }
  .about-decor--sign span { font-size: 0.55rem; }
  .about-decor--code { width: 38px; height: 38px; font-size: 0.95rem; }
}

@media (max-width: 480px) {
  .about-image-wrap { aspect-ratio: 1 / 1; }
  .about-experience-badge { padding: 8px 12px; min-width: 68px; }
  .about-experience-badge .badge-value { font-size: 1.15rem; }
}


/* ==========================================================================
   PRICING GRID — CENTERED ROWS (FLEX REPLACEMENT)
   CSS Grid cannot center an incomplete final row, so the grid is replaced
   with a centered flex-wrap layout. Full rows of 3 look exactly the same;
   a final row of 1 or 2 cards now centers automatically.
   ========================================================================== */
.pricing-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
}

.pricing-card {
  flex: 0 1 322px;   /* ≈3 cards per row inside the 1000px container */
  min-width: 280px;
}

/* Tablet / mobile: single centered column again */
@media (max-width: 1024px) {
  .pricing-card {
    flex: 1 1 100%;
    min-width: 0;
  }
}


/* ==========================================================================
21. SHOWCASE PATCH v2 — modal split layout, list icons, marquee speed knob
     (Appended LAST so it safely overrides earlier rules.)
========================================================================== */
/* --- Marquee speed: ONE configurable knob -------------------------------
   Change --marquee-duration to retune scroll speed (lower = faster).
   From JS you can also do:
   document.querySelector('.showcase-marquee')
     .style.setProperty('--marquee-duration', '40s');                     */


/* --- Modal: tighter vertical rhythm ------------------------------------ */
.showcase-modal__details { gap: 20px; }

/* --- Modal: Services + Features share one row on desktop (split3 look) -- */
@media (min-width: 1024px) {
  .showcase-modal__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 32px;
  }
  .showcase-modal__header,
  .showcase-modal__description,
  #showcaseTechSection,
  .showcase-modal__actions { grid-column: 1 / -1; }
  #showcaseServicesSection { grid-column: 1; grid-row: 3; }
  #showcaseFeaturesSection { grid-column: 2; grid-row: 3; }
  .showcase-modal__actions { flex-direction: row; }

}

    /* Action buttons sit side by side, like the reference */

  /* .showcase-modal__actions .showcase-modal__btn { flex: 1; } */
/* --- Section header icons (briefcase / star) ---------------------------- */
.showcase-modal__section h3 { display: flex; align-items: center; gap: 8px; }
.showcase-modal__section h3 svg { width: 14px; height: 14px; flex-shrink: 0; }
/* #showcaseServicesSection h3 svg { color: #d97706; }
#showcaseFeaturesSection h3 svg { color: #10b981; }
[data-theme="dark"] #showcaseServicesSection h3 svg { color: #fbbf24; }
[data-theme="dark"] #showcaseFeaturesSection h3 svg { color: #34d399; } */

/* --- List item icons: gold for Services, green for Features ------------- */
/* #showcaseServices li svg { color: #d97706; }
#showcaseFeatures li svg { color: #10b981; }
[data-theme="dark"] #showcaseServices li svg { color: #fbbf24; }
[data-theme="dark"] #showcaseFeatures li svg { color: #34d399; } */

/* ==========================================================================
22. SHOWCASE PATCH v3 — restore modal action buttons (stacked, compact icons)
     Appended LAST so it overrides the desktop row layout from Patch v2.
========================================================================== */
/* Back to the clean stacked, full-width buttons */
.showcase-modal__actions {
  flex-direction: column;
}
.showcase-modal__actions .showcase-modal__btn {
  flex: none;
  width: 100%;
}
/* Constrain the inline Lucide SVGs so they can never balloon again */
.showcase-modal__btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}


/* ==========================================================================
23. SHOWCASE PATCH v4 — Tech icon sizing, contrast & Bytebard CMS mark
========================================================================== */
/* --- Larger, more legible tech chips --- */
.showcase-card__tech {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s ease;
}

/* Subtle drop-shadow for all brand icons to ensure contrast in Light Mode */
.showcase-card__tech i,
.showcase-card__tech--custom svg {
  font-size: 18px; /* Larger Devicon render size */
  line-height: 1;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.15));
}

/* Specific fix for JavaScript: extra shadow to separate yellow from white bg */
.showcase-card__tech i.devicon-javascript-plain {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

/* Bytebard CMS custom icon: adapt stroke color for dark mode */
.showcase-card__tech--custom {
  color: #0f172a; /* Default dark slate for light mode */
}
[data-theme="dark"] .showcase-card__tech--custom {
  color: #f8fafc; /* Light slate for dark mode */
}
[data-theme="dark"] .showcase-card__tech--custom svg {
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.1));
}

/* Hover lift for tech chips */
.showcase-card__tech:hover {
  transform: translateY(-2px);
  border-color: var(--text-muted);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.1);
}


/* ==========================================================================
23. OFFICIAL INLINE SVG BRAND MARKS (Next.js / JSON / GitHub / Vercel / CMS)
========================================================================== */
.showcase-card__tech svg { width: 16px; height: 16px; display: block; }
.showcase-modal__badge svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Next.js official mark: keep the black disc defined on dark chips */
[data-theme="dark"] .showcase-card__tech .nx-logo,
[data-theme="dark"] .showcase-modal__badge .nx-logo {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.4));
}

/* ==========================================================================
24. JAVASCRIPT LOGO — theme-aware color
Light mode: monochrome (inherits the card's text color).
Dark mode: official brand yellow.
========================================================================== */
.showcase-card__tech i.devicon-javascript-plain,
.showcase-modal__badge i.devicon-javascript-plain {
  color: var(--text);
}

[data-theme="dark"] .showcase-card__tech i.devicon-javascript-plain,
[data-theme="dark"] .showcase-modal__badge i.devicon-javascript-plain {
  color: #F7DF1E;
}


/* ==========================================================================
   25. SHOWCASE PATCH v5 — overlap fix + single source of truth for sizing
   Card heights stay exactly as the original design. The IMAGE now flexes
   to fill the leftover space, so title/meta/tech chips can never be
   overlapped or clipped again, at any breakpoint.
   ========================================================================== */
/* Image = flexible element; content keeps its natural height */
.showcase-card__image { height: auto; flex: 1 1 auto; min-height: 0; }
.showcase-card__content { flex: 0 0 auto; }
.showcase-card__techs { margin-top: 4px; }

/* ONE clean size per breakpoint (appended last → wins over old duplicates) */
@media (max-width: 1024px) {
  .showcase-card { width: 300px; height: 400px; }
}
@media (max-width: 768px) {
  .showcase-card { width: 280px; height: 400px; }
  .showcase-card__content { padding: 14px 16px; }
  .showcase-card__title { font-size: 0.9375rem; }
}
@media (max-width: 480px) {
  .showcase-card { width: 260px; height: 400px; }
}


/* ==========================================================================
   26. NAV CTA — mobile menu item (desktop uses .nav-cta)
   ========================================================================== */
.nav-cta-item { display: none; }

@media (max-width: 768px) {
  .nav-cta-item { display: block; width: 100%; margin-top: 6px; }
  .nav-cta-item a {
    display: block;
    text-align: center;
    background: var(--text);
    color: var(--bg);
    padding: 11px 16px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.875rem;
    transition: opacity var(--transition);
  }
  .nav-cta-item a:hover { opacity: 0.9; color: var(--bg); }
}

/* ==========================================================================
   27. TOOLTIP — hover/focus hint for nav CTAs
   ========================================================================== */
/* ==========================================================================
   28. CUSTOM TOOLTIPS — theme-aware ink bubbles (Option 2)
   Usage:
     data-tooltip="Message"          → shows BELOW (default, header-safe)
     data-tooltip-side="top"         → shows ABOVE instead (mid-page elements)
     data-tooltip-align="right"      → right-aligns bubble (viewport-edge safe)
   Colors use var(--text)/var(--bg), so the bubble always inverts with the
   theme and can never blend into the page background.
   ========================================================================== */
[data-tooltip] { position: relative; }

[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1200;
  transition: opacity 0.18s ease, visibility 0.18s;
}

/* --- bubble (default: BELOW, centered) --- */
[data-tooltip]::after {
  content: attr(data-tooltip);
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(220px, 72vw);
  padding: 7px 11px;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--bg);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  white-space: normal;
  box-shadow: var(--shadow-lg);
}

/* --- caret (default: BELOW) --- */
[data-tooltip]::before {
  content: '';
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top: none;
  border-bottom-color: var(--text);
}

/* --- ABOVE variant (for mid-page elements like the pricing toggle) --- */
[data-tooltip-side="top"]::after {
  top: auto;
  bottom: calc(100% + 10px);
}
[data-tooltip-side="top"]::before {
  top: auto;
  bottom: calc(100% + 5px);
  border-top: 5px solid var(--text);
  border-bottom: none;
}

/* --- RIGHT-align variant (for buttons near the right viewport edge) --- */
[data-tooltip-align="right"]::after {
  left: auto;
  right: 0;
  transform: none;
}
[data-tooltip-align="right"]::before {
  left: auto;
  right: 12px;
  transform: none;
}

/* --- show on hover / keyboard focus --- */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* --- never stick on touch devices --- */
@media (hover: none) {
  [data-tooltip]::before,
  [data-tooltip]::after { display: none; }
}

/* ==========================================================================
   29. MOTION SYSTEM — scroll reveals + premium micro-interactions
   Transform/opacity only · reveals once · reduced-motion safe
   ========================================================================== */

/* --- Reveal system: neutralize legacy entrance animations once active --- */
.reveal-ready .card { opacity: 1; animation: none; }
.reveal-ready .pricing-card--tier-secondary { animation: none; }

/* Hidden state before entering the viewport */
.reveal-ready .reveal { opacity: 0; }

/* Entrance: gentle fade + rise + soft scale, staggered per group */
.reveal-ready .reveal.is-in {
  opacity: 1;
  animation: revealIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}
@keyframes revealIn {
  from { opacity: 0; transform: translateY(24px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* --- Nav links: underline glide (Linear/Vercel style) --- */
.nav-links a { position: relative; }
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -5px;
  height: 1.5px; border-radius: 1px;
  background: var(--text);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after { transform: scaleX(1); }

/* --- Gallery cards: lift + image zoom + badge inversion --- */
.card { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--text-muted); }
.card-thumb img { transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.card:hover .card-thumb img { transform: scale(1.05); }
.badge { transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.card:hover .badge { background: var(--text); color: var(--bg); border-color: var(--text); }

/* --- Skill cards: lift + icon float --- */
.skill-card { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; }
.skill-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--text-muted); }
.skill-icon { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.skill-card:hover .skill-icon { transform: translateY(-3px) scale(1.05); }

/* --- Pricing cards: consistent lift --- */
.pricing-card { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; }
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--text-muted); }
.pricing-card.featured:hover { border-color: var(--text); }

/* --- CTA buttons: icon nudge --- */
.btn-primary i { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.btn-primary:hover i { transform: translateX(3px); }

/* --- Reduced motion: everything visible, nothing animated --- */
@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal { opacity: 1 !important; animation: none !important; }
  .nav-links a::after { transition: none; }
  .card, .skill-card, .pricing-card { transition: none; }
}
/* ==========================================================================
   ABOUT SECTION — Bytebard monochrome theme + scroll reveal
   --about-accent defaults to the monochrome token system (matches the rest
   of the site). Prefer the Bytebard CMS bronze-gold? Swap the value below
   to: --about-accent: #b07d2e;
   ========================================================================== */
.about-section {
  --about-accent: var(--text);
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: center;
}

/* --- Scroll reveal engine (staggered via --about-delay) --- */
.about-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--about-delay, 0ms);
  will-change: opacity, transform;
}
.about-reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .about-reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Image column --- */
.about-media { position: relative; }

.about-image-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-lg);
}

.about-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-image-wrap:hover .about-img { transform: scale(1.04); }

/* Decorative: code icon (top-left) — monochrome on the photo */
.about-decor--code {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: rgba(9, 9, 11, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  z-index: 2;
}

/* Decorative: "CODE BUILD SOLVE" sign (top-right) — monochrome hierarchy */
.about-decor--sign {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(9, 9, 11, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}
.about-decor--sign span {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.3;
}
.about-decor--sign span:nth-child(2) { color: #ffffff; }
.about-decor--sign i {
  font-size: 0.85rem;
  color: #ffffff;
  margin-left: 2px;
}

/* Experience badge — theme-aware card, matches site tokens */
.about-experience-badge {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: 2;
  min-width: 80px;
}
.about-experience-badge .badge-value {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.about-experience-badge .badge-label {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-top: 2px;
}

/* --- Content column --- */
.about-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
.about-label::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #22c55e;
    animation: pulse 2s infinite;
}

/* .about-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
  margin: 0;
} */

.about-description {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-dim);
  margin: 0;
  max-width: 560px;
}

.about-divider {
  width: 100%;
  height: 1px;
  background: var(--border);
  border: none;
  margin: 4px 0;
}

/* Stats row */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.about-stat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card-bg);
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
.about-stat:hover {
  border-color: var(--text-muted);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.about-stat__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--about-accent);
  font-size: 1rem;
  flex-shrink: 0;
}

.about-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.about-stat__label {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1.3;
}

/* CTA link — monochrome dim → full on hover */
.about-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--transition), gap var(--transition);
  margin-top: 4px;
}
.about-cta:hover {
  color: var(--text);
  gap: 12px;
}
.about-cta i {
  font-size: 0.85rem;
  transition: transform var(--transition);
}
.about-cta:hover i { transform: translateX(3px); }

/* ==========================================================================
   ABOUT — RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-media { max-width: 560px; margin: 0 auto; width: 100%; }
  .about-content { text-align: center; align-items: center; }
  .about-description { max-width: 100%; }
  .about-stats { max-width: 480px; width: 100%; }
}

@media (max-width: 768px) {
  .about-stats { grid-template-columns: 1fr; max-width: 320px; }
  .about-stat { text-align: left; }
  .about-decor--sign { padding: 6px 10px; gap: 4px; }
  .about-decor--sign span { font-size: 0.55rem; }
  .about-decor--code { width: 38px; height: 38px; font-size: 0.95rem; }
}

@media (max-width: 480px) {
  .about-image-wrap { aspect-ratio: 1 / 1; }
  .about-experience-badge { padding: 8px 12px; min-width: 68px; }
  .about-experience-badge .badge-value { font-size: 1.15rem; }
}


/* ==========================================================================
   30. FAQ TABS (Mirrors Pricing Tabs design language)
========================================================================== */
.faq-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.faq-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-dim);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  min-width: 180px;
}

.faq-tab:hover {
  border-color: var(--text-muted);
  background: var(--bg-alt);
}

.faq-tab.active {
  border-color: var(--text);
  background: var(--primary-soft);
  color: var(--text);
  box-shadow: var(--shadow);
}

.faq-tab i {
  font-size: 1.25rem;
  color: var(--text-muted);
  transition: color var(--transition);
}

.faq-tab.active i {
  color: var(--text);
}

.faq-tab-label {
  font-size: 0.9375rem;
  font-weight: 600;
}

/* FAQ Tab Responsive */
@media (max-width: 768px) {
  .faq-tab {
    flex: 1 1 100%;
    min-width: 0;
    flex-direction: row;
    justify-content: center;
    padding: 14px 20px;
  }
}

/* ==========================================================================
31. CHECKOUT — one-page order flow (Phase 1)
Token-driven; both themes stay consistent. No framework classes.
========================================================================== */
.checkout-head { padding: 110px 24px 8px; }
.checkout-head__inner { max-width: 1280px; margin: 0 auto; }
.co-backlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8125rem; color: var(--text-dim); margin-bottom: 20px;
  transition: color var(--transition);
}
.co-backlink:hover { color: var(--text); }
.co-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.checkout-head h1 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; }
.checkout-head .co-sub { color: var(--text-dim); font-size: .9375rem; margin-top: 8px; }
.co-secure {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .75rem; font-weight: 600; color: var(--text-dim);
  border: 1px solid var(--border); background: var(--bg-alt);
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
.co-secure i { font-size: .7rem; }

/* --- step indicator --- */
.co-steps { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.co-step { display: flex; align-items: center; gap: 8px; }
.co-step__dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
  border: 1px solid var(--border); color: var(--text-muted); background: var(--card-bg);
  transition: all var(--transition);
}
.co-step__label { font-size: .8125rem; font-weight: 500; color: var(--text-muted); }
.co-step.is-active .co-step__dot { background: var(--text); color: var(--bg); border-color: var(--text); }
.co-step.is-active .co-step__label { color: var(--text); font-weight: 600; }
.co-step__line { flex: 1; height: 1px; background: var(--border); max-width: 72px; }

/* --- layout --- */
.checkout-main { max-width: 1280px; margin: 0 auto; padding: 32px 24px 96px; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.checkout-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* --- cards --- */
.co-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm);
}
.co-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.co-card__num {
  width: 24px; height: 24px; border-radius: 6px; flex: none;
  background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-dim);
  font-size: .6875rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.co-card__title { font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em; }
.co-card__hint { margin-left: auto; font-size: .75rem; color: var(--text-muted); text-align: right; }
.co-optional { color: var(--text-muted); font-weight: 400; font-size: .6875rem; }

/* --- shared radio dot --- */
.co-radio {
  width: 16px; height: 16px; border-radius: 50%; flex: none; position: relative;
  border: 1.5px solid var(--text-muted); transition: all var(--transition);
}
.co-opt.is-selected .co-radio, .co-pay.is-selected .co-radio { border-color: var(--text); background: var(--text); }
.co-opt.is-selected .co-radio::after, .co-pay.is-selected .co-radio::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 6px; height: 6px; border-radius: 50%; background: var(--bg);
}

/* --- package options --- */
.co-opt-list { display: flex; flex-direction: column; gap: 10px; }
.co-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); font-family: inherit; transition: all var(--transition);
}
.co-opt:hover { border-color: var(--text-muted); }
.co-opt.is-selected { border-color: var(--text); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--text); }
.co-opt__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-opt__name { font-size: .875rem; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.co-badge {
  padding: 2px 8px; border-radius: 999px; font-size: .625rem; font-weight: 700;
  background: var(--text); color: var(--bg); white-space: nowrap;
}
.co-opt__desc { font-size: .75rem; color: var(--text-dim); }
.co-opt__price { font-size: .9375rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }

/* --- theme thumbnails --- */
.co-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.co-theme {
  position: relative; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg); text-align: left; padding: 0;
  font-family: inherit; transition: all var(--transition);
}
.co-theme:hover { border-color: var(--text-muted); transform: translateY(-2px); box-shadow: var(--shadow); }
.co-theme.is-selected { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.co-theme__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--bg-alt); }
.co-theme__body { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.co-theme__name { font-size: .8125rem; font-weight: 600; }
.co-theme__meta { font-size: .6875rem; color: var(--text-muted); }
.co-theme__check {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--text); color: var(--bg); font-size: .6rem;
  display: none; align-items: center; justify-content: center; box-shadow: var(--shadow);
}
.co-theme.is-selected .co-theme__check { display: flex; }

/* --- payment methods --- */
.co-pay-list { display: flex; flex-direction: column; gap: 10px; }
.co-pay {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); font-family: inherit; transition: all var(--transition);
}
.co-pay:hover { border-color: var(--text-muted); }
.co-pay.is-selected { border-color: var(--text); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--text); }
.co-pay__icon {
  width: 36px; height: 36px; border-radius: var(--radius); flex: none;
  background: var(--bg-alt); border: 1px solid var(--border); color: var(--text);
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.co-pay__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-pay__name { font-size: .875rem; font-weight: 600; }
.co-pay__desc { font-size: .75rem; color: var(--text-dim); }

/* --- sticky summary --- */
.co-summary { position: sticky; top: 88px; }
.co-sum-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: .8125rem; color: var(--text-dim); padding: 8px 0;
}
.co-sum-row strong { color: var(--text); font-weight: 600; }
.co-sum-row .co-sum-val { font-weight: 600; color: var(--text); white-space: nowrap; }
.co-sum-total {
  border-top: 1px solid var(--border); margin-top: 8px; padding-top: 14px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.co-sum-total__label { font-size: .875rem; font-weight: 600; }
.co-sum-total__value { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.co-sum-note { font-size: .6875rem; color: var(--text-muted); margin-top: 4px; }
.co-place-btn {
  width: 100%; margin-top: 16px; padding: 12px; border: none; border-radius: var(--radius);
  background: #45a63e;
  /* background: var(--text);  */
  /* color: var(--bg);  */
  font-weight: 600; font-size: .875rem; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all var(--transition);
}
.co-place-btn:hover { opacity: .9; transform: translateY(-1px); }
.co-place-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.co-trust { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.co-trust span { display: flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--text-muted); }
.co-trust i { font-size: .7rem; width: 14px; text-align: center; }
.co-terms { margin-top: 12px; font-size: .6875rem; color: var(--text-muted); text-align: center; }
.co-terms a { text-decoration: underline; text-underline-offset: 2px; }

/* --- slim navbar variant for checkout --- */
.co-back-nav { font-size: .8125rem; font-weight: 500; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; transition: color var(--transition); }
.co-back-nav:hover { color: var(--text); }

/* --- responsive --- */
@media (max-width: 1024px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .co-summary { position: static; }
}
@media (max-width: 768px) {
  .checkout-head { padding-top: 92px; }
  .co-card { padding: 20px 16px; }
  .co-theme-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .checkout-main { padding-bottom: 64px; }
}
@media (max-width: 480px) {
  .co-step__label { display: none; }
  .co-step.is-active .co-step__label { display: inline; }
  .co-opt { flex-wrap: wrap; }
  .co-opt__price { width: 100%; padding-left: 28px; }
}

/* ==========================================================================
32. CHECKOUT — PAYMENT + CONFIRMATION STEPS (Phase 3)
========================================================================== */
.co-step.is-done .co-step__dot { background: var(--text); color: var(--bg); border-color: var(--text); }
.co-step.is-done .co-step__dot i { font-size: .6rem; }
.co-step.is-done .co-step__label { color: var(--text-dim); }

.co-panel {
  max-width: 720px; margin: 0 auto;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 24px; box-shadow: var(--shadow-sm);
}
.co-panel__head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.co-panel__title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.co-panel__sub { color: var(--text-dim); font-size: .875rem; margin-top: 4px; }
.co-panel__sub strong { color: var(--text); }

.co-ref-chip {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border: 1px dashed var(--border); border-radius: var(--radius);
  background: var(--bg-alt); font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .75rem; color: var(--text);
}
.co-copy-btn {
  padding: 3px 8px; border: 1px solid var(--border); border-radius: 4px;
  background: transparent; color: var(--text-dim);
  font-size: .6875rem; font-weight: 600; transition: all var(--transition);
}
.co-copy-btn:hover { background: var(--text); color: var(--bg); border-color: var(--text); }

.co-instr-qr { width: 180px; margin: 4px auto 12px; padding: 8px; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius); }
.co-instr-qr img { width: 100%; display: block; }
.co-instr-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.co-instr-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
}
.co-instr-row__k { font-size: .75rem; font-weight: 600; color: var(--text-dim); flex: none; }
.co-instr-row__v { flex: 1; font-size: .8125rem; font-weight: 600; color: var(--text); word-break: break-all; text-align: right; }
.co-instr-steps { margin: 0 0 16px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--text-dim); font-size: .875rem; }
.co-instr-note {
  display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px;
  border-radius: var(--radius); background: var(--primary-soft);
  color: var(--text); font-size: .8125rem; margin-bottom: 20px;
}
.co-instr-note i { margin-top: 2px; font-size: .75rem; flex: none; }

.co-sum-mini { border-top: 1px solid var(--border); padding-top: 12px; margin-bottom: 20px; }
.co-sum-mini .co-sum-row { padding: 4px 0; }

.co-confirm { text-align: center; }
.co-confirm .status-modal__icon-wrap { margin-bottom: 16px; }
.co-next-list { list-style: none; margin: 20px 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.co-next-list li {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); font-size: .875rem; color: var(--text-dim);
}
.co-next-list li strong { color: var(--text); }
.co-next-list li i { color: var(--text); margin-top: 2px; font-size: .8rem; flex: none; width: 16px; text-align: center; }
.co-confirm__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.co-confirm__actions .co-place-btn { width: auto; padding: 12px 24px; margin-top: 0; }
.co-btn-ghost {
  padding: 12px 24px; border-radius: var(--radius); border: 1px solid var(--border);
  background: transparent; color: var(--text); font-weight: 600; font-size: .875rem;
  display: inline-flex; align-items: center; gap: 8px; transition: all var(--transition);
}
.co-btn-ghost:hover { background: var(--bg-alt); }
@media (max-width: 640px) { .co-ref-chip { margin-left: 0; } }


/* ==========================================================================
31. CHECKOUT — Enhanced Premium Layout
========================================================================== */

.checkout-head { padding: 110px 24px 8px; }
.checkout-head__inner { max-width: 1280px; margin: 0 auto; }
.co-backlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8125rem; color: var(--text-dim); margin-bottom: 20px;
  transition: color var(--transition);
}
.co-backlink:hover { color: var(--text); }
.co-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.checkout-head h1 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; }
.checkout-head .co-sub { color: var(--text-dim); font-size: .9375rem; margin-top: 8px; }
.co-secure {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .75rem; font-weight: 600; color: var(--text-dim);
  border: 1px solid var(--border); background: var(--bg-alt);
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
.co-secure i { font-size: .7rem; }

/* --- step indicator --- */
.co-steps { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.co-step { display: flex; align-items: center; gap: 8px; }
.co-step__dot {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
  border: 1px solid var(--border); color: var(--text-muted); background: var(--card-bg);
  transition: all var(--transition);
}
.co-step__label { font-size: .8125rem; font-weight: 500; color: var(--text-muted); }
.co-step.is-active .co-step__dot { background: var(--text); color: var(--bg); border-color: var(--text); }
.co-step.is-active .co-step__label { color: var(--text); font-weight: 600; }
.co-step__line { flex: 1; height: 1px; background: var(--border); max-width: 72px; }

/* --- layout --- */
.checkout-main { max-width: 1280px; margin: 0 auto; padding: 32px 24px 96px; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.checkout-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* --- cards --- */
.co-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm);
}
.co-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.co-card__num {
  width: 24px; height: 24px; border-radius: 6px; flex: none;
  background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-dim);
  font-size: .6875rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.co-card__title { font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em; }
.co-card__hint { margin-left: auto; font-size: .75rem; color: var(--text-muted); text-align: right; }
.co-optional { color: var(--text-muted); font-weight: 400; font-size: .6875rem; }

/* --- shared radio dot --- */
.co-radio {
  width: 18px; height: 18px; border-radius: 50%; flex: none; position: relative;
  border: 2px solid var(--border); transition: all var(--transition);
  background: var(--bg);
}
.co-opt.is-selected .co-radio, .co-pay.is-selected .co-radio { 
  border-color: var(--text); 
  background: var(--text); 
}
.co-opt.is-selected .co-radio::after, .co-pay.is-selected .co-radio::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 8px; height: 8px; border-radius: 50%; background: var(--bg);
}

/* --- package options (enhanced list style) --- */
.co-opt-list { display: flex; flex-direction: column; gap: 10px; }
.co-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px 18px; border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--bg); font-family: inherit; transition: all var(--transition);
  position: relative;
}
.co-opt:hover { border-color: var(--text-muted); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.co-opt.is-selected { 
  border-color: var(--text); 
  background: var(--primary-soft); 
  box-shadow: 0 0 0 1px var(--text), var(--shadow); 
}
.co-opt__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.co-opt__name { 
  font-size: .9375rem; font-weight: 600; 
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; 
}
.co-badge {
  padding: 3px 10px; border-radius: 999px; font-size: .625rem; font-weight: 700;
  background: var(--text); color: var(--bg); white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.co-badge[data-accent="gold"] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.co-badge[data-accent="teal"] { background: #0d9488; }
.co-opt__desc { font-size: .8125rem; color: var(--text-dim); line-height: 1.5; }
.co-opt__price { 
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; 
  white-space: nowrap; color: var(--text);
}

/* --- theme thumbnails (enhanced grid) --- */
.co-theme-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); 
  gap: 14px; 
}
.co-theme {
  position: relative; border: 1.5px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg); text-align: left; padding: 0;
  font-family: inherit; transition: all var(--transition);
}
.co-theme:hover { 
  border-color: var(--text-muted); 
  transform: translateY(-3px); 
  box-shadow: var(--shadow); 
}
.co-theme.is-selected { 
  border-color: var(--text); 
  box-shadow: 0 0 0 2px var(--text), var(--shadow-lg); 
}
.co-theme__img { 
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; 
  background: var(--bg-alt); transition: transform var(--transition);
}
.co-theme:hover .co-theme__img { transform: scale(1.05); }
.co-theme__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.co-theme__name { font-size: .875rem; font-weight: 600; }
.co-theme__meta { font-size: .75rem; color: var(--text-muted); }
.co-theme__check {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--text); color: var(--bg); font-size: .7rem;
  display: none; align-items: center; justify-content: center; 
  box-shadow: var(--shadow); z-index: 2;
}
.co-theme.is-selected .co-theme__check { display: flex; animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes popIn {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

/* --- payment methods (enhanced list) --- */
.co-pay-list { display: flex; flex-direction: column; gap: 10px; }
.co-pay {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 18px; border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--bg); font-family: inherit; transition: all var(--transition);
}
.co-pay:hover { border-color: var(--text-muted); transform: translateY(-1px); }
.co-pay.is-selected { 
  border-color: var(--text); 
  background: var(--primary-soft); 
  box-shadow: 0 0 0 1px var(--text); 
}
.co-pay__icon {
  width: 40px; height: 40px; border-radius: var(--radius); flex: none;
  background: var(--bg-alt); border: 1px solid var(--border); 
  display: flex; align-items: center; justify-content: center; 
  font-size: 1.1rem; color: var(--text);
}
.co-pay__icon i.fa-brands { color: inherit; }
.co-pay__icon i.fa-brands.fa-bitcoin { color: #f7931a; }
.co-pay__icon i.fa-brands.fa-paypal { color: #003087; }
.co-pay__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.co-pay__name { font-size: .9375rem; font-weight: 600; }
.co-pay__desc { font-size: .8125rem; color: var(--text-dim); }

/* --- sticky summary (enhanced) --- */
.co-summary { position: sticky; top: 88px; }
.co-sum-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: .875rem; color: var(--text-dim); padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.co-sum-row:last-child { border-bottom: none; }
.co-sum-row strong { color: var(--text); font-weight: 600; }
.co-sum-row .co-sum-val { font-weight: 600; color: var(--text); white-space: nowrap; }
.co-sum-total {
  border-top: 2px solid var(--border); margin-top: 8px; padding-top: 16px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.co-sum-total__label { font-size: 1rem; font-weight: 600; }
.co-sum-total__value { 
  font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; 
  color: var(--text);
}
.co-sum-note { font-size: .75rem; color: var(--text-muted); margin-top: 6px; }
.co-place-btn {
  width: 100%; margin-top: 18px; padding: 14px; border: none; border-radius: var(--radius);
    background: #50C74A;
  /* background: var(--text);  */
  /* color: var(--bg);  */

  /* background: var(--text); color: var(--bg);  */
  font-weight: 600; font-size: .9375rem; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: all var(--transition);
  box-shadow: var(--shadow);
}
.co-place-btn:hover { opacity: .95; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.co-place-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.co-trust { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.co-trust span { 
  display: flex; align-items: center; gap: 10px; 
  font-size: .8125rem; color: var(--text-muted); 
}
.co-trust i { font-size: .875rem; width: 18px; text-align: center; color: var(--text-dim); }
.co-terms { margin-top: 14px; font-size: .75rem; color: var(--text-muted); text-align: center; }
.co-terms a { text-decoration: underline; text-underline-offset: 2px; }

/* --- slim navbar variant for checkout --- */
.co-back-nav { 
  font-size: .875rem; font-weight: 500; color: var(--text-dim); 
  display: inline-flex; align-items: center; gap: 6px; 
  transition: color var(--transition); 
}
.co-back-nav:hover { color: var(--text); }

/* --- payment instruction panel --- */
.co-panel {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm);
  max-width: 680px; margin: 0 auto;
}
.co-panel__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.co-panel__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.co-panel__sub { font-size: .9375rem; color: var(--text-dim); line-height: 1.6; }
.co-ref-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bg-alt); border: 1px solid var(--border);
  padding: 8px 14px; border-radius: var(--radius);
  font-family: ui-monospace, monospace; font-size: .875rem; font-weight: 600;
}
.co-copy-btn {
  background: transparent; border: none; color: var(--text-muted);
  cursor: pointer; font-size: .75rem; font-weight: 600;
  transition: color var(--transition);
}
.co-copy-btn:hover { color: var(--text); }
.co-copy-btn.copied { color: #10b981; }

.co-instr-qr { text-align: center; margin: 24px 0; }
.co-instr-qr img { max-width: 200px; border-radius: var(--radius); border: 1px solid var(--border); }
.co-instr-rows { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
.co-instr-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-alt); border: 1px solid var(--border);
  padding: 12px 16px; border-radius: var(--radius);
}
.co-instr-row__k { font-size: .8125rem; font-weight: 600; color: var(--text-dim); min-width: 120px; }
.co-instr-row__v { flex: 1; font-size: .875rem; font-family: ui-monospace, monospace; word-break: break-all; }
.co-instr-steps { margin: 20px 0; padding-left: 24px; }
.co-instr-steps li { font-size: .9375rem; color: var(--text-dim); margin-bottom: 10px; line-height: 1.6; }
.co-instr-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--primary-soft); border-left: 3px solid var(--text-muted);
  padding: 14px 18px; border-radius: var(--radius);
  font-size: .875rem; color: var(--text-dim); line-height: 1.6;
  margin: 20px 0;
}
.co-instr-note i { color: var(--text-muted); margin-top: 2px; }
.co-sum-mini { margin: 20px 0; padding: 16px; background: var(--bg-alt); border-radius: var(--radius); }

/* --- confirmation panel --- */
.co-confirm { text-align: center; }
.co-confirm .status-modal__icon-wrap {
  width: 80px; height: 80px; margin: 0 auto 24px;
  background: rgba(16, 185, 129, 0.1); color: #10b981;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.co-confirm .co-panel__title { font-size: 1.75rem; margin-bottom: 12px; }
.co-next-list { list-style: none; text-align: left; margin: 24px 0; display: flex; flex-direction: column; gap: 14px; }
.co-next-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; color: var(--text-dim); }
.co-next-list i { color: #10b981; margin-top: 3px; }
.co-next-list strong { color: var(--text); }
.co-confirm__actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
.co-btn-ghost {
  padding: 12px 20px; border: 1px solid var(--border); border-radius: var(--radius);
  background: transparent; color: var(--text); font-weight: 600; font-size: .875rem;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: all var(--transition);
}
.co-btn-ghost:hover { border-color: var(--text-muted); background: var(--bg-alt); }

@keyframes successPop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

/* --- responsive --- */
@media (max-width: 1024px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .co-summary { position: static; }
}
@media (max-width: 768px) {
  .checkout-head { padding-top: 92px; }
  .co-card { padding: 20px 16px; }
  .co-theme-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .checkout-main { padding-bottom: 64px; }
  .co-opt { flex-wrap: wrap; }
  .co-opt__price { width: 100%; padding-left: 32px; }
}
@media (max-width: 480px) {
  .co-step__label { display: none; }
  .co-step.is-active .co-step__label { display: inline; }
  .co-theme-grid { grid-template-columns: repeat(2, 1fr); }
  .co-panel { padding: 20px 16px; }
  .co-panel__head { flex-direction: column; }
}

/* ==========================================================================
   PHASE 1 — Marquee no-pause option + desktop pricing toggle
   ========================================================================== */
.showcase-marquee.no-pause:hover .showcase-row { animation-play-state: running; }

/* Desktop / laptop (≥1025px): everything fits — no toggle needed.
   Secondary plans are always visible; the button is hidden. */
@media (min-width: 1025px) {
  .pricing-toggle-btn { display: none; }
  .pricing-card--tier-secondary.is-hidden { display: flex; }
}


/* Mobile / tablet / small screens: button + toggle behavior unchanged. */

/* ==========================================================================
   PRICING — toggle removed on ALL devices (desktop, tablet, mobile)
   All plans (including secondary tiers) are always visible.
   ========================================================================== */
.pricing-toggle-btn { display: none !important; }
.pricing-card--tier-secondary.is-hidden { display: flex !important; }