/* ==============================================
   BR3ND3N - Technology Consulting
   Modern Dark Premium Theme
   ============================================== */

/* ==============================================
   1. CUSTOM PROPERTIES (Design Tokens)
   ============================================== */
:root {
  /* Colors - Dark Premium Tech Palette */
  --color-bg:            #13141d;
  --color-bg-elevated:   #1a1c28;
  --color-bg-card:       rgba(255, 255, 255, 0.04);
  --color-bg-glass:      rgba(255, 255, 255, 0.06);
  --color-border:        rgba(255, 255, 255, 0.06);
  --color-border-hover:  rgba(255, 255, 255, 0.12);

  --color-primary:       #00d4ff;
  --color-primary-dim:   rgba(0, 212, 255, 0.15);
  --color-secondary:     #7c3aed;
  --color-secondary-dim: rgba(124, 58, 237, 0.15);

  --color-text:          #e4e4e7;
  --color-text-dim:      #8b8b93;
  --color-text-muted:    #52525b;

  /* Warm accent (personal / IT help lane) */
  --color-warm:          #ff9f43;
  --color-warm-dim:      rgba(255, 159, 67, 0.15);
  --color-warm-bg:       #1a1815;
  --gradient-warm:       linear-gradient(135deg, #ff9f43, #ff6b6b);

  --gradient-primary:    linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  --gradient-hero:       linear-gradient(135deg, #13141d 0%, #181a26 50%, #13141d 100%);
  --gradient-glow:       linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-primary));

  /* Typography */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', sans-serif;

  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.8rem);
  --text-sm:   clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem);
  --text-base: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
  --text-lg:   clamp(1rem, 0.9rem + 0.5vw, 1.15rem);
  --text-xl:   clamp(1.15rem, 1rem + 0.7vw, 1.35rem);
  --text-2xl:  clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --text-3xl:  clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --text-hero: clamp(2.5rem, 2rem + 4vw, 5rem);

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 3vw, 2.5rem);
  --nav-height: 4.5rem;

  /* Effects */
  --radius-sm:  0.5rem;
  --radius-md:  0.75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --blur-glass:  20px;
  --blur-glow:   60px;

  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
  -webkit-text-size-adjust: 100%;
}

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

/* Smooth scrolling off for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

ul, ol {
  list-style: none;
}

input, textarea {
  font: inherit;
  color: inherit;
}

/* Global focus-visible ring for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Warm focus ring on services page (overridden via body class in JS) */
.page--warm :focus-visible {
  outline-color: var(--color-warm);
}

/* Remove default outline for non-keyboard interactions */
:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background: var(--color-primary-dim);
  color: var(--color-primary);
}

.page--warm ::selection {
  background: var(--color-warm-dim);
  color: var(--color-warm);
}


/* ==============================================
   3. UTILITY CLASSES
   ============================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text--alt {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Scroll-triggered reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ==============================================
   4. GRAIN / NOISE TEXTURE OVERLAY
   ============================================== */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}


/* ==============================================
   5. NAVIGATION
   ============================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
  border-bottom: 1px solid transparent;
}

.navbar.is-scrolled {
  background: rgba(10, 10, 15, 0.8);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border-bottom-color: var(--color-border);
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Logo */
.navbar__logo {
  display: flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: opacity var(--transition-fast);
}

.navbar__logo:hover { opacity: 0.8; }

.logo-dot {
  color: var(--color-primary);
  font-size: 1.8rem;
  line-height: 1;
}
.page--warm .logo-dot {
  color: var(--color-warm);
}

/* ---- Logo rotating 3 ↔ e animation ---- */
/*
  A "3" mirrored horizontally already looks like an "e".
  Pure CSS — just rotate the "3" on the Y-axis. No text swap needed.

  Timeline (10s total):
    0%–25%   (0–2.5s)    → hold at 0°     → reads "Br3nd3n"
    25%–45%  (2.5–4.5s)  → slowly rotate to 180° (mirrored 3 = e)
    45%–75%  (4.5–7.5s)  → hold at 180°   → reads "Brenden"
    75%–95%  (7.5–9.5s)  → slowly rotate back to 360°
    95%–100% (9.5–10s)   → settle, loop
*/
.logo-flip {
  display: inline-block;
  animation: logoSpin 10s ease-in-out infinite;
}

