/* ============================================================
   OneStop — "Command" theme  (dark / industrial)
   Design system ported from drafts/draft-a.html.
   Component rules are scoped under .cmd so they never clobber
   the Bootstrap admin / tracking / shipping-form pages.
   ============================================================ */

:root{
  --red:#be3837; --red-bright:#e0514f;
  --gold:#d79934; --gold-soft:#e8b765;
  --ink:#1d1e1e; --ink-2:#161717; --ink-3:#242525;
  --silver:#cad1cf; --silver-dim:#8c9492;
  --white:#f5f7f6;
  --head:'Audiowide', sans-serif;
  --body:'Montserrat', sans-serif;
}

/* dark page shell — only applied on pages that opt in via body.cmd-dark */
body.cmd-dark{background:var(--ink);color:var(--silver);font-family:var(--body);line-height:1.65;overflow-x:hidden}
body.cmd-dark h1,body.cmd-dark h2,body.cmd-dark h3,body.cmd-dark h4{font-family:var(--head);font-weight:400;color:var(--white);letter-spacing:.5px;line-height:1.15}
body.cmd-dark a{text-decoration:none}

/* ---------- shared primitives (scoped) ---------- */
.cmd *{box-sizing:border-box}
.cmd{font-family:var(--body)}
.cmd .wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.cmd .eyebrow{font-family:var(--head);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--red-bright);display:inline-block;margin-bottom:18px}
.cmd .eyebrow.gold{color:var(--gold-soft)}
.cmd section{position:relative}
.cmd h1,.cmd h2,.cmd h3,.cmd h4,.cmd .head{font-family:var(--head);font-weight:400;color:var(--white);letter-spacing:.5px;line-height:1.15}
.cmd a{text-decoration:none;color:inherit}

.cmd .btn{font-family:var(--head);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;padding:13px 26px;border-radius:4px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:none;transition:.25s;white-space:nowrap;line-height:1}
.cmd .btn-red{background:var(--red);color:#fff;box-shadow:0 8px 24px -8px rgba(190,56,55,.7)}
.cmd .btn-red:hover{background:var(--red-bright);transform:translateY(-2px);color:#fff}
.cmd .btn-ghost{background:transparent;color:var(--white);border:1.5px solid rgba(202,209,207,.25)}
.cmd .btn-ghost:hover{border-color:var(--red);color:var(--red-bright)}
.cmd .btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 10px 26px -10px rgba(215,153,52,.7)}
.cmd .btn-gold:hover{background:var(--gold-soft);transform:translateY(-2px);color:var(--ink)}
.cmd .btn svg{width:16px;height:16px}

/* ---------- pixel-arrow logo / brand ---------- */
.cmd .logo{display:flex;align-items:center;gap:12px}
.cmd .logo svg{width:46px;height:36px;flex:none}
.cmd .logo .word{font-family:var(--head);font-size:20px;color:var(--white);line-height:1}
.cmd .logo .word b{color:var(--red-bright)}
.cmd .logo .tag{font-family:var(--body);font-size:8px;letter-spacing:3px;color:var(--silver-dim);text-transform:uppercase;margin-top:3px}
.cmd .logo img{height:54px;width:auto;display:block}

/* ============================================================
   HEADER  (sticky, dark)
   ============================================================ */
.cmd-topbar{background:var(--ink-2);border-bottom:1px solid rgba(202,209,207,.07);font-family:var(--body)}
.cmd-topbar .wrap{max-width:1240px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;height:38px;font-size:12.5px;color:var(--silver-dim)}
.cmd-topbar a{color:var(--silver-dim);text-decoration:none;transition:.2s}
.cmd-topbar a:hover{color:var(--red-bright)}
.cmd-topbar .social{display:flex;align-items:center;gap:16px}
.cmd-topbar .social span{letter-spacing:1px;text-transform:uppercase;font-size:11px;color:var(--silver-dim)}
.cmd-topbar .social a svg{width:15px;height:15px;vertical-align:middle}
.cmd-topbar .reach{display:flex;align-items:center;gap:22px}
.cmd-topbar .reach a{display:inline-flex;align-items:center;gap:7px}
.cmd-topbar .reach svg{width:14px;height:14px;color:var(--gold-soft)}

.cmd-header{position:sticky;top:0;z-index:50;background:rgba(22,23,23,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(202,209,207,.08);transition:.3s}
.cmd-header.scrolled{background:rgba(22,23,23,.98)}
.cmd-header .nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.cmd-header .nav ul{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.cmd-header .nav ul a{font-size:13.5px;font-weight:500;color:var(--silver);letter-spacing:.4px;position:relative;padding:6px 0;transition:.2s}
.cmd-header .nav ul a:hover{color:var(--white)}
.cmd-header .nav ul a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--red);transition:.25s}
.cmd-header .nav ul a:hover::after{width:100%}
.cmd-header .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px}
.cmd-header .burger span{width:26px;height:2px;background:var(--white);display:block}
.cmd-header .mobile-actions{display:flex;align-items:center;gap:14px}

