/* =====================================================================
   Orbitek Hub — Hero v16: Premium 3D Glassmorphism
   Visual layer only. Scoped to #hero[data-bg="clean"]; no content changes.
   The #id raises specificity so these rules win over style.css and the
   dashboard's inline custom CSS without !important.
   ===================================================================== */

#hero.hero[data-bg="clean"]{
  --gk:#07070a;           /* obsidian */
  --gr:#e0241b;           /* brand red */
  --gr2:#ff4b3e;          /* lit red */
  --gw:#ffffff;
  --gl-bg:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.035) 55%,rgba(255,255,255,.02));
  --gl-line:rgba(255,255,255,.14);
  --gl-hi:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.04);
  --gl-blur:blur(22px) saturate(160%);
  --ink2:#fff;--mut2:rgba(255,255,255,.66);--line2:rgba(255,255,255,.12);
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:
    radial-gradient(60% 70% at 82% 18%,rgba(224,36,27,.34) 0,rgba(224,36,27,0) 62%),
    radial-gradient(45% 55% at 8% 92%,rgba(224,36,27,.18) 0,rgba(224,36,27,0) 65%),
    radial-gradient(70% 60% at 40% 0%,rgba(255,255,255,.06) 0,rgba(255,255,255,0) 60%),
    linear-gradient(160deg,#0d0d12 0%,var(--gk) 45%,#0a0507 100%);
  padding:clamp(48px,6vw,96px) 0 clamp(56px,6.5vw,104px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* perspective grid floor + soft vignette */
#hero.hero[data-bg="clean"]::before{
  content:"";display:block;position:absolute;left:-20%;right:-20%;bottom:-8%;height:62%;z-index:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/64px 64px;
  transform:perspective(700px) rotateX(64deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.55) 35%,transparent 80%);
          mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.55) 35%,transparent 80%);
  animation:hgGrid 18s linear infinite;
}
#hero.hero[data-bg="clean"]::after{
  content:"";display:block;position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%);
}
@keyframes hgGrid{to{background-position:0 64px,0 0}}

/* ---------- 3D glass scene (existing .hglass layers) ---------- */
#hero.hero[data-bg="clean"] .hglass{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#hero.hero[data-bg="clean"] .hglass::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,7,10,.72) 0%,rgba(7,7,10,.28) 42%,rgba(7,7,10,0) 66%)}
#hero.hero[data-bg="clean"] .hglass i{position:absolute;display:block;will-change:transform}

/* g1 — luminous red core sphere */
#hero.hero[data-bg="clean"] .hglass .g1{
  width:clamp(280px,34vw,520px);aspect-ratio:1;right:-6%;top:-18%;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#ffd9d4 0,#ff6a5c 16%,#e0241b 42%,#7a0b07 74%,#2a0302 100%);
  filter:blur(2px);opacity:.92;
  box-shadow:0 0 120px 20px rgba(224,36,27,.45),0 0 260px 80px rgba(224,36,27,.18),inset -30px -40px 80px rgba(0,0,0,.55);
}
/* g2 — frosted white glass sphere, refracting the red */
#hero.hero[data-bg="clean"] .hglass .g2{
  width:clamp(150px,16vw,250px);aspect-ratio:1;right:30%;bottom:-6%;border-radius:50%;
  background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.75) 0,rgba(255,255,255,.18) 22%,rgba(255,255,255,.04) 60%,rgba(224,36,27,.22) 100%);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);
  box-shadow:inset 0 0 40px rgba(255,255,255,.12),inset -12px -18px 40px rgba(224,36,27,.25),0 40px 80px -30px rgba(0,0,0,.8);
  filter:none;
}
/* g3 — tilted glass slab behind the dashboard */
#hero.hero[data-bg="clean"] .hglass .g3{
  width:clamp(260px,30vw,460px);height:clamp(170px,19vw,290px);right:4%;top:24%;border-radius:36px;
  transform:rotate(-12deg) skewY(2deg);
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 60%,rgba(224,36,27,.10));
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 50px 90px -40px rgba(0,0,0,.9);
}
/* g4 — small white light bead */
#hero.hero[data-bg="clean"] .hglass .g4{
  width:clamp(36px,4vw,64px);aspect-ratio:1;left:47%;top:12%;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff 0,#ffd0cb 40%,#ff5a4c 100%);
  filter:blur(.5px);box-shadow:0 0 30px 6px rgba(255,90,76,.55);
}
/* g5 — glass torus ring, lower-left */
#hero.hero[data-bg="clean"] .hglass .g5{
  width:clamp(140px,15vw,230px);aspect-ratio:1;left:-4%;bottom:-10%;border-radius:50%;
  border:clamp(14px,1.8vw,26px) solid rgba(255,255,255,.12);background:transparent;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 0 22px rgba(255,255,255,.18),0 0 40px rgba(224,36,27,.2);filter:none;
}

