/* SCALUS — own-brand concept system (sc.css)
   Black iOS-26 glass · Scalus green #32cf75 · orange #FF4D00 accent */
:root{
  --bg:#070808; --bg-2:#0c0e0d; --panel:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --ink:#f5f7f6; --ink-soft:#b8c0bc; --ink-mute:#79827d;
  --green:#32cf75; --green-soft:rgba(50,207,117,.14); --orange:#FF4D00;
  --r:22px; --r-sm:14px; --blur:blur(26px) saturate(1.4);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);
  -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
img{max-width:100%}
a{color:var(--green)}
::selection{background:var(--green);color:#04130a}

.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.wrap-n{max-width:880px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.08}
h1{font-size:clamp(2.5rem,6vw,4.4rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:1.18rem;font-weight:700}
.lead{color:var(--ink-soft);font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.65}
.green{color:var(--green)}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:1.1rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
.eyebrow::before{content:'' !important;display:none !important}
.eyebrow.line::before{content:none}
section{padding:88px 0;position:relative}
.sect-head{max-width:680px;margin:0 auto 48px;text-align:center}
.sect-head p{margin-top:14px;color:var(--ink-soft)}

/* ambient glow */
.glow{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(900px 540px at 82% -10%, rgba(50,207,117,.13), transparent 60%),
   radial-gradient(760px 480px at -10% 38%, rgba(14,162,222,.08), transparent 60%),
   radial-gradient(680px 460px at 70% 105%, rgba(255,77,0,.07), transparent 60%)}

/* glass panel */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06)}
.panel:hover{border-color:var(--line-2)}

/* nav */
.nav{position:fixed;top:14px;left:0;right:0;z-index:60}
.nav .bar{max-width:1140px;margin:0 auto;padding:10px 14px 10px 20px;display:flex;align-items:center;gap:18px;
  background:rgba(10,12,11,.66);border:1px solid var(--line);border-radius:999px;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);width:calc(100% - 32px);transition:background .3s}
.nav.scrolled .bar{background:rgba(10,12,11,.82)}
.nav img{height:20px;width:auto}
/* desktop bar order: logo · links · demo button */
.nav .bar>a:first-child,.nav img{order:0}
.nav .links{order:1;display:flex;gap:22px;margin-left:auto;align-items:center}
.nav .bar>.btn{order:2}
.nav .links a{color:var(--ink-soft);text-decoration:none;font-size:.86rem;font-weight:600}
.nav .links a:hover{color:var(--ink)}
/* hamburger button — hidden on desktop */
.navtoggle{display:none;width:40px;height:40px;flex:0 0 auto;border:1px solid var(--line);
  border-radius:12px;background:rgba(255,255,255,.04);cursor:pointer;align-items:center;justify-content:center;padding:0}
.navtoggle span{display:block;position:relative;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.navtoggle span::before,.navtoggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.navtoggle span::before{top:-6px}.navtoggle span::after{top:6px}
.nav.open .navtoggle span{background:transparent}
.nav.open .navtoggle span::before{top:0;transform:rotate(45deg)}
.nav.open .navtoggle span::after{top:0;transform:rotate(-45deg)}

/* tighten link gaps + shrink the demo CTA before the nav crushes */
@media(max-width:1080px){
  .nav .links{gap:14px}
  .nav .links a{font-size:.82rem}
  .nav .bar>.btn{padding:9px 16px;font-size:.8rem}
}

/* collapse to hamburger well before the links overflow */
@media(max-width:1000px){
  .nav .bar{position:relative}
  .nav img{height:26px}
  .navtoggle{display:flex;order:3}
  /* center the demo button between the logo and the hamburger */
  .nav .bar>.btn{order:2;margin:0 auto}
  .nav .links{order:4;position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    margin:0;padding:8px;background:rgba(10,12,11,.94);border:1px solid var(--line);border-radius:22px;
    -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:0 16px 50px rgba(0,0,0,.5);
    opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s,transform .25s}
  .nav.open .links{opacity:1;transform:none;pointer-events:auto}
  .nav .links a{padding:13px 16px;border-radius:14px;font-size:.98rem}
  .nav .links a:hover{background:rgba(255,255,255,.05)}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;cursor:pointer;
  border-radius:999px;padding:14px 28px;font:inherit;font-size:.95rem;font-weight:700;
  text-decoration:none;border:1px solid transparent;transition:transform .25s, box-shadow .25s, background .25s}
.btn:active{transform:scale(.97)}
.btn-green{background:var(--green);color:#04130a;box-shadow:0 10px 32px rgba(50,207,117,.35)}
.btn-green:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(50,207,117,.45)}
.btn-ghost{background:rgba(255,255,255,.06);border-color:var(--line-2);color:var(--ink);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-sm{padding:10px 20px;font-size:.84rem}

/* checks / chips */
.checks{list-style:none;display:grid;gap:12px;margin:26px 0}
.checks li{display:flex;gap:.7em;align-items:flex-start;color:var(--ink-soft);font-weight:500}
.checks svg{width:1.25em;height:1.25em;flex:none;color:var(--green);margin-top:.18em}
.chip{display:inline-flex;align-items:center;gap:.5em;padding:7px 14px;border-radius:999px;
  background:var(--green-soft);border:1px solid rgba(50,207,117,.3);color:var(--green);
  font-size:.78rem;font-weight:700;letter-spacing:.04em}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* feature grid */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.fcard{padding:30px 26px}

/* ===== Two-arms cards: equal height, CTA pinned to the bottom ===== */
.split.even{align-items:stretch}
.split.even .fcard{display:flex;flex-direction:column;height:100%;min-height:320px}
.split.even .fcard .btn{margin-top:auto;align-self:flex-start}

/* ===== "On another level" — premium animated enterprise card ===== */
.card-elevated{position:relative;isolation:isolate;overflow:visible;animation:elevFloat 7s ease-in-out infinite}
@keyframes elevFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* animated glow on scalus.io link inside the card */
.card-elevated h3{position:relative}
.card-elevated h3 a{position:relative;display:inline-block;padding:0 6px}
.card-elevated h3 a::before{content:"";position:absolute;inset:-3px -6px;border-radius:6px;
  background:radial-gradient(circle at 50% 50%, rgba(50,207,117,.25), rgba(50,207,117,.08) 60%);
  z-index:-1;animation:linkpulse 2.5s ease-in-out infinite;pointer-events:none}
@keyframes linkpulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.75;transform:scale(1.05)}}
/* rotating conic glow ring sitting just behind the card */
.card-elevated::before{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-2;padding:2px;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(50,207,117,.9) 70deg,rgba(95,227,154,.5) 110deg,transparent 180deg,transparent 250deg,rgba(255,122,60,.55) 320deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:elevSpin 6s linear infinite;opacity:.9}
@keyframes elevSpin{to{transform:rotate(360deg)}}
/* soft pulsing aura halo */
.card-elevated::after{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-3;
  box-shadow:0 0 60px rgba(50,207,117,.35);animation:elevHalo 4s ease-in-out infinite}