/* ============================================================
   HERO
   ============================================================ */
.cmd .hero{min-height:88vh;display:flex;align-items:center;padding:80px 0 80px;background:
  radial-gradient(1200px 600px at 85% 20%, rgba(190,56,55,.18), transparent 60%),
  radial-gradient(900px 500px at 10% 90%, rgba(215,153,52,.10), transparent 55%),
  linear-gradient(160deg,#161717 0%,#1d1e1e 55%,#0f0f0f 100%);
  overflow:hidden}
.cmd .hero .grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(202,209,207,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(202,209,207,.035) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(circle at 70% 50%,#000,transparent 80%);-webkit-mask-image:radial-gradient(circle at 70% 50%,#000,transparent 80%)}
.cmd .hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;position:relative;z-index:2}
.cmd .hero h1{font-size:clamp(34px,5vw,64px);line-height:1.06;margin-bottom:8px}
.cmd .hero h1 .line2{color:var(--red-bright)}
.cmd .hero .motto{font-family:var(--head);font-size:13px;letter-spacing:4px;color:var(--gold-soft);text-transform:uppercase;margin:22px 0 14px}
.cmd .hero p.sub{font-size:17px;max-width:500px;color:var(--silver);margin-bottom:34px}
.cmd .track-box{background:rgba(36,37,37,.85);border:1px solid rgba(202,209,207,.12);border-radius:10px;padding:10px;display:flex;gap:8px;max-width:520px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.cmd .track-box input{flex:1;background:transparent;border:none;outline:none;color:var(--white);font-family:var(--body);font-size:15px;padding:0 14px;min-width:0}
.cmd .track-box input::placeholder{color:var(--silver-dim)}
.cmd .hero .stats{display:flex;gap:38px;margin-top:42px;flex-wrap:wrap}
.cmd .hero .stats .n{font-family:var(--head);font-size:30px;color:var(--white)}
.cmd .hero .stats .n i{color:var(--gold-soft);font-style:normal}
.cmd .hero .stats small{font-size:12px;color:var(--silver-dim);letter-spacing:1px;text-transform:uppercase}
.cmd .hero-art{position:relative;display:flex;justify-content:center;align-items:center}
.cmd .hero-art svg{width:100%;max-width:440px;filter:drop-shadow(0 20px 50px rgba(190,56,55,.35))}

/* ---------- trust bar ---------- */
.cmd .trust{border-top:1px solid rgba(202,209,207,.08);border-bottom:1px solid rgba(202,209,207,.08);background:var(--ink-2);padding:24px 0}
.cmd .trust .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;align-items:center}
.cmd .trust .item{font-family:var(--head);font-size:13px;letter-spacing:1px;color:var(--silver-dim);display:flex;align-items:center;gap:10px}
.cmd .trust .item b{color:var(--gold-soft)}
.cmd .trust .dot{width:7px;height:7px;background:var(--red);transform:rotate(45deg);flex:none}

/* ---------- section heading ---------- */
.cmd .sec-head{text-align:center;max-width:720px;margin:0 auto 56px}
.cmd .sec-head h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:18px}
.cmd .sec-head p{color:var(--silver-dim);font-size:15.5px}

/* ============================================================
   ABOUT
   ============================================================ */
.cmd .about{padding:110px 0;background:var(--ink)}
.cmd .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.cmd .about h2{font-size:clamp(28px,3.6vw,44px);margin-bottom:22px;line-height:1.12}
.cmd .about h2 span{color:var(--red-bright)}
.cmd .about p.lead{color:var(--silver);font-size:15.5px;margin-bottom:18px}
.cmd .values{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.cmd .value{display:flex;align-items:flex-start;gap:12px;background:var(--ink-3);border:1px solid rgba(202,209,207,.07);border-left:3px solid var(--red);padding:16px;border-radius:6px}
.cmd .value .tick{width:24px;height:24px;background:rgba(190,56,55,.16);color:var(--red-bright);border-radius:50%;display:grid;place-items:center;font-size:12px;flex:none;margin-top:2px}
.cmd .value .tick svg{width:13px;height:13px}
.cmd .value h4{font-family:var(--body);font-weight:700;font-size:14.5px;color:var(--white);letter-spacing:0;margin:0 0 4px}
.cmd .value p{font-size:12.8px;color:var(--silver-dim);margin:0;line-height:1.55}
.cmd .vm{display:grid;gap:18px}
.cmd .vm-card{background:linear-gradient(150deg,var(--ink-3),var(--ink-2));border:1px solid rgba(202,209,207,.08);border-radius:12px;padding:30px;position:relative;overflow:hidden}
.cmd .vm-card::before{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;background:radial-gradient(circle,rgba(215,153,52,.16),transparent 70%)}
.cmd .vm-card.red::before{background:radial-gradient(circle,rgba(190,56,55,.2),transparent 70%)}
.cmd .vm-card .ic{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px;background:rgba(215,153,52,.14);color:var(--gold-soft)}
.cmd .vm-card.red .ic{background:rgba(190,56,55,.16);color:var(--red-bright)}
.cmd .vm-card .ic svg{width:26px;height:26px}
.cmd .vm-card h3{font-size:18px;margin-bottom:10px}
.cmd .vm-card p{font-size:14px;color:var(--silver-dim)}

/* ============================================================
   SERVICES  (rich feature cards w/ included lists)
   ============================================================ */
.cmd .services{padding:110px 0;background:var(--ink-2);border-top:1px solid rgba(202,209,207,.06)}
.cmd .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.cmd .svc{background:var(--ink-3);border:1px solid rgba(202,209,207,.08);border-radius:14px;padding:34px 32px;position:relative;overflow:hidden;transition:.3s;display:flex;flex-direction:column}
.cmd .svc::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--red),var(--gold));transition:.35s}
.cmd .svc:hover{transform:translateY(-6px);border-color:rgba(190,56,55,.4);background:#2a2b2b}
.cmd .svc:hover::after{width:100%}
.cmd .svc-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.cmd .svc .ic{flex:none;display:inline-grid;place-items:center;width:62px;height:62px;border-radius:12px;background:rgba(190,56,55,.12);border:1px solid rgba(190,56,55,.25);color:var(--red-bright)}
.cmd .svc .ic svg{width:30px;height:30px}
.cmd .svc h3{font-family:var(--body);font-weight:700;font-size:20px;color:var(--white);margin:0;letter-spacing:0}
.cmd .svc .tagline{font-size:14px;color:var(--gold-soft);font-weight:500;margin-bottom:10px}
.cmd .svc p.desc{font-size:13.8px;color:var(--silver-dim);line-height:1.7;margin-bottom:18px}
.cmd .svc .inc-label{font-family:var(--head);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--silver-dim);margin-bottom:12px}
.cmd .svc ul.inc{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px}
.cmd .svc ul.inc li{display:flex;align-items:flex-start;gap:10px;font-size:13.4px;color:var(--silver);line-height:1.5}
.cmd .svc ul.inc li svg{width:16px;height:16px;flex:none;color:var(--red-bright);margin-top:2px}
.cmd .svc .perfect{margin-top:auto;padding-top:16px;border-top:1px solid rgba(202,209,207,.08);font-size:12.8px;color:var(--silver-dim)}
.cmd .svc .perfect b{color:var(--white);font-weight:600}
.cmd .svc-cta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(150deg,#2a2b2b,#1d1e1e);border:1px dashed rgba(215,153,52,.4);border-radius:14px;padding:30px 34px}
.cmd .svc-cta h3{font-size:20px;margin:0 0 4px;color:var(--white)}
.cmd .svc-cta p{font-size:13.6px;color:var(--silver-dim);margin:0}

/* ---------- emirate locations strip ---------- */
.cmd .locations{padding:0 0 110px;background:var(--ink-2)}
.cmd .loc-card{background:var(--ink);border:1px solid rgba(202,209,207,.08);border-radius:14px;padding:40px 34px;text-align:center}
.cmd .loc-card h3{font-size:22px;margin-bottom:10px}
.cmd .loc-card p{color:var(--silver-dim);font-size:14px;max-width:520px;margin:0 auto 26px}
.cmd .loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:760px;margin:0 auto 26px}
.cmd .loc{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--ink-3);border:1px solid rgba(202,209,207,.07);border-bottom:3px solid var(--gold);border-radius:8px;padding:18px;font-family:var(--head);font-size:15px;color:var(--white)}
.cmd .loc svg{width:18px;height:18px;color:var(--red-bright)}