/* ---------- Layout above the scene ---------- */
#hero.hero[data-bg="clean"] .w.hg{position:relative;z-index:2}

/* Left column becomes a layered glass panel */
#hero.hero[data-bg="clean"] .hg>div:first-child{
  position:relative;padding:clamp(26px,3.2vw,46px);border-radius:32px;
  background:var(--gl-bg);border:1px solid var(--gl-line);
  backdrop-filter:var(--gl-blur);-webkit-backdrop-filter:var(--gl-blur);
  box-shadow:var(--gl-hi),0 40px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.35);
  animation:hgPanel 1s .1s cubic-bezier(.2,.8,.2,1) both;
}
/* specular edge light + red rim refraction */
#hero.hero[data-bg="clean"] .hg>div:first-child::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(224,36,27,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
#hero.hero[data-bg="clean"] .hg>div:first-child::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.09) 0,rgba(255,255,255,0) 38%);
}
@keyframes hgPanel{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}

/* pill — glass chip */
#hero.hero[data-bg="clean"] .pill{
  color:#fff;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 30px -14px rgba(0,0,0,.7);
}
#hero.hero[data-bg="clean"] .pill b{background:linear-gradient(135deg,var(--gr2),var(--gr));color:#fff;box-shadow:0 6px 18px -6px rgba(224,36,27,.8),inset 0 1px 0 rgba(255,255,255,.35)}
#hero.hero[data-bg="clean"] .pill .tw.tag2{border-left-color:rgba(255,255,255,.18);color:rgba(255,255,255,.85)}

/* headline */
#hero.hero[data-bg="clean"] h1.wish{color:#fff;font-size:clamp(2.2rem,4.5vw,4.25rem)}
@media(max-width:900px){#hero.hero[data-bg="clean"] h1.wish{font-size:clamp(2rem,9.4vw,4rem)}}
#hero.hero[data-bg="clean"] h1.wish i{color:rgba(255,255,255,.62)}
#hero.hero[data-bg="clean"] h1.wish .m-wish{
  color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.38);
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.05));-webkit-background-clip:text;background-clip:text;
}
#hero.hero[data-bg="clean"] h1.wish .m-wish::after{background:linear-gradient(90deg,var(--gr),var(--gr2));box-shadow:0 0 18px rgba(224,36,27,.8)}
#hero.hero[data-bg="clean"] h1.wish .m-did{
  color:var(--gr2);-webkit-text-fill-color:transparent;
  background:linear-gradient(180deg,#ff8a7f 0%,var(--gr2) 40%,var(--gr) 100%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 24px rgba(224,36,27,.55));
}
#hero.hero[data-bg="clean"] .lead{color:rgba(255,255,255,.72)}

/* buttons — glass with light sweep */
#hero.hero[data-bg="clean"] .btn{position:relative;overflow:hidden;border-radius:14px;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .3s,border-color .3s}
#hero.hero[data-bg="clean"] .btn::before{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s ease;
}
#hero.hero[data-bg="clean"] .btn:hover::before{left:120%}
#hero.hero[data-bg="clean"] .btn.red{
  background:linear-gradient(180deg,rgba(255,85,72,.95),rgba(224,36,27,.92) 55%,rgba(170,20,14,.95));
  border:1px solid rgba(255,160,150,.45);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 6px rgba(0,0,0,.25),0 16px 36px -12px rgba(224,36,27,.85),0 0 0 1px rgba(0,0,0,.3);
}
#hero.hero[data-bg="clean"] .btn.red:hover{transform:translateY(-3px);border-color:rgba(255,190,180,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 22px 48px -12px rgba(224,36,27,1),0 0 0 6px rgba(224,36,27,.14)}
#hero.hero[data-bg="clean"] .btn.ghost{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);color:#fff;
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 14px 30px -16px rgba(0,0,0,.8);
}
#hero.hero[data-bg="clean"] .btn.ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff;transform:translateY(-3px)}

/* connect links */
#hero.hero[data-bg="clean"] .connect,#hero.hero[data-bg="clean"] .connect.partner{color:rgba(255,255,255,.88);border-bottom-color:rgba(255,255,255,.2)}
#hero.hero[data-bg="clean"] .connect:hover,#hero.hero[data-bg="clean"] .connect.partner:hover{color:#fff;border-color:var(--gr2);text-shadow:0 0 16px rgba(224,36,27,.6)}
#hero.hero[data-bg="clean"] .connect .cn-ic{color:var(--gr2)}

