/* Ecleel landing page — production styles
   Ported from the design-canvas prototype's <helmet><style> block. */

@font-face{font-family:'Almarai';src:url("../assets/fonts/almarai-300.ttf") format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Almarai';src:url("../assets/fonts/almarai-400.ttf") format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Almarai';src:url("../assets/fonts/almarai-700.ttf") format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Almarai';src:url("../assets/fonts/almarai-800.ttf") format('truetype');font-weight:800;font-style:normal;font-display:swap}

*{box-sizing:border-box}
body{margin:0;background:#ffffff;font-family:'Almarai','Helvetica Neue',Arial,sans-serif;color:#121218;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
section,footer{scroll-margin-top:84px}
a{color:inherit;text-decoration:none}
a:hover{color:#5b5d96}
button{font-family:inherit;cursor:pointer}
img{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}

#app{position:relative;isolation:isolate;background-color:#ffffff}

/* Phone mockup */
.phone{width:290px;height:600px;box-sizing:border-box;border-radius:46px;background:#15151f;padding:10px;box-shadow:0 40px 80px -30px rgba(30,30,70,0.45),0 0 0 1px rgba(0,0,0,0.06)}
.screen{width:100%;height:100%;border-radius:37px;overflow:hidden;background:#ffffff;display:flex;flex-direction:column;position:relative}

/* Feature rows */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

/* Catalog marquee */
.cat-row{display:flex;gap:34px;width:max-content}
.cat-left{animation:catL 60s linear infinite}
.cat-right{animation:catR 60s linear infinite}
.cat-row:hover{animation-play-state:paused}
@keyframes catL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes catR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.cat-row{animation:none}}

.cat-card{cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.cat-card:hover,.cat-card.is-sel{transform:translateY(-6px) scale(1.08);box-shadow:0 18px 40px -14px rgba(30,30,70,0.22),0 4px 12px rgba(30,30,70,0.06);border-color:transparent !important;position:relative;z-index:2}
.cat-card:focus-visible{outline:2px solid #5b5d96;outline-offset:3px}

/* Hero intro + chandelier light */
.hv-up{animation:hvUp .8s cubic-bezier(.2,.8,.2,1) both}
.hv-d1{animation-delay:.1s}.hv-d2{animation-delay:.22s}.hv-d3{animation-delay:.34s}.hv-d4{animation-delay:.46s}
.hv-circle{animation:hvCircle 1.2s cubic-bezier(.2,.8,.2,1) both}
.hv-img{animation:hvImg 1s cubic-bezier(.2,.8,.2,1) .25s both}
.hv-screen{animation:hvFade .9s ease .8s both}
.hv-glow{animation:hvLight 10s linear .9s infinite both;mix-blend-mode:screen;pointer-events:none}
.hv-pool{animation:hvLight 10s linear .9s infinite both;pointer-events:none}
@keyframes hvUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes hvCircle{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes hvImg{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes hvFade{from{opacity:0}to{opacity:1}}
@keyframes hvLight{0%,4%{opacity:0}6%{opacity:1}8%{opacity:.15}10%{opacity:.9}12%{opacity:.3}15%,80%{opacity:1}83%{opacity:.2}85%{opacity:.85}87%{opacity:.1}90%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hv-up,.hv-circle,.hv-img,.hv-screen{animation:none}.hv-glow,.hv-pool{animation:none;opacity:1}}

/* Aurora background wash behind header */
.aurora{position:absolute;left:0;right:0;top:0;height:900px;overflow:hidden;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#f6f5fd 0%,#ffffff 100%);-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
.au-b{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform;animation-timing-function:cubic-bezier(.45,.05,.55,.95) !important}
.au-1{width:46%;aspect-ratio:1;left:52%;top:-18%;background:#a3a5da;opacity:.4;animation:au1 7s ease-in-out infinite alternate}
.au-2{width:38%;aspect-ratio:1;left:68%;top:22%;background:#d8cbf4;opacity:.42;animation:au2 8s ease-in-out infinite alternate}
.au-3{width:40%;aspect-ratio:1;left:4%;top:-20%;background:#9DA3FF;opacity:.34;animation:au3 9s ease-in-out infinite alternate}
.au-4{width:30%;aspect-ratio:1;left:24%;top:34%;background:#f6e3b2;opacity:.26;animation:au4 7.5s ease-in-out infinite alternate}
@keyframes au1{0%{transform:translate(0,0) scale(1)}33%{transform:translate(-30%,22%) scale(1.25)}66%{transform:translate(-55%,-6%) scale(.9)}100%{transform:translate(-20%,30%) scale(1.1)}}
@keyframes au2{0%{transform:translate(0,0) scale(1)}33%{transform:translate(-45%,-25%) scale(.85)}66%{transform:translate(-70%,15%) scale(1.2)}100%{transform:translate(-25%,-40%) scale(1)}}
@keyframes au3{0%{transform:translate(0,0) scale(1)}33%{transform:translate(50%,25%) scale(1.2)}66%{transform:translate(85%,-5%) scale(.9)}100%{transform:translate(35%,35%) scale(1.1)}}
@keyframes au4{0%{transform:translate(0,0) scale(1)}33%{transform:translate(70%,-30%) scale(1.3)}66%{transform:translate(120%,10%) scale(.95)}100%{transform:translate(40%,-45%) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.aurora,.au-b{animation:none}}

.ba-range{-webkit-appearance:none;appearance:none;background:transparent}

/* Store screen auto-scroll */
.store-scroll{animation:storeScroll 22s ease-in-out 1s infinite alternate}
.store-screen:hover .store-scroll{animation-play-state:paused}
@keyframes storeScroll{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + 100cqh))}}
@media (prefers-reduced-motion:reduce){.store-scroll{animation:none}}

/* QR / waitlist modal */
.qr-ov{animation:qrFade .3s ease both}
.qr-card{animation:qrPop .45s cubic-bezier(.2,.9,.25,1.08) both}
.qr-side>div{animation:qrPop .5s cubic-bezier(.2,.9,.25,1.08) .12s both}
.qr-out .qr-ov{animation:qrFadeOut .24s ease both}
.qr-out .qr-card{animation:qrPopOut .24s ease both}
@keyframes qrFade{from{opacity:0}to{opacity:1}}
@keyframes qrFadeOut{from{opacity:1}to{opacity:0}}
@keyframes qrPop{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
@keyframes qrPopOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(16px) scale(.96)}}
@media (prefers-reduced-motion:reduce){.qr-ov,.qr-card,.qr-side>div,.qr-out .qr-ov,.qr-out .qr-card{animation:none}}

/* Nav */
.nav-link{position:relative;padding:8px 0;transition:color .25s ease}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:#5b5d96;transform:scaleX(0);transition:transform .3s ease}
.nav-link:hover::after{transform:scaleX(.4)}
.nav-link.is-active{color:#121218;font-weight:700}
.nav-link.is-active::after{transform:scaleX(1)}
/* Waitlist form */
.wl-input:focus{outline:none;border-color:#5b5d96 !important;box-shadow:0 0 0 3px rgba(91,93,150,0.18)}
.wl-input[aria-invalid="true"]{border-color:#c0392b !important}
.wl-done{animation:qrPop .45s cubic-bezier(.2,.9,.25,1.08) both}

[hidden]{display:none !important}

/* Nav scroll state */
.sticky-bar{background:rgba(255,255,255,0);border-bottom:1px solid rgba(18,18,24,0)}
.sticky-bar.is-scrolled{background:rgba(255,255,255,.72);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);border-bottom-color:rgba(18,18,24,.06)}
.lang-pill button{background:transparent;color:#4a4a58}
.lang-pill button[aria-pressed="true"]{background:#121218;color:#ffffff}

.check-dot{width:24px;height:24px;border-radius:50%;background:#e7e7f3;color:#5b5d96;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Showcase right-area: mirrored precisely between LTR/RTL per source */
.show-t1{left:32px}
.show-card{right:0}
.show-card-img{left:-70px;top:-39px;width:453px;height:331px}
.show-card-badge{left:14px}
.show-t2{right:276px;text-align:left}
.show-plan{right:0}
.show-arrow{top:239px;left:707px}
html[dir="rtl"] .show-t1{left:auto;right:32px}
html[dir="rtl"] .show-card{right:auto;left:0}
html[dir="rtl"] .show-card-img{left:-49px;top:-47px;width:447px;height:326px}
html[dir="rtl"] .show-card-badge{left:auto;right:14px}
html[dir="rtl"] .show-t2{right:auto;left:276px;text-align:right}
html[dir="rtl"] .show-plan{right:auto;left:0}
html[dir="rtl"] .show-arrow{left:39px;top:233px;transform:scaleX(-1)}

/* FAQ decoration: mirrored */
.faq-chair{right:0}
.faq-squiggle{left:234px;top:-40px}
html[dir="rtl"] .faq-chair{right:0;transform:scaleX(-1)}
html[dir="rtl"] .faq-squiggle{left:-14px;top:-40px;transform:scaleX(-1)}

/* Arabic type: source drops the tight letter-spacing used for Latin headings */
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3{letter-spacing:0 !important}

@media (max-width:900px){
  .feat,.cards3{grid-template-columns:minmax(0,1fr) !important;gap:40px !important}
  .feat>.order-m{order:2}
  .hide-m{display:none !important}
  .hero-h{font-size:36px !important;line-height:44px !important}
  .hero-grid{grid-template-columns:minmax(0,1fr) !important}
  .wl-row{grid-template-columns:minmax(0,1fr) !important}
  .vhero{height:560px !important}
  .vhero-copy{padding:28px !important}
  .show-grid{grid-template-columns:minmax(0,1fr) !important}
  .faq-grid{grid-template-columns:minmax(0,1fr) !important}
  .qr-card{grid-template-columns:minmax(0,1fr) !important}
  .qr-side{order:-1;padding:28px !important}
  .show-right{height:auto !important;display:flex;flex-direction:column;gap:24px;padding-top:32px}
  .show-right>*{position:static !important;width:auto !important;text-align:start !important}
  .show-card{height:240px !important}
  .show-right>.show-card{position:relative !important;margin-top:40px}
  .stack-m{flex-direction:column !important;align-items:flex-start !important}
}