@keyframes logoSpin {
  0%   { transform: rotateY(0deg); }
  25%  { transform: rotateY(0deg); }
  45%  { transform: rotateY(180deg); }
  75%  { transform: rotateY(180deg); }
  95%  { transform: rotateY(360deg); }
  100% { transform: rotateY(360deg); }
}

/* Nav links */
.navbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.nav-link {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-dim);
  transition: color var(--transition-fast);
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gradient-primary);
  transition: width var(--transition-base);
}

.nav-link:hover {
  color: var(--color-text);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  width: 100%;
}

/* Warm nav underline on services page */
.page--warm .nav-link::after {
  background: var(--gradient-warm);
}

.nav-link--cta {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  color: var(--color-text);
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.nav-link--cta::after { display: none; }

.nav-link--cta:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-dim);
  color: var(--color-primary);
}

/* Warm CTA hover on services page */
.page--warm .nav-link--cta:hover,
.page--warm .nav-link--cta:focus-visible {
  border-color: var(--color-warm);
  background: var(--color-warm-dim);
  color: var(--color-warm);
}

/* CTA gets its own focus style — hide default ring */
.nav-link--cta:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-primary-dim);
  color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-dim);
}
.page--warm .nav-link--cta:focus-visible {
  box-shadow: 0 0 0 3px var(--color-warm-dim);
}

/* Language selector */
.lang-selector {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.lang-selector__link {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-text-dim);
  text-decoration: none;
  padding: 0.45rem 0.55rem;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.lang-selector__link:hover {
  color: var(--color-text);
}

.lang-selector__link--active {
  color: var(--color-primary);
}

.page--warm .lang-selector__link--active {
  color: var(--color-warm);
}

.lang-selector__divider {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  user-select: none;
}

/* Mobile language switcher (hidden on desktop) */
.navbar__mobile-lang {
  display: none;
  align-items: center;
  gap: 0.1rem;
}

.navbar__mobile-lang .lang-selector__link {
  font-size: var(--text-xs);
  min-width: 36px;
  min-height: 36px;
  padding: 0.3rem 0.35rem;
}

/* Hamburger (mobile) */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  z-index: 1002;
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition:
    transform var(--transition-base),
    opacity var(--transition-fast);
  transform-origin: center;
}

/* Hamburger focus */
.navbar__hamburger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Hamburger active state */
.navbar__hamburger.is-active .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar__hamburger.is-active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.navbar__hamburger.is-active .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav */
@media (max-width: 768px) {
  .navbar__hamburger {
    display: flex;
  }

  .navbar__links {
    position: fixed;
    inset: 0;
    z-index: 1001;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xl);
    background: rgba(10, 10, 15, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--transition-base),
      visibility var(--transition-base);
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .navbar__links.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .navbar__links .nav-link {
    font-size: var(--text-xl);
    color: var(--color-text);
  }

  /* Stagger animation for mobile menu items */
  .navbar__links li {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .navbar__links.is-open li {
    opacity: 1;
    transform: translateY(0);
  }
  .navbar__links.is-open li:nth-child(1) { transition-delay: 50ms; }
  .navbar__links.is-open li:nth-child(2) { transition-delay: 100ms; }
  .navbar__links.is-open li:nth-child(3) { transition-delay: 150ms; }
  .navbar__links.is-open li:nth-child(4) { transition-delay: 200ms; }
  .navbar__links.is-open li:nth-child(5) { transition-delay: 250ms; }

  /* Show mobile lang switcher in the navbar bar, grouped right */
  .navbar__mobile-lang {
    display: flex;
    margin-left: auto;
    margin-right: var(--space-sm);
  }

  /* Hide the original lang-selector inside the fullscreen overlay */
  .navbar__links .lang-selector {
    display: none;
  }

  .navbar__links .nav-link--cta {
    font-size: var(--text-base);
  }

  /* Suppress scrolled navbar styling when mobile menu is open */
  .navbar.menu-open,
  .navbar:has(.navbar__links.is-open) {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


/* ==============================================
   6. HERO SECTION
   ============================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Animated gradient background */
.hero__gradient-bg {
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
  z-index: 0;
}

.hero__gradient-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 212, 255, 0.08), transparent),
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(124, 58, 237, 0.06), transparent),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(0, 212, 255, 0.04), transparent);
  animation: heroGradientShift 12s ease-in-out infinite alternate;
}

