/* AINNA Industry Demo Flow — full animated section (shared) */
body[data-industry="marine"]{--gold:#4ee6d2;--amber:#16a6ff;--mint:#5fe3c1;--cyan:#7dd3fc;--rose:#38bdf8}
body[data-industry="pom"]{--gold:#f7b731;--amber:#26de81;--mint:#20bf6b;--cyan:#f7b731;--rose:#fc5c65}
body[data-industry="og"]{--gold:#f5b942;--amber:#ff7a1a;--mint:#6ee7b7;--cyan:#fbbf24;--rose:#fb7185}
body[data-industry="logistics"]{--gold:#6ad9ff;--amber:#f5b942;--mint:#5fe3c1;--cyan:#38bdf8;--rose:#a78bfa}
body[data-industry="manufacturing"]{--gold:#ffd166;--amber:#3b82f6;--mint:#22d3ee;--cyan:#60a5fa;--rose:#f97316}
body[data-industry="construction"]{--gold:#facc15;--amber:#fb923c;--mint:#94a3b8;--cyan:#60a5fa;--rose:#f59e0b}
body[data-industry="mining"]{--gold:#d97706;--amber:#c084fc;--mint:#a3e635;--cyan:#f59e0b;--rose:#ef4444}
body[data-industry="healthcare"]{--gold:#67e8f9;--amber:#fb7185;--mint:#34d399;--cyan:#22d3ee;--rose:#f43f5e}
body[data-industry="education"]{--gold:#c4b5fd;--amber:#fbbf24;--mint:#60a5fa;--cyan:#818cf8;--rose:#f472b6}
/* New industry demo themes */
body[data-industry="agriculture"]{--gold:#86efac;--amber:#fbbf24;--mint:#4ade80;--cyan:#34d399;--rose:#a3e635}
body[data-industry="bengkel"]{--gold:#fbbf24;--amber:#f97316;--mint:#94a3b8;--cyan:#38bdf8;--rose:#fb7185}
body[data-industry="ecommerce"]{--gold:#fb7185;--amber:#f97316;--mint:#34d399;--cyan:#818cf8;--rose:#f472b6}
body[data-industry="fleet"]{--gold:#38bdf8;--amber:#fbbf24;--mint:#2dd4bf;--cyan:#60a5fa;--rose:#a78bfa}
body[data-industry="fnb"]{--gold:#fb923c;--amber:#ef4444;--mint:#fbbf24;--cyan:#fcd34d;--rose:#f472b6}
body[data-industry="hospitality"]{--gold:#f0abfc;--amber:#fbbf24;--mint:#67e8f9;--cyan:#c4b5fd;--rose:#fb7185}
body[data-industry="pharmacy"]{--gold:#5eead4;--amber:#38bdf8;--mint:#34d399;--cyan:#22d3ee;--rose:#f43f5e}
body[data-industry="professional-services"]{--gold:#93c5fd;--amber:#818cf8;--mint:#67e8f9;--cyan:#60a5fa;--rose:#a78bfa}
body[data-industry="property-management"]{--gold:#fcd34d;--amber:#94a3b8;--mint:#38bdf8;--cyan:#60a5fa;--rose:#f59e0b}
body[data-industry="retail"]{--gold:#f472b6;--amber:#fbbf24;--mint:#34d399;--cyan:#a78bfa;--rose:#fb7185}

.industry-flow{
  position:relative;z-index:1;
  max-width:1180px;margin:0 auto;
  padding:48px 20px 56px;
  --idf-ease:cubic-bezier(.16,1,.3,1);
  --idf-step-ms:900ms;
}
.industry-flow-bg{
  position:absolute;inset:0 4%;
  pointer-events:none;overflow:hidden;border-radius:36px;
}
.idf-blob{
  position:absolute;border-radius:50%;filter:blur(48px);opacity:.55;
  animation:idfBlob 12s ease-in-out infinite alternate;
}
.idf-blob-a{
  width:280px;height:280px;top:8%;left:6%;
  background:color-mix(in srgb,var(--gold) 40%,transparent);
}
.idf-blob-b{
  width:320px;height:320px;bottom:10%;right:4%;
  background:color-mix(in srgb,var(--amber) 32%,transparent);
  animation-duration:15s;animation-delay:-3s;
}
.idf-grid{
  position:absolute;inset:0;opacity:.12;
  background-image:
    linear-gradient(color-mix(in srgb,var(--gold) 35%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--gold) 35%,transparent) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse at center, #000 20%, transparent 75%);
}

/* Tropical decorative elements for POM */
body[data-industry="pom"] .industry-flow-bg::before{
  content:"";
  position:absolute;
  top:-20%;right:-10%;
  width:300px;height:300px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 10c-10 20-30 30-30 50a30 30 0 0060 0c0-20-20-30-30-50z' fill='%2320bf6b' opacity='0.08'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.6;
  animation:idfFloat 20s ease-in-out infinite alternate;
}
body[data-industry="pom"] .industry-flow-bg::after{
  content:"";
  position:absolute;
  bottom:-15%;left:-5%;
  width:250px;height:250px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%23f7b731' opacity='0.06'/%3E%3Ccircle cx='50' cy='50' r='25' fill='%23f7b731' opacity='0.08'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.5;
  animation:idfFloat 18s ease-in-out infinite alternate-reverse;
}
@keyframes idfFloat{
  0%{transform:translate(0,0) rotate(0deg)}
  100%{transform:translate(20px,-15px) rotate(10deg)}
}
@keyframes idfBlob{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(18px,-14px,0) scale(1.08)}
}

.industry-flow-head{position:relative;text-align:center;margin-bottom:22px}
.industry-flow-kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
  background:color-mix(in srgb,var(--gold) 12%,transparent);
  color:var(--gold);font-size:.72rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
}
.idf-live-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--mint,#5fe3c1);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--mint,#5fe3c1) 60%,transparent);
  animation:idfPulse 1.6s ease-out infinite;
}
@keyframes idfPulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mint,#5fe3c1) 55%,transparent)}
  70%{box-shadow:0 0 0 10px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.industry-flow-head h2{
  margin:14px auto 10px;max-width:820px;
  font-size:clamp(1.55rem,3.2vw,2.35rem);line-height:1.12;letter-spacing:-.03em;
}
.industry-flow-head p{
  margin:0 auto;max-width:720px;color:var(--muted,#93a4be);line-height:1.65;font-size:.98rem;
}

/* Stage shell */
.industry-flow-stage{
  position:relative;padding:22px 22px 20px;overflow:hidden; /* popup overlays this shell */
  border-radius:28px;
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--border,rgba(255,255,255,.1));
  box-shadow:var(--shadow,0 24px 70px rgba(0,0,0,.38));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.industry-flow-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(120deg,color-mix(in srgb,var(--gold) 14%,transparent),transparent 28%),
    linear-gradient(300deg,color-mix(in srgb,var(--amber) 10%,transparent),transparent 40%);
  opacity:.9;
}
.industry-flow-stage > *{position:relative;z-index:1}

.idf-stage-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:16px;
}

.industry-flow-orb{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px 10px 10px;border-radius:999px;
  background:rgba(0,0,0,.22);border:1px solid var(--border,rgba(255,255,255,.12));
  position:relative;
}
.idf-orb-ring{
  position:absolute;left:4px;top:4px;width:46px;height:46px;border-radius:50%;
  border:1px dashed color-mix(in srgb,var(--gold) 50%,transparent);
  animation:idfSpin 10s linear infinite;
}
@keyframes idfSpin{to{transform:rotate(360deg)}}
.industry-flow-orb svg{width:36px;height:36px;flex-shrink:0;position:relative}
.industry-flow-orb .tone-base{stroke:rgba(255,255,255,.65);stroke-width:1.6;fill:none}
.industry-flow-orb .tone-accent{stroke:var(--gold);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.idf-orb-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.idf-orb-copy strong{font-size:.95rem;letter-spacing:-.01em}
.idf-orb-copy span{font-size:.72rem;color:var(--muted,#93a4be)}

/* Controls */
.idf-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.idf-btn{
  appearance:none;border:1px solid var(--border-strong,rgba(255,255,255,.16));
  background:rgba(255,255,255,.05);color:var(--text,#f4f7fb);
  border-radius:999px;padding:9px 14px;font:inherit;font-size:.8rem;font-weight:700;
  cursor:pointer;transition:transform .2s var(--idf-ease),background .2s,border-color .2s;
}
.idf-btn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.idf-btn-primary{
  background:linear-gradient(135deg,var(--gold),var(--amber));
  color:#111;border-color:transparent;
  box-shadow:0 10px 28px color-mix(in srgb,var(--gold) 28%,transparent);
}
.idf-btn.is-active{outline:2px solid color-mix(in srgb,var(--gold) 55%,transparent);outline-offset:1px}
.idf-speed{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px 6px 12px;border-radius:999px;
  border:1px solid var(--border,rgba(255,255,255,.1));
  background:rgba(0,0,0,.18);font-size:.72rem;font-weight:700;color:var(--muted,#93a4be);
}
.idf-speed input[type=range]{width:88px;accent-color:var(--gold);cursor:pointer}
.idf-speed em{font-style:normal;color:var(--text,#f4f7fb);min-width:2.2em;font-variant-numeric:tabular-nums}

/* Progress */
.idf-progress-wrap{margin-bottom:12px}
.idf-progress-meta{
  display:flex;justify-content:space-between;gap:10px;
  font-size:.78rem;font-weight:700;color:var(--muted,#93a4be);margin-bottom:6px;
}
.idf-progress-track{
  height:6px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;
}
.idf-progress-fill{
  height:100%;width:0%;border-radius:inherit;
  background:linear-gradient(90deg,var(--gold),var(--amber),var(--cyan,#6ad9ff));
  background-size:200% 100%;
  transition:width .45s var(--idf-ease);
  animation:idfShimmer 2.4s linear infinite;
}
@keyframes idfShimmer{to{background-position:-200% 0}}

/* Narrator */
.idf-narrator{
  margin-bottom:18px;padding:12px 16px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--gold) 22%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 10%,transparent),rgba(255,255,255,.03));
  color:var(--text,#f4f7fb);font-size:.92rem;line-height:1.45;font-weight:600;
  min-height:48px;display:flex;align-items:center;
  transition:opacity .25s ease,transform .35s var(--idf-ease);
}
.idf-narrator.is-swap{opacity:0;transform:translateY(4px)}

/* Flow steps */
.idf-flow-wrap{margin-bottom:18px}
.idf-flow-legend{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin-bottom:14px;font-size:.72rem;font-weight:700;color:var(--muted,#93a4be);
}
.idf-flow-legend i{
  display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px;
}
.lg-pending{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.25)}
.lg-active{background:var(--gold);box-shadow:0 0 12px color-mix(in srgb,var(--gold) 55%,transparent)}
.lg-done{background:var(--mint,#5fe3c1)}

.industry-flow-steps{
  position:relative;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;
}
.industry-flow-step{
  position:relative;
  min-height:148px;padding:16px 12px 12px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border,rgba(255,255,255,.1));
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  transition:border-color .3s,background .3s,transform .35s var(--idf-ease),box-shadow .35s;
  overflow:visible;
}
.industry-flow-step strong{font-size:.88rem;line-height:1.25;letter-spacing:-.01em}
.industry-flow-step em{
  font-style:normal;font-size:.72rem;color:var(--muted,#93a4be);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.idf-step-status{
  margin-top:auto;font-size:.65rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2,#6d7d97);
}

.industry-flow-node{
  position:relative;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;margin-bottom:4px;
  background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.12);
  color:var(--muted,#93a4be);font-size:.75rem;font-weight:900;
  transition:all .35s var(--idf-ease);
}
.idf-node-check{display:none;font-size:.9rem}

/* Connectors between cards */
.idf-connector{
  display:none; /* desktop uses pseudo line under nodes via grid overlay */
}
@media (min-width:901px){
  /* Track only between first → last node centres (no overhang past stage 5) */
  .industry-flow-steps::before{
    content:"";position:absolute;
    left:calc(10% ); /* centre of col 1 in 5-col grid ≈ 10% */
    width:var(--idf-track, 80%); /* default full span first→last */
    max-width:80%;
    top:37px;height:3px;border-radius:99px;
    background:rgba(255,255,255,.08);z-index:0;
    transition:opacity .35s ease, width .55s var(--idf-ease);
  }
  .industry-flow-steps::after{
    content:"";position:absolute;left:10%;top:37px;height:3px;
    width:var(--idf-line,0%);
    max-width:80%; /* never draw past last node */
    border-radius:99px;z-index:0;
    background:linear-gradient(90deg,var(--gold),var(--amber),var(--mint,#5fe3c1));
    box-shadow:0 0 16px color-mix(in srgb,var(--gold) 45%,transparent);
    transition:width .55s var(--idf-ease), opacity .35s ease;
  }
  .industry-flow-step{z-index:1}
  /* After complete: hide connector rails — popup takes over */
  .industry-flow.is-complete .industry-flow-steps::before,
  .industry-flow.is-complete .industry-flow-steps::after{
    opacity:0;
  }
}

/* ——— Completion popup ——— */
.idf-popup{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  padding:16px;border-radius:inherit;
}
.idf-popup[hidden]{display:none!important}
.idf-popup-backdrop{
  position:absolute;inset:0;border-radius:inherit;
  background:rgba(4,8,16,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  cursor:pointer;
}
.idf-popup-card{
  position:relative;z-index:1;
  width:min(420px,100%);
  padding:28px 24px 22px;
  border-radius:22px;
  text-align:center;
  background:linear-gradient(165deg,rgba(20,28,42,.98),rgba(10,14,22,.98));
  border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 40px color-mix(in srgb,var(--gold) 18%,transparent);
  animation:idfPopIn .45s var(--idf-ease) both;
}
@keyframes idfPopIn{
  from{opacity:0;transform:translateY(16px) scale(.94)}
  to{opacity:1;transform:none}
}
.idf-popup-burst{
  position:absolute;inset:-20%;pointer-events:none;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb,var(--gold) 22%,transparent), transparent 45%),
    radial-gradient(circle at 30% 70%, color-mix(in srgb,var(--mint,#5fe3c1) 14%,transparent), transparent 40%);
  opacity:.9;animation:idfBurst 1.2s ease-out both;
}
@keyframes idfBurst{
  from{opacity:0;transform:scale(.8)}
  to{opacity:.9;transform:scale(1)}
}
.idf-popup-badge{
  display:inline-flex;padding:5px 12px;border-radius:999px;
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);
  border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
  background:color-mix(in srgb,var(--gold) 12%,transparent);
  margin-bottom:12px;
}
.idf-popup-icon{
  width:56px;height:56px;margin:0 auto 12px;border-radius:50%;
  display:grid;place-items:center;font-size:1.5rem;font-weight:900;color:#0a120c;
  background:linear-gradient(135deg,var(--mint,#5fe3c1),var(--gold));
  box-shadow:0 0 0 8px color-mix(in srgb,var(--mint,#5fe3c1) 15%,transparent),
    0 12px 32px color-mix(in srgb,var(--gold) 30%,transparent);
  animation:idfNodePulse 1.4s ease-in-out infinite;
}
.idf-popup-card h3{
  margin:0 0 8px;font-size:1.35rem;letter-spacing:-.02em;
}
.idf-popup-card > p{
  margin:0 0 16px;color:var(--muted,#93a4be);font-size:.9rem;line-height:1.55;
}
.idf-popup-metrics{
  list-style:none;margin:0 0 18px;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
}
.idf-popup-metrics li{
  padding:10px 6px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--border,rgba(255,255,255,.1));
  display:flex;flex-direction:column;gap:2px;
}
.idf-popup-metrics span{
  font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#93a4be);
}
.idf-popup-metrics strong{
  font-size:.95rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.idf-popup-actions{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.idf-popup-actions .idf-btn{text-decoration:none}
.idf-popup-actions a.idf-btn{display:inline-flex;align-items:center}

html[data-theme='light'] .industry-flow-bg,
html[data-theme='light'] .industry-flow-stage,
html[data-theme='light'] .idf-popup-card,
html[data-theme='light'] .idf-terminal {
  box-shadow: 0 18px 42px rgba(20, 34, 64, 0.10);
}

html[data-theme='light'] .industry-flow-stage {
  background: linear-gradient(165deg, rgba(255,255,255,.92), rgba(245,249,255,.88));
  border-color: rgba(38, 58, 98, 0.10);
}

html[data-theme='light'] .industry-flow-stage::before {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--gold) 10%, transparent), transparent 28%),
    linear-gradient(300deg, color-mix(in srgb, var(--amber) 8%, transparent), transparent 40%);
}

html[data-theme='light'] .industry-flow-orb,
html[data-theme='light'] .idf-speed,
html[data-theme='light'] .idf-popup-metrics li,
html[data-theme='light'] .idf-metric,
html[data-theme='light'] .idf-terminal,
html[data-theme='light'] .idf-terminal-head {
  background: rgba(255,255,255,.88);
}

html[data-theme='light'] .industry-flow-orb,
html[data-theme='light'] .idf-speed,
html[data-theme='light'] .industry-flow-step,
html[data-theme='light'] .idf-metric,
html[data-theme='light'] .idf-popup-metrics li,
html[data-theme='light'] .idf-terminal,
html[data-theme='light'] .idf-popup-card {
  border-color: rgba(38, 58, 98, 0.10);
}

html[data-theme='light'] .industry-flow-orb {
  background: rgba(255,255,255,.94);
}

html[data-theme='light'] .industry-flow-step {
  background: rgba(255,255,255,.88);
}

html[data-theme='light'] .industry-flow-step.is-active {
  background: linear-gradient(165deg, color-mix(in srgb, var(--gold) 10%, transparent), rgba(255,255,255,.94));
}

html[data-theme='light'] .industry-flow-step.is-done {
  background: color-mix(in srgb, var(--mint,#5fe3c1) 8%, rgba(255,255,255,.92));
}

html[data-theme='light'] .industry-flow-step strong,
html[data-theme='light'] .idf-orb-copy strong,
html[data-theme='light'] .idf-popup-card h3,
html[data-theme='light'] .idf-terminal-head strong,
html[data-theme='light'] .idf-popup-metrics strong,
html[data-theme='light'] .idf-metric-value {
  color: #10213d;
}

html[data-theme='light'] .industry-flow-step em,
html[data-theme='light'] .idf-orb-copy span,
html[data-theme='light'] .idf-popup-card > p,
html[data-theme='light'] .idf-popup-metrics span,
html[data-theme='light'] .idf-metric-label,
html[data-theme='light'] .idf-metric-unit,
html[data-theme='light'] .idf-terminal-body,
html[data-theme='light'] .idf-log-line.is-muted {
  color: #5f7088;
}

html[data-theme='light'] .idf-terminal {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,249,255,.96));
}

html[data-theme='light'] .idf-terminal-head {
  border-bottom-color: rgba(38, 58, 98, 0.08);
}

html[data-theme='light'] .idf-terminal-body {
  color: #334155;
}

html[data-theme='light'] .idf-log-line.is-ok { color: #0f9d58; }
html[data-theme='light'] .idf-log-line.is-warn { color: #b45309; }
html[data-theme='light'] .idf-log-line.is-active { color: #7c3aed; }

html[data-theme='light'] .idf-popup-backdrop {
  background: rgba(248, 250, 255, 0.78);
}

html[data-theme='light'] .idf-popup-card {
  background: linear-gradient(165deg, rgba(255,255,255,.98), rgba(246,249,255,.96));
  box-shadow: 0 24px 60px rgba(20, 34, 64, 0.14), 0 0 32px color-mix(in srgb, var(--gold) 10%, transparent);
}

html[data-theme='light'] .idf-popup-badge {
  color: #436fd8;
  background: rgba(67, 111, 216, 0.08);
  border-color: rgba(67, 111, 216, 0.16);
}

html[data-theme='light'] .idf-popup-icon {
  color: #0f172a;
}

html[data-theme='light'] .idf-popup-metrics li {
  background: rgba(255,255,255,.96);
}

html[data-theme='light'] .idf-popup-metrics span {
  color: #64748b;
}

html[data-theme='light'] .idf-popup-actions .idf-btn {
  box-shadow: none;
}

html[data-theme='light'] .idf-metric {
  background: rgba(255,255,255,.92);
}

html[data-theme='light'] .idf-metric-bar {
  background: rgba(15, 23, 42, 0.08);
}

html[data-theme='light'] .idf-metric-unit,
html[data-theme='light'] .idf-metric-label {
  color: #64748b;
}

html[data-theme='light'] .idf-speed {
  color: #64748b;
}

html[data-theme='light'] .idf-speed em {
  color: #10213d;
}

@media (max-width:560px){
  .idf-popup-metrics{grid-template-columns:1fr}
  .idf-popup-card{padding:22px 16px 18px}
}

/* Step states */
.industry-flow-step.is-pending{opacity:.72}
.industry-flow-step.is-active{
  opacity:1;transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--gold) 55%,transparent);
  background:linear-gradient(165deg,color-mix(in srgb,var(--gold) 14%,transparent),rgba(255,255,255,.04));
  box-shadow:0 16px 40px color-mix(in srgb,var(--gold) 18%,transparent),0 0 0 1px color-mix(in srgb,var(--gold) 20%,transparent);
}
.industry-flow-step.is-active .industry-flow-node{
  background:linear-gradient(135deg,var(--gold),var(--amber));
  border-color:transparent;color:#111;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 18%,transparent),0 0 28px color-mix(in srgb,var(--gold) 40%,transparent);
  animation:idfNodePulse 1.2s ease-in-out infinite;
}
.industry-flow-step.is-active .idf-step-status{color:var(--gold)}
.industry-flow-step.is-done{
  opacity:1;
  border-color:color-mix(in srgb,var(--mint,#5fe3c1) 40%,transparent);
  background:color-mix(in srgb,var(--mint,#5fe3c1) 8%,rgba(255,255,255,.03));
}
.industry-flow-step.is-done .industry-flow-node{
  background:color-mix(in srgb,var(--mint,#5fe3c1) 85%,#0a0f14);
  border-color:transparent;color:#04120c;
}
.industry-flow-step.is-done .idf-node-num{display:none}
.industry-flow-step.is-done .idf-node-check{display:block}
.industry-flow-step.is-done .idf-step-status{color:var(--mint,#5fe3c1)}
@keyframes idfNodePulse{
  0%,100%{box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 16%,transparent),0 0 24px color-mix(in srgb,var(--gold) 35%,transparent)}
  50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--gold) 8%,transparent),0 0 36px color-mix(in srgb,var(--gold) 50%,transparent)}
}

/* Bottom: metrics + terminal */
.idf-bottom{
  display:grid;grid-template-columns:1.05fr .95fr;gap:14px;align-items:stretch;
}
.industry-flow-metrics{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
}
.idf-metric{
  padding:14px 12px 12px;border-radius:16px;
  background:rgba(0,0,0,.2);border:1px solid var(--border,rgba(255,255,255,.1));
  display:flex;flex-direction:column;gap:4px;min-height:104px;
  transition:border-color .3s,transform .3s var(--idf-ease);
}
.idf-metric.is-hot{
  border-color:color-mix(in srgb,var(--gold) 45%,transparent);
  transform:translateY(-2px);
  box-shadow:0 12px 28px color-mix(in srgb,var(--gold) 12%,transparent);
}
.idf-metric-label{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#93a4be)}
.idf-metric-value{
  font-size:1.35rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  line-height:1.15;
}
.idf-metric-unit{font-size:.72rem;color:var(--muted-2,#6d7d97);font-weight:600}
.idf-metric-bar{
  margin-top:auto;height:4px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden;
}
.idf-metric-bar i{
  display:block;height:100%;width:18%;border-radius:inherit;
  background:linear-gradient(90deg,var(--gold),var(--amber));
  transition:width .6s var(--idf-ease);
}
.idf-metric.is-hot .idf-metric-bar i{width:82%}

/* Terminal */
.idf-terminal{
  border-radius:16px;overflow:hidden;
  border:1px solid var(--border,rgba(255,255,255,.1));
  background:#070b12;
  display:flex;flex-direction:column;min-height:180px;max-height:220px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
.idf-terminal-head{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.06);font-size:.75rem;
}
.idf-terminal-head strong{color:var(--text,#f4f7fb);font-weight:700}
.idf-term-dots{display:inline-flex;gap:5px}
.idf-term-dots i{width:8px;height:8px;border-radius:50%}
.idf-term-dots i:nth-child(1){background:#ff5f57}
.idf-term-dots i:nth-child(2){background:#febc2e}
.idf-term-dots i:nth-child(3){background:#28c840}
.idf-term-live{
  margin-left:auto;font-size:.65rem;font-weight:800;letter-spacing:.1em;
  color:var(--mint,#5fe3c1);
  animation:idfBlink 1.4s step-end infinite;
}
@keyframes idfBlink{50%{opacity:.35}}
.idf-terminal-body{
  flex:1;overflow:auto;padding:10px 12px;
  display:flex;flex-direction:column;gap:4px;
  font-size:.72rem;line-height:1.45;color:#9fb0c8;
}
.idf-log-line{
  opacity:0;transform:translateY(6px);
  animation:idfLogIn .35s var(--idf-ease) forwards;
  white-space:pre-wrap;word-break:break-word;
}
.idf-log-line.is-muted{color:#5f7088}
.idf-log-line.is-ok{color:#7dffa8}
.idf-log-line.is-warn{color:#ffd27a}
.idf-log-line.is-active{color:#fff3c4}
@keyframes idfLogIn{to{opacity:1;transform:none}}

/* Domain accent icons (existing industry pages) */
.logistics-card-icon,.mfg-card-icon,.const-card-icon,.mine-card-icon,.hc-card-icon,.edu-card-icon,.og-card-icon,.pom-card-icon,.marine-card-icon,.logistics-safety-icon,.mfg-safety-icon,.const-safety-icon,.mine-safety-icon,.hc-safety-icon,.edu-safety-icon,.og-safety-icon,.pom-safety-icon{
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 18%,transparent),color-mix(in srgb,var(--amber) 14%,transparent))!important;
  border:1px solid color-mix(in srgb,var(--gold) 28%,transparent);
  color:var(--gold)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 10px 30px color-mix(in srgb,var(--gold) 12%,transparent)
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .idf-blob,.idf-orb-ring,.idf-live-dot,.idf-progress-fill,.industry-flow-step.is-active .industry-flow-node,.idf-term-live{animation:none!important}
  .industry-flow-step,.idf-metric,.idf-narrator,.idf-progress-fill{transition:none!important}
}

/* Step illustrations - flat tropical design */
.idf-step-illustration{
  width:56px;height:56px;margin-bottom:8px;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 12%,transparent),color-mix(in srgb,var(--amber) 8%,transparent));
  border:1px solid color-mix(in srgb,var(--gold) 20%,transparent);
  transition:transform .3s var(--idf-ease),box-shadow .3s;
}
.idf-step-illustration svg{
  width:40px;height:40px;
}
.industry-flow-step.is-active .idf-step-illustration{
  transform:scale(1.1);
  box-shadow:0 0 20px color-mix(in srgb,var(--gold) 30%,transparent);
}
.industry-flow-step.is-done .idf-step-illustration{
  background:linear-gradient(135deg,color-mix(in srgb,var(--mint,#5fe3c1) 20%,transparent),color-mix(in srgb,var(--mint,#5fe3c1) 12%,transparent));
  border-color:color-mix(in srgb,var(--mint,#5fe3c1) 30%,transparent);
}

/* Mobile */
@media (max-width:900px){
  .industry-flow{padding:36px 14px 44px}
  .industry-flow-stage{padding:16px 14px}
  .idf-stage-top{flex-direction:column;align-items:stretch}
  .industry-flow-orb{width:100%;border-radius:16px}
  .idf-controls{width:100%}
  .idf-btn{flex:1;justify-content:center;text-align:center}
  .idf-speed{flex:1 1 100%;justify-content:space-between}

  .industry-flow-steps{
    grid-template-columns:1fr;gap:8px;
  }
  .industry-flow-steps::before,
  .industry-flow-steps::after{display:none!important}
  .industry-flow-step{
    min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center;
    justify-content:flex-start;text-align:left;gap:10px 12px;padding:12px 14px;
  }
  .industry-flow-step .industry-flow-node{margin-bottom:0;flex-shrink:0}
  .industry-flow-step strong{flex:1;min-width:120px}
  .industry-flow-step em{flex:1 1 100%;order:5;padding-left:54px}
  .idf-step-status{margin-top:0;margin-left:auto}

  /* Vertical connectors */
  .idf-connector{
    display:block;position:absolute;left:33px;top:-10px;width:3px;height:10px;
    background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;
  }
  .idf-connector-fill{
    display:block;width:100%;height:0%;background:linear-gradient(180deg,var(--gold),var(--mint,#5fe3c1));
    transition:height .4s var(--idf-ease);
  }
  .idf-connector.is-done .idf-connector-fill,
  .idf-connector.is-active .idf-connector-fill{height:100%}

  .idf-bottom{grid-template-columns:1fr}
  .industry-flow-metrics{grid-template-columns:1fr}
  .idf-terminal{max-height:160px;min-height:140px}
}

@media (max-width:560px){
  .industry-flow-head h2{font-size:1.4rem}
  .idf-metric-value{font-size:1.15rem}
  .idf-btn{padding:9px 10px;font-size:.74rem}
}

/* ── Industry hero backgrounds — futuristic JPG + pan/zoom (marine-style) ── */
@keyframes ainna-hero-pan-zoom{
  0%{transform:scale(1) translate(0,0)}
  25%{transform:scale(1.08) translate(-1%,-1%)}
  50%{transform:scale(1.12) translate(0,0)}
  75%{transform:scale(1.08) translate(1%,1%)}
  100%{transform:scale(1) translate(0,0)}
}
body[data-industry="marine"]{--industry-hero-bg:url('/assets/industry-heroes/marine.webp')}
body[data-industry="pom"]{--industry-hero-bg:url('/assets/industry-heroes/pom.webp')}
body[data-industry="og"]{--industry-hero-bg:url('/assets/industry-heroes/og.webp')}
body[data-industry="logistics"]{--industry-hero-bg:url('/assets/industry-heroes/logistics.webp')}
body[data-industry="manufacturing"]{--industry-hero-bg:url('/assets/industry-heroes/manufacturing.webp')}
body[data-industry="construction"]{--industry-hero-bg:url('/assets/industry-heroes/construction.webp')}
body[data-industry="mining"]{--industry-hero-bg:url('/assets/industry-heroes/mining.webp')}
body[data-industry="healthcare"]{--industry-hero-bg:url('/assets/industry-heroes/healthcare.webp')}
body[data-industry="education"]{--industry-hero-bg:url('/assets/industry-heroes/education.webp')}
body[data-industry="retail"]{--industry-hero-bg:url('/assets/industry-heroes/retail.webp')}
body[data-industry="fnb"]{--industry-hero-bg:url('/assets/industry-heroes/fnb.webp')}
body[data-industry="bengkel"]{--industry-hero-bg:url('/assets/industry-heroes/bengkel.webp')}
body[data-industry="pharmacy"]{--industry-hero-bg:url('/assets/industry-heroes/pharmacy.webp')}
body[data-industry="agriculture"]{--industry-hero-bg:url('/assets/industry-heroes/agriculture.webp')}
body[data-industry="hospitality"]{--industry-hero-bg:url('/assets/industry-heroes/hospitality.webp')}
body[data-industry="professional-services"]{--industry-hero-bg:url('/assets/industry-heroes/professional-services.webp')}
body[data-industry="property-management"]{--industry-hero-bg:url('/assets/industry-heroes/property-management.webp')}
body[data-industry="ecommerce"]{--industry-hero-bg:url('/assets/industry-heroes/ecommerce.webp')}
body[data-industry="fleet"]{--industry-hero-bg:url('/assets/industry-heroes/fleet.webp')}
body[data-industry="hiburan"]{--industry-hero-bg:url('/assets/industry-heroes/hiburan.webp')}

/* Full-viewport hero — marine photo breakout (100vw × 100svh) */
section.ainna-hero-panzoom,
.mine-hero.ainna-hero-panzoom,
.edu-hero.ainna-hero-panzoom,
.hc-hero.ainna-hero-panzoom,
.mfg-hero.ainna-hero-panzoom,
.const-hero.ainna-hero-panzoom,
.pom-hero.ainna-hero-panzoom,
.og-hero.ainna-hero-panzoom,
.logistics-hero.ainna-hero-panzoom,
.marine-hero.ainna-hero-panzoom{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  z-index:1;
  width:100vw;
  max-width:none !important;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  min-height:100vh;
  min-height:100svh;
  padding:calc(var(--ainna-nav-height, 86px) + 36px) 24px 56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-sizing:border-box;
  background:transparent !important;
}
/* Let JPG read clearly — hide aurora wash on hero pages */
body[data-industry]:has(.ainna-hero-panzoom) .aurora-container{
  display:none;
}
section.ainna-hero-panzoom::before,
.mine-hero.ainna-hero-panzoom::before,
.edu-hero.ainna-hero-panzoom::before,
.hc-hero.ainna-hero-panzoom::before,
.mfg-hero.ainna-hero-panzoom::before,
.const-hero.ainna-hero-panzoom::before,
.pom-hero.ainna-hero-panzoom::before,
.og-hero.ainna-hero-panzoom::before,
.logistics-hero.ainna-hero-panzoom::before,
.marine-hero.ainna-hero-panzoom::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--industry-hero-bg,url('/assets/industry-heroes/education.webp')) center/cover no-repeat;
  background-size:cover;
  animation:ainna-hero-pan-zoom 25s ease-in-out infinite;
  z-index:0;
  will-change:transform;
  transform-origin:center center;
}
section.ainna-hero-panzoom::after,
.mine-hero.ainna-hero-panzoom::after,
.edu-hero.ainna-hero-panzoom::after,
.hc-hero.ainna-hero-panzoom::after,
.mfg-hero.ainna-hero-panzoom::after,
.const-hero.ainna-hero-panzoom::after,
.pom-hero.ainna-hero-panzoom::after,
.og-hero.ainna-hero-panzoom::after,
.logistics-hero.ainna-hero-panzoom::after,
.marine-hero.ainna-hero-panzoom::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(10,10,10,.85) 0%,
    rgba(10,10,10,.68) 50%,
    rgba(10,10,10,.9) 100%
  );
}
html[data-theme="light"] section.ainna-hero-panzoom::after,
html[data-theme="light"] .mine-hero.ainna-hero-panzoom::after,
html[data-theme="light"] .edu-hero.ainna-hero-panzoom::after,
html[data-theme="light"] .hc-hero.ainna-hero-panzoom::after,
html[data-theme="light"] .mfg-hero.ainna-hero-panzoom::after,
html[data-theme="light"] .const-hero.ainna-hero-panzoom::after,
html[data-theme="light"] .pom-hero.ainna-hero-panzoom::after,
html[data-theme="light"] .og-hero.ainna-hero-panzoom::after,
html[data-theme="light"] .logistics-hero.ainna-hero-panzoom::after,
html[data-theme="light"] .marine-hero.ainna-hero-panzoom::after{
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,.92) 100%
  );
}
section.ainna-hero-panzoom > *,
.mine-hero.ainna-hero-panzoom > *,
.edu-hero.ainna-hero-panzoom > *,
.hc-hero.ainna-hero-panzoom > *,
.mfg-hero.ainna-hero-panzoom > *,
.const-hero.ainna-hero-panzoom > *,
.pom-hero.ainna-hero-panzoom > *,
.og-hero.ainna-hero-panzoom > *,
.logistics-hero.ainna-hero-panzoom > *,
.marine-hero.ainna-hero-panzoom > *{
  position:relative;
  z-index:2;
  width:100%;
}
section.ainna-hero-panzoom > [class$="-hero-content"],
.mine-hero.ainna-hero-panzoom > .mine-hero-content,
.edu-hero.ainna-hero-panzoom > .edu-hero-content,
.hc-hero.ainna-hero-panzoom > .hc-hero-content,
.mfg-hero.ainna-hero-panzoom > .mfg-hero-content,
.const-hero.ainna-hero-panzoom > .const-hero-content,
.pom-hero.ainna-hero-panzoom > .pom-hero-content,
.og-hero.ainna-hero-panzoom > .og-hero-content,
.logistics-hero.ainna-hero-panzoom > .logistics-hero-content{
  max-width:min(1100px,94vw);
}
.marine-hero.ainna-hero-panzoom > .marine-hero-copy{
  max-width:min(800px,92vw);
}
.marine-hero.ainna-hero-panzoom > .marine-hero-visual{
  max-width:min(900px,94vw);
}
@media (max-width:768px){
  section.ainna-hero-panzoom::before,
  .mine-hero.ainna-hero-panzoom::before,
  .edu-hero.ainna-hero-panzoom::before,
  .hc-hero.ainna-hero-panzoom::before,
  .mfg-hero.ainna-hero-panzoom::before,
  .const-hero.ainna-hero-panzoom::before,
  .pom-hero.ainna-hero-panzoom::before,
  .og-hero.ainna-hero-panzoom::before,
  .logistics-hero.ainna-hero-panzoom::before,
  .marine-hero.ainna-hero-panzoom::before{
    animation-duration:20s;
  }
  section.ainna-hero-panzoom,
  .mine-hero.ainna-hero-panzoom,
  .edu-hero.ainna-hero-panzoom,
  .hc-hero.ainna-hero-panzoom,
  .mfg-hero.ainna-hero-panzoom,
  .const-hero.ainna-hero-panzoom,
  .pom-hero.ainna-hero-panzoom,
  .og-hero.ainna-hero-panzoom,
  .logistics-hero.ainna-hero-panzoom,
  .marine-hero.ainna-hero-panzoom{
    min-height:100svh;
    padding:calc(var(--ainna-nav-height, 86px) + 18px) 14px 34px;
    gap:16px;
  }
}
@media (prefers-reduced-motion:reduce){
  section.ainna-hero-panzoom::before,
  .mine-hero.ainna-hero-panzoom::before,
  .edu-hero.ainna-hero-panzoom::before,
  .hc-hero.ainna-hero-panzoom::before,
  .mfg-hero.ainna-hero-panzoom::before,
  .const-hero.ainna-hero-panzoom::before,
  .pom-hero.ainna-hero-panzoom::before,
  .og-hero.ainna-hero-panzoom::before,
  .logistics-hero.ainna-hero-panzoom::before,
  .marine-hero.ainna-hero-panzoom::before{
    animation:none;
  }
}