/* ==========================================================================
   KIOCONE Corporate Design System & Custom Utilities
   Engineering, Integration, Trust & Precision Aesthetics
   ========================================================================== */

:root {
  --brand-primary: #0284c7;
  --brand-primary-dark: #0369a1;
  --brand-secondary: #2563eb;
  --brand-accent: #06b6d4;
  --slate-dark: #0f172a;
  --slate-card: #1e293b;
  --slate-subtle: #334155;

  /* Homepage hero tokens: derived from the existing KIOCONE blue/slate palette. */
  --hero-canvas: #f8fbff;
  --hero-ink: #0f172a;
  --hero-muted: #475569;
  --hero-line: rgb(148 163 184 / 24%);
  --hero-glow: rgb(14 165 233 / 16%);
  --hero-glow-secondary: rgb(37 99 235 / 12%);
  --hero-panel: rgb(255 255 255 / 76%);
  --hero-panel-shadow: 0 24px 80px -38px rgb(15 23 42 / 30%);
}

html[data-theme="light"] {
  --hero-canvas: #f8fbff;
  --hero-ink: #0f172a;
  --hero-muted: #475569;
  --hero-line: rgb(148 163 184 / 24%);
  --hero-glow: rgb(14 165 233 / 16%);
  --hero-glow-secondary: rgb(37 99 235 / 12%);
  --hero-panel: rgb(255 255 255 / 76%);
}

html[data-theme="dark"] {
  --hero-canvas: #0b1220;
  --hero-ink: #f8fafc;
  --hero-muted: #cbd5e1;
  --hero-line: rgb(148 163 184 / 22%);
  --hero-glow: rgb(14 165 233 / 20%);
  --hero-glow-secondary: rgb(37 99 235 / 18%);
  --hero-panel: rgb(15 23 42 / 76%);
  --hero-panel-shadow: 0 24px 80px -38px rgb(0 0 0 / 60%);
}

/* Smooth Scrolling with Header Offset */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1e293b;
  background-color: #f8fafc;
  overflow-x: hidden;
}

/* Fallback Image & Logo Constraints */
img {
  max-width: 100%;
}

header img,
footer img {
  max-height: 2.5rem;
  width: auto;
}

/* Subtle Engineering Grid Background Pattern */
.bg-grid-pattern {
  background-size: 32px 32px;
  background-image: 
    linear-gradient(to right, rgba(226, 232, 240, 0.6) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226, 232, 240, 0.6) 1px, transparent 1px);
}

.bg-grid-pattern-dark {
  background-size: 32px 32px;
  background-image: 
    linear-gradient(to right, rgba(51, 65, 85, 0.3) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(51, 65, 85, 0.3) 1px, transparent 1px);
}

/* Glassmorphism Navigation */
.header-glass {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

/* Keep the desktop header within the max-w-7xl content box. The HTML uses
   Tailwind's fixed space-x-8 on the primary nav; at medium and large desktop
   widths that spacing competes with the logo and language controls. */
@media (min-width: 1024px) {
  header .max-w-7xl > .flex.items-center {
    min-width: 0;
    gap: clamp(0.75rem, 1.35vw, 1.5rem);
  }

  header .max-w-7xl > .flex.items-center > a[aria-label^="KIOCONE"] {
    flex: 0 0 auto;
    gap: clamp(0.4rem, 0.7vw, 0.75rem);
  }

  header .max-w-7xl > .flex.items-center > a[aria-label^="KIOCONE"] img:first-child {
    height: clamp(2.125rem, 2.5vw, 2.5rem);
  }

  header .max-w-7xl > .flex.items-center > a[aria-label^="KIOCONE"] img:last-child {
    height: clamp(1.25rem, 1.55vw, 1.5rem);
  }

  header nav.hidden.lg\:flex {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: clamp(0.5rem, 1.1vw, 1.25rem);
  }

  header nav.hidden.lg\:flex.space-x-8 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0;
  }

  header nav.hidden.lg\:flex .nav-link-anchor,
  header nav.hidden.lg\:flex summary {
    white-space: nowrap;
    font-size: 0.8125rem;
  }

  header .max-w-7xl > .flex.items-center > div.hidden.lg\:flex {
    flex: 0 0 auto;
    gap: clamp(0.375rem, 0.6vw, 0.75rem);
  }

  header .max-w-7xl > .flex.items-center > div.hidden.lg\:flex > a[href="contacto.html"] {
    white-space: nowrap;
    max-width: min(16rem, 20vw);
    overflow: hidden;
    text-overflow: ellipsis;
    padding-inline: clamp(0.75rem, 1.2vw, 1.25rem);
  }

  header .lang-dropdown-btn {
    padding: 0.4375rem clamp(0.5rem, 0.75vw, 0.75rem);
  }
}