@keyframes heroGradientShift {
  0%   { opacity: 0.6; transform: scale(1) translateY(0); }
  50%  { opacity: 1; transform: scale(1.05) translateY(-10px); }
  100% { opacity: 0.7; transform: scale(1) translateY(5px); }
}

/* Floating orbs */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(var(--blur-glow));
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}

.hero__orb--1 {
  width: clamp(200px, 35vw, 500px);
  height: clamp(200px, 35vw, 500px);
  background: radial-gradient(circle, rgba(0, 212, 255, 0.12), transparent 70%);
  top: -10%;
  right: -5%;
  animation: orbFloat1 18s ease-in-out infinite;
  /* translate used by animation; transform used by JS parallax — they compose independently */
}

.hero__orb--2 {
  width: clamp(150px, 25vw, 400px);
  height: clamp(150px, 25vw, 400px);
  background: radial-gradient(circle, rgba(124, 58, 237, 0.12), transparent 70%);
  bottom: 10%;
  left: -5%;
  animation: orbFloat2 22s ease-in-out infinite;
}

.hero__orb--3 {
  width: clamp(100px, 15vw, 250px);
  height: clamp(100px, 15vw, 250px);
  background: radial-gradient(circle, rgba(0, 212, 255, 0.08), transparent 70%);
  top: 40%;
  left: 50%;
  animation: orbFloat3 15s ease-in-out infinite;
}

@keyframes orbFloat1 {
  0%, 100% { translate: 0 0; }
  33% { translate: -30px 20px; }
  66% { translate: 20px -30px; }
}

@keyframes orbFloat2 {
  0%, 100% { translate: 0 0; }
  33% { translate: 25px -15px; }
  66% { translate: -20px 25px; }
}

@keyframes orbFloat3 {
  0%, 100% { translate: 0 0; }
  50% { translate: -15px 20px; }
}

/* Hero content */
.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 850px;
}

.hero__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
}

.page--warm .hero__eyebrow {
  color: var(--color-warm);
}

.page--warm .hero__gradient-bg::before {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 159, 67, 0.08), transparent),
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(255, 107, 107, 0.06), transparent),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(255, 159, 67, 0.04), transparent);
}

.page--warm .hero__orb--1 {
  background: radial-gradient(circle, rgba(255, 159, 67, 0.12), transparent 70%);
}

.page--warm .hero__orb--2 {
  background: radial-gradient(circle, rgba(255, 107, 107, 0.12), transparent 70%);
}

.page--warm .hero__orb--3 {
  background: radial-gradient(circle, rgba(255, 159, 67, 0.08), transparent 70%);
}

.page--warm .hero__tagline.is-typing::after {
  color: var(--color-warm);
}

.hero__heading {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-xl);
}

.hero__tagline {
  font-size: var(--text-lg);
  color: var(--color-text-dim);
  max-width: 550px;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
  line-height: 1.7;
}

/* Typing cursor animation for tagline */
.hero__tagline.is-typing::after {
  content: '|';
  display: inline;
  color: var(--color-primary);
  animation: blinkCursor 0.7s step-end infinite;
  margin-left: 2px;
  font-weight: 300;
}

