/* --- assets/css/home.css --- */
/* ==========================================================================
   Home page (index.php) — hero scroll device, capability marquee,
   product bento grid and the "why Teamian" grid.

   Everything is nested under .tmn-home so this page's palette and its generic
   class names (.card, .hero, .screen…) can't leak into the shared nav/footer,
   which keep using the site palette from assets/css/style.css.
   ========================================================================== */
.tmn-home{
  --ink:#0A0A0A;
  --ink-soft:#5B615F;
  --paper:#F6F6F4;
  --line:#E4E4E0;
  --teal:#28AA8E;
  --bezel:#6C6C6C;
  --bezel-fill:#222222;
  --display:"Inter Tight", system-ui, sans-serif;
  --body:"Inter", system-ui, sans-serif;

  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  overflow-x:hidden;
}

/* ---------- scroll stage (ContainerScroll) ---------- */
.tmn-home .scroll-wrap{
  height:60rem;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  padding:8px;
}
@media (min-width:768px){
  .tmn-home .scroll-wrap{ height:80rem; padding:80px }
}
.tmn-home .stage{
  width:100%;
  position:relative;
  padding:40px 0;
  perspective:1000px;
}
@media (min-width:768px){ .tmn-home .stage{ padding:160px 0 } }

/* ---------- header ---------- */
.tmn-home .hero{
  max-width:64rem; margin:0 auto; text-align:center;
  will-change:transform;
}
.tmn-home .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 15px;
  margin-bottom:clamp(22px,3vw,32px);
}
.tmn-home .dot{width:6px;height:6px;border-radius:50%;background:var(--teal)}
.tmn-home h1{
  font-family:var(--display);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.2;
  margin:0;
  font-size:clamp(1.28rem,3.2vw,1.95rem);
}
.tmn-home h1 .big{
  display:block;
  font-weight:700;
  font-size:clamp(2.3rem,7.6vw,4.9rem);
  line-height:.94;
  letter-spacing:-.042em;
  margin-bottom:clamp(10px,1.4vw,18px);
}
.tmn-home h1 .rest{display:block;max-width:34rem;margin:0 auto;font-weight:500}
.tmn-home .sub{
  margin:clamp(26px,3.4vw,38px) auto 0; max-width:31rem;
  color:var(--ink-soft); font-weight:400;
  font-size:clamp(.93rem,1.35vw,1.02rem); line-height:1.62;
}

/* ---------- card / device ---------- */
.tmn-home .card{
  max-width:64rem; width:100%;
  margin:clamp(30px,4.5vw,58px) auto 0;
  height:30rem;
  border:4px solid var(--bezel);
  background:var(--bezel-fill);
  border-radius:30px;
  padding:8px;
  will-change:transform;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  box-shadow:0 9px 20px #0000004a,0 37px 37px #0000002d,0 84px 50px #0000001a,0 149px 60px #00000008,0 233px 65px #00000003;
}
@media (min-width:768px){ .tmn-home .card{ height:40rem; padding:24px } }
.tmn-home .screen{
  height:100%; width:100%;
  overflow:hidden;
  border-radius:16px;
  background:#F4F4F5;
}
.tmn-home .screen img{
  display:block;
  width:100%; height:100%;
  object-fit:cover; object-position:left top;
  -webkit-user-drag:none; user-select:none;
}

@media (prefers-reduced-motion:reduce){
  .tmn-home .hero,.tmn-home .card{transform:none !important}
}

/* The site nav is fixed (76px tall), so the hero needs its own clearance.
   The stage height becomes a minimum: on narrow screens the hero + device are
   taller than 60rem, and a fixed height would centre them back under the nav. */
.tmn-home .scroll-wrap{height:auto;min-height:60rem;padding-top:112px}
@media (min-width:768px){
  .tmn-home .scroll-wrap{height:auto;min-height:80rem;padding-top:80px}
}

/* =========================================================
   CAPABILITY MARQUEE  (namespace: tmnm-)
   ========================================================= */
