/* BAG Electronics — Site styles. Inter font + sharp lines + accent green. */
:root{
  --bag-blue: #5BB14E;
  --bag-blue-dark:#3F8E36;
  --brand-primary: #5BB14E;
  --brand-primary-dark: #3F8E36;
  --bag-ink:#0e1116;
  --bag-ink-2:#1a1d23;
  --bag-line:#e6e8ec;
  --bag-muted:#6b7280;
}
html,body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--bag-ink);background:#ffffff;}
body{font-feature-settings:'ss01','cv11';-webkit-font-smoothing:antialiased;}
*{border-color:var(--bag-line);}
.section-pad{padding-top:120px;padding-bottom:120px;}
@media (max-width: 1023px){.section-pad{padding-top:72px;padding-bottom:72px;}}

/* Header */
.bag-header{background:var(--bag-ink);position:relative;}
.bag-header a,.bag-header button{color:#fff;}
.bag-nav-link{position:relative;letter-spacing:.08em;font-size:13px;font-weight:500;color:#fff;background:transparent;border:none;cursor:pointer;}
.bag-nav-link::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--bag-blue);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;}
.bag-nav-link.active::after,.bag-nav-link:hover::after,.bag-mega-trigger:hover .bag-nav-link::after{transform:scaleX(1);}

/* Mega menu - positioned relative to header (full width) */
.bag-mega-trigger{position:static !important;}
.bag-mega{position:absolute;left:0;right:0;top:100%;width:100%;background:#fff;color:var(--bag-ink);border-top:1px solid var(--bag-line);box-shadow:0 24px 40px -24px rgba(10,15,25,.18);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .28s ease, transform .28s ease, visibility 0s linear .28s;z-index:60;pointer-events:none;}
.bag-header .bag-mega a, .bag-header .bag-mega div {
  color: var(--bag-ink);
}
.bag-mega-trigger:hover .bag-mega,.bag-mega-trigger:focus-within .bag-mega{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition:opacity .28s ease, transform .28s ease, visibility 0s linear 0s;}
.bag-mega .col-title{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bag-muted);font-weight:600;}
.bag-mega a.col-item{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--bag-line);font-size:15px;font-weight:500;color:var(--bag-ink);transition:color .2s ease,padding .2s ease;}
.bag-mega a.col-item:hover{color:var(--bag-blue);padding-left:6px;}
.bag-mega a.col-item .arrow{opacity:0;transform:translateX(-6px);transition:all .2s ease;}
.bag-mega a.col-item:hover .arrow{opacity:1;transform:translateX(0);}

/* Hero */
.bag-hero{position:relative;min-height:88vh;background:#0a0d12;color:#fff;overflow:hidden;}
.bag-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg, rgba(8,11,16,.85) 0%, rgba(8,11,16,.55) 45%, rgba(8,11,16,.15) 100%);pointer-events:none;}
.bag-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.9) brightness(.7);}
.bag-hero-content{position:relative;z-index:2;}
.bag-hero h1{font-size:clamp(38px,5.4vw,80px);line-height:1.02;font-weight:300;letter-spacing:-.02em;}
.bag-hero h1 strong{font-weight:600;}
.bag-hero-sidetabs li{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:14px;color:rgba(255,255,255,.65);cursor:pointer;transition:color .2s ease, padding .2s ease, border-color .2s ease;}
.bag-hero-sidetabs li:hover,.bag-hero-sidetabs li.active{color:#fff;border-color:var(--bag-blue);padding-left:10px;}
.bag-hero-sidetabs li.active{position:relative;}
.bag-hero-sidetabs li.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--bag-blue);}

