/* Home composition. Component appearance belongs to system-*.css. */
.home main {
  --content-inset: var(--frame-inset);
  --block-gap: var(--space-12);
}
/* The case keeps the approved camera and drawing; its height sets the hero's height. */
.home .hero.hero-unified {
  height: auto;
  min-height: calc(var(--hero-height) + var(--header-overlap));
  margin-top: calc(-1 * var(--header-overlap));
  padding: calc(var(--hero-padding) + var(--header-overlap)) var(--frame-inset) var(--space-32);
  background: radial-gradient(ellipse 44% 58% at 72% 58%, rgb(var(--brand-rgb) / 12%), var(--surface-clear) 70%), var(--surface-canvas);
}
.home .hero.hero-unified .hero-copy { z-index: 2; flex: 0 0 54%; min-width: 0; margin-top: calc(var(--space-16) - var(--space-128)); }
.home .hero-copy h1 { font-size: var(--text-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
.home .hero-copy > p { color: var(--ink); }
.home .hero-lead-close { display: block; color: var(--ink-muted); }
.home .hero-actions { flex-wrap: wrap; gap: var(--space-16) var(--space-24); }
.home .hero-unified-noise { opacity: var(--texture-opacity); }

.home-case {
  position: relative;
  z-index: 1;
  flex: 0 0 68%;
  min-width: 0;
  margin: calc(var(--space-32) + var(--space-12)) calc(var(--space-16) - var(--frame-inset)) 0 calc(-22% + var(--frame-inset) - var(--space-16));
  pointer-events: none;
}
.home-case-stage { position: relative; touch-action: manipulation; outline: none; }
.home-case-stage.is-interactive { cursor: pointer; }
.home-case-svg { display: block; width: 100%; height: auto; overflow: visible; }
.home-case-svg :is(path, text) { pointer-events: visiblePainted; }
.home-case-svg path { stroke: none; }
.home-case-svg .case-raised { fill: var(--surface-raised); }
.home-case-svg .case-canvas { fill: var(--surface-canvas); }
.home-case-svg .case-inset { fill: var(--surface-inset); }
.home-case-svg :is(.case-shade-8, .case-shade-4, .case-mark, .case-lcd, [class^="case-dot-"], .case-device-text) { fill: var(--ink); }
.home-case-svg .case-shade-8 { fill-opacity: 0.08; }
.home-case-svg .case-shade-4 { fill-opacity: 0.04; }
.home-case-svg :is(.case-brand, .case-orange-40, .case-orange-65, .case-glow) { fill: var(--brand); }
.home-case-svg .case-orange-40 { fill-opacity: 0.4; }
.home-case-svg .case-orange-65 { fill-opacity: 0.65; }
.home-case-svg .case-glow { fill-opacity: 0.22; }
.home-case-svg .case-mark { fill-opacity: 0.65; }
.home-case-svg .case-lcd { fill-opacity: 0.8; }
.home-case-svg .case-dot-hi { fill-opacity: 0.85; }
.home-case-svg .case-dot-mid { fill-opacity: 0.45; }
.home-case-svg :is([class^="case-line-"], .case-selection) {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.home-case-svg .case-line-mid { stroke-opacity: 0.65; }
.home-case-svg .case-line-lo { stroke-opacity: 0.45; }
.home-case-svg .case-line-faint { stroke-opacity: 0.22; }
.home-case-svg .case-line-brand { stroke: var(--brand); }
.home-case-svg .case-selection { stroke: var(--brand); stroke-width: 1.4px; opacity: 0; transition: opacity var(--duration-panel) var(--ease); }
.home-case-svg [data-case-level].is-selected .case-selection { opacity: 1; }
.home-case-svg .case-detail { transition: opacity var(--duration-panel) var(--ease); }
.home-case-svg [data-case-level].is-dim .case-detail { opacity: 0.35; }
.home-case-svg .case-device-text { font-family: var(--font-mono); font-size: var(--text-figure); font-weight: var(--weight-label); letter-spacing: 0.02em; }
.home-case-svg .case-contact { fill: url(#home-case-shadow); pointer-events: none; }
.home-case-svg .case-shadow-core { stop-color: rgb(var(--shadow-rgb) / 24%); }
.home-case-svg .case-shadow-edge { stop-color: rgb(var(--shadow-rgb) / 0%); }
.home .home-case-stage:focus-visible { outline: none; }
.home-case-svg .case-focus {
  fill: none;
  stroke: var(--brand);
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  pointer-events: none;
}
.home-case-svg .case-focus-halo { stroke-width: var(--space-8); stroke-opacity: 0.16; }
.home-case-svg .case-focus-line { stroke-width: var(--focus-width); }
.home-case-stage:focus-visible .case-focus { opacity: 1; }
.home-case-status {
  position: absolute;
  inline-size: var(--rule-width);
  block-size: var(--rule-width);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The operator's motion switch, added by js/home-hero-case.mjs on internal hosts only. */
.case-motion {
  position: fixed;
  inset-block-end: var(--space-16);
  inset-inline-start: var(--space-16);
  z-index: 40;
  display: grid;
  gap: var(--space-8);
  max-inline-size: calc(100vw - 2 * var(--space-16));
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-panel);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lifted);
  font-size: var(--text-label);
  line-height: var(--lh-label);
}
.case-motion p { margin: 0; }
.case-motion-title { font-weight: var(--weight-label); }
.case-motion-options { display: flex; gap: var(--space-4); }
.case-motion-device { color: var(--ink-muted); }

.home .metric { min-block-size: var(--space-128); gap: var(--space-8); }
.home .metric dt, .home .metric-unit { color: var(--ink-muted); }
.home .metric-meter { background: var(--surface-divider); }
.home .customer-carousel { min-height: var(--reference-height); }
@media (min-width: 640px) {
  .home .customer-carousel { grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr); }
}
.home .customer-carousel-heading { justify-content: center; }
.home .customer-carousel-heading p, .home .customer-list span { color: var(--ink-muted); }
.home .customer-marquee { align-content: center; padding: 0; }
.home .customer-marquee-secondary { grid-column: 1 / -1; border-inline-start: 0; border-top: var(--rule-width) solid var(--surface-divider); }
.home .customer-list li { padding: var(--space-12) var(--space-24); }

.home .infrastructure { padding-block: var(--section-compact) var(--space-48); }
.home .infrastructure-grid { gap: var(--space-32) var(--space-48); }
.home .infrastructure-grid > :first-child { padding-inline: var(--frame-inset); }
.home .infrastructure p { color: var(--ink-muted); margin-inline-start: 0; }
.home .whyus-head, .home .tariff-cta-head { padding-top: var(--space-16); }
.home .whyus-lead, .home .tariff-cta-lead { color: var(--ink-muted); }
.home .whyus-bento { gap: var(--space-24); }
.home .wb-text { padding: 0; }
.home .tariff-cta { padding-block: var(--section-compact); }
.home .tariff-cards { gap: var(--space-24); }
.home .tariff-card-link { container-type: inline-size; height: 100%; align-items: flex-start; }
.home .tariff-card-price, .home .tariff-card-note { color: var(--ink-muted); }
.home .tariff-card-num { color: var(--brand); }
.home .tariff-cta-head h2 em { color: var(--brand-text); }
/* İYS: one wide card under the three tariff cards. On wide screens its plate
   keeps the first column's width and its copy starts where the second card's
   copy starts, so the row reads as part of the same grid. */
.home .tariff-card--wide { grid-column: 1 / -1; }
.home .tariff-card-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); min-width: 0; }
.home .tariff-card-copy > :is(h3, .tariff-card-note) { margin: 0; }
.home .tariff-card--wide .tariff-card-note { max-width: 62ch; font-size: var(--text-sm); white-space: normal; }
.home .tariff-card-go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  text-decoration: underline;
  text-decoration-color: var(--surface-divider);
  text-decoration-thickness: var(--rule-width);
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--duration-micro) var(--ease);
}
.home .tariff-card-go svg { inline-size: var(--space-16); block-size: var(--space-16); transition: transform var(--duration-micro) var(--ease); }
.home .tariff-card-link:is(:hover, :focus-visible) .tariff-card-go { text-decoration-color: var(--brand); }
.home .tariff-card-link:is(:hover, :focus-visible) .tariff-card-go svg { transform: translateX(3px); }
@media (min-width: 1024px) {
  .home .tariff-card--wide .tariff-card-link {
    display: grid;
    grid-template-columns: calc((100% - 2 * var(--space-24) - var(--card-padding)) / 3) minmax(0, 1fr);
    column-gap: calc(var(--space-24) + var(--card-padding));
    align-items: center;
  }
  /* The copy sets the row's height; the drawing fills whatever that is. */
  .home .tariff-card--wide .tariff-plate {
    position: relative;
    align-self: stretch;
    width: auto;
    aspect-ratio: auto;
    margin: calc(-1 * var(--card-padding)) 0 calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding));
    border-bottom: 0;
    border-right: var(--rule-width) solid var(--line);
  }
  .home .tariff-card--wide .tariff-plate svg { position: absolute; inset: 0; }
}

