/* ============================================================
   Aarorn Technologies (Malaysia) — ATSB redesign
   Shared design system for the clickable mockup.
   Single reserved accent (teal/green) on a deep-navy base.
   ============================================================ */

:root{
  --bg:#0b1020;            /* deep navy */
  --bg-soft:#11182e;
  --panel:#151d36;
  --ink:#e8ecf6;
  --muted:#9aa6c4;
  --faint:#6f7ba0;
  --line:rgba(255,255,255,.08);
  --accent:#2E86C8;        /* single reserved accent — aarorn logo blue */
  --accent-soft:rgba(46,134,200,.12);
  --accent-line:rgba(46,134,200,.35);
  --radius:16px;
  --max:1160px;
  font-synthesis:none;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
/* Guard: hidden absolutely-positioned nav flyouts (.subdropdown-tall) extend the
   page past the viewport and create a phantom horizontal scrollbar on desktop.
   overflow-x:clip removes it without establishing a scroll container, so the
   sticky header and hover flyouts keep working. */
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.accent{color:var(--accent)}
.center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}

/* ---------- Buttons ---------- */
.btn{display:inline-block;padding:10px 18px;border-radius:999px;font-size:14px;font-weight:600;border:1px solid var(--line);transition:.2s;cursor:pointer;background:none;color:var(--ink)}
.btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.btn-solid{background:var(--accent);color:#fff;border-color:var(--accent)}
/* keep solid buttons on their full matcha fill on hover — the .btn:hover wash above must not bleed the fill away */
.btn-solid:hover{background:var(--accent);color:#fff;filter:brightness(1.06)}
/* always-on amber/gold outline + text (e.g. "See all services") */
.btn-gold{border-color:var(--accent);color:var(--accent)}
.btn-gold:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.btn-lg{padding:14px 26px;font-size:15px}

/* ---------- Nav ---------- */
header{position:sticky;top:0;z-index:50;background:#ffffff;border-bottom:1px solid rgba(0,0,0,.09)}
nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px;flex:none}
.brand img{height:34px !important;width:auto}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent);flex:none}
.brand small{display:block;font-weight:500;font-size:11px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase}
/* Nav links hug their content and sit to the right (margin-left:auto), which
   opens a deliberately LARGER gap after the logo than the even 24px gap the
   links share among themselves (Huda, 2026-07-31). */