/* partner strip — logos sit on frosted white chips so any logo colour reads */
#hero.hero[data-bg="clean"] .trust{border-top-color:rgba(255,255,255,.1)}
#hero.hero[data-bg="clean"] .trust>span{color:rgba(255,255,255,.55)}
#hero.hero[data-bg="clean"] .trust a{padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 8px 20px -12px rgba(0,0,0,.8);transition:transform .25s,background .25s}
#hero.hero[data-bg="clean"] .trust a:hover{transform:translateY(-2px);background:#fff}
#hero.hero[data-bg="clean"] .trust img{opacity:.85}

/* ---------- Right: floating glass dashboard ---------- */
#hero.hero[data-bg="clean"] .hrt{
  position:relative;padding:clamp(16px,1.8vw,24px);border-radius:30px;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:var(--gl-hi),0 60px 120px -50px rgba(0,0,0,.95),0 0 80px -30px rgba(224,36,27,.35);
  transform-style:preserve-3d;
  transform:perspective(1200px) rotateY(calc(-7deg + var(--px,0)*4deg)) rotateX(calc(4deg + var(--py,0)*-3deg));
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
  animation:hgPanel 1.1s .3s cubic-bezier(.2,.8,.2,1) both;
}
#hero.hero[data-bg="clean"] .hrt::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(140deg,rgba(255,255,255,.5),rgba(255,255,255,0) 35%,rgba(224,36,27,0) 65%,rgba(224,36,27,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}

/* proof card */
#hero.hero[data-bg="clean"] .proof{
  color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 24px 44px -22px rgba(0,0,0,.9);
  transform:translateZ(40px);
}
#hero.hero[data-bg="clean"] .proof:hover{transform:translateZ(40px) translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 30px 50px -22px rgba(0,0,0,1),0 0 0 4px rgba(255,255,255,.04)}
#hero.hero[data-bg="clean"] .proof img{border-color:rgba(255,255,255,.18);box-shadow:0 8px 20px -10px rgba(0,0,0,.8)}
#hero.hero[data-bg="clean"] .proof b{color:#fff}
#hero.hero[data-bg="clean"] .proof b::before{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18),0 0 12px rgba(34,197,94,.8)}
#hero.hero[data-bg="clean"] .proof em{color:rgba(255,255,255,.62)}
#hero.hero[data-bg="clean"] .proof u{color:var(--gr2)}

/* step bars — stacked glass columns rising toward the red "Grow" */
#hero.hero[data-bg="clean"] .steps{transform-style:preserve-3d}
#hero.hero[data-bg="clean"] .steps a{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);border-radius:16px;
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -20px 30px -20px rgba(224,36,27,.25),0 24px 40px -22px rgba(0,0,0,.9);
}
#hero.hero[data-bg="clean"] .steps a::after{ /* vertical glass reflection */
  content:"";position:absolute;top:0;bottom:0;left:10%;width:28%;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.12),rgba(255,255,255,0));
}
#hero.hero[data-bg="clean"] .steps a:hover{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.07));border-color:rgba(255,255,255,.4);transform:translateY(-6px)}
#hero.hero[data-bg="clean"] .steps b{color:#fff}
#hero.hero[data-bg="clean"] .steps span{color:rgba(255,255,255,.62)}
#hero.hero[data-bg="clean"] .steps li:last-child a{
  background:linear-gradient(180deg,rgba(255,95,82,.92),rgba(224,36,27,.88) 50%,rgba(140,14,9,.92));
  border-color:rgba(255,170,160,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 50px -6px rgba(224,36,27,.7),0 30px 50px -20px rgba(0,0,0,.9);
}
#hero.hero[data-bg="clean"] .steps li:last-child a span{color:rgba(255,235,232,.92)}
#hero.hero[data-bg="clean"] .steps li:last-child a:hover{background:linear-gradient(180deg,rgba(255,110,98,.95),rgba(232,40,30,.92) 50%,rgba(150,16,10,.95))}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  #hero.hero[data-bg="clean"] .hglass::after{background:linear-gradient(180deg,rgba(7,7,10,.6) 0%,rgba(7,7,10,.3) 60%,rgba(7,7,10,0) 100%)}
  #hero.hero[data-bg="clean"] .hglass .g1{right:-30%;top:-10%}
  #hero.hero[data-bg="clean"] .hglass .g3{right:-14%;top:auto;bottom:8%}
  #hero.hero[data-bg="clean"] .hglass .g4{left:auto;right:12%;top:3%}
  #hero.hero[data-bg="clean"] .hrt{transform:none}
  #hero.hero[data-bg="clean"] .proof,#hero.hero[data-bg="clean"] .proof:hover{transform:none}
  #hero.hero[data-bg="clean"] .hg>div:first-child{border-radius:26px}
}
@media(max-width:560px){
  #hero.hero[data-bg="clean"]{padding:28px 0 40px}
  #hero.hero[data-bg="clean"] .hg>div:first-child{padding:22px 18px;border-radius:22px}
  #hero.hero[data-bg="clean"] .hrt{padding:12px;border-radius:22px}
  #hero.hero[data-bg="clean"]::before{height:45%}
  #hero.hero[data-bg="clean"] .hglass .g2,#hero.hero[data-bg="clean"] .hglass .g5{display:none}
  #hero.hero[data-bg="clean"] .btns{align-self:stretch}
}
/* lighter glass on devices without backdrop-filter support */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #hero.hero[data-bg="clean"] .hg>div:first-child,#hero.hero[data-bg="clean"] .hrt{background:rgba(22,22,28,.88)}
}
@media(prefers-reduced-motion:reduce){
  #hero.hero[data-bg="clean"]::before,#hero.hero[data-bg="clean"] .hg>div:first-child,#hero.hero[data-bg="clean"] .hrt{animation:none}
  #hero.hero[data-bg="clean"] .hrt{transition:none;transform:none}
  #hero.hero[data-bg="clean"] .btn::before{display:none}
}

