/* ============================================================
   MELS Group — Premium Design System
   Applied on top of Tailwind CDN
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* ── Custom Properties ── */
:root {
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Construction palette */
  --c-navy-950: #060e18;
  --c-navy-900: #0c1f35;
  --c-navy-800: #152d4a;
  --c-navy-700: #1e3c61;
  --c-amber:    #EF3B00;
  --c-amber-lt: #FF6B35;

  /* IT palette */
  --c-cyber-950: #03070f;
  --c-cyber-900: #080f1c;
  --c-cyan:      #06b6d4;
  --c-blue:      #3b82f6;

  /* Neutral */
  --c-white:  #ffffff;
  --c-slate-50:  #f8fafc;
  --c-slate-100: #f1f5f9;
  --c-slate-200: #e2e8f0;
  --c-slate-500: #64748b;
  --c-slate-700: #334155;
  --c-slate-900: #0f172a;

  /* Shadows */
  --shadow-card:    0 1px 3px rgba(0,0,0,.05), 0 8px 24px -4px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
  --shadow-card-hv: 0 2px 6px rgba(0,0,0,.04), 0 16px 40px -8px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.05);
  --shadow-btn:     0 1px 2px rgba(0,0,0,.08), 0 4px 12px -2px rgba(239,59,0,.35);
  --shadow-btn-cy:  0 1px 2px rgba(0,0,0,.1),  0 4px 12px -2px rgba(6,182,212,.35);
  --shadow-glow-am: 0 0 0 3px rgba(239,59,0,.15), 0 8px 32px rgba(239,59,0,.12);
  --shadow-glow-cy: 0 0 0 3px rgba(6,182,212,.12),  0 8px 32px rgba(6,182,212,.10);

  /* Radius */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  18px;
  --r-2xl: 24px;
  --r-3xl: 32px;

  /* Transitions */
  --ease-spring: cubic-bezier(.16,1,.3,1);
  --ease-out:    cubic-bezier(.22,1,.36,1);
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

body { font-family: var(--font-body); }

h1, h2, h3, h4, h5, h6,
.font-display { font-family: var(--font-display); }

/* ── Scroll progress ── */
#scroll-bar {
  position: fixed; top: 0; left: 0; height: 2.5px; width: 0%;
  background: linear-gradient(90deg, var(--c-amber), var(--c-amber-lt), var(--c-cyan));
  z-index: 9999; transition: width .12s linear;
  box-shadow: 0 0 10px rgba(239,59,0,.5);
}

/* ── Noise textures ── */
.noise-dark::after,
.noise-light::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .025;
  mix-blend-mode: overlay;
}
.noise-light::after { opacity: .018; }
.noise-dark { position: relative; }
.noise-light { position: relative; }

/* ── Reveal animations ── */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  opacity: 0; will-change: opacity, transform;
}
.reveal       { transform: translateY(32px); transition: opacity .8s var(--ease-spring), transform .8s var(--ease-spring); }
.reveal-left  { transform: translateX(-32px); transition: opacity .8s var(--ease-spring), transform .8s var(--ease-spring); }
.reveal-right { transform: translateX(32px);  transition: opacity .8s var(--ease-spring), transform .8s var(--ease-spring); }
.reveal-scale { transform: scale(.94);         transition: opacity .7s var(--ease-spring), transform .7s var(--ease-spring); }
.reveal.show, .reveal-left.show, .reveal-right.show, .reveal-scale.show { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; }
.d5 { transition-delay: .40s; }

/* ── Navigation ── */
.nav-premium {
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.nav-premium.scrolled {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: rgba(15,42,74,.07);
  box-shadow: 0 1px 0 rgba(15,42,74,.04), 0 4px 16px rgba(0,0,0,.06);
}
.nav-premium.scrolled-dark {
  background: rgba(6,7,15,.88);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: rgba(6,182,212,.08);
}

/* Nav links */
.nav-link-premium {
  position: relative; font-size: .875rem; font-weight: 500;
  transition: color .2s ease;
}
.nav-link-premium::after {
  content: '';
  position: absolute; bottom: -4px; left: 0; right: 0;
  height: 2px; border-radius: 2px;
  background: var(--c-amber);
  transform: scaleX(0); transform-origin: center;
  transition: transform .25s var(--ease-spring);
}
.nav-link-premium:hover::after,
.nav-link-premium.active::after { transform: scaleX(1); }

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--c-amber);
  color: #fff; font-family: var(--font-display); font-weight: 700;
  padding: .75rem 1.75rem; border-radius: var(--r-xl);
  font-size: .9rem; letter-spacing: -.01em;
  transition: background .2s ease, transform .2s var(--ease-spring), box-shadow .2s ease;
  box-shadow: var(--shadow-btn);
  position: relative; overflow: hidden;
}
.btn-primary:hover {
  background: #C42D00;
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 8px 24px -4px rgba(239,59,0,.45);
}
.btn-primary:active { transform: translateY(0); }

