/* ============================================================
   c6n.eu — Hero stylesheet
   Design tokens · Typography · Layout · Animations · Responsive
   ============================================================ */

/* ---------- Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  line-height: 1.5;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

/* ---------- Design Tokens ---------- */
:root {
  /* Base — Premium Dark */
  --bg-primary:   #0a0a0b;
  --bg-secondary: #111113;
  --bg-elevated:  #1a1a1e;

  /* Text */
  --text-primary:   #fafafa;
  --text-secondary: #a0a0a8;
  --text-muted:     #636370;

  /* Accent — brand gradient */
  --accent-start: #7c3aed;
  --accent-mid:   #6366f1;
  --accent-end:   #06b6d4;
  --accent-gradient: linear-gradient(120deg, #7c3aed 0%, #6366f1 45%, #06b6d4 100%);
  --accent-gradient-soft: linear-gradient(120deg, rgba(124,58,237,.18), rgba(99,102,241,.12), rgba(6,182,212,.18));

  /* Glow */
  --glow-purple: rgba(124, 58, 237, 0.3);
  --glow-cyan:   rgba(6, 182, 212, 0.2);

  /* Borders & surfaces */
  --border-subtle: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --surface-glass: rgba(255,255,255,0.04);
  --surface-glass-hover: rgba(255,255,255,0.07);

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.2, 1);

  /* Container */
  --content-max: 1280px;
  --gutter: clamp(20px, 5vw, 56px);
}

/* ---------- Background layers ---------- */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center center;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%);
  pointer-events: none;
}

.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(124, 58, 237, 0.22), transparent 65%),
    radial-gradient(ellipse 70% 40% at 80% 70%, rgba(6, 182, 212, 0.12), transparent 70%),
    radial-gradient(ellipse 50% 40% at 15% 80%, rgba(99, 102, 241, 0.10), transparent 70%);
  animation: glow-drift 18s ease-in-out infinite alternate;
}

@keyframes glow-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.95; }
  100% { transform: translate3d(2%, -1%, 0) scale(1.05); opacity: 1; }
}

.bg-particles {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
/* Spatial mask: on wide screens, particles only render around the constellation zone
   (right side). The headline territory on the left stays pristine for legibility,
   while the constellation keeps its full dramatic impact. Physics keep running everywhere;
   only visual rendering is masked. */
@media (min-width: 1024px) {
  .bg-particles {
    -webkit-mask-image: radial-gradient(
      ellipse 42% 70% at 78% 52%,
      #000 40%,
      rgba(0,0,0,0.5) 68%,
      transparent 95%
    );
            mask-image: radial-gradient(
      ellipse 42% 70% at 78% 52%,
      #000 40%,
      rgba(0,0,0,0.5) 68%,
      transparent 95%
    );
  }
}
/* Mobile / tablet: vertical mask. Headline area (upper viewport) stays particle-free,
   constellation territory (lower viewport) renders at full opacity.
   Canvas is position:fixed → as the user scrolls and text shifts up, the masked
   transition zone aligns with empty space, revealing the constellation more naturally. */
@media (max-width: 1023px) {
  .bg-particles {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 42%,
      rgba(0,0,0,0.35) 55%,
      rgba(0,0,0,0.8) 68%,
      #000 78%
    );
            mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 42%,
      rgba(0,0,0,0.35) 55%,
      rgba(0,0,0,0.8) 68%,
      #000 78%
    );
  }
}

.bg-grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: linear-gradient(180deg, rgba(10,10,11,0.6) 0%, rgba(10,10,11,0.2) 100%);
  border-bottom: 1px solid var(--border-subtle);
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  transition: opacity .2s var(--ease-out);
}
.nav__logo:hover { opacity: 0.8; }
.nav__logo img { height: 44px; width: auto; }
@media (max-width: 640px) {
  .nav__logo img { height: 36px; }
}

.nav__menu {
  display: flex;
  gap: 28px;
  font-size: 14px;
  color: var(--text-secondary);
}
.nav__menu a {
  position: relative;
  padding: 6px 2px;
  transition: color .2s var(--ease-out);
}
.nav__menu a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.nav__menu a:hover { color: var(--text-primary); }
.nav__menu a:hover::after { transform: scaleX(1); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--r-pill);
  background: var(--surface-glass);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.nav__cta:hover {
  background: var(--surface-glass-hover);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-1px);
}
.nav__cta svg { transition: transform .25s var(--ease-out); }
.nav__cta:hover svg { transform: translateX(3px); }