@keyframes blinkCursor {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Hero actions */
.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Scroll indicator */
.hero__scroll-indicator {
  position: absolute;
  bottom: var(--space-2xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  animation: fadeInUp 1s 1.5s ease both;
}

.scroll-mouse {
  width: 24px;
  height: 38px;
  border: 2px solid var(--color-text-muted);
  border-radius: 12px;
  position: relative;
}

.scroll-wheel {
  width: 3px;
  height: 8px;
  background: var(--color-text-dim);
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 2s ease-in-out infinite;
}

@keyframes scrollWheel {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(12px); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}


/* ==============================================
   7. BUTTONS
   ============================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.85rem 2rem;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 100px;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-base),
    background var(--transition-base),
    border-color var(--transition-base);
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 100px;
}

.page--warm .btn:focus-visible {
  outline-color: var(--color-warm);
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background: var(--gradient-primary);
  color: var(--color-bg);
}

.btn--primary:hover {
  box-shadow:
    0 0 20px rgba(0, 212, 255, 0.3),
    0 0 40px rgba(124, 58, 237, 0.15);
  transform: translateY(-1px);
}

/* Pulsing glow animation for CTA */
.btn--glow {
  position: relative;
}

.btn--glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--gradient-glow);
  background-size: 200% 200%;
  z-index: -1;
  opacity: 0;
  filter: blur(15px);
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0; background-position: 0% 50%; }
  50%      { opacity: 0.6; background-position: 100% 50%; }
}

/* Warm variant for services page CTA */
.btn--warm {
  background: var(--gradient-warm);
  color: var(--color-bg);
}

.btn--warm:hover {
  box-shadow:
    0 0 20px rgba(255, 159, 67, 0.3),
    0 0 40px rgba(255, 107, 107, 0.15);
  transform: translateY(-1px);
}

.btn--warm.btn--glow::before {
  background: linear-gradient(135deg, #ff9f43, #ff6b6b, #ff9f43);
  background-size: 200% 200%;
}

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

.btn--ghost:hover {
  border-color: var(--color-border-hover);
  background: var(--color-bg-glass);
}

.btn--full {
  width: 100%;
  justify-content: center;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


/* ==============================================
   8. SECTION SHARED STYLES
   ============================================== */
section {
  padding: var(--space-5xl) 0;
  position: relative;
}

.section-header {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-4xl);
}

.section-header--left {
  text-align: left;
  margin-inline: 0;
}

.section-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: var(--space-md);
}

.section-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-dim);
  line-height: 1.7;
}


/* ==============================================
   9. SERVICES SECTION
   ============================================== */
.services {
  background: var(--color-bg);
}

/* Top border glow line */
.services::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-xl);
}

/* Glassmorphism service cards */
.service-card {
  position: relative;
  padding: var(--space-2xl);
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    background var(--transition-base);
  overflow: hidden;
}

/* Subtle gradient on hover */
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.03), rgba(124, 58, 237, 0.03));
  opacity: 0;
  transition: opacity var(--transition-base);
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-border-hover);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(0, 212, 255, 0.05);
}

.service-card:hover::before,
.service-card:focus-visible::before {
  opacity: 1;
}

.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  background: var(--color-primary-dim);
  color: var(--color-primary);
  margin-bottom: var(--space-xl);
  position: relative;
  z-index: 1;
}

.service-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}

.service-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
  position: relative;
  z-index: 1;
}

.service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  position: relative;
  z-index: 1;
}

.service-card__tags li {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  transition: border-color var(--transition-fast);
}

.service-card:hover .service-card__tags li {
  border-color: var(--color-border-hover);
}

/* Staggered reveal delays */
.service-card[data-delay="100"].reveal {
  transition-delay: 100ms;
}

.service-card[data-delay="200"].reveal {
  transition-delay: 200ms;
}


/* ==============================================
   10. ABOUT SECTION
   ============================================== */
.about {
  background: var(--color-bg-elevated);
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4xl);
  align-items: center;
}

@media (min-width: 768px) {
  .about__grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-4xl);
  }
}

