/* ============================================================
   VMA — Villarreal Malaysia Academy
   Design system: tokens, type, components
   Original identity (navy / gold / teal). Bold & sporty.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* Brand */
  --navy-900:#0a1530;
  --navy-800:#0e1c3d;
  --navy-700:#142a52;
  --navy-600:#1d3a6b;
  --gold:#f4c542;
  --gold-600:#e0ad1f;
  --gold-soft:#fbe9a8;
  --teal:#2a7d6f;
  --teal-600:#236155;

  /* Neutrals (warm) */
  --paper:#f6f5f0;
  --paper-2:#efece4;
  --white:#ffffff;
  --ink:#14203a;
  --ink-2:#3a445c;
  --muted:#6b7488;
  --line:#e5e2da;
  --line-2:#d7d3c8;

  /* Status */
  --green:#2e9e5b;
  --green-bg:#e6f4ec;
  --amber:#d98a16;
  --amber-bg:#fbeed6;
  --red:#d2452f;
  --red-bg:#fae3df;
  --blue:#2f6fd0;
  --blue-bg:#e4eefb;

  /* Type */
  --display:'Saira Condensed', 'Archivo', sans-serif;
  --body:'Archivo', system-ui, sans-serif;
  --mono:'Space Mono', monospace;

  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px;
  --sh-sm:0 1px 2px rgba(13,24,50,.06), 0 1px 3px rgba(13,24,50,.08);
  --sh-md:0 4px 14px rgba(13,24,50,.08), 0 2px 6px rgba(13,24,50,.05);
  --sh-lg:0 18px 50px rgba(13,24,50,.16);
}

*{box-sizing:border-box;}
.vma{font-family:var(--body); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
.vma h1,.vma h2,.vma h3,.vma h4{margin:0; font-family:var(--display); font-weight:800; line-height:.96; letter-spacing:-.01em; text-transform:uppercase;}
.vma p{margin:0;}
.vma img{display:block; max-width:100%;}
.vma a{color:inherit; text-decoration:none;}
/* Icon glyphs (no explicit width attr) size to text; chrome SVGs set width and opt out */
.vma svg:not([width]){width:1.15em; height:1.15em; flex:0 0 auto; vertical-align:middle;}

/* ---- Display scale ---- */
.d-hero{font-family:var(--display); font-weight:800; font-size:104px; line-height:.9; letter-spacing:-.015em; text-transform:uppercase;}
.d-1{font-family:var(--display); font-weight:800; font-size:62px; line-height:.94; text-transform:uppercase; letter-spacing:-.01em;}
.d-2{font-family:var(--display); font-weight:700; font-size:42px; line-height:.98; text-transform:uppercase;}
.d-3{font-family:var(--display); font-weight:700; font-size:28px; line-height:1; text-transform:uppercase;}
.kicker{font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;}
.lede{font-size:20px; line-height:1.5; color:var(--ink-2);}
.body{font-size:16px; line-height:1.6; color:var(--ink-2);}
.small{font-size:13px; line-height:1.5;}
.eyebrow{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--body); font-weight:700;
  font-size:15px; padding:15px 26px; border-radius:999px; border:none; cursor:pointer; transition:.15s;
  letter-spacing:.01em; white-space:nowrap;}
.btn svg{width:18px; height:18px;}
.btn-gold{background:var(--gold); color:var(--navy-900);}
.btn-gold:hover{background:var(--gold-600);}
.btn-navy{background:var(--navy-800); color:#fff;}
.btn-navy:hover{background:var(--navy-700);}
.btn-ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line-2);}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink); }
.btn-ghost-light{background:rgba(255,255,255,.08); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25);}
.btn-ghost-light:hover{background:rgba(255,255,255,.16);}
.btn-sm{padding:10px 16px; font-size:13px;}
.btn-lg{padding:18px 32px; font-size:17px;}