.tmnm{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:#fff;padding:clamp(22px,3.4vw,34px) 0;
}
.tmnm-mask{position:relative;overflow:hidden}
.tmnm-mask::before,.tmnm-mask::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(48px,9vw,140px);z-index:2;pointer-events:none;
}
.tmnm-mask::before{left:0;background:linear-gradient(to right,#fff 18%,rgba(255,255,255,.6),transparent)}
.tmnm-mask::after{right:0;background:linear-gradient(to left,#fff 18%,rgba(255,255,255,.6),transparent)}
.tmnm-row{
  display:flex;width:max-content;gap:12px;
  will-change:transform;
  animation:tmnm-slide-l 46s linear infinite;
}
.tmnm-row + .tmnm-row{margin-top:12px;animation:tmnm-slide-r 54s linear infinite}
.tmnm-mask:hover .tmnm-row{animation-play-state:paused}
@keyframes tmnm-slide-l{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes tmnm-slide-r{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.tmnm-item{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line);border-radius:999px;background:#FBFBFA;
  padding:10px 17px;font-size:.855rem;color:var(--ink);white-space:nowrap;
}
.tmnm-item i{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:0 0 auto}
.tmnm-item.is-ink{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:500}
.tmnm-item.is-ink i{background:#fff}
@media (prefers-reduced-motion:reduce){
  .tmnm-row{animation:none !important}
}

/* =========================================================
   PRODUCTS — bento grid  (namespace: tmnp-)
   ========================================================= */
.tmnp{
  border-top:1px solid var(--line);
  padding:clamp(56px,8vw,104px) clamp(16px,4vw,48px) clamp(56px,7vw,88px);
}
.tmnp-inner{max-width:78rem;margin:0 auto}
.tmnp-head{max-width:56rem;margin:0 auto;text-align:center}
.tmnp-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;margin-bottom:20px;
}
.tmnp-h2{
  font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(1.7rem,4.2vw,2.9rem);margin:0;
}
.tmnp-lead{
  margin:18px auto 0;max-width:45rem;color:var(--ink-soft);
  font-size:clamp(.94rem,1.4vw,1.05rem);line-height:1.6;
}

/* ---------- grid shell ---------- */
.tmnp-grid{
  margin-top:clamp(34px,5vw,60px);
  display:grid;grid-template-columns:1fr;
  border:1px solid var(--line);border-radius:26px;overflow:hidden;
  background:#FBFBFA;
}
.tmnp-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:26px 22px 0;
  border-bottom:1px solid var(--line);
}
.tmnp-card:last-child{border-bottom:0}
@media (min-width:1024px){
  .tmnp-grid{grid-template-columns:repeat(6,1fr)}
  .tmnp-card{padding:34px 32px 0;border-right:1px solid var(--line)}
  .tmnp-card:nth-child(even){border-right:0}
  .tmnp-card:nth-child(n+3){border-bottom:0}
  .tmnp-c4{grid-column:span 4}
  .tmnp-c3{grid-column:span 3}
  .tmnp-c2{grid-column:span 2}
}

.tmnp-title{
  font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.05rem,1.5vw,1.3rem);margin:0;
}
.tmnp-desc{margin:8px 0 0;max-width:27rem;color:var(--ink-soft);font-size:.9rem;line-height:1.55}
.tmnp-link{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  margin-top:14px;font-size:.82rem;font-weight:500;color:var(--ink);text-decoration:none;
  border-bottom:1px solid transparent;
}
.tmnp-link:hover{border-bottom-color:var(--ink)}
.tmnp-link svg{width:11px;height:11px}
.tmnp a:focus-visible,.tmnp button:focus-visible,.tmnw a:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}

/* ---------- reveal (added by JS only) ---------- */
.tmnp-reveal .tmnp-card,.tmnw-reveal .tmnw-box{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 70ms);
}
.tmnp-reveal .tmnp-card.is-in,.tmnw-reveal .tmnw-box.is-in{opacity:1;transform:none}

/* ---------- shared art frame + fades ---------- */
.tmnp-art{position:relative;margin-top:auto;padding-top:20px;height:268px}
.tmnp-fade-b,.tmnp-fade-r{position:absolute;pointer-events:none;z-index:6}
.tmnp-fade-b{inset:auto 0 0 0;height:72px;background:linear-gradient(to top,#FBFBFA 14%,rgba(251,251,250,.6) 62%,transparent)}
.tmnp-fade-r{inset:0 -1px 0 auto;width:64px;background:linear-gradient(to left,#FBFBFA 12%,rgba(251,251,250,.7) 55%,transparent)}

/* ---------- 1 · Sales CRM — healthcare pipeline ---------- */
.tmnp-panel{
  background:#fff;border:1px solid var(--line);border-radius:14px 14px 0 0;
  padding:0 14px;margin-right:-10px;
  box-shadow:0 22px 44px rgba(10,10,10,.09),0 2px 6px rgba(10,10,10,.04);
}
.tmnp-phead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:12px;
}
.tmnp-phead b{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:-.01em}
.tmnp-pill{
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:#1E7A66;background:rgba(40,170,142,.12);border-radius:999px;padding:4px 9px;
}
.tmnp-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tmnp-colhead{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);
  padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--line);
}
.tmnp-colhead b{font-family:var(--display);font-size:11px;color:var(--ink);letter-spacing:0}
.tmnp-deal{
  display:flex;align-items:center;gap:8px;
  background:#FAFAF9;border:1px solid var(--line);border-radius:9px;
  padding:8px;margin-bottom:7px;
}
.tmnp-av{
  flex:0 0 22px;height:22px;border-radius:7px;background:var(--ink);color:#fff;
  font-family:var(--display);font-size:9px;font-weight:600;display:grid;place-items:center;
}
.tmnp-deal.is-hot .tmnp-av{background:var(--teal)}
.tmnp-deal b{display:block;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmnp-deal em{display:block;font-style:normal;font-size:9.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1023px){ .tmnp-board{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .tmnp-board{grid-template-columns:1fr} }

/* ---------- 2 · WhatsApp — scattered templates ---------- */
.tmnp-scatter{display:flex;flex-direction:column;gap:12px}
.tmnp-srow{display:flex;flex-wrap:nowrap}
.tmnp-srow:nth-child(1){margin-left:-18px}
.tmnp-srow:nth-child(2){margin-left:16px}
.tmnp-chip{
  flex:0 0 auto;width:124px;margin-right:-10px;
  background:#fff;border:1px solid #DBDBD6;border-radius:11px;padding:10px;
  transform:rotate(var(--r,0deg));
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease;
  box-shadow:0 8px 18px rgba(10,10,10,.07);
}
.tmnp-chip:hover{transform:rotate(0) scale(1.08);z-index:8;box-shadow:0 16px 30px rgba(10,10,10,.13)}
.tmnp-chip span{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:7px}
.tmnp-chip i{display:block;height:5px;border-radius:999px;background:#ECECE8;margin-bottom:5px}
.tmnp-chip i:nth-of-type(2){width:78%}
.tmnp-chip i:nth-of-type(3){width:52%}
.tmnp-chip b{
  display:block;margin-top:9px;font-family:var(--display);font-size:9.5px;font-weight:600;
  text-align:center;border:1px solid var(--line);border-radius:6px;padding:4px;color:var(--ink);
}

/* ---------- 3 · AI Calling Agent ---------- */
.tmnp-agentart{display:flex;align-items:flex-end;gap:14px;overflow:visible}
.tmnp-calls{flex:1 1 auto;min-width:0;padding-bottom:26px}
.tmnp-callcard{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 12px;
  box-shadow:0 10px 24px rgba(10,10,10,.06);
}
.tmnp-callcard + .tmnp-callcard{margin-top:10px}
.tmnp-plabel{
  display:flex;align-items:center;gap:7px;color:var(--ink-soft);
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
}
/* The expanding ring is a scaled pseudo-element, not an animated box-shadow.
   box-shadow cannot be composited, so the old version repainted this every frame
   for as long as the page was open; transform + opacity are free. Identical
   visually — same colour, same 6px -> 24px spread. */
.tmnp-live{
  position:relative;
  width:6px;height:6px;border-radius:50%;background:var(--teal);flex:0 0 auto;
}
.tmnp-live::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(40,170,142,.5);
  animation:tmnp-pulse 2.2s ease-out infinite;
}
@keyframes tmnp-pulse{
  from{transform:scale(1);opacity:.5}
  to{transform:scale(4);opacity:0}
}
.tmnp-wave{display:flex;align-items:center;gap:3px;height:34px;margin-top:9px}
.tmnp-wave b{
  flex:1 1 auto;display:block;border-radius:999px;background:rgba(40,170,142,.55);
  height:calc(var(--h,40) * 1%);transform-origin:center;
  animation:tmnp-bounce 1.1s ease-in-out infinite alternate;
  animation-delay:calc(var(--d,0) * 55ms);
}
@keyframes tmnp-bounce{from{transform:scaleY(.45)}to{transform:scaleY(1.15)}}
.tmnp-callcard.is-done b{display:block;font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:-.01em}
.tmnp-callcard.is-done span{display:block;font-size:10px;color:var(--ink-soft);margin-top:2px}
.tmnp-callcard.is-done{border-color:rgba(40,170,142,.4);background:linear-gradient(180deg,rgba(40,170,142,.07),#fff 70%)}
.tmnp-agent{
  flex:0 0 auto;width:min(48%,208px);height:auto;display:block;
  margin:0 -6px -18px 0;mix-blend-mode:multiply;
}
@media (max-width:400px){ .tmnp-agent{width:40%} .tmnp-calls{padding-bottom:14px} }

/* ---------- 4 · AEO, GEO & SEO — globe bottom right ---------- */
.tmnp-stage{
  position:absolute;inset:20px -10px -26px 0;
  border-radius:16px 16px 0 0;overflow:hidden;
  background:radial-gradient(120% 90% at 20% 4%,#16221F,#080808 70%);
  box-shadow:0 22px 44px rgba(10,10,10,.18);
}
.tmnp-globe{
  position:absolute;right:-10px;bottom:-8px;
  width:min(278px,50%);aspect-ratio:1;height:auto;
}
/* fallback sphere if the globe library can't load */
.tmnp-globe-css{
  position:absolute;right:-6px;bottom:-4px;width:min(260px,47%);aspect-ratio:1;
  border-radius:50%;display:none;
  background:
    radial-gradient(120% 120% at 30% 22%,rgba(255,255,255,.18),transparent 44%),
    repeating-linear-gradient(to right,rgba(255,255,255,.22) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.13) 0 1px,transparent 1px 22px),
    radial-gradient(circle at 34% 28%,#2A2A2A,#101010 70%);
  box-shadow:inset -18px -14px 44px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.5),0 0 30px rgba(255,255,255,.24);
  animation:tmnp-spin 20s linear infinite;
}
@keyframes tmnp-spin{to{background-position:0 0,-260px 0,0 0,0 0}}
.tmnp-stage.is-fallback .tmnp-globe{display:none}
.tmnp-stage.is-fallback .tmnp-globe-css{display:block}
.tmnp-tags{position:absolute;left:18px;top:20px;z-index:7;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.tmnp-tag{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:999px;padding:6px 12px;font-size:10.5px;font-weight:500;color:#fff;white-space:nowrap;
}
.tmnp-tag i{width:5px;height:5px;border-radius:50%;background:var(--teal);flex:0 0 auto}
.tmnp-tag:nth-child(2){margin-left:14px}
.tmnp-tag:nth-child(3){margin-left:6px}
.tmnp-tag:nth-child(4){margin-left:20px}
.tmnp-rank{
  position:absolute;left:18px;bottom:76px;z-index:7;
  font-family:var(--display);font-size:11px;color:rgba(255,255,255,.55);letter-spacing:.02em;
}
@media (max-width:1023px){ .tmnp-rank{display:none} }
@media (max-width:560px){
  .tmnp-tag{font-size:9.5px;padding:5px 10px}
  .tmnp-globe{width:56%;right:-8px;bottom:-6px}
  .tmnp-globe-css{width:54%}
}

/* =========================================================
   WHY TEAMIAN  (namespace: tmnw-)
   ========================================================= */
.tmnw{
  position:relative;border-top:1px solid var(--line);
  padding:clamp(60px,8vw,108px) clamp(16px,4vw,48px) clamp(64px,9vw,116px);
  background-color:var(--paper);
  background-image:radial-gradient(rgba(11,18,32,.075) 1px,transparent 1px);
  background-size:24px 24px;background-position:-12px -12px;
}
.tmnw-inner{position:relative;max-width:74rem;margin:0 auto}
.tmnw-head{max-width:44rem;margin:0 auto;text-align:center}
.tmnw-h2{
  font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.03;
  font-size:clamp(1.85rem,4.6vw,3.1rem);margin:0;
}
.tmnw-h2 em{font-style:normal;color:var(--teal)}
.tmnw-sub{margin:16px auto 0;max-width:36rem;color:var(--ink-soft);font-size:clamp(.94rem,1.4vw,1.05rem);line-height:1.6}

.tmnw-boxes{
  margin-top:clamp(32px,4.5vw,54px);
  display:grid;gap:16px;grid-template-columns:1fr;
}
@media (min-width:900px){
  .tmnw-boxes{grid-template-columns:1.06fr 1fr;grid-template-rows:auto auto}
  .tmnw-box--tall{grid-row:span 2}
}
.tmnw-box{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:26px 24px;overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .25s ease;
}
.tmnw-box:hover{transform:translateY(-3px);border-color:#D9D9D3;box-shadow:0 20px 40px rgba(10,10,10,.08)}
.tmnw-box h3{
  font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.02rem,1.5vw,1.18rem);margin:0;
}
.tmnw-box p{margin:8px 0 0;color:var(--ink-soft);font-size:.885rem;line-height:1.55;max-width:30rem}
.tmnw-visual{position:relative;margin:0 0 20px}
.tmnw-box--tall .tmnw-visual{margin:auto 0 0;padding-top:26px}

/* left box · lead tiles + channel pills */
.tmnw-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:290px}
.tmnw-tile{
  aspect-ratio:1;border-radius:14px;border:1px solid var(--line);background:#FAFAF9;
  overflow:hidden;
}
.tmnw-tile.is-empty{background:linear-gradient(180deg,#FBFBFA,#F3F3F0);border-style:dashed}
.tmnw-tile.is-active{
  background:rgba(40,170,142,.1);border-color:var(--teal);color:#146553;
  box-shadow:0 0 0 3px rgba(40,170,142,.14);
}
.tmnw-pillrow{position:relative;display:flex;gap:8px;margin-top:16px;overflow:hidden}
.tmnw-pill{
  flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:7px 13px;
  font-size:11.5px;color:var(--ink-soft);background:#fff;white-space:nowrap;
}
.tmnw-pill.is-on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:500}
.tmnw-pillfade{
  position:absolute;inset:0 -1px 0 auto;width:54px;pointer-events:none;
  background:linear-gradient(to left,#fff 12%,rgba(255,255,255,.7),transparent);
}

/* hand-drawn avatars (inline sprite) */
.tmnw-avsprite{position:absolute;width:0;height:0;overflow:hidden}
.tmnw-tile svg,.tmnw-face svg{display:block;width:100%;height:100%}
.tmnw-tile.has-face{background:#F5F0E8;overflow:hidden;padding:0}
.tmnw-face svg{transform:scale(1.12);transform-origin:50% 58%}
.tmnw-tile.is-active{
  background:rgba(40,170,142,.1);border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(40,170,142,.14);
}

/* right box 1 · routing hub */
.tmnw-hub{position:relative;height:152px}
.tmnw-hub > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tmnw-faces{position:absolute;left:50%;top:8px;transform:translateX(-50%);display:flex;gap:14px}
.tmnw-face{
  width:40px;height:40px;border-radius:50%;overflow:hidden;background:#F5F0E8;
  border:2px solid #fff;box-shadow:0 6px 14px rgba(10,10,10,.14);
}
.tmnw-face:nth-child(2){box-shadow:0 0 0 2px var(--teal),0 6px 14px rgba(10,10,10,.16)}
.tmnw-hubpill{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;
  font-size:11.5px;font-weight:500;white-space:nowrap;
  box-shadow:0 10px 20px rgba(10,10,10,.09);
}
.tmnw-hubpill svg{width:13px;height:13px;stroke:var(--teal);fill:none;stroke-width:2;stroke-linecap:round}

/* right box 2 · nudge pill */
.tmnw-inv{position:relative;height:152px;display:grid;place-items:center}
.tmnw-inv > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tmnw-halo{position:absolute;width:min(268px,94%);height:78px;border-radius:999px;background:rgba(10,10,10,.03)}
.tmnw-halo--2{width:min(216px,80%);height:62px;background:rgba(10,10,10,.05)}
.tmnw-dark{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  background:var(--ink);color:#fff;border-radius:999px;padding:12px 19px;
  font-size:12px;font-weight:500;white-space:nowrap;
  box-shadow:0 16px 30px rgba(10,10,10,.24);
}
.tmnw-dark svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

@media (prefers-reduced-motion:reduce){
  /* .tmnp-live::after, not .tmnp-live — the pulse moved to the pseudo-element
     when it stopped animating box-shadow, and this override has to follow it or
     reduced-motion users keep the animation. */
  .tmnp-globe-css,.tmnp-wave b,.tmnp-live::after{animation:none !important}
  .tmnp-live::after{opacity:0}
  .tmnp-chip,.tmnw-box{transition:none}
}

/* --- assets/css/teamian-products.css --- */
/* ============================================================
   TEAMIAN — homepage suite block (dark)
   Namespace: tmn-  ·  everything is scoped to the .tmn-page wrapper
   that index.php renders below the "Why Teamian" section.
   Fonts: Inter Tight (display) · Inter (body) — both already loaded
   by includes/header.php.
   ============================================================ */

:root{
  --tmn-black:#0A0A0A;
  --tmn-black-2:#0E0E10;
  --tmn-white:#FFFFFF;
  --tmn-paper:#FAFAFA;
  --tmn-ink:#0B1220;
  --tmn-blue:#005BE8;
  --tmn-green:#12A87A;
  --tmn-teal:#1BA37C;
  --tmn-teal-lt:#2FC79B;
  --tmn-amber:#FBB31A;
  --tmn-red:#EC1C24;
  --tmn-dim:#8A8F98;
  --tmn-dim-2:#6B7079;
  --tmn-line-d:rgba(255,255,255,.09);
  --tmn-line-l:rgba(11,18,32,.09);
  --tmn-shell:1200px;
  --tmn-ease:cubic-bezier(.22,.61,.36,1);
}

/* box-sizing stays inside the wrapper — Tailwind's preflight owns the global */
.tmn-page,.tmn-page *,.tmn-page *::before,.tmn-page *::after{box-sizing:border-box}
/* No overflow-x:hidden here. A single hidden axis computes the other to `auto`,
   which turns this wrapper into a scroll container — and the handoff hero's
   position:sticky would then pin to this box (which never scrolls) instead of
   the viewport, so it would never pin at all. Horizontal overflow is already
   clipped where it originates: .tmn-handoff-shell, .tmn-steps-stick,
   .tmn-stack .tmn-shell, .tmn-scale .tmn-shell, .tmn-split-vis,
   .tmn-conv-panel and .tmn-mock. */
.tmn-page{
  margin:0;font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--tmn-black);color:#fff;
  -webkit-font-smoothing:antialiased;
}
:where(.tmn-page h1,.tmn-page h2,.tmn-page h3,.tmn-page h4){
  font-family:'Inter Tight','Inter',sans-serif;font-weight:500;
  letter-spacing:-.035em;margin:0;line-height:1.02;
}
:where(.tmn-page p){margin:0}
:where(.tmn-page a){text-decoration:none;color:inherit}
.tmn-page button{font-family:inherit;cursor:pointer}

/* --- continuous vertical rails ------------------------------- */
.tmn-shell{
  max-width:var(--tmn-shell);margin:0 auto;
  border-left:1px solid var(--tmn-line-d);
  border-right:1px solid var(--tmn-line-d);
}
.tmn-sec{border-bottom:1px solid var(--tmn-line-d);position:relative}
.tmn-sec--light{background:var(--tmn-paper);color:var(--tmn-ink);border-bottom-color:var(--tmn-line-l)}
.tmn-sec--light .tmn-shell{border-left-color:var(--tmn-line-l);border-right-color:var(--tmn-line-l)}

/* --- shared bits ------------------------------------------ */
.tmn-pill{
  display:inline-block;font-size:12.5px;font-weight:500;letter-spacing:-.01em;
  padding:4px 10px;border-radius:6px;
  background:rgba(0,91,232,.16);color:#7FB0FF;
}
.tmn-sec--light .tmn-pill{background:rgba(0,91,232,.09);color:var(--tmn-blue)}

.tmn-h2{font-size:clamp(30px,4vw,50px)}
.tmn-h2 .tmn-mute{color:var(--tmn-dim)}
.tmn-sec--light .tmn-h2 .tmn-mute{color:#9AA1AC}

.tmn-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:500;letter-spacing:-.01em;
  padding:8px 14px;border-radius:8px;border:1px solid var(--tmn-line-d);
  background:rgba(255,255,255,.05);color:#fff;
  transition:background .25s var(--tmn-ease),border-color .25s var(--tmn-ease),transform .25s var(--tmn-ease);
}
.tmn-btn:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2);transform:translateY(-1px)}
.tmn-btn--solid{background:#fff;color:#0A0A0A;border-color:#fff}
.tmn-btn--solid:hover{background:#E8E8E8;border-color:#E8E8E8}
.tmn-sec--light .tmn-btn{background:#fff;color:var(--tmn-ink);border-color:var(--tmn-line-l);box-shadow:0 1px 2px rgba(11,18,32,.05)}
.tmn-sec--light .tmn-btn:hover{background:#fff;border-color:rgba(11,18,32,.22)}
.tmn-btn i{font-style:normal;transition:transform .25s var(--tmn-ease)}
.tmn-btn:hover i{transform:translateX(3px)}

/* --- scroll reveal ---------------------------------------- */
.tmn-page [data-rise]{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--tmn-ease),transform .85s var(--tmn-ease)}
.tmn-page [data-rise].tmn-in{opacity:1;transform:none}

/* --- off-screen animation gate ------------------------------
   A CSS animation with `infinite` runs forever whether or not it is on screen.
   This page has ten of them across ~30 elements — six SVG pulse paths, sixteen
   waveform bars, four marquee rows, the mark's gleam and bloom — so the browser
   never gets an idle frame and scrolling stutters even though each animation is
   individually cheap. The gate is applied by assets/js/teamian-products.js via
   IntersectionObserver, per container.
   Deliberately NOT scoped to .tmn-page: it also gates the sections that
   assets/css/home.css owns. Pausing preserves position, so nothing jumps when a
   section scrolls back into view. */
.tmn-anim-off,
.tmn-anim-off *{animation-play-state:paused !important}


/* ============================================================
   1. HANDOFF HERO
   Opens in the existing teamian.com light theme, then the whole
   panel transforms to the dark theme as you scroll. Sits straight
   after the "Why Teamian" section.
   ============================================================ */
/* height - 100vh = how far you scroll while the panel is pinned. Keep this
   close to what the transition actually needs (see the 0.82 divisor in
   assets/js/teamian-products.js) or the tail becomes dead scroll. */
.tmn-handoff{height:165vh;position:relative}
.tmn-handoff-stick{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:#F4F4F2;            /* start = "Why teams choose Teamian" ground */
}

/* The dark ground, faded in over the light one rather than interpolated.
   The JS used to write stick.style.backgroundColor every frame, which repaints
   the full viewport each time — the main cause of the scroll stutter. opacity
   is composited, so this costs nothing per frame. */
.tmn-handoff-ink{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--tmn-black);opacity:0;will-change:opacity;
}

.tmn-handoff-shell{
  position:relative;z-index:1;height:100%;overflow:hidden;text-align:center;
  max-width:var(--tmn-shell);margin:0 auto;padding:0 24px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-left:1px solid rgba(11,18,32,.09);
  border-right:1px solid rgba(11,18,32,.09);
}
.tmn-handoff-inner{position:relative;z-index:3;
  transform:translateY(-4vh);width:100%}

/* faint vertical light streaks, only meaningful once dark */
.tmn-hero-streaks{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.05) 0 1px,transparent 1px 9px);
  -webkit-mask-image:radial-gradient(58% 44% at 50% 30%,#000 0%,transparent 78%);
  mask-image:radial-gradient(58% 44% at 50% 30%,#000 0%,transparent 78%);
  opacity:0;
}

/* the dot pill, same construction as the "WHY TEAMIAN" pill above */
.tmn-pill--dot{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 17px 9px 14px;border-radius:999px;
  border:1px solid rgba(11,18,32,.09);background:#fff;
  font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#4A4A4A;
  box-shadow:0 1px 2px rgba(11,18,32,.04);
}
.tmn-pill--dot::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--tmn-teal);flex:none;
}
.tmn-handoff[data-phase="dark"] .tmn-pill--dot{
  background:rgba(255,255,255,.06);border-color:var(--tmn-line-d);
  color:#C3C7CE;box-shadow:none;
}
/* headline picks up the weight and teal accent of the section above */
.tmn-handoff h1{
  margin:.42em auto 0;max-width:none;
  font-size:clamp(32px,4.9vw,64px);
  font-weight:700;letter-spacing:-.036em;line-height:1.08;color:#111111;
}
.tmn-handoff h1 b{font-weight:700;color:var(--tmn-teal)}
.tmn-handoff[data-phase="dark"] h1 b{color:var(--tmn-teal-lt)}

/* scroll hint, fades out as the transformation completes */
.tmn-scroll-cue{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  z-index:4;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#8A929E;display:flex;flex-direction:column;align-items:center;gap:9px;
}
.tmn-scroll-cue span{display:block;width:1px;height:34px;
  background:linear-gradient(#8A929E,transparent)}
@media(max-width:700px){
  .tmn-handoff{height:150vh}
  .tmn-scroll-cue{display:none}
}

/* the dome */
.tmn-dome-wrap{
  position:absolute;left:50%;top:62%;width:112%;aspect-ratio:1/1;
  transform:translateX(-50%) scale(.34);transform-origin:50% 4%;
  opacity:0;z-index:1;will-change:transform,opacity;
}
@keyframes tmn-dome-rise{
  0%{opacity:0;transform:translateX(-50%) scale(.34)}
  100%{opacity:1;transform:translateX(-50%) scale(1)}
}
.tmn-dome-rim,.tmn-dome-body{position:absolute;inset:0;border-radius:50%}
/* spectrum runs bottom-left -> apex -> bottom-right:
   MCB red -> amber -> white -> teal -> Teamian blue          */
.tmn-dome-rim{
  background:conic-gradient(from 205deg,
    transparent 0%, rgba(236,28,36,0) 10%,
    #EC1C24 20%, #FBB31A 27%, #FFF6E3 37%,
    #FFFFFF 43%, #C8F3EE 50%, #4FD1C5 59%,
    #1E8FE8 63%, #005BE8 66%,
    rgba(0,91,232,0) 76%, transparent 100%);
}

/* Deliberately a SIBLING of .tmn-dome-wrap, not a child.
   A 52px Gaussian blur on a ~1300px box is expensive to render, and while this
   sat inside the wrapper the per-frame scale() forced the browser to redraw the
   whole blur on every single frame — by far the worst offender in the scroll
   stutter. Out here it never scales, so the blur is rendered once and only its
   opacity animates, which the compositor handles for free.
   Visually near-identical: the halo now fades in at full size instead of
   growing, and at this blur radius the difference is imperceptible. */
.tmn-dome-glow{
  position:absolute;left:50%;top:62%;width:112%;aspect-ratio:1/1;
  transform:translateX(-50%);border-radius:50%;
  z-index:0;pointer-events:none;
  filter:blur(52px);opacity:0;will-change:opacity;
  background:conic-gradient(from 205deg,
    transparent 0%, rgba(236,28,36,0) 11%,
    #EC1C24 21%, #FBB31A 28%, #FFFFFF 43%,
    #4FD1C5 58%, #005BE8 65%,
    rgba(0,91,232,0) 75%, transparent 100%);
}
@media(max-width:700px){
  .tmn-dome-glow{width:210%;top:56%}
}
.tmn-dome-body{
  background:radial-gradient(120% 120% at 50% 8%,
    #17181C 0%, #101114 34%, #0A0A0A 72%);
  inset:3px;
  box-shadow:inset 0 34px 90px rgba(255,255,255,.05);
}

/* on narrow screens widen the dome so it still reads as a horizon,
   not a full circle floating in the hero */
@media(max-width:700px){
  .tmn-dome-wrap{width:210%;top:56%}
}

/* ============================================================
   2. FEATURE STRIP — 5 columns
   ============================================================ */
.tmn-strip .tmn-shell{display:grid;grid-template-columns:repeat(5,1fr)}
.tmn-strip-cell{
  padding:30px 26px 34px;border-right:1px solid var(--tmn-line-d);
}
.tmn-strip-cell:last-child{border-right:0}
.tmn-strip-cell svg{width:19px;height:19px;color:#C9CCD1;margin-bottom:44px;display:block}
.tmn-strip-cell h3{font-size:16.5px;font-weight:600;letter-spacing:-.025em;margin-bottom:8px}
.tmn-strip-cell p{font-size:13.5px;line-height:1.45;color:var(--tmn-dim);letter-spacing:-.008em}
@media(max-width:900px){
  .tmn-strip .tmn-shell{grid-template-columns:repeat(2,1fr)}
  .tmn-strip-cell{border-bottom:1px solid var(--tmn-line-d)}
  .tmn-strip-cell svg{margin-bottom:22px}
  .tmn-strip-cell:nth-child(2n){border-right:0}
  .tmn-strip-cell:last-child{grid-column:1/-1}
}

/* ============================================================
   3. SIGNALS — split, canvas funnel + auto accordion
   ============================================================ */
.tmn-split .tmn-shell{display:grid;grid-template-columns:1fr 1fr;min-height:520px}
.tmn-split-copy{padding:clamp(48px,7vw,92px) clamp(24px,3.4vw,44px);
  display:flex;flex-direction:column;justify-content:center}
.tmn-split-vis{border-left:1px solid var(--tmn-line-d);position:relative;overflow:hidden}
.tmn-split-copy .tmn-pill{align-self:flex-start;margin-bottom:20px}
.tmn-split-copy .tmn-h2{margin-bottom:26px;max-width:11em}
.tmn-split-copy .tmn-btn{align-self:flex-start}

.tmn-acc{margin-top:clamp(44px,7vh,84px);display:flex;flex-direction:column}
.tmn-acc-item{padding:18px 0 0;border-top:1px solid transparent}
.tmn-acc-item:first-child{padding-top:0}
.tmn-acc-head{
  background:none;border:0;padding:0;text-align:left;width:100%;
  font-family:'Inter Tight',sans-serif;font-size:17px;font-weight:600;
  letter-spacing:-.026em;color:var(--tmn-dim-2);
  transition:color .4s var(--tmn-ease);
}
.tmn-acc-item.tmn-on .tmn-acc-head{color:#fff}
.tmn-acc-body{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .6s var(--tmn-ease),opacity .45s var(--tmn-ease),margin .6s var(--tmn-ease);
}
.tmn-acc-item.tmn-on .tmn-acc-body{max-height:130px;opacity:1;margin-top:10px}
.tmn-acc-body p{font-size:14px;line-height:1.5;color:var(--tmn-dim);max-width:24em;letter-spacing:-.008em}
.tmn-acc-track{
  height:1px;background:var(--tmn-line-d);margin-top:20px;position:relative;
  max-width:420px;opacity:0;transition:opacity .4s
}
.tmn-acc-item.tmn-on .tmn-acc-track{opacity:1}
/* scaleX, not width: animating width relayouts on every frame for the whole
   6.5s the bar is running (PageSpeed's "non-composited animations"). A
   transform is composited, so it costs nothing. */
.tmn-acc-track span{
  position:absolute;inset:0 auto 0 0;width:100%;background:#E6E8EB;
  transform:scaleX(0);transform-origin:left center;
}
.tmn-acc-item.tmn-on .tmn-acc-track span{animation:tmn-track 6.5s linear forwards}
@keyframes tmn-track{from{transform:scaleX(0)}to{transform:scaleX(1)}}

#tmn-funnel{position:absolute;inset:0;width:100%;height:100%;display:block}

@media(max-width:900px){
  .tmn-split .tmn-shell{grid-template-columns:1fr}
  .tmn-split-vis{border-left:0;border-top:1px solid var(--tmn-line-d);min-height:340px;order:2}
  .tmn-split-copy{order:1}
}

/* ============================================================
   3b. THE SUITE — sticky scroll stepper
   ============================================================ */
.tmn-steps{position:relative;height:470vh;border-bottom:1px solid var(--tmn-line-d)}
.tmn-steps-stick{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center}
.tmn-steps-shell{
  width:100%;max-width:var(--tmn-shell);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);
  gap:clamp(28px,5vw,74px);align-items:start;
}
/* left rail */
.tmn-rail{padding-top:6px}
.tmn-rail-eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:#5E646F;margin-bottom:20px}
.tmn-rail-item{position:relative;padding:15px 0;border-bottom:1px solid var(--tmn-line-d)}
.tmn-rail-item b{display:block;font-family:'Inter Tight',sans-serif;font-size:15.5px;
  font-weight:600;letter-spacing:-.024em;color:#5E646F;transition:color .45s var(--tmn-ease)}
.tmn-rail-item[data-on="1"] b{color:#fff}
.tmn-rail-item i{display:block;font-style:normal;font-size:12.5px;color:#4A5058;
  margin-top:3px;letter-spacing:-.005em;transition:color .45s var(--tmn-ease)}
.tmn-rail-item[data-on="1"] i{color:#8A8F98}
/* scaleX, not width: the stepper rewrites this on every scroll frame for all
   eight bars, and animating width relayouts each time. A transform does not. */
.tmn-rail-bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:#fff;
  transform:scaleX(0);transform-origin:left center}

/* right panes */
.tmn-panes{position:relative;min-height:min(70vh,560px)}
.tmn-pane{position:absolute;inset:0;opacity:0;visibility:hidden;
  transform:translateY(16px);
  transition:opacity .55s var(--tmn-ease),transform .55s var(--tmn-ease),visibility .55s}
.tmn-pane[data-on="1"]{opacity:1;visibility:visible;transform:none}
.tmn-pane h3{font-size:clamp(23px,2.7vw,34px);letter-spacing:-.033em;color:#fff;max-width:20em}
.tmn-pane > p{margin-top:13px;font-size:clamp(14.5px,1.4vw,16.5px);line-height:1.55;
  color:var(--tmn-dim);max-width:34em;letter-spacing:-.01em}
.tmn-pane-tags{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:7px}
.tmn-pane-tags li{list-style:none;display:flex;align-items:center;gap:7px;
  font-size:12.5px;color:#D6D9DE;letter-spacing:-.005em;
  padding:6px 11px 6px 8px;border-radius:7px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05)}
.tmn-pane-tags svg{width:14px;height:14px;color:#C9CCD1}

/* --- the mock panel --- */
.tmn-mock{
  margin-top:clamp(20px,2.6vw,30px);position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.09);border-radius:14px;
  background:linear-gradient(165deg,#121216 0%,#0B0B0E 100%);
  padding:20px;min-height:236px;
}
.tmn-mock-row{display:flex;align-items:center;gap:11px;padding:11px 12px;
  border-radius:9px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.06);margin-bottom:9px;
  opacity:0;transform:translateY(9px)}
.tmn-pane[data-on="1"] .tmn-mock-row{animation:tmn-mock-in .6s var(--tmn-ease) forwards}
.tmn-mock-row:nth-child(2){animation-delay:.1s}
.tmn-mock-row:nth-child(3){animation-delay:.2s}
.tmn-mock-row:nth-child(4){animation-delay:.3s}
@keyframes tmn-mock-in{to{opacity:1;transform:none}}
.tmn-mock-row--lit{background:#fff;border-color:#fff}
.tmn-mock-row--lit .tmn-bar{background:rgba(10,10,10,.22)}
.tmn-mock-row--lit .tmn-dot{background:#0A0A0A}
.tmn-dot{width:22px;height:22px;border-radius:6px;flex:none;background:rgba(255,255,255,.16)}
.tmn-bar{height:9px;border-radius:5px;background:rgba(255,255,255,.17)}
.tmn-txt{flex:1;min-width:0;font-size:12.5px;line-height:1.35;color:#C2C6CD;
  letter-spacing:-.008em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmn-mock-row--lit .tmn-txt,.tmn-mock-row--me .tmn-txt{color:#15161A}
.tmn-chip{font-size:11.5px;padding:3px 8px;border-radius:5px;flex:none;
  background:var(--tmn-teal);color:#04120D;font-weight:600;letter-spacing:-.005em}
.tmn-mock-bub{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.tmn-mock-bub .tmn-mock-row{margin:0;width:auto;max-width:80%;border-radius:13px}
.tmn-mock-bub .tmn-mock-row--me{align-self:flex-end;background:#fff;border-color:#fff}
.tmn-mock-bub .tmn-txt{flex:0 1 auto;white-space:normal}
.tmn-mock-bub .tmn-mock-row--me .tmn-bar{background:rgba(10,10,10,.2)}
.tmn-mock-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.tmn-mock-col{border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:10px;
  background:rgba(255,255,255,.02)}
.tmn-mock-col span{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#5E646F;margin-bottom:9px}
.tmn-mock-card{border-radius:7px;margin-bottom:7px;padding:9px 10px;
  font-size:11.5px;line-height:1.3;color:#C2C6CD;letter-spacing:-.008em;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.06)}
.tmn-mock-card--lit{background:#fff;border-color:#fff;color:#15161A;font-weight:600}
.tmn-mock-flow{position:relative;padding-left:26px}
.tmn-mock-flow::before{content:"";position:absolute;left:10px;top:14px;bottom:26px;
  width:1px;background:rgba(255,255,255,.14)}
.tmn-mock-flow .tmn-mock-row::before{content:"";position:absolute;left:-21px;
  width:7px;height:7px;border-radius:50%;background:var(--tmn-teal-lt)}
.tmn-mock-flow .tmn-mock-row{position:relative}

@media(max-width:900px){
  .tmn-steps{height:auto;border-bottom:1px solid var(--tmn-line-d)}
  .tmn-steps-stick{position:relative;height:auto;padding:clamp(46px,7vw,72px) 0}
  .tmn-steps-shell{grid-template-columns:1fr;gap:26px}
  .tmn-panes{min-height:0}
  .tmn-pane{position:absolute}
  .tmn-pane[data-on="1"]{position:relative}
}
/* ============================================================
   4. STACK — centred copy + two-row marquee
   ============================================================ */
.tmn-stack .tmn-shell{padding:clamp(60px,9vw,110px) 24px clamp(46px,6vw,74px);text-align:center;overflow:hidden}
.tmn-stack .tmn-pill{margin-bottom:20px}
.tmn-stack .tmn-h2{margin:0 auto 16px;max-width:16em}
.tmn-stack-sub{font-size:clamp(15px,1.6vw,18px);color:var(--tmn-dim);
  line-height:1.45;max-width:26em;margin:0 auto 26px;letter-spacing:-.012em}
.tmn-marquee{margin-top:clamp(40px,6vw,72px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.tmn-mq-row{display:flex;gap:14px;width:max-content;margin-bottom:14px}
.tmn-mq-row--a{animation:tmn-mq-l 34s linear infinite}
.tmn-mq-row--b{animation:tmn-mq-r 40s linear infinite}
@keyframes tmn-mq-l{to{transform:translateX(-50%)}}
@keyframes tmn-mq-r{from{transform:translateX(-50%)}to{transform:none}}
.tmn-marquee:hover .tmn-mq-row{animation-play-state:paused}
.tmn-tile{
  flex:none;width:112px;height:76px;border-radius:12px;
  border:1px solid var(--tmn-line-d);background:#131317;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  transition:background .3s var(--tmn-ease),transform .3s var(--tmn-ease),border-color .3s
}
.tmn-tile:hover{background:#1B1B21;border-color:rgba(255,255,255,.2);transform:translateY(-3px)}
.tmn-tile svg{width:22px;height:22px;color:#EDEEF0}
.tmn-tile b{font-size:10.5px;font-weight:500;color:var(--tmn-dim);letter-spacing:.02em}

/* ============================================================
   5. CONVERGENCE — six channels into one Teamian record
   ============================================================ */
.tmn-conv .tmn-shell{padding:clamp(52px,7vw,88px) clamp(18px,2.4vw,30px)}
.tmn-conv-head{text-align:center;margin-bottom:clamp(28px,3.6vw,44px)}
.tmn-conv-head .tmn-pill{margin-bottom:18px}
.tmn-conv-head .tmn-h2{margin:0 auto;max-width:17em}
.tmn-conv-panel{
  position:relative;overflow:hidden;border-radius:24px;
  border:1px solid rgba(255,255,255,.09);background:#08080A;
  min-height:clamp(380px,44vw,470px);
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:clamp(10px,3vw,40px);
  padding:clamp(26px,3.4vw,44px);
}
.tmn-conv-stars{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.5) .9px,transparent 1px);
  background-size:44px 36px;opacity:.3}
.tmn-conv-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tmn-conv-lines path{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1}
.tmn-conv-lines .tmn-conv-pulse{
  stroke:rgba(255,255,255,.85);stroke-width:1.4;
  stroke-dasharray:30 1200;stroke-dashoffset:1230;
  animation:tmn-pulse 3.4s linear infinite;
}
@keyframes tmn-pulse{to{stroke-dashoffset:0}}
.tmn-conv-col{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:flex-start;gap:clamp(18px,3.2vw,40px)}
.tmn-conv-col--r{align-items:flex-end}
.tmn-conv-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 16px;border-radius:11px;
  border:1px solid rgba(255,255,255,.1);background:#1C1C21;
  font-size:14px;font-weight:600;letter-spacing:-.018em;color:#EDEEF0;
  min-width:152px;box-shadow:0 6px 22px rgba(0,0,0,.45);
  transition:transform .4s var(--tmn-ease),border-color .4s var(--tmn-ease);
}
.tmn-conv-pill:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.26)}
.tmn-conv-pill svg{width:17px;height:17px;color:#EDEEF0;flex:none}
/* the core */
.tmn-conv-core{
  position:relative;z-index:3;width:clamp(140px,17vw,196px);aspect-ratio:1/1;
  border-radius:clamp(30px,3.6vw,42px);
  border:3px solid rgba(255,255,255,.9);
  background:linear-gradient(168deg,rgba(28,28,34,.94),rgba(8,8,10,.94));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 22px 60px rgba(0,0,0,.6);
}
.tmn-mark{
  /* Was a 34 KB PNG inlined as ~47 KB of base64 in this render-blocking
     stylesheet, which also barely gzips. Now a 13.5 KB WebP file: a separate
     cached request that never delays first paint. The relative path resolves
     from assets/css/, and tm_bundle writes bundles into that same folder. */
  --tmn-mark-src:url("../img/teamian-mark.webp");
  position:relative;display:block;width:58%;aspect-ratio:4108/3949;
}
/* the mark, static */
.tmn-mark-art{
  position:absolute;inset:0;
  background:var(--tmn-mark-src) center/contain no-repeat;
  opacity:.86;filter:drop-shadow(0 0 12px rgba(255,255,255,.18));
}
/* specular band, clipped to the mark so light travels through the real shape */
.tmn-mark-gleam{position:absolute;inset:0;overflow:hidden;
  -webkit-mask:var(--tmn-mark-src) center/contain no-repeat;
  mask:var(--tmn-mark-src) center/contain no-repeat}
.tmn-mark-gleam::before{
  content:"";position:absolute;top:-42%;bottom:-42%;left:-54%;width:50%;
  background:linear-gradient(96deg,transparent 8%,rgba(255,255,255,.55) 34%,
    #ffffff 50%,rgba(255,255,255,.55) 66%,transparent 92%);
  animation:tmn-gleam 3.8s cubic-bezier(.42,0,.24,1) infinite;
}
@keyframes tmn-gleam{0%,12%{transform:translateX(0) skewX(-14deg)}
  64%,100%{transform:translateX(360%) skewX(-14deg)}}
/* the spark: a bloom out of the core */
/* No filter:blur() here, deliberately. The keyframes animate scale(), and a
   blurred element being scaled has to have its blur recomputed on every single
   frame — the same trap as .tmn-dome-glow further up. The radial-gradient
   already fades to transparent at 72%, so the 5px blur it used to carry was
   doing almost nothing visible; without it, scale + opacity are both composited
   and this costs nothing. */
.tmn-mark-bloom{
  position:absolute;left:50%;top:50%;width:54%;aspect-ratio:1/1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.5),transparent 74%);
  opacity:0;
  animation:tmn-bloom 5.6s ease-in-out infinite;
}
@keyframes tmn-bloom{
  0%,58%{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  72%{opacity:.9;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}
}
.tmn-conv-core b{font-family:'Inter Tight',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.2em;color:#fff;text-transform:uppercase}
@media(max-width:820px){
  .tmn-conv-panel{grid-template-columns:1fr;justify-items:center;gap:26px;
    min-height:0;padding:30px 20px 36px}
  .tmn-conv-lines{display:none}
  .tmn-conv-col{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px}
  .tmn-conv-col--r{align-items:center}
  .tmn-conv-pill{font-size:13px;padding:9px 13px}
}
/* ============================================================
   7. SCALE — count-ups + exponential curve
   ============================================================ */
.tmn-scale .tmn-shell{position:relative;overflow:hidden;
  padding:clamp(66px,9vw,116px) 24px clamp(70px,10vw,120px)}
.tmn-curve{position:absolute;right:0;bottom:0;width:min(62%,720px);height:100%;pointer-events:none}
.tmn-curve path{fill:none;stroke:rgba(11,18,32,.3);stroke-width:1;
  stroke-dasharray:1400;stroke-dashoffset:1400}
.tmn-in .tmn-curve path{animation:tmn-draw 2.6s .15s var(--tmn-ease) forwards}
.tmn-scale .tmn-pill{margin-bottom:20px}
.tmn-scale .tmn-h2{max-width:14em;margin-bottom:clamp(34px,5vw,54px)}
.tmn-stats{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,190px));
  gap:24px 42px}
.tmn-stat{padding-left:15px;border-left:2px solid var(--tmn-blue)}
.tmn-stat b{display:block;font-family:'Inter Tight',sans-serif;font-weight:500;
  font-size:clamp(27px,3.4vw,38px);letter-spacing:-.04em;line-height:1.05}
.tmn-stat i{font-style:normal;font-size:13.5px;color:#7C838F;letter-spacing:-.008em}
@media(max-width:620px){.tmn-stats{grid-template-columns:1fr 1fr;gap:20px}}

/* ============================================================
   10. SUBSCRIBE
   ============================================================ */
.tmn-sub .tmn-shell{padding:clamp(44px,6vw,68px) 24px;
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.tmn-sub .tmn-h2{font-size:clamp(24px,2.9vw,34px)}
.tmn-sub-form{display:flex;gap:9px}
.tmn-sub-form input[type=email]{
  font-family:inherit;font-size:14px;padding:9px 13px;width:min(240px,52vw);
  border:1px solid var(--tmn-line-l);border-radius:8px;background:#fff;color:var(--tmn-ink);
  outline:none;transition:border-color .25s,box-shadow .25s}
.tmn-sub-form input[type=email]:focus{border-color:var(--tmn-blue);box-shadow:0 0 0 3px rgba(0,91,232,.14)}
.tmn-sub-form button{background:var(--tmn-ink);color:#fff;border:1px solid var(--tmn-ink);
  border-radius:8px;font-size:13.5px;font-weight:500;padding:9px 16px;
  transition:opacity .25s}
.tmn-sub-form button:hover{opacity:.85}
.tmn-sub-form button[disabled]{opacity:.6;cursor:default}

/* ============================================================
   11. LATEST UPDATES — blog, monochrome only
   ============================================================ */
.tmn-blog{background:#060606;border-bottom:0}
.tmn-blog-head{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(30px,4vw,44px) clamp(20px,3vw,34px);
  border-bottom:1px solid var(--tmn-line-d);
}
.tmn-blog-head h2{
  position:relative;padding-left:26px;
  font-size:clamp(26px,3.2vw,40px);letter-spacing:-.035em;color:#fff;
}
.tmn-blog-head h2::before{
  content:"";position:absolute;left:0;top:.06em;bottom:.08em;width:5px;
  background:#fff;border-radius:3px;
}
.tmn-blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
  padding:clamp(24px,3vw,34px);
}
.tmn-blog-card{display:block}
.tmn-blog-art{
  position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  background:#0C0C0C;border:1px solid rgba(255,255,255,.07);
  transition:border-color .4s var(--tmn-ease),background .4s var(--tmn-ease);
}
.tmn-blog-art::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:13px 13px;
}
.tmn-blog-art svg{position:absolute;inset:0;width:100%;height:100%;
  transition:transform .7s var(--tmn-ease)}
.tmn-blog-card:hover .tmn-blog-art{border-color:rgba(255,255,255,.2);background:#101010}
.tmn-blog-card:hover .tmn-blog-art svg{transform:scale(1.035)}
.tmn-blog-meta{display:flex;align-items:center;gap:11px;margin:18px 0 11px}
.tmn-blog-meta span{
  font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:#EDEEF0;
  background:rgba(255,255,255,.1);padding:4px 9px;border-radius:5px;
}
.tmn-blog-meta time{font-size:13px;color:#7C8290;letter-spacing:-.005em}
.tmn-blog-card h3{
  font-size:clamp(15.5px,1.3vw,17.5px);font-weight:600;line-height:1.34;
  letter-spacing:-.024em;color:#fff;
}
.tmn-blog-card:hover h3{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.4)}
@media(max-width:880px){.tmn-blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){
  .tmn-blog-grid{grid-template-columns:1fr}
  .tmn-blog-head{flex-direction:column;align-items:flex-start;gap:16px}
}

/* ============================================================
   12. FAQ — white ground, split heading + accordion
   ============================================================ */
.tmn-faq{background:#FFFFFF;border-bottom:0}
.tmn-faq .tmn-shell{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.tmn-faq-aside{
  padding:clamp(56px,7vw,92px) clamp(24px,3vw,40px);
  border-right:1px solid var(--tmn-line-l);
}
.tmn-faq-aside .tmn-pill{margin-bottom:20px}
.tmn-faq-aside h2{font-size:clamp(27px,3.2vw,40px);letter-spacing:-.035em;color:var(--tmn-ink)}
.tmn-faq-aside p{margin-top:16px;font-size:15px;line-height:1.55;
  color:#7C838F;max-width:22em;letter-spacing:-.008em}
.tmn-faq-list{padding:clamp(30px,4vw,52px) clamp(24px,3vw,40px)}
.tmn-faq-item{border-bottom:1px solid var(--tmn-line-l)}
.tmn-faq-item:first-child{border-top:1px solid var(--tmn-line-l)}
.tmn-faq-q{
  width:100%;display:flex;align-items:flex-start;gap:18px;
  background:none;border:0;padding:20px 0;text-align:left;
  font-family:'Inter Tight','Inter',sans-serif;
  font-size:clamp(15.5px,1.5vw,17.5px);font-weight:600;letter-spacing:-.024em;
  line-height:1.4;color:var(--tmn-ink);
  transition:color .25s var(--tmn-ease);
}
.tmn-faq-q:hover{color:#41474F}
.tmn-faq-q span{flex:1}
.tmn-faq-q i{
  flex:none;position:relative;width:15px;height:15px;margin-top:4px;
  transition:transform .4s var(--tmn-ease);
}
.tmn-faq-q i::before,.tmn-faq-q i::after{
  content:"";position:absolute;left:0;top:7px;width:15px;height:1.5px;
  background:#41474F;border-radius:1px;
}
.tmn-faq-q i::after{transform:rotate(90deg);transition:opacity .4s var(--tmn-ease)}
.tmn-faq-q[aria-expanded="true"] i{transform:rotate(180deg)}
.tmn-faq-q[aria-expanded="true"] i::after{opacity:0}
.tmn-faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--tmn-ease)}
.tmn-faq-a p{
  padding:0 42px 24px 0;font-size:14.5px;line-height:1.62;
  color:#6B7280;letter-spacing:-.008em;
}
@media(max-width:860px){
  .tmn-faq .tmn-shell{grid-template-columns:1fr}
  .tmn-faq-aside{border-right:0;border-bottom:1px solid var(--tmn-line-l);
    padding-bottom:clamp(34px,5vw,48px)}
  .tmn-faq-list{padding-top:8px}
}

/* ============================================================
   accessibility / reduced motion
   ============================================================ */
.tmn-page :focus-visible{outline:2px solid var(--tmn-blue);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){
  .tmn-page *,.tmn-page *::before,.tmn-page *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .tmn-page [data-rise]{opacity:1 !important;transform:none !important}
  .tmn-dome-wrap{opacity:1;transform:translateX(-50%) scale(1)}
  .tmn-dome-glow{opacity:.55}   /* CSS-only fallback if the script never runs */
  .tmn-handoff{height:auto}
  .tmn-handoff-stick{position:relative;height:min(88vh,780px);background:#0A0A0A}
}