/* Futuristic top section (homepage only). Morning = light, Night = dark. */

/* ---------- night palette for the top section ---------- */
:root[data-theme="dark"] .future-top{
  --bg:#0C0E12;--box:#14171D;--card:#161A21;--fg:#F5F7FA;--muted:#A3AAB8;--line:#2A2F39;
  --orange-text:#FF6A4D;--tint:#3A1510;--glow:rgba(242,56,15,.42);--screen:#0D0F13;--bubble:#262B34;--bezel:#343A45;
  --dots:rgba(255,106,77,.35);--floor:rgba(242,56,15,.28);--node:rgba(22,26,33,.85);--edge:#353B47;
  --headline-glow:0 0 28px rgba(242,56,15,.55);--head-bg:rgba(12,14,18,.82)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .future-top{
  --bg:#0C0E12;--box:#14171D;--card:#161A21;--fg:#F5F7FA;--muted:#A3AAB8;--line:#2A2F39;
  --orange-text:#FF6A4D;--tint:#3A1510;--glow:rgba(242,56,15,.42);--screen:#0D0F13;--bubble:#262B34;--bezel:#343A45;
  --dots:rgba(255,106,77,.35);--floor:rgba(242,56,15,.28);--node:rgba(22,26,33,.85);--edge:#353B47;
  --headline-glow:0 0 28px rgba(242,56,15,.55);--head-bg:rgba(12,14,18,.82)}}

/* ---------- morning defaults ---------- */
.future-top{--dots:rgba(242,56,15,.30);--floor:rgba(242,56,15,.16);--node:rgba(255,255,255,.88);--edge:#E2E6EA;
  --headline-glow:0 0 30px rgba(242,56,15,.22);--head-bg:rgba(255,255,255,.82);--glow:rgba(242,56,15,.28);
  background:var(--bg);color:var(--fg)}

header.top.future-top{background:var(--head-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

.hero.future{padding-block:88px 72px}
.hero.future .glow{top:-320px;width:1300px;height:1000px;background:radial-gradient(closest-side,var(--glow),rgba(242,56,15,.07) 55%,transparent 75%)}
.hero.future .gridbg{background-image:radial-gradient(circle,var(--dots) 1.1px,transparent 1.6px);background-size:26px 26px}

.hero.future .floor{position:absolute;left:-25%;right:-25%;bottom:-40px;height:520px;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--floor) 1px,transparent 1px),linear-gradient(90deg,var(--floor) 1px,transparent 1px);
  background-size:64px 64px;transform:perspective(520px) rotateX(62deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 75%);mask-image:linear-gradient(to top,#000 0%,transparent 75%);
  animation:floor 6s linear infinite}
@keyframes floor{to{background-position:0 64px,0 0}}

.hero.future .badge{background:var(--node);border-color:var(--edge)}
.hero.future .badge i{box-shadow:0 0 0 0 rgba(242,56,15,.7);animation:ping 1.8s ease-out infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(242,56,15,0)}100%{box-shadow:0 0 0 0 rgba(242,56,15,0)}}

