/* ---------- hero ---------- */
.hero{ padding: 64px 0 40px; }
.hero-grid{ display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hero h1{ font-size: clamp(34px, 4.6vw, 56px); margin: 20px 0 20px; letter-spacing: -0.5px; }
.hero h1 .accent{ color: var(--gold); }
.hero p.lead{ font-size: 17px; max-width: 540px; margin-bottom: 30px; }
.hero-cta{ display: flex; gap: 14px; margin-bottom: 40px; flex-wrap: wrap; }
.hero-stats{ display: flex; gap: 34px; flex-wrap: wrap; }
.hero-stat{ display: flex; align-items: center; gap: 10px; }
.hero-stat .ico{
  width: 38px; height: 38px; border-radius: 9px; flex-shrink:0;
  background: rgba(255,196,38,0.12); border: 1px solid rgba(255,196,38,0.3);
  color: var(--gold); display:flex; align-items:center; justify-content:center;
}
.hero-stat .t1{ font-weight: 700; font-size: 13.5px; color: var(--text-hi); }
.hero-stat .t2{ font-size: 12px; color: var(--text-dim); }

.hero-art{ position: relative; }
.hero-art-frame{
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-soft-2);
  aspect-ratio: 4/3.1;
  background: linear-gradient(160deg, #0c1c3a, #071022 70%);
  isolation: isolate;
}
.hero-art-frame::after{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,13,28,0.05) 45%, rgba(6,13,28,0.85) 100%),
    linear-gradient(100deg, rgba(47,168,255,0.28), rgba(154,99,255,0.14) 55%, transparent 80%);
}
.hero-art-photo{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}

.hero-tag{
  position: absolute; display:flex; align-items:center; gap:10px;
  background: rgba(8,16,32,0.92); border: 1px solid var(--border-soft-2);
  border-radius: 12px; padding: 10px 14px; box-shadow: 0 14px 30px -10px rgba(0,0,0,0.6);
  font-size: 12.5px; white-space: nowrap;
}
.hero-tag .tag-ico{ width: 30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hero-tag .tag-t1{ font-weight: 700; color: var(--text-hi); display:block; }
.hero-tag .tag-t2{ color: var(--text-dim); font-size:11px; }
.hero-tag.tag-iot{ top: 6%; left: -4%; }
.hero-tag.tag-iot .tag-ico{ background: var(--iot-soft); color: var(--iot); }
.hero-tag.tag-embedded{ top: -2%; right: -6%; }
.hero-tag.tag-embedded .tag-ico{ background: var(--embedded-soft); color: var(--embedded); }
.hero-tag.tag-robotics{ top: 32%; right: -8%; }
.hero-tag.tag-robotics .tag-ico{ background: var(--robotics-soft); color: var(--robotics); }

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-art{ order: -1; }
  .hero-tag{ position: static; margin-bottom: 8px; }
  .hero-tag.tag-iot, .hero-tag.tag-embedded, .hero-tag.tag-robotics{ display:none; }
}

/* ---------- CTA banner ---------- */
.cta-banner{
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(47,168,255,0.14), rgba(154,99,255,0.14));
  border: 1px solid var(--border-soft-2);
  border-radius: var(--radius-md);
  padding: 22px 30px;
}
.cta-banner .cta-text{ display:flex; align-items:center; gap:14px; font-weight: 700; color: var(--text-hi); font-size: 16px; }
.cta-banner .cta-text .ico{ width:34px; height:34px; border-radius:9px; background: rgba(255,196,38,0.15); color: var(--gold); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ---------- learn + journey split ---------- */
.split{ display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; align-items: stretch; margin-top: 20px; }
@media (max-width: 980px){ .split{ grid-template-columns: 1fr; } }

.panel{
  background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 30px;
}
.panel-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom: 26px; }
.panel-head .ico{ width:44px; height:44px; border-radius:10px; background: rgba(255,196,38,0.14); color: var(--gold); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.panel-head h2{ font-size: 21px; margin-bottom: 4px; }
.panel-head p{ font-size: 13.5px; color: var(--text-dim); margin:0; }

.track-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 700px){ .track-grid{ grid-template-columns: 1fr; } }

.track-card{
  border-radius: var(--radius-md); padding: 22px; border: 1px solid;
  display:flex; flex-direction:column; gap: 10px;
}
.track-card .ico{ width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom: 4px; }
.track-card h3{ font-size: 17px; }
.track-card p{ font-size: 13.5px; color: var(--text-mid); margin: 0 0 6px; flex-grow: 1; }
.track-card .go{ font-size: 13px; font-weight: 700; display:flex; align-items:center; gap:6px; }

.track-card.iot{ background: var(--iot-soft); border-color: rgba(47,168,255,0.28); }
.track-card.iot .ico{ background: rgba(47,168,255,0.18); color: var(--iot); }
.track-card.iot .go{ color: var(--iot); }

.track-card.embedded{ background: var(--embedded-soft); border-color: rgba(154,99,255,0.28); }
.track-card.embedded .ico{ background: rgba(154,99,255,0.18); color: var(--embedded); }
.track-card.embedded .go{ color: var(--embedded); }

.track-card.robotics{ background: var(--robotics-soft); border-color: rgba(34,217,138,0.28); }
.track-card.robotics .ico{ background: rgba(34,217,138,0.18); color: var(--robotics); }
.track-card.robotics .go{ color: var(--robotics); }

/* journey panel */
.journey-panel{ display:flex; flex-direction:column; }
.price-box{
  text-align:center; background: rgba(255,196,38,0.1); border: 1px solid rgba(255,196,38,0.35);
  border-radius: var(--radius-md); padding: 18px 12px; margin: 6px 0 22px;
}
.price-box .amt{ font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--gold); }
.price-box .lbl{ font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }

.check-list{ display:flex; flex-direction:column; gap: 12px; margin-bottom: 24px; }
.check-list li{ display:flex; align-items:center; gap: 10px; font-size: 14px; color: var(--text-mid); }
.check-list .tick{ width:20px; height:20px; border-radius:50%; background: rgba(34,217,138,0.18); color: var(--robotics); display:flex; align-items:center; justify-content:center; flex-shrink:0; }