/* Visual card with stats */
.about__visual-card {
  position: relative;
  padding: var(--space-2xl);
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* Animated angle for rotating gradient ring */
@property --ring-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Profile photo with thick rotating gradient ring */
.about__photo-ring {
  position: relative;
  width: 214px;
  height: 214px;
  border-radius: 50%;
  padding: 4px;
  --ring-angle: 0deg;
  background: conic-gradient(
    from var(--ring-angle),
    #00d4ff, #7c3aed, #00d4ff
  );
  margin: 0 auto var(--space-2xl);
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.15), 0 0 60px rgba(124, 58, 237, 0.1);
  animation: ringRotate 10s linear infinite;
  transition: transform 0.4s ease;
}

.about__photo-ring:hover {
  transform: scale(1.03);
  box-shadow: 0 0 40px rgba(0, 212, 255, 0.25), 0 0 80px rgba(124, 58, 237, 0.15);
}

@keyframes ringRotate {
  to { --ring-angle: 360deg; }
}

/* ---- Spectral Trace: motion-blur comet tail ---- */

/* Layer 1 — blurred trailing gradient (the "tail") */
.about__photo-ring::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  /* Same rotation but with a wide soft transition zone = trail */
  background: conic-gradient(
    from var(--ring-angle),
    transparent 0deg,
    transparent 200deg,
    rgba(0, 212, 255, 0.5) 280deg,
    rgba(124, 58, 237, 0.6) 330deg,
    rgba(0, 212, 255, 0.5) 350deg,
    transparent 360deg
  );
  filter: blur(10px);
  animation:
    ringRotate 10s linear infinite,
    trailBreath 4s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.4s ease, filter 0.4s ease;
}

/* On hover — trail stretches wider and brightens */
.about__photo-ring:hover::before {
  /* Wider spread = longer tail feel */
  background: conic-gradient(
    from var(--ring-angle),
    transparent 0deg,
    transparent 140deg,
    rgba(0, 212, 255, 0.45) 240deg,
    rgba(124, 58, 237, 0.55) 310deg,
    rgba(0, 212, 255, 0.5) 345deg,
    transparent 360deg
  );
  filter: blur(14px);
  animation:
    ringRotate 10s linear infinite,
    trailBreathHover 4s ease-in-out infinite;
}

/* Layer 2 — soft outer bloom glow */
.about__photo-ring::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: conic-gradient(
    from var(--ring-angle),
    transparent 0deg,
    transparent 240deg,
    rgba(0, 212, 255, 0.25) 300deg,
    rgba(124, 58, 237, 0.2) 340deg,
    transparent 360deg
  );
  filter: blur(22px);
  animation:
    ringRotate 10s linear infinite,
    trailBloom 4s ease-in-out infinite;
  pointer-events: none;
  z-index: -2;
  transition: opacity 0.4s ease;
}

.about__photo-ring:hover::after {
  animation:
    ringRotate 10s linear infinite,
    trailBloomHover 4s ease-in-out infinite;
}

/* Breathing animation for the trail */
@keyframes trailBreath {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.65; }
}

/* Breathing for the outer bloom */
@keyframes trailBloom {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.45; }
}

/* Hover: brighter breathing */
@keyframes trailBreathHover {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.85; }
}

@keyframes trailBloomHover {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.7; }
}

/* Photo with vignette */
.about__photo-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.about__photo-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 40%, rgba(19, 20, 29, 0.45) 100%);
  pointer-events: none;
}

.about__photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  .about__photo-ring {
    width: 254px;
    height: 254px;
  }
}

.about__visual-stats {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: var(--space-xl);
  text-align: center;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.stat__number {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat__label {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

/* About text content */
.about__text {
  font-size: var(--text-base);
  color: var(--color-text-dim);
  line-height: 1.8;
  margin-bottom: var(--space-lg);
}

.about__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.badge {
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 0.4rem 1rem;
  border-radius: 100px;
  background: var(--color-primary-dim);
  color: var(--color-primary);
  border: 1px solid rgba(0, 212, 255, 0.1);
}


/* ==============================================
   11. CONTACT SECTION
   ============================================== */
.contact {
  background: var(--color-bg);
}

.contact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  max-width: 900px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .contact__grid {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-3xl);
  }
}

/* Form styles */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.form-group {
  position: relative;
}

.form-group--full {
  grid-column: 1 / -1;
}

@media (max-width: 480px) {
  .contact-form {
    grid-template-columns: 1fr;
  }
}

.form-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: var(--space-xs);
}

