/* Industries hub + six sector pages. Brand tokens come from site.css. */

/* ------------------------------------------------------------ layout */
.ind-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.ind-hero-copy .btn-row {
  margin-top: 30px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.ind-note {
  margin-top: 22px;
  font-size: 15px;
  color: var(--lav-800);
}
.ind-hero-photo {
  position: relative;
  min-height: 440px;
}
.ind-hero-photo > img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 28px;
  display: block;
}
.ind-float {
  position: absolute;
  left: -36px;
  bottom: 28px;
  width: min(360px, 86%);
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--lav-300);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 18px 40px rgba(18, 19, 15, .12);
}
.ind-float.dark {
  background: var(--onyx);
  border-color: var(--dark-line);
  color: var(--white);
}
.ind-live {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lav-800);
}
.ind-float.dark .ind-live { color: var(--gal-300); }
.ind-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gal-600);
  display: block;
  flex-shrink: 0;
}
.ind-float p { margin: 0; font-size: 16px; line-height: 1.4; }

/* Hub sector cards — photo-led, large */
.ind-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 44px;
}
.ind-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--lav-300);
  border-radius: 28px;
  overflow: hidden;
  min-height: 44px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ind-card:hover { color: inherit; transform: translateY(-6px); box-shadow: 0 18px 40px rgba(18, 19, 15, .1); }
.ind-card:hover h3 { color: var(--lav-700); }
.ind-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}
.ind-card-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex-grow: 1; }
.ind-card h3 { margin: 8px 0 8px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.ind-card p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.ind-more {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 16px;
  color: var(--lav-700);
  font-weight: 600;
}

/* Shared strengths */
.ind-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 36px;
}
.ind-stat {
  padding: 8px 28px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-inline-end: 1px solid var(--lav-300);
}
.ind-stat:last-child { border-inline-end: 0; padding-inline-end: 0; }
.ind-stat .n {
  font-size: 48px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--lav-700);
  font-variant-numeric: tabular-nums;
}
.ind-stat p { margin: 0; font-size: 15px; line-height: 1.4; }

.ind-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}
.ind-pill {
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--lav-300);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}
.ind-pill svg { width: 18px; height: 18px; color: var(--lav-700); flex-shrink: 0; }

/* Rooms we serve */
.ind-rooms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 36px;
}
.ind-rooms.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ind-room {
  position: relative;
  min-height: 220px;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 22px 24px;
  color: var(--white);
  background: var(--onyx);
}
.ind-room img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.42) saturate(.85);
}
.ind-room > * { position: relative; }
.ind-room h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--white); }
.ind-room p { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: var(--lav-100); }
.ind-room.solid {
  background: var(--lav-100);
  color: var(--onyx);
  min-height: 180px;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
}
.ind-room.solid h3 { color: var(--onyx); }
.ind-room.solid p { color: var(--ink-2); }
.ind-room.solid svg { width: 36px; height: 36px; color: var(--lav-700); }

/* What matters — feature tiles */
.ind-feats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  margin-top: 36px;
}
.ind-feat {
  padding: 26px 28px;
  background: var(--white);
  border: 1px solid var(--lav-300);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ind-feat .fi { margin-bottom: 4px; }
.ind-feat h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.015em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ind-feat p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.ind-feat .why { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--lav-300); font-size: 14px; line-height: 1.45; }
.ind-feat .why strong { font-weight: 600; color: var(--lav-700); }
.sec-dark .ind-feat, .sec-purple .ind-feat, .sec-deep .ind-feat {
  background: var(--dark-1);
  border-color: var(--dark-line);
}
.sec-dark .ind-feat h3, .sec-purple .ind-feat h3, .sec-deep .ind-feat h3 { color: var(--white); }
.sec-dark .ind-feat p, .sec-purple .ind-feat p, .sec-deep .ind-feat p { color: var(--lav-100); }
.sec-dark .ind-feat .why, .sec-purple .ind-feat .why, .sec-deep .ind-feat .why { border-top-color: var(--dark-line); }
.sec-dark .ind-feat .why strong, .sec-purple .ind-feat .why strong { color: var(--gal-300); }

/* Mock stages */
.ind-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 28px;
  margin-top: 36px;
  align-items: stretch;
}
.ind-stage.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.ind-stage.wide { grid-template-columns: minmax(0, 1fr); }
.ind-mock {
  background: var(--white);
  border: 1px solid var(--lav-300);
  border-radius: 24px;
  overflow: hidden;
  min-height: 360px;
}
.ind-mock.dark {
  background: var(--onyx);
  border-color: var(--dark-line);
  color: var(--white);
}
.ind-mock-pad { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; height: 100%; }
.ind-caption { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--lav-800); }
.ind-mock.dark .ind-caption { color: var(--gal-300); }