.btn-primary-cy {
  background: var(--c-cyan);
  box-shadow: var(--shadow-btn-cy);
}
.btn-primary-cy:hover {
  background: #00a3bb;
  box-shadow: 0 2px 6px rgba(0,0,0,.1), 0 8px 24px -4px rgba(6,182,212,.45);
}

.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1.5px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.85); font-family: var(--font-display); font-weight: 600;
  padding: .75rem 1.75rem; border-radius: var(--r-xl);
  font-size: .9rem; letter-spacing: -.01em;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.btn-ghost:hover {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.06);
  color: #fff;
}

.btn-ghost-dark {
  border-color: var(--c-slate-200);
  color: var(--c-slate-700);
}
.btn-ghost-dark:hover {
  border-color: var(--c-amber);
  color: var(--c-navy-900);
}

/* Shimmer */
.btn-shimmer { position: relative; overflow: hidden; }
.btn-shimmer::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .55s var(--ease-out);
}
.btn-shimmer:hover::before { transform: translateX(100%); }

/* ── Cards (light) ── */
.card-premium {
  background: #fff; border-radius: var(--r-2xl);
  border: 1px solid rgba(15,42,74,.07);
  box-shadow: var(--shadow-card);
  transition: transform .35s var(--ease-spring), box-shadow .35s ease, border-color .25s ease;
  overflow: hidden;
}
.card-premium:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hv);
  border-color: rgba(239,59,0,.2);
}

/* ── Cards (dark) ── */
.card-dark {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .35s var(--ease-spring), box-shadow .35s ease, border-color .25s ease, background .25s ease;
}
.card-dark:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.055);
  border-color: rgba(6,182,212,.25);
  box-shadow: var(--shadow-glow-cy);
}
.card-dark.amber:hover {
  border-color: rgba(245,158,11,.25);
  box-shadow: var(--shadow-glow-am);
}

/* ── Icon containers ── */
.icon-box {
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-lg); flex-shrink: 0;
  transition: transform .3s var(--ease-spring);
}
.card-premium:hover .icon-box,
.card-dark:hover .icon-box { transform: scale(1.08) rotate(-2deg); }

/* ── Section tags ── */
.section-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}

/* ── Headings ── */
.heading-xl {
  font-family: var(--font-display); font-weight: 900;
  letter-spacing: -.03em; line-height: 1.05;
}
.heading-lg {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.1;
}
.heading-md {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.2;
}