.form-input {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
  outline: none;
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-dim);
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}

/* Warm focus variant for services page form */
.page--warm .form-input:focus {
  border-color: var(--color-warm);
  box-shadow: 0 0 0 3px var(--color-warm-dim);
}

.form-input--textarea {
  resize: vertical;
  min-height: 120px;
}

select.form-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Submit button spans full width */
.contact-form .btn--full {
  grid-column: 1 / -1;
  margin-top: var(--space-sm);
}

/* Contact info card */
.contact-info-card {
  padding: var(--space-2xl);
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  height: fit-content;
}

.contact-info-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.contact-info-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}

.contact-info-card__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  transition: color var(--transition-fast);
}

.contact-link:hover {
  color: var(--color-primary);
}

/* Warm contact link hover on services page */
.page--warm .contact-link:hover {
  color: var(--color-warm);
}

.contact-link svg {
  flex-shrink: 0;
}


/* ==============================================
   12. FOOTER
   ============================================== */
.footer {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--color-border);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}

@media (min-width: 768px) {
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer__logo {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: opacity var(--transition-fast);
}

.footer__logo:hover { opacity: 0.7; }

.footer__copy {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.footer__links {
  display: flex;
  gap: var(--space-xl);
}

.footer__links a {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  transition: color var(--transition-fast);
}

.footer__links a:hover {
  color: var(--color-text);
}


/* ==============================================
   13. FORM SUCCESS STATE
   ============================================== */
.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3xl);
  gap: var(--space-md);
}

.form-success__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-primary-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.form-success__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
}

.form-success__text {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

/* Form field validation error */
.form-error {
  font-size: var(--text-xs);
  color: #ef4444;
  margin-top: 0.35rem;
}

.form-input[aria-invalid="true"] {
  border-color: #ef4444;
}

/* Remove the unused focus-line (was never styled) */


/* ==============================================
   14. PATHS — Two-Lane Chooser Section
   ============================================== */
.paths {
  background: var(--color-bg-elevated);
}

.paths__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

.path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-3xl) var(--space-2xl);
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.path-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.path-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-border-hover);
}

.path-card:hover::before,
.path-card:focus-visible::before { opacity: 1; }

/* Focus state mirrors hover */
.path-card:focus-visible {
  outline: none;
  border-color: var(--color-border-hover);
}
.path-card--business:focus-visible {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 212, 255, 0.08);
}
.path-card--personal:focus-visible {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 159, 67, 0.08);
}

/* Business lane — cyan accent */
.path-card--business::before {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(0, 212, 255, 0.02));
}
.path-card--business:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 212, 255, 0.08);
}
.path-card--business .path-card__icon {
  background: var(--color-primary-dim);
  color: var(--color-primary);
}
.path-card--business .path-card__cta { color: var(--color-primary); }

/* Personal lane — warm amber accent */
.path-card--personal::before {
  background: linear-gradient(135deg, rgba(255, 159, 67, 0.05), rgba(255, 159, 67, 0.02));
}
.path-card--personal:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 159, 67, 0.08);
}
.path-card--personal .path-card__icon {
  background: var(--color-warm-dim);
  color: var(--color-warm);
}
.path-card--personal .path-card__cta { color: var(--color-warm); }

.path-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xl);
  position: relative;
  z-index: 1;
}

.path-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}

.path-card__desc {
  font-size: var(--text-base);
  color: var(--color-text-dim);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
  flex-grow: 1;
  position: relative;
  z-index: 1;
}

.path-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
  transition: gap var(--transition-fast);
}

.path-card:hover .path-card__cta { gap: var(--space-md); }

.path-card[data-delay="100"].reveal { transition-delay: 100ms; }

@media (max-width: 900px) {
  .paths__grid { grid-template-columns: 1fr; }
  .path-card { padding: var(--space-2xl); }
}


