/* ==========================================================================
   Ern Web Studio — Premium Design Layer
   "Digital Electricity & Modern Psychology"
   Loaded after style.css; retargets the visual identity via design tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Typography */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;

  --tracking-tight: -0.03em;
  --tracking-display: -0.035em;
  --tracking-wide: 0.14em;

  /* Electric brand constants (theme independent) */
  --e-electric: #00f0ff;
  --e-cyan: #22d3ee;
  --e-violet: #a855f7;
  --e-indigo: #6366f1;
  --e-electric-rgb: 0, 240, 255;
  --e-cyan-rgb: 34, 211, 238;
  --e-violet-rgb: 168, 85, 247;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-electric: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.4s;
  --duration-fast: 0.22s;
  --duration-slow: 0.7s;

  /* Radii — unified across the whole system */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* Elevation ramps */
  --space-section: clamp(4.5rem, 11vw, 8rem);

  --header-h: 74px;
}

/* ---- Obsidian (canonical) ---- */
[data-theme="dark"] {
  --color-bg: #0a0a0f;
  --color-bg-elevated: #101018;
  --color-surface: rgba(18, 18, 28, 0.72);
  --color-text: #e9edf6;
  --color-muted: #8d97ad;
  --color-border: rgba(0, 240, 255, 0.1);
  --color-border-strong: rgba(0, 240, 255, 0.24);
  --border-rgb: 0, 240, 255;
  --surface-rgb: 16, 16, 24;

  --accent-rgb: var(--e-electric-rgb);
  --accent-violet: var(--e-electric);
  --accent-fuchsia: var(--e-cyan);
  --accent-rose: var(--e-violet);
  --accent-indigo: var(--e-indigo);
  --accent-deep: #05050a;

  --gradient-brand: linear-gradient(120deg, #00f0ff 0%, #22d3ee 40%, #a855f7 100%);
  --gradient-cta: linear-gradient(130deg, #05050a 0%, #0d1a2b 45%, #1a1040 100%);
  --gradient-soft: linear-gradient(180deg, rgba(16, 16, 24, 0.94) 0%, rgba(10, 10, 15, 0.98) 100%);
  --gradient-hero-mesh:
    radial-gradient(ellipse 70% 55% at 72% 18%, rgba(0, 240, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 55% 45% at 18% 78%, rgba(168, 85, 247, 0.14), transparent 55%),
    radial-gradient(ellipse 45% 40% at 92% 76%, rgba(34, 211, 238, 0.1), transparent 50%);

  --shadow-sm: 0 2px 14px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.58);
  --shadow-lg: 0 32px 90px rgba(0, 0, 0, 0.66);
  --shadow-card: 0 14px 44px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 26px 64px rgba(0, 240, 255, 0.14);

  --glow-sm: 0 0 14px rgba(0, 240, 255, 0.28);
  --glow-md: 0 0 26px rgba(0, 240, 255, 0.32), 0 0 60px rgba(168, 85, 247, 0.16);
  --glow-lg: 0 0 40px rgba(0, 240, 255, 0.38), 0 0 100px rgba(168, 85, 247, 0.2);

  --glass-bg: rgba(10, 10, 16, 0.62);
  --glass-border: rgba(0, 240, 255, 0.14);

  --grid-line: rgba(0, 240, 255, 0.045);

  color-scheme: dark;
}

/* ---- Light variant (opt-in) — soft, muted, professional -----------------
   The dark theme's neon is largely expressed as rgba(var(--e-*-rgb), a), so
   remapping those three channel tokens here re-tints ~100 rules to pastels in
   one move. Accent hexes, shadows and glows are softened alongside. Dark mode
   is untouched — none of these overrides apply outside [data-theme="light"]. */
[data-theme="light"] {
  /* Pastel remap of the electric constants (was cyan / teal / violet neon) */
  --e-electric: #5b8def;   /* soft blue */
  --e-cyan: #6c7aea;       /* muted indigo */
  --e-violet: #b39ddb;     /* light lavender */
  --e-electric-rgb: 91, 141, 239;
  --e-cyan-rgb: 108, 122, 234;
  --e-violet-rgb: 179, 157, 219;

  --color-bg: #f9fafb;
  --color-bg-elevated: #ffffff;
  --color-surface: rgba(255, 255, 255, 0.9);
  --color-text: #1e293b;
  --color-muted: #475569;
  --color-border: rgba(15, 23, 42, 0.08);
  --color-border-strong: rgba(15, 23, 42, 0.14);
  --border-rgb: 15, 23, 42;
  --surface-rgb: 255, 255, 255;

  --accent-rgb: 91, 141, 239;
  --accent-violet: #5b8def;
  --accent-fuchsia: #6c7aea;
  --accent-rose: #b39ddb;
  --accent-indigo: #6c7aea;
  --accent-deep: #1e293b;

  --gradient-brand: linear-gradient(120deg, #5b8def 0%, #6c7aea 55%, #b39ddb 100%);
  --gradient-cta: linear-gradient(130deg, #0a0a0f 0%, #0d1a2b 48%, #241348 100%);
  --gradient-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 243, 249, 0.7) 100%);
  --gradient-hero-mesh:
    radial-gradient(ellipse 70% 55% at 72% 18%, rgba(91, 141, 239, 0.1), transparent 60%),
    radial-gradient(ellipse 55% 45% at 18% 78%, rgba(179, 157, 219, 0.08), transparent 55%);

  /* Soft grey elevation instead of coloured glows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.1);
  --shadow-card: 0 4px 16px rgba(15, 23, 42, 0.06);
  --shadow-card-hover: 0 12px 32px rgba(15, 23, 42, 0.1);

  /* Glows dialed down ~60% in spread and opacity */
  --glow-sm: 0 0 8px rgba(91, 141, 239, 0.1);
  --glow-md: 0 0 12px rgba(91, 141, 239, 0.12);
  --glow-lg: 0 0 18px rgba(91, 141, 239, 0.14);

  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(15, 23, 42, 0.07);

  --grid-line: rgba(15, 23, 42, 0.03);

  color-scheme: light;
}

/* ---- Light-mode softening for hard-coded neon that bypasses the tokens ---- */
[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 60% 45% at 15% 0%, rgba(91, 141, 239, 0.05), transparent 60%),
    radial-gradient(ellipse 50% 40% at 88% 12%, rgba(179, 157, 219, 0.04), transparent 55%);
}

/* The logo glyph keeps a whisper of lift rather than a neon halo. */
[data-theme="light"] .logo__glyph {
  filter: drop-shadow(0 1px 3px rgba(15, 23, 42, 0.14));
}

[data-theme="light"] .logo:hover .logo__glyph {
  filter: drop-shadow(0 2px 6px rgba(91, 141, 239, 0.28));
}

/* Ambient hero streaks and canvas glows must not scream on white. */
[data-theme="light"] .hero__grid-lines::before,
[data-theme="light"] .hero__grid-lines::after {
  opacity: 0.4;
}

[data-theme="light"] .hero-orb {
  opacity: 0.7;
}

/* --- Light-mode exposure ---------------------------------------------------
   The photography below is deliberately dimmed and desaturated so it recedes
   behind the obsidian canvas. Reused as-is on white it just looks washed out
   and grey, so light mode re-exposes it: keep the images quiet, but stop
   darkening what already sits on a bright surface. */
[data-theme="light"] .about__photo {
  opacity: 0.58;
  filter: grayscale(0.2) brightness(1.02) contrast(1.02);
}

[data-theme="light"] .about__frame:hover .about__photo,
[data-theme="light"] .about__frame.is-energized .about__photo {
  opacity: 0.88;
  filter: grayscale(0) brightness(1.04) contrast(1.04);
}

[data-theme="light"] .portfolio-card__img {
  filter: grayscale(0.22) contrast(1.02) brightness(1);
}

[data-theme="light"] .portfolio-card:hover .portfolio-card__img {
  filter: grayscale(0) contrast(1.04) brightness(1.02);
}

[data-theme="light"] .blog-card__img {
  filter: grayscale(0.18) brightness(1);
}

[data-theme="light"] .services-cluster__photo {
  opacity: 0.13 !important;
  filter: grayscale(0.65) brightness(1.08) blur(3px) !important;
}

[data-theme="light"] .hero__bg-layer-img {
  opacity: 0.14;
  filter: grayscale(1) brightness(1.18) contrast(0.92);
}

/* Cluster tag chips carry per-cluster neon fills + light text tuned for the
   dark canvas; on white they need muted fills and readable dark text. */
[data-theme="light"] .services-cluster--growth {
  --cluster-tag-bg: rgba(91, 141, 239, 0.12);
  --cluster-tag-text: #2f5bb7;
}

[data-theme="light"] .services-cluster--brand {
  --cluster-tag-bg: rgba(179, 157, 219, 0.16);
  --cluster-tag-text: #6d4aa6;
}

[data-theme="light"] .services-cluster--tech {
  --cluster-tag-bg: rgba(108, 122, 234, 0.14);
  --cluster-tag-text: #3f47a8;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */

/* The canvas colour lives on <html> so the fixed ambient layers below can
   paint above it without being buried by the body background. */
html {
  background: var(--color-bg);
}

body {
  background: transparent;
  color: var(--color-text);
  letter-spacing: -0.011em;
  overflow-x: hidden;
}

/* Ambient obsidian field behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 15% 0%, rgba(0, 240, 255, 0.07), transparent 60%),
    radial-gradient(ellipse 50% 40% at 88% 12%, rgba(168, 85, 247, 0.06), transparent 55%);
}

/* Fine technical grid */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 78%);
}