/* pill — mobile fix: when the tagline wraps under the badge, switch from a
   capsule to a rounded glass card so text never spills past the curved edge */
@media(max-width:900px){
  #hero.hero[data-bg="clean"] .pill{
    display:inline-flex;flex-direction:column;align-items:flex-start;flex-wrap:nowrap;
    gap:8px;max-width:100%;box-sizing:border-box;
    padding:8px 16px 12px 8px;border-radius:20px;text-align:left;
  }
  #hero.hero[data-bg="clean"] .pill b{border-radius:14px}
  #hero.hero[data-bg="clean"] .pill .tw.tag2{
    display:block;width:auto;padding:0 2px 0 8px;border-left:0;
    white-space:normal;line-height:1.35;font-size:.86rem;
  }
  #hero.hero[data-bg="clean"] .pill .tw .ty{white-space:normal}
}

/* =====================================================================
   Ticker strip — 3D glass band (visual only; text, links, scroll unchanged)
   ===================================================================== */
body .tick{
  position:relative;isolation:isolate;color:#fff;
  background:
    radial-gradient(40% 180% at 15% 50%,rgba(255,75,62,.55),transparent 70%),
    radial-gradient(35% 180% at 85% 50%,rgba(255,75,62,.45),transparent 70%),
    linear-gradient(180deg,rgba(214,38,28,.92),rgba(150,16,10,.94));
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border-top:1px solid rgba(255,255,255,.28);border-bottom:1px solid rgba(0,0,0,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -10px 24px -12px rgba(0,0,0,.45),
             0 18px 40px -18px rgba(224,36,27,.65),0 -12px 30px -20px rgba(224,36,27,.5);
  text-shadow:0 1px 0 rgba(0,0,0,.18),0 2px 12px rgba(0,0,0,.18);
}
/* glass sheen (top half reflection) + slow light sweep */
body .tick::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.04) 48%,transparent 52%);
}
body .tick::after{
  content:"";position:absolute;top:0;bottom:0;left:-30%;width:28%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-18deg);animation:tkSweep 7s ease-in-out infinite;
}
@keyframes tkSweep{0%{left:-30%}60%,100%{left:120%}}
/* soft fade at both edges so items glide in and out */
body .tick{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}