@keyframes elevHalo{0%,100%{box-shadow:0 0 50px rgba(50,207,117,.28)}50%{box-shadow:0 0 90px rgba(50,207,117,.5),0 0 40px rgba(255,122,60,.22)}}
.card-elevated:hover{animation-play-state:paused}
.card-elevated:hover::before{animation-duration:2.4s}
/* the "Enterprise" eyebrow chip above the title */
.elev-tag{display:inline-flex;align-items:center;gap:.5em;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.elev-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.8s infinite}
/* shimmer sweep across the card surface */
.card-elevated .shimmer{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
.card-elevated .shimmer::before{content:"";position:absolute;top:-50%;left:-60%;width:40%;height:200%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.10),transparent);transform:rotate(8deg);
  animation:elevShimmer 5.5s ease-in-out infinite}
@keyframes elevShimmer{0%{left:-60%}55%,100%{left:130%}}
.card-elevated>*:not(.shimmer){position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.card-elevated,.card-elevated::before,.card-elevated::after,.card-elevated .shimmer::before,.elev-tag .dot{animation:none!important}}
.fcard .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--green-soft);border:1px solid rgba(50,207,117,.3);color:var(--green)}
.fcard .ic svg{width:22px;height:22px}
.fcard h3{margin-bottom:8px}
.fcard p{color:var(--ink-soft);font-size:.93rem}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;align-items:stretch}
.tier{padding:34px 30px;display:flex;flex-direction:column;position:relative}
.tier.star{border-color:rgba(50,207,117,.5);box-shadow:0 30px 70px rgba(50,207,117,.12), inset 0 1px 0 rgba(255,255,255,.08)}
.tier .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--green);color:#04130a;font-size:.7rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 16px;border-radius:999px}
.tier .tname{font-size:.8rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.tier .price{margin:14px 0 4px;font-size:2.6rem;font-weight:800;letter-spacing:-.03em}
.tier .price span{font-size:1rem;font-weight:600;color:var(--ink-mute)}
.tier .per{font-size:.8rem;color:var(--ink-mute);margin-bottom:20px}
.tier .checks{flex:1;gap:9px;font-size:.92rem}
.tier .btn{width:100%;margin-top:24px}

/* product mock UI */
.ui{border-radius:var(--r);border:1px solid var(--line-2);overflow:hidden;
  background:linear-gradient(180deg,#101312,#0a0c0b);box-shadow:0 40px 90px rgba(0,0,0,.6)}
/* whole-box orange glow behind the panel when a new notification lands,
   fading back over 2s (re-armed on each insert by toggling .flash in JS) */
.ui.flash{animation:uiflash 2s ease-out}
@keyframes uiflash{
  0%   {box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,77,0,.55), 0 0 34px 4px rgba(255,77,0,.45)}
  100% {box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,77,0,0),   0 0 34px 4px rgba(255,77,0,0)}
}
@media(prefers-reduced-motion:reduce){.ui.flash{animation:none}}
.ui .ui-top{display:flex;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line)}
.ui .ui-top i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}
.ui .ui-top i:first-child{background:#ff5f57}.ui .ui-top i:nth-child(2){background:#febc2e}.ui .ui-top i:nth-child(3){background:#28c840}
.ui-row{display:flex;gap:12px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line);font-size:.86rem}
.ui-row:last-child{border-bottom:0}
.ui-row .av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:800;font-size:.78rem;background:var(--green-soft);color:var(--green);border:1px solid rgba(50,207,117,.3)}
.ui-row .av.o{background:rgba(255,77,0,.14);color:var(--orange);border-color:rgba(255,77,0,.3)}
.ui-row .av.b{background:rgba(14,162,222,.14);color:#5ec5ec;border-color:rgba(14,162,222,.3)}
.ui-row b{display:block;font-size:.85rem}
.ui-row small{color:var(--ink-mute);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
.ui-row .src{margin-left:auto;flex:none;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink-soft)}
/* Fixed-size window: the panel NEVER changes height. JS pins the feed to its
   exact 5-row height and clips it, so a 6th (incoming) row can't grow the box —
   the new row slides in the top as the bottom one is pushed out of the clip at
   the same rate, like a new iMessage. overflow:hidden is what holds the size. */
[data-feed]{position:relative;overflow:hidden;will-change:transform}
/* a freshly arrived row glows orange gently, then fades back to green, then transparent */
.ui-row.new{animation:newflash 6.8s ease-out forwards}
@keyframes newflash{
  0%   {background:rgba(255,77,0,.15); box-shadow:inset 0 0 24px rgba(255,77,0,.22)}
  8%   {background:rgba(255,77,0,.14); box-shadow:inset 0 0 22px rgba(255,77,0,.20)}
  28%  {background:rgba(255,77,0,.08); box-shadow:inset 0 0 18px rgba(255,77,0,.12)}
  60%  {background:rgba(50,207,117,.06); box-shadow:inset 0 0 14px rgba(50,207,117,.10)}
  100% {background:transparent; box-shadow:inset 0 0 0 rgba(50,207,117,0)}
}
@media(prefers-reduced-motion:reduce){.ui-row.new{animation:none}}

/* stats strip */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;text-align:center}
.stat .n{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;letter-spacing:-.03em;color:var(--green)}
.stat .l{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-weight:700}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;counter-reset:step}
.step{padding:30px 26px;counter-increment:step}
.step::before{content:"0" counter(step);display:block;font-size:2rem;font-weight:800;color:var(--green);margin-bottom:12px;letter-spacing:-.03em}
.step h3{margin-bottom:8px}
.step p{color:var(--ink-soft);font-size:.92rem}
.step small{display:inline-block;margin-top:12px;color:var(--ink-mute);font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* logos */
.logos{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:center;opacity:.8}
.logos img{height:42px;width:auto;filter:grayscale(1) brightness(1.6);opacity:.7;transition:.3s}
.logos img:hover{filter:none;opacity:1}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.quote{padding:30px 28px}
.quote .stars{color:var(--green);letter-spacing:.15em;margin-bottom:14px}
.quote p{color:var(--ink-soft);font-size:.95rem}
.quote footer{margin-top:18px;font-weight:700;font-size:.88rem}
.quote footer span{display:block;color:var(--ink-mute);font-weight:500;font-size:.78rem}

/* FAQ */
.faq{display:grid;gap:12px}
.faq details{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green);font-size:1.3rem;font-weight:600;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 22px 20px;color:var(--ink-soft);font-size:.93rem}