@media (max-width: 720px) {
  .nav__menu { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 10;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(120px, 18vh, 180px) var(--gutter) clamp(80px, 12vh, 140px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

/* Eyebrow */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  background: var(--surface-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.hero__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.7);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}

/* Title */
.hero__title {
  font-weight: 900;
  font-size: clamp(2.2rem, 4.7vw, 4.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
}
@media (min-width: 1024px) {
  /* Left column hosts text; constellation gets the right ~40% with breathing room. */
  .hero__title    { max-width: min(820px, 55vw); }
  .hero__eyebrow,
  .hero__sub,
  .hero__tags,
  .hero__ctas     { max-width: min(560px, 48vw); }
}
.hero__title .line {
  display: block;
  overflow: hidden;
}
.hero__title .line--accent {
  position: relative;
}
.shimmer {
  background: linear-gradient(
    100deg,
    #7c3aed 0%,
    #6366f1 25%,
    #06b6d4 50%,
    #6366f1 75%,
    #7c3aed 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 6s linear infinite;
  display: inline-block;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Subhead */
.hero__sub {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 58ch;
  margin: 0 0 32px;
}
.hero__sub strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Tags — "última generación" pill system */
.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 48px;
}
.hero__tags li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 14px;
  border-radius: var(--r-pill);
  background: var(--surface-glass);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  cursor: default;
  isolation: isolate;
  transition: transform .3s var(--ease-out), background .25s var(--ease-out), box-shadow .35s var(--ease-out);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 1px 0 rgba(0,0,0,0.2);
}
/* Animated gradient border via mask trick — appears on hover */
.hero__tags li::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.02));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  transition: background .35s var(--ease-out), opacity .35s var(--ease-out);
  pointer-events: none;
}
.hero__tags li:hover {
  transform: translateY(-2px);
  background: var(--surface-glass-hover);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 28px -10px var(--glow-purple),
    0 4px 12px -4px rgba(6,182,212,0.18);
}
.hero__tags li:hover::before {
  background: var(--accent-gradient);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.dot--pink   { background: #f0abfc; box-shadow: 0 0 10px rgba(240,171,252,0.7); }
.dot--purple { background: #a78bfa; box-shadow: 0 0 10px rgba(167,139,250,0.7); }
.dot--indigo { background: #818cf8; box-shadow: 0 0 10px rgba(129,140,248,0.7); }
.dot--cyan   { background: #22d3ee; box-shadow: 0 0 10px rgba(34,211,238,0.7); }

/* CTAs */
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 56px;
}
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform .2s var(--ease-out), box-shadow .3s var(--ease-out);
  white-space: nowrap;
  isolation: isolate;
}
.btn svg { transition: transform .25s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

.btn--primary {
  color: #fff;
  background: var(--accent-gradient);
  background-size: 200% 100%;
  box-shadow:
    0 8px 24px -6px rgba(124, 58, 237, 0.5),
    0 2px 6px -2px rgba(6, 182, 212, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.18);
  animation: btn-gradient 8s linear infinite;
}
@keyframes btn-gradient {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 36px -8px rgba(124, 58, 237, 0.7),
    0 4px 10px -2px rgba(6, 182, 212, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

.btn--ghost {
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--ghost::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--accent-gradient);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s var(--ease-out);
  z-index: -1;
}
.btn--ghost:hover {
  transform: translateY(-2px);
  background: var(--surface-glass);
}
.btn--ghost:hover::before { opacity: 1; }


/* Scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  transition: opacity .3s var(--ease-out);
}
.hero__scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, var(--text-muted));
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to bottom, transparent, #fff);
  animation: scroll-drop 1.8s ease-in-out infinite;
}
@keyframes scroll-drop {
  0%   { top: -50%; opacity: 0; }
  40%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
body.scrolled .hero__scroll { opacity: 0; pointer-events: none; }

/* ---------- Reveal animations ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero__title .line {
  opacity: 0;
  transform: translateY(110%);
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
}
.hero__title .line.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.hero__title .line:nth-child(1).is-visible { transition-delay: .05s; }
.hero__title .line:nth-child(2).is-visible { transition-delay: .15s; }
.hero__title .line:nth-child(3).is-visible { transition-delay: .25s; }

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: opacity .55s var(--ease-out), transform .65s var(--ease-out);
}
[data-reveal-stagger].is-visible > *:nth-child(1) { opacity: 1; transform: translateY(0) scale(1); transition-delay: .35s; }
[data-reveal-stagger].is-visible > *:nth-child(2) { opacity: 1; transform: translateY(0) scale(1); transition-delay: .43s; }
[data-reveal-stagger].is-visible > *:nth-child(3) { opacity: 1; transform: translateY(0) scale(1); transition-delay: .51s; }
[data-reveal-stagger].is-visible > *:nth-child(4) { opacity: 1; transform: translateY(0) scale(1); transition-delay: .59s; }

/* ============================================================
   SERVICES SECTION — top-tech card system
   · cursor spotlight (magnet metaphor)
   · gradient border on hover
   · per-card accent color
   ============================================================ */

.services {
  position: relative;
  z-index: 10;
  padding: clamp(80px, 14vh, 160px) var(--gutter) clamp(80px, 12vh, 140px);
  background:
    linear-gradient(180deg, transparent 0%, rgba(10,10,11,0.6) 8%, var(--bg-primary) 22%);
}
.services__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* ---------- Section head ---------- */
.services__head {
  max-width: 760px;
  margin: 0 0 clamp(48px, 7vh, 80px);
}
.services__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  background: var(--surface-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: 28px;
}
.services__title {
  font-weight: 900;
  font-size: clamp(2rem, 4.4vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0 0 24px;
  max-width: 18ch;
}
.services__lead {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 64ch;
  margin: 0;
}
.services__lead strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ============================================================
   CONSOLE — sci-fi tabbed dashboard
   · Module rail (4 tab buttons styled as control modules)
   · Stage with 4 stacked tabpanels (only one visible at a time)
   · HUD corner accents, scanline, telemetry labels
   · Glassmorphism, per-tab accent color
   ============================================================ */

.console {
  --accent: 167, 139, 250;
  position: relative;
}

/* ---------- Module rail (dashboard) ---------- */
.console__rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 36px;
  /* Headroom so the floating active module isn't clipped at the top */
  padding-top: 16px;
}
@media (max-width: 860px) {
  .console__rail { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 28px; }
}

.module {
  --accent: 167, 139, 250;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  padding: 22px 22px 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.008)),
    rgba(12, 12, 15, 0.6);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 2px 6px rgba(0,0,0,0.25);
  transition:
    transform .45s var(--ease-out),
    background .4s var(--ease-out),
    box-shadow .45s var(--ease-out);
  will-change: transform;
}
.module[data-accent="pink"]   { --accent: 240, 171, 252; }
.module[data-accent="purple"] { --accent: 167, 139, 250; }
.module[data-accent="indigo"] { --accent: 129, 140, 248; }
.module[data-accent="cyan"]   { --accent: 34, 211, 238; }

/* Gradient border — same mask trick as hero chips, for visual coherence.
   Subtle by default, accent-saturated on hover & active. */
.module::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.06));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  transition: background .45s var(--ease-out);
  z-index: 1;
}
.module:hover::before {
  background: linear-gradient(135deg, rgba(var(--accent), 0.55), rgba(var(--accent), 0.08) 45%, rgba(var(--accent), 0.4));
}
.module.is-active::before {
  background: linear-gradient(135deg, rgba(var(--accent), 0.95), rgba(var(--accent), 0.25) 50%, rgba(var(--accent), 0.75));
}

/* Soft outer halo — appears on hover, more intense on active */
.module::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(closest-side at 50% 100%, rgba(var(--accent), 0.35), transparent 70%);
  filter: blur(18px);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.module:hover::after  { opacity: 0.6; }
.module.is-active::after { opacity: 1; }

.module:hover:not(.is-active) {
  transform: translateY(-3px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
    rgba(12, 12, 15, 0.65);
}

/* ACTIVE STATE — floating module with multi-layer shadow & accent tint.
   Echoes the hero primary CTA's multi-shadow language for visual coherence. */
.module.is-active {
  background:
    linear-gradient(135deg, rgba(var(--accent), 0.16), rgba(var(--accent), 0.03)),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)),
    rgba(12, 12, 15, 0.72);
  box-shadow:
    0 28px 56px -16px rgba(var(--accent), 0.45),
    0 10px 22px -6px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(var(--accent), 0.18),
    inset 0 1px 0 rgba(255,255,255,0.1);
  animation: module-float 5s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