/* ── Gradient text ── */
@keyframes grad-pan {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.text-grad-amber {
  background: linear-gradient(110deg, #EF3B00 0%, #FF6B35 30%, #FF3300 65%, #EF3B00 100%);
  background-size: 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: grad-pan 5s ease infinite;
}
.text-grad-cyan {
  background: linear-gradient(110deg, #06b6d4 0%, #38bdf8 30%, #818cf8 65%, #06b6d4 100%);
  background-size: 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: grad-pan 5s ease infinite;
}
.text-grad-dual {
  background: linear-gradient(110deg, #EF3B00 0%, #FF6B35 30%, #06b6d4 70%, #3b82f6 100%);
  background-size: 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: grad-pan 6s ease infinite;
}

/* ── Dividers ── */
.divider-amber { height: 1px; background: linear-gradient(to right, transparent, rgba(239,59,0,.3), transparent); }
.divider-cyan  { height: 1px; background: linear-gradient(to right, transparent, rgba(6,182,212,.25), transparent); }
.divider-dual  { height: 1px; background: linear-gradient(to right, transparent, rgba(239,59,0,.3), rgba(6,182,212,.3), transparent); }

/* ── Badges / Pills ── */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  padding: .3rem .75rem; border-radius: 9999px;
}
.badge-amber { background: rgba(239,59,0,.1); color: #C42D00; border: 1px solid rgba(239,59,0,.2); }
.badge-cyan  { background: rgba(6,182,212,.1);  color: #0891b2; border: 1px solid rgba(6,182,212,.2); }
.badge-amber-dark { background: rgba(239,59,0,.12); color: #FF6B35; border: 1px solid rgba(239,59,0,.22); }
.badge-cyan-dark  { background: rgba(6,182,212,.1);   color: #67e8f9; border: 1px solid rgba(6,182,212,.2); }

/* ── Split hero ── */
.split-wrap { display: flex; min-height: 100svh; overflow: hidden; }
.split-panel {
  position: relative; overflow: hidden; cursor: pointer;
  transition: flex .65s cubic-bezier(.77,0,.18,1);
  flex: 1;
}
.split-wrap:hover .split-panel:not(:hover) { flex: .33; }
.split-wrap:hover .split-panel:hover        { flex: .67; }

/* Construction panel */
.split-construction {
  background: radial-gradient(ellipse at 80% 60%, #1a3a5c 0%, #0c1f35 60%, #060e18 100%);
}
.split-construction::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient( 45deg, transparent, transparent 48px, rgba(239,59,0,.035) 48px, rgba(239,59,0,.035) 49px),
    repeating-linear-gradient(-45deg, transparent, transparent 48px, rgba(255,255,255,.018) 48px, rgba(255,255,255,.018) 49px);
}

/* IT panel */
.split-it {
  background: radial-gradient(ellipse at 20% 40%, #0f2340 0%, #080f1c 55%, #03070f 100%);
}
.split-it::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(6,182,212,.1) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* Glow blobs */
.split-construction::after {
  content: ''; position: absolute; bottom: -20%; left: -5%;
  width: 60%; padding-top: 60%; border-radius: 50%;
  background: radial-gradient(circle, rgba(239,59,0,.14) 0%, transparent 70%);
  animation: blob-drift 9s ease-in-out infinite;
}
.split-it::after {
  content: ''; position: absolute; top: -15%; right: -5%;
  width: 55%; padding-top: 55%; border-radius: 50%;
  background: radial-gradient(circle, rgba(6,182,212,.11) 0%, transparent 70%);
  animation: blob-drift 11s ease-in-out infinite 2s;
}
@keyframes blob-drift {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50%       { transform: scale(1.12) translate(2%, 3%); }
}

/* Split content */
.split-content {
  position: relative; z-index: 10;
  height: 100%; display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 3.5rem 4rem;
}
@media (max-width: 768px) {
  .split-wrap { flex-direction: column; height: auto; }
  .split-panel { min-height: 52svh; flex: 1 !important; }
  .split-content { padding: 3rem 1.5rem 2.5rem; }
}

/* Split divider */
.split-divider-line {
  position: absolute; right: 0; top: 8%; bottom: 8%; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(239,59,0,.35) 40%, rgba(6,182,212,.3) 60%, transparent);
  z-index: 20;
}

/* ── Feature rows ── */
.feature-row {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem 1.25rem; border-radius: var(--r-lg);
  transition: background .2s ease;
}
.feature-row:hover { background: rgba(239,59,0,.04); }
.feature-row-dark:hover { background: rgba(255,255,255,.04); }

/* ── Stats counter ── */
.counter-num {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-weight: 900; letter-spacing: -.04em;
}

/* ── Hero backgrounds ── */
.hero-construction {
  background: radial-gradient(ellipse at 70% 50%, #1a3a5c 0%, #0c1f35 45%, #060e18 100%);
}
.hero-it {
  background: radial-gradient(ellipse at 30% 50%, #0f2340 0%, #080f1c 50%, #03070f 100%);
}

/* ── Floating animation ── */
@keyframes float-premium {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-10px) rotate(.5deg); }
  66%       { transform: translateY(-6px) rotate(-.3deg); }
}
.float-premium { animation: float-premium 8s ease-in-out infinite; }

/* ── Section background helpers ── */
.bg-grid {
  background-image: radial-gradient(rgba(6,182,212,.07) 1px, transparent 1px);
  background-size: 30px 30px;
}
.bg-grid-light {
  background-image: radial-gradient(rgba(15,42,74,.04) 1px, transparent 1px);
  background-size: 28px 28px;
}
.bg-lines {
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 44px, rgba(239,59,0,.03) 44px, rgba(239,59,0,.03) 45px);
}

/* ── Form inputs ── */
.input-premium {
  width: 100%; border: 1.5px solid #e2e8f0;
  border-radius: var(--r-lg); padding: .75rem 1rem;
  font-family: var(--font-body); font-size: .875rem;
  color: #0f172a; background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
  outline: none;
}
.input-premium::placeholder { color: #94a3b8; }
.input-premium:focus {
  border-color: var(--c-amber);
  box-shadow: 0 0 0 3px rgba(239,59,0,.1);
}

/* ── Language switcher ── */
.lang-btn {
  display: flex; align-items: center; gap: .35rem;
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: var(--r-md); padding: .35rem .65rem;
  font-size: .75rem; font-weight: 600;
  transition: border-color .2s ease, background .2s ease;
}
.lang-btn:hover { border-color: rgba(239,59,0,.5); background: rgba(239,59,0,.06); }
.lang-btn.light { border-color: rgba(15,42,74,.12); color: #475569; }
.lang-btn.light:hover { border-color: var(--c-amber); color: var(--c-navy-900); }

/* ── Scroll hint ── */
@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}
.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.3); transition: color .2s ease;
  animation: scroll-bounce 2.5s ease-in-out infinite;
}
.scroll-hint:hover { color: rgba(255,255,255,.6); }

/* ── CTA sections ── */
.cta-construction {
  background: linear-gradient(135deg, #0c1f35 0%, #152d4a 60%, #1e3c61 100%);
  position: relative; overflow: hidden;
}
.cta-construction::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 32px, rgba(239,59,0,.025) 32px, rgba(239,59,0,.025) 33px);
}

.cta-amber {
  background: linear-gradient(135deg, #C42D00 0%, #EF3B00 50%, #FF6B35 100%);
  position: relative; overflow: hidden;
}
.cta-amber::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 28px, rgba(0,0,0,.04) 28px, rgba(0,0,0,.04) 29px);
}

.cta-it {
  background: linear-gradient(135deg, #03070f 0%, #080f1c 60%, #0f2340 100%);
  position: relative; overflow: hidden;
}
.cta-it::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(6,182,212,.07) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ── Footer ── */
.footer-premium {
  background: linear-gradient(180deg, #060e18 0%, #030911 100%);
  border-top: 1px solid rgba(255,255,255,.05);
}

/* ── Strategic Alliances Banner ── */
.alliances-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #020a14 0%, #060e1a 50%, #020a14 100%);
}
.alliances-banner::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(6,182,212,.035) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.alliances-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (min-width: 768px) {
  .alliances-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
  }
}

.alliance-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all .35s ease;
}
.alliance-logo-card:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(6,182,212,.3);
  box-shadow: 0 0 0 3px rgba(6,182,212,.07), 0 8px 28px rgba(6,182,212,.1);
  transform: translateY(-3px);
}
.alliance-logo-card img {
  max-width: 100%;
  max-height: 48px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) brightness(1.3) contrast(0.9);
  transition: filter .35s ease;
}
.alliance-logo-card:hover img {
  filter: grayscale(0%) brightness(1) contrast(1);
}