::selection {
  background: rgba(var(--e-electric-rgb), 0.28);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY HIERARCHY
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
.section__title,
.hero__title,
.cta-band__title,
.contact-hero__title {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
  font-weight: 600;
}

.section__title {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  color: var(--color-text);
}

.eyebrow {
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--e-cyan);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.eyebrow::before {
  content: "";
  width: 1.4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--e-electric));
}

[data-theme="light"] .eyebrow {
  color: #0891b2;
}

.section__desc,
.hero__lead,
.hero__value {
  color: var(--color-muted);
  letter-spacing: -0.008em;
}

/* Electric gradient text utility */
.hero__title-accent,
.logo__accent {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --------------------------------------------------------------------------
   4. PRELOADER — logo drawing itself as an electric circuit
   -------------------------------------------------------------------------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: #06060b;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.preloader__circuit {
  width: clamp(120px, 26vw, 168px);
  height: auto;
  overflow: visible;
}

.preloader__trace {
  fill: none;
  stroke: var(--e-electric);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--trace-len, 400);
  stroke-dashoffset: var(--trace-len, 400);
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.9));
  animation: preloader-draw 1.5s var(--ease-electric) forwards;
}

.preloader__trace--2 {
  stroke: var(--e-violet);
  animation-delay: 0.22s;
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.85));
}

.preloader__node {
  fill: var(--e-electric);
  opacity: 0;
  animation: preloader-node 0.5s var(--ease-out) forwards;
  animation-delay: calc(0.9s + var(--node-i, 0) * 0.1s);
}

.preloader__bar {
  width: clamp(120px, 24vw, 168px);
  height: 2px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.preloader__bar span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--e-electric), var(--e-violet));
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.7);
  animation: preloader-bar 1.6s var(--ease-electric) forwards;
}

.preloader__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(233, 237, 246, 0.42);
}

@keyframes preloader-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes preloader-node {
  0% { opacity: 0; transform: scale(0.4); }
  60% { opacity: 1; transform: scale(1.35); }
  100% { opacity: 0.9; transform: scale(1); }
}

@keyframes preloader-bar {
  0% { transform: scaleX(0); }
  70% { transform: scaleX(0.82); }
  100% { transform: scaleX(1); }
}

/* Page reveal after preloader */
/* `backwards` rather than `both` on purpose: a *finished* animation still wins
   over inline styles, so `both` would permanently pin `transform: none` onto
   every direct child of <body> and freeze anything positioned by hover or by
   script. */
.page-reveal > * {
  animation: page-in 0.7s var(--ease-out) backwards;
}

@keyframes page-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   5. CURSOR
   The site uses the native platform cursor. The custom "electric dot" cursor
   was removed on request; the pointer-driven card effects (tilt, spotlight,
   glitch) are independent of it and remain in place.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   6. HEADER — glassmorphism + electric current nav
   -------------------------------------------------------------------------- */

.header {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: none;
  transition: background var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}

.header.is-scrolled,
.header--scrolled {
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  border-bottom-color: rgba(var(--e-electric-rgb), 0.2);
  box-shadow: 0 1px 0 rgba(var(--e-electric-rgb), 0.12), 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* Electric current running along the header base */
.header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--e-electric-rgb), 0.7) 22%,
    rgba(var(--e-violet-rgb), 0.6) 52%,
    transparent 88%
  );
  background-size: 220% 100%;
  opacity: 0.75;
  animation: header-current 7s linear infinite;
  pointer-events: none;
}

@keyframes header-current {
  from { background-position: 0% 0; }
  to { background-position: 220% 0; }
}

/* Logo electric glow */
.logo__mark {
  position: relative;
  border-radius: var(--radius-md);
}

.logo__glyph {
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.4));
  transition: filter var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}

.logo:hover .logo__glyph {
  filter: drop-shadow(0 0 14px rgba(0, 240, 255, 0.85))
    drop-shadow(0 0 26px rgba(168, 85, 247, 0.45));
  transform: scale(1.05);
}

