/* THE FMCG HUB — v2 · Blue #0055B7 · Orange #FF6B00 · Inter */
:root{--blue:#0055B7;--blue-d:#00306B;--navy:#071A33;--orange:#FF6B00;--ink:#0F172A;--grey:#64748B;--line:#E2E8F0;--bg:#F6F8FB;--green:#16A34A;--red:#DC2626;--amber:#D97706;--lgreen:#EAF7EE;--lred:#FDECEC;--lblue:#EAF2FC;--lorange:#FFF1E6;--glass:rgba(255,255,255,.08)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',Arial,sans-serif;color:var(--ink);background:#fff;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}img{max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.btn{display:inline-block;background:var(--blue);color:#fff!important;padding:12px 24px;border-radius:10px;font-weight:600;font-size:14px;border:none;cursor:pointer;transition:.2s}
.btn:hover{background:var(--blue-d);transform:translateY(-1px)}
.btn.orange{background:var(--orange)}.btn.orange:hover{background:#E05F00}
.btn.ghost{background:transparent;color:#fff!important;border:1.5px solid rgba(255,255,255,.4)}
/* ticker */
.ticker{background:var(--navy);color:#fff;font-size:12.5px;overflow:hidden;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.08)}
.ticker .inner{display:inline-block;padding:8px 0;animation:tick 45s linear infinite}
.ticker span{margin:0 26px;color:#9FB8DC}
.ticker b{color:#fff;font-weight:600}
.ticker .up{color:#4ADE80}.ticker .down{color:#F87171}
.ticker .src{color:#5B7BA6;font-size:11px}
@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* public top */
.topbar{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);z-index:50}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.topbar nav a{margin-left:26px;font-weight:500;color:var(--ink);font-size:14px}
.topbar nav a:hover{color:var(--blue)}
/* hero */
.hero{background:radial-gradient(1100px 500px at 78% -10%,#0A67D8 0%,transparent 55%),linear-gradient(150deg,var(--navy) 0%,#0A2E5C 60%,var(--blue-d) 100%);color:#fff;padding:104px 0 96px;position:relative;overflow:hidden}
.hero h1{font-size:52px;line-height:1.08;font-weight:800;max-width:680px;letter-spacing:-1.2px}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero p{font-size:18px;max-width:560px;margin:22px 0 34px;color:#B9CFEC}
.hero .tag{display:inline-flex;align-items:center;gap:8px;background:var(--glass);border:1px solid rgba(255,255,255,.18);padding:7px 16px;border-radius:99px;font-size:13px;font-weight:600;margin-bottom:24px}
.dot{width:8px;height:8px;border-radius:99px;background:#4ADE80;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.stats{display:flex;gap:18px;margin-top:56px;flex-wrap:wrap}
.stats b{display:block;font-size:34px;font-weight:800;letter-spacing:-1px}
.stats span{font-size:13px;color:#8FB0DC}
.routesvg{position:absolute;right:-60px;top:60px;width:560px;opacity:.5;pointer-events:none}
section{padding:84px 0}section.alt{background:var(--bg)}section.dark{background:var(--navy);color:#fff}
.kicker{color:var(--orange);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.1em}
h2{font-size:34px;font-weight:800;margin:10px 0 14px;letter-spacing:-.5px}
.dark h2{color:#fff}
.sub{color:var(--grey);max-width:660px;font-size:16px}
.dark .sub{color:#9FB8DC}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;margin-top:44px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:44px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px;transition:.2s}
.card:hover{box-shadow:0 12px 32px rgba(7,26,51,.09);transform:translateY(-3px)}
.dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.dark .card p{color:#9FB8DC}.dark .card h3{color:#fff}
.card .ic{width:46px;height:46px;border-radius:12px;background:var(--lblue);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:16px}
.dark .card .ic{background:rgba(255,255,255,.1);color:#fff}
.card h3{font-size:17px;margin-bottom:8px}.card p{color:var(--grey);font-size:14px}
/* live data widgets */
.widget{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
.widget h4{font-size:13px;color:var(--grey);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;display:flex;justify-content:space-between}
.widget h4 .api{font-size:10.5px;background:var(--lorange);color:var(--orange);padding:2px 8px;border-radius:99px;letter-spacing:0;text-transform:none;font-weight:700}
.quote{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.quote:last-child{border:none}
.quote b{font-weight:700}
footer{background:var(--navy);color:#8FB0DC;padding:48px 0;font-size:13px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
/* ---------- portal chrome ---------- */
.app{display:flex;min-height:100vh;background:var(--bg)}
.side{width:236px;background:var(--navy);color:#fff;padding:22px 0;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side .logo{padding:0 20px 18px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:12px}
.side .logo img{width:150px;background:#fff;border-radius:8px;padding:8px}
.side a{display:flex;justify-content:space-between;align-items:center;color:#8FB0DC;padding:10.5px 22px;font-size:13.5px;font-weight:500;border-left:3px solid transparent}
.side a.on,.side a:hover{color:#fff;background:rgba(255,255,255,.06);border-left-color:var(--orange)}
.side .n{background:var(--orange);color:#fff;font-size:10.5px;font-weight:700;border-radius:99px;padding:1px 7px}
.side .foot{margin-top:auto;padding:16px 22px;font-size:11.5px;color:#5B7BA6;border-top:1px solid rgba(255,255,255,.1)}
.main{flex:1;min-width:0}
.mticker{position:sticky;top:0;z-index:40}
.content{padding:26px 34px}
.phead{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.phead h1{font-size:22px;font-weight:800;letter-spacing:-.3px}
.phead .meta{font-size:12.5px;color:var(--grey)}
.role{background:var(--lorange);color:var(--orange);font-weight:700;font-size:12px;padding:6px 12px;border-radius:99px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:16px;margin-bottom:24px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;position:relative;overflow:hidden}
.kpi span{font-size:12px;color:var(--grey);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.kpi b{display:block;font-size:25px;font-weight:800;margin-top:5px;letter-spacing:-.5px}
.kpi small{font-size:12px;font-weight:600}
.kpi svg{position:absolute;bottom:0;right:0;opacity:.9}
.up{color:var(--green)}.down{color:var(--red)}.amb{color:var(--amber)}
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:22px}
.panel h2{font-size:15.5px;font-weight:700;margin:0 0 14px;display:flex;justify-content:space-between;align-items:center;letter-spacing:0}
.panel h2 a{font-size:13px;font-weight:600}
.panel h2 .api{font-size:10.5px;background:var(--lorange);color:var(--orange);padding:2px 8px;border-radius:99px;font-weight:700}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;color:var(--grey);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;padding:8px 10px;border-bottom:2px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:hover td{background:var(--bg)}
.pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:700;white-space:nowrap}
.pill.g{background:var(--lgreen);color:var(--green)}.pill.r{background:var(--lred);color:var(--red)}
.pill.b{background:var(--lblue);color:var(--blue)}.pill.o{background:var(--lorange);color:var(--orange)}
.pill.gr{background:#EEF1F5;color:var(--grey)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px}
@media(max-width:980px){.two,.three{grid-template-columns:1fr}.side{display:none}}
.note{background:var(--lorange);border:1px solid #FFD9BC;border-radius:12px;padding:12px 16px;font-size:13px;margin-bottom:20px}
/* milestone chain */
.chain{display:flex;align-items:center;gap:0;font-size:10.5px;font-weight:700;color:var(--grey)}
.chain i{width:26px;height:5px;background:var(--line);display:block}
.chain i.done{background:var(--green)}
.chain em{font-style:normal;width:11px;height:11px;border-radius:99px;background:var(--line);border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.chain em.done{background:var(--green);box-shadow:0 0 0 1px var(--green)}
.chain em.now{background:var(--orange);box-shadow:0 0 0 3px var(--lorange);animation:pulse 1.6s infinite}
/* progress bars */
.bar{background:var(--line);border-radius:99px;height:7px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--blue);border-radius:99px}
.bar i.o{background:var(--orange)}.bar i.g{background:var(--green)}
/* stock viz */
.palgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11px,1fr));gap:3px;margin-top:10px}
.palgrid i{aspect-ratio:1;border-radius:2.5px;background:var(--blue)}
.palgrid i.alloc{background:var(--orange)}.palgrid i.empty{background:var(--line)}
/* departure board */
.board{background:var(--navy);border-radius:14px;padding:20px;color:#fff;font-variant-numeric:tabular-nums}
.board table{font-size:13px}
.board th{color:#5B7BA6;border-color:rgba(255,255,255,.12)}
.board td{border-color:rgba(255,255,255,.08);color:#D7E6FA}
.board tr:hover td{background:rgba(255,255,255,.04)}
.board .amber{color:#FBBF24}.board .green{color:#4ADE80}
/* login */
.loginbg{min-height:100vh;background:radial-gradient(900px 500px at 80% 0%,#0A67D8 0%,transparent 55%),linear-gradient(150deg,var(--navy),#0A2E5C)}
.loginbox{background:#fff;border-radius:20px;padding:44px;max-width:1020px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-top:26px}
.rolecard{border:1.5px solid var(--line);border-radius:14px;padding:22px 16px;text-align:center;cursor:pointer;display:block;color:var(--ink);transition:.15s}
.rolecard:hover{border-color:var(--blue);background:var(--lblue);transform:translateY(-2px)}
.rolecard .ic{font-size:28px;margin-bottom:8px}
.rolecard b{display:block;font-size:14px}.rolecard span{font-size:12px;color:var(--grey)}
.field{margin-top:16px}.field label{font-size:13px;font-weight:600;display:block;margin-bottom:6px}
.field input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit}

/* ── D-style glass widgets (dark section) ── */
section.dark{position:relative;overflow:hidden}
section.dark::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(0,85,183,.35),transparent 65%);top:-260px;right:-140px;pointer-events:none}
section.dark::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,0,.14),transparent 65%);bottom:-240px;left:-120px;pointer-events:none}
section.dark .wrap{position:relative;z-index:1}
.dark .widget{background:rgba(255,255,255,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 32px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.10);transition:.25s}
.dark .widget:hover{transform:translateY(-4px);border-color:rgba(255,107,0,.45);box-shadow:0 16px 44px rgba(0,0,0,.35),0 0 24px rgba(255,107,0,.12),inset 0 1px 0 rgba(255,255,255,.12)}
.dark .widget h4{color:#9FB8DC}
.dark .widget .quote span{color:#8FB0DC}
.dark .widget .quote b{color:#fff}
.dark .widget h4 .api{background:rgba(255,107,0,.16);color:#FFA45C;border:1px solid rgba(255,107,0,.35)}
/* glass stat chips in hero */
.stats > div{background:rgba(255,255,255,.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}

/* ═══ MOBILE — real responsive layer (9 Sep) ═══ */
.navtoggle{display:none}
.navtoggle-label{display:none;cursor:pointer;padding:10px;margin-left:auto}
.navtoggle-label span{display:block;width:24px;height:2.5px;background:var(--navy);border-radius:2px;margin:5px 0;transition:.25s}
@media(max-width:860px){
  .wrap{padding:0 18px}
  /* topbar → hamburger */
  .topbar .wrap{height:64px;flex-wrap:wrap}
  .logotype img{height:38px!important}
  .navtoggle-label{display:block}
  .topbar nav{display:none;width:100%;flex-direction:column;padding:6px 18px 16px;background:#fff;position:absolute;top:64px;left:0;right:0;border-bottom:1px solid var(--line);box-shadow:0 14px 30px rgba(7,26,51,.12);z-index:60}
  .topbar nav a{display:block;margin:0;padding:12px 4px;font-size:16px;border-bottom:1px solid var(--line)}
  .topbar nav a.btn{margin:12px 0 0!important;text-align:center;color:#fff!important}
  .navtoggle:checked ~ nav{display:flex}
  .navtoggle:checked ~ .navtoggle-label span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .navtoggle:checked ~ .navtoggle-label span:nth-child(2){opacity:0}
  .navtoggle:checked ~ .navtoggle-label span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  /* hero */
  .hero{padding:56px 0 52px}
  .hero h1{font-size:33px;letter-spacing:-.6px}
  .hero p{font-size:15.5px}
  .hero .btn{display:block;text-align:center;margin:0 0 12px!important}
  .routesvg{display:none}
  .stats{gap:12px;margin-top:36px}
  .stats > div{flex:1 1 40%;padding:12px 14px!important}
  .stats b{font-size:24px}
  /* sections & grids */
  section{padding:52px 0}
  h2{font-size:26px}
  .grid3,.grid4,.two,.three,.cards{grid-template-columns:1fr!important}
  .widget{margin-bottom:0}
  /* tables scroll instead of squash */
  .panel{overflow-x:auto}
  .panel table{min-width:560px}
  .ticker{font-size:11px}
  footer .wrap{flex-direction:column;gap:14px;text-align:center}
}
@media(max-width:480px){
  .hero h1{font-size:28px}
  .stats > div{flex:1 1 100%}
}