/* ==========================================================================
   EGT DESIGN SYSTEM 2026 — premium layer + responsive foundation (homepage)
   Loads LAST. Overrides legacy styles. Plain CSS, no build step.
   Palette: Signal Red #C8102E · Deep Harbor #0D2233 · Paper #FFFFFF
            Manifest #F2F5F7 · Steel #5A6B7B · Gold Route #C8A24B
   ========================================================================== */

/* ---------- 1. Typefaces (self-hosted, no CDN) ---------- */
@font-face{
    font-family:'Archivo';
    font-style:normal;
    font-weight:600 800;
    font-display:swap;
    src:url('../fonts/archivo/archivo-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
    font-family:'DM Sans';
    font-style:normal;
    font-weight:100 1000;
    font-display:swap;
    src:url('../fonts/dm-sans/dm-sans-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
    font-family:'DM Sans';
    font-style:normal;
    font-weight:100 1000;
    font-display:swap;
    src:url('../fonts/dm-sans/dm-sans-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C9-02D7,U+02DE-02DF,U+0305,U+0309,U+0310,U+0312,U+0330,U+1E00-1E9F;
}

/* ---------- 2. Tokens ---------- */
:root{
    --ds-red:#C8102E;
    --ds-red-deep:#9E0C24;
    --ds-harbor:#0D2233;
    --ds-harbor-2:#081A29;
    --ds-paper:#FFFFFF;
    --ds-manifest:#F2F5F7;
    --ds-steel:#5A6B7B;
    --ds-ink:#101820;
    --ds-gold:#C8A24B;
    --ds-gold-soft:rgba(200,162,75,.38);
    --ds-hairline:1px solid rgba(13,34,51,.12);
    --ds-hairline-light:1px solid rgba(255,255,255,.14);
    --ds-font-display:'Archivo','DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
    --ds-font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
    --ds-h1:clamp(2.15rem,1.25rem + 4.4vw,3.7rem);
    --ds-h2:clamp(1.55rem,1.15rem + 2vw,2.35rem);
    --ds-h3:clamp(1.18rem,1.05rem + .8vw,1.45rem);
    --ds-lead:clamp(1.02rem,.96rem + .35vw,1.18rem);
    --ds-radius:10px;
    --ds-ease:cubic-bezier(.16,.7,.2,1);
}

/* ---------- 3. Base ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
    font-family:var(--ds-font-body);
    font-size:16px;
    line-height:1.6;
    color:var(--ds-ink);
    background:var(--ds-paper);
}
img, picture, video, svg{ max-width:100%; }
img{ height:auto; }
/* Fluid display type */
.egt-ds-hero-title,
.egt-products-wrap h2,
.egt-slideshow-title{
    font-family:var(--ds-font-display);
    letter-spacing:-.015em;
    text-wrap:balance;
}
/* Minimum 44px tap targets on coarse pointers */
@media (pointer:coarse){
    button, a, input[type="submit"], input[type="button"]{ min-height:44px; }
}

/* ---------- 4. Section label — red tick, sentence case (no tracked-out eyebrow) ---------- */
.egt-ds-kicker{
    display:flex; align-items:center; gap:10px;
    margin:0 0 14px;
    font-family:var(--ds-font-body);
    font-weight:600; font-size:.82rem; line-height:1.4;
    letter-spacing:.01em;
    color:var(--ds-steel);
}
.egt-ds-kicker .egt-ds-kicker-tick{
    flex:0 0 auto; width:26px; height:3px; border-radius:2px;
    background:var(--ds-red);
}
.egt-ds-kicker.on-dark{ color:rgba(255,255,255,.78); }
/* Tone down legacy kickers to the same language */
.egt-slideshow-kicker{
    letter-spacing:.01em !important;
    text-transform:none !important;
}

/* ---------- 5. Buttons — solid red seal, ghost on dark, real press feedback ---------- */
.egt-ds-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    min-height:48px; padding:13px 26px;
    font-family:var(--ds-font-body); font-weight:600; font-size:.98rem; line-height:1.2;
    text-decoration:none; cursor:pointer;
    border-radius:8px; border:1px solid transparent;
    transition:transform .16s var(--ds-ease), box-shadow .16s var(--ds-ease), background .16s var(--ds-ease);
}
.egt-ds-btn-primary{ background:var(--ds-red); color:#fff; box-shadow:0 6px 18px rgba(200,16,46,.28); }
.egt-ds-btn-primary:hover{ background:var(--ds-red-deep); color:#fff; transform:translateY(-1px); box-shadow:0 10px 24px rgba(200,16,46,.34); }
.egt-ds-btn-primary:active{ transform:translateY(0) scale(.98); box-shadow:0 3px 10px rgba(200,16,46,.25); }
.egt-ds-btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.35); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.egt-ds-btn-ghost:hover{ background:rgba(255,255,255,.16); color:#fff; transform:translateY(-1px); }
.egt-ds-btn-ghost:active{ transform:scale(.98); }
/* Bring legacy slide buttons into the same language */
.egt-slide-btn-primary{
    background:var(--ds-red) !important;
    border-radius:8px !important;
    min-height:44px;
}
.egt-slide-btn-glass{
    border-radius:8px !important;
    min-height:44px;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}

/* ---------- 6. Header — dark glass nav, pinned ---------- */
/* Legacy uses #egtMainHeader.egt-main-header with !important: match selector, win by order.
   NOTE: position:sticky cannot be used here — html/body carry overflow-x:hidden, which
   breaks sticky in Chrome (header scrolled away). Fixed + body offset is bulletproof. */
#egtMainHeader.egt-main-header{
    position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important;
    z-index:900 !important;
    background:rgba(8,22,34,.78) !important;
    backdrop-filter:blur(16px) saturate(1.4) !important;
    -webkit-backdrop-filter:blur(16px) saturate(1.4) !important;
    border-bottom:1px solid rgba(255,255,255,.09) !important;
}
/* Keep page flow honest now the header is out of flow; var tracks 84/72/66px breakpoints */
body{
    padding-top:var(--egt-header-height,84px) !important;
}
.egt-main-links a{
    min-height:44px;
    display:inline-flex; align-items:center;
    border-radius:8px;
}
.egt-main-links a.active{ color:var(--ds-red); }

/* ---------- 7. HERO — full-bleed crossfading slideshow (the one orchestrated moment) ---------- */
.egt-home-hero.egt-ds-hero{
    position:relative;
    width:100vw; max-width:100vw;
    margin:0 0 0 calc(50% - 50vw);
    padding:0;
    border-radius:0;
    overflow:hidden;
    box-shadow:none;
    min-height:clamp(560px,86vh,800px);
    display:flex; align-items:center;
    background:var(--ds-harbor-2);
}
.egt-home-hero.egt-ds-hero::after{
    height:3px;
    background:var(--ds-red);
}
.egt-ds-hero-slides{ position:absolute; inset:0; }
.egt-ds-hero-slide{
    position:absolute; inset:0;
    opacity:0;
    transition:opacity 1.8s ease;
    will-change:opacity;
}
.egt-ds-hero-slide.is-active{ opacity:1; z-index:1; }
.egt-ds-hero .egt-ds-hero-slide img{
    width:100% !important; height:100% !important;
    max-width:none !important;
    margin:0 !important; padding:0 !important;
    object-fit:cover !important; object-position:center !important;
    border-radius:0 !important;
    user-select:none;
}
.egt-ds-hero-slide.is-active img{ animation:ds-kenburns 9s ease-out forwards; }
@keyframes ds-kenburns{ from{ transform:scale(1.03); } to{ transform:scale(1.11); } }
.egt-ds-hero-scrim{
    position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(100deg,
        rgba(8,22,34,.86) 0%,
        rgba(8,22,34,.62) 40%,
        rgba(8,22,34,.22) 72%,
        rgba(8,22,34,.42) 100%);
}
.egt-ds-hero-content{
    position:relative; z-index:3;
    width:100%; max-width:1200px;
    margin:0 auto; padding:48px 28px;
    color:#fff;
}
.egt-ds-hero-title{
    margin:0 0 18px;
    font-family:var(--ds-font-display);
    font-weight:800;
    font-size:var(--ds-h1);
    line-height:1.06;
    letter-spacing:-.02em;
    color:#fff;
    max-width:13em;
}
.egt-ds-hero-sub{
    margin:0 0 30px;
    font-size:var(--ds-lead);
    line-height:1.65;
    color:rgba(255,255,255,.86);
    max-width:34em;
}
.egt-ds-hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }
/* Orchestrated load: staggered rise, applied only when JS signals readiness */
body.ds-ready .egt-ds-hero-content > *{ animation:ds-rise .9s var(--ds-ease) backwards; }
body.ds-ready .egt-ds-hero-content > *:nth-child(1){ animation-delay:.05s; }
body.ds-ready .egt-ds-hero-content > *:nth-child(2){ animation-delay:.16s; }
body.ds-ready .egt-ds-hero-content > *:nth-child(3){ animation-delay:.28s; }
body.ds-ready .egt-ds-hero-content > *:nth-child(4){ animation-delay:.4s; }
@keyframes ds-rise{
    from{ opacity:0; transform:translateY(28px); }
    to{ opacity:1; transform:none; }
}
/* Pause control — visible, 48px */
.egt-ds-hero-pause{
    position:absolute; right:22px; bottom:22px; z-index:4;
    width:48px; height:48px; min-height:48px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(8,22,34,.45); color:#fff;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    cursor:pointer;
    transition:background .2s var(--ds-ease), transform .2s var(--ds-ease);
}
.egt-ds-hero-pause:hover{ background:rgba(8,22,34,.7); transform:scale(1.05); }
.egt-ds-hero-pause:active{ transform:scale(.96); }

/* ---------- 8. Trust bar — deep harbor band ---------- */
.egt-trust-bar{
    background:linear-gradient(180deg, var(--ds-harbor) 0%, var(--ds-harbor-2) 100%) !important;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:3px solid var(--ds-red);
    color:#fff;
}
.egt-trust-bar__item{ border-color:rgba(255,255,255,.14) !important; }
.egt-trust-bar__icon{ color:var(--ds-gold) !important; }
.egt-trust-bar strong, .egt-trust-bar .egt-trust-bar__value{ color:#fff !important; }
.egt-trust-bar span, .egt-trust-bar .egt-trust-bar__label{ color:rgba(255,255,255,.72) !important; }

/* ---------- 9. Credential strip — gold seals on paper ---------- */
.egt-cred-strip{
    background:#fff !important;
    border:var(--ds-hairline) !important;
    border-left:3px solid var(--ds-gold) !important;
    border-radius:var(--ds-radius);
    box-shadow:none !important;
}
.egt-cred-strip__list i{ color:var(--ds-gold) !important; }
.egt-cred-strip__label{ color:var(--ds-ink) !important; letter-spacing:.01em !important; text-transform:none !important; }

/* ---------- 10. Section rhythm — each block reads as a distinct document section ---------- */
.egt-b2b-brief, .egt-inline-tools, .ab, .egt-supplier-showcase,
.egt-products-wrap, .svx-sec, .cs, .eq-section, .ct{
    scroll-margin-top:96px;
}
/* Heavy below-fold sections: skip rendering off-screen */
.egt-products-wrap, .svx-sec, .egt-supplier-showcase{
    content-visibility:auto;
    contain-intrinsic-size:auto 1400px;
}

/* ---------- 11. Product cards — ledger-flat, hairline borders (no SaaS marshmallows) ---------- */
.npc-card{
    border:var(--ds-hairline) !important;
    border-radius:var(--ds-radius) !important;
    box-shadow:none !important;
    background:#fff;
    transition:transform .2s var(--ds-ease), box-shadow .2s var(--ds-ease), border-color .2s var(--ds-ease);
}
.npc-card:hover{
    transform:translateY(-3px);
    border-color:rgba(200,16,46,.4) !important;
    box-shadow:0 14px 32px rgba(13,34,51,.10) !important;
}
.npc-card .egt-product-cat{
    letter-spacing:.01em !important;
    text-transform:none !important;
}

/* ---------- 12. Sector catalogue buttons — 44px minimum ---------- */
.gsc-btn{
    min-height:44px !important;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:8px !important;
}

/* ---------- 13. Export slideshow — 48px arrows, dots clear of CTAs ---------- */
.egt-slider-arrow{
    width:48px !important; height:48px !important;
    min-width:48px; min-height:48px;
    border-radius:50% !important;
    background:rgba(8,22,34,.55) !important;
    border:1px solid rgba(255,255,255,.3) !important;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.egt-slider-arrow:hover{ background:var(--ds-red) !important; border-color:var(--ds-red) !important; }
.egt-slider-dots{
    left:24px !important; right:auto !important;
    bottom:18px !important;
    justify-content:flex-start !important;
}

/* ---------- 14. Supplier modal — single column on phones (diagnosed fault) ---------- */
@media (max-width:640px){
    .egt-supplier-grid{ grid-template-columns:1fr !important; }
}

/* ---------- 15. Floating promo pill + WhatsApp — stop covering small screens ---------- */
#egtDropshipFloat{
    transition:opacity .3s var(--ds-ease), transform .3s var(--ds-ease);
}
#egtDropshipFloat.ds-peekaboo{
    opacity:0; pointer-events:none; transform:translateY(14px);
}
@media (max-width:480px){
    #egtDropshipFloat{
        width:54px !important; height:54px !important;
        min-width:54px; min-height:54px;
        padding:0 !important; border-radius:50% !important;
        justify-content:center;
    }
    #egtDropshipFloat span:not(.egt-ds-pulse):not(.egt-ds-tag){ display:none !important; }
    #egtDropshipFloat .egt-ds-tag{
        position:absolute; top:-8px; right:-8px;
        font-size:.62rem; padding:2px 7px;
    }
    #egtWhatsappFloat{ bottom:86px !important; }
}