.logo__text {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

/* Nav links — hover underline mimicking an electric current */
.nav__link {
  position: relative;
  color: var(--color-muted);
  font-weight: 500;
  letter-spacing: -0.008em;
  transition: color var(--duration-fast) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1rem;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--e-electric), var(--e-violet), var(--e-electric));
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.34s var(--ease-out);
  box-shadow: 0 0 8px rgba(var(--e-electric-rgb), 0.7);
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__link.is-active {
  color: var(--color-text);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is-active::after {
  transform: scaleX(1);
  animation: nav-current 1.6s linear infinite;
}

@keyframes nav-current {
  from { background-position: 0% 0; }
  to { background-position: 200% 0; }
}

/* CTA nav item — neon ring on hover */
.nav__link--cta {
  padding: 0.5rem 1.05rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--e-electric-rgb), 0.32);
  color: var(--color-text);
  background: rgba(var(--e-electric-rgb), 0.06);
  transition: box-shadow var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out);
}

.nav__link--cta::after {
  display: none;
}

.nav__link--cta:hover,
.nav__link--cta:focus-visible {
  border-color: rgba(var(--e-electric-rgb), 0.9);
  background: rgba(var(--e-electric-rgb), 0.12);
  box-shadow: 0 0 0 3px rgba(var(--e-electric-rgb), 0.14), var(--glow-sm);
}

/* Theme + lang controls */
.lang-switch,
.theme-toggle {
  border-color: var(--glass-border);
  background: rgba(var(--surface-rgb), 0.5);
}

.lang-switch__btn[aria-pressed="true"] {
  color: var(--e-electric);
  text-shadow: 0 0 12px rgba(var(--e-electric-rgb), 0.55);
}

/* --------------------------------------------------------------------------
   7. BUTTONS — magnetic + neon
   -------------------------------------------------------------------------- */

.btn {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--radius-pill);
  transition: transform var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out);
  will-change: transform;
}

.btn--primary {
  background: var(--gradient-brand);
  color: #04040a;
  border: none;
  box-shadow: 0 10px 34px rgba(var(--e-electric-rgb), 0.26);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  filter: none;
  box-shadow: 0 0 0 3px rgba(var(--e-electric-rgb), 0.18),
    0 16px 44px rgba(var(--e-electric-rgb), 0.34),
    0 0 60px rgba(var(--e-violet-rgb), 0.24);
}

.btn--ghost {
  border: 1px solid rgba(var(--e-electric-rgb), 0.28);
  color: var(--color-text);
  background: rgba(var(--e-electric-rgb), 0.04);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: rgba(var(--e-electric-rgb), 0.75);
  background: rgba(var(--e-electric-rgb), 0.1);
  box-shadow: var(--glow-sm);
}

.btn--light {
  background: var(--color-text);
  color: var(--color-bg);
}

.btn--light:hover {
  box-shadow: 0 0 0 3px rgba(var(--e-electric-rgb), 0.22), var(--glow-md);
}

.btn:focus-visible {
  outline: 2px solid var(--e-electric);
  outline-offset: 3px;
}