/* ============================================================
   WHY CHOOSE
   ============================================================ */
.cmd .why{padding:110px 0;background:
  radial-gradient(800px 400px at 50% 0%,rgba(190,56,55,.12),transparent 60%),var(--ink)}
.cmd .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cmd .why-card{text-align:center;padding:38px 24px;border-radius:14px;background:rgba(36,37,37,.5);border:1px solid rgba(202,209,207,.07);transition:.3s}
.cmd .why-card:hover{border-color:var(--gold);background:rgba(36,37,37,.9);transform:translateY(-5px)}
.cmd .why-card .num{font-family:var(--head);font-size:13px;color:var(--gold-soft);letter-spacing:2px}
.cmd .why-card .glyph{width:64px;height:64px;margin:16px auto 20px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,var(--red),#7e2625);color:#fff;box-shadow:0 10px 26px -8px rgba(190,56,55,.6)}
.cmd .why-card .glyph svg{width:28px;height:28px}
.cmd .why-card h3{font-family:var(--body);font-weight:700;font-size:16px;color:var(--white);margin-bottom:10px;letter-spacing:0;line-height:1.3}
.cmd .why-card p{font-size:13.4px;color:var(--silver-dim)}

/* ============================================================
   CTA band
   ============================================================ */
.cmd .cta{padding:90px 0;background:linear-gradient(120deg,#7e2625 0%,var(--red) 45%,#a8302f 100%);position:relative;overflow:hidden}
.cmd .cta .pix{position:absolute;inset:0;opacity:.25}
.cmd .cta-inner{position:relative;z-index:2;text-align:center}
.cmd .cta .eyebrow{color:var(--gold-soft)}
.cmd .cta h2{font-size:clamp(26px,3.4vw,40px);color:#fff;margin-bottom:16px}
.cmd .cta p{color:rgba(255,255,255,.9);max-width:560px;margin:0 auto 30px;font-size:15.5px}

/* ============================================================
   FOOTER
   ============================================================ */
.cmd-footer{background:var(--ink-2);padding:72px 0 30px;border-top:1px solid rgba(202,209,207,.08);font-family:var(--body)}
.cmd-footer .wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.cmd-footer .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px;margin-bottom:48px}
.cmd-footer .foot p{font-size:13.5px;color:var(--silver-dim);margin-top:18px;max-width:300px;line-height:1.7}
.cmd-footer .foot h5{font-family:var(--head);font-size:13px;letter-spacing:1.5px;color:var(--white);text-transform:uppercase;margin-bottom:20px}
.cmd-footer .foot ul{list-style:none;margin:0;padding:0}
.cmd-footer .foot ul li{margin-bottom:11px}
.cmd-footer .foot ul a{font-size:13.5px;color:var(--silver-dim);transition:.2s}
.cmd-footer .foot ul a:hover{color:var(--red-bright)}
.cmd-footer .foot .contact li{display:flex;gap:10px;font-size:13.5px;color:var(--silver-dim);align-items:flex-start}
.cmd-footer .foot .contact i{color:var(--gold-soft);margin-top:3px;flex:none}
.cmd-footer .foot .contact i svg{width:15px;height:15px}
.cmd-footer .foot .contact a{color:var(--silver-dim);transition:.2s}
.cmd-footer .foot .contact a:hover{color:var(--red-bright)}
.cmd-footer .foot-social{display:flex;gap:12px;margin-top:22px}
.cmd-footer .foot-social a{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:var(--ink-3);border:1px solid rgba(202,209,207,.08);color:var(--silver-dim);transition:.25s}
.cmd-footer .foot-social a:hover{background:var(--red);color:#fff;border-color:var(--red)}
.cmd-footer .foot-social a svg{width:17px;height:17px}
.cmd-footer .foot-bottom{border-top:1px solid rgba(202,209,207,.08);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--silver-dim)}
.cmd-footer .foot-bottom .motto{font-family:var(--head);color:var(--gold-soft);letter-spacing:1px}

/* ============================================================
   Floating WhatsApp
   ============================================================ */
.cmd-wa{position:fixed;right:22px;bottom:22px;z-index:90;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#25d366;box-shadow:0 12px 30px -6px rgba(37,211,102,.6);transition:.25s;color:#fff}
.cmd-wa:hover{transform:translateY(-3px) scale(1.05);color:#fff}
.cmd-wa svg{width:30px;height:30px}
.cmd-wa::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:cmd-wa-pulse 2.2s ease-out infinite}
@keyframes cmd-wa-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}

/* ============================================================
   Dark breadcrumb (shown on inner pages only)
   ============================================================ */
.cmd-crumb{background:var(--ink-2);border-bottom:1px solid rgba(202,209,207,.07)}
.cmd-crumb .breadcrumb{max-width:1240px;margin:0 auto;padding:14px 28px;font-family:var(--body);font-size:13px;background:none}
.cmd-crumb .breadcrumb-item,.cmd-crumb .breadcrumb-item a{color:var(--silver-dim);text-decoration:none}
.cmd-crumb .breadcrumb-item a:hover{color:var(--red-bright)}
.cmd-crumb .breadcrumb-item.active{color:var(--white)}
.cmd-crumb .breadcrumb-item+.breadcrumb-item::before{color:var(--silver-dim)}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:980px){
  .cmd .hero-inner,.cmd .about-grid{grid-template-columns:1fr}
  .cmd .hero-art{display:none}
  .cmd .svc-grid{grid-template-columns:1fr}
  .cmd .why-grid{grid-template-columns:repeat(2,1fr)}
  .cmd-footer .foot-grid{grid-template-columns:1fr 1fr}
  .cmd-header .nav ul,.cmd-header .mobile-actions .btn{display:none}
  .cmd-header .burger{display:flex}
  .cmd-topbar .social span{display:none}
}
@media(max-width:560px){
  .cmd .why-grid,.cmd-footer .foot-grid,.cmd .values,.cmd .loc-grid{grid-template-columns:1fr}
  .cmd .hero{min-height:auto;padding:48px 0 60px}
  .cmd .hero h1{font-size:clamp(27px,7.6vw,40px)}
  .cmd .hero p.sub{font-size:15.5px}
  .cmd .hero .stats{gap:22px;row-gap:18px}
  .cmd .track-box{flex-wrap:wrap}
  .cmd .track-box .btn{width:100%;justify-content:center}
  .cmd-topbar .reach a:not(.phone){display:none}
  .cmd-topbar .wrap{justify-content:space-between}
  .cmd .svc{padding:28px 22px}
  .cmd .svc-cta{flex-direction:column;align-items:flex-start}
  .cmd .wrap{padding:0 20px}
}

/* mobile drawer */
.cmd-drawer{position:fixed;inset:0;z-index:80;background:rgba(15,15,15,.97);backdrop-filter:blur(8px);display:none;flex-direction:column;padding:28px}
.cmd-drawer.open{display:flex}
.cmd-drawer .close{align-self:flex-end;background:none;border:none;color:var(--white);font-size:30px;cursor:pointer;line-height:1}
.cmd-drawer ul{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:6px}
.cmd-drawer ul a{display:block;font-family:var(--head);font-size:18px;color:var(--silver);padding:14px 6px;border-bottom:1px solid rgba(202,209,207,.08)}
.cmd-drawer ul a:hover{color:var(--red-bright)}
.cmd-drawer .btn{margin-top:26px;justify-content:center}

/* override leftover light-theme section background images (old style.css uses
   section#id, which outranks .cmd .about/.services — scope under .cmd to win) */
.cmd section#about-us{background:var(--ink)}
.cmd section#services{background:var(--ink-2)}

/* ---- ambient motion ---- */
@keyframes cmd-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.cmd .hero-art svg{animation:cmd-float 6s ease-in-out infinite}
@keyframes cmd-grid-drift{0%{background-position:0 0,0 0}100%{background-position:54px 54px,54px 54px}}
.cmd .hero .grid-lines{animation:cmd-grid-drift 22s linear infinite}
/* count-up numbers hold a stable width while animating */
.cmd .hero .stats .n i{display:inline-block;min-width:2.2ch}

/* ---- scroll progress bar ---- */
.cmd-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;background:linear-gradient(90deg,var(--red),var(--gold));box-shadow:0 0 10px rgba(190,56,55,.6);transition:width .1s linear}

/* ---- navbar shrink on scroll ---- */
.cmd-header.scrolled{background:rgba(18,19,19,.97);box-shadow:0 8px 30px -12px rgba(0,0,0,.7)}
.cmd-header .nav{transition:height .3s ease}
.cmd-header.scrolled .nav{height:60px}

/* ---- button shine sweep ---- */
.cmd .btn{position:relative;overflow:hidden}
.cmd .btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s ease}
.cmd .btn:hover::after{left:140%}