/* ---------- 16. Toasts — native Popover API, stackable ---------- */
.egt-ds-toast{
    position:fixed;
    inset:auto 20px 20px auto;
    z-index:10000;
    max-width:min(360px, calc(100vw - 40px));
    margin:0; padding:14px 16px 14px 14px;
    display:flex; gap:12px; align-items:flex-start;
    background:rgba(13,34,51,.92);
    color:#fff;
    border:1px solid rgba(255,255,255,.16);
    border-left:3px solid var(--ds-red);
    border-radius:10px;
    box-shadow:0 18px 44px rgba(8,22,34,.35);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    font-size:.92rem; line-height:1.5;
}
.egt-ds-toast::backdrop{ background:transparent; }
.egt-ds-toast .egt-ds-toast-icon{
    flex:0 0 auto; width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(74,222,128,.16); color:#4ade80;
}
.egt-ds-toast strong{ display:block; font-weight:700; margin-bottom:2px; }
.egt-ds-toast p{ margin:0; color:rgba(255,255,255,.82); font-size:.86rem; }
.egt-ds-toast[data-open]{ animation:ds-toast-in .35s var(--ds-ease) backwards; }
@keyframes ds-toast-in{
    from{ opacity:0; transform:translateY(14px) scale(.98); }
    to{ opacity:1; transform:none; }
}
/* No-popover fallback */
.egt-ds-toast-fallback{ display:none; }
.egt-ds-toast-fallback.show{ display:flex; }