/* At the narrower desktop widths the CTA would force the primary nav to
   collide with the brand. The CTA remains available in the mobile menu and
   returns as soon as the desktop content box has enough room. */
@media (min-width: 1024px) and (max-width: 1279px) {
  header .max-w-7xl > .flex.items-center > div.hidden.lg\:flex > a[href="contacto.html"] {
    display: none;
  }
}

/* Enterprise Interactive Card */
.corp-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.875rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.corp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  border-color: #cbd5e1;
}

/* Technical Accent Badges */
.badge-tech {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 9999px;
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.badge-brand {
  background-color: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #dbeafe;
}

.badge-cyan {
  background-color: #ecfeff;
  color: #0e7490;
  border: 1px solid #cffafe;
}

/* Stepper & Methodology Timeline Elements */
.step-number {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Hero Abstract Graphic Node Connections */
@keyframes pulse-subtle {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.node-pulse {
  animation: pulse-subtle 4s infinite ease-in-out;
}

/* Focus states for high accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #0284c7;
  outline-offset: 2px;
}

/* Language Dropdown Animation */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.lang-dropdown-menu:not(.hidden) {
  animation: fadeInScale 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: top right;
}

/* ==========================================================================
   Cookie Consent Banner & Modal Styles
   ========================================================================== */
.cookie-banner-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 1rem;
  pointer-events: none;
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cookie-banner-box {
  pointer-events: auto;
  max-width: 72rem;
  margin: 0 auto;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 1rem;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
  color: #f8fafc;
  padding: 1.25rem 1.5rem;
}

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

.cookie-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.2s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cookie-modal-card {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  max-width: 42rem;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

/* Toggle switch styling */
.cookie-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.2s ease;
  border-radius: 24px;
}

.cookie-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.2s ease;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.cookie-switch input:checked + .cookie-slider {
  background-color: #0284c7;
}

.cookie-switch input:checked + .cookie-slider:before {
  transform: translateX(20px);
}

.cookie-switch input:disabled + .cookie-slider {
  background-color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.8;
}

/* ==========================================================================
   Legal Document Layout & Typography Styles
   ========================================================================== */
.legal-container {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.legal-article h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  margin-top: 2.25rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legal-article h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.legal-article p {
  color: #334155;
  font-size: 0.9375rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.legal-article ul, .legal-article ol {
  color: #334155;
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.legal-article ul {
  list-style-type: disc;
}

.legal-article ol {
  list-style-type: decimal;
}

.legal-article li {
  margin-bottom: 0.375rem;
}

.legal-article strong {
  color: #0f172a;
  font-weight: 600;
}

.legal-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin: 1.5rem 0;
}

.legal-box-highlight {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.legal-pending-tag {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  border: 1px dashed #d97706;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: monospace;
  font-weight: 600;
}

.toc-link {
  transition: all 0.15s ease;
}
.toc-link:hover {
  color: #0284c7;
  transform: translateX(3px);
}

/* ==========================================================================
   Print Optimization (@media print)
   ========================================================================== */
@media print {
  header,
  footer,
  .cookie-banner-container,
  .cookie-modal-backdrop,
  .no-print,
  #mobile-menu,
  .language-selector-dropdown {
    display: none !important;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt !important;
    line-height: 1.5 !important;
  }

  .legal-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .legal-article h2 {
    page-break-after: avoid;
    border-bottom: 1px solid #000 !important;
    color: #000 !important;
  }

  .legal-article h3 {
    page-break-after: avoid;
    color: #000 !important;
  }

  .legal-box {
    border: 1px solid #999 !important;
    background: #fff !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }

  /* Show print header */
  .print-only-header {
    display: block !important;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #000;
  }
}

.print-only-header {
  display: none;
}

/* ==========================================================================
   Homepage hero refresh — editorial clarity with a restrained 3D focal point
   ========================================================================== */
.hero-modern,
.hero-modern.bg-white {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  color: var(--hero-ink);
  background-color: var(--hero-canvas);
  background-image:
    radial-gradient(ellipse at 76% 40%, var(--hero-glow), transparent 38%),
    radial-gradient(ellipse at 91% 78%, var(--hero-glow-secondary), transparent 35%),
    linear-gradient(135deg, rgb(255 255 255 / 72%), transparent 57%);
}

.hero-modern::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image: linear-gradient(var(--hero-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, transparent 12%, #000 65%, #000);
}

.hero-modern > .max-w-7xl {
  position: relative;
  z-index: 1;
}

.hero-modern .hero-title,
.hero-modern h1 {
  max-width: 14ch;
  color: var(--hero-ink);
  font-size: clamp(2.75rem, 5.4vw, 5.4rem);
  font-weight: 650;
  line-height: 0.99;
  letter-spacing: -0.065em;
  text-wrap: balance;
}

.hero-modern .hero-copy,
.hero-modern p {
  color: var(--hero-muted);
}

.hero-modern .hero-copy > p,
.hero-modern .hero-lede {
  max-width: 38rem;
  font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  line-height: 1.7;
}

.hero-modern .hero-actions a {
  min-height: 3.25rem;
  border-radius: 0.75rem;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.hero-modern .hero-actions a:hover,
.hero-modern a.inline-flex:hover {
  transform: translateY(-2px);
}

.hero-modern .hero-orbit {
  position: relative;
  display: grid;
  min-height: clamp(23rem, 44vw, 38rem);
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--hero-line);
  border-radius: 1.75rem;
  background:
    radial-gradient(ellipse at center, rgb(255 255 255 / 92%) 0%, var(--hero-panel) 48%, transparent 78%),
    linear-gradient(145deg, rgb(255 255 255 / 54%), rgb(226 242 255 / 32%));
  box-shadow: var(--hero-panel-shadow), inset 0 1px rgb(255 255 255 / 78%);
  perspective: 1000px;
}

.hero-modern .hero-orbit::before,
.hero-modern .hero-orbit::after {
  content: "";
  position: absolute;
  width: min(76%, 28rem);
  aspect-ratio: 1;
  border: 1px solid rgb(2 132 199 / 18%);
  border-radius: 50%;
  transform: rotateX(68deg) rotateZ(-24deg);
  box-shadow: 0 0 45px rgb(14 165 233 / 9%), inset 0 0 32px rgb(37 99 235 / 6%);
  pointer-events: none;
}

.hero-modern .hero-orbit::after {
  width: min(94%, 35rem);
  border-color: rgb(37 99 235 / 12%);
  transform: rotateX(68deg) rotateZ(28deg);
}

.hero-modern .hero-orbit__stage {
  position: relative;
  width: min(100%, 34rem);
  aspect-ratio: 1 / 0.88;
  transform-style: preserve-3d;
}

.hero-modern .hero-orbit__halo,
.hero-modern .hero-orbit__ring {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.hero-modern .hero-orbit__halo {
  width: 42%;
  background: radial-gradient(circle, rgb(14 165 233 / 18%), rgb(37 99 235 / 7%) 48%, transparent 72%);
  filter: blur(5px);
  transform: translate(-50%, -50%);
}

.hero-modern .hero-orbit__ring {
  border: 1px solid rgb(2 132 199 / 24%);
  box-shadow: 0 0 24px rgb(14 165 233 / 8%), inset 0 0 24px rgb(37 99 235 / 6%);
  transform: translate(-50%, -50%) rotateX(66deg) rotateZ(-25deg);
}

.hero-modern .hero-orbit__ring--two {
  width: 88%;
  border-color: rgb(37 99 235 / 16%);
  transform: translate(-50%, -50%) rotateX(66deg) rotateZ(28deg);
}

.hero-modern .hero-orbit__core {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: flex;
  width: clamp(6rem, 12vw, 8.5rem);
  aspect-ratio: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 2rem;
  color: white;
  background: linear-gradient(145deg, #0ea5e9, #1d4ed8 72%);
  box-shadow: 0 18px 45px rgb(37 99 235 / 30%), inset 0 1px rgb(255 255 255 / 40%);
  transform: translate(-50%, -50%) rotateX(8deg) rotateY(-10deg);
}

.hero-modern .hero-orbit__core-mark {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.09em;
}

.hero-modern .hero-orbit__core-label {
  font-size: 0.48rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.16em;
  text-align: center;
}

.hero-modern .hero-orbit__node {
  position: absolute;
  z-index: 3;
  display: flex;
  min-width: 9.5rem;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgb(148 163 184 / 24%);
  border-radius: 0.95rem;
  color: #0f172a;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 12px 30px rgb(15 23 42 / 10%), inset 0 1px rgb(255 255 255 / 90%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-modern .hero-orbit__node--business { top: 12%; left: 2%; }
.hero-modern .hero-orbit__node--api { top: 10%; right: 1%; }
.hero-modern .hero-orbit__node--data { right: 0; bottom: 14%; }
.hero-modern .hero-orbit__node--apps { bottom: 11%; left: 1%; }

.hero-modern .hero-orbit__node-icon {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.7rem;
  color: #0369a1;
  background: #e0f2fe;
}

.hero-modern .hero-orbit__node-copy {
  display: grid;
  gap: 0.1rem;
  line-height: 1.25;
}

.hero-modern .hero-orbit__node-copy strong { font-size: 0.75rem; }
.hero-modern .hero-orbit__node-copy small { color: #64748b; font-size: 0.62rem; }

.hero-modern .hero-orbit__spark {
  position: absolute;
  z-index: 2;
  width: 0.55rem;
  aspect-ratio: 1;
  border: 2px solid white;
  border-radius: 50%;
  background: #06b6d4;
  box-shadow: 0 0 18px rgb(6 182 212 / 72%);
}

.hero-modern .hero-orbit__spark--one { top: 31%; left: 27%; }
.hero-modern .hero-orbit__spark--two { top: 30%; right: 25%; background: #2563eb; }
.hero-modern .hero-orbit__spark--three { bottom: 27%; left: 49%; background: #0ea5e9; }

.hero-modern .hero-orbit__caption {
  position: absolute;
  inset: auto 1.25rem 1.1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  color: #64748b;
  font-size: 0.72rem;
  text-align: center;
}

.hero-modern .hero-orbit__caption span {
  width: 0.4rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #06b6d4;
  box-shadow: 0 0 10px rgb(6 182 212 / 60%);
}

.hero-modern.is-ready .hero-orbit__core {
  animation: hero-core-arrive 700ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.hero-modern.is-ready .hero-orbit__node {
  animation: hero-node-arrive 650ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.hero-modern.is-ready .hero-orbit__node--api { animation-delay: 90ms; }
.hero-modern.is-ready .hero-orbit__node--data { animation-delay: 160ms; }
.hero-modern.is-ready .hero-orbit__node--apps { animation-delay: 230ms; }

@keyframes hero-core-arrive {
  from { opacity: 0.5; transform: translate(-50%, -44%) scale(0.92) rotateX(8deg) rotateY(-10deg); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotateX(8deg) rotateY(-10deg); }
}

@keyframes hero-node-arrive {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}

html[data-theme="dark"] .hero-modern {
  background-image:
    radial-gradient(ellipse at 76% 40%, var(--hero-glow), transparent 38%),
    radial-gradient(ellipse at 91% 78%, var(--hero-glow-secondary), transparent 35%),
    linear-gradient(135deg, rgb(15 23 42 / 76%), transparent 57%);
}

html[data-theme="dark"] .hero-modern .hero-orbit {
  background:
    radial-gradient(ellipse at center, rgb(30 41 59 / 88%) 0%, var(--hero-panel) 48%, transparent 78%),
    linear-gradient(145deg, rgb(30 41 59 / 74%), rgb(15 23 42 / 50%));
  box-shadow: var(--hero-panel-shadow), inset 0 1px rgb(255 255 255 / 8%);
}

@media (max-width: 767px) {
  .hero-modern {
    background-image:
      radial-gradient(ellipse at 74% 70%, var(--hero-glow), transparent 48%),
      linear-gradient(180deg, rgb(255 255 255 / 72%), transparent 64%);
  }

  .hero-modern .hero-title,
  .hero-modern h1 {
    max-width: 12ch;
    font-size: clamp(2.65rem, 11vw, 4rem);
    line-height: 1.01;
  }

  .hero-modern .hero-orbit {
    min-height: 22rem;
    border-radius: 1.25rem;
  }

  .hero-modern .hero-orbit__stage { width: 100%; }
  .hero-modern .hero-orbit__node { min-width: 8.4rem; gap: 0.45rem; padding: 0.55rem 0.6rem; }
  .hero-modern .hero-orbit__node-icon { width: 1.85rem; height: 1.85rem; }
  .hero-modern .hero-orbit__node-copy strong { font-size: 0.68rem; }
  .hero-modern .hero-orbit__node-copy small { font-size: 0.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-modern .hero-actions a,
  .hero-modern a.inline-flex {
    transition: none;
  }

  .hero-modern .hero-actions a:hover,
  .hero-modern a.inline-flex:hover {
    transform: none;
  }

  .hero-modern.is-ready .hero-orbit__core,
  .hero-modern.is-ready .hero-orbit__node {
    animation: none;
  }
}