/* ==========================================================================
   LOOK Social Studio LLC — V2 Product Stage site
   Pure static. No external fonts/libs. LOOK blue base; green = Community
   Care only; orange = Find It & Price only; yellow = LOOK Bus only;
   red = native brand/call-end only. No purple in the UI.
   ========================================================================== */

:root{
  --blue:#2fa9e8;
  --blue-strong:#1d92d2;
  --cyan:#4bc3f7;
  --ink:#0f172a;
  --muted:#475569;
  --green:#22c07a;   /* Community Care only */
  --orange:#ff9e18;  /* Find It & Price only */
  --yellow:#f6b60d;  /* LOOK Bus only */
  --yellow-ink:#8a6500;
  --red:#e8392e;     /* logo / call-end only */
  --teal:#22b8cf;
  --amber:#f59e0b;

  --line:#e6edf4;
  --bg:#ffffff;
  --bg-soft:#f6fafd;

  --radius-lg:26px;
  --radius-md:20px;
  --shadow-soft:0 24px 60px -24px rgba(15,23,42,.14);
  --shadow-card:0 12px 34px -14px rgba(15,23,42,.12);
  --ease-out:cubic-bezier(.2,.7,.2,1);

  --header-h:76px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Tahoma,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  font-size:16px;
  overflow-x:clip;
}
img{display:block;max-width:100%}
a{color:var(--blue-strong);text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid var(--blue-strong);outline-offset:3px;border-radius:8px}

.skip-link{
  position:fixed;top:-60px;inset-inline-start:16px;z-index:200;
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;
  transition:top .2s;
}
.skip-link:focus-visible{top:12px}

.wrap{width:min(1140px,100% - 40px);margin-inline:auto}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* ---------- Type scale ---------- */
h1,h2,h3{letter-spacing:-.035em;line-height:1.12;font-weight:800}
h2{font-size:clamp(2rem,4.6vw,3.4rem)}
h3{font-size:clamp(1.15rem,2vw,1.45rem);letter-spacing:-.02em}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{letter-spacing:0}
.lead{
  font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted);
  max-width:640px;margin-top:18px;
}
.scene{padding:clamp(90px,12vh,150px) 0;position:relative;overflow-x:clip}
/* Bottom safe padding so the floating switcher pill never hides content */
.story .scene,.bus-story{padding-bottom:calc(clamp(90px,12vh,150px) + 90px)}
.scene-kicker{font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}
.k-blue{color:var(--blue-strong)} .k-orange{color:var(--orange)}
.k-green{color:var(--green)} .k-teal{color:var(--teal)} .k-amber{color:var(--amber)}
.k-yellow{color:var(--yellow-ink)}

/* ---------- Reveal system ---------- */
.reveal{
  opacity:0;transform:translateY(30px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
  transition-delay:calc(var(--i,0)*90ms);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none}

/* ---------- Cards ---------- */
.glass-card,.mini-card{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
}

/* ==========================================================================
   HEADER — sticky glass bar, shrinks on scroll
   ========================================================================== */
.site-header{
  position:fixed;top:0;inset-inline:0;z-index:100;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.site-header.shrunk{
  background:rgba(255,255,255,.92);
  border-color:var(--line);
  box-shadow:0 10px 30px -16px rgba(15,23,42,.18);
}
.header-bar{
  width:min(1240px,100% - 32px);margin-inline:auto;
  display:flex;align-items:center;gap:26px;
  height:var(--header-h);
  transition:height .35s var(--ease-out);
}
.site-header.shrunk .header-bar{height:56px}
.h-logo{display:flex;align-items:center;min-height:44px}
.h-logo img{height:30px;width:auto;transition:height .35s var(--ease-out)}
.site-header.shrunk .h-logo img{height:24px}
.h-links{display:flex;gap:4px;margin-inline-start:auto}
.h-links a{
  color:var(--muted);font-weight:600;font-size:.92rem;
  padding:10px 14px;min-height:44px;display:inline-flex;align-items:center;
  border-radius:999px;transition:color .2s,background .2s;
}
.h-links a:hover{color:var(--ink);background:var(--bg-soft)}
.h-actions{display:flex;align-items:center;gap:14px}
.lang-pill{
  display:inline-flex;align-items:center;gap:2px;
  border:1.5px solid var(--line);border-radius:999px;padding:4px;
  background:#fff;box-shadow:var(--shadow-card);
}
.lang-pill button{
  border:0;background:transparent;color:var(--muted);
  font-weight:800;font-size:.82rem;letter-spacing:.04em;
  padding:7px 13px;border-radius:999px;min-height:36px;
  transition:background .25s,color .25s;
}
.lang-pill button.on{
  background:linear-gradient(120deg,var(--blue),var(--blue-strong));color:#fff;
}
.lang-sep{color:#c6d6e4;font-size:.8rem}
.h-cta{
  display:inline-flex;align-items:center;min-height:44px;
  padding:10px 20px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(120deg,var(--blue),var(--blue-strong));
  color:#fff;font-weight:700;font-size:.92rem;
  box-shadow:0 8px 20px -8px rgba(29,146,210,.55);
  transition:transform .25s var(--ease-out),box-shadow .25s;
}
.h-cta:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(29,146,210,.6)}

/* ==========================================================================
   HERO = PRODUCT STAGE
   ========================================================================== */
.hero{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--header-h) + 34px) 0 70px;
  overflow:hidden;
}

/* Layered background: video + gradient skyline fallback + light streaks */
.hero-bg{position:absolute;inset:-8%;z-index:0;will-change:transform;
  transform:translate(calc(var(--mx,0)*-30px),calc(var(--my,0)*-20px + var(--bgY,0px)));
  transition:transform .25s ease-out;
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.55;
}
.hero-video.video-missing{display:none}
.hero-sky{
  position:absolute;inset:0;
  background:
    radial-gradient(1100px 560px at 85% -12%,rgba(75,195,247,.22),transparent 62%),
    radial-gradient(900px 520px at 6% 2%,rgba(47,169,232,.16),transparent 58%),
    linear-gradient(180deg,#eaf6fe 0%,#f6fafd 52%,#ffffff 100%);
}
.hero-video:not(.video-missing) + .hero-sky{opacity:.35}
.streak{
  position:absolute;width:340px;height:2px;border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(75,195,247,.55),transparent);
  filter:blur(.5px);
  animation:streak-drift 9s ease-in-out infinite;
}
.st1{top:22%;left:12%;rotate:-14deg}
.st2{top:48%;left:64%;rotate:-14deg;animation-delay:-3s;width:260px}
.st3{top:70%;left:30%;rotate:-14deg;animation-delay:-6s;width:420px;opacity:.7}
@keyframes streak-drift{
  0%,100%{transform:translateX(0);opacity:.5}
  50%{transform:translateX(70px);opacity:1}
}

.hero-inner{position:relative;z-index:2;text-align:center;padding-inline:20px}
.hero-eyebrow{
  font-size:clamp(.8rem,1.1vw,.95rem);font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;color:var(--blue-strong);margin-bottom:14px;
}
.hero-title{
  font-size:clamp(1.7rem,3.6vw,3.1rem);letter-spacing:-.03em;
  max-width:840px;margin-inline:auto;
}
[dir="rtl"] .hero-title{letter-spacing:0}
.hero-intro{
  max-width:62ch;margin:16px auto 0;
  font-size:clamp(.98rem,1.4vw,1.15rem);font-weight:600;line-height:1.65;
  color:var(--ink);opacity:.78;
}

