/* ===================================================================
   TDN website — brand dark+yellow, African (Ndebele) accents.
   Brand tokens mirror lib/core/theme/app_colors.dart and feature_swot.html.
   =================================================================== */
:root{
  --bg:#0D0D0F; --surface:#1B1B1E; --elevated:#2A2A2D;
  --yellow:#F8C12C; --on-yellow:#1C1C1E;
  --text:#FFFFFF; --text2:#9A9AA0; --text3:#5C5C62;
  --border:#38383A;
  --green:#30D158; --red:#FF4444; --orange:#FF9F0A; --blue:#0A84FF;
  /* African accent palette (used in patterns only, not core UI) */
  --clay:#E07A3F; --teal:#1FB8A6; --royal:#2D6FE0; --cream:#F2EDE4;
  --radius:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Poppins',sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.accent{color:var(--yellow)}
h1,h2,h3{line-height:1.15;letter-spacing:-.5px}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:14px;
  font-weight:600;font-size:14px;padding:11px 18px;border:1px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn.big{font-size:16px;padding:14px 24px;border-radius:16px}
.btn-solid{background:var(--yellow);color:var(--on-yellow);box-shadow:0 8px 26px rgba(248,193,44,.32)}
.btn-solid:hover{box-shadow:0 12px 34px rgba(248,193,44,.45)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--yellow);color:var(--yellow)}

/* ── African pattern band (Ndebele sawtooth ribbon) ── */
.afro-band, .foot-band{
  height:26px;width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='26' viewBox='0 0 96 26'%3E%3Crect width='96' height='26' fill='%231C1C1E'/%3E%3Crect width='96' height='3' fill='%23F8C12C'/%3E%3Crect y='23' width='96' height='3' fill='%23F8C12C'/%3E%3Cpolygon points='0,23 12,4 24,23' fill='%23E07A3F'/%3E%3Cpolygon points='24,23 36,4 48,23' fill='%231FB8A6'/%3E%3Cpolygon points='48,23 60,4 72,23' fill='%23F2EDE4'/%3E%3Cpolygon points='72,23 84,4 96,23' fill='%23F8C12C'/%3E%3Crect x='10' y='11' width='4' height='4' fill='%231C1C1E' transform='rotate(45 12 13)'/%3E%3Crect x='34' y='11' width='4' height='4' fill='%231C1C1E' transform='rotate(45 36 13)'/%3E%3Crect x='58' y='11' width='4' height='4' fill='%231C1C1E' transform='rotate(45 60 13)'/%3E%3Crect x='82' y='11' width='4' height='4' fill='%231C1C1E' transform='rotate(45 84 13)'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:auto 26px;
}
.afro-band.flip{transform:rotate(180deg)}

/* ════════════ NAV ════════════ */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;
  padding:14px 26px;background:rgba(28,28,30,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px}
.brand-badge{width:38px;height:38px;border-radius:11px;background:var(--yellow);
  display:grid;place-items:center;font-size:20px;box-shadow:0 6px 18px rgba(248,193,44,.35)}
.brand-logo{height:40px;width:auto;display:block;object-fit:contain}
.nav-links{display:flex;gap:22px;margin-left:14px}
.nav-links a{color:var(--text2);font-size:14px;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--yellow)}
.nav-cta{margin-left:auto;display:flex;gap:10px}
.nav-burger{display:none;margin-left:auto;background:none;border:none;color:var(--text);
  font-size:24px;cursor:pointer}

/* ════════════ HERO ════════════ */
.hero{position:relative;overflow:hidden;
  background:radial-gradient(circle at 78% -10%, rgba(248,193,44,.16), transparent 52%), var(--bg)}
