:root{
  --green:#063d35;--green-deep:#031f1d;--gold:#d4ad62;--gold-light:#f2d99b;
  --ivory:#f7f1df;--muted:rgba(247,241,223,.72);--line:rgba(242,217,155,.23);
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--green-deep);scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--ivory);font-family:"Segoe UI",Tahoma,Arial,sans-serif;overflow-x:hidden}
button,a{font:inherit}
a{color:inherit;text-decoration:none}
.scene{position:fixed;inset:0;background:linear-gradient(90deg,rgba(2,28,25,.97) 0%,rgba(3,31,28,.78) 38%,rgba(2,25,24,.34) 68%,rgba(2,20,19,.58) 100%),linear-gradient(0deg,rgba(2,21,20,.95),transparent 58%),url("assets/saudi-oasis-hero.png") center/cover no-repeat;transform:scale(1.02);animation:sceneIn 2s ease-out both}
.grain{position:fixed;inset:0;opacity:.05;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}
.topbar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:27px clamp(24px,5vw,82px);border-bottom:1px solid rgba(255,255,255,.1)}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo-image{width:55px;height:66px;display:grid;place-items:center;overflow:hidden;border-radius:10px;background:#fff;padding:3px;box-shadow:0 8px 24px rgba(0,0,0,.24)}
.brand-logo-image img{display:block;width:100%;height:100%;object-fit:contain}
.brand-mark{position:relative;width:46px;height:46px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center}
.brand-mark:before,.brand-mark:after,.brand-mark i{content:"";position:absolute;background:var(--gold);transform:rotate(45deg)}
.brand-mark:before{width:17px;height:17px;border-radius:2px}
.brand-mark:after{width:8px;height:8px;background:var(--ivory)}
.brand-mark i{width:27px;height:1px;box-shadow:0 7px 0 var(--gold),0 -7px 0 var(--gold)}
.brand strong{display:block;font-size:1.04rem;font-weight:700;letter-spacing:.01em}
.brand small{display:block;font-size:.61rem;letter-spacing:.16em;color:var(--gold-light);margin-top:4px}
.header-actions{display:flex;align-items:center;gap:22px}
.saudi-label{font-size:.84rem;color:var(--muted)}
.sound-toggle{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:var(--ivory);cursor:pointer;transition:.3s}
.sound-toggle:hover{border-color:var(--gold);background:rgba(212,173,98,.12)}
.sound-toggle svg{width:18px;fill:currentColor}
.home-view{position:relative;z-index:2;min-height:calc(100vh - 101px);display:grid;grid-template-columns:minmax(300px,.74fr) minmax(620px,1.26fr);gap:clamp(36px,5vw,90px);align-items:center;padding:clamp(38px,6vh,78px) clamp(24px,5vw,82px) 70px}
.intro{align-self:center;max-width:680px;text-align:center;animation:rise .9s .15s ease-out both}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--gold-light);font-size:.93rem;margin:0 0 20px}
.eyebrow span{width:36px;height:1px;background:var(--gold)}
.intro h1{font-family:Georgia,"Times New Roman","Segoe UI",serif;font-size:clamp(2.45rem,3.75vw,4.75rem);line-height:1.18;font-weight:500;margin:0;letter-spacing:-.04em;text-wrap:balance}
.intro h1 br{display:block}
.intro h1>span{display:inline-block;white-space:nowrap}
.intro h1 em{font-style:normal;color:var(--gold-light);font-size:.73em}
.lead{font-size:clamp(.95rem,1.05vw,1.1rem);line-height:1.8;color:var(--muted);max-width:630px;margin:18px auto 0}
.platforms{display:grid;grid-template-columns:repeat(2,minmax(230px,310px));justify-content:center;gap:14px;align-self:center}
.platform{--card-accent:var(--gold);--card-accent-soft:rgba(212,173,98,.18);position:relative;isolation:isolate;min-height:245px;padding:18px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(145deg,rgba(8,66,57,.8),rgba(3,35,32,.75));border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(13px);overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 48px rgba(0,0,0,.08);transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s,filter .4s;animation:rise .8s var(--delay) ease-out both}
.platform>*{position:relative;z-index:2}
.platform:before{content:"";position:absolute;z-index:0;inset:auto -50% -80% 20%;height:170%;background:radial-gradient(circle,var(--card-accent-soft),transparent 65%);opacity:.42;transition:.45s}
.platform:after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;border-top:3px solid var(--card-accent);background:linear-gradient(115deg,transparent 0 72%,var(--card-accent-soft) 72% 72.5%,transparent 72.5% 78%,var(--card-accent-soft) 78% 78.4%,transparent 78.4%);opacity:.82}
.platform:hover,.platform:focus-visible{transform:translateY(-7px);border-color:color-mix(in srgb,var(--card-accent) 68%,white);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 60px rgba(0,0,0,.24),0 0 34px var(--card-accent-soft);filter:saturate(1.08) brightness(1.05);outline:none}
.platform:hover:before,.platform:focus-visible:before{opacity:1}
.platform-places{--card-accent:#60d7ba;--card-accent-soft:rgba(68,198,167,.2);background:radial-gradient(circle at 88% 14%,rgba(74,199,172,.2),transparent 34%),radial-gradient(circle at 12% 96%,rgba(218,177,86,.13),transparent 38%),linear-gradient(145deg,rgba(6,78,66,.9),rgba(3,37,34,.82))}
.platform-people{--card-accent:#efc768;--card-accent-soft:rgba(239,199,104,.2);background:radial-gradient(circle at 84% 17%,rgba(239,199,104,.22),transparent 9%),radial-gradient(circle at 75% 24%,rgba(106,132,217,.22),transparent 38%),linear-gradient(145deg,rgba(15,38,78,.92),rgba(5,27,43,.88))}
.platform-fashion{--card-accent:#dfa75d;--card-accent-soft:rgba(205,111,82,.2);background:radial-gradient(circle at 86% 14%,rgba(221,163,88,.2),transparent 32%),radial-gradient(circle at 16% 92%,rgba(142,54,57,.26),transparent 42%),linear-gradient(145deg,rgba(89,36,37,.9),rgba(45,25,31,.88))}
.platform-store{--card-accent:#5bc6d4;--card-accent-soft:rgba(73,190,207,.2);background:radial-gradient(circle at 82% 18%,rgba(245,185,73,.22),transparent 28%),radial-gradient(circle at 15% 94%,rgba(58,184,205,.24),transparent 42%),linear-gradient(145deg,rgba(5,78,87,.91),rgba(5,40,49,.88))}
.platform-no{position:absolute;top:20px;left:22px;font:400 .75rem Georgia,serif;color:rgba(247,241,223,.46);letter-spacing:.18em}
.platform-icon{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold-light)}
.platform-icon svg{width:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.platform-logo{width:96px;height:76px;display:grid;place-items:center;overflow:hidden;margin:0 auto}
.platform-logo img{display:block;width:100%;height:100%;object-fit:contain}
.platform-logo-dark{border-radius:13px;box-shadow:0 9px 28px rgba(0,0,0,.24)}
.platform-logo-light{background:#fff;border-radius:13px;padding:5px;box-shadow:0 9px 28px rgba(0,0,0,.2)}
.platform-store .platform-logo{width:104px;height:76px;padding:3px;border:1px solid rgba(255,255,255,.82);box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 22px rgba(91,198,212,.2)}
.platform-store .platform-copy .store-name{display:block;color:#fff;font-size:1.55rem;font-weight:700;line-height:1.25;white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.platform-copy{display:block;margin-top:13px;text-align:center}
.platform-copy small{display:block;color:var(--gold-light);font-size:.76rem;margin-bottom:9px}
.platform-copy strong{display:block;font-family:Georgia,"Times New Roman","Segoe UI",serif;font-size:clamp(1.12rem,1.3vw,1.4rem);font-weight:500;line-height:1.35}
.platform-copy>span{display:block;color:rgba(247,241,223,.58);font-size:.78rem;margin-top:8px}
.platform-arrow{position:absolute;bottom:17px;left:17px;width:29px;height:29px;border:1px solid color-mix(in srgb,var(--card-accent) 46%,transparent);border-radius:50%;display:grid;place-items:center;color:var(--card-accent);transition:.4s}
.platform:hover .platform-arrow{background:var(--card-accent);border-color:var(--card-accent);color:var(--green-deep);transform:rotate(-45deg)}
.footer-line{position:absolute;bottom:22px;right:clamp(24px,5vw,82px);left:clamp(24px,5vw,82px);display:flex;justify-content:space-between;color:rgba(247,241,223,.45);font-size:.72rem}
.scroll-cue{display:flex;align-items:center;gap:9px}
.scroll-cue i{width:30px;height:1px;background:var(--gold)}
.detail-view{position:relative;z-index:3;min-height:calc(100vh - 101px);padding:clamp(34px,6vw,90px);display:grid;place-items:center}
.detail-view[hidden]{display:none}
.back-link{position:absolute;top:30px;right:clamp(24px,5vw,82px);display:flex;gap:10px;align-items:center;color:var(--muted);font-size:.9rem}
.back-link span{color:var(--gold);font-size:1.2rem}
.detail-card{position:relative;width:min(760px,92vw);padding:clamp(38px,7vw,78px);text-align:center;background:linear-gradient(145deg,rgba(5,60,52,.9),rgba(2,28,26,.9));border:1px solid rgba(242,217,155,.33);backdrop-filter:blur(20px);box-shadow:0 28px 90px rgba(0,0,0,.32);animation:rise .7s ease-out both}
.detail-card:before,.detail-card:after{content:"";position:absolute;width:65px;height:65px;border-color:var(--gold);opacity:.6}
.detail-card:before{top:15px;right:15px;border-top:1px solid;border-right:1px solid}
.detail-card:after{bottom:15px;left:15px;border-bottom:1px solid;border-left:1px solid}
.detail-index{position:absolute;top:25px;left:30px;color:rgba(247,241,223,.3);font:1rem Georgia,serif;letter-spacing:.2em}
.detail-icon{width:76px;height:76px;border:1px solid var(--gold);border-radius:50%;margin:0 auto 24px;display:grid;place-items:center;color:var(--gold-light)}
.detail-icon svg{width:38px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.store-detail-logo{width:132px;height:132px;margin:0 auto 18px;padding:5px;display:grid;place-items:center;overflow:hidden;background:#fff;border:1px solid rgba(242,217,155,.5);border-radius:18px;box-shadow:0 14px 38px rgba(0,0,0,.3)}
.store-detail-logo img{display:block;width:100%;height:100%;object-fit:contain}
.store-detail-card{background:radial-gradient(circle at 78% 12%,rgba(245,185,73,.18),transparent 30%),radial-gradient(circle at 13% 90%,rgba(58,184,205,.2),transparent 40%),linear-gradient(145deg,rgba(5,78,87,.94),rgba(5,35,43,.94))}
.detail-kicker{color:var(--gold-light);font-size:.9rem;margin:0 0 14px}
.detail-card h1{font-family:Georgia,"Times New Roman","Segoe UI",serif;font-size:clamp(2.35rem,5vw,4.5rem);font-weight:500;line-height:1.25;margin:0 0 20px}
.detail-card>p:not(.detail-kicker){font-size:1.05rem;line-height:2;color:var(--muted);max-width:570px;margin:0 auto}
.detail-actions{margin-top:35px;display:flex;flex-direction:column;align-items:center;gap:14px}
.enter-button{min-width:210px;padding:15px 23px;background:var(--gold);color:var(--green-deep);display:flex;align-items:center;justify-content:space-between;gap:22px;font-weight:700;transition:.3s}
.enter-button:hover{background:var(--gold-light);transform:translateY(-2px)}
.detail-actions small{color:rgba(247,241,223,.45);font-size:.75rem}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes sceneIn{from{opacity:0;transform:scale(1.09)}to{opacity:1;transform:scale(1.02)}}
@media(max-width:1050px){
  .home-view{grid-template-columns:1fr;align-items:start;padding-top:52px}
  .intro{max-width:760px;margin-inline:auto}.intro h1{font-size:clamp(2.4rem,6vw,4rem)}
  .platforms{width:100%;grid-template-columns:repeat(2,minmax(230px,310px))}.footer-line{position:static;grid-column:1;margin-top:10px}
}
@media(max-width:670px){
  .topbar{padding:14px 20px}.brand-logo-image{width:48px;height:58px}.brand strong{font-size:.88rem}.brand small{font-size:.5rem}
  .saudi-label{display:none}.home-view{padding:38px 18px 45px;gap:34px}.intro h1{font-size:clamp(2rem,9vw,2.75rem)}.lead{font-size:.92rem;line-height:1.75}
  .platforms{grid-template-columns:1fr}.platform{width:100%;min-height:240px}.footer-line{display:none}
  .detail-view{padding:80px 17px 30px}.detail-card{padding:55px 25px 42px}.detail-card h1{font-size:2.4rem}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}