.hero.future h1 strong{color:var(--orange-text);text-shadow:var(--headline-glow)}
.hero.future h1 .caret{display:inline-block;width:.07em;height:.9em;margin-inline-start:.06em;vertical-align:-.08em;background:var(--orange-text);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero.future .btn.primary{box-shadow:0 0 0 1px rgba(255,106,77,.5),0 12px 40px -6px rgba(242,56,15,.6)}
.hero.future .btn.outline{background:transparent;border-color:var(--edge)}
.hero.future .btn.outline:hover{border-color:var(--fg)}

/* ---------- live flow: comment -> hub -> DM ---------- */
.flow{position:relative;z-index:1;margin-top:20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(40px,120px) auto minmax(40px,120px) minmax(0,1fr);align-items:center;width:100%;max-width:920px;text-align:start}
.flow .node{border:1px solid var(--edge);background:var(--node);border-radius:18px;padding:14px 16px;font-size:15px;line-height:1.4;display:flex;flex-direction:column;gap:6px;backdrop-filter:blur(6px)}
.flow .tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
[dir="rtl"] .flow .tag{font-family:inherit;letter-spacing:0;font-size:12.5px;font-weight:600}
.flow .node b{font-weight:600}
.flow .kw{font-family:var(--mono);font-size:13px;color:var(--orange-text)}
.flow .n1{animation:lit 3.6s infinite}
.flow .n2{animation:lit 3.6s infinite 1.8s}
@keyframes lit{0%,8%{border-color:var(--orange-text);box-shadow:0 0 0 1px rgba(255,106,77,.4),0 0 32px -6px rgba(242,56,15,.55)}35%,100%{border-color:var(--edge);box-shadow:none}}
.flow .wire{position:relative;height:2px;background:linear-gradient(90deg,rgba(242,56,15,.15),rgba(242,56,15,.5),rgba(242,56,15,.15))}
.flow .wire i{position:absolute;top:50%;inset-inline-start:0;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#FF6A4D;box-shadow:0 0 12px 3px rgba(242,56,15,.8);opacity:0;animation:run 3.6s infinite}
.flow .wire.w2 i{animation-delay:1.2s}
@keyframes run{0%{inset-inline-start:0;opacity:0}5%{opacity:1}30%{inset-inline-start:calc(100% - 10px);opacity:1}34%,100%{inset-inline-start:calc(100% - 10px);opacity:0}}
.flow .hub{position:relative;width:64px;height:64px;margin-inline:10px}
.flow .hub svg{width:64px;height:64px;display:block;position:relative;z-index:1}
.flow .hub::before,.flow .hub::after{content:"";position:absolute;inset:0;border-radius:18px;border:1.5px solid #FF6A4D;opacity:0;animation:ring 3.6s infinite 1s}
.flow .hub::after{animation-delay:1.3s}
@keyframes ring{0%{transform:scale(1);opacity:.8}40%,100%{transform:scale(1.7);opacity:0}}

@media (max-width:720px){
  .hero.future{padding-block:56px 48px}
  .flow{grid-template-columns:minmax(0,1fr);justify-items:stretch;gap:0;max-width:340px}
  .flow .wire{width:2px;height:28px;justify-self:center;background:linear-gradient(180deg,rgba(242,56,15,.15),rgba(242,56,15,.5),rgba(242,56,15,.15))}
  .flow .wire i{inset-inline-start:50%;margin-inline-start:-5px;top:0;margin-top:0;animation-name:runv}
  .flow .hub{justify-self:center;margin:4px 0}
  @keyframes runv{0%{top:0;opacity:0}5%{opacity:1}30%{top:calc(100% - 10px);opacity:1}34%,100%{top:calc(100% - 10px);opacity:0}}
}
@media (prefers-reduced-motion:reduce){
  .hero.future .floor,.hero.future .badge i,.hero.future h1 .caret,.flow .n1,.flow .n2,.flow .wire i,.flow .hub::before,.flow .hub::after{animation:none}
  .flow .wire i{opacity:0}
}

/* ---------- 3-column hero: copy in 2/3, real phone with video in 1/3 ---------- */
.herogrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;align-items:center;width:100%;text-align:start}
.herogrid .copy{grid-column:span 2;display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0}
.herogrid .ctas{justify-content:flex-start}
.hero.future .herogrid h1{font-size:clamp(40px,5vw,78px);max-width:none}
.herogrid .lead{max-width:34em}
.herogrid .flow{margin-top:6px;max-width:none}
.herophone{display:flex;flex-direction:column;align-items:center;gap:16px}
.realphone{position:relative;width:min(100%,310px);padding:5px;border-radius:58px;
  background:linear-gradient(145deg,#6b717c,#2b2f36 30%,#9aa1ad 52%,#2b2f36 75%,#5d636e);
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 60px 90px -40px rgba(20,24,40,.55),0 30px 90px -30px rgba(242,56,15,.45);animation:float 6s ease-in-out infinite}
.realphone::before,.realphone::after{content:"";position:absolute;width:3px;border-radius:2px;background:#4b515b}
.realphone::before{inset-inline-start:-3px;top:20%;height:64px;box-shadow:0 84px 0 #4b515b}
.realphone::after{inset-inline-end:-3px;top:27%;height:96px}
.realphone .bezel{border-radius:53px;background:#050608;padding:9px}
.rp-screen{position:relative;border-radius:44px;overflow:hidden;aspect-ratio:720/1560;background:#FFFFFF}
.rp-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.22),rgba(255,255,255,0) 32%)}
.rp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rp-island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:32%;height:26px;border-radius:20px;background:#000;z-index:1}
@keyframes float{50%{transform:translateY(-10px)}}
.rp-toggle{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--edge);background:var(--node);color:var(--fg);font:600 14px var(--sans);cursor:pointer}
.rp-toggle:hover{border-color:var(--fg)}
.rp-toggle .i-play{display:none}.rp-toggle[aria-pressed="true"] .i-play{display:block}.rp-toggle[aria-pressed="true"] .i-pause{display:none}
[dir="rtl"] .rp-toggle{font-family:inherit}
@media (max-width:960px){
  .herogrid{grid-template-columns:minmax(0,1fr);gap:40px}
  .herogrid .copy{grid-column:auto;align-items:center;text-align:center}
  .herogrid .ctas{justify-content:center}
  .realphone{width:min(72vw,280px)}
  .herogrid .flow{display:none}
}
@media (prefers-reduced-motion:reduce){.realphone{animation:none}}