/* The stage: four very large panels */
.stage{
  position:relative;z-index:2;
  margin-top:clamp(28px,4vh,54px);
  width:min(1260px,100% - 48px);
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,26px);
  align-items:stretch;
  will-change:transform;
  transform:translate(calc(var(--mx,0)*14px),calc(var(--my,0)*10px + var(--stageY,0px)));
  transition:transform .25s ease-out;
}
.stage-panel{
  position:relative;display:flex;flex-direction:column;
  border-radius:32px;padding:clamp(20px,2.4vw,32px);
  background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  color:var(--ink);
  min-height:min(58vh,600px);
  animation:panel-in .9s var(--ease-out) backwards;
  animation-delay:calc(var(--i,0)*140ms);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.stage-panel:hover{transform:translateY(-8px);box-shadow:var(--shadow-soft)}
@keyframes panel-in{
  from{opacity:0;transform:translateY(64px) scale(.92)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.panel-visual{
  flex:1;display:flex;align-items:center;justify-content:center;
  min-height:0;padding-block:10px;
  animation:panel-float 6.5s ease-in-out infinite;
  animation-delay:calc(var(--phase,0)*1s);
}
@keyframes panel-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.panel-foot{display:flex;flex-direction:column;gap:5px;text-align:center}
.panel-foot strong{font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:-.02em}
.panel-foot em{font-style:normal;color:var(--muted);font-size:clamp(.9rem,1.1vw,1.02rem)}
.panel-url{
  margin-top:8px;align-self:center;font-weight:800;font-size:.88rem;
  color:var(--blue-strong);
  border:1.5px solid rgba(47,169,232,.4);border-radius:999px;padding:7px 18px;
}

/* Platform — selected, blue rim glow, slightly larger & forward */
.panel-platform{
  border:2px solid var(--blue);
  transform:scale(1.045);
  z-index:2;
  background:linear-gradient(180deg,#ffffff 0%,#f2f9fe 100%);
}
.panel-platform:hover{transform:scale(1.045) translateY(-8px)}
.panel-platform .panel-visual img{width:min(58%,260px);height:auto}
.panel-glow{
  position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 7px rgba(47,169,232,.16),0 34px 70px -24px rgba(29,146,210,.5);
}
.sel-badge{
  position:absolute;top:16px;inset-inline-start:50%;translate:-50% 0;z-index:3;
  background:linear-gradient(120deg,var(--blue),var(--blue-strong));color:#fff;
  font-size:.78rem;font-weight:800;letter-spacing:.06em;
  padding:7px 18px;border-radius:999px;white-space:nowrap;
  box-shadow:0 10px 22px -8px rgba(29,146,210,.6);
}
[dir="rtl"] .sel-badge{translate:50% 0}

/* Bus — yellow accent only */
.panel-bus .panel-visual img{max-height:100%;height:min(40vh,400px);width:auto;border-radius:18px}
.panel-bus .panel-url{color:var(--yellow-ink);border-color:rgba(246,182,13,.55)}

/* Homtel — dark cinematic panel, neon logo large */
.panel-homtel{
  background:linear-gradient(165deg,#101a2e 0%,#0b1220 60%,#070c16 100%);
  border-color:#1b2740;color:#fff;
}
.panel-homtel .panel-visual img{height:min(40vh,380px);width:auto;max-width:92%;border-radius:20px;box-shadow:0 18px 40px -16px rgba(0,0,0,.55)}
.panel-homtel .panel-foot em{color:#93a5c4}
.panel-homtel:hover{box-shadow:0 34px 70px -26px rgba(4,10,22,.7)}
.panel-soon{position:absolute;top:16px;inset-inline-end:16px}

/* Goods — black/gold premium panel (gold #c9a24b, distinct from Bus yellow) */
.panel-goods{
  background:linear-gradient(165deg,#1a1408 0%,#100c05 55%,#080603 100%);
  border-color:#3a2f16;color:#fff;
}
.panel-goods .panel-visual img{width:100%;height:auto;max-height:min(40vh,380px);object-fit:contain;border-radius:20px;box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.panel-goods .panel-foot em{color:#c9b98a}
.panel-goods:hover{box-shadow:0 34px 70px -26px rgba(10,8,2,.75)}
.panel-goods .store-btn:hover{border-color:rgba(201,162,75,.6);color:#c9a24b}
.sw-goods .sw-dot{background:#c9a24b}

/* soon chip (shared) */
.soon-chip{
  display:inline-flex;align-items:center;
  font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#eaf2ff;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:7px 16px;
}
.soon-chip.sm{font-size:.7rem;padding:5px 12px}

/* Ghost "+" slots */
.ghost-row{
  position:relative;z-index:2;
  margin-top:clamp(18px,3vh,30px);
  display:flex;gap:18px;flex-wrap:wrap;justify-content:center;
}
.ghost-slot{
  display:flex;align-items:center;gap:14px;
  border:1.5px dashed #c6d6e4;border-radius:22px;
  background:rgba(246,250,253,.75);
  padding:16px 22px;min-width:min(300px,86vw);
  color:var(--ink);
}
.ghost-slot strong{font-size:.95rem}
.ghost-slot em{font-style:normal;color:var(--muted);font-size:.82rem;display:block}
.plus-icon{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:48px;height:48px;border-radius:14px;color:var(--blue-strong);
  background:#fff;border:1.5px dashed #c6d6e4;
}
.plus-icon.sm{width:40px;height:40px;border-radius:12px}

/* Scroll hint pill with animated chevrons */
.stage-hint{
  position:relative;z-index:2;
  margin-top:clamp(26px,4vh,44px);
  display:inline-flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:13px 26px;font-weight:700;font-size:.95rem;color:var(--ink);
  box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease-out),box-shadow .3s;
}
.stage-hint:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.chevrons{display:inline-flex;flex-direction:column;gap:0;color:var(--blue-strong)}
.chevrons svg{display:block;margin-top:-8px;animation:chev-bob 1.8s ease-in-out infinite}
.chevrons svg:first-child{margin-top:0}
.chevrons svg:last-child{animation-delay:.25s;opacity:.6}
@keyframes chev-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ==========================================================================
   PRODUCT SWITCHER BAR
   ========================================================================== */
.switcher{
  position:fixed;bottom:18px;inset-inline-start:50%;translate:-50% 0;z-index:90;
  display:flex;gap:4px;align-items:center;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:999px;padding:6px;
  box-shadow:0 16px 40px -14px rgba(15,23,42,.28);
  transform:translateY(calc(100% + 30px));
  transition:transform .5s var(--ease-out);
}
.switcher.show{transform:none}
.switcher.docked{transform:translateY(calc(100% + 30px))}
[dir="rtl"] .switcher{translate:50% 0}
.sw-item{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;min-height:44px;border-radius:999px;
  font-weight:700;font-size:.86rem;color:var(--muted);white-space:nowrap;
  transition:background .3s,color .3s;
}
.sw-item:hover{background:var(--bg-soft);color:var(--ink)}
.sw-item.active{background:rgba(47,169,232,.13);color:var(--blue-strong)}
.sw-dot{width:9px;height:9px;border-radius:50%;background:var(--blue)}
.sw-bus .sw-dot{background:var(--yellow)}
.sw-homtel .sw-dot{background:var(--ink)}
.sw-plus{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1.5px dashed #c6d6e4;color:var(--blue-strong);font-weight:800;font-size:.9rem;
  font-style:normal;
}

/* ==========================================================================
   SHARED · phone frame
   ========================================================================== */
.phone{
  width:min(320px,82vw);
  aspect-ratio:9/19;
  background:var(--ink);
  border-radius:46px;padding:11px;
  box-shadow:0 40px 80px -30px rgba(15,23,42,.4),inset 0 0 0 2px rgba(255,255,255,.08);
  position:relative;flex-shrink:0;
}
.phone-screen{
  position:relative;height:100%;border-radius:36px;overflow:hidden;
  background:#fff;display:flex;flex-direction:column;
}
.notch{
  position:absolute;top:10px;left:50%;translate:-50% 0;z-index:5;
  width:34%;height:20px;background:var(--ink);border-radius:12px;
}
.screen-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   PLATFORM a · INTRO — orbit chips + line drawing + sheet slide
   ========================================================================== */
.platform{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 100%)}
.orbit-stage{
  position:relative;margin-top:70px;
  max-width:1000px;margin-inline:auto;
  aspect-ratio:1000/640;
}
.orbit-lines{
  position:absolute;inset:0;width:100%;height:100%;
  stroke:var(--blue);stroke-width:2;opacity:.5;
}
.orbit-lines path{
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - var(--lines,0));
}
.hero-phone{margin-inline:auto;height:min(580px,92%);width:auto}
.hero-phone .chat-head{
  display:flex;align-items:center;gap:10px;
  padding:44px 16px 12px;border-bottom:1px solid var(--line);
}
.avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:#fff;font-weight:700;font-size:.8rem;
}
.avatar-sm{width:32px;height:32px;font-size:.7rem}
.chat-head-txt{display:flex;flex-direction:column;line-height:1.2;font-size:.9rem;text-align:start}
.chat-head-txt small{color:var(--muted);display:flex;align-items:center;gap:5px;font-size:.72rem}
.online-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);display:inline-block}
.chat-head-call{margin-inline-start:auto;color:var(--blue-strong)}
.chat-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.bubble{
  max-width:78%;padding:10px 14px;border-radius:18px;font-size:.85rem;line-height:1.4;
}
.bubble-in{background:var(--bg-soft);border:1px solid var(--line);border-bottom-left-radius:6px;align-self:flex-start}
.bubble-out{
  background:linear-gradient(120deg,var(--blue),var(--blue-strong));color:#fff;
  border-bottom-right-radius:6px;align-self:flex-end;
}
[dir="rtl"] .bubble-in{border-bottom-left-radius:18px;border-bottom-right-radius:6px}
[dir="rtl"] .bubble-out{border-bottom-right-radius:18px;border-bottom-left-radius:6px}
.composer{
  margin:auto 14px 14px;display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:999px;padding:10px 16px;
  color:#94a3b8;font-size:.85rem;background:#fff;
}
.composer svg{margin-inline-start:auto;color:var(--blue-strong)}

.together-sheet{
  position:absolute;inset-inline:8px;bottom:8px;z-index:4;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:24px;
  box-shadow:0 -18px 40px -18px rgba(15,23,42,.25);
  padding:12px 14px 14px;
  transform:translateY(calc((1 - var(--menu,0))*110%));
}
.sheet-handle{display:block;width:44px;height:4.5px;border-radius:99px;background:#dbe5ee;margin:0 auto 10px}
.sheet-title{font-weight:800;font-size:.95rem;letter-spacing:-.01em;margin-bottom:8px;text-align:start}
.t-row{
  display:flex;align-items:center;gap:10px;
  padding:8px;border-radius:14px;font-size:.85rem;font-weight:600;
}
.t-row + .t-row{margin-top:2px}
.t-ic{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:.9rem;
}
.ic-q{background:linear-gradient(135deg,var(--blue),var(--blue-strong))}
.ic-w{background:linear-gradient(135deg,var(--blue-strong),var(--cyan))}
.ic-f{background:linear-gradient(135deg,var(--teal),var(--cyan))}
.ic-s{background:linear-gradient(135deg,var(--amber),#fbbf24)}
.ic-c{background:linear-gradient(135deg,var(--green),var(--cyan))}

.orbit-chip{
  position:absolute;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:10px 16px;font-size:.85rem;font-weight:700;
  box-shadow:var(--shadow-card);white-space:nowrap;
}
.chip-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.d-blue{background:var(--blue)} .d-cyan{background:var(--cyan)}
.d-orange{background:var(--orange)} .d-teal{background:var(--teal)}
.d-green{background:var(--green)}
.oc1{left:8%;top:14%}  .oc2{left:29%;top:6%}   .oc3{left:62%;top:6%}   .oc4{left:80%;top:16%}
.oc5{left:5%;top:78%}   .oc6{left:26%;top:90%}  .oc7{left:64%;top:90%}  .oc8{left:79%;top:76%}

/* ==========================================================================
   PLATFORM b · SOCIAL LAYER
   ========================================================================== */
.trio{margin-top:70px;display:flex;justify-content:center;align-items:flex-start}
.trio .glass-card{
  padding:18px;width:min(300px,86vw);will-change:transform;
  transform:rotate(var(--rot,0deg)) translateY(calc(var(--rise,26px) + var(--py,0px)));
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
  transition-delay:calc(var(--i,0)*90ms);
}
.trio .glass-card.reveal{opacity:0}
.trio .glass-card.reveal.in{--rise:0px;opacity:1;transition:opacity .8s var(--ease-out)}
.trio .feed-card{--rot:-2.5deg;z-index:1}
.trio .reel-card{--rot:1.5deg;z-index:2;margin:34px -16px 0}
.trio .market-card{--rot:2.5deg;z-index:1}
.post-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.post-meta{display:flex;flex-direction:column;line-height:1.25;font-size:.85rem;text-align:start}
.post-meta small{color:var(--muted);font-size:.72rem}
.post-img{
  position:relative;overflow:hidden;
  height:230px;border-radius:16px;
  background:linear-gradient(140deg,var(--cyan),var(--blue) 55%,var(--blue-strong));
}
.post-actions{display:flex;gap:22px;margin-top:12px;color:var(--muted);font-size:.85rem}
.post-actions span{display:inline-flex;align-items:center;gap:7px}
.heart{transition:transform .3s}
.reveal.in .heart{animation:heart-pop .7s var(--ease-out) .45s both;color:var(--red);fill:var(--red)}
@keyframes heart-pop{0%{transform:scale(0)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
.reel-card{padding:14px}
.reel-media{
  position:relative;overflow:hidden;height:min(400px,52vh);border-radius:18px;
  background:linear-gradient(160deg,#0f172a,var(--blue-strong) 70%,var(--cyan));
  display:flex;align-items:center;justify-content:center;
}
.reel-media .zimg{filter:brightness(.82)}
.reel-play{position:relative;z-index:1;
  width:58px;height:58px;border-radius:50%;color:var(--ink);
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 28px -8px rgba(0,0,0,.4);
}
.reel-likes{
  position:absolute;bottom:12px;inset-inline-start:12px;
  display:inline-flex;align-items:center;gap:6px;
  color:#fff;font-size:.78rem;font-weight:700;
  background:rgba(15,23,42,.45);border-radius:999px;padding:6px 12px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.reel-cap{margin-top:12px;font-size:.88rem;font-weight:600;text-align:start}
.mini-title{font-size:.85rem;font-weight:700;color:var(--muted);margin-bottom:12px;text-align:start}
.market-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-item{display:flex;flex-direction:column;gap:6px}
.m-img{position:relative;overflow:hidden;height:74px;border-radius:12px;display:block;background:linear-gradient(135deg,#eaf4fb,#dceefb)}
.price-tag{
  align-self:flex-start;
  background:rgba(255,158,24,.14);color:#b26a00;
  font-size:.72rem;font-weight:800;padding:4px 9px;border-radius:8px;
}

/* ==========================================================================
   PLATFORM c · CALLS
   ========================================================================== */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.split-txt .lead{margin-top:16px}
.split-visual{display:flex;flex-direction:column;justify-content:center;align-items:center}
.call-chip{
  margin-top:28px;display:flex;gap:12px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:14px 18px;box-shadow:var(--shadow-card);
  font-size:.9rem;color:var(--muted);max-width:430px;text-align:start;
}
.call-chip svg{color:var(--blue-strong);flex-shrink:0;margin-top:2px}
.call-phone{transform:rotate(1.2deg)}
.call-controls{
  position:absolute;left:50%;translate:-50% 0;bottom:16px;z-index:6;
  display:flex;gap:10px;
  background:rgba(15,23,42,.55);border-radius:999px;padding:9px 12px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.cc-btn{
  width:44px;height:44px;border-radius:50%;border:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);color:#fff;
  transition:transform .25s var(--ease-out),background .25s;
}
.cc-btn:hover{transform:scale(1.1);background:rgba(255,255,255,.28)}
.cc-together{background:var(--blue-strong)}
.cc-end{background:var(--red)}
.cc-end:hover{background:var(--red)}

/* ==========================================================================
   PLATFORM d · TOGETHER TOOLS — pinned scrub sequence
   ========================================================================== */
.together{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 60%,var(--bg) 100%)}
.pin-wrap{height:500vh;position:relative}
.pin-stage{
  position:sticky;top:0;height:100vh;
  display:grid;grid-template-columns:auto 1fr;gap:clamp(30px,5vw,80px);
  align-items:center;justify-content:center;
  width:min(1140px,100% - 40px);margin-inline:auto;
  padding-top:20px;
}
.tt-head{padding:46px 18px 12px;text-align:center}
.tt-title{font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.tt-head small{color:var(--muted);font-size:.72rem}
.tt-rows{padding:6px 12px;display:flex;flex-direction:column;gap:6px}
.tt-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:16px;font-size:.86rem;font-weight:600;
  border:1px solid transparent;
  transition:opacity .4s,transform .4s var(--ease-out),background .4s,border-color .4s,box-shadow .4s;
}
.tt-live{
  margin-inline-start:auto;font-size:.6rem;font-weight:800;letter-spacing:.08em;
  color:#fff;border-radius:6px;padding:3px 7px;opacity:0;transform:scale(.6);
  transition:opacity .35s,transform .35s var(--ease-out);
}
.pin-wrap .tt-row{opacity:.38}
.pin-wrap[data-step="0"] .r1,.pin-wrap[data-step="1"] .r2,
.pin-wrap[data-step="2"] .r3,.pin-wrap[data-step="3"] .r4,
.pin-wrap[data-step="4"] .r5{
  opacity:1;transform:scale(1.03);background:#fff;border-color:var(--line);
  box-shadow:0 10px 26px -12px rgba(15,23,42,.18);
}
.pin-wrap[data-step="0"] .r1 .tt-live{background:var(--blue-strong);opacity:1;transform:scale(1)}
.pin-wrap[data-step="1"] .r2 .tt-live{background:var(--blue-strong);opacity:1;transform:scale(1)}
.pin-wrap[data-step="2"] .r3 .tt-live{background:var(--teal);opacity:1;transform:scale(1)}
.pin-wrap[data-step="3"] .r4 .tt-live{background:var(--amber);opacity:1;transform:scale(1)}
.pin-wrap[data-step="4"] .r5 .tt-live{background:var(--green);opacity:1;transform:scale(1)}

.panels{position:relative;min-height:670px;max-width:560px}
.panel{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;gap:16px;
  opacity:0;transform:translateY(26px);pointer-events:none;
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.pin-wrap[data-step="0"] .pl1,.pin-wrap[data-step="1"] .pl2,
.pin-wrap[data-step="2"] .pl3,.pin-wrap[data-step="3"] .pl4,
.pin-wrap[data-step="4"] .pl5{opacity:1;transform:none;pointer-events:auto}
.panel-kicker{font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.panel h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.panel-note{color:var(--muted);font-size:.9rem}
.mini-card{padding:18px}

/* Tool 01 · Questions */
.q-text{font-weight:700;font-size:.95rem;margin-bottom:14px}
.q-opt{display:flex;align-items:center;gap:10px;font-size:.85rem;padding:7px 0}
.q-key{
  width:26px;height:26px;border-radius:8px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-soft);border:1px solid var(--line);font-weight:800;font-size:.75rem;
  color:var(--blue-strong);
}
.q-label{min-width:110px;text-align:start}
.vote{flex:1;height:8px;border-radius:99px;background:var(--bg-soft);overflow:hidden}
.vote-fill{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease-out) .25s;
}
[dir="rtl"] .vote-fill{transform-origin:right}
.pin-wrap[data-step="0"] .vote-fill{transform:scaleX(var(--v,.5))}
.q-opt b{font-size:.78rem;color:var(--muted);width:34px;text-align:end}

/* Tool 02 · Watch Together */
.sync-pill{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  padding:7px 14px;border-radius:999px;
}
.sync-pill i{width:8px;height:8px;border-radius:50%;background:var(--cyan);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
.players{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mini-player{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:12px;box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;gap:9px;text-align:start;
}
.mp-screen{height:auto;aspect-ratio:4/5;border-radius:12px;display:block}
.mp-screen.s-a{background:linear-gradient(135deg,var(--blue-strong),var(--cyan))}
.mp-screen.s-b{background:linear-gradient(135deg,var(--blue),#7ed4fa)}
.mp-bar{height:6px;border-radius:99px;background:var(--bg-soft);overflow:hidden;display:block}
.mp-fill{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue-strong),var(--cyan));
  transform:scaleX(0);transform-origin:left;
}
[dir="rtl"] .mp-fill{transform-origin:right}
.pin-wrap[data-step="1"] .mp-fill{animation:sync-bar 7s linear infinite}
@keyframes sync-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mini-player small{color:var(--muted);font-size:.72rem;font-weight:600}

/* Tool 03 · Find Me */
.mini-map{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow-card);padding:10px;
}
.mini-map svg{width:100%;height:auto;display:block}
.fm-route{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s linear}
.pin-wrap[data-step="2"] .fm-route{stroke-dashoffset:calc(1 - var(--slp,0));transition:none}
.pin-wrap[data-step="3"] .fm-route,.pin-wrap[data-step="4"] .fm-route{stroke-dashoffset:0}
.mm-pin text{font-family:inherit}
.pin-b{animation:pin-bob 2.4s ease-in-out infinite}
@keyframes pin-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.mm-bubble{
  position:absolute;top:12px;inset-inline-end:14px;
  background:linear-gradient(120deg,var(--blue),var(--blue-strong));color:#fff;
  font-size:.78rem;font-weight:600;padding:8px 13px;border-radius:14px;border-bottom-right-radius:4px;
  box-shadow:0 10px 22px -10px rgba(29,146,210,.6);
}
[dir="rtl"] .mm-bubble{border-bottom-right-radius:14px;border-bottom-left-radius:4px}
.support-fig{
  position:relative;height:auto;min-height:170px;flex:1 1 auto;margin-top:2px;
  border-radius:18px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-card);
}

/* Tool 04 · Study Together */
.canvas-card{position:relative;min-height:230px}
.file-chips{display:flex;gap:8px;flex-wrap:wrap}
.file-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;
  font-size:.75rem;font-weight:600;padding:7px 11px;color:var(--muted);
}
.pen-stroke{width:100%;height:auto;margin-top:8px}
.pen-path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-out) .3s}
.pin-wrap[data-step="3"] .pen-path,.pin-wrap[data-step="4"] .pen-path{stroke-dashoffset:0}
.cursor{
  position:absolute;display:inline-flex;align-items:center;gap:4px;
  font-size:.68rem;font-weight:800;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:3px 8px;
  box-shadow:0 6px 14px -6px rgba(15,23,42,.25);
}
.cur-a{left:18%;bottom:26px;animation:cur-drift 3.4s ease-in-out infinite}
.cur-b{right:16%;bottom:52px;animation:cur-drift 3.4s ease-in-out .8s infinite}
@keyframes cur-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-8px)}}

/* Tool 05 · Community Care — single figure (the render already shows a phone) */
.care-layout{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.care-fig{
  position:relative;width:auto;height:min(460px,56vh);aspect-ratio:852/1846;border-radius:22px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-card);
}
.care-side{display:flex;flex-direction:column;gap:14px}
.place-card{text-align:start}
.place-head{display:flex;align-items:center;gap:9px;font-size:1rem}
.basket-pin{
  width:34px;height:34px;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(34,192,122,.14);color:var(--green);
}
.basket-pin.sm{width:24px;height:24px;border-radius:8px}
.place-meta{color:var(--muted);font-size:.85rem;margin-top:6px}
.send-chat-btn{
  margin-top:14px;align-self:stretch;min-height:44px;width:100%;
  border:0;border-radius:14px;padding:10px 18px;
  background:var(--green);color:#fff;font-weight:700;font-size:.9rem;
  transition:transform .25s var(--ease-out),box-shadow .25s;
}
.send-chat-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(34,192,122,.55)}
.mini-thread{
  border:1px dashed var(--line);border-radius:16px;padding:12px;
  background:var(--bg-soft);min-height:64px;
}
.thread-card{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:9px 13px;font-size:.8rem;font-weight:600;
  box-shadow:var(--shadow-card);
  transform:translateY(14px);opacity:0;
  transition:transform .6s var(--ease-out) .35s,opacity .6s .35s;
}
.pin-wrap[data-step="4"] .thread-card{transform:none;opacity:1}

.step-dots{
  position:absolute;bottom:96px;left:50%;translate:-50% 0;
  display:flex;gap:9px;
}
.sd{width:8px;height:8px;border-radius:99px;background:#cfdfec;transition:width .4s var(--ease-out),background .4s}
.pin-wrap[data-step="0"] .sd1,.pin-wrap[data-step="1"] .sd2,
.pin-wrap[data-step="2"] .sd3,.pin-wrap[data-step="3"] .sd4,
.pin-wrap[data-step="4"] .sd5{width:26px;background:var(--blue-strong)}

/* ==========================================================================
   PLATFORM e · FIND IT & PRICE (orange)
   ========================================================================== */
.investor-strip{
  margin-top:26px;padding:16px 20px;max-width:480px;text-align:start;
  border-inline-start:3px solid var(--orange);
  background:rgba(255,158,24,.07);
  border-radius:0 16px 16px 0;
  font-size:.92rem;color:var(--muted);
}
[dir="rtl"] .investor-strip{border-radius:16px 0 0 16px}
.help-card{margin-top:18px;padding:16px 20px;max-width:480px;font-size:.92rem;text-align:start}
.help-card p{color:var(--muted);margin-top:4px}
.search-card{padding:20px;max-width:480px;width:100%}
.search-bar{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:14px;padding:13px 16px;
  color:var(--muted);background:var(--bg-soft);min-height:48px;
  font-size:.95rem;
}
.type-target{font-weight:600;color:var(--ink)}
.caret{
  width:2px;height:18px;background:var(--blue-strong);display:inline-block;
  animation:caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.search-ph{font-size:.92rem}
.result-list{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px}
.result-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  font-size:.88rem;background:#fff;
}
.r-name{font-weight:700}
.r-near{color:var(--muted);font-size:.78rem;display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto}
.avail-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);display:inline-block}

/* ==========================================================================
   PLATFORM f · FIND YOUR MEDICINE
   ========================================================================== */
.medicine{background:var(--bg-soft)}
.ar-name{
  font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:0;
  color:var(--blue-strong);margin-top:10px;
}
.pill{font-size:.72rem;font-weight:800;padding:5px 12px;border-radius:999px;white-space:nowrap}
.pill-ok{background:rgba(47,169,232,.14);color:#1d7fb8}
.pill-off{background:#e2e8f0;color:#48586b}
.primary-btn{
  margin-top:16px;width:100%;min-height:48px;
  border:0;border-radius:14px;padding:12px 20px;
  background:linear-gradient(120deg,var(--blue),var(--blue-strong));
  color:#fff;font-weight:700;font-size:.95rem;
  box-shadow:0 12px 26px -12px rgba(29,146,210,.55);
  transition:transform .25s var(--ease-out),box-shadow .25s;
}
.primary-btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(29,146,210,.6)}
.safety-line{
  margin-top:26px;font-size:.78rem;color:var(--muted);max-width:460px;line-height:1.6;
  border-top:1px solid var(--line);padding-top:16px;
}

/* ==========================================================================
   PLATFORM g · OO — BEFORE YOU LEAVE
   ========================================================================== */
.oo-card{padding:22px;max-width:460px;width:100%}
.oo-head{display:flex;align-items:baseline;justify-content:space-between;font-size:1rem}
.oo-count{font-size:.82rem;font-weight:800;color:var(--blue-strong);font-variant-numeric:tabular-nums}
.oo-bar{height:8px;border-radius:99px;background:var(--bg-soft);margin:12px 0 16px;overflow:hidden}
.oo-fill{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-out);
}
[dir="rtl"] .oo-fill{transform-origin:right}
.oo-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.oo-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:12px;font-size:.92rem;font-weight:600;
  transition:background .3s,color .3s;
}
.oo-check{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid #cfdfec;color:#fff;background:#fff;
  transition:background .3s,border-color .3s;
}
.oo-check svg{transform:scale(0);transition:transform .35s var(--ease-out)}
.oo-item.done{background:var(--bg-soft);color:var(--muted)}
.oo-item.done .oo-check{background:var(--blue);border-color:var(--blue)}
.oo-item.done .oo-check svg{transform:scale(1);animation:check-pop .4s var(--ease-out)}
@keyframes check-pop{0%{transform:scale(0)}65%{transform:scale(1.35)}100%{transform:scale(1)}}
.oo-custom{border:1px dashed #c6d6e4;border-radius:12px;color:var(--muted)}

/* ==========================================================================
   PLATFORM h · GLOBAL / ARABIC SOUL
   ========================================================================== */
.global-grid{
  margin-top:60px;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,70px);align-items:center;text-align:start;
}
.dialect-chips{list-style:none;display:flex;flex-wrap:wrap;gap:12px}
.global-col{display:flex;flex-direction:column}
.global-col .dialect-chips{margin-top:22px}
.d-chip{
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:13px 22px;font-size:.95rem;font-weight:700;
  box-shadow:var(--shadow-card);
  min-height:44px;display:inline-flex;align-items:center;
  transition:box-shadow .4s,border-color .4s;
}
.d-chip.in{border-color:rgba(47,169,232,.5);box-shadow:0 0 0 4px rgba(47,169,232,.12),var(--shadow-card)}
.d-chip-more{border-style:dashed;color:var(--muted);box-shadow:none}
.flip-scene{perspective:1200px}
.flip-card{
  position:relative;width:min(400px,100%);height:250px;margin-inline:auto;
  transform-style:preserve-3d;
  transform:rotateY(calc(var(--flip,0)*180deg));
}
[dir="rtl"] .flip-card{transform:rotateY(calc((1 - var(--flip,0))*180deg))}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-back{transform:rotateY(180deg)}
.mini-chat{
  height:100%;background:#fff;border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow-card);padding:20px;
  display:flex;flex-direction:column;gap:12px;
}
.mc-head{font-size:.8rem;font-weight:800;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

/* ==========================================================================
   LOOK BUS STORY (teaser) — yellow accent
   ========================================================================== */
.bus-story{background:linear-gradient(180deg,#fffdf4 0%,#fff 70%)}
.bus-story h2{font-size:clamp(2.4rem,5vw,3.8rem)}
.bus-link{
  display:inline-flex;align-items:center;min-height:48px;margin-top:26px;
  padding:12px 26px;border-radius:999px;
  background:linear-gradient(120deg,var(--yellow),#fbd23e);
  color:#3a2c00;font-weight:800;font-size:.95rem;
  box-shadow:0 12px 26px -12px rgba(246,182,13,.55);
  transition:transform .25s var(--ease-out),box-shadow .25s;
}
.bus-link:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(246,182,13,.6)}
.bus-frame{
  background:var(--ink);border-radius:44px;padding:10px;
  box-shadow:0 40px 80px -30px rgba(15,23,42,.4),0 0 0 6px rgba(246,182,13,.18);
  width:min(300px,78vw);
}
.bus-frame img{border-radius:34px;width:100%;height:auto}

/* ==========================================================================
   LOOK HOMTEL (coming soon) — dark cinematic
   ========================================================================== */
.homtel-story{
  min-height:72vh;display:flex;align-items:center;justify-content:center;
  background:#070c16;color:#fff;overflow:hidden;
}
.homtel-bg{position:absolute;inset:0;z-index:0}
.homtel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.homtel-video.video-missing{display:none}
.homtel-fallback{
  position:absolute;inset:0;
  background:
    radial-gradient(900px 500px at 50% 110%,rgba(47,169,232,.16),transparent 60%),
    radial-gradient(700px 380px at 78% 8%,rgba(255,255,255,.05),transparent 55%),
    linear-gradient(180deg,#0b1220 0%,#070c16 55%,#04070e 100%);
}
.homtel-video:not(.video-missing) + .homtel-fallback{opacity:.4}
.homtel-inner{position:relative;z-index:2}
.homtel-kicker{color:#8fa3c8}
.homtel-logo{width:min(560px,84vw);height:auto;margin:22px auto 30px}
.homtel-story .soon-chip{margin-inline:auto;font-size:.9rem;padding:10px 24px}

/* ==========================================================================
   PRODUCT BRIEFS (Homtel / Goods) — large dark premium panels, one per
   product, shown only when that product is selected
   ========================================================================== */
.brief-story{background:#0b1220;color:#eef4fc;overflow:hidden;
  padding-bottom:calc(clamp(90px,12vh,150px) + 90px)}
.brief-goods{background:radial-gradient(900px 520px at 82% 0%,rgba(201,162,75,.14),transparent 60%),#0d0a04}
.brief-grid{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(32px,5vw,76px);align-items:center;
}
.brief-visual{position:relative;margin:0}
.brief-visual img{
  width:100%;height:auto;display:block;border-radius:22px;
  box-shadow:0 34px 80px -30px rgba(0,0,0,.65);
}
/* Homtel brief: full-width edge-to-edge cinematic video, content floats over a scrim */
.brief-homtel{
  position:relative;display:flex;align-items:center;
  min-height:max(88vh,620px);background:#070c16;
  padding-block:clamp(80px,12vh,140px) calc(clamp(90px,12vh,150px) + 90px);
}
.brief-homtel .homtel-video{opacity:.55}
.homtel-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(980px 540px at 50% 58%,rgba(4,7,14,.62),transparent 72%),
    linear-gradient(180deg,rgba(4,7,14,.6) 0%,rgba(4,7,14,.22) 34%,rgba(4,7,14,.3) 62%,rgba(4,7,14,.78) 100%);
}
.brief-overlay{position:relative;z-index:2;text-align:center}
.brief-overlay .homtel-logo{
  width:min(480px,82vw);height:auto;margin:0 auto;
  filter:drop-shadow(0 14px 44px rgba(0,0,0,.65));
}
.brief-overlay .soon-chip{display:inline-flex;margin:20px auto 0}
.brief-overlay .brief-kicker{margin-top:30px}
.brief-overlay h2{margin-top:10px}
.brief-overlay .brief-lead{
  margin-inline:auto;color:#e9eff9;max-width:60ch;
  text-shadow:0 2px 22px rgba(0,0,0,.6);
}
.brief-story .brief-overlay .store-wrap{justify-content:center;margin-top:28px}
.brief-chip{position:absolute;top:16px;inset-inline-end:16px}
.brief-goods .brief-chip{background:rgba(20,14,4,.72);color:#e8c97a;border-color:rgba(201,162,75,.45);backdrop-filter:blur(6px)}
.brief-kicker{margin-bottom:12px}
.brief-homtel .brief-kicker{color:#8fa3c8}
.brief-goods .brief-kicker{color:#c9a24b}
.brief-story h2{color:#fff}
.brief-lead{
  font-size:clamp(1.18rem,2vw,1.55rem);line-height:1.65;
  font-weight:600;color:#d7e1f0;margin-top:18px;max-width:56ch;
}
.brief-goods .brief-lead{color:#e6dcc4}
.brief-story .store-wrap{justify-content:flex-start}
@media (max-width:900px){
  .brief-grid{grid-template-columns:1fr;gap:32px}
  .brief-homtel .brief-visual img{max-width:min(300px,78vw)}
  .brief-story .store-wrap{justify-content:center}
  .brief-txt{text-align:center}
  .brief-txt .lead,.brief-lead{margin-inline:auto}
}

/* ==========================================================================
   FINALE
   ========================================================================== */
.finale{
  background:
    radial-gradient(800px 420px at 50% 0%,rgba(75,195,247,.12),transparent 60%),
    var(--bg);
  padding-bottom:110px;
}
.finale-line{font-size:clamp(1.7rem,4vw,3rem);font-weight:800;letter-spacing:-.035em;line-height:1.15}
[dir="rtl"] .finale-line{letter-spacing:0}
.finale-logo{width:150px;height:auto;margin:34px auto 0}
.finale-grid{
  margin:56px auto 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;max-width:980px;
}
.fin-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:18px;display:flex;flex-direction:column;gap:9px;align-items:flex-start;
  text-align:start;color:var(--ink);
  font-size:.9rem;box-shadow:var(--shadow-card);
  transition:transform .35s var(--ease-out),box-shadow .35s;
}
.fin-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.fin-card strong{font-size:.95rem}
.fin-card em{font-style:normal;color:var(--muted);font-size:.8rem}
.fin-thumb{
  height:132px;width:100%;display:flex;align-items:center;justify-content:center;
  background:var(--bg-soft);border-radius:12px;overflow:hidden;border:1px solid var(--line);
}
.fin-thumb img{max-height:112px;max-width:82%;width:auto}
.fin-thumb.dark{background:#0b1220;border-color:#0b1220}
.fin-thumb.dark img{max-height:112px;width:auto;border-radius:8px}
.fin-ghost{border-style:dashed;background:var(--bg-soft);box-shadow:none}
.fin-card .soon-chip{align-self:flex-start;color:var(--muted);background:#fff;border-color:var(--line)}
.ip-note{margin:64px auto 0;max-width:640px;font-size:.8rem;color:var(--muted);line-height:1.65}
.company-line{margin-top:18px;font-size:.9rem;color:var(--muted);font-weight:600}
.finale-company{
  max-width:66ch;margin:38px auto 0;
  font-size:clamp(1.02rem,1.6vw,1.28rem);font-weight:700;line-height:1.65;
  color:var(--ink);
}
.contact-link{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-weight:700}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{border-top:1px solid var(--line);padding:34px 0;background:var(--bg-soft)}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.88rem;color:var(--muted);
}
.footer-links{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.footer-links a{font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.footer-soon{font-size:.82rem}

/* ==========================================================================
   STACKED MODE — mobile (< 900px) and prefers-reduced-motion
   ========================================================================== */
html.stacked .pin-wrap{height:auto}
html.stacked .pin-stage{
  position:static;height:auto;
  display:flex;flex-direction:column;gap:44px;
  padding:20px 0 60px;
}
html.stacked .together-phone,.phone{width:min(320px,86vw)}
html.stacked .hero-phone{width:min(320px,86vw);height:auto;margin-inline:auto}
html.stacked .tt-row{opacity:1}
html.stacked .tt-live{display:none}
html.stacked .panels{min-height:0;max-width:none;display:flex;flex-direction:column;gap:36px}
html.stacked .panel{position:static;opacity:1;transform:none;pointer-events:auto}
/* portrait media in stacked flow: full phone scene, no top/bottom crop */
html.stacked .panel-fig,html.stacked .support-fig{flex:none;min-height:0;height:auto;aspect-ratio:941/1672}
html.stacked .players{grid-template-columns:1fr}
html.stacked .mp-screen{height:auto;aspect-ratio:941/1672}
html.stacked .care-fig{height:auto;max-width:min(280px,64vw)}
html.stacked .vote-fill{transform:scaleX(var(--v,.5))}
html.stacked .mp-fill{animation:sync-bar 7s linear infinite}
html.stacked .fm-route{stroke-dashoffset:0}
html.stacked .pen-path{stroke-dashoffset:0}
html.stacked .thread-card{transform:none;opacity:1}
html.stacked .step-dots{display:none}

html.stacked .orbit-stage{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;gap:22px}
html.stacked .orbit-lines{display:none}
html.stacked .orbit-chip{position:static}
html.stacked .hero-phone{grid-column:1 / -1;order:-1}
html.stacked .together-sheet{transform:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* ==========================================================================
   MARKETING IMAGE CROPS — zoomed overflow-hidden crops of founder assets
   Half crops: img is 200% wide, anchored to the visible side.
   Zoom crops: img fills the box, transform-origin picks the region.
   ========================================================================== */
.zimg{position:absolute;inset:0;height:100%;object-fit:cover;max-width:none}
.c-full{width:100%}
.c-half-l{width:200%;right:auto;left:0;object-position:left center}
.c-half-r{width:200%;left:auto;right:0;object-position:right center}
.c-feed{width:100%;transform:scale(4);transform-origin:29% 34%}
.c-reel{width:100%;transform:scale(2.6);transform-origin:52% 26%}
.c-tt{width:100%;transform:scale(3);transform-origin:49% 52%}
.mp-screen{position:relative;overflow:hidden}

.social-banner{
  position:relative;height:clamp(260px,36vw,430px);margin-top:44px;
  border-radius:26px;overflow:hidden;box-shadow:var(--shadow-soft);
}
.side-fig{
  position:relative;width:100%;max-width:480px;height:clamp(220px,26vw,320px);margin:0 auto 18px;
  border-radius:22px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-card);
}
/* Find It / Medicine: pre-cropped near-square halves — show the FULL frame, no crop */
.findit .side-fig,.medicine .side-fig{height:auto;aspect-ratio:836/941}
.panel-fig{position:relative;height:auto;min-height:200px;flex:1 1 auto;margin:10px 0 14px;border-radius:16px;overflow:hidden}

/* EN mode: hide Arabic-only decorative lines */
html[dir="ltr"] .only-ar{display:none}

/* ==========================================================================
   V3 · PRODUCT HUB ATMOSPHERIC BACKDROP (hero only)
   mkt-product-hub.webp carries baked-in link text that is NOT factual —
   it only ever appears heavily blurred behind the hero stage.
   ========================================================================== */
.hub-backdrop{
  position:absolute;inset:5% 0 -5%;z-index:0;overflow:hidden;
  filter:blur(22px) saturate(1.05) brightness(1.05);
  opacity:.4;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent);
}
.hub-backdrop img,.hub-backdrop video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   V3 · VIDEO LAYERS — hidden on missing file, static image carries on
   ========================================================================== */
.bg-video.video-missing{display:none}
.screen-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.tt-intro-fig{
  position:relative;width:auto;height:min(640px,74vh);aspect-ratio:851/1847;max-width:80vw;
  margin:46px auto 0;border-radius:30px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-soft);
}
.tt-intro-img,.tt-intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.finale-bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  /* gradient fallback — a missing vid-brand.mp4 never leaves an empty layer */
  background:linear-gradient(168deg,#e6f4fd 0%,#f7fbff 46%,#e9f2fb 100%);
}
.finale-video{width:100%;height:100%;object-fit:cover;opacity:.16}
.finale .wrap{position:relative;z-index:2}

/* ==========================================================================
   V3 · NEW MARKETING CROPS (portrait feature renders → slot-fitting crops)
   ========================================================================== */
.c-banner-feed{width:100%;object-position:50% 36%}
.c-feed2{width:100%;object-position:50% 62%}
.c-reel2{width:100%;object-position:50% 88%}
.c-ttmenu{width:100%;object-position:50% 64%}
.c-findme{width:100%;object-position:50% 45%}
.c-study2{width:100%;object-position:50% 66%}
.c-care{width:100%;object-position:50% 58%}

/* ==========================================================================
   V3 · STORE / LINK ICON ROWS + FLOATING TOAST PILL
   ========================================================================== */
.panel-hit{position:absolute;inset:0;z-index:1;border-radius:inherit}
.fin-card{position:relative}
.store-row{position:relative;z-index:2;display:inline-flex;gap:10px;justify-content:center}
.store-wrap{display:flex;justify-content:center;margin-top:20px}
.split-txt .store-wrap{justify-content:flex-start}
.stage-panel .store-row{display:flex;margin-top:12px}
.fin-card .store-row{margin-top:8px}
.store-btn{
  position:relative;
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);color:var(--ink);
  box-shadow:var(--shadow-card);cursor:pointer;
  transition:transform .25s var(--ease-out),border-color .25s,color .25s,box-shadow .25s;
}
/* "soon" dot — marks toast-bound (not yet live) store buttons */
.soon-dot{
  position:absolute;top:-2px;inset-inline-end:-2px;width:10px;height:10px;
  border-radius:50%;background:var(--amber);border:2px solid #fff;
  box-shadow:0 1px 4px rgba(15,23,42,.25);pointer-events:none;
}
.on-dark .soon-dot{border-color:rgba(15,23,42,.9)}
.store-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(47,169,232,.55);color:var(--blue-strong);
  box-shadow:0 12px 24px -10px rgba(29,146,210,.4);
}
.panel-bus .store-btn:hover,[data-store-for="bus"] .store-btn:hover{
  border-color:rgba(246,182,13,.6);color:var(--yellow-ink);
  box-shadow:0 12px 24px -10px rgba(246,182,13,.45);
}
.on-dark .store-btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.32);color:#fff;box-shadow:none}
.on-dark .store-btn:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.55);color:#fff}
.fin-card .store-btn{width:38px;height:38px;box-shadow:none}
.store-toast{
  position:absolute;bottom:calc(100% + 10px);left:50%;translate:-50% 0;z-index:30;
  transform:translateY(6px);opacity:0;pointer-events:none;white-space:nowrap;
  background:linear-gradient(120deg,rgba(47,169,232,.94),rgba(29,146,210,.94));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font-size:.82rem;font-weight:700;padding:9px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 14px 30px -12px rgba(29,146,210,.65);
  transition:opacity .25s var(--ease-out),transform .25s var(--ease-out);
}
.store-toast.show{opacity:1;transform:none}
[dir="rtl"] .store-toast{translate:50% 0}

/* ==========================================================================
   V3 · IN-SCENE MICRO-ANIMATIONS (transform/opacity only)
   ========================================================================== */
/* Chat scenes — bubbles appear one after another */
.hero-phone .bubble{opacity:0;transform:translateY(12px)}
.hero-phone.reveal.in .bubble{animation:bubble-pop .5s var(--ease-out) forwards}
.hero-phone.reveal.in .bubble-in{animation-delay:.55s}
.hero-phone.reveal.in .bubble-out{animation-delay:1.25s}
@keyframes bubble-pop{from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:none}}

/* Map scenes — location pin pulses + expanding rings (route draw exists) */
.mm-pin{transform-box:fill-box;transform-origin:center}
.pin-a{animation:pin-pulse 2.4s ease-in-out infinite}
@keyframes pin-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.pin-ring{opacity:0;transform-box:fill-box;transform-origin:center}
.pin-wrap[data-step="2"] .pin-ring,.pin-wrap[data-step="3"] .pin-ring,.pin-wrap[data-step="4"] .pin-ring,
html.stacked .pin-ring{animation:ring-expand 2.2s ease-out infinite}
.pin-wrap[data-step="2"] .ring-b,.pin-wrap[data-step="3"] .ring-b,.pin-wrap[data-step="4"] .ring-b,
html.stacked .ring-b{animation-delay:1.1s}
@keyframes ring-expand{0%{transform:scale(.7);opacity:.9}70%{opacity:.35}100%{transform:scale(2.1);opacity:0}}

/* Watch Together — synchronized live dots on both viewers (same phase) */
.mp-live{
  position:absolute;top:8px;inset-inline-start:8px;width:9px;height:9px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 0 3px rgba(75,195,247,.25);
  animation:pulse 1.6s ease-in-out infinite;
}

/* Find It & Price — card scale on hover, price tags pop with a bounce */
.search-card{
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),scale .3s var(--ease-out);
  transition-delay:calc(var(--i,0)*90ms),calc(var(--i,0)*90ms),0s;
}
.search-card.reveal.in:hover{scale:1.02}
.result-row .price-tag{opacity:0;transform:scale(.5)}
.result-row.reveal.in .price-tag{animation:tag-pop .5s var(--ease-out) .3s both}
@keyframes tag-pop{0%{opacity:0;transform:scale(.4)}55%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}

/* Find Your Medicine — request card flies to the pharmacies,
   then green "Available" badges appear one by one */
.med-card{position:relative}
.med-fly{
  position:absolute;top:26px;inset-inline-start:26px;z-index:5;
  width:52px;height:40px;border-radius:12px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(120deg,var(--blue),var(--blue-strong));
  box-shadow:0 12px 24px -10px rgba(29,146,210,.6);
  opacity:0;
}
.med-card.reveal.in .med-fly{animation:med-fly 2.4s var(--ease-out) .5s both}
@keyframes med-fly{
  0%{opacity:0;transform:translate(0,0) scale(.7)}
  12%{opacity:1;transform:translate(6px,4px) scale(1)}
  55%{opacity:1;transform:translate(120px,110px) scale(.95)}
  75%{opacity:1;transform:translate(140px,118px) scale(.85)}
  100%{opacity:0;transform:translate(148px,122px) scale(.7)}
}
[dir="rtl"] .med-card.reveal.in .med-fly{animation-name:med-fly-rtl}
@keyframes med-fly-rtl{
  0%{opacity:0;transform:translate(0,0) scale(.7)}
  12%{opacity:1;transform:translate(-6px,4px) scale(1)}
  55%{opacity:1;transform:translate(-120px,110px) scale(.95)}
  75%{opacity:1;transform:translate(-140px,118px) scale(.85)}
  100%{opacity:0;transform:translate(-148px,122px) scale(.7)}
}
.med-card .pill{opacity:0;transform:scale(.5)}
.med-card.reveal.in .result-row:nth-child(1) .pill-ok{animation:tag-pop .5s var(--ease-out) 2.2s both}
.med-card.reveal.in .result-row:nth-child(2) .pill-ok{animation:tag-pop .5s var(--ease-out) 2.6s both}
.med-card.reveal.in .pill-off{animation:tag-pop .5s var(--ease-out) 3s both}

/* OO — checklist items appear sequentially, then scrub checks them off */
.oo-card.reveal .oo-item{opacity:0;transform:translateY(10px)}
.oo-card.reveal.in .oo-item{animation:oo-item-in .45s var(--ease-out) both}
.oo-card.reveal.in .oo-item:nth-child(1){animation-delay:.15s}
.oo-card.reveal.in .oo-item:nth-child(2){animation-delay:.27s}
.oo-card.reveal.in .oo-item:nth-child(3){animation-delay:.39s}
.oo-card.reveal.in .oo-item:nth-child(4){animation-delay:.51s}
.oo-card.reveal.in .oo-item:nth-child(5){animation-delay:.63s}
.oo-card.reveal.in .oo-item:nth-child(6){animation-delay:.75s}
.oo-card.reveal.in .oo-item:nth-child(7){animation-delay:.87s}
.oo-card.reveal.in .oo-item:nth-child(8){animation-delay:.99s}
@keyframes oo-item-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width:1024px){
  .split{grid-template-columns:1fr;gap:48px}
  .split-txt{text-align:center}
  .split-txt .store-wrap{justify-content:center}
  .split-txt .lead,.investor-strip,.help-card,.safety-line{margin-inline:auto}
  .investor-strip,.call-chip,.help-card{text-align:start}
  .call-chip{margin-inline:auto}
  .search-card,.oo-card{margin-inline:auto}
  .flip-split .split-visual{order:-1}
  /* Medicine: kicker/H2/lead + the legal safety line must precede the
     interactive demo on every viewport (Find It never flips — heading first) */
  .medicine .flip-split .split-visual{order:0}
  .global-grid{grid-template-columns:1fr}
  .dialect-chips{justify-content:center}
}
@media (max-width:900px){
  /* Hero stage: panels stack full-width large, Platform leads */
  .stage{grid-template-columns:1fr;width:min(560px,100% - 40px)}
  .stage-panel{min-height:52vh}
  .panel-platform{order:-1;transform:none}
  .panel-platform:hover{transform:translateY(-8px)}
  .panel-bus .panel-visual img{height:min(32vh,320px)}
  .hero{padding-top:calc(var(--header-h) + 20px)}
  .trio{flex-direction:column;align-items:center;gap:22px}
  .trio .glass-card{transform:none;margin:0}
  .care-layout{grid-template-columns:1fr;justify-items:center}
  .care-side{width:100%;max-width:340px}
  .switcher{max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none}
  .switcher::-webkit-scrollbar{display:none}
}
@media (max-width:760px){
  .h-links{display:none}
  .header-bar{gap:14px}
  .h-actions{margin-inline-start:auto}
}
@media (max-width:560px){
  .scene{padding:80px 0}
  .story .scene,.bus-story{padding-bottom:calc(80px + 90px)}
  .phone{width:min(300px,84vw)}
  .h-cta{display:none}
  .lang-pill{margin-inline-start:auto}
  .stage-hint{font-size:.85rem;padding:12px 20px}
  .ghost-slot{min-width:min(300px,100%)}
  /* Switcher: all four items must fit ≤390px without scrolling */
  .switcher{gap:2px;padding:5px;max-width:calc(100vw - 16px)}
  .sw-item{padding:8px 8px;min-height:36px;font-size:.7rem;gap:5px}
  .sw-dot{width:7px;height:7px}
  .sw-plus{width:18px;height:18px;font-size:.78rem}
}

/* ==========================================================================
   REDUCED MOTION — final states, no autoplay, no scrub
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .stage-panel{animation:none;opacity:1;transform:none}
  .panel-visual{animation:none}
  .hero-bg,.stage{transform:none!important}
  .together-sheet{transform:none}
  .orbit-lines path{stroke-dashoffset:0}
  .flip-card{transform:rotateY(180deg)}
  [dir="rtl"] .flip-card{transform:rotateY(0deg)}
  .oo-fill{transition:none}
  .streak{display:none}
  /* V3 in-scene elements: static, fully visible end states */
  .hero-phone .bubble,.result-row .price-tag,.med-card .pill,
  .oo-card .oo-item{opacity:1!important;transform:none!important}
  .med-fly{display:none}
  .pin-ring{display:none}
  .hub-backdrop{display:none}
}