/* Magnetic wrapper applies translate via JS custom props */
.is-magnetic {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */

.hero {
  background: transparent;
  position: relative;
  isolation: isolate;
}

/* Replace photo backdrop with an engineered field */
.hero__bg-layer-img {
  opacity: 0.1;
  filter: grayscale(1) brightness(0.5) contrast(1.3);
}

.hero__bg-layer-veil {
  background:
    linear-gradient(180deg, rgba(10, 10, 15, 0.86) 0%, rgba(10, 10, 15, 0.97) 68%, var(--color-bg) 100%);
}

[data-theme="light"] .hero__bg-layer-veil {
  background: linear-gradient(180deg, rgba(244, 246, 251, 0.9) 0%, rgba(244, 246, 251, 0.98) 70%, var(--color-bg) 100%);
}

.hero__ambient {
  background: var(--gradient-hero-mesh);
}

.hero__orb--1 {
  background: radial-gradient(circle, rgba(var(--e-electric-rgb), 0.24), transparent 68%);
}

.hero__orb--2 {
  background: radial-gradient(circle, rgba(var(--e-violet-rgb), 0.2), transparent 68%);
}

/* Moving light streaks across the hero grid */
.hero__grid-lines {
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 76px 76px;
  position: relative;
  overflow: hidden;
}

.hero__grid-lines::before,
.hero__grid-lines::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero__grid-lines::before {
  top: 0;
  bottom: 0;
  width: 1px;
  left: 22%;
  background: linear-gradient(180deg, transparent, rgba(var(--e-electric-rgb), 0.85), transparent);
  animation: streak-v 6.5s var(--ease-electric) infinite;
}

.hero__grid-lines::after {
  left: 0;
  right: 0;
  height: 1px;
  top: 38%;
  background: linear-gradient(90deg, transparent, rgba(var(--e-violet-rgb), 0.7), transparent);
  animation: streak-h 8.5s var(--ease-electric) infinite;
  animation-delay: 1.6s;
}

@keyframes streak-v {
  0% { transform: translateY(-100%); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

@keyframes streak-h {
  0% { transform: translateX(-100%); opacity: 0; }
  15% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

.hero__badge {
  border: 1px solid rgba(var(--e-electric-rgb), 0.22);
  background: rgba(var(--e-electric-rgb), 0.06);
  color: var(--color-muted);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(10px);
}

.hero__badge-dot {
  background: var(--e-electric);
  box-shadow: 0 0 10px rgba(var(--e-electric-rgb), 0.9);
}

.hero__title {
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: 0.98;
  font-weight: 600;
}

.hero__value {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--color-text);
  font-weight: 500;
}

.hero__kicker,
.hero__lead {
  color: var(--color-muted);
}

/* Hero 3D canvas stage */
.hero__visual-stage {
  position: relative;
}

.hero-orb {
  position: absolute;
  inset: 0;
  /* Above the display's panel background, below the floating build cards. */
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
  contain: layout paint;
}

.hero-orb.is-live {
  opacity: 1;
}

/* Let the orb read through the existing build cards */
.hero__canvas-display {
  background: linear-gradient(160deg, rgba(12, 12, 20, 0.92), rgba(8, 8, 14, 0.96));
  border: 1px solid rgba(var(--e-electric-rgb), 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--shadow-lg);
}

[data-theme="light"] .hero__canvas-display {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(238, 243, 250, 0.98));
}

.hero__visual-img-wrap,
.hero__float {
  position: relative;
  z-index: 2;
}

.hero__float {
  background: rgba(12, 12, 20, 0.78);
  border: 1px solid rgba(var(--e-electric-rgb), 0.18);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .hero__float {
  background: rgba(255, 255, 255, 0.9);
}

.hero__float-chart-bar {
  background: linear-gradient(180deg, var(--e-electric), var(--e-violet));
  box-shadow: 0 0 10px rgba(var(--e-electric-rgb), 0.5);
}

.hero__trust-chip {
  border: 1px solid rgba(var(--e-electric-rgb), 0.18);
  background: rgba(var(--e-electric-rgb), 0.05);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  transition: border-color var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.hero__trust-chip:hover {
  border-color: rgba(var(--e-electric-rgb), 0.6);
  color: var(--color-text);
  box-shadow: var(--glow-sm);
}

.hero__trust-chip-icon {
  color: var(--e-electric);
}

.hero__stat strong {
  font-family: var(--font-display);
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   9. SECTION SURFACES
   -------------------------------------------------------------------------- */

.section--problem,
.section--services,
.section--about,
.section--why,
.section--portfolio,
.section--blog,
.section--contact {
  background: transparent;
}

.problem__panel,
.contact__card,
.blog-card,
.why-card,
.service-card,
.portfolio-card,
.contact-form-card,
.contact-side__card {
  background: linear-gradient(
    165deg,
    rgba(var(--surface-rgb), 0.72) 0%,
    rgba(var(--surface-rgb), 0.44) 100%
  );
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-card);
}

/* --------------------------------------------------------------------------
   10. SERVICES — dark glass cards, glow icons, neon border on hover
   -------------------------------------------------------------------------- */

.services-cluster {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: rgba(var(--surface-rgb), 0.34);
  backdrop-filter: blur(10px);
}

/* Neutralise the old pastel ambience so the electric identity reads clean */
.services-cluster__photo {
  opacity: 0.05 !important;
  filter: grayscale(1) brightness(0.5) blur(3px) !important;
}

.services-cluster--growth {
  --cluster-pastel: var(--e-electric-rgb);
  --cluster-pastel-2: var(--e-cyan-rgb);
  --cluster-accent: var(--e-electric);
  --cluster-tag-bg: rgba(0, 240, 255, 0.1);
  --cluster-tag-text: #7ce8f5;
}

.services-cluster--brand {
  --cluster-pastel: var(--e-violet-rgb);
  --cluster-pastel-2: 236, 72, 153;
  --cluster-accent: var(--e-violet);
  --cluster-tag-bg: rgba(168, 85, 247, 0.12);
  --cluster-tag-text: #d8b4fe;
}

.services-cluster--tech {
  --cluster-pastel: 99, 102, 241;
  --cluster-pastel-2: var(--e-cyan-rgb);
  --cluster-accent: var(--e-indigo);
  --cluster-tag-bg: rgba(99, 102, 241, 0.14);
  --cluster-tag-text: #c7d2fe;
}

.services-cluster__veil,
.services-cluster--growth .services-cluster__veil,
.services-cluster--brand .services-cluster__veil,
.services-cluster--tech .services-cluster__veil {
  background: linear-gradient(
    140deg,
    rgba(var(--cluster-pastel), 0.08) 0%,
    rgba(var(--cluster-pastel-2), 0.05) 45%,
    rgba(var(--surface-rgb), 0.55) 100%
  );
}

.services-cluster__glyph {
  font-family: var(--font-display);
  background: rgba(var(--cluster-pastel), 0.12);
  color: var(--cluster-accent);
  border: 1px solid rgba(var(--cluster-pastel), 0.3);
  box-shadow: 0 0 18px rgba(var(--cluster-pastel), 0.22);
}

.services-cluster__title {
  font-family: var(--font-display);
}

/* Card body */
.service-card,
.services-cluster--growth .service-card,
.services-cluster--brand .service-card,
.services-cluster--tech .service-card {
  background: linear-gradient(
    165deg,
    rgba(var(--surface-rgb), 0.78) 0%,
    rgba(var(--surface-rgb), 0.46) 100%
  );
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out);
}

/* Animated neon border trace */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    130deg,
    transparent 12%,
    rgba(var(--cluster-pastel), 0.85) 46%,
    rgba(var(--e-violet-rgb), 0.7) 60%,
    transparent 88%
  );
  background-size: 220% 220%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
  pointer-events: none;
  z-index: 3;
}

/* `.is-tilting` mirrors every :hover state below. The pointer can slip off a
   lifted card for a frame or two; service-fx.js holds that class through the
   slip so the glow does not strobe. */
.service-card:hover::before,
.service-card.is-tilting::before,
.service-card:focus-visible::before {
  opacity: 1;
  animation: border-trace 2.6s linear infinite;
}

@keyframes border-trace {
  0% { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}

/* Lift is expressed as a custom property so the 3D tilt in section 19 can
   compose with it instead of being overwritten by a competing transform. */
.service-card:hover,
.service-card.is-tilting,
.service-card:focus-visible {
  border-color: rgba(var(--cluster-pastel), 0.4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5),
    0 0 44px rgba(var(--cluster-pastel), 0.2);
}

.service-card::after {
  background: linear-gradient(90deg, var(--cluster-accent), rgba(var(--e-violet-rgb), 0.85));
  box-shadow: 0 0 14px rgba(var(--cluster-pastel), 0.6);
}

.service-card__icon {
  background: rgba(var(--cluster-pastel), 0.1);
  border: 1px solid rgba(var(--cluster-pastel), 0.26);
  color: var(--cluster-accent);
  border-radius: var(--radius-md);
  transition: box-shadow var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
}

.service-card:hover .service-card__icon,
.service-card.is-tilting .service-card__icon {
  box-shadow: 0 0 22px rgba(var(--cluster-pastel), 0.5),
    inset 0 0 14px rgba(var(--cluster-pastel), 0.14);
  transform: translateY(-2px) scale(1.05);
}

.service-card__title {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
}

.service-card__index {
  font-family: var(--font-display);
  color: rgba(var(--border-rgb), 0.22);
}

.service-card__tag {
  background: var(--cluster-tag-bg);
  color: var(--cluster-tag-text);
  border-radius: var(--radius-pill);
}

.service-card__media {
  border: 1px solid rgba(var(--cluster-pastel), 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  border-radius: var(--radius-md);
}

.service-card__arrow,
.service-card__more {
  color: var(--cluster-accent);
}

/* --------------------------------------------------------------------------
   11. PORTFOLIO — elite case study cards with electric reveal
   -------------------------------------------------------------------------- */

.portfolio-card {
  overflow: hidden;
  transition: transform var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out);
}

.portfolio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--trace-angle, 0deg),
    transparent 0deg,
    rgba(var(--e-electric-rgb), 0.9) 38deg,
    rgba(var(--e-violet-rgb), 0.75) 62deg,
    transparent 110deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
  pointer-events: none;
  z-index: 4;
}

.portfolio-card:hover::before,
.portfolio-card:focus-within::before {
  opacity: 1;
  animation: trace-spin 3s linear infinite;
}

@keyframes trace-spin {
  to { --trace-angle: 360deg; }
}

@property --trace-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.portfolio-card:hover,
.portfolio-card:focus-within {
  transform: translate3d(0, -8px, 0);
  border-color: rgba(var(--e-electric-rgb), 0.34);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), 0 0 50px rgba(var(--e-electric-rgb), 0.16);
}