@keyframes module-float {
  0%, 100% { transform: translateY(-7px); }
  50%      { transform: translateY(-12px); }
}

.module__head,
.module__icon,
.module__title { position: relative; z-index: 2; }

.module__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}
.module__id {
  background: linear-gradient(120deg, rgba(var(--accent), 1), rgba(var(--accent), 0.5));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.module__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(var(--accent), 0.35);
  transition: background .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.module.is-active .module__dot {
  background: rgb(var(--accent));
  box-shadow: 0 0 14px rgba(var(--accent), 0.9);
  animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(var(--accent), 0.6); }
  50%      { box-shadow: 0 0 18px rgba(var(--accent), 1); }
}

/* ============== PRESSED-IN ICONS ==============
   Inverted treatment — dark recessed well with an electric rotating border
   in the service accent color. Feels like a rubber LED button on a console.
   The `@property` registration enables CSS to animate angles inside conic-gradient. */
@property --br {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.module__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  color: rgb(var(--accent));
  /* Deep pressed-in well — near-black, slight depth via radial vignette */
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(15, 15, 18, 0.95), rgba(0, 0, 0, 1) 80%);
  box-shadow:
    /* Strong inset shadow at TOP — physical "pressed in" depth */
    inset 0 3px 6px rgba(0, 0, 0, 0.85),
    inset 0 1px 2px rgba(0, 0, 0, 0.95),
    /* Subtle inset highlight at BOTTOM — light bouncing up from inside the well */
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    /* Electric outer rim — accent glow that "leaks" from the conic border */
    0 0 0 1px rgba(var(--accent), 0.45),
    0 0 12px -1px rgba(var(--accent), 0.45),
    0 0 24px -4px rgba(var(--accent), 0.22);
  --br: 0deg;
  animation: rotate-border 6s linear infinite;
  transition:
    transform .4s var(--ease-out),
    box-shadow .4s var(--ease-out);
}

/* Electric rotating border — conic gradient masked into a 1.5px ring.
   Continuously rotates so the accent color flows around the icon like current. */
.module__icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: conic-gradient(
    from var(--br, 0deg),
    rgba(var(--accent), 0.15),
    rgba(var(--accent), 1) 25%,
    rgba(var(--accent), 0.3) 50%,
    rgba(var(--accent), 1) 75%,
    rgba(var(--accent), 0.15) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Icon SVG — slightly thicker stroke + accent drop-shadow for "live wire" feel */
.module__icon svg {
  position: relative;
  z-index: 2;
  stroke-width: 1.6;
  filter: drop-shadow(0 0 5px rgba(var(--accent), 0.55));
}

@keyframes rotate-border {
  to { --br: 360deg; }
}

.module:hover:not(.is-active) .module__icon {
  transform: scale(1.04);
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.9),
    inset 0 1px 2px rgba(0, 0, 0, 1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(var(--accent), 0.6),
    0 0 16px rgba(var(--accent), 0.6),
    0 0 32px -4px rgba(var(--accent), 0.3);
}

.module.is-active .module__icon {
  transform: scale(1.06);
  animation-duration: 3.2s; /* faster electric current when active */
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.95),
    inset 0 1px 3px rgba(0, 0, 0, 1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(var(--accent), 0.85),
    0 0 22px rgba(var(--accent), 0.85),
    0 0 44px -4px rgba(var(--accent), 0.45);
}
.module.is-active .module__icon svg {
  filter: drop-shadow(0 0 8px rgba(var(--accent), 0.85));
}

.module__title {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.25;
}

/* ---------- Stage (panel container) ----------
   Grid stacking: all 4 panels share the same cell. Stage auto-sizes to the
   TALLEST panel — no layout jumps when switching tabs, no content clipping
   on mobile. Critical for the 1-column stacked layout. */
.console__stage {
  position: relative;
  display: grid;
  grid-template-areas: "stack";
}

/* ---------- Panel ---------- */
.panel {
  --accent: 167, 139, 250;
  grid-area: stack;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  /* More transparent for the "digital top-tech glass" feel — the morphing blob
     and decoration layers underneath get to breathe through. */
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.012)),
    rgba(10, 10, 13, 0.55);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow:
    0 32px 64px -32px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.992);
  transition: opacity .5s var(--ease-out), transform .55s var(--ease-out), visibility 0s .5s;
  z-index: 0;
}
.panel[data-accent="pink"]   { --accent: 240, 171, 252; }
.panel[data-accent="purple"] { --accent: 167, 139, 250; }
.panel[data-accent="indigo"] { --accent: 129, 140, 248; }
.panel[data-accent="cyan"]   { --accent: 34, 211, 238;  }

.panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  z-index: 1;
  transition: opacity .55s var(--ease-out), transform .6s var(--ease-out), visibility 0s 0s;
}

/* Perf: pause all animations inside non-active panels — saves ~75% GPU when one panel is shown.
   Critical for mobile devices where multiple morph blobs + scanlines + rotations would tax the GPU. */
.panel:not(.is-active),
.panel:not(.is-active) * {
  animation-play-state: paused !important;
}

/* Gradient accent border (visible on active) */
.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(var(--accent), 0.45),
    rgba(var(--accent), 0.08) 35%,
    rgba(255,255,255,0.04) 65%,
    rgba(var(--accent), 0.35));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

/* HUD corner accents */
.panel__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 4;
}
.panel__corner--tl { top: 14px;    left: 14px;    border-top:    1px solid rgba(var(--accent), 0.8); border-left:   1px solid rgba(var(--accent), 0.8); }
.panel__corner--tr { top: 14px;    right: 14px;   border-top:    1px solid rgba(var(--accent), 0.8); border-right:  1px solid rgba(var(--accent), 0.8); }
.panel__corner--bl { bottom: 14px; left: 14px;    border-bottom: 1px solid rgba(var(--accent), 0.8); border-left:   1px solid rgba(var(--accent), 0.8); }
.panel__corner--br { bottom: 14px; right: 14px;   border-bottom: 1px solid rgba(var(--accent), 0.8); border-right:  1px solid rgba(var(--accent), 0.8); }