/* badge — obsidian glass chip */
body .tick .tk-b{
  background:linear-gradient(160deg,rgba(30,30,36,.85),rgba(8,8,10,.9));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px -6px rgba(0,0,0,.6);
  text-shadow:none;
}
body .tick .tk-b i{background:#ff4b3e;box-shadow:0 0 8px #ff4b3e}

/* button — frosted white glass pill */
body .tick .dt{
  background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.32);border-radius:999px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 14px -8px rgba(0,0,0,.45);
  transition:background .3s,color .3s,box-shadow .3s,transform .3s;
}
body .tick a:hover .dt{background:#fff;color:#c4140f;text-shadow:none;transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(0,0,0,.5),0 0 18px rgba(255,255,255,.35)}
body .tick a:hover{text-decoration:none}
body .tick .mid{border-left-color:rgba(255,255,255,.35)}
body .tick .sep{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.7),0 0 18px rgba(255,75,62,.8)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body .tick{background:linear-gradient(180deg,#d6261c,#96100a)}}
@media(prefers-reduced-motion:reduce){body .tick::after{animation:none;display:none}}

/* =====================================================================
   AI Tools — mobile redesign (<=760px). Replaces the expanding accordion
   with a stack of fully visible glass cards. Desktop is unchanged.
   ===================================================================== */
@media(max-width:760px){
  body #tools #tools-out::before{
    background:
      radial-gradient(circle at 15% 20%,rgba(224,36,27,.45),transparent 40%),
      radial-gradient(circle at 85% 75%,rgba(224,36,27,.3),transparent 45%)!important;
    filter:blur(40px);opacity:.8;animation:none;
  }
  body #tools #tools-out .grid{display:flex!important;flex-direction:column;gap:14px;height:auto!important;padding:6px 0 20px!important;overflow:visible!important}

  body #tools.dark .card.tl,
  body #tools.dark .card.tl.is-open{
    --acc:#e0241b!important;
    height:auto!important;min-height:0;flex:none!important;transform:none!important;cursor:default;
    border-radius:24px!important;padding:52px 18px 18px!important;overflow:hidden;
    background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 55%,rgba(224,36,27,.1))!important;
    border:1px solid rgba(255,255,255,.18)!important;
    -webkit-backdrop-filter:blur(20px) saturate(160%)!important;backdrop-filter:blur(20px) saturate(160%)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 10px rgba(0,0,0,.25),0 22px 40px -24px rgba(0,0,0,.9),0 0 30px -18px rgba(224,36,27,.7)!important;
  }
  body #tools.dark .card.tl::before{background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 40%)!important}

  /* number chip top-left; duplicate vertical title hidden (the real title is in the card) */
  body #tools.dark .card.tl .tl-no{
    top:16px;left:18px;padding:5px 10px;border-radius:99px;font:700 .72rem/1 var(--b);letter-spacing:.12em;
    background:linear-gradient(180deg,#ff4b3e,#e0241b);color:#fff;text-shadow:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px -6px rgba(224,36,27,.8);opacity:1!important;
  }
  body #tools.dark .card.tl .tl-vn{display:none!important}
  body #tools.dark .card.tl .tl-pv,body #tools.dark .card.tl .tl-fv{display:none!important}

  /* the content panel sits in normal flow, always visible */
  body #tools.dark .card.tl .tl-panel,
  body #tools.dark .card.tl.is-open .tl-panel{
    position:static!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    transform:none!important;max-width:none;padding:0!important;margin:0;
    background:none!important;border:0!important;box-shadow:none!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  body #tools.dark .card.tl h3{font-size:1.08rem;line-height:1.3;word-break:normal;overflow-wrap:anywhere;white-space:normal}
  body #tools.dark .card.tl p{font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.75)}
  body #tools.dark .card.tl[data-cat]::after{display:none!important}

  /* coming-soon card */
  body #tools .card.tl.tl-soon{border-style:dashed!important;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02))!important}
  body #tools .card.tl.tl-soon .tl-no{background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
}

/* =====================================================================
   Creator Spotlight (#community) — v2: pearl-white 3D glass (visual only)
   ===================================================================== */
body #community.cs{
  position:relative;isolation:isolate;overflow:hidden;color:#14142b;
  background:
    radial-gradient(40% 35% at 10% 12%,rgba(255,90,77,.35),transparent 70%),
    radial-gradient(38% 38% at 92% 40%,rgba(255,170,90,.28),transparent 70%),
    radial-gradient(45% 35% at 20% 78%,rgba(124,155,255,.25),transparent 70%),
    radial-gradient(40% 30% at 85% 95%,rgba(255,75,62,.28),transparent 70%),
    linear-gradient(180deg,#fbf7f4 0%,#f6f0ec 100%);
}
/* floating light blobs behind the glass */
body #community.cs::before,body #community.cs::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);pointer-events:none;animation:cs2Orb 14s ease-in-out infinite alternate}
body #community.cs::before{width:360px;height:360px;left:-80px;top:38%;background:rgba(255,75,62,.35)}
body #community.cs::after{width:320px;height:320px;right:-60px;top:62%;background:rgba(255,154,31,.3);animation-delay:-7s}
@keyframes cs2Orb{to{transform:translate(40px,-40px) scale(1.15)}}

/* heading */
body #community .cs-head h2{color:#14142b}
body #community .cs-head h2 em{color:#14142b;background:linear-gradient(transparent 60%,rgba(255,193,90,.55) 60%)}
body #community .cs-head h2 em.b{color:#e0241b;background:linear-gradient(transparent 60%,rgba(255,90,77,.25) 60%)}
body #community .cs-head .lead{color:#55556b}

/* the flow stage sits on its own glass tray */
body #community .cs-stage{
  border-radius:36px;
  background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.3));
  border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:inset 0 2px 0 #fff,inset 0 -10px 30px rgba(224,36,27,.06),0 40px 70px -40px rgba(120,30,20,.45);
}
/* glass spheres */
body #community .cs-node{
  border:1px solid rgba(255,255,255,.95)!important;
  background:radial-gradient(circle at 30% 25%,#fff 0,rgba(255,255,255,.85) 25%,var(--tint) 100%)!important;
  box-shadow:inset 0 -10px 18px var(--shade),inset 0 4px 6px #fff,0 24px 36px -16px var(--drop),0 0 0 6px rgba(255,255,255,.45)!important;
  animation:cs2Bob 6s ease-in-out infinite;
}
body #community .n1{--tint:#ffe2b8;--shade:rgba(217,121,11,.25);--drop:rgba(217,121,11,.55);color:#d9790b}
body #community .n2{--tint:#ffc9c3;--shade:rgba(224,36,27,.3);--drop:rgba(224,36,27,.6);color:#e0241b;animation-delay:-2s}
body #community .n3{--tint:#cfdbff;--shade:rgba(47,84,214,.28);--drop:rgba(47,84,214,.55);color:#2f54d6;animation-delay:-4s}
@keyframes cs2Bob{50%{translate:0 -6px}}
body #community .cs-node b{color:#14142b}
body #community .fl{
  color:#14142b;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.6));
  border:1px solid #fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 -2px 4px rgba(20,20,43,.06),0 12px 22px -12px rgba(120,30,20,.45);
}

