/* ============================================================
   AQVAERIS — U-Vir 100 & 300 Shared Styles
   css/uvir.css
   ============================================================ */

/* ── Hero ────────────────────────────────────────────────── */
.uv-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--forest);
}

.uv-hero__bg { position: absolute; inset: 0; z-index: 0; }

.uv-hero__grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* 100 — blue-green tones */
.uv-hero__mesh--100 {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 70% at 70% 35%, rgba(46,84,54,0.55)  0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 5%  75%, rgba(62,107,74,0.3)  0%, transparent 55%),
    radial-gradient(ellipse 30% 40% at 90% 10%, rgba(126,196,138,0.1) 0%, transparent 50%);
}

/* 300 — deeper, more dramatic */
.uv-hero__mesh--300 {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 80% at 60% 40%, rgba(46,84,54,0.65)  0%, transparent 60%),
    radial-gradient(ellipse 50% 65% at 0%  60%, rgba(26,43,30,0.5)   0%, transparent 55%),
    radial-gradient(ellipse 45% 50% at 95% 5%,  rgba(126,196,138,0.12) 0%, transparent 50%);
}

/* UV-C beam rings animation */
.uv-hero__beam {
  position: absolute;
  right: -80px; top: 50%;
  transform: translateY(-50%);
  width: 600px; height: 600px;
  pointer-events: none;
}

.uv-beam__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(126,196,138,0.15);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
}

.uv-beam__ring--1 { width: 200px; height: 200px; animation: ringPulse 4s ease-in-out infinite 0s;    border-color: rgba(126,196,138,0.25); }
.uv-beam__ring--2 { width: 350px; height: 350px; animation: ringPulse 4s ease-in-out infinite 0.8s;  border-color: rgba(126,196,138,0.15); }
.uv-beam__ring--3 { width: 500px; height: 500px; animation: ringPulse 4s ease-in-out infinite 1.6s;  border-color: rgba(126,196,138,0.08); }
.uv-beam__ring--4 { width: 650px; height: 650px; animation: ringPulse 4s ease-in-out infinite 2.4s;  border-color: rgba(126,196,138,0.04); }

@keyframes ringPulse {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(calc(var(--scale, 1) * 0.95)); }
  50%       { opacity: 1;   transform: translate(-50%, -50%) scale(calc(var(--scale, 1) * 1.02)); }
}

@media (max-width: 900px) {
  .uv-hero__beam { right: -200px; opacity: 0.4; }
}

/* Content */
.uv-hero__content {
  position: relative; z-index: 1;
  padding-top: calc(var(--nav-h) + var(--sp-14));
  padding-bottom: var(--sp-20);
  max-width: 760px;
}

.uv-hero__eyebrow {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.uv-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4.5vw, var(--text-4xl));
  font-weight: 500;
  color: var(--white);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-6);
}

.uv-hero__headline--300 {
  font-size: clamp(var(--text-xl), 3.5vw, var(--text-3xl));
}

.uv-hero__sub {
  font-size: clamp(var(--text-base), 1.4vw, var(--text-md));
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
  max-width: 560px;
  font-weight: 300;
  margin-bottom: var(--sp-6);
}

.uv-hero__tags {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}

/* Stat strip */
.uv-hero__stats {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding: var(--sp-6) 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: var(--sp-8);
}

.uv-stat { display: flex; flex-direction: column; gap: var(--sp-1); }

.uv-stat__value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--white);
  line-height: 1;
}

.uv-stat__label {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

.uv-stat__sep {
  width: 1px; height: 36px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

.uv-hero__footnote {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
  font-style: italic;
  margin-bottom: var(--sp-6);
  max-width: 520px;
  line-height: 1.5;
}

.uv-hero__actions {
  display: flex; align-items: center;
  gap: var(--sp-4); flex-wrap: wrap;
}

/* Scroll cue */
.uv-hero__scroll { position: absolute; bottom: var(--sp-8); left: 50%; transform: translateX(-50%); }
.uv-hero__scroll span {
  display: block; width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.4));
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { transform: scaleY(0.5); opacity: 0.3; }
  50%     { transform: scaleY(1);   opacity: 0.7; }
}

/* ── Audience tabs ───────────────────────────────────────── */
.uv-audience { background: var(--sage); }

.uv-audience__intro { margin-bottom: var(--sp-10); }

.uv-audience__title {
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  color: var(--text);
}

.uv-tabs__nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--divider);
  margin-bottom: var(--sp-8);
}

.uv-tab-btn {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--muted);
  background: none;
  border: none;
  padding: var(--sp-3) var(--sp-5);
  cursor: pointer;
  position: relative;
  transition: color var(--dur-base) var(--ease);
  letter-spacing: 0.02em;
}

.uv-tab-btn::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--moss);
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease);
}

.uv-tab-btn.active,
.uv-tab-btn[aria-selected="true"] {
  color: var(--moss);
  font-weight: 500;
}

.uv-tab-btn.active::after,
.uv-tab-btn[aria-selected="true"]::after {
  transform: scaleX(1);
}

.uv-tab-panel { display: none; }
.uv-tab-panel.active { display: block; }

.uv-audience__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

@media (max-width: 900px) { .uv-audience__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .uv-audience__grid { grid-template-columns: 1fr; } }

.uv-audience__card {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}

.uv-audience__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(46,84,54,0.2);
}