/* Scanline — slow horizontal sweep, top → bottom */
.panel__scan {
  position: absolute;
  left: 8%; right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(var(--accent), 0.65) 25%,
    rgba(var(--accent), 0.9) 50%,
    rgba(var(--accent), 0.65) 75%,
    transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  animation: scan 7s ease-in-out infinite;
}
@keyframes scan {
  0%   { transform: translateY(40px);  opacity: 0; }
  10%  { opacity: 0.55; }
  90%  { opacity: 0.55; }
  100% { transform: translateY(600px); opacity: 0; }
}

/* Top bar — console header with live transmission indicator */
.panel__bar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  overflow: hidden;
}
.panel__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgb(var(--accent));
}
.panel__statusDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--accent));
  box-shadow: 0 0 0 0 rgba(var(--accent), 0.6);
  animation: dot-pulse 2s ease-in-out infinite;
}
.panel__meta {
  color: var(--text-muted);
}
/* Transmission line — constant horizontal sweep at the bottom of the bar.
   The "heartbeat" of an active console. */
.panel__transmit {
  position: absolute;
  bottom: 0;
  left: -30%;
  width: 30%;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(var(--accent), 0.4) 25%,
    rgba(var(--accent), 0.95) 50%,
    rgba(var(--accent), 0.4) 75%,
    transparent);
  animation: transmit 4s linear infinite;
  pointer-events: none;
}
@keyframes transmit {
  0%   { left: -30%; opacity: 0.3; }
  50%  { opacity: 1; }
  100% { left: 100%;  opacity: 0.3; }
}

/* Body grid: visual | content */
.panel__body {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 4vw, 44px);
  flex: 1;
  align-items: center;
}
@media (max-width: 860px) {
  .panel__body {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
  }
}

/* ============== LEFT VISUAL — multi-layer console display ============== */
.panel__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 340px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Decoration SVG (rings + crosshair + hex + vertices + stars) */
.panel__deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.panel__deco * { vector-effect: non-scaling-stroke; }
.panel__deco line,
.panel__deco polygon,
.panel__deco circle { stroke: rgb(var(--accent)); fill: rgb(var(--accent)); }

.panel__deco-ring {
  fill: none !important;
  stroke-width: 1;
  stroke-dasharray: 0.6 2.4;
  opacity: 0.35;
}
.panel__deco-marks line {
  fill: none;
  stroke-width: 1.5;
  opacity: 0.6;
}
.panel__deco-cross line {
  fill: none;
  stroke-width: 0.6;
  stroke-dasharray: 1 1.8;
  opacity: 0.14;
}
.panel__deco-hexOuter {
  stroke-width: 1.2;
  opacity: 0.55;
  transform-origin: 50% 50%;
  animation: hex-breathe 7s ease-in-out infinite;
}
@keyframes hex-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.5; }
  50%      { transform: scale(1.05); opacity: 0.78; }
}
.panel__deco-hexInner {
  stroke-width: 1;
  stroke-dasharray: 2.5 3.5;
  opacity: 0.4;
  transform-origin: 50% 50%;
  animation: hex-rotate 36s linear infinite;
}
@keyframes hex-rotate { to { transform: rotate(360deg); } }

/* ============== ORGANIC MORPHING BLOB ==============
   Soft glowing shape that lives behind the hex SVG. Vertices wobble through
   keyframes giving an amoeba-like "breathing" motion — the alive digital core. */
.panel__morph {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(var(--accent), 0.28),
    rgba(var(--accent), 0.08) 55%,
    transparent 78%
  );
  filter: blur(16px);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  animation: morph 14s cubic-bezier(0.42, 0.18, 0.42, 0.82) infinite;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}
@keyframes morph {
  0%   { clip-path: polygon(50% 0%,  95% 25%, 95% 75%, 50% 100%, 5% 75%,  5% 25%); }
  20%  { clip-path: polygon(45% 8%,  100% 28%, 86% 78%, 55% 100%, 0% 72%, 12% 22%); }
  40%  { clip-path: polygon(54% 4%,  90% 22%, 100% 70%, 48% 96%, 10% 80%, 0% 32%); }
  60%  { clip-path: polygon(48% 2%,  96% 32%, 92% 72%, 52% 100%, 8% 68%, 4% 28%); }
  80%  { clip-path: polygon(52% 6%,  92% 24%, 98% 78%, 50% 98%, 4% 76%, 8% 24%); }
  100% { clip-path: polygon(50% 0%,  95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); }
}

.panel__deco-vertices circle {
  opacity: 0.85;
  filter: drop-shadow(0 0 2px rgba(var(--accent), 0.8));
}
.panel__deco-stars circle {
  opacity: 0.5;
  animation: star-twinkle 4s ease-in-out infinite;
}
.panel__deco-stars circle:nth-child(2n) { animation-delay: 1.3s; }
.panel__deco-stars circle:nth-child(3n) { animation-delay: 2.6s; }
.panel__deco-stars circle:nth-child(5n) { animation-delay: 0.7s; }
@keyframes star-twinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.9; }
}

/* Energy pulse rings — 3 concentric rings expanding from the icon, staggered.
   Sells the "broadcasting / active system" feel — the icon is alive. */
.panel__pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent), 0.5);
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  pointer-events: none;
  animation: visual-pulse 3.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
.panel__pulse:nth-of-type(2) { animation-delay: 1.27s; }
.panel__pulse:nth-of-type(3) { animation-delay: 2.54s; }
@keyframes visual-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  15%  { opacity: 0.7; }
  60%  { opacity: 0.18; }
  100% { transform: translate(-50%, -50%) scale(2.3); opacity: 0; }
}

/* Central icon — same pressed-in language as modules, scaled up.
   The "control terminal" key button at the heart of the visual. */