/* cards: thick frosted glass slabs with colored inner glow */
body #community .cs-card{
  border-radius:32px;color:#14142b;
  background:linear-gradient(155deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.55) 55%,var(--tint) 100%)!important;
  border:1px solid rgba(255,255,255,.95)!important;
  -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  box-shadow:inset 0 2px 0 #fff,inset 0 -14px 34px var(--glow),0 2px 0 rgba(20,20,43,.04),0 44px 70px -36px var(--drop)!important;
  transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s!important;
}
body #community .cs-card{isolation:isolate;overflow:hidden}
body #community .cs-card::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,#fff,transparent);pointer-events:none}
body #community .cs-card::after{content:"";position:absolute;width:180px;height:180px;right:-50px;top:-50px;border-radius:50%;background:var(--orb);filter:blur(40px);opacity:.55;pointer-events:none;z-index:-1}
body #community .cs-brand{--tint:rgba(255,214,208,.6);--glow:rgba(224,36,27,.08);--drop:rgba(224,36,27,.45);--orb:#ff6a5e}
body #community .cs-join{--tint:rgba(214,224,255,.6);--glow:rgba(47,84,214,.08);--drop:rgba(47,84,214,.4);--orb:#7c9bff}
body #community .cs-card:hover{transform:translateY(-8px) rotateX(2deg)}
body #community .cs-card h3{color:#14142b}
body #community .cs-card>p,body #community .cs-perks span{color:#55556b}
body #community .cs-perks b{color:#14142b}
body #community .cs-chip{color:#e0241b;background:rgba(255,255,255,.75);border:1px solid #fff;box-shadow:0 6px 14px -8px rgba(224,36,27,.6),inset 0 -2px 4px rgba(224,36,27,.08)}
body #community .cs-chip2{color:#2f54d6;box-shadow:0 6px 14px -8px rgba(47,84,214,.6),inset 0 -2px 4px rgba(47,84,214,.08)}
body #community .cs-list li{
  color:#7a1a14;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.6));
  border:1px solid #fff;box-shadow:inset 0 -2px 4px rgba(224,36,27,.07),0 8px 16px -10px rgba(224,36,27,.45);
  transition:transform .3s,box-shadow .3s,color .3s;
}
body #community .cs-list li:hover{transform:translateY(-3px);color:#e0241b;box-shadow:0 14px 22px -10px rgba(224,36,27,.55)}
body #community .cs-art{filter:drop-shadow(0 12px 18px rgba(224,36,27,.25))}
body #community .cs-perks i{
  border:1px solid #fff;
  box-shadow:inset 0 2px 0 #fff,inset 0 -6px 10px color-mix(in srgb,var(--c) 15%,transparent),0 10px 18px -10px var(--c)!important;
}
body #community .cs-brand .cs-btn{border-radius:999px;background:linear-gradient(180deg,#ff5a4d,#e0241b 60%,#c01a12);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 18px 30px -12px rgba(224,36,27,.75)}
body #community .cs-btn2{border-radius:999px;color:#fff;border:0;background:linear-gradient(180deg,#2a2a3a,#0e0e14);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 18px 30px -14px rgba(14,14,20,.7)}
body #community .cs-btn2:hover{background:linear-gradient(180deg,#3a3a4e,#14142b);color:#fff}