.uv-audience__card-icon {
  width: 44px; height: 44px;
  color: var(--moss);
  margin-bottom: var(--sp-4);
}

.uv-audience__card h3 {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text);
  margin-bottom: var(--sp-2);
}

.uv-audience__card p {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.6;
}

/* ── Specifications ──────────────────────────────────────── */
.uv-specs { background: var(--white); }

.uv-specs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}

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

.uv-specs__title {
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  color: var(--text);
  margin-bottom: var(--sp-3);
}

.uv-specs__sub {
  font-size: var(--text-base);
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: var(--sp-8);
}

.uv-spec-table {
  border: 1px solid var(--divider);
  border-radius: var(--r-md);
  overflow: hidden;
}

.uv-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--divider);
  gap: var(--sp-4);
}

.uv-spec-row:last-child { border-bottom: none; }
.uv-spec-row:nth-child(odd) { background: var(--sage); }

.uv-spec-label {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 400;
  min-width: 110px;
}

.uv-spec-value {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  text-align: right;
}

/* Times card */
.uv-specs__times-card {
  background: var(--forest);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  color: var(--white);
}

.uv-specs__times-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--moss-lt);
  margin-bottom: var(--sp-5);
}

.uv-time-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.uv-time-row:last-of-type { border-bottom: none; }

.uv-time-space {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.8);
}

.uv-time-vol {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.35);
  margin-left: var(--sp-2);
}

.uv-time-dur {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--moss-lt);
}

.uv-specs__doc-note {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3);
  font-style: italic;
  line-height: 1.5;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* ── HVAC Section ────────────────────────────────────────── */
.uv-hvac {
  position: relative;
  background: var(--forest);
  overflow: hidden;
}

.uv-hvac__bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 15% 50%, rgba(62,107,74,0.35) 0%, transparent 60%);
}

.uv-hvac__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-16);
  align-items: center;
}

@media (max-width: 860px) { .uv-hvac__inner { grid-template-columns: 1fr; } }

.uv-hvac__title {
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  color: var(--white);
  line-height: 1.2;
}

.uv-hvac__body {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.65);
  line-height: 1.8;
  margin-bottom: var(--sp-4);
}

.uv-hvac__tags {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-2);
}

/* ── Visibility Section (U-Vir 100 only) ────────────────── */
.uv-visibility { background: var(--sage); }

.uv-visibility__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-16);
  align-items: center;
}

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

.uv-visibility__title {
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  color: var(--text);
  margin-bottom: var(--sp-4);
}

.uv-visibility__body {
  font-size: var(--text-base);
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: var(--sp-4);
}

/* LED demo widget */
.uv-led__unit {
  position: relative;
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.uv-led__body {
  width: 60px;
  height: 200px;
  background: linear-gradient(to bottom, var(--forest), rgba(26,43,30,0.8));
  border-radius: 30px;
  border: 1px solid rgba(46,84,54,0.3);
  position: relative;
  box-shadow: var(--shadow-lg);
}

.uv-led__indicator {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.uv-led__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 8px #4ADE80, 0 0 20px rgba(74,222,128,0.4);
  animation: ledPulse 2.5s ease-in-out infinite;
}

@keyframes ledPulse {
  0%,100% { opacity: 0.8; box-shadow: 0 0 6px #4ADE80, 0 0 16px rgba(74,222,128,0.3); }
  50%     { opacity: 1;   box-shadow: 0 0 10px #4ADE80, 0 0 28px rgba(74,222,128,0.5); }
}

.uv-led__glow {
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74,222,128,0.15) 0%, transparent 70%);
}

.uv-led__caption {
  font-size: var(--text-xs);
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.06em;
}

/* ── Differentiators (U-Vir 300 only) ───────────────────── */
.uv-diff {
  position: relative;
  background: var(--forest-deep);
  overflow: hidden;
}

.uv-diff__bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(46,84,54,0.2) 0%, transparent 65%);
}

.uv-diff > .container { position: relative; z-index: 1; }

.uv-diff__intro { margin-bottom: var(--sp-12); }

.uv-diff__title {
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  color: var(--white);
}

.uv-diff__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
}

@media (max-width: 1100px) { .uv-diff__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:  640px) { .uv-diff__grid { grid-template-columns: repeat(2, 1fr); } }

.uv-diff__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(126,196,138,0.12);
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  transition: border-color var(--dur-base) var(--ease),
              background   var(--dur-base) var(--ease);
}

.uv-diff__card:hover {
  border-color: rgba(126,196,138,0.3);
  background: rgba(255,255,255,0.07);
}

.uv-diff__metric {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  color: var(--moss-lt);
  line-height: 1;
  margin-bottom: var(--sp-3);
  display: flex;
  justify-content: center;
}

.uv-diff__metric svg { color: var(--moss-lt); }

.uv-diff__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--white);
  margin-bottom: var(--sp-2);
}

.uv-diff__sub {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.35);
}

/* ── CTA section ─────────────────────────────────────────── */
.uv-cta { background: var(--white); border-top: 1px solid var(--divider); }

.uv-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

.uv-cta__title {
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  color: var(--text);
  margin-bottom: var(--sp-2);
}

.uv-cta__sub {
  font-size: var(--text-sm);
  color: var(--muted);
}

.uv-cta__actions {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
}

/* ── Tab activation via main.js ──────────────────────────── */
.lang-dropdown.open { display: block !important; }