.panel__visualIcon {
  position: relative;
  z-index: 3;
  width: 96px;
  height: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  color: rgb(var(--accent));
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(14, 14, 17, 0.96), rgba(0, 0, 0, 1) 80%);
  box-shadow:
    /* Deep inset top shadow */
    inset 0 4px 10px rgba(0, 0, 0, 0.9),
    inset 0 1px 3px rgba(0, 0, 0, 0.95),
    /* Bottom inner highlight */
    inset 0 -2px 0 rgba(255, 255, 255, 0.06),
    /* Electric outer rim — stronger than module since this is the main */
    0 0 0 1px rgba(var(--accent), 0.7),
    0 0 24px rgba(var(--accent), 0.7),
    0 0 56px -4px rgba(var(--accent), 0.4);
  --br: 0deg;
  animation: rotate-border 5s linear infinite;
}
/* Electric rotating border via conic gradient (same technique as module) */
.panel__visualIcon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.6px;
  background: conic-gradient(
    from var(--br, 0deg),
    rgba(var(--accent), 0.15),
    rgba(var(--accent), 1) 25%,
    rgba(var(--accent), 0.35) 50%,
    rgba(var(--accent), 1) 75%,
    rgba(var(--accent), 0.15) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.panel__visualIcon svg {
  position: relative;
  z-index: 2;
  stroke-width: 1.4;
  filter: drop-shadow(0 0 10px rgba(var(--accent), 0.75));
}

/* Telemetry labels at corners of the visual */
.panel__telem {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.panel__telem b {
  font-weight: 500;
  color: var(--text-muted);
}
.panel__telem span {
  color: rgb(var(--accent));
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.panel__telem--tl { top: 4%;     left: 0; }
.panel__telem--tr { top: 4%;     right: 0; align-items: flex-end; }
.panel__telem--bl { bottom: 4%;  left: 0; }
.panel__telem--br { bottom: 4%;  right: 0; align-items: flex-end; }

/* Right content */
.panel__title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0 0 10px;
  line-height: 1.1;
}
.panel__hook {
  font-size: 15.5px;
  font-weight: 500;
  color: rgb(var(--accent));
  margin: 0 0 18px;
  letter-spacing: -0.005em;
}
.panel__desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 22px;
}
.panel__desc em {
  font-style: normal;
  color: var(--text-primary);
  font-weight: 500;
}

.panel__features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 18px;
}
@media (max-width: 720px) {
  .panel__features { grid-template-columns: 1fr; }
}
.panel__features li {
  position: relative;
  padding: 6px 4px 6px 24px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.005em;
  border-radius: 6px;
  cursor: default;
  transition: color .25s var(--ease-out), background .25s var(--ease-out);
}
.panel__features li::before {
  content: '›';
  position: absolute;
  left: 7px;
  top: 5px;
  font-size: 15px;
  color: rgba(var(--accent), 0.6);
  font-weight: 700;
  transition: color .25s var(--ease-out), transform .25s var(--ease-out);
}
.panel__features li:hover {
  color: var(--text-primary);
  background: rgba(var(--accent), 0.06);
}
.panel__features li:hover::before {
  color: rgb(var(--accent));
  transform: translateX(3px);
}

/* CTA inside panel — console button with scan light sweep on hover */
.panel__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--accent));
  background:
    linear-gradient(180deg, rgba(var(--accent), 0.14), rgba(var(--accent), 0.04)),
    rgba(12, 12, 15, 0.4);
  border: 1px solid rgba(var(--accent), 0.4);
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
  transition:
    background .3s var(--ease-out),
    border-color .3s var(--ease-out),
    box-shadow .35s var(--ease-out),
    transform .2s var(--ease-out);
}
.panel__cta::before {
  /* Scan light — sweeps left to right on hover */
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -120%;
  width: 60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-20deg);
  transition: left .9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}
.panel__cta > * { position: relative; z-index: 1; }
.panel__cta svg { transition: transform .3s var(--ease-out); }
.panel__cta:hover {
  background:
    linear-gradient(180deg, rgba(var(--accent), 0.25), rgba(var(--accent), 0.08)),
    rgba(12, 12, 15, 0.5);
  border-color: rgba(var(--accent), 0.75);
  box-shadow:
    0 0 0 1px rgba(var(--accent), 0.25),
    0 12px 28px -6px rgba(var(--accent), 0.5),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(-1px);
}
.panel__cta:hover::before { left: 130%; }
.panel__cta:hover svg { transform: translateX(4px); }