@media(max-width:860px){
  body #community .f3{left:34%;top:2%}
  body #community .f6{left:70%;top:14%}
  body #community .cs-stage{border-radius:28px}
}
@media(prefers-reduced-motion:reduce){body #community.cs::before,body #community.cs::after,body #community .cs-node{animation:none}}

/* ---------- Creator Spotlight v3 layout pattern (overrides v2 above) ---------- */
/* 1) Flow: clean glass timeline bar, scattered tags removed */
body #community .cs-stage{height:150px!important;max-width:760px}
body #community .fl{display:none!important}
body #community .cs-path{opacity:.9}

/* 2) For brands: obsidian glass card with red light, tags as a tile grid */
body #community .cs-brand{
  color:#fff;
  background:radial-gradient(70% 50% at 100% 0%,rgba(255,75,62,.45),transparent 70%),linear-gradient(160deg,#1c1c24 0%,#0b0b0f 70%,#1a0806 100%)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -20px 40px rgba(224,36,27,.15),0 44px 70px -30px rgba(120,20,12,.75)!important;
}
body #community .cs-brand::after{display:none}
body #community .cs-brand h3{color:#fff}
body #community .cs-brand>p{color:rgba(255,255,255,.7)}
body #community .cs-brand .cs-chip{color:#fff;background:rgba(224,36,27,.35);border:1px solid rgba(255,120,110,.5);box-shadow:0 0 18px -4px rgba(255,75,62,.7)}
body #community .cs-brand .cs-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body #community .cs-brand .cs-list li{
  color:#fff;border-radius:16px;padding:12px 14px;font-size:.85rem;line-height:1.3;position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
body #community .cs-brand .cs-list li::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#ff4b3e;box-shadow:0 0 8px #ff4b3e;vertical-align:middle}
body #community .cs-brand .cs-list li:hover{color:#fff;background:rgba(224,36,27,.28);border-color:rgba(255,120,110,.5)}
body #community .cs-brand .cs-art{opacity:.9;filter:drop-shadow(0 0 14px rgba(255,75,62,.5))}

/* 3) For creators: white glass card, perks as 2x2 bento tiles */
body #community .cs-join .cs-perks{grid-template-columns:1fr 1fr;gap:12px}
body #community .cs-join .cs-perks li{
  flex-direction:column;gap:10px;padding:16px 14px;border-radius:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.6));
  border:1px solid #fff;box-shadow:inset 0 -3px 8px rgba(47,84,214,.06),0 14px 24px -16px rgba(47,84,214,.45);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s;
}
body #community .cs-join .cs-perks li:hover{transform:translateY(-4px);box-shadow:0 20px 30px -16px rgba(47,84,214,.55)}
body #community .cs-join .cs-perks b{font-size:.95rem}
body #community .cs-join .cs-perks span{font-size:.82rem}

@media(max-width:400px){
  body #community .cs-brand .cs-list li{font-size:.8rem;padding:11px 10px}
  body #community .cs-join .cs-perks{gap:10px}
}

/* Hero: every background shape is round (the tilted glass slab g3 is now a glass sphere) */
#hero.hero[data-bg="clean"] .hglass .g3{
  width:clamp(240px,26vw,400px);height:auto;aspect-ratio:1;right:2%;top:16%;border-radius:50%;transform:none;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.22) 0,rgba(255,255,255,.06) 35%,rgba(255,255,255,.02) 62%,rgba(224,36,27,.22) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3),inset -20px -30px 60px rgba(224,36,27,.25),0 50px 90px -40px rgba(0,0,0,.9);
}

/* =====================================================================
   Team (#team) — premium futuristic 3D glass
   ===================================================================== */
body #team.tm{position:relative;overflow:hidden;isolation:isolate;padding:clamp(70px,9vw,120px) 0;color:#fff;
  background:radial-gradient(45% 55% at 8% 20%,rgba(224,36,27,.3),transparent 70%),radial-gradient(40% 50% at 95% 85%,rgba(124,92,255,.2),transparent 70%),linear-gradient(165deg,#0d0d12,#07070a 55%,#0f0606)!important}
body #team.tm::before{content:"";position:absolute;z-index:-1;width:clamp(260px,30vw,440px);aspect-ratio:1;right:-6%;top:-12%;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#ff8a7e 0,#e0241b 38%,#7a0d08 78%);box-shadow:0 0 120px 20px rgba(224,36,27,.4),inset -30px -40px 80px rgba(0,0,0,.5);opacity:.75;animation:tmOrb 16s ease-in-out infinite alternate}
body #team.tm::after{content:"";position:absolute;z-index:-1;width:clamp(160px,18vw,260px);aspect-ratio:1;left:38%;bottom:-10%;border-radius:50%;
  background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.7) 0,rgba(255,255,255,.14) 24%,rgba(255,255,255,.03) 60%,rgba(224,36,27,.22));border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:tmOrb 13s ease-in-out infinite alternate-reverse}
@keyframes tmOrb{to{transform:translate(18px,-22px) scale(1.05)}}

/* left: glass panel */
body #team .tm-l{position:relative;padding:36px;border-radius:32px;background:linear-gradient(155deg,rgba(255,255,255,.1),rgba(255,255,255,.025) 60%,rgba(224,36,27,.07));
  border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 40px 80px -40px rgba(0,0,0,.9)}
body #team .tm-l h2{color:#fff}
body #team .tm-l p{color:rgba(255,255,255,.72)!important}
body #team .tm-l .btn.red{border-radius:999px;background:linear-gradient(180deg,#ff5a4d,#e0241b 60%,#c01a12);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 16px 30px -12px rgba(224,36,27,.85)}

