@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&family=Inter:wght@400;600;800&display=swap');
#hoot3d{position:relative;overflow-x:clip;text-align:start;--navy:#06202E;--navy2:#0B1F2C;--navy3:#0C2431;--gold:#F2B23A;--green:#4FB864;--blue:#3B8FD9;--ink:#E6EEF1;--mute:#9FB0BA;--line:rgba(230,238,241,.14);--glass:rgba(11,31,44,.55);--f:'Tajawal','Inter',system-ui,sans-serif}
#hoot3d *{box-sizing:border-box;margin:0;padding:0}
#hoot3d{background:var(--navy);color:var(--ink);font-family:var(--f);-webkit-font-smoothing:antialiased}
#hoot3d[lang="en"]{font-family:'Inter','Tajawal',system-ui,sans-serif}
#hoot3d .stage{min-height:115vh;display:flex;align-items:center;padding:110px clamp(18px,6vw,90px) 60px}
#hoot3d .stage > .wrap{width:100%;max-width:1180px;margin-inline:auto}
#hoot3d .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.82rem;font-weight:700;color:var(--gold);letter-spacing:.14em;text-transform:uppercase}
#hoot3d .eyebrow::before{content:"";width:34px;height:2px;background:var(--gold)}
#hoot3d h1,#hoot3d h2,#hoot3d h3{font-weight:800;line-height:1.25;color:var(--ink);font-family:inherit}
#hoot3d h1{font-size:clamp(2.2rem,5.4vw,4.4rem);margin:18px 0 22px;max-width:15ch}
#hoot3d h1 em{font-style:normal;color:var(--gold)}
#hoot3d h2{font-size:clamp(1.7rem,3.6vw,2.9rem);margin:14px 0}
#hoot3d p{margin:0}
#hoot3d .lead{font-size:clamp(1rem,1.5vw,1.2rem);line-height:2;color:#cfdce2;max-width:62ch}
#hoot3d .glass{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
#hoot3d .rv{opacity:0;transform:translateY(40px) rotateX(12deg);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
#hoot3d .rv.in{opacity:1;transform:none}
#hoot3d .rv.d1{transition-delay:.12s}#hoot3d .rv.d2{transition-delay:.24s}#hoot3d .rv.d3{transition-delay:.36s}
#hoot3d .intro-card{padding:clamp(22px,3vw,38px);max-width:760px;perspective:1000px}
#hoot3d .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
#hoot3d .chip{padding:8px 16px;border-radius:999px;border:1px solid var(--line);font-size:.85rem;color:var(--ink);background:rgba(255,255,255,.04)}
#hoot3d .chip.g{border-color:rgba(242,178,58,.5);color:var(--gold)}
#hoot3d .hint{margin-top:42px;display:flex;align-items:center;gap:12px;color:var(--mute);font-size:.85rem}
#hoot3d .mouse{width:22px;height:34px;border:2px solid var(--mute);border-radius:12px;position:relative}
#hoot3d .mouse::after{content:"";position:absolute;top:6px;left:50%;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--gold);animation:h3d-sc 1.6s infinite}
@keyframes h3d-sc{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(12px)}}
@keyframes h3d-pulse{70%{box-shadow:0 0 0 18px rgba(79,184,100,0)}100%{box-shadow:0 0 0 0 rgba(79,184,100,0)}}
#hoot3d .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px;perspective:1200px}
#hoot3d .stat{padding:34px 26px;position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .25s ease-out,border-color .3s,opacity .9s ease;will-change:transform}
#hoot3d .stat:hover{border-color:rgba(242,178,58,.55)}
#hoot3d .stat::before{content:"";position:absolute;inset-inline-start:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(242,178,58,.22),transparent 70%)}
#hoot3d .stat .num{font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(2.6rem,5vw,4rem);line-height:1;color:var(--gold);direction:ltr;display:inline-block;transform:translateZ(40px)}
#hoot3d .stat .num sup{font-size:.45em;color:var(--ink);margin-inline-start:4px;vertical-align:top;position:relative;top:.2em}
#hoot3d .stat h3{margin:14px 0 8px;font-size:1.15rem;transform:translateZ(24px)}
#hoot3d .stat p{color:var(--mute);line-height:1.9;font-size:.92rem;transform:translateZ(14px)}
#hoot3d .bar{height:5px;border-radius:5px;background:rgba(255,255,255,.08);margin-top:18px;overflow:hidden}
#hoot3d .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--gold));border-radius:5px;transition:width 1.8s cubic-bezier(.2,.8,.2,1)}
#hoot3d .in .bar i{width:var(--w)}
#hoot3d .loc{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:stretch;margin-top:30px}
#hoot3d .loc .glass{padding:clamp(22px,3vw,36px)}
#hoot3d .hq{display:flex;align-items:center;gap:16px;margin:6px 0 18px}
#hoot3d .pin{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--green),#2E9B55);box-shadow:0 0 0 0 rgba(79,184,100,.6);animation:h3d-pulse 2.2s infinite}
#hoot3d .hq b{font-size:1.25rem;display:block}
#hoot3d .hq span{color:var(--mute);font-size:.9rem}
#hoot3d .cities{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
#hoot3d .city{padding:12px 6px;text-align:center;border-radius:14px;border:1px solid var(--line);font-size:.9rem;background:rgba(255,255,255,.03);transition:.25s}
#hoot3d .city:hover{transform:translateY(-4px) translateZ(20px);border-color:var(--gold);color:var(--gold)}
#hoot3d .city.hqc{background:rgba(79,184,100,.15);border-color:var(--green);color:#9be9ab;font-weight:700}
#hoot3d .arms{display:flex;flex-direction:column;gap:14px}
#hoot3d .arm{padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
#hoot3d .arm b{display:block;margin-bottom:4px;color:var(--gold)}
#hoot3d .arm span{color:var(--mute);font-size:.9rem;line-height:1.8}
#hoot3d .brands{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#hoot3d .brands em{font-style:normal;font-family:'Inter',sans-serif;font-size:.78rem;padding:5px 12px;border-radius:8px;background:rgba(59,143,217,.14);color:#86c3f5;border:1px solid rgba(59,143,217,.3)}
#hoot3d .cv{position:sticky;top:0;height:100vh;margin-bottom:-100vh;z-index:0;pointer-events:none}
#hoot3d canvas{width:100%;height:100%;display:block;background:radial-gradient(ellipse at 50% 40%,#0C2431 0%,#06202E 60%,#04141d 100%)}
#hoot3d .vg{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(4,20,29,.75) 100%)}
#hoot3d .lang{position:absolute;top:84px;inset-inline-end:clamp(16px,4vw,48px);z-index:9;border:1px solid var(--line);background:rgba(6,32,46,.7);color:var(--ink);padding:8px 16px;border-radius:999px;cursor:pointer;font:inherit;font-weight:700;font-size:.85rem}
#hoot3d .lang:hover{border-color:var(--gold);color:var(--gold)}
@media (max-width:860px){#hoot3d .stats{grid-template-columns:1fr}#hoot3d .loc{grid-template-columns:1fr}#hoot3d .cities{grid-template-columns:repeat(2,1fr)}#hoot3d .stage{min-height:100vh;padding-top:100px}}
@media (prefers-reduced-motion:reduce){#hoot3d .rv{transition:none;opacity:1;transform:none}#hoot3d .pin,#hoot3d .mouse::after{animation:none}}