/* ==========================================================================
   Sohateb — 3D / motion / premium layer (loaded after lux.css & lux-pages.css)
   ========================================================================== */

/* ── reveal now uses individual transform props so it composes with 3D tilt ── */
[data-reveal]{transform:none;translate:0 34px;scale:1;opacity:0;transition:opacity .9s var(--ease),translate .9s var(--ease),scale .9s var(--ease);transition-delay:var(--d,0s)}
[data-reveal="left"]{translate:-40px 0}
[data-reveal="right"]{translate:40px 0}
[data-reveal="zoom"]{translate:0 0;scale:.92}
[data-reveal].in{translate:none;scale:1;opacity:1;transform:none}

/* ── tilt system ── */
[data-tilt]{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;will-change:transform;transition:transform .35s var(--ease),box-shadow .5s var(--ease),border-color .3s,translate .5s var(--ease),opacity .9s var(--ease),scale .9s var(--ease)}
[data-tilt]:hover{transition:transform .08s linear,box-shadow .5s var(--ease),border-color .3s,translate .5s var(--ease)}
.pcard:hover,.mcard:hover,.aud:hover,.tier:hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));translate:0 -8px}
.pcard-shine,.mcard::after,.aud::before{pointer-events:none}
.pcard-shine{position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),transparent 45%);opacity:0;transition:opacity .4s;mix-blend-mode:soft-light}
.pcard:hover .pcard-shine{opacity:1}
.pcard-img img{transform:translateZ(30px)}
.pcard-body{transform:translateZ(20px)}
.pcard{box-shadow:0 1px 0 #fff inset,0 10px 24px -14px rgba(9,26,53,.25)}
.pcard:hover{box-shadow:0 40px 70px -28px rgba(9,26,53,.45),0 0 0 1px var(--gold-light)}
.mcard::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(143,224,235,.28),transparent 50%);opacity:0;transition:opacity .4s}
.mcard{position:relative}
.mcard:hover::after{opacity:1}

/* ══ HEADER 3D (floating glass bar) ══ */
.header{background:linear-gradient(180deg,#0f2747 55%,rgba(15,39,71,0));border:0;padding:10px 0 6px;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .4s,padding .4s}
.header.scrolled{background:linear-gradient(180deg,rgba(9,26,53,.55),rgba(9,26,53,0));box-shadow:none;padding:6px 0}
.header .header-in{height:var(--header-h);padding-inline:20px;border-radius:24px;border:1px solid rgba(143,224,235,.22);background:linear-gradient(135deg,rgba(22,52,92,.92),rgba(15,39,71,.92) 55%,rgba(19,48,90,.92));backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 26px 50px -22px rgba(0,0,0,.7),0 2px 0 rgba(255,255,255,.07) inset,0 -2px 0 rgba(0,0,0,.45) inset,0 0 0 1px rgba(0,0,0,.4);position:relative;transform:perspective(1400px) rotateX(1.5deg);transform-origin:top;transition:transform .5s var(--ease),height .4s var(--ease)}
.header.scrolled .header-in{transform:perspective(1400px) rotateX(0deg);height:calc(var(--header-h) - 10px)}
.header .header-in::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(143,224,235,.12) 48%,transparent 62%);background-size:260% 100%;animation:sheen 7s linear infinite;pointer-events:none}
@keyframes sheen{from{background-position:130% 0}to{background-position:-130% 0}}
.header .header-in::after{content:"";position:absolute;inset-inline:30px;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.brand-logo{filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.nav>.nav-item>a,.nav>.nav-item>button{height:calc(var(--header-h) - 20px);border-radius:14px;transition:transform .35s var(--ease),color .25s,background .25s,text-shadow .3s;transform-style:preserve-3d}
.nav>.nav-item>a:hover,.nav>.nav-item>button:hover{transform:perspective(500px) rotateX(-12deg) translateY(-2px) translateZ(8px);text-shadow:0 8px 14px rgba(0,0,0,.5),0 0 18px rgba(143,224,235,.45);background:rgba(255,255,255,.04)}
.nav-item>a::after,.nav-item>button::after{bottom:8px}
.icon-btn{background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 14px -8px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.15) inset;margin-inline-start:6px;transition:transform .3s var(--ease),box-shadow .3s,background .25s,color .25s}
.icon-btn:hover{transform:translateY(-3px) rotateX(10deg);box-shadow:0 14px 20px -8px rgba(0,0,0,.7),0 0 18px rgba(44,183,201,.4)}
.icon-btn:active{transform:translateY(1px) scale(.96)}
.cart-drawer .icon-btn,.drawer .icon-btn,.modal .icon-btn,.search-box .icon-btn{background:transparent;box-shadow:none;border-color:transparent;color:inherit}
.search-btn{box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 10px 18px -12px #000;transition:all .35s var(--ease)}
.search-btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--gold),0 14px 24px -10px rgba(44,183,201,.5)}
.mega{border-radius:0 0 28px 28px;transform-origin:top center;transform:perspective(1400px) rotateX(-16deg) translateY(8px);top:calc(100% + 4px);inset-inline:12px;margin-inline:auto;max-width:1240px;border:1px solid var(--line);border-top:2px solid var(--gold);transition:opacity .35s var(--ease),transform .5s var(--ease),visibility .3s}
.nav-item.has-mega:hover .mega,.nav-item.has-mega:focus-within .mega{transform:perspective(1400px) rotateX(0) translateY(0)}
.mega li{opacity:0;translate:0 10px;transition:opacity .4s,translate .5s var(--ease)}
.nav-item:hover .mega li{opacity:1;translate:none}
.nav-item:hover .mega li:nth-child(2){transition-delay:.04s}.nav-item:hover .mega li:nth-child(3){transition-delay:.08s}.nav-item:hover .mega li:nth-child(4){transition-delay:.12s}.nav-item:hover .mega li:nth-child(5){transition-delay:.16s}.nav-item:hover .mega li:nth-child(n+6){transition-delay:.2s}
.mega-promo{transform-style:preserve-3d;box-shadow:0 30px 40px -24px rgba(0,0,0,.6)}
.topbar{position:relative;z-index:901}
.scroll-progress{position:fixed;top:0;inset-inline:0;height:3px;background:var(--gold-grad);transform:scaleX(0);transform-origin:right;z-index:4001}