/* Buttons */
.bag-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border:1px solid #fff;color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase;transition:all .25s ease;background:transparent;cursor:pointer;}
.bag-btn:hover{background:#fff;color:var(--bag-ink);}
.bag-btn-blue{background:var(--bag-blue);border-color:var(--bag-blue);}
.bag-btn-blue:hover{background:var(--bag-blue-dark);border-color:var(--bag-blue-dark);color:#fff;}
.bag-btn-ghost{border-color:var(--bag-ink);color:var(--bag-ink);}
.bag-btn-ghost:hover{background:var(--bag-ink);color:#fff;}

/* Sector cards */
.bag-sector{position:relative;overflow:hidden;background:#0e1116;color:#fff;min-height:420px;}
.bag-sector .img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02);transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease;filter:saturate(.85) brightness(.55);}
.bag-sector:hover .img{transform:scale(1.08);filter:saturate(1) brightness(.7);}
.bag-sector::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(8,11,16,.1) 30%, rgba(8,11,16,.85) 100%);}
.bag-sector .content{position:relative;z-index:2;}
.bag-sector .learn{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#fff;border-top:1px solid rgba(255,255,255,.6);padding-top:14px;transition:gap .25s ease, border-color .25s ease;}
.bag-sector:hover .learn{gap:18px;border-color:var(--bag-blue);}
.bag-sector .plus{width:32px;height:32px;border:1px solid #fff;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;transition:all .25s ease;font-size: 17px;}
.bag-sector:hover .plus{background:var(--bag-blue);border-color:var(--bag-blue);}

/* Glance grid */
.bag-glance{border-top:1px solid var(--bag-line);}
.bag-glance-item{padding:48px 32px;border-right:1px solid var(--bag-line);border-bottom:1px solid var(--bag-line);background:#fff;transition:background .25s ease;cursor:pointer;}
.bag-glance-item:hover{background:#f6f7f9;}
.bag-glance-item .ttl{font-size:20px;font-weight:600;margin-bottom:8px;}
.bag-glance-item .sub{font-size:13px;color:var(--bag-muted);letter-spacing:.04em;}
.bag-glance-item .arrow{margin-top:24px;width:36px;height:36px;border:1px solid var(--bag-ink);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;transition:all .25s ease;}
.bag-glance-item:hover .arrow{background:var(--bag-blue);border-color:var(--bag-blue);color:#fff;}

/* Help cards */
.help-card{padding:48px 36px;border:1px solid var(--bag-line);transition:all .3s ease;background:#fff;}
.help-card:hover{border-color:var(--bag-blue);transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(10,15,25,.16);}
.help-card .ic{width:56px;height:56px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#eef3fb;color:var(--bag-blue);margin-bottom:24px;}

/* Footer */
.bag-footer{background:#2a2d33;color:rgba(255,255,255,.75);}
.bag-footer a{color:rgba(255,255,255,.75);transition:color .2s ease;}
.bag-footer a:hover{color:#fff;}
.bag-footer h4{color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:24px;}
.bag-footer .soc{width:38px;height:38px;border:1px solid rgba(255,255,255,.4);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;transition:all .25s ease;}
.bag-footer .soc:hover{background:var(--bag-blue);border-color:var(--bag-blue);color:#fff;}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* Mobile nav */
.bag-mobile{position:fixed;inset:0;background:var(--bag-ink);color:#fff;z-index:80;transform:translateX(100%);transition:transform .35s ease;overflow-y:auto;}
.bag-mobile.open{transform:translateX(0);}
.bag-mobile a{display:block;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:18px;}
.bag-mobile .group-title{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:32px;}

/* Featured product */
.featured{background:#0e1116;color:#fff;}

/* Marquee logos */
.marquee{overflow:hidden;border-top:1px solid var(--bag-line);border-bottom:1px solid var(--bag-line);}
.marquee-track{display:flex;gap:80px;padding:36px 0;animation:scroll 38s linear infinite;}
@keyframes scroll{from{transform:translateX(0);} to {transform:translateX(-50%);}}
.marquee-item{font-size:14px;color:var(--bag-muted);letter-spacing:.08em;white-space:nowrap;}

/* Selection */
::selection{background:var(--bag-blue);color:#fff;}