/* =========================================================
   FLAR3 glass layer — frosted translucent surfaces over slowly drifting glow orbs.
   Loaded after site.css and motion.css; tone modifiers (.card.hl, .frame.em, .type.a…) still win.
   ========================================================= */
:root{
  --glass-fill-1:rgba(255,255,255,.072);
  --glass-fill-2:rgba(255,255,255,.028);
  --glass-line:rgba(255,255,255,.11);
  --glass-top:rgba(255,255,255,.24);
  --glass-blur:blur(18px) saturate(140%);
  --glass-shadow:inset 0 1px 0 var(--glass-top),inset 0 0 0 1px rgba(255,255,255,.015),inset 0 0 28px rgba(255,255,255,.028),0 24px 60px -34px rgba(0,0,0,.85);
}
@media (max-width:860px){:root{--glass-blur:blur(12px) saturate(135%)}}

/* ---------- glow orbs behind everything ---------- */
.orbs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.34;will-change:transform}
.orb.o1{width:38rem;height:38rem;left:-10rem;top:8%;background:radial-gradient(circle,#ff5b35,rgba(255,91,53,0) 70%);animation:drift1 38s ease-in-out infinite alternate}
.orb.o2{width:34rem;height:34rem;right:-12rem;top:38%;background:radial-gradient(circle,#8d7dff,rgba(141,125,255,0) 70%);opacity:.3;animation:drift2 44s ease-in-out infinite alternate}
.orb.o3{width:28rem;height:28rem;left:30%;bottom:-10rem;background:radial-gradient(circle,#d8c3a2,rgba(216,195,162,0) 70%);opacity:.2;animation:drift3 52s ease-in-out infinite alternate}
.orb.o4{width:20rem;height:20rem;right:22%;top:-6rem;background:radial-gradient(circle,#ff5b35,rgba(255,91,53,0) 70%);opacity:.18;animation:drift2 36s ease-in-out infinite alternate-reverse}
@keyframes drift1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(18vw,22vh) scale(1.15)}100%{transform:translate(6vw,48vh) scale(.92)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-22vw,-16vh) scale(1.1)}100%{transform:translate(-8vw,24vh) scale(.95)}}
@keyframes drift3{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-20vw,-30vh) scale(1.2)}100%{transform:translate(16vw,-12vh) scale(1)}}
@media (max-width:860px){.orb{filter:blur(60px)}.orb.o1{width:24rem;height:24rem}.orb.o2{width:22rem;height:22rem}.orb.o3,.orb.o4{width:16rem;height:16rem}}

/* ---------- glass surfaces ---------- */
.card,.product,.frame,.pillar,.mcol,.engine,.alt,.ws,.type,.cta,.dash,.stats,.demo-stage,.steps li,.mitem,.blk,.cn,.demo-row,.demo-loc,.faq details,.seg,.ph-card,.dpanel,.layer-stack div,.gatebox{
  background:linear-gradient(180deg,var(--glass-fill-1),var(--glass-fill-2));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);
}
.faq details{border-radius:var(--r);padding:1rem 1.1rem;margin-bottom:.5rem;border-top:1px solid var(--glass-line)}
.faq details:last-child{border-bottom:1px solid var(--glass-line)}
.alt{border-style:solid}
.p-visual,.scene{background:radial-gradient(circle at 50% 60%,rgba(141,125,255,.14),transparent 65%),rgba(10,10,14,.35)}
.stat{border-color:var(--glass-line)}
.dash{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.dpanel,.ph-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.map{background:rgba(17,17,22,.7)}

/* hairline rows become frosted strips on hover */
.row-item,.lrow,.stream,.mrow{transition:background .25s}
.row-item:hover,.lrow:hover,.stream:hover{background:linear-gradient(90deg,rgba(255,255,255,.035),transparent)}

/* ---------- phone mockup: glass bezel ---------- */
.phone{background:linear-gradient(180deg,rgba(22,22,28,.72),rgba(12,12,15,.82));-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 40px 90px -30px rgba(0,0,0,.9),0 0 0 6px rgba(6,6,7,.7),0 0 0 7px rgba(255,255,255,.12)}

/* ---------- header, strip, menu ---------- */
.site-head{background:rgba(10,10,12,.5);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:inset 0 -1px 0 rgba(255,255,255,.04),0 10px 30px -20px rgba(0,0,0,.8)}
.sos-strip{background:rgba(255,91,53,.09);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media (max-width:860px){.nav{background:rgba(10,10,12,.82);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)}}
.menu-btn{background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}

/* ---------- glass buttons, tags, chips ---------- */
.btn{background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.btn:hover{background:rgba(255,91,53,.12)}
.btn.primary{background:linear-gradient(180deg,#ff7050,#ff5b35 60%,#f04a24);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 30px -12px rgba(255,91,53,.65)}
.btn.primary:hover{background:linear-gradient(180deg,#ff8060,#ff6440 60%,#f05430)}
.tag{background:rgba(255,255,255,.045);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.tag.solid{box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.status,.ico-box,.chip-btn,.wref,.critical .cp,.av{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.status{background:rgba(255,255,255,.05)}
.ico-box:not(.a):not(.v):not(.s):not(.g){background:rgba(255,255,255,.04)}
.seg button[aria-selected="true"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}

/* ---------- table as a glass panel ---------- */
.tbl-scroll{border-radius:var(--r);border:1px solid var(--glass-line);background:linear-gradient(180deg,var(--glass-fill-1),var(--glass-fill-2));-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow)}
.tbl tr:last-child td{border-bottom:0}

/* ---------- footer ---------- */
.site-foot{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}

/* ---------- fallback: no backdrop-filter → slightly more opaque surfaces ---------- */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .card,.product,.frame,.pillar,.mcol,.engine,.alt,.ws,.type,.cta,.dash,.stats,.demo-stage,.steps li,.mitem,.blk,.cn,.demo-row,.demo-loc,.faq details,.seg,.tbl-scroll,.phone{background:rgba(22,22,27,.92)}
  .site-head,.nav{background:rgba(10,10,12,.96)}
  .btn,.tag,.status{background:rgba(30,30,36,.9)}
}
@media (prefers-reduced-motion:reduce){.orb{animation:none}}