/* SabexPlay Phase 6.7 — premium interaction & identity pass */
:root{
  --sabex-blue:#4d91ff;
  --sabex-lime:#baff45;
  --sabex-gold:#ffd454;
  --sabex-glass:rgba(7,12,20,.66);
}

/* 1. Premium header behavior */
.site-header{
  background:linear-gradient(180deg,rgba(5,10,17,.42),rgba(5,10,17,.20))!important;
  border-bottom-color:transparent!important;
  backdrop-filter:blur(8px) saturate(118%)!important;
  transition:height .35s cubic-bezier(.2,.75,.2,1),background .35s ease,border-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease;
}
.site-header.header-scrolled{
  height:70px;
  background:rgba(5,10,17,.90)!important;
  border-bottom-color:rgba(255,255,255,.075)!important;
  backdrop-filter:blur(24px) saturate(138%)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.20);
}
.desktop-nav a{position:relative;transition:color .22s ease}
.desktop-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-10px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--sabex-lime),var(--sabex-blue));transition:right .28s cubic-bezier(.2,.75,.2,1)}
.desktop-nav a:hover:after,.desktop-nav a.nav-current:after{right:0}
.desktop-nav a.nav-current{color:#fff}
.search-trigger,.region-control{transition:border-color .22s ease,background .22s ease,transform .22s ease}
.search-trigger:hover,.region-control:hover{border-color:rgba(186,255,69,.20);background:rgba(255,255,255,.055);transform:translateY(-1px)}

/* 2. Top promo strip */
.announcement{overflow:hidden;background:linear-gradient(90deg,rgba(7,17,31,.94),rgba(12,24,43,.93),rgba(7,17,31,.94))!important;border-bottom-color:rgba(255,255,255,.055)!important}
.announcement:before{content:"";position:absolute;inset:0 auto 0 -35%;width:28%;background:linear-gradient(90deg,transparent,rgba(186,255,69,.055),transparent);transform:skewX(-18deg);animation:sabexPromoSweep 9s ease-in-out infinite;pointer-events:none}
@keyframes sabexPromoSweep{0%,72%{left:-35%}100%{left:115%}}

/* 3. SabexPlay signal-line identity */
.catalogue,.plus-section,.assurance,.faq{padding-top:52px}
.catalogue:before,.plus-section:before,.assurance:before,.faq:before{
  content:attr(data-sabex-label);
  position:absolute;left:0;top:7px;
  width:100%;padding-top:13px;
  border-top:1px solid rgba(255,255,255,.075);
  color:#667488;font:800 8px/1 Inter,sans-serif;letter-spacing:.17em;text-transform:uppercase;
}
.catalogue:after,.plus-section:after,.assurance:after,.faq:after{
  content:"";position:absolute;left:0;top:7px;width:118px;height:1px;
  background:linear-gradient(90deg,var(--sabex-lime),var(--sabex-blue),transparent);
  box-shadow:0 0 18px rgba(77,145,255,.14);
}
.section-heading{position:relative}
.section-heading:before{content:"";position:absolute;left:-18px;top:4px;width:3px;height:38px;border-radius:999px;background:linear-gradient(180deg,var(--sabex-lime),var(--sabex-blue));opacity:.72}

/* 4. Trust rail — engineered rather than advertised */
.trust-strip{position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(180deg,rgba(10,18,29,.83),rgba(6,12,19,.78))!important}
.trust-strip:before{content:"SABEX / SIGNAL";position:absolute;right:18px;top:8px;color:rgba(255,255,255,.055);font:800 8px/1 "Space Grotesk";letter-spacing:.18em;pointer-events:none}
.trust-strip article{min-height:96px;transition:background .25s ease,transform .25s ease}
.trust-strip article:hover{background:rgba(255,255,255,.025);transform:translateY(-2px)}
.trust-strip article:before{position:absolute;right:14px;top:14px;color:rgba(255,255,255,.08);font:700 10px/1 "Space Grotesk";letter-spacing:.08em}
.trust-strip article:nth-child(1):before{content:"01"}.trust-strip article:nth-child(2):before{content:"02"}.trust-strip article:nth-child(3):before{content:"03"}.trust-strip article:nth-child(4):before{content:"04"}
.trust-strip article>span{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 26px rgba(0,0,0,.18)}

/* 5. Pointer-responsive catalogue and plan surfaces */
.product-card,.plan-card,.plus-spotlight,.assurance-panel{--mx:50%;--my:50%;position:relative}
.product-card:before,.plan-card:before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(77,145,255,.105),transparent 42%);
  transition:opacity .3s ease;
}
.product-card:hover:before,.plan-card:hover:before{opacity:1}
.product-card>* ,.plan-card>*{position:relative;z-index:3}
.product-card{transition:transform .38s cubic-bezier(.2,.75,.2,1),box-shadow .38s ease,border-color .3s ease!important}
.product-card:hover{transform:translateY(-8px) scale(1.006)!important;box-shadow:0 34px 80px rgba(0,0,0,.38),0 0 0 1px rgba(77,145,255,.055)!important}
.product-card .product-visual:after{content:""!important;display:block!important;position:absolute;inset:-80% -45%;z-index:1;pointer-events:none;background:linear-gradient(102deg,transparent 40%,rgba(255,255,255,.085) 49%,transparent 58%);transform:translateX(-68%) rotate(8deg);transition:transform .85s cubic-bezier(.2,.7,.2,1)}
.product-card:hover .product-visual:after{transform:translateX(68%) rotate(8deg)}
.plan-card{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.plan-card:hover{transform:translateY(-5px);box-shadow:0 25px 60px rgba(0,0,0,.25)}

/* 6. Premium price transitions */
[data-price-key]{display:inline-block;transform-origin:left center;transition:opacity .18s ease,transform .3s cubic-bezier(.2,.75,.2,1),filter .3s ease}
[data-price-key].price-shift{animation:sabexPriceShift .52s cubic-bezier(.2,.75,.2,1)}
@keyframes sabexPriceShift{0%{opacity:.35;transform:translateY(5px) scale(.985);filter:blur(2px)}55%{opacity:1;transform:translateY(-1px) scale(1.012);filter:blur(0)}100%{transform:none}}
.product-footer>div:first-child,.plan-price,.annual-price{transition:border-color .25s ease,background .25s ease,transform .25s ease}
.product-card:hover .product-footer>div:first-child,.plan-card:hover .plan-price{transform:translateY(-1px)}

/* 7. Better section continuity */
.catalogue,.plus-section,.assurance,.faq{scroll-margin-top:92px}
.request-banner,.plus-spotlight,.assurance-panel,.closing-cta{box-shadow:0 32px 90px rgba(0,0,0,.25)}
.request-banner{position:relative;overflow:hidden}
.request-banner:after{content:"";position:absolute;width:330px;height:330px;right:-140px;top:-190px;border-radius:50%;border:1px solid rgba(7,16,6,.16);box-shadow:0 0 0 42px rgba(7,16,6,.035),0 0 0 84px rgba(7,16,6,.025);pointer-events:none}
.plus-spotlight{transition:border-color .35s ease,box-shadow .35s ease}
.plus-spotlight:hover{border-color:rgba(255,212,84,.18);box-shadow:0 34px 90px rgba(0,0,0,.34)}
.assurance-panel{overflow:hidden}
.assurance-panel:after{content:"";position:absolute;right:-120px;bottom:-180px;width:360px;height:360px;border-radius:50%;border:1px solid rgba(77,145,255,.08);box-shadow:0 0 0 48px rgba(77,145,255,.018),0 0 0 96px rgba(77,145,255,.012);pointer-events:none}

/* 8. Buttons feel deliberate, not flashy */
.button{position:relative;overflow:hidden;isolation:isolate}
.button:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.18) 48%,transparent 68%);transform:translateX(-120%);transition:transform .55s ease}
.button:hover:after{transform:translateX(120%)}
.button:focus-visible,.round-action:focus-visible,.filter:focus-visible,.hero-arrow:focus-visible,.hero-dot:focus-visible{outline:2px solid rgba(186,255,69,.72);outline-offset:3px}

/* 9. Hero feels connected to the rest of the system */
.hero-proof-single{position:relative;overflow:hidden}
.hero-proof-single:after{content:"";position:absolute;left:0;bottom:0;width:44%;height:1px;background:linear-gradient(90deg,var(--sabex-lime),var(--sabex-blue),transparent)}
.hero-slides{box-shadow:0 34px 100px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.018),inset 0 1px 0 rgba(255,255,255,.04)!important}
.hero-dot.active{box-shadow:0 0 18px rgba(186,255,69,.34)!important}

@media(max-width:1000px){
  .site-header{background:rgba(5,10,17,.82)!important;backdrop-filter:blur(18px) saturate(125%)!important}
}
@media(max-width:680px){
  .catalogue,.plus-section,.assurance,.faq{padding-top:44px}
  .section-heading:before{left:-10px;height:30px}
  .trust-strip article{min-height:82px}
  .announcement-note{display:none}
}
@media(hover:none){
  .product-card:hover,.plan-card:hover,.trust-strip article:hover{transform:none!important}
  .product-card:before,.plan-card:before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .announcement:before{animation:none}.product-card .product-visual:after{display:none!important}[data-price-key].price-shift{animation:none}
}