.portfolio-card__media {
  overflow: hidden;
  border-radius: var(--radius-md);
  position: relative;
}

.portfolio-card__img {
  filter: grayscale(0.55) contrast(1.05) brightness(0.86);
  transition: filter var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.portfolio-card:hover .portfolio-card__img {
  filter: grayscale(0) contrast(1.08) brightness(1);
  transform: scale(1.05);
}

/* Scanline sweep on hover — technological reveal */
.portfolio-card__media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 30%;
  top: -35%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(var(--e-electric-rgb), 0.16) 45%,
    rgba(var(--e-electric-rgb), 0.5) 50%,
    rgba(var(--e-electric-rgb), 0.16) 55%,
    transparent
  );
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.portfolio-card:hover .portfolio-card__media::after {
  opacity: 1;
  animation: scanline 1.5s var(--ease-electric) infinite;
}

@keyframes scanline {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(460%); opacity: 0; }
}

/* The label sits on top of a photograph, so it carries its own contrast rather
   than borrowing it from the image. style.css fills the pill with a solid
   accent in dark mode; combined with an electric text colour the words became
   invisible, so both themes get the same legible dark-glass treatment. */
.portfolio-card__live,
[data-theme="dark"] .portfolio-card__live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(6, 10, 20, 0.82);
  border: 1px solid rgba(var(--e-electric-rgb), 0.55);
  color: #f4fbff;
  border-radius: var(--radius-pill);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35),
    0 0 16px rgba(var(--e-electric-rgb), 0.3);
}

/* A breathing dot reads as "this one is online right now". */
.portfolio-card__live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--e-electric);
  box-shadow: 0 0 8px 1px rgba(var(--e-electric-rgb), 0.9);
  animation: live-pulse 2s var(--ease-electric) infinite;
}

@keyframes live-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.82);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-card__live::before {
    animation: none;
  }
}

.portfolio-card__overlay {
  background: linear-gradient(0deg, rgba(5, 5, 10, 0.95) 8%, rgba(5, 5, 10, 0.7) 55%, transparent 100%);
  backdrop-filter: blur(2px);
}

.portfolio-card__result {
  color: #e9edf6;
}

.portfolio-card__tag {
  background: rgba(var(--e-electric-rgb), 0.14);
  border: 1px solid rgba(var(--e-electric-rgb), 0.3);
  color: var(--e-electric);
  border-radius: var(--radius-pill);
}

.portfolio-card__title {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
}

/* Metric block — the positive-proof element */
.portfolio-card__metric-value,
.portfolio-card__metric-num {
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.portfolio-card__metric-label {
  color: var(--color-muted);
  font-weight: 500;
}

.portfolio-card__metric-bar {
  background: rgba(var(--border-rgb), 0.1);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.portfolio-card__metric-fill {
  background: linear-gradient(90deg, var(--e-electric), var(--e-violet));
  box-shadow: 0 0 12px rgba(var(--e-electric-rgb), 0.55);
}

/* --------------------------------------------------------------------------
   12. PROCESS TIMELINE — glow dots + animated connection line
   -------------------------------------------------------------------------- */

.process-timeline__line {
  background: rgba(var(--border-rgb), 0.12);
}

.process-timeline__line--fill {
  background: linear-gradient(180deg, var(--e-electric), var(--e-violet));
  box-shadow: 0 0 16px rgba(var(--e-electric-rgb), 0.5);
}

/* The marker is only the rail-aligned wrapper — it must stay invisible.
   (It previously carried a background + border, which painted a hard square
   box behind each round step number.) The electric treatment belongs on the
   circle itself, .process-timeline__num. */
.process-timeline__marker {
  background: none;
  border: 0;
  box-shadow: none;
}

.process-timeline__num {
  font-family: var(--font-display);
}

/* Idle steps: a soft ring instead of a flat outline. */
.process-timeline__step .process-timeline__num {
  border-color: rgba(var(--border-rgb), 0.28);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* Completed steps read as "done" — filled, calm, no pulse. */
.process-timeline__step.is-complete .process-timeline__num {
  box-shadow: 0 0 0 3px rgba(var(--e-electric-rgb), 0.12),
    0 0 14px rgba(var(--e-electric-rgb), 0.28);
}

/* The current step breathes: the halo expands and fades outward. */
.process-timeline__step.is-active .process-timeline__num {
  animation: marker-pulse 2.4s var(--ease-electric) infinite;
}

@keyframes marker-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(var(--e-electric-rgb), 0.18),
      0 0 22px rgba(var(--e-electric-rgb), 0.45),
      0 0 36px rgba(var(--e-violet-rgb), 0.22);
  }
  50% {
    box-shadow: 0 0 0 11px rgba(var(--e-electric-rgb), 0.05),
      0 0 30px rgba(var(--e-electric-rgb), 0.6),
      0 0 48px rgba(var(--e-violet-rgb), 0.32);
  }
}

.why-card__icon {
  background: rgba(var(--e-electric-rgb), 0.08);
  border: 1px solid rgba(var(--e-electric-rgb), 0.22);
  color: var(--e-electric);
  border-radius: var(--radius-md);
  transition: box-shadow var(--duration) var(--ease-out);
}

.why-card:hover .why-card__icon {
  box-shadow: 0 0 22px rgba(var(--e-electric-rgb), 0.42);
}

.why-card__title {
  font-family: var(--font-display);
}

.process-timeline__step .why-card {
  transition: transform var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.process-timeline__step.is-active .why-card {
  border-color: rgba(var(--e-electric-rgb), 0.3);
  box-shadow: var(--shadow-card), 0 0 40px rgba(var(--e-electric-rgb), 0.1);
}

/* --------------------------------------------------------------------------
   13. ABOUT — particle network canvas
   -------------------------------------------------------------------------- */

.about__frame {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgba(12, 12, 20, 0.9), rgba(8, 8, 14, 0.96));
  box-shadow: var(--shadow-lg);
}

[data-theme="light"] .about__frame {
  background: linear-gradient(160deg, #ffffff, #eef3fa);
}

.about__layer--1 {
  background: var(--gradient-hero-mesh);
  opacity: 0.85;
}

.about-network {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
  contain: layout paint;
}

.about-network.is-live {
  opacity: 1;
}

.about__photo {
  opacity: 0.34;
  filter: grayscale(0.5) brightness(0.9) contrast(1.05);
  transition: opacity var(--duration-slow) var(--ease-out),
    filter var(--duration-slow) var(--ease-out);
}

.about__frame:hover .about__photo,
.about__frame.is-energized .about__photo {
  opacity: 0.75;
  filter: grayscale(0) brightness(1.05) contrast(1.06);
}

.about__pillar-title {
  font-family: var(--font-display);
}

.about__check {
  color: var(--e-electric);
  text-shadow: 0 0 10px rgba(var(--e-electric-rgb), 0.6);
}

/* Animated stat counters */
.about-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
}

.about-stat {
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(var(--surface-rgb), 0.4);
  backdrop-filter: blur(10px);
  transition: border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}

.about-stat:hover {
  transform: translate3d(0, -4px, 0);
  border-color: rgba(var(--e-electric-rgb), 0.34);
  box-shadow: 0 0 34px rgba(var(--e-electric-rgb), 0.12);
}

.about-stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-stat__label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   14. BLOG + CTA BAND
   -------------------------------------------------------------------------- */

.blog-card {
  overflow: hidden;
  transition: transform var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.blog-card:hover {
  transform: translate3d(0, -6px, 0);
  border-color: rgba(var(--e-electric-rgb), 0.3);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.5), 0 0 40px rgba(var(--e-electric-rgb), 0.1);
}

.blog-card__img {
  filter: grayscale(0.5) brightness(0.85);
  transition: filter var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.blog-card:hover .blog-card__img {
  filter: grayscale(0) brightness(1);
  transform: scale(1.04);
}

.blog-card__title {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
}

.blog-card__link {
  color: var(--e-electric);
}

.cta-band {
  background: var(--gradient-cta);
  border-block: 1px solid rgba(var(--e-electric-rgb), 0.16);
  position: relative;
  overflow: hidden;
}

.cta-band__glow {
  background:
    radial-gradient(ellipse 60% 70% at 20% 30%, rgba(var(--e-electric-rgb), 0.18), transparent 60%),
    radial-gradient(ellipse 50% 60% at 82% 70%, rgba(var(--e-violet-rgb), 0.16), transparent 58%);
}

.cta-band__title {
  color: #f4f7ff;
}

.cta-band__lead,
.cta-band__trust,
.cta-band__micro {
  color: rgba(226, 232, 240, 0.74);
}

/* --------------------------------------------------------------------------
   15. CONTACT — glowing inputs, pulsing submit, scarcity indicator
   -------------------------------------------------------------------------- */

.contact__card,
.contact-side__card {
  transition: transform var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.contact__card:hover,
.contact-side__card:hover {
  transform: translate3d(0, -5px, 0);
  border-color: rgba(var(--e-electric-rgb), 0.3);
  box-shadow: 0 0 40px rgba(var(--e-electric-rgb), 0.12);
}

.contact__card-icon {
  background: rgba(var(--e-electric-rgb), 0.09);
  border: 1px solid rgba(var(--e-electric-rgb), 0.24);
  color: var(--e-electric);
  border-radius: var(--radius-md);
}

.contact__card-title,
.contact-form-card__title {
  font-family: var(--font-display);
}

.contact__card-cta {
  color: var(--e-electric);
}

/* Mesh gradient behind the contact form */
.contact-page .contact-form-card {
  position: relative;
  isolation: isolate;
}

.contact-page .contact-form-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 60% 50% at 12% 8%, rgba(var(--e-electric-rgb), 0.12), transparent 60%),
    radial-gradient(ellipse 50% 45% at 88% 90%, rgba(var(--e-violet-rgb), 0.12), transparent 58%);
  pointer-events: none;
}

.contact-form input,
.contact-form textarea {
  background: rgba(var(--surface-rgb), 0.5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(var(--border-rgb), 0.38);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: rgba(var(--e-electric-rgb), 0.7);
  background: rgba(var(--surface-rgb), 0.72);
  box-shadow: 0 0 0 3px rgba(var(--e-electric-rgb), 0.12),
    0 0 24px rgba(var(--e-electric-rgb), 0.22);
}

.contact-form label {
  font-weight: 500;
  letter-spacing: 0.01em;
}

.contact-form__submit {
  position: relative;
  overflow: visible;
}

.contact-form__submit::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--e-electric-rgb), 0.5);
  opacity: 0;
  pointer-events: none;
  animation: submit-pulse 2.4s var(--ease-electric) infinite;
}