/* ---------- Footer strip ---------- */
.services__footer {
  margin-top: clamp(48px, 7vh, 80px);
  padding: clamp(28px, 4vh, 44px) clamp(28px, 4vw, 44px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse 80% 100% at 50% 100%, rgba(124, 58, 237, 0.12), transparent 70%),
    var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.services__footer p {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
  max-width: 38ch;
  letter-spacing: -0.015em;
}

/* Reveals — fire when scrolled into view via IntersectionObserver (.is-visible toggle is shared) */

/* ============================================================
   MOBILE — services / console section
   Mobile-first priorities:
   · zero content clipping (grid stage already fixes this)
   · larger touch targets
   · proportional decoration (visual doesn't dominate vertical space)
   · clear active state contrast
   · reduced cognitive load
   ============================================================ */

/* Tablet portrait & smaller (≤ 860px) — panel body stacks vertically */
@media (max-width: 860px) {
  .services { padding-top: clamp(64px, 10vh, 100px); padding-bottom: clamp(64px, 10vh, 110px); }
  .services__head { margin-bottom: 36px; }
  .services__lead { font-size: 1rem; }

  .console__rail { margin-bottom: 28px; padding-top: 14px; }
  .module { padding: 18px 16px 16px; gap: 14px; }
  .module__id { font-size: 10px; }

  /* Active state stronger on mobile to compensate for smaller cards */
  .module.is-active { box-shadow:
    0 22px 44px -12px rgba(var(--accent), 0.5),
    0 8px 18px -4px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(var(--accent), 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12); }

  /* Panel — more breathing room, smaller visual */
  .panel__body { padding: 28px 24px; gap: 24px; }
  .panel__visual { max-width: 260px; }
  .panel__bar { padding: 15px 20px; font-size: 10.5px; letter-spacing: 0.12em; }
}

/* Phone portrait (≤ 640px) — most aggressive optimization */
@media (max-width: 640px) {
  .services { padding-left: var(--gutter); padding-right: var(--gutter); }
  .services__footer { flex-direction: column; align-items: flex-start; gap: 18px; }
  .services__footer .btn { width: 100%; justify-content: center; }

  /* Module rail: tighter gap, but each card stays comfortable */
  .console__rail { gap: 10px; padding-top: 12px; margin-bottom: 24px; }
  .module { padding: 16px 14px 14px; gap: 12px; border-radius: 14px; }
  .module__id { font-size: 9.5px; letter-spacing: 0.12em; }
  .module__title { font-size: 14px; }

  /* Panel: reduce all spacing, shrink visual area proportionally */
  .panel { border-radius: 14px; }
  .panel__bar { padding: 13px 18px; font-size: 10px; }
  .panel__body { padding: 24px 20px; gap: 20px; }
  .panel__visual { max-width: 220px; }

  /* Central icon scales with visual so it stays balanced */
  .panel__visualIcon { width: 78px; height: 78px; border-radius: 18px; }
  .panel__visualIcon svg { width: 44px; height: 44px; }
  .panel__pulse { width: 66px; height: 66px; }

  /* HUD corners smaller — they were 22px which dominates on small panels */
  .panel__corner { width: 18px; height: 18px; }
  .panel__corner--tl, .panel__corner--tr { top: 12px; }
  .panel__corner--bl, .panel__corner--br { bottom: 12px; }
  .panel__corner--tl, .panel__corner--bl { left: 12px; }
  .panel__corner--tr, .panel__corner--br { right: 12px; }

  /* Typography: bump readable sizes, tighten where decorative */
  .panel__title { font-size: 1.35rem; }
  .panel__hook  { font-size: 14px; margin-bottom: 14px; }
  .panel__desc  { font-size: 14.5px; line-height: 1.6; margin-bottom: 18px; }

  /* Features: more vertical breathing, larger hit area for accidental hover-tap */
  .panel__features { margin-bottom: 22px; gap: 2px; }
  .panel__features li { padding: 8px 6px 8px 24px; font-size: 13px; }
  .panel__features li::before { top: 7px; }

  /* CTA: substantial padding + full-width = thumb-friendly without breaking aesthetic */
  .panel__cta {
    width: 100%;
    justify-content: center;
    padding: 15px 22px;
    font-size: 12.5px;
  }
}

/* Small phone (≤ 420px) — hide decorative telemetry to avoid visual noise */
@media (max-width: 420px) {
  .panel__telem { display: none; }
  .panel__visual { max-width: 200px; }
  .panel__visualIcon { width: 72px; height: 72px; }
  .panel__visualIcon svg { width: 40px; height: 40px; }
  .panel__pulse { width: 60px; height: 60px; }
  .panel__body { padding: 22px 18px; }
  .panel__bar { padding: 12px 16px; }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 110px;
    min-height: 100vh;
  }
  .hero__eyebrow { font-size: 10.5px; padding: 7px 12px 7px 10px; margin-bottom: 24px; }
  .hero__title { letter-spacing: -0.03em; margin-bottom: 22px; }
  .hero__sub { margin-bottom: 28px; }
  .hero__tags { margin-bottom: 32px; }
  .hero__ctas { width: 100%; margin-bottom: 40px; }
  .btn { width: 100%; justify-content: center; padding: 15px 22px; }
  .hero__scroll { display: none; }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .bg-particles { display: none; }
  [data-reveal],
  [data-reveal-stagger] > *,
  .hero__title .line {
    opacity: 1 !important;
    transform: none !important;
  }
}

:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: rgba(124, 58, 237, 0.45);
  color: #fff;
}

/* ============================================================
   MOBILE NAV — hamburger + full-screen overlay
   ============================================================ */

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5.5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background .2s var(--ease-out);
}
.nav__burger:hover { background: var(--surface-glass); }

@media (max-width: 720px) {
  .nav__burger { display: flex; }
}

.nav__burger-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
body.nav-open .nav__burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav__burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.nav-open .nav__burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 48;
  background: rgba(10,10,11,0.97);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px var(--gutter) 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease-out), visibility 0s .35s;
}
body.nav-open .nav-mobile {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s var(--ease-out), visibility 0s 0s;
}

.nav-mobile__menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 320px;
}

.nav-mobile__link {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 24px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-secondary);
  border-radius: var(--r-md);
  transition: color .2s var(--ease-out), background .2s var(--ease-out);
}
.nav-mobile__link:hover {
  color: var(--text-primary);
  background: var(--surface-glass);
}

.nav-mobile__cta {
  margin-top: 16px;
  width: 100%;
  max-width: 320px;
  justify-content: center;
}

/* ============================================================
   HOW IT WORKS SECTION
   ============================================================ */

/* ---- Canvas de partículas (fondo blanco) ---- */
.how__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.how {
  /* === Sección blanca — override de tokens globales === */
  --bg-primary:          #ffffff;
  --bg-secondary:        #f7f7fb;
  --bg-elevated:         rgba(0,0,0,0.045);
  --text-primary:        #0a0a14;
  --text-secondary:      #48485c;
  --text-muted:          #8888a0;
  --border-subtle:       rgba(0,0,0,0.1);
  --border-strong:       rgba(0,0,0,0.18);
  --surface-glass:       rgba(0,0,0,0.04);
  --surface-glass-hover: rgba(0,0,0,0.07);

  position: relative;
  z-index: 10;
  overflow: hidden;
  padding: clamp(80px, 14vh, 160px) var(--gutter) clamp(80px, 12vh, 140px);
  background: #ffffff;
  color: var(--text-primary);
  /* Sombra sutil que separa la sección blanca del fondo oscuro */
  box-shadow:
    0 -1px 0 rgba(0,0,0,0.07),
    0  1px 0 rgba(0,0,0,0.07);
}

/* El inner está por encima del canvas de partículas */
.how__inner {
  position: relative;
  z-index: 2;
  max-width: var(--content-max);
  margin: 0 auto;
}

.how__head {
  max-width: 640px;
  margin: 0 0 clamp(48px, 7vh, 80px);
}

.how__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  background: var(--surface-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

.how__title {
  font-weight: 900;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0 0 20px;
}

.how__lead {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 56ch;
  margin: 0;
}

.how__steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}

.how__step {
  background: linear-gradient(135deg, rgba(0,0,0,0.02), rgba(0,0,0,0.015));
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    border-color .3s var(--ease-out),
    box-shadow .35s var(--ease-out),
    transform .3s var(--ease-out);
}

.how__step:hover {
  border-color: var(--border-strong);
  box-shadow: 0 16px 48px -16px rgba(124,58,237,0.3);
  transform: translateY(-4px);
}

.how__step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 20px;
}

.how__step-icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  margin-bottom: 22px;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
  flex-shrink: 0;
}
.how__step:hover .how__step-icon {
  color: var(--text-primary);
  border-color: rgba(124,58,237,0.45);
}