/* ==============================================
   15. PAGE HERO (inner pages — shorter)
   ============================================== */
.page-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--nav-height);
  padding-bottom: var(--space-3xl);
}

.page-hero__gradient-bg {
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
  z-index: 0;
}

.page-hero__gradient-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 159, 67, 0.06), transparent),
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(255, 107, 107, 0.04), transparent);
}

.page-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 750px;
}

.page-hero__tagline {
  font-size: var(--text-lg);
  color: var(--color-text-dim);
  max-width: 550px;
  margin-inline: auto;
  line-height: 1.7;
}

/* Warm gradient text variant */
.gradient-text--warm {
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Warm section label variant */
.section-label--warm { color: var(--color-warm); }


/* ==============================================
   16. WEBSITE BUILDING SECTION
   ============================================== */
.svc-web {
  background: var(--color-bg);
  position: relative;
}

.svc-web__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-xl);
}

/* Warm-accent variant of service-card */
.service-card--warm:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 159, 67, 0.05);
}
.service-card--warm::before {
  background: linear-gradient(135deg, rgba(255, 159, 67, 0.03), rgba(255, 107, 107, 0.03));
}
.service-card__icon--warm {
  background: var(--color-warm-dim);
  color: var(--color-warm);
}

/* Warm tag hover accent */
.service-card--warm:hover .service-card__tags li {
  border-color: rgba(255, 159, 67, 0.2);
}


/* ==============================================
   16b. PORTFOLIO SECTION
   ============================================== */
.portfolio {
  background: var(--color-bg-elevated);
  position: relative;
}

.portfolio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: 800px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .portfolio__grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  }
}

.portfolio-card {
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.portfolio-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 159, 67, 0.15);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 159, 67, 0.05);
}

.portfolio-card__img-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-warm-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

/* Portfolio card as clickable link */
a.portfolio-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.portfolio-card:focus-visible {
  outline: 2px solid var(--color-warm);
  outline-offset: 4px;
}

.portfolio-card:hover .portfolio-card__img {
  transform: scale(1.03);
}

.portfolio-card__info {
  padding: var(--space-xl);
}

.portfolio-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.portfolio-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  line-height: 1.6;
}

.portfolio-card[data-delay="100"].reveal {
  transition-delay: 100ms;
}

@media (max-width: 768px) {
  .portfolio__grid {
    grid-template-columns: 1fr;
  }
}


/* ==============================================
   17. IT HELP SECTION (warm & approachable)
   ============================================== */
.svc-it {
  background: var(--color-warm-bg);
  position: relative;
}

.svc-it::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 159, 67, 0.2), transparent);
}

.svc-it__title {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
}

.svc-it__subtitle {
  font-size: var(--text-lg);
}

.svc-it__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

.it-card {
  position: relative;
  padding: var(--space-2xl);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 159, 67, 0.08);
  border-radius: var(--radius-xl);
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.it-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 159, 67, 0.15);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.it-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  background: var(--color-warm-dim);
  color: var(--color-warm);
  margin-bottom: var(--space-lg);
}

.it-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-md);
}

.it-card__desc {
  font-size: var(--text-lg);
  color: var(--color-text-dim);
  line-height: 1.8;
}

.it-card[data-delay="100"].reveal { transition-delay: 100ms; }
.it-card[data-delay="200"].reveal { transition-delay: 200ms; }
.it-card[data-delay="300"].reveal { transition-delay: 300ms; }

@media (max-width: 768px) {
  .svc-it__grid { grid-template-columns: 1fr; }
}


/* ==============================================
   18. SERVICES CTA SECTION
   ============================================== */
.services-cta {
  background: var(--color-bg);
}

.services-cta__card {
  text-align: center;
  padding: var(--space-4xl) var(--space-2xl);
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.services-cta__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  margin-bottom: var(--space-md);
}

.services-cta__text {
  font-size: var(--text-lg);
  color: var(--color-text-dim);
  max-width: 500px;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
  line-height: 1.7;
}


/* ==============================================
   19. RESPONSIVE FINE-TUNING
   ============================================== */