/* ---- animated gradient accent text ---- */
@keyframes cmd-shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.cmd .hero h1 .line2,.cmd .about h2 span,.cmd .why h2 span{
  background:linear-gradient(90deg,var(--red-bright),var(--gold),var(--red-bright));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;animation:cmd-shimmer 6s linear infinite}

/* ---- card icon micro-motion on hover ---- */
.cmd .svc .ic,.cmd .vm-card .ic,.cmd .why-card .glyph{transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s,box-shadow .3s}
.cmd .svc:hover .ic{transform:translateY(-3px) rotate(-6deg) scale(1.08);box-shadow:0 10px 22px -8px rgba(190,56,55,.6)}
.cmd .vm-card:hover .ic{transform:rotate(8deg) scale(1.1)}
.cmd .why-card:hover .glyph{transform:rotate(-8deg) scale(1.08)}

/* ---- vm + value card hover lift (were static) ---- */
.cmd .vm-card{transition:transform .35s,border-color .35s,box-shadow .35s}
.cmd .vm-card:hover{transform:translateY(-6px);border-color:rgba(215,153,52,.35);box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.cmd .value{transition:transform .3s,border-color .3s,background .3s}
.cmd .value:hover{transform:translateY(-4px);border-left-color:var(--gold);background:#2a2b2b}

/* ---- trust dot pulse ---- */
@keyframes cmd-dot{0%,100%{box-shadow:0 0 0 0 rgba(190,56,55,.5)}50%{box-shadow:0 0 0 6px rgba(190,56,55,0)}}
.cmd .trust .dot{animation:cmd-dot 2.6s ease-out infinite}

@media (prefers-reduced-motion:reduce){
  .cmd .hero-art svg,.cmd .hero .grid-lines,.cmd-wa::after,.cmd .trust .dot,
  .cmd .hero h1 .line2,.cmd .about h2 span,.cmd .why h2 span{animation:none}
  .cmd .hero h1 .line2,.cmd .about h2 span,.cmd .why h2 span{
    -webkit-text-fill-color:var(--red-bright);color:var(--red-bright)}
  .cmd .btn::after{display:none}
  [data-aos]{opacity:1!important;transform:none!important;transition:none!important}
}