.how__step-title {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.how__step-desc {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 22px;
  flex: 1;
}

.how__step-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  padding: 7px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  background: var(--surface-glass);
  width: fit-content;
}

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

/* ============================================================
   STATS STRIP
   ============================================================ */

.stats {
  position: relative;
  z-index: 10;
  padding: clamp(48px, 7vh, 80px) var(--gutter);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background:
    radial-gradient(ellipse 70% 100% at 50% 50%, rgba(124,58,237,0.07), transparent 75%);
}

.stats__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 5vw, 48px);
  align-items: center;
}

.stats__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}

.stats__num {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.stats__label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .stats__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
  }
}

/* ============================================================
   CASES SECTION
   ============================================================ */

.cases {
  position: relative;
  z-index: 10;
  padding: clamp(80px, 14vh, 160px) var(--gutter) clamp(80px, 12vh, 140px);
}

.cases__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

.cases__head {
  max-width: 640px;
  margin: 0 0 clamp(48px, 7vh, 72px);
}

.cases__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  background: var(--surface-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

.cases__title {
  font-weight: 900;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0;
}

.cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}

@media (max-width: 860px) {
  .cases__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .cases__grid {
    grid-template-columns: 1fr;
  }
}

.case-card {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    border-color .35s var(--ease-out),
    box-shadow .4s var(--ease-out),
    transform .3s var(--ease-out);
}

.case-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--accent-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-out);
}

.case-card:hover {
  border-color: rgba(124,58,237,0.3);
  box-shadow: 0 24px 56px -20px rgba(124,58,237,0.3), 0 8px 24px -8px rgba(0,0,0,0.4);
  transform: translateY(-4px);
}
.case-card:hover::before { opacity: 0.6; }

.case-card .panel__corner { z-index: 2; }

.case-card__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.case-card__title {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.25;
}

.case-card__location {
  font-size: 0.82em;
  font-weight: 400;
  color: var(--text-secondary);
  display: block;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}

.case-card__desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
}

.case-card__metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: rgba(124,58,237,0.08);
  border: 1px solid rgba(124,58,237,0.18);
  border-radius: var(--r-md);
}

.case-card__metric-num {
  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1.1;
}

.case-card__metric-label {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.case-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 4px;
  transition: color .25s var(--ease-out);
  width: fit-content;
}
.case-card__cta:hover { color: var(--text-primary); }
.case-card__cta svg { transition: transform .25s var(--ease-out); }
.case-card__cta:hover svg { transform: translateX(4px); }

/* ============================================================
   CONTACT SECTION
   ============================================================ */

.contact {
  position: relative;
  z-index: 10;
  padding: 0;          /* cada bloque hijo gestiona su propio padding */
  background: none;    /* cada bloque hijo gestiona su propio fondo */
}

.contact__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: clamp(48px, 8vw, 100px);
  align-items: start;
}

@media (max-width: 860px) {
  .contact__inner {
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vh, 64px);
  }
}

.contact__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  background: var(--surface-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

.contact__title {
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin: 0 0 24px;
}

.contact__sub {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 36px;
  max-width: 38ch;
}

.contact__trust {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.contact__trust li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  color: var(--text-secondary);
}
.contact__trust li svg {
  flex-shrink: 0;
  color: #22d3ee;
}

/* --- Form wrapper --- */
.contact__form-wrap { position: relative; }

.contact__form {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.012)),
    rgba(10,10,13,0.55);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  overflow: hidden;
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  box-shadow:
    0 32px 64px -32px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Gradient border — mirrors panel accent border */
.contact__form::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(6,182,212,0.4),
    rgba(6,182,212,0.06) 40%,
    rgba(255,255,255,0.03) 65%,
    rgba(124,58,237,0.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

.contact__form-bar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}

.contact__form-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.contact__form-body {
  position: relative;
  z-index: 5;
  padding: clamp(24px, 3.5vw, 36px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}

@media (max-width: 480px) {
  .contact__form-body {
    grid-template-columns: 1fr;
    padding: 22px 20px;
  }
  .contact__form-bar { padding: 16px 20px; }
}

.contact__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact__field--full { grid-column: 1 / -1; }

.contact__label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.contact__label span { color: rgba(99,102,241,0.8); }

.contact__input {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--text-primary);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition:
    border-color .25s var(--ease-out),
    box-shadow .25s var(--ease-out),
    background .25s var(--ease-out);
}
.contact__input::placeholder { color: var(--text-muted); }
.contact__input:focus {
  border-color: rgba(99,102,241,0.65);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
  background: rgba(255,255,255,0.06);
}
.contact__input:invalid:not(:placeholder-shown) {
  border-color: rgba(239,68,68,0.5);
}

.contact__textarea {
  resize: vertical;
  min-height: 110px;
}

.contact__field--submit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.contact__submit {
  border: none;
  cursor: pointer;
}

.contact__privacy {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}
.contact__privacy-link {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s var(--ease-out);
}
.contact__privacy-link:hover { color: var(--text-primary); }

/* Success overlay */
.contact__success {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.012));
  text-align: center;
}
.contact__success[hidden] { display: none; }

.contact__success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34,211,238,0.1);
  border: 1px solid rgba(34,211,238,0.4);
  color: #22d3ee;
}

.contact__success-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}
.contact__success-msg {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0;
  max-width: 30ch;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--border-subtle);
  padding: clamp(48px, 8vh, 80px) var(--gutter) clamp(28px, 4vh, 44px);
}

.footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(32px, 5vh, 56px);
  border-bottom: 1px solid var(--border-subtle);
}

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

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity .2s var(--ease-out);
  width: fit-content;
}
.footer__logo:hover { opacity: 0.8; }
.footer__logo img { width: 36px; height: 36px; }