@keyframes submit-pulse {
  0% { opacity: 0.7; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.12); }
}

.contact-form__status.is-success {
  color: #4ade80;
}

.contact-form__status.is-error {
  color: #fb7185;
}

/* Scarcity indicator */
.scarcity {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: var(--space-md) 0 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgba(var(--e-violet-rgb), 0.28);
  border-radius: var(--radius-pill);
  background: rgba(var(--e-violet-rgb), 0.07);
  font-size: 0.82rem;
  color: var(--color-muted);
}

.scarcity__pip {
  position: relative;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.85);
}

.scarcity__pip::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(74, 222, 128, 0.6);
  animation: pip-ping 2s var(--ease-electric) infinite;
}

@keyframes pip-ping {
  0% { opacity: 0.8; transform: scale(0.75); }
  80%, 100% { opacity: 0; transform: scale(1.6); }
}

.scarcity__count {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--e-electric);
}

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */

.footer {
  background: linear-gradient(180deg, transparent, rgba(5, 5, 10, 0.6));
  border-top: 1px solid var(--color-border);
}

[data-theme="light"] .footer {
  background: linear-gradient(180deg, transparent, rgba(226, 232, 240, 0.5));
}

.footer__heading {
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

.footer__list a,
.footer__legal a {
  color: var(--color-muted);
  transition: color var(--duration-fast) var(--ease-out);
}

.footer__list a:hover,
.footer__legal a:hover {
  color: var(--e-electric);
}

.social-link {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  transition: color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.social-link:hover {
  color: var(--e-electric);
  border-color: rgba(var(--e-electric-rgb), 0.5);
  box-shadow: var(--glow-sm);
}

/* --------------------------------------------------------------------------
   17. SCROLL REVEAL — staggered fade + slide
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.72s var(--ease-out), transform 0.72s var(--ease-out);
  transition-delay: calc(var(--stagger, 0) * 90ms);
  will-change: transform, opacity;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Drop will-change once settled to free the compositor */
.reveal.is-settled {
  will-change: auto;
}

/* --------------------------------------------------------------------------
   18. ACCESSIBILITY & MOTION PREFERENCES
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--e-electric);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link:focus {
  background: var(--e-electric);
  color: #04040a;
  box-shadow: var(--glow-md);
}

@media (prefers-reduced-motion: reduce) {
  .preloader {
    display: none;
  }

  .hero__grid-lines::before,
  .hero__grid-lines::after,
  .header::after,
  .contact-form__submit::after,
  .scarcity__pip::after,
  .portfolio-card:hover .portfolio-card__media::after,
  .service-card:hover::before,
  .portfolio-card:hover::before {
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-orb,
  .about-network {
    opacity: 0.5;
  }
}

/* --------------------------------------------------------------------------
   19. SERVICE CARD 3D INTERACTION
   Tilt, cursor-tracked spotlight, orbiting icon energy, glitch text reveal.
   -------------------------------------------------------------------------- */

/* Registering the lift lets it ease on its own while the pointer drives the
   rotation frame by frame — otherwise the hover lift snapped the card upward
   the instant the transform transition was suspended for tilting. */
@property --lift {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

/* Each card owns its perspective. A shared `perspective` on the grid put the
   vanishing point at the row's centre, so the outer cards were viewed far
   off-axis: the same 8deg rotation threw their surface sideways, slid it out
   from under the cursor and started an enter/leave loop that read as a jump.
   A per-card perspective makes every card rotate about its own centre. */
.service-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  --mouse-x: 50%;
  --mouse-y: 50%;
  transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
    translate3d(0, var(--lift), 0);
  transition: transform var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out);
}

/* `.reveal.is-visible { transform: none }` carries two classes, so it outranks
   the single-class rule above: the moment the pointer left a card, its whole
   transform was discarded and the card snapped down by the full lift. Matching
   that specificity keeps the composed transform authoritative at rest. */
.service-card.is-visible {
  transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
    translate3d(0, var(--lift), 0);
}

/* While the pointer drives the tilt the transform must not lag, but the lift
   still eases through its own registered property. */
.service-card.is-tilting {
  transition: --lift 260ms var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out);
  will-change: transform;
}