/* ---- Chips / tags ---- */
.chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:6px 12px; border-radius:999px;}
.chip-gold{background:var(--gold-soft); color:#7a5b00;}
.chip-navy{background:var(--navy-800); color:var(--gold);}
.chip-line{box-shadow:inset 0 0 0 1px var(--line-2); color:var(--muted);}
.chip-teal{background:#dcefe9; color:var(--teal-600);}

.badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px;}
.badge-green{background:var(--green-bg); color:#1c6b3c;}
.badge-amber{background:var(--amber-bg); color:#94600c;}
.badge-red{background:var(--red-bg); color:#a32d1b;}
.badge-blue{background:var(--blue-bg); color:#1f4f9c;}
.badge-gray{background:var(--paper-2); color:var(--muted);}

/* ---- Cards ---- */
.card{background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-md);}
.card-line{background:#fff; border-radius:var(--r-lg); border:1px solid var(--line);}

/* ---- Logo lockup ---- */
.vma-logo{display:inline-flex; align-items:center; gap:12px;}
.vma-mark{width:42px; height:42px; border-radius:10px; background:var(--navy-800); display:grid; place-items:center;
  position:relative; flex:0 0 auto; box-shadow:inset 0 0 0 2px var(--gold);}
.vma-mark::after{content:'V'; font-family:var(--display); font-weight:800; font-size:24px; color:var(--gold); line-height:1;}
.vma-mark.lg{width:64px; height:64px; border-radius:14px;}
.vma-mark.lg::after{font-size:38px;}
.vma-word{font-family:var(--display); font-weight:800; text-transform:uppercase; line-height:.86; letter-spacing:-.01em;}
.vma-word b{display:block; font-size:18px;}
.vma-word span{display:block; font-family:var(--mono); font-weight:700; font-size:9.5px; letter-spacing:.2em; color:var(--muted); -webkit-text-fill-color:var(--muted);}
.on-dark .vma-word{color:#fff;}
.on-dark .vma-word span{color:var(--gold); -webkit-text-fill-color:var(--gold);}
.on-dark .vma-mark{box-shadow:inset 0 0 0 2px var(--gold); background:rgba(255,255,255,.06);}

/* ---- Image placeholders ---- */
.ph{position:relative; background:
    repeating-linear-gradient(135deg, rgba(20,32,58,.05) 0 2px, transparent 2px 11px),
    linear-gradient(160deg,#e9e6dd,#dedacf);
  display:grid; place-items:center; overflow:hidden;}
.ph.dark{background:
    repeating-linear-gradient(135deg, rgba(244,197,66,.10) 0 2px, transparent 2px 11px),
    linear-gradient(160deg,#13234a,#0c1832);}
.ph-label{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(20,32,58,.5);
  border:1px dashed rgba(20,32,58,.3); padding:5px 10px; border-radius:6px; background:rgba(255,255,255,.4);}
.ph.dark .ph-label{color:rgba(244,197,66,.7); border-color:rgba(244,197,66,.35); background:rgba(0,0,0,.15);}

/* ---- Browser & phone chrome ---- */
.chrome-browser{background:#fff;}
.chrome-bar{height:44px; background:#e9e6df; display:flex; align-items:center; gap:8px; padding:0 16px; border-bottom:1px solid var(--line);}
.chrome-dots{display:flex; gap:7px;}
.chrome-dots i{width:12px; height:12px; border-radius:50%; display:block;}
.chrome-url{flex:1; height:26px; background:#fff; border-radius:7px; display:flex; align-items:center; gap:8px;
  padding:0 12px; font-family:var(--mono); font-size:12px; color:var(--muted); margin-left:10px; max-width:560px;}

.phone{background:var(--navy-900); border-radius:46px; padding:13px; box-shadow:var(--sh-lg);}
.phone-screen{background:#fff; border-radius:34px; overflow:hidden; position:relative;}
.phone-notch{position:absolute; top:0; left:50%; transform:translateX(-50%); width:126px; height:30px;
  background:var(--navy-900); border-radius:0 0 18px 18px; z-index:50;}
.status-bar{height:50px; display:flex; align-items:flex-end; justify-content:space-between; padding:0 26px 7px;
  font-size:14px; font-weight:700; position:relative; z-index:40;}
.status-bar .dots{display:flex; align-items:center; gap:6px;}
.home-ind{position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:134px; height:5px; border-radius:3px; background:rgba(20,32,58,.3); z-index:60;}

/* ---- Bottom nav (PWA) ---- */
.tabbar{display:flex; justify-content:space-around; align-items:center; background:#fff; border-top:1px solid var(--line);
  padding:10px 8px 26px;}
.tabbar a{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10.5px; font-weight:600; color:var(--muted); flex:1;}
.tabbar a.on{color:var(--navy-800);}
.tabbar a .ic{width:24px; height:24px; display:grid; place-items:center;}
.tabbar a.on .ic{color:var(--navy-800);}

/* ---- Utility ---- */
.row{display:flex;}
.col{display:flex; flex-direction:column;}
.tnum{font-variant-numeric:tabular-nums;}
.divider{height:1px; background:var(--line); border:0;}
hr.divider{margin:0;}

/* progress bar */
.pbar{height:8px; border-radius:5px; background:var(--paper-2); overflow:hidden;}
.pbar > i{display:block; height:100%; border-radius:5px; background:var(--gold);}
.pbar.teal > i{background:var(--teal);}
.pbar.green > i{background:var(--green);}

/* avatar */
.av{border-radius:50%; background:var(--navy-700); color:var(--gold); display:grid; place-items:center;
  font-family:var(--display); font-weight:700; flex:0 0 auto;}

/* table */
.tbl{width:100%; border-collapse:collapse; font-size:13.5px;}
.tbl th{font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); text-align:left; padding:12px 14px; border-bottom:1px solid var(--line);}
.tbl td{padding:13px 14px; border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:hover td{background:var(--paper);}