.footer__logo-text {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.footer__logo-tld { color: var(--text-muted); }

.footer__tagline {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.footer__studio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.03em;
  transition: color .2s var(--ease-out);
  width: fit-content;
}
.footer__studio:hover { color: var(--text-primary); }

.footer__nav {
  display: flex;
  gap: clamp(28px, 4vw, 56px);
}

.footer__nav-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__nav-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

.footer__nav-group ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer__nav-group a {
  font-size: 13.5px;
  color: var(--text-secondary);
  transition: color .2s var(--ease-out);
}
.footer__nav-group a:hover { color: var(--text-primary); }

.footer__bottom {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-top: clamp(20px, 3vh, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer__copy,
.footer__made {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.footer__copy a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s var(--ease-out);
}
.footer__copy a:hover { color: var(--text-secondary); }


/* ============================================================
   CONTACT SECTION — REDISEÑO COMPLETO
   ============================================================ */

/* .contact ya tiene padding: 0 — cada sub-bloque gestiona el suyo */

/* ---- BLOQUE 1: Closing hero ---- */
.contact__closing {
  position: relative;
  overflow: hidden;
  /* padding vertical propio; horizontal lo gestiona .contact__closing-content */
  padding: clamp(80px, 14vh, 160px) 0 clamp(64px, 10vh, 120px);
  background:
    radial-gradient(ellipse 65% 80% at 15% 60%, rgba(124,58,237,0.18), transparent 65%),
    radial-gradient(ellipse 55% 70% at 85% 30%, rgba(6,182,212,0.12), transparent 60%),
    var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
}

/* Número fantasma 78% — ghost stat en el fondo */
.contact__closing-bg-stat {
  position: absolute;
  right: -2%;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(200px, 28vw, 380px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.85;
  /* Gradient text muy tenue — decorativo, no distrae */
  background: linear-gradient(135deg,
    rgba(124,58,237,0.12) 0%,
    rgba(99,102,241,0.09) 40%,
    rgba(6,182,212,0.06) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}
.contact__closing-bg-stat span {
  font-size: 0.6em;
}

.contact__closing-content {
  position: relative;
  z-index: 2;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.contact__closing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  background: var(--surface-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.contact__closing-title {
  font-weight: 900;
  font-size: clamp(2rem, 4.8vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin: 0 0 28px;
}
.contact__closing-title em {
  font-style: normal;
  /* El 78% destacado en gradiente */
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.contact__closing-sub {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 58ch;
  margin: 0 0 40px;
}
.contact__closing-sub strong {
  color: var(--text-primary);
  font-weight: 600;
}

.contact__closing-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.contact__closing-cta {
  font-size: 17px;
  padding: 18px 32px;
}

.contact__closing-capacity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}
.contact__closing-capacity svg {
  color: #22d3ee;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .contact__closing-title { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  .contact__closing-bg-stat { right: -8%; font-size: clamp(120px, 40vw, 220px); opacity: 0.7; }
  .contact__closing-cta { width: 100%; justify-content: center; }
}

/* ---- BLOQUE 2: Metrics strip ---- */
.contact__metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border-subtle);
}

.contact__metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(28px, 4vh, 48px) clamp(20px, 3vw, 40px);
  border-right: 1px solid var(--border-subtle);
  transition: background .25s var(--ease-out);
}
.contact__metric:last-child { border-right: none; }
.contact__metric:hover { background: var(--surface-glass); }

.contact__metric-num {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.contact__metric-label {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
  max-width: 18ch;
}

@media (max-width: 640px) {
  .contact__metrics-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact__metric:nth-child(2) { border-right: none; }
  .contact__metric:nth-child(3) { border-top: 1px solid var(--border-subtle); }
  .contact__metric:nth-child(4) { border-top: 1px solid var(--border-subtle); border-right: none; }
}

/* ---- BLOQUE 3: Formulario — override padding (ya no lleva el propio de .contact) ---- */
.contact__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(64px, 10vh, 120px) var(--gutter) clamp(80px, 12vh, 140px);
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: clamp(48px, 8vw, 100px);
  align-items: start;
}

@media (max-width: 860px) {
  .contact__inner {
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vh, 64px);
  }
}

/* Info lead (reemplaza el .contact__sub) */
.contact__info-lead {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 32px;
  max-width: 38ch;
}


/* ============================================================
   PANEL HEXAGON — Upgrade neon: borde eléctrico + interior glowy
   Sobreescribe las reglas base del hexágono del panel visual.
   El patrón !important es necesario porque la regla
   `.panel__deco polygon { fill: rgb(var(--accent)) }` tiene
   mayor especificidad (descendant + element vs solo class).
   ============================================================ */

/* HEX EXTERIOR — borde neon brillante + fill transparente */
.panel__deco-hexOuter {
  fill: rgba(var(--accent), 0.07) !important; /* interior glowy sutil */
  stroke-width: 1.8;
  opacity: 1;                                  /* sin fade global — el glow lo controla */
  transform-origin: 50% 50%;
  will-change: filter, transform;
  filter:
    drop-shadow(0 0 1.5px rgb(var(--accent)))
    drop-shadow(0 0 5px   rgba(var(--accent), 0.65))
    drop-shadow(0 0 14px  rgba(var(--accent), 0.28));
  animation:
    hex-breathe     7s   ease-in-out infinite,
    hex-neon-pulse  3.8s ease-in-out infinite;
}

/* HEX INTERIOR — dashes giratorios, glow más sutil */
.panel__deco-hexInner {
  fill: none !important;
  stroke-width: 1.4;
  stroke-dasharray: 3 4.5;
  opacity: 1;
  transform-origin: 50% 50%;
  will-change: filter, transform;
  filter:
    drop-shadow(0 0 1px  rgb(var(--accent)))
    drop-shadow(0 0 5px  rgba(var(--accent), 0.45));
  animation: hex-rotate 28s linear infinite; /* un poco más rápido que antes */
}

/* Override hex-breathe — ahora respira entre glow tenue y máxima intensidad */
@keyframes hex-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.75; }
  50%      { transform: scale(1.06); opacity: 1;    }
}

/* Pulsación del neon — latido eléctrico del sistema */
@keyframes hex-neon-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 1.5px rgb(var(--accent)))
      drop-shadow(0 0 5px   rgba(var(--accent), 0.65))
      drop-shadow(0 0 14px  rgba(var(--accent), 0.28));
  }
  50% {
    filter:
      drop-shadow(0 0 2.5px rgb(var(--accent)))
      drop-shadow(0 0 10px  rgba(var(--accent), 0.9))
      drop-shadow(0 0 26px  rgba(var(--accent), 0.48));
  }
}

/* Asegurar que el neon-pulse solo corre en el panel activo
   (ya existe la regla animation-play-state: paused en panels inactivos,
   pero lo declaramos explícitamente para claridad) */
.panel:not(.is-active) .panel__deco-hexOuter,
.panel:not(.is-active) .panel__deco-hexInner {
  filter: none; /* sin glow en paneles inactivos — ahorra GPU */
}