/* The same hold for the hover states declared in style.css. */
.service-card.is-tilting .service-card__media img {
  transform: scale(1.05);
}

.service-card.is-tilting::after {
  opacity: 1;
  transform: scaleX(1);
}

.service-card.is-tilting .service-card__shine,
.service-card.is-tilting .service-card__more,
.service-card.is-tilting .service-card__arrow {
  opacity: 1;
}

.service-card.is-tilting .service-card__arrow {
  transform: translateX(0);
}

/* style.css sets `transform: translateY(-6px)` on .service-card:hover, which
   outranks the base rule above. Restating the composed transform at the same
   specificity (from a later sheet) keeps the tilt and the lift together. */
.service-card:hover,
.service-card.is-tilting,
.service-card:focus-visible,
.service-card:focus-within {
  --lift: -6px;
  transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
    translate3d(0, var(--lift), 0);
}

/* Cursor-tracked spotlight */
.service-card__spot {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
  background: radial-gradient(
    circle 260px at var(--mouse-x) var(--mouse-y),
    rgba(var(--cluster-pastel, var(--e-electric-rgb)), 0.18),
    rgba(var(--e-violet-rgb), 0.08) 40%,
    transparent 68%
  );
}

.service-card:hover .service-card__spot,
.service-card.is-tilting .service-card__spot,
.service-card:focus-visible .service-card__spot,
.service-card:focus-within .service-card__spot {
  opacity: 1;
}

/* Touch devices get a fixed centred glow instead of a tracked one. */
@media (pointer: coarse), (hover: none) {
  .service-card__spot {
    opacity: 0.55;
    background: radial-gradient(
      circle 200px at 50% 0%,
      rgba(var(--cluster-pastel, var(--e-electric-rgb)), 0.14),
      transparent 70%
    );
  }

  .service-card,
  .service-card.is-visible,
  .service-card.is-tilting,
  .service-card:hover,
  .service-card:focus-visible,
  .service-card:focus-within {
    transform: none;
  }
}

/* Icon energy: a rotating arc plus two orbiting luminous dots */
.service-card__icon-wrap {
  position: relative;
}

.service-card__orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.4rem;
  height: 3.4rem;
  margin: -1.7rem 0 0 -1.7rem;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}

.service-card:hover .service-card__orbit,
.service-card.is-tilting .service-card__orbit,
.service-card:focus-within .service-card__orbit {
  opacity: 1;
}

/* The arc itself — a masked conic sweep reads as a travelling current. */
.service-card__orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(var(--e-electric-rgb), 0.9) 40deg,
    rgba(var(--e-violet-rgb), 0.7) 66deg,
    transparent 120deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  /* Defined but paused: no repaint cost until the card is hovered/focused. */
  animation: orbit-spin 2.8s linear infinite;
  animation-play-state: paused;
}

.service-card__orbit-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: var(--e-electric);
  box-shadow: 0 0 8px 1px rgba(var(--e-electric-rgb), 0.9);
  animation: orbit-travel 3.6s linear infinite;
  animation-play-state: paused;
}

.service-card__orbit-dot--2 {
  background: var(--e-violet);
  box-shadow: 0 0 8px 1px rgba(var(--e-violet-rgb), 0.9);
  animation-duration: 4.8s;
  animation-direction: reverse;
  animation-delay: -1.2s;
}

/* Run the icon energy only while the card is engaged. */
.service-card:hover .service-card__orbit::before,
.service-card.is-tilting .service-card__orbit::before,
.service-card:focus-within .service-card__orbit::before,
.service-card:hover .service-card__orbit-dot,
.service-card.is-tilting .service-card__orbit-dot,
.service-card:focus-within .service-card__orbit-dot {
  animation-play-state: running;
}

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes orbit-travel {
  from { transform: rotate(0deg) translateX(1.7rem); }
  to { transform: rotate(360deg) translateX(1.7rem); }
}

/* Glitch reveal on the description */
.service-card__text {
  position: relative;
}

.service-card__text.is-glitching {
  color: var(--e-cyan);
  text-shadow: 0.5px 0 rgba(var(--e-violet-rgb), 0.7), -0.5px 0 rgba(var(--e-electric-rgb), 0.7);
  animation: glitch-shift 0.14s steps(2, end) infinite;
}

@keyframes glitch-shift {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-0.6px, 0.4px, 0); }
  100% { transform: translate3d(0.6px, -0.4px, 0); }
}