.hero-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 20% 120%, rgba(31,184,166,.10), transparent 45%)}
.hero-inner{position:relative;max-width:1180px;margin:0 auto;padding:64px 26px 40px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.kicker{display:inline-block;background:var(--surface);border:1px solid var(--border);
  color:var(--yellow);font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:20px;margin-bottom:18px}
.hero h1{font-size:clamp(40px,7vw,72px);font-weight:800}
.lead{color:var(--text2);font-size:clamp(16px,2.2vw,19px);max-width:540px;margin:18px 0 26px}
.lead b{color:var(--text)}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.chip{background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:7px 14px;font-size:13px;color:var(--text)}

/* phone mock */
.hero-phone{display:grid;place-items:center}
.phone{position:relative;width:248px;height:508px;border-radius:42px;background:#000;
  border:2px solid var(--elevated);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 8px #0d0d0e;
  padding:14px;animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.phone-notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:104px;height:20px;background:#000;border-radius:0 0 14px 14px;z-index:3}
.phone-screen{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;
  background:linear-gradient(180deg,#222 0%,var(--bg) 100%);display:flex;flex-direction:column}
.mini-map{position:relative;flex:1;overflow:hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(31,184,166,.12), transparent 40%),
    repeating-linear-gradient(0deg, #232326 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, #232326 0 1px, transparent 1px 34px),
    #1f1f22}
.map-road{position:absolute;left:36px;right:30px;top:60%;height:10px;border-radius:6px;
  background:var(--elevated);transform:rotate(-18deg);box-shadow:0 0 0 2px #0006}
.map-pin{position:absolute;font-size:20px;filter:drop-shadow(0 3px 5px #0008)}
.map-pin.home{left:30px;bottom:54px}
.map-pin.dest{right:24px;top:42px}
.map-car{position:absolute;font-size:22px;offset-path:path('M 34 250 L 200 92');offset-rotate:0deg;
  animation:carmove 4.2s cubic-bezier(.5,0,.3,1) infinite}
@keyframes carmove{0%{offset-distance:0%}55%{offset-distance:100%}100%{offset-distance:100%}}
.mini-card{background:var(--surface);border-top:1px solid var(--border);padding:16px 16px 20px}
.mini-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2)}
.dot{width:9px;height:9px;border-radius:50%}
.dot.green{background:var(--green);box-shadow:0 0 0 4px rgba(48,209,88,.18);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(48,209,88,.18)}50%{box-shadow:0 0 0 7px rgba(48,209,88,.05)}}
.mini-eta{font-size:26px;font-weight:800;margin:6px 0 12px}
.mini-btn{background:var(--yellow);color:var(--on-yellow);text-align:center;font-weight:700;
  font-size:14px;padding:11px;border-radius:13px}

/* ════════════ SECTIONS ════════════ */
.section{position:relative;max-width:1180px;margin:0 auto;padding:74px 26px}
.band-dark{max-width:none;background:linear-gradient(180deg,#151517,#0f0f11);margin-top:10px}
.band-dark .section-head,.band-dark .cards{max-width:1180px;margin-left:auto;margin-right:auto}
.section-head{text-align:center;max-width:680px;margin:0 auto 44px}
.eyebrow{color:var(--yellow);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px}
.section-head h2{font-size:clamp(28px,4.5vw,42px);font-weight:800;margin-top:8px}
.sub{color:var(--text2);font-size:16px;margin-top:10px}

/* ── How it works ── */
.how-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
.scene-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;
  padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.scene{width:100%;height:auto;display:block;border-radius:16px;background:var(--bg)}
.scene-foot{text-align:center;color:var(--text2);font-size:13px;margin-top:12px}
.road-dash{animation:march 1.2s linear infinite}
@keyframes march{to{stroke-dashoffset:-16}}
.sun{animation:sun 4s ease-in-out infinite}
@keyframes sun{0%,100%{r:14}50%{r:17}}
.pin{animation:bob 2.4s ease-in-out infinite}
.pin-dest{animation-delay:.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.steps{list-style:none;display:flex;flex-direction:column;gap:14px}
.step{display:flex;gap:16px;background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:18px 20px;transition:border-color .3s, transform .3s, background .3s}
.step.active{border-color:var(--yellow);transform:translateX(6px);
  background:linear-gradient(90deg,rgba(248,193,44,.10),var(--surface))}
.step-no{flex-shrink:0;width:40px;height:40px;border-radius:12px;background:var(--elevated);
  color:var(--text2);display:grid;place-items:center;font-weight:800;font-size:18px;transition:.3s}
.step.active .step-no{background:var(--yellow);color:var(--on-yellow);box-shadow:0 6px 18px rgba(248,193,44,.4)}
.step-body h3{font-size:17px;font-weight:600}
.step-body p{color:var(--text2);font-size:14px;margin-top:3px}

/* ── Info cards grid ── */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.info-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:24px 20px;text-align:center}
.info-card .ic{width:58px;height:58px;margin:0 auto 14px;border-radius:16px;background:var(--elevated);
  display:grid;place-items:center;font-size:28px}
.info-card h3{font-size:17px;font-weight:600}
.info-card p{color:var(--text2);font-size:13.5px;margin-top:8px}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ── Operators ── */
.operators{position:relative;max-width:none;background:
  radial-gradient(circle at 85% 10%, rgba(45,111,224,.10), transparent 45%),
  linear-gradient(180deg,#1c1c1e,#202023);padding-top:0}
.op-inner{max-width:1180px;margin:0 auto;padding:64px 26px;display:grid;
  grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.op-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin:20px 0 26px}
.op-list li{font-size:15px;color:var(--text)}
.op-note{color:var(--text3);font-size:13px;margin-top:14px}
.op-art{display:grid;place-items:center}
.dash-card{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--border);
  border-radius:22px;padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.dash-row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;
  color:var(--text2);margin-top:14px}
.dash-row:first-child{margin-top:0}
.dash-row b{color:var(--text);font-size:20px;font-weight:800}
.dash-bar{height:8px;border-radius:6px;background:var(--elevated);margin-top:7px;overflow:hidden}
.dash-bar i{display:block;height:100%;width:var(--w);border-radius:6px;
  background:linear-gradient(90deg,var(--yellow),var(--clay));transform-origin:left;
  animation:grow 1.4s ease forwards;transform:scaleX(0)}
@keyframes grow{to{transform:scaleX(1)}}
.dash-tag{margin-top:18px;text-align:center;font-size:12px;color:var(--yellow);font-weight:600;
  border-top:1px dashed var(--border);padding-top:14px}

/* ── Get the app ── */
.get{text-align:center}
.get-inner h2{font-size:clamp(28px,4.5vw,42px);font-weight:800}
.store-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:26px 0 22px}
.store{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:15px;padding:12px 22px;transition:transform .15s, border-color .2s}
.store:hover{transform:translateY(-2px);border-color:var(--yellow)}
.store-soon{opacity:.45;cursor:default;pointer-events:none}
.store-ic{width:30px;height:30px;border-radius:8px;background:var(--elevated);display:grid;
  place-items:center;color:var(--yellow);font-size:15px}
.store small{color:var(--text2);font-size:11px}
.store b{font-size:16px}
.store span{text-align:left;line-height:1.2}
.admin-link{display:inline-block;color:var(--text2);font-size:14px;border-bottom:1px solid var(--border);
  padding-bottom:2px;transition:color .2s,border-color .2s}
.admin-link:hover{color:var(--yellow);border-color:var(--yellow)}

/* ── Footer ── */
.foot{background:#161617;border-top:1px solid var(--border)}
.foot-inner{max-width:1180px;margin:0 auto;padding:34px 26px;display:flex;gap:24px;
  flex-wrap:wrap;align-items:center;justify-content:space-between}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-links a{color:var(--text2);font-size:14px;transition:color .2s}
.foot-links a:hover{color:var(--yellow)}
.foot-note{color:var(--text3);font-size:13px;text-align:right}
.foot-note small{font-size:11.5px}

/* ════════════ RESPONSIVE ════════════ */
@media(max-width:900px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-burger{display:block}
  .nav.open .nav-links{display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;
    gap:0;background:var(--bg);border-bottom:1px solid var(--border);margin:0;padding:8px 0}
  .nav.open .nav-links a{padding:13px 26px;border-top:1px solid var(--border)}
  .nav.open .nav-cta{display:flex;position:absolute;top:100%;left:0;right:0;padding:14px 26px;
    background:var(--bg);border-bottom:1px solid var(--border)}
  .nav.open .nav-cta .btn{flex:1;justify-content:center}
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero-buttons,.hero-badges{justify-content:center}
  .hero-phone{order:-1;margin-bottom:8px}
  .how-wrap{grid-template-columns:1fr}
  .op-inner{grid-template-columns:1fr;text-align:center}
  .op-list{align-items:flex-start;max-width:320px;margin-left:auto;margin-right:auto}
  .cards{grid-template-columns:repeat(2,1fr)}
  .foot-inner{flex-direction:column;text-align:center}
  .foot-note{text-align:center}
}
@media(max-width:480px){
  .cards{grid-template-columns:1fr}
  .hero h1{font-size:44px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}