/* Projector screen */
.proj {
  background: var(--onyx);
  color: var(--white);
  border-radius: 18px;
  padding: 22px 24px;
  display: flex;
  gap: 18px;
  min-height: 240px;
}
.proj-copy { flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.proj-copy .lang { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gal-300); }
.proj-copy .prev { font-size: 16px; line-height: 1.35; color: var(--lav-100); }
.proj-copy .now { font-size: 22px; line-height: 1.3; font-weight: 600; }
.proj-qr {
  width: 110px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.proj-qr .box {
  width: 96px; height: 96px;
  padding: 6px;
  background: var(--white);
  border-radius: 8px;
}
.proj-qr span { font-size: 11px; color: var(--lav-100); text-align: center; }

/* Kiosk tablet */
.kiosk {
  width: 280px;
  margin: 0 auto;
  padding: 10px;
  background: var(--onyx);
  border-radius: 28px;
}
.kiosk-screen {
  background: var(--nebula);
  border-radius: 20px;
  padding: 20px 18px 18px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--onyx);
}
.kiosk-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kiosk-lang {
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--lav-300);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.kiosk-lang.on { background: var(--lav-700); color: var(--white); border-color: var(--lav-700); }
.kiosk-ok {
  margin-top: auto;
  padding: 14px;
  border-radius: 16px;
  background: var(--gal-100);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kiosk-ok .ch { font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.kiosk-ok .cd { font-size: 13px; color: var(--ink-2); }

/* Phone */
.phone {
  width: 260px;
  margin: 0 auto;
  padding: 10px;
  background: var(--onyx);
  border-radius: 36px;
}
.phone-screen {
  background: var(--white);
  border-radius: 28px;
  padding: 26px 18px 18px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--onyx);
}
.phone-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.phone-chip {
  height: 28px; padding: 0 10px; border-radius: 999px;
  background: var(--lav-100); color: var(--lav-800);
  font-size: 13px; display: flex; align-items: center;
}
.phone-cap { font-size: 15px; line-height: 1.45; color: var(--muted); }
.phone-now { font-size: 17px; line-height: 1.4; font-weight: 600; }
.phone-listen {
  margin-top: auto;
  height: 52px;
  border-radius: 999px;
  background: var(--lav-700);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
}
.waves { display: flex; align-items: center; gap: 3px; height: 28px; }
.waves i {
  width: 4px; height: 22px; border-radius: 2px;
  background: var(--gal-600); display: block;
  transform-origin: center;
  animation: ind-wv 1.1s ease-in-out infinite;
}
.waves i:nth-child(2) { animation-delay: -.2s; }
.waves i:nth-child(3) { animation-delay: -.5s; }
.waves i:nth-child(4) { animation-delay: -.7s; }
.waves i:nth-child(5) { animation-delay: -.3s; }
.waves i:nth-child(6) { animation-delay: -.9s; }

/* Chips / report / sso */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  height: 34px; padding: 0 14px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--lav-700);
  font-size: 14px; display: flex; align-items: center;
}
.deck {
  width: 150px; height: 96px; flex-shrink: 0;
  padding: 12px; background: var(--white);
  border: 1px solid var(--lav-300); border-radius: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.deck b { display: block; height: 8px; width: 88%; border-radius: 4px; background: var(--onyx); }
.deck i { display: block; height: 6px; border-radius: 3px; background: var(--lav-300); }
.deck i:nth-child(3) { width: 70%; }
.deck i:nth-child(4) { width: 80%; }
.deck .hit { height: 18px; width: 58%; margin-top: 4px; border-radius: 4px; background: var(--gal-100); }

.bars { display: flex; flex-direction: column; gap: 10px; position: relative; padding-top: 4px; }
.bar { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.bar .lb { width: 36px; color: var(--lav-100); flex-shrink: 0; }
.bar .tr { flex-grow: 1; height: 12px; border-radius: 6px; background: var(--dark-2); overflow: hidden; }
.bar .fl {
  display: block; height: 12px; border-radius: 6px; background: var(--lav-300);
  transform-origin: left center;
  animation: ind-grow 6s ease-out infinite;
}
.bar .v { width: 40px; text-align: end; font-variant-numeric: tabular-nums; }
.sla {
  position: absolute;
  inset-inline-end: 48px;
  top: 0; bottom: 0;
  width: 0;
  border-inline-start: 2px dashed var(--gal-300);
}

.sso { display: flex; flex-direction: column; gap: 10px; }
.sso-btn {
  height: 52px; padding: 0 18px; border-radius: 14px;
  background: var(--white); border: 1.5px solid var(--lav-300);
  display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--onyx);
}
.sso-btn svg { width: 22px; height: 22px; flex-shrink: 0; }

/* Outputs diagram */
.flowbox { position: relative; min-height: 340px; padding: 12px 0; }
.flowbox > svg { z-index: 0; }
.flow-src, .flow-hub, .flow-out {
  position: absolute;
  z-index: 1;
  padding: 14px 16px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.flow-src { left: 0; top: 130px; width: 160px; height: 80px; background: var(--lav-700); color: var(--white); }
.flow-hub { left: 210px; top: 114px; width: 200px; height: 112px; background: var(--gal-100); color: var(--onyx); }
.flow-out { right: 0; width: 200px; min-height: 64px; height: 64px; background: var(--white); border: 1px solid var(--lav-300); color: var(--onyx); font-size: 14px; }
.flow-out b { font-size: 14px; font-weight: 600; color: inherit; }
.flow-out span { font-size: 12px; color: var(--muted); }
.flow-hub b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: inherit; }
.flow-src b { color: inherit; }

/* Voice preservation */
.voice-ring {
  width: 120px; height: 120px; flex-shrink: 0;
  position: relative;
}
.voice-ring svg { width: 120px; height: 120px; display: block; }
.voice-ring em {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-style: normal; text-align: center;
}
.voice-ring strong { font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.voice-ring small { font-size: 12px; color: var(--muted); }

/* Serve split */
.ind-serve {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 36px;
}
.ind-serve article {
  padding: 32px;
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 280px;
}
.ind-serve .you { background: var(--nebula); border: 1px solid var(--lav-300); }
.ind-serve .us { background: var(--lav-700); color: var(--white); }
.ind-serve h3 { margin: 4px 0 0; font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.ind-serve .us h3 { color: var(--white); }
.ind-serve p { margin: 0; font-size: 16px; line-height: 1.5; }
.ind-serve .us p { color: var(--lav-100); }
.ind-serve ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.ind-serve li { display: flex; gap: 10px; align-items: flex-start; }
.ind-serve li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.ind-serve .you svg { color: var(--lav-700); }
.ind-serve .us svg { color: var(--gal-300); }
.ind-serve .actions { margin-top: auto; padding-top: 16px; }

/* Jump to other sectors */
.ind-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.ind-jump a {
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--lav-300);
  background: var(--white);
  color: var(--onyx);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-size: 15px;
}
.ind-jump a:hover { border-color: var(--lav-700); color: var(--lav-700); }
.ind-jump a[aria-current="page"] {
  background: var(--lav-700);
  border-color: var(--lav-700);
  color: var(--white);
}

.cta-band .tel {
  color: var(--lav-100);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 16px;
}
.cta-band .tel:hover { color: var(--white); }

/* QR helper */
.qr { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------------ motion */
@keyframes ind-wv {
  0%, 100% { transform: scaleY(.35); }
  50% { transform: scaleY(1); }
}
@keyframes ind-grow {
  0% { transform: scaleX(.18); }
  40%, 100% { transform: scaleX(1); }
}
@keyframes ind-chip {
  0% { transform: translateX(-28px); opacity: 0; }
  18%, 100% { transform: none; opacity: 1; }
}
.ind-ci { animation: ind-chip 5.5s ease-out infinite; }
.ind-ci:nth-child(2) { animation-delay: .35s; }
.ind-ci:nth-child(3) { animation-delay: .7s; }
.ind-ci:nth-child(4) { animation-delay: 1.05s; }
@keyframes ind-caret {
  50% { border-inline-end-color: transparent; }
}
.ind-caret {
  border-inline-end: 2px solid var(--gal-300);
  padding-inline-end: 2px;
  animation: ind-caret 1s steps(1) infinite;
}
@keyframes ind-ring {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 70; }
}
.ind-ring {
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  stroke-dasharray: 283;
  animation: ind-ring 8s ease-in-out infinite alternate;
}
@keyframes ind-flow {
  to { stroke-dashoffset: -28; }
}
.ind-flow {
  stroke-dasharray: 6 8;
  animation: ind-flow 1.4s linear infinite;
}
@keyframes ind-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.45); }
}
.ind-pulse { animation: ind-pulse 1.6s ease-in-out infinite; }
@keyframes ind-scan {
  0%, 18% { opacity: 1; }
  22%, 100% { opacity: .35; }
}
.kiosk-lang.on { animation: ind-scan 4s ease-in-out infinite; }