@media (max-width: 768px) {
  section {
    padding: var(--space-4xl) 0;
  }

  .section-header {
    margin-bottom: var(--space-2xl);
  }

  .hero__scroll-indicator {
    display: none;
  }
}

@media (max-width: 480px) {
  section {
    padding: var(--space-3xl) 0;
  }

  .service-card {
    padding: var(--space-xl);
  }

  .contact-info-card {
    padding: var(--space-xl);
  }
}


/* ==============================================
   20. SCROLL PROGRESS CONSTELLATION
   ============================================== */

/* --- CSS custom props for theming (cyan default, warm override) --- */
.scroll-constellation {
  --cst-color: var(--color-primary);          /* #00d4ff */
  --cst-color-dim: rgba(0, 212, 255, 0.15);
  --cst-glow-1: rgba(0, 212, 255, 0.4);
  --cst-glow-2: rgba(0, 212, 255, 0.15);
  --cst-glow-1-bright: rgba(0, 212, 255, 0.6);
  --cst-glow-2-bright: rgba(0, 212, 255, 0.25);
  --cst-gradient: linear-gradient(180deg, var(--color-primary), var(--color-secondary));

  position: fixed;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  width: 18px;
  pointer-events: auto;
}

/* Warm variant for services page */
.scroll-constellation--warm {
  --cst-color: var(--color-warm);             /* #ff9f43 */
  --cst-color-dim: rgba(255, 159, 67, 0.15);
  --cst-glow-1: rgba(255, 159, 67, 0.4);
  --cst-glow-2: rgba(255, 159, 67, 0.15);
  --cst-glow-1-bright: rgba(255, 159, 67, 0.6);
  --cst-glow-2-bright: rgba(255, 159, 67, 0.25);
  --cst-gradient: linear-gradient(180deg, #ff9f43, #ff6b6b);
}

/* Vertical track (line connecting dots) */
.constellation__track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(63, 63, 70, 0.35);
  border-radius: 2px;
}

/* Progress fill that grows with scroll */
.constellation__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--cst-gradient);
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 150ms ease-out;
}

/* Individual dot */
.constellation__dot {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(63, 63, 70, 0.5);
  background: var(--color-bg);
  cursor: pointer;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-fast);
  text-decoration: none;
  display: block;
  flex-shrink: 0;
  z-index: 1;
}

/* Inner glow dot (hidden by default, shown on active) */
.constellation__dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--cst-color);
  transform: scale(0);
  transition: transform var(--transition-base);
}

/* Hover state */
.constellation__dot:hover {
  border-color: var(--cst-color);
  transform: scale(1.3);
  box-shadow:
    0 0 8px var(--cst-glow-2);
}

/* Active section dot */
.constellation__dot.is-active {
  border-color: var(--cst-color);
  box-shadow:
    0 0 10px var(--cst-glow-1),
    0 0 25px var(--cst-glow-2);
  animation: constellationPulse 2s ease-in-out infinite;
}

.constellation__dot.is-active::after {
  transform: scale(1);
}

@keyframes constellationPulse {
  0%, 100% {
    box-shadow:
      0 0 10px var(--cst-glow-1),
      0 0 25px var(--cst-glow-2);
  }
  50% {
    box-shadow:
      0 0 16px var(--cst-glow-1-bright),
      0 0 35px var(--cst-glow-2-bright);
  }
}

/* Label tooltip (shows on hover) */
.constellation__label {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.constellation__dot:hover .constellation__label,
.constellation__dot:focus-visible .constellation__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Custom focus for constellation dots */
.constellation__dot:focus-visible {
  outline: none;
  border-color: var(--cst-color);
  box-shadow:
    0 0 10px var(--cst-glow-1),
    0 0 25px var(--cst-glow-2);
}

/* Hide on mobile / tablet */
@media (max-width: 768px) {
  .scroll-constellation {
    display: none;
  }
}

/* Reduced motion: disable pulse animation */
@media (prefers-reduced-motion: reduce) {
  .constellation__dot.is-active {
    animation: none;
  }
}