.navlinks{display:flex;gap:24px;align-items:center;font-size:14px;color:#0b1020;flex-wrap:nowrap;margin-left:auto;justify-content:flex-end}
.navlinks a{color:#0b1020;white-space:nowrap}
.navlinks a:hover{color:#000}
.navlinks a.active{color:#0b1020;font-weight:600;position:relative}
/* Absolute underline (matches .navtrigger.active) so the active line never adds
   layout height — plain links (About/Training/Careers) lift the same slight amount
   as the dropdown triggers instead of pushing the bar down. */
.navlinks a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--accent);border-radius:2px;display:block}
.menu-toggle{display:none;background:none;border:0;color:#0b1020;font-size:24px;cursor:pointer}
/* Keep the CTA and language pill compact so the longer nav fits on one line */
.navlinks .btn{padding:8px 15px;font-size:13.5px}
.navlinks .lang-toggle{margin-left:2px}
/* Contact nav item styled as a solid matcha-green pill button */
.navlinks>a[href="contact.html"]{background:var(--accent);color:#fff;padding:8px 18px;border-radius:999px;font-weight:600;line-height:1;transition:.2s}
.navlinks>a[href="contact.html"]:hover{color:#fff;filter:brightness(1.06)}
.navlinks>a[href="contact.html"].active{color:#fff;font-weight:600}
.navlinks>a[href="contact.html"].active::after{display:none}

/* ---------- Nav dropdowns (Products / Solutions) ---------- */
.navitem{position:relative;display:inline-flex;align-items:center}
.navtrigger{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;margin:0;font:inherit;font-size:14px;color:#0b1020;cursor:pointer;line-height:1;white-space:nowrap}
.navtrigger:hover{color:#000}
/* Active top-level dropdown label: bold + full-width green line. The trigger is a
   flex container, so position the underline absolutely to span the whole label. */
.navtrigger.active{color:#0b1020;font-weight:600;position:relative}
.navtrigger.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--accent);border-radius:2px;display:block}
.navtrigger .caret{font-size:10px;line-height:1;color:#5b6472;transition:transform .18s,color .18s}
.navitem:hover .navtrigger,.navitem:focus-within .navtrigger{color:#000}
.navitem:hover .navtrigger .caret,.navitem:focus-within .navtrigger .caret{transform:rotate(180deg);color:var(--accent)}
.dropdown{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(6px);min-width:190px;background:#ffffff;border:1px solid rgba(0,0,0,.09);border-radius:12px;box-shadow:0 12px 30px rgba(6,20,40,.14);padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60}
.dropdown::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.navitem:hover .dropdown,.navitem:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown a{display:block;padding:9px 14px;border-radius:8px;font-size:14px;color:#0b1020;white-space:nowrap;transition:background .15s,color .15s}
.dropdown a::after{display:none}
.dropdown a:hover{background:var(--accent-soft);color:#241A02}
/* No active-page indicator inside dropdowns: a dropdown item for the current page
   looks identical to the others (hover background still applies). Only the top-level
   nav labels show the "you are here" line. */
.dropdown a.active{font-weight:400;color:#0b1020}
.dropdown a.active::after{display:none}
/* Third-level flyout submenu (Solutions ▾ ▸ Sovereign AI) */
.subitem{position:relative}
.dropdown .subtrigger{display:flex;align-items:center;justify-content:space-between;gap:10px}
.subcaret{font-size:11px;line-height:1;color:#5b6472;transition:color .18s,transform .18s}
.subitem:hover>.subtrigger .subcaret,.subitem:focus-within>.subtrigger .subcaret{color:var(--accent);transform:translateX(2px)}
.subdropdown{position:absolute;top:-8px;left:calc(100% + 10px);min-width:178px;background:#fff;border:1px solid rgba(0,0,0,.09);border-radius:12px;box-shadow:0 12px 30px rgba(6,20,40,.14);padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateX(6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:70}
.subdropdown::before{content:"";position:absolute;top:0;bottom:0;left:-10px;width:10px}
.subdropdown a{display:block;padding:9px 14px;border-radius:8px;font-size:14px;color:#0b1020;white-space:nowrap;transition:background .15s,color .15s}
.subdropdown a:hover{background:var(--accent-soft);color:#241A02}
/* Same rule for third-level flyout items — no active line inside submenus. */
.subdropdown a.active{font-weight:400;color:#0b1020}
.subdropdown a.active::after{display:none}
.subitem:hover>.subdropdown,.subitem:focus-within>.subdropdown{opacity:1;visibility:visible;transform:translateX(0)}
/* Tall Use-Cases flyouts (10 functions / 14 industries): two columns so they fit the viewport */
.subdropdown-tall{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px;min-width:390px}

/* ---------- Section scaffold ---------- */
section{padding:78px 0}
.alt{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:640px;margin-bottom:40px}
.sec-head.center{margin-left:auto;margin-right:auto}
.kicker{font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent)}
.sec-head h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.5px;margin:10px 0 12px;font-weight:800}
.sec-head p{color:var(--muted)}

/* ---------- Page header (interior pages) ---------- */
.page-head{position:relative;overflow:hidden;padding:70px 0 54px;border-bottom:1px solid var(--line)}
.page-head::before{content:"";position:absolute;inset:0;background:
   radial-gradient(560px 300px at 82% 0%,var(--accent-soft),transparent 70%),
   radial-gradient(460px 280px at 0% 100%,rgba(80,120,255,.10),transparent 70%);pointer-events:none}
.crumbs{font-size:13px;color:var(--faint);margin-bottom:16px}
.crumbs a:hover{color:var(--accent)}
.page-head h1{font-size:clamp(30px,4.6vw,50px);line-height:1.05;letter-spacing:-1px;font-weight:800;max-width:760px}
.page-head p.lead{font-size:clamp(15px,1.9vw,19px);color:var(--muted);max-width:640px;margin-top:16px}

/* ---------- Eyebrow pill ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-soft);background:var(--accent-soft);padding:6px 14px;border-radius:999px}

/* ---------- Hero (home) ---------- */
.hero{position:relative;overflow:hidden;padding:96px 0 80px}
.hero::before{content:"";position:absolute;inset:0;background:
   radial-gradient(600px 320px at 78% 8%,var(--accent-soft),transparent 70%),
   radial-gradient(500px 300px at 5% 90%,rgba(80,120,255,.10),transparent 70%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);gap:56px;align-items:center}
.hero-copy{max-width:600px}
.hero h1{font-size:clamp(34px,5.4vw,60px);line-height:1.05;letter-spacing:-1px;margin:22px 0 18px;font-weight:800}
.hero p.lead{font-size:clamp(16px,2vw,20px);color:var(--muted);max-width:560px}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.stats{display:flex;gap:40px;margin-top:54px;flex-wrap:wrap}
.stat .n{font-size:30px;font-weight:800;color:var(--ink)}
.stat .l{font-size:13px;color:var(--muted)}

/* Hero visual (right side) */
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:440px}
.hero-visual svg{width:100%;max-width:560px;height:auto;overflow:visible;animation:hvFloat 9s ease-in-out infinite}
.hero-visual .hv-rings{transform-box:view-box;transform-origin:280px 260px;animation:hvSpin 48s linear infinite}
.hero-visual .hv-core{transform-box:view-box;transform-origin:280px 260px;animation:hvPulse 3.4s ease-in-out infinite}
.hero-visual .hv-blink{animation:hvBlink 2.6s ease-in-out infinite}
@keyframes hvSpin{to{transform:rotate(360deg)}}
@keyframes hvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes hvPulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes hvBlink{0%,100%{opacity:.25}50%{opacity:1}}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-visual{order:-1;min-height:0;max-width:420px;margin:0 auto}
  .hero p.lead,.hero-copy{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-visual svg,.hero-visual .hv-rings,.hero-visual .hv-core,.hero-visual .hv-blink{animation:none}
}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:.22s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-4px);border-color:var(--accent-line)}
.card .tag{font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.card h3{font-size:21px;margin:12px 0 8px;font-weight:700}
.card p{color:var(--muted);font-size:14.5px}
.card .more{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--accent)}
.badge-featured{position:absolute;top:18px;right:18px;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:4px 10px;border-radius:999px}
.ico{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:22px}

/* ---------- Capabilities ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cap{padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--bg-soft)}
.cap .ico{margin-bottom:14px}
.cap h4{font-size:16.5px;margin-bottom:6px}
.cap p{color:var(--muted);font-size:14px}

/* ---------- Split (image / text) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split .visual{border-radius:20px;border:1px solid var(--line);background:linear-gradient(120deg,var(--panel),var(--bg-soft));min-height:320px;display:flex;align-items:center;justify-content:center;font-size:64px;color:var(--accent);position:relative;overflow:hidden}
.split .visual::after{content:"";position:absolute;inset:0;background:radial-gradient(300px 200px at 70% 20%,var(--accent-soft),transparent 70%)}
.split h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.5px;margin-bottom:14px}
.split p{color:var(--muted);margin-bottom:14px}
.ticklist{list-style:none;margin-top:18px;display:grid;gap:12px}
.ticklist li{padding-left:30px;position:relative;color:var(--muted)}
.ticklist li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:800}

/* ---------- Bands / CTA ---------- */
.band{background:linear-gradient(120deg,var(--panel),var(--bg-soft));border:1px solid var(--line);border-radius:24px;padding:48px;display:flex;gap:40px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.band h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.5px;max-width:560px}
.band p{color:var(--muted);margin-top:12px;max-width:560px}
.careers-cta{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:24px;padding:42px}
.careers-cta h2{font-size:28px;letter-spacing:-.5px}
.careers-cta p{color:var(--muted);margin-top:6px}

/* ---------- Stat band ---------- */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.statband .n{font-size:34px;font-weight:800}
.statband .l{color:var(--muted);font-size:13.5px;margin-top:4px}

/* ---------- Careers / jobs ---------- */
.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.filters select,.filters input{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:11px 14px;border-radius:10px;font-size:14px;min-width:170px}
.filters input{flex:1;min-width:200px}
.filters select:focus,.filters input:focus{outline:none;border-color:var(--accent)}
.job{display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px;transition:.2s;flex-wrap:wrap}
.job:hover{border-color:var(--accent-line);transform:translateX(2px)}
.job h3{font-size:18px;margin-bottom:6px}
.job .meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.pill{border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:12px;color:var(--muted)}
.pill.dept{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
.job-list{display:grid;gap:14px}
.empty{color:var(--faint);padding:30px;text-align:center;border:1px dashed var(--line);border-radius:14px}

/* ---------- Forms ---------- */
.form-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:34px}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px;letter-spacing:.2px}
.field label .req{color:var(--accent)}
.field input,.field textarea,.field select{width:100%;background:var(--bg-soft);border:1px solid var(--line);color:var(--ink);padding:12px 14px;border-radius:10px;font-size:14.5px;font-family:inherit}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field .hint{font-size:12px;color:var(--faint);margin-top:6px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.filedrop{border:1px dashed var(--accent-line);border-radius:12px;padding:22px;text-align:center;color:var(--muted);font-size:14px;background:var(--accent-soft)}
.form-note{font-size:12.5px;color:var(--faint);margin-top:8px}
.success{display:none;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:12px;padding:16px 18px;color:var(--ink);font-size:14.5px;margin-bottom:20px}
.success.show{display:block}

/* ---------- Info list (contact details) ---------- */
.info-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.info-item .ico{flex:none}
.info-item h4{font-size:14px;margin-bottom:3px}
.info-item p{color:var(--muted);font-size:14px}
.tbc{color:var(--faint);font-style:italic}

/* ---------- Modal (apply) ---------- */
.modal{position:fixed;inset:0;background:rgba(5,8,18,.72);backdrop-filter:blur(4px);z-index:100;display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.modal.show{display:flex}
.modal .form-card{max-width:560px;width:100%;position:relative}
.modal .close{position:absolute;top:16px;right:18px;font-size:22px;color:var(--muted);background:none;border:0;cursor:pointer}
.modal .close:hover{color:var(--accent)}

/* ---------- Footer ---------- */
footer{background:#080c18;border-top:1px solid var(--line);padding:56px 0 30px;color:var(--muted);font-size:14px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.foot-grid h5{color:var(--ink);font-size:13px;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px}
.foot-grid a{display:block;padding:5px 0;color:var(--muted)}
.foot-grid a:hover{color:var(--accent)}
/* footer "Contact form" button: the generic .foot-grid a rule (display:block; padding:5px 0) out-specifies .btn and squashes it into a full-width, zero-padding, non-pill block. Restore proper button geometry + keep the dark text readable on the matcha fill at all times. */
.foot-grid a.btn{display:inline-block;width:auto;padding:10px 18px;border-radius:999px;line-height:1.2}
.foot-grid a.btn-solid,.foot-grid a.btn-solid:hover{color:#fff}
.foot-bottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px}

/* ---------- Mockup banner ---------- */
.note{background:#0c1a28;border:1px dashed #2a5f88;color:#cfe4f5;font-size:12.5px;padding:8px 16px;text-align:center}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .menu-toggle{display:block;z-index:65}
  /* Hamburger reveals a full-width stacked nav panel below the header.
     Touch devices have no hover, so the Products/Solutions dropdowns and
     the Sovereign AI flyout render as always-open, indented accordions. */
  .navlinks{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    flex:none;justify-content:flex-start;
    background:#fff;border-top:1px solid rgba(0,0,0,.06);
    border-bottom:1px solid rgba(0,0,0,.10);
    box-shadow:0 16px 34px rgba(6,20,40,.16);
    padding:8px 0 14px;max-height:calc(100vh - 64px);overflow-y:auto;
  }
  header.nav-open .navlinks{display:flex}
  .navlinks>a{padding:12px 24px;width:100%}
  .navlinks a.active::after{display:none}
  /* Keep the Contact pill contained in the mobile menu, not a full-width bar */
  .navlinks>a[href="contact.html"]{width:auto;margin:8px 24px 0;padding:10px 20px;text-align:center;align-self:flex-start}
  .navitem{display:block;width:100%}
  .navtrigger{width:100%;justify-content:space-between;padding:12px 24px;font-size:14.5px}
  .navitem:hover .navtrigger .caret,.navitem:focus-within .navtrigger .caret{transform:none}
  /* Accordion: sections start collapsed, expand only when their trigger is tapped */
  .navtrigger .caret{transition:transform .2s ease}
  .navitem.open>.navtrigger .caret{transform:rotate(180deg)}
  /* The caret is its own tap target: tapping it toggles the accordion while
     tapping the label navigates to the section page. Enlarge its hit area
     (full row height + a wide right zone) so it's easy to hit on a phone. */
  .navtrigger>.caret{padding:12px 24px 12px 20px;margin:-12px -24px -12px 0;font-size:13px}
  .dropdown{position:static;transform:none;opacity:1;visibility:visible;min-width:0;background:transparent;border:none;box-shadow:none;padding:0 0 4px 12px;display:none}
  .navitem.open>.dropdown{display:flex}
  /* Tapping the trigger focuses it; keep the desktop focus/hover transform
     (translateX(-50%)) from shifting the now-static panel off-screen. */
  .navitem:hover>.dropdown,.navitem:focus-within>.dropdown{transform:none}
  .subitem:hover>.subdropdown,.subitem:focus-within>.subdropdown{transform:none}
  .dropdown::before{display:none}
  .dropdown a{padding:10px 24px}
  .subitem{width:100%}
  .subtrigger{padding:10px 24px}
  .subtrigger .subcaret{display:inline-block;transition:transform .2s ease}
  .subitem.open>.subtrigger .subcaret{transform:rotate(90deg)}
  /* Same split for nested sub-sections: chevron toggles, label navigates. */
  .subtrigger{justify-content:space-between}
  .subtrigger>.subcaret{padding:10px 24px 10px 20px;margin:-10px -24px -10px 0}
  .subdropdown{position:static;transform:none;opacity:1;visibility:visible;min-width:0;background:transparent;border:none;box-shadow:none;padding:0 0 0 16px;display:none}
  .subitem.open>.subdropdown{display:flex}
  .subdropdown-tall{display:block;min-width:0}
  .subdropdown::before{display:none}
  .subdropdown a{padding:9px 24px}
  .lang-toggle{margin:12px 24px 4px;align-self:flex-start}
  .navlinks .btn{margin:8px 24px 0;text-align:center}
  .proj-grid,.cap-grid,.g-3,.g-2,.split,.two-col{grid-template-columns:1fr}
  .statband{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .band{padding:32px}
  section{padding:58px 0}
  .split{gap:28px}
}
@media(max-width:520px){
  .foot-grid{grid-template-columns:1fr}
  .stats{gap:26px}
  .statband{grid-template-columns:1fr 1fr}
}

/* ---------- Language toggle (EN / Bahasa Malaysia — placeholder) ---------- */
.lang-toggle{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid rgba(0,0,0,.10);border-radius:999px;background:#eef1f4;line-height:1}
.lang-toggle .lang-opt{padding:5px 12px;font-size:12.5px;font-weight:600;letter-spacing:.4px;color:#8a93a3;background:transparent;border:none;border-radius:999px;cursor:pointer;transition:color .18s,background .18s,box-shadow .18s;line-height:1}
.lang-toggle .lang-opt:hover:not(.active){color:#4a5261}
.lang-toggle .lang-opt.active{background:var(--accent);color:#fff;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.lang-toggle:hover{border-color:var(--accent-line)}

/* ── Partnerships & Affiliations ─────────────────────────────── */
.partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
.partner-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:104px;padding:20px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-soft);text-align:center;transition:.2s}
.partner-logo:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.partner-logo .mark{font-size:26px;font-weight:800;letter-spacing:1px;color:var(--ink)}
.partner-logo .mark .accent{color:var(--accent)}
.partner-logo .partner-img{height:34px;width:auto;background:#fff;padding:7px 11px;border-radius:8px;display:block;object-fit:contain}
.partner-logo .plabel{font-size:12px;color:var(--faint);letter-spacing:.4px}
.partner-note{margin-top:22px;padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;background:var(--accent-soft)}
.partner-note p{color:var(--muted);margin:0}
.partner-note a{color:var(--accent);font-weight:600}
/* Compact home-page logo strip */
.partner-strip{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:14px;margin-top:8px}
.partner-strip .partner-logo{flex:1 1 180px;max-width:220px;min-height:88px}
/* Featured brand logo card — MDEC / Malaysia Digital, shown large as a full card */
.partner-logo--brand{background:#fff;justify-content:center;gap:12px;padding:22px 18px}
.partner-logo--brand:hover{background:#fff;border-color:var(--accent-line)}
.partner-logo--brand .partner-img{height:auto;width:auto;max-height:62px;max-width:100%;padding:0;background:transparent;border-radius:0;margin:0 auto;object-fit:contain}
.partner-logo--brand .plabel{color:var(--faint)}
/* Featured brand logo inside an about-page trust-badge (logo sits on a white chip over navy) */
.trust-badge--brand .tb-logo{width:100%;max-width:168px;height:auto;object-fit:contain;background:#fff;padding:14px 16px;border-radius:10px;display:block;margin:0 auto 2px}
@media(max-width:760px){.partner-grid{grid-template-columns:repeat(2,1fr)}}
/* ── Clients / Technology Partners logo wall (tblocks-style: white band, borderless, full-colour) ── */
#clients{background:#ffffff;border-top:1px solid rgba(9,14,32,.08);border-bottom:1px solid rgba(9,14,32,.08)}
#clients .kicker{color:var(--accent)}
#clients .sec-head h2{color:#0b1020}
#clients .sec-head p{color:#5a6580}
/* message box now a full-width lead-in above the straight-line logo carousel */
.clients-msg{max-width:660px;margin:16px auto 26px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;gap:12px;padding:26px 30px;border-radius:var(--radius);background:var(--bg);border:1px solid var(--accent-line);box-sizing:border-box}
.clients-msg h3{font-size:20px;line-height:1.3;margin:0;color:#ffffff}
.clients-msg p{margin:0;color:rgba(255,255,255,.82);font-size:14px;line-height:1.6}
.clients-msg .btn{align-self:flex-start;margin-top:2px}
/* ── Straight-line auto-scroll logo carousel (aarorn.com/my/en style) ── */
.logo-carousel{position:relative;display:flex;align-items:center;gap:12px;margin-top:6px}
.lc-viewport{flex:1;overflow:hidden}
.lc-track{display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:8px 0}
.lc-track::-webkit-scrollbar{display:none}
/* each logo box: exactly 4 across the viewport (3 × 20px gaps = 60px), grey border at rest */
.client-logo{flex:0 0 calc((100% - 60px) / 4);min-width:0;height:128px;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;background:#fff;border:1.5px solid #e6e9f0;border-radius:14px;position:relative;overflow:hidden;transition:border-color .2s ease}
.client-logo img{max-height:66px;max-width:160px;width:auto;height:auto;object-fit:contain;filter:none;opacity:1;position:relative;z-index:1}
/* hover = blue accent outline only — no inner tint, no outer shadow */
.client-logo:hover{border-color:var(--accent)}
/* left / right navigation arrows */
.lc-arrow{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--accent);background:#fff;color:#0b1020;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}
.lc-arrow:hover{background:var(--accent);color:#fff}
.lc-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* fewer logos per view as the viewport narrows, still no partial cards */
@media(max-width:900px){.client-logo{flex-basis:calc((100% - 40px) / 3)}}
@media(max-width:560px){.clients-msg{margin:14px 0 20px;padding:22px 22px}.clients-msg h3{font-size:18px}.client-logo{flex-basis:calc((100% - 20px) / 2);height:106px;padding:16px}.client-logo img{max-width:112px;max-height:54px}.lc-arrow{width:36px;height:36px;font-size:18px}.logo-carousel{gap:8px}}
/* Trust badges — registrations & certifications */
.trust-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:8px}
.trust-badge{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;min-height:158px;padding:22px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-soft);text-align:center;transition:.2s}
.trust-badge:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.trust-badge .ico{width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;border-radius:50%;background:var(--accent-soft);border:1px solid var(--accent-line)}
.trust-badge .tb-title{font-size:15px;font-weight:800;letter-spacing:.6px;color:var(--ink)}
.trust-badge .tb-sub{font-size:12px;line-height:1.45;color:var(--faint);letter-spacing:.2px}
@media(max-width:960px){.trust-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.trust-grid{grid-template-columns:repeat(2,1fr)}}

/* Registrations logo carousel (about page #partnerships) — reuses the .logo-carousel/.lc-track
   engine from the home client strip. Each item = a uniform white logo card with a small navy
   caption BELOW the box (Huda, 2026-07-28). All cards are identical size; the logo is sized to
   fit the card width. Auto-scrolls every 5s via data-autoscroll. */
.reg-logo{flex:0 0 calc((100% - 60px) / 4);min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.reg-card{width:100%;height:128px;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;background:#fff;border:1.5px solid #e6e9f0;border-radius:14px;overflow:hidden;transition:border-color .2s ease}
.reg-card img{max-height:72px;max-width:100%;width:auto;height:auto;object-fit:contain}
.reg-card--placeholder span{font-size:22px;font-weight:800;letter-spacing:1px;color:#20304F}
.reg-logo:hover .reg-card{border-color:var(--accent)}
.reg-label{font-size:12.5px;line-height:1.4;font-weight:600;letter-spacing:.2px;color:#20304F;text-align:center}
@media(max-width:900px){.reg-logo{flex-basis:calc((100% - 40px) / 3)}}
@media(max-width:560px){.reg-logo{flex-basis:calc((100% - 20px) / 2)}.reg-card{height:106px;padding:16px}.reg-card img{max-height:58px}}

/* ============================================================
   Transparent header + on-dark nav  (2026-07-19, page branding)
   The header was a solid white bar; it is now transparent over
   the dark navy site so the aarorntech wordmark and nav text
   read on the hero. A frosted-dark backing fades in on scroll
   so the nav stays legible over any section. The white desktop
   dropdown popovers and the white mobile menu panel keep their
   dark text (scoped overrides below).
   Revert: delete this block + restore header{background:#fff...}.
   ============================================================ */
header{background:transparent;border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease}
/* Header stays transparent on scroll too — blue-slate backing removed (2026-07-19, Huda) */
header.scrolled{background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid transparent}
/* Top-level bar links -> light. Dropdown links (.dropdown a) stay dark
   because they sit on their own white popovers. */
.navlinks>a{color:var(--ink)}
.navlinks>a:hover{color:#fff}
.navlinks>a.active{color:var(--ink)}
.navlinks .navtrigger{color:var(--ink)}
.navitem:hover .navtrigger,.navitem:focus-within .navtrigger{color:#fff}
.navtrigger .caret{color:var(--muted)}
.menu-toggle{color:var(--ink)}
/* Contact pill keeps its dark ink on the matcha fill */
.navlinks>a[href="contact.html"]{color:#fff}
.navlinks>a[href="contact.html"]:hover{color:#fff}

@media(max-width:1024px){
  /* Mobile menu panel is white -> restore dark nav text there */
  .navlinks>a,.navlinks>a.active,.navlinks .navtrigger{color:#0b1020}
  .navlinks>a:hover,.navitem:hover .navtrigger{color:#000}
  .navlinks>a[href="contact.html"]{color:#fff}
}

/* ============================================================
   IVORY BANNERS site-wide + navy banner text  (2026-07-19, Huda)
   Scope: body.ivory-head = the 52 interior pages whose banner is
   .page-head. Banner -> Ivory #F6F1E6 + navy #20304F text; header
   nav recoloured navy so it reads on the ivory banner, scrolled
   backing switches to frosted-white. Content sections BELOW the
   banner are untouched (still dark). Dark-hero pages (home + the
   two previews) are NOT tagged, so they keep the dark treatment.
   Revert: delete this block + remove the ivory-head body class.
   ============================================================ */
body.ivory-head .page-head{background:#FFFFFF;border-bottom:1px solid rgba(0,0,0,.08)}
body.ivory-head .page-head::before{background:
   radial-gradient(560px 300px at 82% 0%,rgba(46,134,200,.08),transparent 70%),
   radial-gradient(460px 280px at 0% 100%,rgba(46,134,200,.05),transparent 70%)}
body.ivory-head .page-head h1{color:#20304F}
body.ivory-head .page-head p.lead{color:#20304F}
body.ivory-head .page-head .crumbs{color:#5b6b8a}
body.ivory-head .page-head .crumbs a{color:#20304F}

/* Header nav must read on the ivory banner at the top of the page */
body.ivory-head .navlinks>a{color:#20304F}
body.ivory-head .navlinks>a:hover{color:#0b1020}
body.ivory-head .navlinks>a.active{color:#20304F}
body.ivory-head .navlinks .navtrigger{color:#20304F}
body.ivory-head .navitem:hover .navtrigger,body.ivory-head .navitem:focus-within .navtrigger{color:#0b1020}
body.ivory-head .navtrigger .caret{color:#5b6b8a}
body.ivory-head .menu-toggle{color:#20304F}
body.ivory-head .navlinks>a[href="contact.html"]{color:#fff}  /* dark ink on emerald pill */
/* Header stays FULLY transparent on scroll too — no frost/backing appears
   while scrolling down. It looks identical at the top and mid-scroll, just the
   navy nav + navy-"tech" logo over whatever is behind it. (2026-07-19, Huda) */
body.ivory-head header.scrolled{background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid transparent}

/* ------------------------------------------------------------------
   Header scrolls away + IVORY shows behind it   (2026-07-19, Huda)
   Two asks, one fix:
   (1) The transparent header sat in its own 65px band ABOVE the ivory
       banner, so the navy body background (#0b1020) showed through it —
       that navy band is the "blue" seen behind the header. We pull the
       ivory banner up 65px so it fills the band behind the transparent
       header. Matching top-padding keeps the banner content in place.
   (2) The header was position:sticky, so it stayed pinned while
       scrolling. It is now position:relative — it scrolls away with the
       page, so it is not visible when scrolling down.
   Revert: restore header{position:sticky} (line ~47) and delete this
   block; backup at .headerivorybehind_bak_20260719/styles.css
   ------------------------------------------------------------------ */
header{position:relative}
body.ivory-head .hero{margin-top:-65px;padding-top:161px}
body.ivory-head .page-head{margin-top:-65px;padding-top:135px}

/* ============================================================
   Footer — grey sitemap redesign (Huda, 2026-07-20, site-wide)
   Overrides the legacy dark footer above. Cool-grey background,
   visible light-bg logo, always-visible LinkedIn glyph, and a
   nav-mirrored sitemap: Products with Services stacked beneath,
   Solutions with Sovereign AI nested over AI Hub / NusaScribe,
   Gen AI, Use Cases, and Company (with Contact-us) last.
   ============================================================ */
footer{background:#edf1f8;border-top:1px solid #d9e0ec;color:#5a6580}
/* Even footer: brand column slightly wider, then five EQUAL link columns spread
   edge-to-edge across the container. minmax(0,1fr) forces truly equal boxes so the
   column left-edges are evenly spaced (Stripe/Vercel pattern) — no right-cluster void. */
footer .foot-grid{grid-template-columns:1.5fr repeat(5,minmax(0,1fr));gap:30px;align-items:start}
footer .foot-grid a{line-height:1.35}
footer .foot-grid h5.foot-h5-stacked{margin-top:28px}          /* Services under Products */
footer .foot-grid h5{color:#20304F}
footer .foot-grid a{color:#5a6580}
footer .foot-grid a:hover{color:var(--accent)}
footer .foot-brand p{color:#5a6580}
/* LinkedIn: solid accent circle + white glyph at rest, navy on hover — .foot-social sits
   inside .foot-grid so it is scoped through .foot-grid and the svg is pinned white so the
   glyph can never inherit the grey/accent link colour. */
footer .foot-grid a.foot-social{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin-top:18px;padding:0;border-radius:50%;background:var(--accent);border:1px solid var(--accent);color:#fff;transition:transform .15s,background .15s,border-color .15s}
footer .foot-grid a.foot-social:hover{background:#20304F;border-color:#20304F;color:#fff;transform:translateY(-2px)}
footer .foot-grid a.foot-social svg{fill:#fff;color:#fff}
footer .foot-address{display:block;margin-top:20px;font-style:normal;color:#7a8598;font-size:12.5px;line-height:1.7}
footer .foot-mail{display:block;padding:3px 0;color:#5a6580;font-size:13px}
footer .foot-mail:hover{color:var(--accent)}
footer .foot-grid a.btn-solid,footer .foot-grid a.btn-solid:hover{color:#fff}
footer .foot-grid a.foot-parent{color:#20304F;font-weight:600}  /* Sovereign AI parent */
footer .foot-subs{padding-left:12px;border-left:2px solid #cbd5e8;margin:1px 0 3px 4px}
footer .foot-subs a{display:block;font-size:13px}
footer .foot-bottom{border-top:1px solid #d9e0ec;color:#7a8598}
@media(max-width:900px){footer .foot-grid{grid-template-columns:1fr 1fr 1fr;gap:26px}footer .foot-brand{grid-column:1 / -1}}
@media(max-width:560px){footer .foot-grid{grid-template-columns:1fr 1fr}footer .foot-brand{grid-column:1 / -1}}