/* forms */
.form{display:grid;gap:14px}
.form input,.form select,.form textarea{width:100%;padding:15px 18px;border-radius:var(--r-sm);font:inherit;
  background:rgba(255,255,255,.08);border:1px solid var(--line-2);color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--green)}
.form ::placeholder{color:var(--ink-mute)}
.form button{display:none}
.thanks{text-align:center;padding:30px 10px}
.thanks .seal{width:62px;height:62px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  background:var(--green-soft);border:1px solid rgba(50,207,117,.4);color:var(--green)}
.thanks .seal svg{width:28px;height:28px}


/* picker (hub) */
.pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:52px}
.pcard{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .35s, box-shadow .35s}
.pcard:hover{transform:translateY(-6px);box-shadow:0 36px 80px rgba(0,0,0,.6)}
.pbody{padding:28px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard .tag{font-size:.7rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.pcard .best{align-self:flex-start;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:var(--green);color:#04130a;padding:5px 12px;border-radius:999px}
.pcard p{color:var(--ink-soft);font-size:.92rem;flex:1}
.pcard .go{display:inline-flex;align-items:center;gap:.5em;color:var(--green);font-weight:700;font-size:.9rem;margin-top:6px}
.pimg-top{aspect-ratio:16/9;background:linear-gradient(135deg,#0e1411,#101a14);display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.pimg-top img{width:78%;height:auto;border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.5)}

/* hero split */
.hero{min-height:92vh;display:flex;align-items:center;padding:150px 0 80px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* reveal */
.js-anim .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s, transform .8s}
.js-anim .reveal.in{opacity:1;transform:none}

/* footer */
footer.site{padding:64px 0 44px;border-top:1px solid var(--line);text-align:center}
footer.site p{color:var(--ink-mute);font-size:.85rem}
.disclaimer{max-width:680px;margin:18px auto 0;font-size:.72rem;color:var(--ink-mute);opacity:.8}
.built-by{display:inline-flex;align-items:center;gap:.55em;margin-top:26px;
  font-size:.7rem;font-weight:600;line-height:1;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute);text-decoration:none;opacity:.85;transition:opacity .3s}
.built-by img{height:13px;width:auto;display:block}
.built-by b{color:var(--ink-soft);font-weight:700;letter-spacing:.22em}
.built-by:hover{opacity:1}

/* misc */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.kbd{font-size:.78rem;border:1px solid var(--line-2);border-radius:6px;padding:2px 8px;color:var(--ink-soft)}

/* ===== v2 additions — scalus.io-style showcase ===== */
.grad{background:linear-gradient(100deg,#fff 30%,var(--green) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.glow.io{background:
   radial-gradient(1100px 640px at 78% -12%, rgba(50,207,117,.20), transparent 62%),
   radial-gradient(700px 520px at 8% 16%, rgba(50,207,117,.08), transparent 60%),
   radial-gradient(640px 480px at 88% 60%, rgba(255,77,0,.10), transparent 60%),
   linear-gradient(180deg,#081009,#070808 40%)}

/* client marquee */
.marquee{overflow:hidden;position:relative;padding:10px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee .track{display:flex;gap:16px;width:max-content;animation:mq 36s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.cl-pill{display:flex;align-items:center;gap:12px;padding:14px 22px;border-radius:999px;white-space:nowrap;
  background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.cl-pill b{font-size:.95rem}
.cl-pill span{font-size:.74rem;color:var(--ink-mute);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.cl-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 1.8s infinite}

/* phone (SMS demo) */
.phone{width:300px;max-width:100%;margin:0 auto;border-radius:38px;border:1px solid var(--line-2);
  background:linear-gradient(180deg,#101312,#0a0c0b);padding:16px 14px 22px;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.phone .notch{width:96px;height:22px;border-radius:999px;background:#000;margin:0 auto 16px;border:1px solid var(--line)}
.msgs{display:grid;gap:9px;min-height:300px;align-content:end}
.msg{max-width:84%;padding:10px 14px;border-radius:18px;font-size:.82rem;line-height:1.45;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .5s,transform .5s}
.msg.show{opacity:1;transform:none}
.msg.in{background:rgba(255,255,255,.09);border-bottom-left-radius:6px;justify-self:start}
.msg.out{background:var(--green);color:#04130a;font-weight:500;border-bottom-right-radius:6px;justify-self:end}
.msg time{display:block;font-size:.6rem;opacity:.6;margin-top:3px}

/* dashboard demo */
.dash{padding:24px}
.dash .dh{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.dash .dh b{font-size:.92rem}
.dash .dh small{color:var(--ink-mute);font-size:.72rem}
.dkpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.dkpi{padding:14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.dkpi .v{font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.dkpi .k{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.dkpi .up{color:var(--green);font-size:.68rem;font-weight:700}
.chart{position:relative}
.chart svg{width:100%;height:auto;display:block}
.chart .ln{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:600;stroke-dashoffset:600}
.chart .ar{fill:url(#gfill);opacity:0}
.in .chart .ln, .chart.in .ln{animation:draw 1.8s .2s ease-out forwards}
.in .chart .ar, .chart.in .ar{animation:fadein 1s 1.2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
.bars{display:flex;gap:6px;align-items:flex-end;height:64px}
.bars i{flex:1;border-radius:4px 4px 0 0;background:rgba(50,207,117,.35);transform:scaleY(0);transform-origin:bottom;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.in .bars i{transform:scaleY(1)}
.bars i:nth-child(even){background:rgba(50,207,117,.7)}

/* review demo */
.rev-card{padding:22px;display:grid;gap:10px}
.rev-card .g{display:flex;align-items:center;gap:10px}
.rev-card .stars{color:#fbbc04;letter-spacing:.1em}
.rev-card p{font-size:.88rem;color:var(--ink-soft)}
.rev-flow{display:grid;gap:12px}
.rev-step{display:flex;gap:14px;align-items:center;padding:14px 18px;border-radius:var(--r-sm);
  background:var(--panel);border:1px solid var(--line)}
.rev-step .n{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--green-soft);border:1px solid rgba(50,207,117,.35);color:var(--green);font-weight:800;font-size:.8rem}
.rev-step p{font-size:.88rem;color:var(--ink-soft);margin:0}
.rev-step b{color:var(--ink)}

/* staggered reveal */
.js-anim .stagger > *{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
.js-anim .stagger.in > *{opacity:1;transform:none}
.js-anim .stagger.in > *:nth-child(2){transition-delay:.12s}
.js-anim .stagger.in > *:nth-child(3){transition-delay:.24s}
.js-anim .stagger.in > *:nth-child(4){transition-delay:.36s}
.js-anim .stagger.in > *:nth-child(5){transition-delay:.48s}
.js-anim .stagger.in > *:nth-child(6){transition-delay:.6s}

/* floating accents */
.float{animation:floaty 7s ease-in-out infinite}
.float.d2{animation-delay:-3.5s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(prefers-reduced-motion:reduce){.float,.marquee .track{animation:none}}

/* animated AI flower mark */
.aimark-container{width:280px;height:280px;display:flex;align-items:center;justify-content:center}
.aimark{width:100%;height:100%;filter:drop-shadow(0 8px 28px rgba(50,207,117,.25))}
.aimark .petals{transform-origin:60px 60px;animation:knotspin 26s linear infinite}
.aimark .rays{transform-origin:60px 60px;animation:knotspin 40s linear infinite reverse}
@keyframes knotspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.aimark .hub{transform-origin:60px 60px;animation:hubpulse 4s ease-in-out infinite}
@keyframes hubpulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
.aimark .petal{opacity:.25;stroke:#2f7d56;transition:opacity .7s ease,stroke .7s ease}
.aimark .petal.lit{opacity:1;stroke:#5fe39a}

/* small-screen polish */
@media(max-width:560px){
  .chip{white-space:normal;text-align:left;font-size:.7rem;line-height:1.4}
  .cta-row .btn{width:100%;font-size:.88rem}
  .hero{padding-top:120px}
  .phone{width:260px}
  .aimark-container{width:200px;height:200px}
}

/* redacted (privacy-blurred) bits in the live feed */
.redact{filter:blur(5px);opacity:.85;user-select:none;pointer-events:none;display:inline-block}

/* feed: client attribution + stacked pills */
.ui-row .meta{margin-left:auto;flex:none;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.ui-row .meta .src{margin-left:0}
.ui-row .cl{flex:none;font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:var(--green-soft);border:1px solid rgba(50,207,117,.3);color:var(--green);white-space:nowrap}
@media(max-width:560px){.ui-row .cl{display:none}}

/* feed timestamps */
.ui-row .ago{font-size:.62rem;color:var(--ink-mute);white-space:nowrap;font-weight:600}

/* ===== Motion layer v2 (scalus.io feel) =====
   All hide/transform states are gated on html.js + .mv tagging added by sc.js,
   so content stays fully visible with JS off (and in headless snaps). */

/* nav CTA: keep dark text (beats .nav .links a color) */
.nav .links a.btn-green{color:#04130a}

/* drifting orbs */
.orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.orbs i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.16;will-change:transform}
.orbs i.a{width:480px;height:480px;background:#32cf75;top:-140px;right:-120px;animation:orbA 26s ease-in-out infinite}
.orbs i.b{width:380px;height:380px;background:#0e8f4a;bottom:-160px;left:-120px;animation:orbB 32s ease-in-out infinite}
.orbs i.c{width:260px;height:260px;background:#FF4D00;top:48%;left:62%;opacity:.05;animation:orbC 40s ease-in-out infinite}
@keyframes orbA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-90px,70px) scale(1.12)}}
@keyframes orbB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(110px,-80px) scale(.92)}}
@keyframes orbC{0%,100%{transform:translate(0,0)}33%{transform:translate(-70px,-50px)}66%{transform:translate(50px,40px)}}
/* animated grid mesh — the scalus.io ambient layer */
.mesh{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(50,207,117,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(50,207,117,.06) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);
  animation:meshpan 40s linear infinite}
@keyframes meshpan{from{background-position:0 0,0 0}to{background-position:54px 54px,54px 54px}}
@media(prefers-reduced-motion:reduce){.mesh{animation:none}}

/* ===== Flow visual: inputs → considered decision (ported from scalus.io) ===== */
.flow-wrap{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:1/1.04}
.flow-wrap svg.wires{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.flow-wrap svg.wires path{fill:none;stroke:rgba(50,207,117,.22);stroke-width:1.4;stroke-dasharray:4 6}
.flow-wrap svg.wires path.warm{stroke:rgba(255,122,60,.28)}
.flow-cap{position:absolute;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);z-index:4;white-space:nowrap}
.flow-cap.in{left:5%;top:0}
.inn{position:absolute;left:5%;width:50px;height:50px;border-radius:15px;background:var(--panel);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;z-index:3;
  box-shadow:0 8px 22px rgba(0,0,0,.4);animation:bobin 6s ease-in-out infinite}
.inn svg{width:23px;height:23px;stroke:#5fe39a}
.inn.warm svg{stroke:#ff9466}
.i1{top:9%}.i2{top:22%}.i3{top:35%}.i4{top:48%}.i5{top:61%}.i6{top:74%}.i7{top:87%}
.i2{animation-delay:-.8s}.i3{animation-delay:-1.6s}.i4{animation-delay:-2.4s}.i5{animation-delay:-3.2s}.i6{animation-delay:-4s}.i7{animation-delay:-4.8s}
.flow-core{position:absolute;width:150px;height:150px;border-radius:38px;left:66%;top:50%;transform:translate(-50%,-50%);
  background:linear-gradient(150deg,rgba(15,38,26,.94),rgba(8,22,15,.92));border:1px solid rgba(50,207,117,.34);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;z-index:5;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 0 64px rgba(50,207,117,.4),inset 0 1px 0 rgba(255,255,255,.14);animation:coreglow 4s ease-in-out infinite}
@keyframes coreglow{0%,100%{box-shadow:0 0 64px rgba(50,207,117,.4),inset 0 1px 0 rgba(255,255,255,.14)}50%{box-shadow:0 0 96px rgba(50,207,117,.62),inset 0 1px 0 rgba(255,255,255,.18)}}
.aimark{width:74px;height:74px;display:block;filter:drop-shadow(0 4px 16px rgba(50,207,117,.5))}
.aimark .petals{transform-origin:60px 60px;animation:knotspin 26s linear infinite}
.aimark .rays{transform-origin:60px 60px;animation:knotspin 40s linear infinite reverse}
@keyframes knotspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.aimark .hub{transform-origin:60px 60px;animation:hubpulse 4s ease-in-out infinite}
@keyframes hubpulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
.aimark .petal{opacity:.25;stroke:#2f7d56;transition:opacity .7s ease,stroke .7s ease}
.aimark .petal.lit{opacity:1;stroke:#5fe39a}
.aimark .petal.flash{animation:petalpop .8s ease-out}
@keyframes petalpop{0%{opacity:.25}30%{opacity:1;stroke-width:3.4}100%{opacity:1}}
.aimark.solved .hub{animation:hubsolve 1.6s ease-in-out;stroke:#ffcf6a}
@keyframes hubsolve{0%{transform:scale(1);stroke:#ff7a3c}40%{transform:scale(2.1);stroke:#ffe39a;stroke-width:4}100%{transform:scale(1);stroke:#ff7a3c}}
.flow-core.solved{animation:coresolve 1.6s ease-in-out}
@keyframes coresolve{0%,100%{box-shadow:0 0 64px rgba(50,207,117,.4),inset 0 1px 0 rgba(255,255,255,.14)}45%{box-shadow:0 0 140px rgba(120,255,180,.95),0 0 60px rgba(255,180,90,.7),inset 0 1px 0 rgba(255,255,255,.3);border-color:rgba(120,255,180,.7)}}
.aimark .petal.dissolving{animation:petaldissolve .9s ease-in forwards}
@keyframes petaldissolve{0%{opacity:1;stroke:#5fe39a;stroke-width:2.4}55%{opacity:.55;stroke:#bfe8d2}100%{opacity:.25;stroke:#2f7d56;stroke-width:2.4}}
.flow-core span{font-weight:700;font-size:12.5px;color:var(--ink);letter-spacing:-.005em;text-align:center;line-height:1.18;padding:0 8px}
@keyframes bobin{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* sequenced build: icon pops in → its wire grows → a petal lights up */
.flow-wrap.anim .inn{animation:none!important;opacity:0;transform:scale(.6);transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.flow-wrap.anim .inn.on{opacity:1;transform:none}
.flow-wrap.anim svg.wires path{clip-path:inset(0 100% 0 0) fill-box;transition:clip-path .6s cubic-bezier(.3,.7,.3,1)}
.flow-wrap.anim svg.wires path.on{clip-path:inset(0 0 0 0) fill-box}
.spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);z-index:6;pointer-events:none}
.spark.warm{background:#ff9466;box-shadow:0 0 12px var(--orange)}
@media(max-width:520px){
  .inn{width:42px;height:42px;border-radius:13px}
  .inn svg{width:20px;height:20px}
  .flow-core{width:120px;height:120px;border-radius:30px;left:65%}
  .aimark{width:58px;height:58px}
  .flow-core span{font-size:10.5px}
  .flow-cap{font-size:9px;letter-spacing:.1em}
}
@media(prefers-reduced-motion:reduce){.flow-wrap *{animation:none!important}.flow-wrap .inn,.flow-wrap svg.wires path{opacity:1!important;transform:none!important;clip-path:none!important}.aimark .petal{opacity:1;stroke:#5fe39a}}

/* JS-tagged reveals */
html.js .mv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
html.js .mv.in{opacity:1;transform:none}
html.js .mv-l{transform:translateX(-30px)}
html.js .mv-r{transform:translateX(30px)}
html.js .mv-s{transform:scale(.94) translateY(14px)}

/* hero headline word stagger */
html.js .hw{display:inline-block;opacity:0;transform:translateY(.6em) rotate(2deg);
  animation:hw .9s cubic-bezier(.22,1,.36,1) forwards}
@keyframes hw{to{opacity:1;transform:none}}

/* button shine sweep */
.btn{position:relative;overflow:hidden}
.btn-green::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .7s ease}
.btn-green:hover::after{left:130%}

/* card hover lift+tilt base (JS drives the tilt vars) */
@media(hover:hover) and (pointer:fine){
  .panel,.fcard{transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .35s}
  .panel:hover,.fcard:hover{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(-4px);
    box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(50,207,117,.12)}
}

/* scroll progress bar */
.sprog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#32cf75,#7df0ae);
  box-shadow:0 0 12px rgba(50,207,117,.7)}

@media(prefers-reduced-motion:reduce){
  .orbs i{animation:none}
  html.js .mv{opacity:1;transform:none;transition:none}
  html.js .hw{animation:none;opacity:1;transform:none}
}

/* mobile overflow fix: let the hero feed shrink inside the grid */
.hero-grid > *{min-width:0}
.ui-row > div{min-width:0}
.ui-row small{max-width:100%}
@media(max-width:560px){
  .ui-row .meta{display:none}
  .ui-row small{max-width:none}
}

/* ===== Talk to me now (voice AI callback) ===== */
.talk-now{position:fixed;left:18px;bottom:18px;z-index:70;display:inline-flex;align-items:center;gap:.55em;
  padding:12px 20px;border-radius:999px;cursor:pointer;font:inherit;font-size:.86rem;font-weight:700;
  background:rgba(10,12,11,.78);border:1px solid rgba(50,207,117,.45);color:var(--ink);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:0 12px 36px rgba(0,0,0,.5),0 0 24px rgba(50,207,117,.18);transition:transform .25s,box-shadow .25s}
.talk-now:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(0,0,0,.55),0 0 34px rgba(50,207,117,.3)}
.talk-now .tdot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 1.6s infinite}
@media(max-width:560px){.talk-now{bottom:84px;font-size:.8rem;padding:11px 16px}}

.talk-modal{position:fixed;inset:0;z-index:120;display:none;align-items:flex-end;justify-content:flex-start;padding:18px}
.talk-modal.open{display:flex}
.talk-modal .back{position:absolute;inset:0;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.talk-card{position:relative;width:min(360px,calc(100vw - 36px));padding:26px 24px;border-radius:var(--r);
  background:rgba(12,14,13,.92);border:1px solid var(--line-2);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 40px rgba(50,207,117,.12)}
.talk-card h3{margin:0 0 6px;font-size:1.05rem}
.talk-card p{margin:0 0 16px;font-size:.84rem;color:var(--ink-soft)}
.talk-card input{width:100%;padding:14px 16px;border-radius:var(--r-sm);font:inherit;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--ink);margin-bottom:12px}
.talk-card input:focus{outline:none;border-color:var(--green)}
.talk-card .btn{width:100%}
.talk-card .x{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--ink-mute);
  font-size:1.2rem;cursor:pointer;line-height:1}
.talk-card .fine{margin:10px 0 0;font-size:.7rem;color:var(--ink-mute);text-align:center}
@media(max-width:560px){.talk-modal{justify-content:center;align-items:center}}

/* alternating sections: translucent gradient wash instead of a solid slab —
   no hard edges, and the node-network background stays visible through it */
section.alt{background:linear-gradient(180deg,
  rgba(255,255,255,0) 0%, rgba(255,255,255,.032) 22%,
  rgba(255,255,255,.032) 78%, rgba(255,255,255,0) 100%)}

/* ===== Scalus-skinned chat launcher (replaces the GHL bubble) ===== */
chat-widget{opacity:0 !important;pointer-events:none !important;transition:opacity .25s}
chat-widget.sc-open{opacity:1 !important;pointer-events:auto !important}
.sc-chat{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;align-items:center;gap:10px;
  height:56px;padding:0 18px 0 16px;border-radius:999px;border:1px solid rgba(50,207,117,.5);cursor:pointer;
  background:linear-gradient(135deg,rgba(20,40,28,.92),rgba(10,14,12,.92));color:var(--ink);
  font:inherit;font-size:.86rem;font-weight:700;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 28px rgba(50,207,117,.25);
  transition:transform .25s,box-shadow .25s,opacity .25s}
.sc-chat:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 18px 48px rgba(0,0,0,.6),0 0 40px rgba(50,207,117,.4)}
.sc-chat.hide{opacity:0;pointer-events:none;transform:translateY(8px)}
.sc-chat .ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--green);color:#04130a;box-shadow:0 0 16px rgba(50,207,117,.6)}
.sc-chat .ic svg{width:18px;height:18px}
.sc-chat .on{position:absolute;top:4px;right:6px;width:9px;height:9px;border-radius:50%;
  background:var(--green);border:2px solid #0a0c0b;animation:pulse 1.6s infinite}
@media(max-width:560px){.sc-chat{height:52px;padding:0 14px;font-size:.8rem;right:14px}}

/* ===== Scalus chat frame: our chrome around the bare GHL chat pane ===== */
.sc-chat-head{position:fixed;right:18px;bottom:578px;width:380px;height:64px;z-index:121;
  display:none;align-items:center;gap:12px;padding:0 16px;
  background:linear-gradient(135deg,#10241a,#0b0d0c);border:1px solid rgba(255,255,255,.14);border-bottom:0;
  border-radius:20px 20px 0 0;box-shadow:0 -16px 50px rgba(0,0,0,.45)}
.sc-chat-head.open{display:flex}
.sc-chat-head .av{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--green);color:#04130a;box-shadow:0 0 16px rgba(50,207,117,.55)}
.sc-chat-head .av svg{width:19px;height:19px}
.sc-chat-head .t b{display:block;font-size:.92rem;color:var(--ink);line-height:1.2}
.sc-chat-head .t small{display:flex;align-items:center;gap:6px;font-size:.7rem;color:var(--ink-mute)}
.sc-chat-head .t small i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.6s infinite}
.sc-chat-head .xx{margin-left:auto;background:rgba(255,255,255,.07);border:1px solid var(--line);
  color:var(--ink-soft);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1rem;line-height:1;
  display:grid;place-items:center;transition:.2s}
.sc-chat-head .xx:hover{background:rgba(255,255,255,.13);color:var(--ink)}
@media(max-width:560px){
  .sc-chat-head{right:10px;left:10px;width:auto;bottom:calc(62vh + 10px)}
}

/* ===== reels: iPhone-framed example videos ===== */
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:880px;margin:0 auto}
.reel{position:relative;border-radius:40px;padding:10px;background:linear-gradient(180deg,#1a1d1c,#0b0d0c);
  border:1px solid var(--line-2);box-shadow:0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08)}
.reel::before{content:"";position:absolute;inset:3px;border-radius:37px;border:1px solid rgba(255,255,255,.05);pointer-events:none}
.reel .scr{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:9/16;background:#000}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel .island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:72px;height:18px;
  border-radius:999px;background:#000;z-index:3;box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.reel .snd{position:absolute;right:12px;bottom:12px;z-index:4;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;border:1px solid rgba(255,255,255,.25);color:#fff;
  background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:.25s}
.reel .snd:hover{background:rgba(0,0,0,.75)}
.reel .snd svg{width:17px;height:17px}
.reel .tag{position:absolute;left:12px;bottom:14px;z-index:4;font-size:.6rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;padding:5px 11px;border-radius:999px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media(max-width:760px){.reels{grid-template-columns:repeat(3,1fr);gap:14px}.reel{border-radius:30px;padding:7px}
  .reel .scr{border-radius:23px}.reel::before{border-radius:27px}.reel .island{width:54px;height:14px;top:9px}
  .reel .snd{width:32px;height:32px;right:9px;bottom:9px}.reel .tag{left:9px;bottom:11px;font-size:.52rem;padding:4px 9px}}

/* ===== posting queue / scheduler mock ===== */
.queue{padding:22px;display:grid;gap:10px}
.queue .qh{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.queue .qh b{font-size:.9rem}
.queue .qh small{color:var(--ink-mute);font-size:.7rem}
.qrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:.82rem}
.qrow .th{width:34px;height:46px;border-radius:8px;flex:none;background:linear-gradient(135deg,#143425,#0c1410);
  border:1px solid rgba(50,207,117,.25);display:grid;place-items:center;color:var(--green)}
.qrow .th svg{width:14px;height:14px}
.qrow b{display:block;font-size:.8rem;line-height:1.3}
.qrow small{color:var(--ink-mute);font-size:.68rem;display:block}
.qrow .when{margin-left:auto;flex:none;text-align:right;font-size:.66rem;color:var(--ink-mute);font-weight:600;line-height:1.5}
.qrow .pl{display:flex;gap:4px;justify-content:flex-end}
.qrow .pl i{font-style:normal;font-size:.56rem;font-weight:800;letter-spacing:.06em;padding:2px 7px;border-radius:999px;
  background:var(--green-soft);border:1px solid rgba(50,207,117,.3);color:var(--green)}

/* ===== platform (omnipresent) grid ===== */
.plats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.plat{padding:22px 18px;text-align:center}
.plat .pic{width:44px;height:44px;border-radius:14px;margin:0 auto 12px;display:grid;place-items:center;
  background:var(--green-soft);border:1px solid rgba(50,207,117,.3);color:var(--green)}
.plat .pic svg{width:21px;height:21px}
.plat b{display:block;font-size:.88rem}
.plat small{color:var(--ink-mute);font-size:.72rem}

/* 3-up feature grid (meta-ads management) */
@media(min-width:761px){.fgrid-3{grid-template-columns:repeat(3,1fr)}}

/* feed channel pills → green icon + tiny label */
.ui-row .src{background:none;border:0;padding:0;margin-left:0;display:flex;flex-direction:column;align-items:center;gap:3px}
.ui-row .src .sic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-soft);border:1px solid rgba(50,207,117,.3);color:var(--green)}
.ui-row .src .sic svg{width:15px;height:15px}
.ui-row .src i{font-style:normal;font-size:.54rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}

/* "Updating live" feed caption */
.feed-live{display:flex;align-items:center;justify-content:flex-end;gap:7px;font-size:.7rem;color:var(--ink-mute);margin-top:10px}
.feed-live .dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.6s infinite}

/* fixed-width centered channel column so icons/labels/times align across rows */
.ui-row .meta{width:84px;flex:none;align-items:center}
.ui-row .meta .ago{text-align:center}

/* prominent feed header title */
.ui-top .feed-title{display:flex;align-items:center;gap:9px;
  font-size:.95rem;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.ui-top .feed-title .dot{width:10px;height:10px;border-radius:50%;background:var(--green);
  box-shadow:0 0 10px rgba(50,207,117,.9),0 0 22px rgba(50,207,117,.5);animation:pulse 1.6s infinite}