.home .faq-inner { gap: var(--space-48); }
.home .faq-rail { padding-inline: var(--frame-inset); top: var(--scroll-offset); }
.home .faq-lead, .home .faq-help dt { color: var(--ink-muted); }
.home .faq-help > div { padding-block: var(--space-16) 0; }

@media (min-width: 1024px) and (max-width: 1279px) {
  .home .hero.hero-unified .hero-copy { margin-top: calc(-1 * var(--space-64)); }
}

@media (max-width: 1023px) {
  .home .hero.hero-unified {
    display: block;
    min-height: 0;
    padding: calc(var(--space-32) + var(--header-overlap)) var(--frame-inset) var(--space-24);
    background: var(--surface-canvas);
  }
  .home .hero.hero-unified .hero-copy { width: 100%; margin-top: 0; }
  .home-case {
    width: calc(100% + 2 * var(--frame-inset));
    margin: var(--space-16) calc(-1 * var(--frame-inset)) 0;
    background: radial-gradient(ellipse 74% 58% at 50% 50%, rgb(var(--brand-rgb) / 12%), var(--surface-clear) 70%);
  }
  .home .infrastructure-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "map"; }
  .home .tariff-cta-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "lead" "action"; gap: var(--space-24); }
  .home .tariff-cards { grid-template-columns: minmax(0, 1fr); }
  .home .faq-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .home .faq-rail { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .home-case-svg :is(.case-detail, .case-selection) { transition: none; }
  .home .tariff-card-go, .home .tariff-card-go svg { transition: none; }
}