/* right: member cards */
body #team .tm-top{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;perspective:1000px}
body #team .tm-c{position:relative;flex:0 1 210px;overflow:hidden;padding:26px 18px 22px;border-radius:26px;color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.035) 60%,rgba(224,36,27,.1))!important;border:1px solid rgba(255,255,255,.18)!important;
  -webkit-backdrop-filter:blur(24px) saturate(170%)!important;backdrop-filter:blur(24px) saturate(170%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -16px 30px rgba(0,0,0,.25),0 34px 60px -30px rgba(0,0,0,.95),0 0 50px -26px rgba(255,75,62,.9)!important;
  transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s!important}
body #team .tm-c::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.16),transparent 38%)}
body #team .tm-c::after{content:"";position:absolute;width:140px;height:140px;right:-50px;top:-50px;border-radius:50%;background:#ff5a4d;filter:blur(40px);opacity:.35;pointer-events:none}
body #team .tm-c:hover{transform:translateY(-8px) rotateX(4deg)}
body #team .tm-av{width:104px;height:104px;padding:4px;background:conic-gradient(from 200deg,#ff5a4d,#ffd27a,#ff5a4d 60%,#7c5cff,#ff5a4d)!important;box-shadow:0 0 0 6px rgba(255,255,255,.06),0 0 34px -4px rgba(255,90,77,.8);animation:tmSpin 8s linear infinite}
body #team .tm-av>*{animation:tmSpin 8s linear infinite reverse}
@keyframes tmSpin{to{transform:rotate(360deg)}}
body #team .tm-c b,body #team .tm-c strong,body #team .tm-c h3{color:#fff!important}
body #team .tm-c span.r,body #team .tm-c span{color:rgba(255,255,255,.7)!important}

/* "+ N more" strip */
body #team .tm-more{margin-top:20px;padding:12px 18px;border-radius:99px;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03))!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body #team .tm-more:empty{display:none}
body #team .tm-st>*{border-color:#1a1a20!important}
body #team .tm-all .tm-c{flex:none}
@media(max-width:560px){body #team .tm-l{padding:26px 20px}body #team .tm-c{flex-basis:calc(50% - 9px);padding:20px 12px}body #team .tm-av{width:84px;height:84px}}
@media(prefers-reduced-motion:reduce){body #team.tm::before,body #team.tm::after,body #team .tm-av,body #team .tm-av>*{animation:none}}
body #team.tm::before{left:auto!important;bottom:auto!important;right:-6%!important;top:-12%!important;height:clamp(260px,30vw,440px)!important;inset:auto;filter:none}
body #team.tm::after{right:auto!important;top:auto!important;left:40%!important;bottom:-10%!important;height:clamp(160px,18vw,260px)!important;inset:auto}
/* Team: link to the full /orbitek-team/ page */
#team .tm-page{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:12px 22px;border-radius:999px;color:#fff;text-decoration:none;font-weight:600;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);transition:transform .25s,border-color .25s}
#team .tm-page:hover{transform:translateY(-2px);border-color:rgba(255,80,80,.6)}
/* Team: small avatars of the rest of the team under the founder card */
#team .tm-more2{display:flex;justify-content:center;margin-top:22px}
#team .tm-mlink{display:inline-flex;align-items:center;gap:14px;padding:10px 20px 10px 12px;border-radius:999px;text-decoration:none;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 34px -18px rgba(0,0,0,.9);transition:transform .25s,border-color .25s}
#team .tm-mlink:hover{transform:translateY(-2px);border-color:rgba(255,80,80,.55)}
#team .tm-more2 .tm-st{display:flex}
#team .tm-more2 .tm-st>*{width:40px;height:40px;border-radius:50%;object-fit:cover;margin-left:-12px;border:2px solid #120f14;box-shadow:0 0 0 1.5px rgba(255,90,90,.7);background:radial-gradient(circle at 30% 25%,#ff6b6b,#a50d0d);display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff}
#team .tm-more2 .tm-st>*:first-child{margin-left:0}
#team .tm-mlink span{display:flex;flex-direction:column;font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.7)}
#team .tm-mlink span b{font-size:14px;color:#fff}
@media(max-width:600px){#team .tm-more2 .tm-st>*{width:32px;height:32px;margin-left:-10px}}
/* Reels without a thumbnail: clean brand placeholder (owner adds images by hand) */
.rl-c .rl-ph{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,rgba(255,90,90,.55),transparent 55%),linear-gradient(160deg,#1a1216,#0b0a0d 60%,#2a0b0b)}
.rl-c .rl-ph svg{opacity:.35;transform:translateY(-30px)}
.rl-c{position:relative;overflow:hidden}