/* Keyboard parity: focus gets the same treatment as hover. */
.service-card:focus-visible {
  outline: 2px solid var(--e-electric);
  outline-offset: 3px;
  border-color: rgba(var(--e-electric-rgb), 0.5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 44px rgba(var(--e-electric-rgb), 0.22);
}

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

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card.is-visible,
  .service-card.is-tilting,
  .service-card:hover,
  .service-card:focus-visible,
  .service-card:focus-within {
    transform: none;
  }

  .service-card__orbit::before,
  .service-card__orbit-dot,
  .service-card__text.is-glitching {
    animation: none;
  }

  .service-card__text.is-glitching {
    color: inherit;
    text-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   20. PROBLEM -> SOLUTION
   The two panels tell a before/after story, so they are deliberately unequal:
   the pain column stays dim and neutral while the solution column is the only
   lit surface in the section, with a current running between them.
   -------------------------------------------------------------------------- */

.problem-grid {
  position: relative;
}

.problem__panel {
  position: relative;
}

.problem__panel--pain {
  background: linear-gradient(
    165deg,
    rgba(var(--surface-rgb), 0.55) 0%,
    rgba(var(--surface-rgb), 0.3) 100%
  );
}

/* Each pain point becomes its own dim slab rather than a bullet in a list. */
.problem__list {
  list-style: none;
  padding-left: 0;
  gap: 0.5rem;
}

.problem__list li {
  position: relative;
  padding: 0.72rem 0.95rem 0.72rem 2.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(var(--surface-rgb), 0.42);
  transition: border-color var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
}

.problem__list li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.15rem;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  transform: rotate(45deg);
  background: rgba(var(--border-rgb), 0.6);
  transition: background var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}

/* Touching a pain point lights it — the same electricity used for solutions. */
.problem__list li:hover {
  border-color: rgba(var(--e-electric-rgb), 0.32);
  background: rgba(var(--surface-rgb), 0.66);
  transform: translateX(3px);
}

.problem__list li:hover::before {
  background: var(--e-electric);
  box-shadow: 0 0 10px rgba(var(--e-electric-rgb), 0.7);
}

.problem__panel--solution {
  overflow: hidden;
  border-color: rgba(var(--e-electric-rgb), 0.3);
  background: radial-gradient(
      120% 100% at 100% 0%,
      rgba(var(--e-electric-rgb), 0.09),
      transparent 62%
    ),
    linear-gradient(
      165deg,
      rgba(var(--surface-rgb), 0.86) 0%,
      rgba(var(--surface-rgb), 0.5) 100%
    );
  box-shadow: var(--shadow-card), 0 0 38px rgba(var(--e-electric-rgb), 0.08);
}

/* A current travels along the top edge — the section's only moving light. */
.problem__panel--solution::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--e-electric-rgb), 0.9) 38%,
    rgba(var(--e-violet-rgb), 0.9) 62%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: problem-current 5s linear infinite;
}

@keyframes problem-current {
  from {
    background-position: -60% 0;
  }
  to {
    background-position: 160% 0;
  }
}

.problem__solution-title {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
}

/* The spark that carries the eye from the problem column to the answer. */
.problem__flow {
  display: none;
}

@media (min-width: 960px) {
  .problem__flow {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--space-lg);
    height: 2px;
    transform: translate(-50%, -50%);
    background: linear-gradient(
      90deg,
      rgba(var(--border-rgb), 0.4),
      rgba(var(--e-electric-rgb), 0.55)
    );
  }

  .problem__flow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--e-electric);
    box-shadow: 0 0 10px 2px rgba(var(--e-electric-rgb), 0.75);
    animation: problem-spark 3s var(--ease-electric) infinite;
  }
}

@keyframes problem-spark {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  20%,
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(var(--space-lg) - 6px));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .problem__panel--solution::before,
  .problem__flow::after {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   21. HEADER / LOGO RESPONSIVE LOCKUP
   The full "Ern Web Studio" wordmark is shown at every width. It never
   collides with the nav because the inline nav only appears at >=1150px,
   where measurement shows there is genuine room for all three header groups
   (logo 215 + links 621 + controls 149 + gaps = ~1017px of inner width).
   Below that the drawer takes over and the bar has space to spare.
   -------------------------------------------------------------------------- */

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.4rem, 1.5vw, 1rem);
}

.logo {
  flex: 0 1 auto;
  min-width: 0;
}

/* Hard guarantee: the wordmark is clipped inside its own box rather than
   painted over whatever sits next to it. Previously this was
   `overflow: visible`, which is what let "Ern Web Studio" bleed across the
   first nav link on narrow desktops. */
.logo__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Drawer range: plenty of room, so restore any word style.css trims away. */
@media (max-width: 1149px) {
  .logo {
    max-width: none;
    gap: 0.45rem;
  }

  .logo__word-web,
  .logo__accent {
    display: inline;
  }

  .header__end {
    flex: 0 0 auto;
  }
}

@media (max-width: 767px) {
  .header .logo {
    gap: 0.4rem;
    font-size: clamp(0.8rem, 3.2vw, 1rem);
  }
}

/* From tablet up the drawer stops being a full-bleed sheet and becomes a
   right-anchored panel — a full-width list of six links reads as empty on a
   1100px screen. It keeps the same slide-from-right motion. */
@media (min-width: 600px) and (max-width: 1149px) {
  .nav {
    left: auto;
    right: 0;
    width: min(23rem, 78vw);
    border-left: 1px solid var(--color-border);
    padding: 1.35rem 1.25rem 2rem;
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
  }

  .nav__list {
    gap: 0.45rem;
  }
}

/* Very narrow phones: instead of trimming the name, stack it onto two lines
   ("Ern" / "Web Studio") so the brand still reads in full beside the
   hamburger. `nowrap` on the accent keeps it at exactly two lines. */
@media (max-width: 399px) {
  .header .logo {
    font-size: 0.78rem;
    gap: 0.4rem;
  }

  .header .logo__text {
    white-space: normal;
    line-height: 1.12;
  }

  .header .logo__accent {
    display: block;
    white-space: nowrap;
  }
}

/* 320px class devices: buy the second line room by easing the mark and type
   down a notch rather than dropping a word. */
@media (max-width: 359px) {
  .header .logo {
    font-size: 0.68rem;
    gap: 0.35rem;
  }

  .header .logo__glyph {
    max-height: 28px;
    height: 1.5em;
  }
}

/* --------------------------------------------------------------------------
   22. RESPONSIVE REFINEMENT
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body::after {
    background-size: 44px 44px;
  }

  .hero__title {
    font-size: clamp(2.1rem, 9vw, 3rem);
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1240px;
  }
}

/* <picture> wrappers (WebP + fallback) must not affect layout — display:
   contents makes the wrapper transparent so the inner <img> behaves exactly
   as it did before wrapping, preserving every existing image style. */
picture {
  display: contents;
}

/* Off-screen animation gate: premium.js toggles .is-anim-paused on blocks
   that leave the viewport. Reveal transitions are unaffected (transition,
   not animation), so content still animates in when scrolled to. */
.is-anim-paused,
.is-anim-paused *,
.is-anim-paused *::before,
.is-anim-paused *::after {
  animation-play-state: paused !important;
}

/* --------------------------------------------------------------------------
   22. PERFORMANCE — backdrop-filter budget
   backdrop-filter is one of the most expensive paint operations, and the
   design had ~30 blurred glass layers. Keep it only on the sticky navbar
   (header + its mobile menu), where the blur is genuinely needed to read
   over scrolling content. Everything else falls back to its existing
   semi-opaque background, which stays legible without the per-frame blur.
   -------------------------------------------------------------------------- */
:not(.header):not(.nav):not(.nav-backdrop) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Cards used translucent fills that leaned on the blur for legibility; make
   them a touch more opaque now that the blur is gone. */
.services-cluster,
.contact__card {
  background-color: rgba(var(--surface-rgb), 0.9);
}

[data-theme="dark"] .services-cluster,
[data-theme="dark"] .contact__card {
  background-color: rgba(var(--surface-rgb), 0.6);
}