/* ---------- 17. Reveal on scroll — one subtle pass, once ---------- */
html.ds-anim [data-ds-reveal]{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .7s var(--ds-ease), transform .7s var(--ds-ease);
    transition-delay:var(--ds-reveal-delay, 0s);
}
html.ds-anim [data-ds-reveal].is-in{ opacity:1; transform:none; }

/* ---------- 18. View Transitions — quiet crossfade between pages ---------- */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:ds-vt-out .22s ease-out; }
::view-transition-new(root){ animation:ds-vt-in .32s ease-in; }
@keyframes ds-vt-out{ to{ opacity:.4; } }
@keyframes ds-vt-in{ from{ opacity:.4; } }

/* ---------- 19. Footer — deep harbor document close ---------- */
.egt-footer-shell{
    background:linear-gradient(180deg, var(--ds-harbor-2), #060f18) !important;
    border-top:3px solid var(--ds-red);
}

/* ---------- 20. Breakpoint refinements ---------- */
@media (max-width:1024px){
    .egt-ds-hero-content{ padding:40px 24px; }
}
@media (max-width:768px){
    .egt-home-hero.egt-ds-hero{ min-height:clamp(520px,78vh,680px); }
    .egt-ds-hero-scrim{
        background:linear-gradient(180deg,
            rgba(8,22,34,.55) 0%,
            rgba(8,22,34,.72) 55%,
            rgba(8,22,34,.88) 100%);
    }
    .egt-ds-hero-content{ padding:88px 22px 40px; }
    .egt-ds-hero-cta .egt-ds-btn{ flex:1 1 100%; }
    .egt-ds-hero-pause{ right:16px; bottom:16px; }
}
@media (max-width:428px){
    .egt-ds-hero-title{ font-size:clamp(2rem,11vw,2.5rem); }
    .egt-ds-hero-sub{ font-size:1rem; }
}

/* ---------- 21. Reduced motion — everything still, content fully visible ---------- */
@media (prefers-reduced-motion:reduce){
    *, *::before, *::after{
        animation-duration:.001s !important;
        animation-iteration-count:1 !important;
        transition-duration:.001s !important;
    }
    .egt-ds-hero-slide{ transition:none; }
    .egt-ds-hero-slide.is-active{ opacity:1; }
    .egt-ds-hero-slide:not(.is-active){ display:none; }
    body.ds-ready .egt-ds-hero-content > *{ animation:none; }
    html.ds-anim [data-ds-reveal]{ opacity:1; transform:none; transition:none; }
    ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
    .egt-ds-hero-pause{ display:none; }
}

/* ============================================================
   EGT Animation Calming — 2026-09-30
   Tames excessive infinite animations for a calm, premium feel.
   KEPT: reveal-on-scroll, hover transitions, subtle pulse dots, hero Ken Burns.
   ============================================================ */
.cs-ring{animation:none !important;}
.cs-ring::after{animation:none !important;opacity:.5 !important;}
.cs-ring::before{animation:none !important;opacity:0 !important;}
#egtMainHeader .egt-main-quote::before{animation:none !important;opacity:0 !important;}
#egtMainHeader .egt-main-quote:hover::before{opacity:1 !important;animation:royalCtaShimmer 1.4s linear 1 !important;}
.egt-cred-strip__list li strong,.egt-footer-creds span strong{animation:none !important;}
.egt-cred-strip__list li strong::after,.egt-footer-creds span strong::after{animation:none !important;opacity:0 !important;display:none !important;}
html body{animation:none !important;}
.gsc-trending-label i{animation:none !important;filter:drop-shadow(0 0 3px rgba(239,68,68,.5)) !important;}
.gsc-search-hub{animation:none !important;}
.egt-kicker-pulse{animation-duration:3.4s !important;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}}