html[dir="rtl"] .ind-float { left: auto; right: -36px; }
html[dir="rtl"] .flow-src { left: auto; right: 0; }
html[dir="rtl"] .flow-hub { left: auto; right: 210px; }
html[dir="rtl"] .flow-out { right: auto; left: 0; }
html[dir="rtl"] .bar .fl { transform-origin: right center; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .ind-hero-grid, .ind-stage, .ind-stage.flip, .ind-serve { grid-template-columns: minmax(0, 1fr); }
  .ind-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-rooms, .ind-rooms.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .ind-stat { border-inline-end: 0; padding-inline-end: 0; }
  .ind-hero-photo { min-height: 0; }
  .ind-float { left: 20px; right: 20px; width: auto; bottom: 20px; }
  html[dir="rtl"] .ind-float { left: 20px; right: 20px; }
  .flowbox { min-height: 0; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
  .flowbox > svg { display: none; }
  .flow-src, .flow-hub, .flow-out {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 64px;
  }
}
@media (max-width: 720px) {
  .ind-cards, .ind-rooms, .ind-rooms.four, .ind-feats, .ind-strip { grid-template-columns: minmax(0, 1fr); }
  .ind-hero-photo > img { height: 300px; }
  .ind-card img { height: 200px; }
  .ind-float { position: static; width: 100%; margin-top: 16px; }
  .kiosk, .phone { width: 100%; max-width: 280px; }
  .proj { flex-direction: column; }
  .proj-qr { width: 100%; flex-direction: row; justify-content: flex-start; align-items: center; }
  .ind-stat .n { font-size: 40px; }
}