/* ── Logo Marquee Banner ── */
.logo-marquee-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #03070f 0%, #060e18 50%, #03070f 100%);
}
.logo-marquee-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(6,182,212,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.logo-marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}
.logo-marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.logo-marquee-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 220px;
  height: 90px;
  margin: 0 24px;
  padding: 16px 28px;
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .4s var(--ease-spring);
  cursor: default;
}
.logo-marquee-item:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(6,182,212,.3);
  box-shadow: 0 0 0 3px rgba(6,182,212,.08), 0 8px 32px rgba(6,182,212,.12);
  transform: translateY(-3px) scale(1.03);
}

.logo-marquee-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(100%) brightness(1.2);
  transition: filter .4s ease;
}
.logo-marquee-item:hover img {
  filter: grayscale(0%) brightness(1);
}

/* Fade edges */
.logo-marquee-mask {
  position: relative;
  overflow: hidden;
}
.logo-marquee-mask::before,
.logo-marquee-mask::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 120px;
  z-index: 10; pointer-events: none;
}
.logo-marquee-mask::before {
  left: 0;
  background: linear-gradient(to right, #03070f, transparent);
}
.logo-marquee-mask::after {
  right: 0;
  background: linear-gradient(to left, #03070f, transparent);
}

/* Glow line separator */
.logo-marquee-glow-line {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(6,182,212,.2) 20%, rgba(239,59,0,.15) 50%, rgba(6,182,212,.2) 80%, transparent);
  margin: 0 auto;
  max-width: 800px;
}

/* ── Utility ── */
.overflow-clip { overflow: hidden; }
.pointer-none  { pointer-events: none; }
[x-cloak]      { display: none !important; }