/* ══ HERO extras ══ */
.hero{padding-top:0;margin-top:-86px;padding-top:86px}
.hero-grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(143,224,235,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(143,224,235,.06) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(70% 70% at 70% 40%,#000,transparent);-webkit-mask-image:radial-gradient(70% 70% at 70% 40%,#000,transparent);transform:perspective(600px) rotateX(55deg) scale(1.8) translateY(-12%);transform-origin:top;animation:gridMove 12s linear infinite;pointer-events:none}
@keyframes gridMove{to{background-position:0 64px,64px 0}}
.hero-wave{position:absolute;bottom:-1px;inset-inline:0;width:100%;height:60px;display:block}
.hero-stage canvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:1}
.hero.webgl .ring{opacity:.0}
.hero-stage .float-card,.hero-stage .hero-chip{z-index:3}
.hero h1{text-shadow:0 18px 40px rgba(0,0,0,.45)}
.hero-copy .eyebrow{background:rgba(143,224,235,.08);border:1px solid rgba(143,224,235,.25);padding:6px 16px;border-radius:999px;color:var(--gold-light)}
.hero-copy .eyebrow::before{display:none}
.hero-stats>div{padding:14px 20px;border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.01));border:1px solid rgba(143,224,235,.16);backdrop-filter:blur(6px);transform:perspective(600px) rotateX(6deg);box-shadow:0 18px 30px -18px #000}
.hero-stats b{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.float-card{backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);box-shadow:0 30px 50px -20px rgba(0,0,0,.6)}

/* ══ Sections visuals ══ */
.section-head .h-lg{position:relative}
.section-head .eyebrow{background:rgba(44,183,201,.1);padding:4px 14px;border-radius:999px}
.section-head .eyebrow::before{display:none}
.section-dark .eyebrow{background:rgba(143,224,235,.1)}
.section::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.section-dark::before,.offers::before{display:none}
.trustbar{position:relative;z-index:2;margin-top:-1px}
.trust-it{border-radius:14px;transition:background .3s,transform .4s var(--ease)}
.trust-it:hover{background:var(--ivory);transform:translateY(-3px)}
.aud{box-shadow:0 40px 60px -34px rgba(0,0,0,.55);transform-style:preserve-3d}
.aud h3,.aud p,.aud .ico-big{transform:translateZ(36px)}
.aud .ico-big{animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{translate:0 -8px}}
.cat-tile{transform-style:preserve-3d;box-shadow:0 20px 40px -26px rgba(0,0,0,.5)}
.cat-tile span{transform:translateZ(30px)}

/* Bento */
.why{overflow:hidden}
.why::after{content:"";position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(44,183,201,.18),transparent 65%);inset-inline-end:-200px;top:-200px;animation:orb 18s ease-in-out infinite alternate;pointer-events:none}
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(190px,auto);gap:18px;position:relative;z-index:1}
.bt{border-radius:var(--radius-lg);padding:28px;border:1px solid rgba(143,224,235,.16);background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.015));position:relative;overflow:hidden;backdrop-filter:blur(6px)}
.bt .ico{width:40px;height:40px;color:var(--gold-light);margin-bottom:14px;transform:translateZ(30px)}
.bt h3{font-size:19px;margin-bottom:8px;transform:translateZ(24px)}
.bt p{color:#c1cfe3;font-size:14px;margin:0}
.bt .big{font-size:56px;font-weight:800;position:absolute;bottom:10px;inset-inline-end:22px;line-height:1}
.bt::before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(44,183,201,.25),transparent 65%);top:-80px;inset-inline-start:-60px;transition:transform 1s var(--ease)}
.bt:hover::before{transform:scale(1.5)}
.b1{grid-column:span 3;grid-row:span 1}.b2{grid-column:span 3}.b3{grid-column:span 2}.b4{grid-column:span 2}.b5{grid-column:span 2}

/* Process */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative;padding-top:26px}
.process-line{position:absolute;top:44px;inset-inline:10%;width:80%;height:6px;overflow:visible}
.process-line path{stroke-dashoffset:1000;animation:drawLine 3.2s .3s var(--ease) forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}
.step{text-align:center;position:relative}
.step i{width:58px;height:58px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:20px;background:var(--gold-grad);color:#04202a;box-shadow:0 14px 24px -10px rgba(29,154,171,.7),0 0 0 8px var(--ivory),0 0 0 9px var(--line-2);transform:perspective(300px) rotateX(14deg);transition:transform .5s var(--ease)}
.step:hover i{transform:perspective(300px) rotateX(0) translateY(-6px) scale(1.1)}
.step b{display:block;font-size:16px}.step span{display:block;color:var(--muted);font-size:13px}

/* Buttons 3D */
.btn{box-shadow:0 14px 24px -14px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.25) inset}
.btn-gold{box-shadow:0 18px 30px -14px rgba(29,154,171,.8),0 1px 0 rgba(255,255,255,.5) inset,0 -3px 0 rgba(29,154,171,.4) inset}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(1px);box-shadow:0 4px 8px -4px rgba(0,0,0,.4)}
.add-btn{box-shadow:0 10px 16px -8px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.2) inset}

/* Page head with floating shapes */
.page-head::after{content:"";position:absolute;width:260px;height:260px;border:1px solid rgba(143,224,235,.25);border-radius:50%;inset-inline-start:6%;bottom:-120px;animation:spin 30s linear infinite;border-style:dashed}
.page-head{margin-top:-86px;padding-top:calc(86px + clamp(34px,5vw,64px))}

/* ══ FOOTER PRO ══ */
.footer{background:radial-gradient(120% 100% at 80% 0%,#13305a 0%,#0b2040 60%,#071730 100%);overflow:hidden;position:relative}
.footer::before{display:none}
.footer-cta{position:relative;margin-top:-1px;padding:70px 0 40px}
.foot-card{border-radius:30px;padding:clamp(28px,4.5vw,56px);background:var(--gold-grad);color:#04202a;display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;position:relative;overflow:hidden;box-shadow:0 50px 80px -40px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.6) inset;transform:perspective(1400px) rotateX(2deg)}
.foot-card::before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:rgba(255,255,255,.28);top:-160px;inset-inline-start:-80px}
.foot-card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);background-size:260% 100%;animation:sheen 6s linear infinite;pointer-events:none}
.foot-card h2{color:#04202a;font-size:clamp(22px,3vw,36px);position:relative}
.foot-card p{position:relative;margin:8px 0 0}
.foot-card .news-form{position:relative;margin:0}
.foot-card .news-form input{background:#fff;border-color:transparent;color:#04202a}
.foot-card .news-form .btn-gold{background:var(--charcoal);color:#fff}
.footer-trust{position:relative;border-color:#1d3f6c}
.ft-item{transition:transform .4s var(--ease)}
.ft-item:hover{transform:translateY(-4px)}
.ft-item .ico{padding:7px;border-radius:12px;background:rgba(44,183,201,.12);width:46px;height:46px;border:1px solid rgba(44,183,201,.25)}
.footer-main{position:relative;z-index:1}
.footer-wordmark{position:absolute;bottom:40px;inset-inline:0;text-align:center;font-weight:800;font-size:clamp(90px,19vw,300px);line-height:1;letter-spacing:.04em;color:transparent;-webkit-text-stroke:1px rgba(143,224,235,.1);pointer-events:none;user-select:none;font-family:Georgia,'Times New Roman',serif}
.footer-contact{display:grid;gap:12px;margin-top:20px}
.footer-contact div{display:flex;gap:12px;align-items:flex-start;font-size:13.5px}
.footer-contact .ico{color:var(--gold);width:20px;height:20px;margin-top:3px}
#footWaves{position:absolute;bottom:0;inset-inline:0;width:100%;height:150px;pointer-events:none;opacity:.9}
.footer-bottom{position:relative;z-index:1;background:rgba(0,0,0,.22);margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);backdrop-filter:blur(4px)}
.footer-links-inline{display:flex;gap:18px;flex-wrap:wrap}
.footer-links-inline a:hover{color:var(--gold-light)}
.to-top{position:fixed;inset-inline-end:20px;bottom:28px;width:50px;height:50px;border-radius:16px;border:1px solid rgba(143,224,235,.4);background:linear-gradient(145deg,#1d4170,#0f2747);color:var(--gold-light);display:grid;place-items:center;z-index:700;opacity:0;pointer-events:none;translate:0 20px;transform:perspective(300px) rotateX(18deg);box-shadow:0 18px 24px -10px #000,0 1px 0 rgba(255,255,255,.2) inset,0 -4px 0 rgba(0,0,0,.5) inset;transition:all .5s var(--ease)}
.to-top.show{opacity:1;pointer-events:auto;translate:none}
.to-top:hover{transform:perspective(300px) rotateX(0) translateY(-4px);color:#fff}
.to-top .ico{transform:rotate(90deg)}
.fab-wa{box-shadow:0 20px 30px -14px #000,0 1px 0 rgba(255,255,255,.15) inset}

@media (max-width:1100px){.bento{grid-template-columns:repeat(2,1fr)}.b1,.b2,.b3,.b4,.b5{grid-column:span 1}.b1,.b2{grid-column:span 2}.foot-card{grid-template-columns:1fr}.process{grid-template-columns:1fr 1fr}.process-line{display:none}.hero{margin-top:-72px;padding-top:72px}.hero-grid-lines{opacity:.5}}
@media (max-width:860px){
  .header .header-in{border-radius:18px;padding-inline:10px;transform:none}
  .header{padding:6px 8px}
  .header .container.header-in{width:100%}
  .bento{grid-template-columns:1fr}.b1,.b2,.b3,.b4,.b5{grid-column:auto}
  .footer-wordmark{font-size:26vw;bottom:70px}
  .to-top{bottom:150px}
  .foot-card{transform:none}
  .page-head,.hero{margin-top:-68px}
}
@media (prefers-reduced-motion:reduce){[data-tilt]{transform:none!important}.header .header-in{transform:none}.hero-grid-lines{animation:none}}

/* tweaks */
.nav>.nav-item>a,.nav>.nav-item>button{white-space:nowrap;font-size:14px;padding:0 10px}
.header .brand-logo{width:84px}
.header .brand-logo img{width:150px;height:150px}
@media (max-width:1280px){.nav>.nav-item>a,.nav>.nav-item>button{padding:0 7px;font-size:13px}.search-btn{min-width:0;width:44px;padding:0;justify-content:center;border-radius:50%}.search-btn span,.search-btn kbd{display:none}}
@media (max-width:860px){
  .header .brand-logo{width:60px;height:calc(var(--header-h) - 10px)}
  .header .brand-logo img{width:112px;height:112px}
  .header .icon-btn{width:40px;height:40px;margin-inline-start:2px}
}