/* ------------------------------------------------------------------
   Cascade guard.

   The theme stylesheet sets properties directly on bare elements, e.g.
       h1,h2,h3,h4,h5,h6 { color:#343434 }
       .home h3          { color:#707377 }
       a                 { color:#f82249 }
   A direct rule on an element always beats an inherited value, so
   ".tl-home{color:#fff}" alone never reaches the headings and they render grey.

   These rules restore the template's own baseline inside .tl-home. The class is
   doubled so the guard outranks body-class-prefixed theme rules; the real
   template rules below are more specific still, so they continue to win.
   ------------------------------------------------------------------ */
.tl-home.tl-home h1,.tl-home.tl-home h2,.tl-home.tl-home h3,.tl-home.tl-home h4,.tl-home.tl-home h5,.tl-home.tl-home h6{color:inherit;font-family:var(--f-display);text-transform:none;text-shadow:none}
.tl-home.tl-home p,.tl-home.tl-home li,.tl-home.tl-home span,.tl-home.tl-home em,.tl-home.tl-home strong,.tl-home.tl-home blockquote,.tl-home.tl-home figure,.tl-home.tl-home td,.tl-home.tl-home th,.tl-home.tl-home label{color:inherit}
.tl-home.tl-home a{color:inherit;background-color:transparent;text-decoration:none}
.tl-home.tl-home button,.tl-home.tl-home input,.tl-home.tl-home select,.tl-home.tl-home textarea{color:inherit;font-family:inherit;text-transform:none}
.tl-home.tl-home table{background-color:transparent}
.tl-home.tl-home blockquote,.tl-home.tl-home figure{margin:0;padding:0;border:0}
.tl-home.tl-home img{box-shadow:none}

/* ------------------------------------------------------------------
   Class-name collisions.

   Bootstrap defines .btn, .badge and .mark; the theme defines .nav-menu.
   Our markup reuses those names, so the foreign rules bleed in - Bootstrap's
   .badge{background-color:#777;border-radius:10px} was rendering the
   "Zoho Premium Partner" label as a grey pill, and .mark{background:#fcf8e3}
   puts a yellow highlight behind the quote marks.

   These reset only what the foreign rules inject. They sit above the real
   rules and share their specificity, so the design's own styling still wins.
   ------------------------------------------------------------------ */
.tl-home .btn{background-image:none;border:0;box-shadow:none;text-shadow:none;
  text-transform:none;letter-spacing:normal;margin-bottom:0;white-space:normal;
  line-height:inherit;text-align:center;vertical-align:middle}
.tl-home .badge{background:none;background-color:transparent;border-radius:0;padding:0;
  min-width:0;line-height:inherit;text-align:inherit;vertical-align:baseline;
  white-space:normal;font-size:inherit;font-weight:inherit;color:inherit}
.tl-home .mark{background:none;background-color:transparent;padding:0;color:inherit}
.tl-home .nav-menu{margin:0;padding:0;list-style:none}
.tl-home .nav{margin:0;padding:0;list-style:none}



.tl-home,.tl-home *{margin:0;padding:0;box-sizing:border-box}
.tl-home{scroll-behavior:smooth}
.tl-home{
  font-family:var(--f-body);
  background:var(--void);
  color:#fff;
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.tl-home img{max-width:100%;display:block}
.tl-home a{color:inherit;text-decoration:none}
.tl-home button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.tl-home ul{list-style:none}
.tl-home .wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.tl-home .sec{padding:120px 0;position:relative}
.tl-home .sec-sm{padding:80px 0}
.tl-home h1,.tl-home h2,.tl-home h3,.tl-home h4{font-family:var(--f-display);line-height:1.1;letter-spacing:-.028em;font-weight:700}
.tl-home h1{font-size:clamp(38px,5.6vw,68px);font-weight:800;letter-spacing:-.035em}
.tl-home h2{font-size:clamp(30px,4vw,50px)}
.tl-home h3{font-size:clamp(19px,2vw,24px)}
.tl-home .grad-text{background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.tl-home .lede{font-size:clamp(16px,1.4vw,18.5px);line-height:1.7;color:#A8AFC2}
.tl-home .lede-dark{color:var(--slate)}
.tl-home .eyebrow{
  display:block;font-family:var(--f-display);font-size:15px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--crimson-soft);
}
.tl-home .eyebrow.on-light{color:var(--crimson-deep)}
.tl-home .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-display);font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:999px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,color .25s;
  white-space:nowrap;
}
.tl-home .btn svg{width:16px;height:16px;transition:transform .25s}
.tl-home .btn:hover svg{transform:translateX(3px)}
.tl-home .btn-primary{background:var(--g-brand);color:#fff;box-shadow:0 10px 30px -8px rgba(240,35,76,.55)}
.tl-home .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -8px rgba(240,35,76,.7)}
.tl-home .btn-glass{background:rgba(255,255,255,.07);color:#fff;border:1px solid var(--line-dark-2);backdrop-filter:blur(12px)}
.tl-home .btn-glass:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
.tl-home .btn-light{background:#fff;color:var(--ink)}
.tl-home .btn-light:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(0,0,0,.35)}
.tl-home .btn-outline-dark{border:1.5px solid var(--line);color:var(--ink);background:#fff}
.tl-home .btn-outline-dark:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.tl-home .btn-sm{padding:10px 20px;font-size:13.5px}
.tl-home .glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.tl-home .glow-a{width:620px;height:620px;background:rgba(240,35,76,.22)}
.tl-home .glow-b{width:520px;height:520px;background:rgba(255,184,28,.13)}
.tl-home .glow-c{width:460px;height:460px;background:rgba(120,80,255,.14)}
.tl-home .mesh::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 35%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 35%,#000 30%,transparent 78%);
}
.tl-home .utility{
  background:var(--ink);border-bottom:1px solid var(--line-dark);
  font-size:13px;position:relative;z-index:60;
}
.tl-home .utility .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:44px}
.tl-home .utility-left{display:flex;align-items:center;gap:22px;color:#8A92A6}
.tl-home .utility-left a{display:inline-flex;align-items:center;gap:7px;transition:color .2s}
.tl-home .utility-left a:hover{color:#fff}
.tl-home .utility-left svg{width:14px;height:14px;color:var(--crimson-soft)}
.tl-home .utility-right{display:flex;align-items:center;gap:10px}
.tl-home .u-pill{
  display:inline-flex;align-items:center;gap:7px;padding:6px 15px;border-radius:999px;
  border:1px solid var(--line-dark-2);font-size:12.5px;font-weight:500;transition:.2s;
}
.tl-home .u-pill:hover{background:rgba(255,255,255,.08)}
.tl-home .utility-flags{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6B7280}
@media(max-width:900px){.tl-home .utility-left{display:none}}
.tl-home .nav .wrap{display:flex;align-items:center;gap:26px;height:74px}
.tl-home .mega-cols-3{grid-template-columns:repeat(3,1fr)}
.tl-home .mega-cols-1{grid-template-columns:1fr}
@media(max-width:600px){.tl-home .nav-actions .btn{display:none}}
.tl-home .hero{position:relative;background:var(--void);overflow:hidden;padding:96px 0 110px}
.tl-home .hero .glow-a{top:-180px;right:-120px}
.tl-home .hero .glow-b{bottom:-200px;left:-140px}
.tl-home .hero .glow-c{top:180px;left:40%}
.tl-home .hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
.tl-home .hero h1{margin:16px 0 20px;font-size:clamp(33px,4.1vw,53px)}
.tl-home .hero .lede{max-width:520px}
.tl-home .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.tl-home .hero-proof{
  margin-top:44px;padding-top:28px;border-top:1px solid var(--line-dark);
  display:grid;grid-template-columns:repeat(3,auto);gap:36px;justify-content:start;
}
.tl-home .hero-proof .n{font-family:var(--f-display);font-size:27px;font-weight:700;letter-spacing:-.02em}
.tl-home .hero-proof .n em{font-style:normal;background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.tl-home .hero-proof .l{font-size:13.5px;color:var(--slate-2);margin-top:6px}
.tl-home .console{position:relative}
.tl-home .console-main{
  background:linear-gradient(165deg,rgba(23,28,41,.96),rgba(11,14,23,.98));
  border:1px solid var(--line-dark-2);border-radius:var(--r-lg);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.04) inset;
  overflow:hidden;animation:float 7s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.tl-home .console-bar{
  display:flex;align-items:center;gap:9px;padding:13px 16px;
  border-bottom:1px solid var(--line-dark);background:rgba(255,255,255,.025);
}
.tl-home .console-bar .dots{display:flex;gap:6px}
.tl-home .console-bar .dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.tl-home .console-bar .dots i:first-child{background:rgba(240,35,76,.65)}
.tl-home .console-bar .dots i:nth-child(2){background:rgba(255,184,28,.6)}
.tl-home .console-bar .title{font-size:12.5px;color:var(--slate-2);margin-left:6px}
.tl-home .console-bar .live{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:#4ADE80;
}
.tl-home .console-bar .live i{width:6px;height:6px;border-radius:50%;background:#4ADE80;animation:ping2 1.8s infinite}
@keyframes ping2{0%,100%{opacity:1}50%{opacity:.25}}
.tl-home .console-body{padding:20px;display:grid;gap:14px}
.tl-home .kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tl-home .kpi{background:rgba(255,255,255,.035);border:1px solid var(--line-dark);border-radius:14px;padding:13px 14px}
.tl-home .kpi .lab{font-size:12px;color:var(--slate-2)}
.tl-home .kpi .val{font-family:var(--f-display);font-size:21px;font-weight:700;margin-top:5px;letter-spacing:-.02em}
.tl-home .kpi .chg{font-size:11px;font-weight:600;color:#4ADE80;margin-top:2px}
.tl-home .kpi .chg.down{color:var(--crimson-soft)}
.tl-home .chart{
  background:rgba(255,255,255,.035);border:1px solid var(--line-dark);border-radius:16px;
  padding:15px 16px 12px;
}
.tl-home .chart-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.tl-home .chart-head .t{font-family:var(--f-display);font-size:13.5px;font-weight:600}
.tl-home .chart-head .s{font-size:12px;color:var(--slate-2)}
.tl-home .bars{display:flex;align-items:flex-end;gap:8px;height:86px}
.tl-home .bars .b{flex:1;border-radius:5px 5px 3px 3px;background:rgba(255,255,255,.08);position:relative;height:100%}
.tl-home .bars .b::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:var(--h,50%);
  background:var(--g-fire);border-radius:5px 5px 3px 3px;
  transform:scaleY(0);transform-origin:bottom;
  animation:grow 1.1s cubic-bezier(.2,.8,.2,1) forwards;
}
.tl-home .bars .b:nth-child(1){--h:42%}
.tl-home .bars .b:nth-child(2){--h:61%}
.tl-home .bars .b:nth-child(3){--h:38%}
.tl-home .bars .b:nth-child(4){--h:74%}
.tl-home .bars .b:nth-child(5){--h:55%}
.tl-home .bars .b:nth-child(6){--h:88%}
.tl-home .bars .b:nth-child(7){--h:69%}
.tl-home .bars .b:nth-child(8){--h:96%}
.tl-home .bars .b:nth-child(1)::after{animation-delay:.05s}
.tl-home .bars .b:nth-child(2)::after{animation-delay:.12s}
.tl-home .bars .b:nth-child(3)::after{animation-delay:.19s}
.tl-home .bars .b:nth-child(4)::after{animation-delay:.26s}
.tl-home .bars .b:nth-child(5)::after{animation-delay:.33s}
.tl-home .bars .b:nth-child(6)::after{animation-delay:.40s}
.tl-home .bars .b:nth-child(7)::after{animation-delay:.47s}
.tl-home .bars .b:nth-child(8)::after{animation-delay:.54s}
@keyframes grow{to{transform:scaleY(1)}}
.tl-home .ai-msg{
  background:linear-gradient(120deg,rgba(240,35,76,.13),rgba(255,184,28,.07));
  border:1px solid rgba(240,35,76,.3);border-radius:16px;padding:14px 15px;
  display:flex;gap:12px;align-items:flex-start;
}
.tl-home .ai-msg .av{
  flex:none;width:30px;height:30px;border-radius:9px;background:var(--g-brand);
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.tl-home .ai-msg .who{font-size:12px;font-weight:600;color:var(--amber);margin-bottom:6px}
.tl-home .ai-msg p{font-size:12.8px;line-height:1.6;color:#D4D9E6}
.tl-home .ai-msg .typing{display:inline-block;width:7px;height:13px;background:var(--crimson-soft);vertical-align:-2px;margin-left:3px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.tl-home .chip-float{
  position:absolute;display:inline-flex;align-items:center;gap:8px;
  background:rgba(23,28,41,.94);border:1px solid var(--line-dark-2);
  padding:9px 15px;border-radius:999px;font-size:12.5px;font-weight:600;
  font-family:var(--f-display);backdrop-filter:blur(12px);
  box-shadow:0 16px 36px -12px rgba(0,0,0,.85);z-index:3;
}
.tl-home .chip-float i{width:7px;height:7px;border-radius:50%;background:var(--amber)}
.tl-home .cf-1{top:-20px;left:-30px;animation:float 6s ease-in-out infinite .4s}
.tl-home .cf-2{top:41%;right:-40px;animation:float 6.6s ease-in-out infinite .9s}
.tl-home .cf-3{bottom:-20px;left:6%;animation:float 7.4s ease-in-out infinite 1.4s}
@media(max-width:1320px){.tl-home .cf-1{left:-10px}
.tl-home .cf-2{right:-14px}}
@media(max-width:1020px){.tl-home .hero .wrap{grid-template-columns:1fr;gap:56px}
.tl-home .hero{padding:64px 0 80px}
.tl-home .chip-float{display:none}}
@media(max-width:520px){.tl-home .hero-proof{grid-template-columns:1fr 1fr;gap:22px}
.tl-home .kpi-row{grid-template-columns:1fr 1fr}
.tl-home .kpi-row .kpi:last-child{display:none}}
.tl-home .marquee-sec{background:var(--ink);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);padding:40px 0}
.tl-home .marquee-label{text-align:center;font-size:15px;color:var(--slate-2);margin-bottom:26px}
.tl-home .marquee{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.tl-home .marquee-track{display:flex;gap:16px;width:max-content;animation:slide 46s linear infinite}
.tl-home .marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.tl-home .plogo{
  flex:0 0 auto;box-sizing:border-box;
  width:186px;height:82px;padding:14px 18px;border-radius:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-dark);
  transition:background .25s,border-color .25s;
}
.tl-home .plogo:hover{background:rgba(255,255,255,.07);border-color:rgba(240,35,76,.35)}
.tl-home .plogo .pimg{display:flex;align-items:center;justify-content:center;gap:9px}
.tl-home .plogo .pimg img{
  width:21px;height:21px;flex:none;object-fit:contain;
  /* renders every mark as a clean white glyph on the dark tile.
     Delete this line to show the logos in their own brand colours. */
  filter:brightness(0) invert(1);
  opacity:.92;transition:opacity .25s;
}
.tl-home .plogo:hover .pimg img{opacity:1}
.tl-home .plogo .pn{font-family:var(--f-display);font-weight:600;font-size:15.5px;color:#fff;white-space:nowrap}
.tl-home .plogo .pt{font-size:11.5px;color:var(--amber);text-align:center;line-height:1.25}
.tl-home .expert-sec{background:var(--ink);padding:96px 0}
.tl-home .expert-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.tl-home .expert-points{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tl-home .ept{
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);
  border-radius:var(--r);padding:24px 22px;transition:.28s;
}
.tl-home .ept:hover{background:rgba(255,255,255,.075);border-color:rgba(240,35,76,.32);transform:translateY(-4px)}
.tl-home .ept h4{font-size:16px;margin-bottom:9px}
.tl-home .ept p{font-size:13.6px;color:#9AA2B6;line-height:1.62}
@media(max-width:960px){.tl-home .expert-grid{grid-template-columns:1fr;gap:40px}
.tl-home .expert-sec{padding:72px 0}}
@media(max-width:560px){.tl-home .expert-points{grid-template-columns:1fr}}
.tl-home .ilink{color:var(--crimson-soft);font-weight:600;border-bottom:1px solid rgba(255,92,122,.4);transition:.2s}
.tl-home .ilink:hover{color:#fff;border-color:#fff}
.tl-home .light .ilink,.tl-home .ilink.on-light{color:var(--crimson-deep);border-bottom-color:rgba(194,16,56,.35)}
.tl-home .light .ilink:hover{color:var(--ink);border-color:var(--ink)}
.tl-home .sec-head{max-width:720px;margin-bottom:60px}
.tl-home .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.tl-home .sec-head h2{margin:20px 0 18px}
.tl-home .sec-head .lede{margin:0}
.tl-home .sec-head.center .lede{margin:0 auto}
.tl-home .ai-sec{background:var(--void);overflow:hidden}
.tl-home .ai-sec .glow-a{top:6%;left:-14%}
.tl-home .ai-sec .glow-b{bottom:-8%;right:-10%}
.tl-home .ai-sec .wrap{position:relative;z-index:2}
.tl-home .flow{display:grid;grid-template-columns:1fr 56px 1fr 56px 1fr;align-items:stretch;margin:56px 0 30px}
.tl-home .flow-node{
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark-2);
  border-radius:var(--r-lg);padding:28px 26px;position:relative;transition:.3s;
}
.tl-home .flow-node:hover{background:rgba(255,255,255,.07);transform:translateY(-4px)}
.tl-home .flow-node.hot{border-color:rgba(240,35,76,.5);background:linear-gradient(160deg,rgba(240,35,76,.12),rgba(255,184,28,.05))}
.tl-home .flow-node .tag{font-size:13px;font-weight:600;color:var(--amber);display:block;margin-bottom:13px}
.tl-home .flow-node h4{font-size:17px;margin-bottom:14px}
.tl-home .flow-node li{font-size:13.5px;color:#A8AFC2;padding-left:18px;position:relative;margin-bottom:8px}
.tl-home .flow-node li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1.5px;background:var(--crimson)}
.tl-home .flow-arrow{display:flex;align-items:center;justify-content:center;color:var(--crimson)}
.tl-home .flow-arrow svg{width:26px;height:26px;animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(7px);opacity:1}}
.tl-home .ai-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:44px}
.tl-home .ai-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.tl-home .ai-card{
  background:rgba(255,255,255,.035);border:1px solid var(--line-dark);
  border-radius:var(--r);padding:26px 24px;transition:.3s;position:relative;overflow:hidden;
}
.tl-home .ai-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--g-fire);transform:scaleX(0);transform-origin:left;transition:transform .4s;
}
.tl-home .ai-card:hover::before{transform:scaleX(1)}
.tl-home .ai-card:hover{background:rgba(255,255,255,.07);border-color:var(--line-dark-2);transform:translateY(-5px)}
.tl-home .ai-card .ic{
  width:42px;height:42px;border-radius:12px;margin-bottom:18px;
  background:linear-gradient(140deg,rgba(240,35,76,.2),rgba(255,184,28,.14));
  border:1px solid rgba(240,35,76,.26);
  display:flex;align-items:center;justify-content:center;color:var(--crimson-soft);
}
.tl-home .ai-card .ic svg{width:20px;height:20px}
.tl-home .ai-card h3{font-size:16.5px;margin-bottom:9px}
.tl-home .ai-card p{font-size:13.8px;color:#9AA2B6;line-height:1.65}
@media(max-width:1020px){.tl-home .flow{grid-template-columns:1fr}
.tl-home .flow-arrow{padding:14px 0}
.tl-home .flow-arrow svg{transform:rotate(90deg)}
@keyframes nudge{0%,100%{transform:rotate(90deg) translateX(0);opacity:.55}50%{transform:rotate(90deg) translateX(7px);opacity:1}}
.tl-home .ai-cards{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.tl-home .ai-cards{grid-template-columns:1fr}}
.tl-home .light{background:var(--paper);color:var(--ink)}
.tl-home .light h1,.tl-home .light h2,.tl-home .light h3,.tl-home .light h4{color:var(--ink)}
.tl-home .light .lede{color:var(--slate)}
.tl-home .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px}
.tl-home .tab{
  padding:11px 22px;border-radius:999px;font-family:var(--f-display);font-weight:600;
  font-size:14.5px;background:#fff;border:1px solid var(--line);color:var(--slate);transition:.22s;
}
.tl-home .tab:hover{border-color:var(--crimson);color:var(--crimson)}
.tl-home .tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tl-home .tab-panel{display:none;animation:fade .4s ease}
.tl-home .tab-panel.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tl-home .plat{
  display:grid;grid-template-columns:.95fr 1.05fr;gap:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(15,19,34,.22);
}
.tl-home .plat-copy{padding:46px 44px}
.tl-home .plat-copy .badge{
  display:block;font-family:var(--f-display);font-size:14.5px;font-weight:600;
  color:var(--crimson-deep);margin-bottom:14px;
}
.tl-home .plat-copy h3{font-size:clamp(23px,2.6vw,31px);margin-bottom:14px}
.tl-home .plat-copy p{color:var(--slate);font-size:15.5px;margin-bottom:24px}
.tl-home .plat-list{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;margin-bottom:28px}
.tl-home .plat-list li{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500}
.tl-home .plat-list li svg{width:15px;height:15px;color:var(--crimson);flex:none}
.tl-home .plat-visual{
  background:linear-gradient(150deg,#12162080,#0B0E17);position:relative;
  padding:40px 36px;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.tl-home .plat-visual::before{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,35,76,.28),transparent 66%);filter:blur(48px);
}
.tl-home .mini-app{
  position:relative;z-index:2;width:100%;background:rgba(23,28,41,.9);
  border:1px solid var(--line-dark-2);border-radius:var(--r);padding:18px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.8);
}
.tl-home .mini-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line-dark)}
.tl-home .mini-row:last-child{border-bottom:none}
.tl-home .mini-row .av{width:30px;height:30px;border-radius:9px;background:var(--g-brand);flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:700;font-size:12px;color:#fff}
.tl-home .mini-row .av.alt{background:linear-gradient(140deg,var(--amber),#FF8A5B)}
.tl-home .mini-row .av.alt2{background:linear-gradient(140deg,#7C6BFF,#4ADE80)}
.tl-home .mini-row .txt{flex:1;min-width:0}
.tl-home .mini-row .txt b{display:block;font-family:var(--f-display);font-size:13px;font-weight:600;color:#fff}
.tl-home .mini-row .txt small{font-size:11px;color:var(--slate-2)}
.tl-home .mini-row .pill{
  font-size:11.5px;font-weight:600;
  padding:4px 10px;border-radius:999px;background:rgba(74,222,128,.14);color:#4ADE80;flex:none;
}
.tl-home .mini-row .pill.warm{background:rgba(255,184,28,.14);color:var(--amber)}
.tl-home .mini-row .pill.hot{background:rgba(240,35,76,.16);color:var(--crimson-soft)}
@media(max-width:960px){.tl-home .plat{grid-template-columns:1fr}
.tl-home .plat-copy{padding:34px 28px}
.tl-home .plat-list{grid-template-columns:1fr}}
.tl-home .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tl-home .bx{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;transition:.3s;position:relative;overflow:hidden;
}
.tl-home .bx:hover{transform:translateY(-5px);box-shadow:0 26px 56px -26px rgba(15,19,34,.28);border-color:#D6DAE6}
.tl-home .bx .ic{
  width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,rgba(240,35,76,.11),rgba(255,184,28,.14));
  color:var(--crimson-deep);margin-bottom:20px;
}
.tl-home .bx .ic svg{width:21px;height:21px}
.tl-home .bx h3{font-size:18px;margin-bottom:10px}
.tl-home .bx p{color:var(--slate);font-size:14.5px;line-height:1.65}
.tl-home .bx-3{grid-column:span 2}
.tl-home .bx-2{grid-column:span 3}
.tl-home .bx-dark{background:var(--ink);border-color:transparent;color:#fff;grid-column:span 3;position:relative;overflow:hidden}
.tl-home .bx-dark h3{color:#fff}
.tl-home .bx-dark p{color:#A8AFC2}
.tl-home .bx-dark::after{
  content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-110px;top:-110px;
  background:radial-gradient(circle,rgba(240,35,76,.35),transparent 65%);filter:blur(42px);
}
.tl-home .bx-num{font-family:var(--f-display);font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:8px}
.tl-home .bx-num em{font-style:normal;background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:960px){.tl-home .bento{grid-template-columns:repeat(2,1fr)}
.tl-home .bx-3,.tl-home .bx-2,.tl-home .bx-dark{grid-column:span 1}}
@media(max-width:600px){.tl-home .bento{grid-template-columns:1fr}}
.tl-home .svc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.tl-home .svc{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 24px;
  transition:.3s;position:relative;overflow:hidden;
}
.tl-home .svc::after{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--g-fire);
  transform:scaleX(0);transform-origin:left;transition:transform .4s;
}
.tl-home .svc:hover::after{transform:scaleX(1)}
.tl-home .svc:hover{transform:translateY(-6px);box-shadow:0 26px 56px -26px rgba(15,19,34,.26)}
.tl-home .svc .n{font-family:var(--f-display);font-size:14px;font-weight:700;color:var(--crimson);margin-bottom:15px;display:block}
.tl-home .svc h3{font-size:17px;margin-bottom:10px}
.tl-home .svc p{font-size:13.8px;color:var(--slate);line-height:1.62}
@media(max-width:1020px){.tl-home .svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tl-home .svc-grid{grid-template-columns:1fr}}
.tl-home .orbit-sec{background:var(--ink);overflow:hidden;position:relative}
.tl-home .orbit-sec .glow-b{top:20%;right:-10%}
.tl-home .orbit-sec .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.tl-home .int-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
.tl-home .int-list li{
  display:flex;align-items:center;gap:10px;padding:12px 15px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:12px;
  font-size:13.5px;font-weight:500;transition:.22s;
}
.tl-home .int-list li:hover{background:rgba(255,255,255,.08);border-color:rgba(240,35,76,.32)}
.tl-home .int-list li i{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}@media(max-width:960px){.tl-home .orbit-sec .wrap{grid-template-columns:1fr;gap:48px}}@media(max-width:520px){
.tl-home .int-list{grid-template-columns:1fr}}
.tl-home .steps{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.tl-home .step{
  display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);
  cursor:pointer;transition:.25s;
}
.tl-home .step:last-child{border-bottom:none}
.tl-home .step .num{
  flex:none;width:44px;height:44px;border-radius:14px;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--slate);transition:.25s;
}
.tl-home .step.on .num,.tl-home .step:hover .num{background:var(--g-brand);color:#fff;box-shadow:0 10px 24px -10px rgba(240,35,76,.7)}
.tl-home .step h3{font-size:17.5px;margin-bottom:6px}
.tl-home .step p{font-size:14.2px;color:var(--slate);line-height:1.62}
.tl-home .steps-visual{
  background:var(--ink);border-radius:var(--r-xl);padding:34px;position:relative;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(15,19,34,.45);
}
.tl-home .steps-visual::before{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;top:-90px;right:-90px;
  background:radial-gradient(circle,rgba(240,35,76,.3),transparent 66%);filter:blur(46px);
}
.tl-home .sv-inner{position:relative;z-index:2;display:grid;gap:11px}
.tl-home .sv-line{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-dark);
}
.tl-home .sv-line .tick{
  width:24px;height:24px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(74,222,128,.16);color:#4ADE80;
}
.tl-home .sv-line .tick svg{width:13px;height:13px}
.tl-home .sv-line .tick.pend{background:rgba(255,255,255,.07);color:var(--slate-2)}
.tl-home .sv-line b{font-family:var(--f-display);font-size:13.5px;font-weight:600;color:#fff}
.tl-home .sv-line small{margin-left:auto;font-size:12px;color:var(--slate-2)}
@media(max-width:960px){.tl-home .steps{grid-template-columns:1fr;gap:40px}}
.tl-home .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tl-home .q{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;
  display:flex;flex-direction:column;gap:18px;transition:.3s;
}
.tl-home .q:hover{transform:translateY(-5px);box-shadow:0 26px 56px -26px rgba(15,19,34,.26)}
.tl-home .q.feature{background:var(--ink);border-color:transparent;color:#fff;position:relative;overflow:hidden}
.tl-home .q.feature::after{
  content:"";position:absolute;width:300px;height:300px;border-radius:50%;bottom:-120px;left:-90px;
  background:radial-gradient(circle,rgba(240,35,76,.34),transparent 66%);filter:blur(44px);
}
.tl-home .q .mark{font-family:var(--f-display);font-size:44px;line-height:.6;color:var(--crimson);opacity:.5}
.tl-home .q p{font-size:14.8px;line-height:1.72;color:var(--slate);position:relative;z-index:2}
.tl-home .q.feature p{color:#D4D9E6}
.tl-home .q .who{display:flex;align-items:center;gap:12px;margin-top:auto;position:relative;z-index:2}
.tl-home .q .who .av{
  width:42px;height:42px;border-radius:13px;background:var(--g-brand);flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:var(--f-display);font-weight:700;font-size:15px;
}
.tl-home .q .who .av.a2{background:linear-gradient(140deg,var(--amber),#FF8A5B)}
.tl-home .q .who .av.a3{background:linear-gradient(140deg,#7C6BFF,#4ADE80)}
.tl-home .q .who b{display:block;font-family:var(--f-display);font-size:14.5px}
.tl-home .q .who small{font-size:12.5px;color:var(--slate-2)}
.tl-home .q.feature .who small{color:#8A92A6}
@media(max-width:960px){.tl-home .quotes{grid-template-columns:1fr}}
.tl-home .faq-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.tl-home .faq{border-top:1px solid var(--line)}
.tl-home .faq-item{border-bottom:1px solid var(--line)}
.tl-home .faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 0;text-align:left;font-family:var(--f-display);font-weight:600;font-size:16.5px;
  color:var(--ink);transition:color .2s;
}
.tl-home .faq-q:hover{color:var(--crimson)}
.tl-home .faq-q .pm{
  flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:.3s;position:relative;
}
.tl-home .faq-q .pm::before,.tl-home .faq-q .pm::after{content:"";position:absolute;background:var(--ink);border-radius:2px;transition:.3s}
.tl-home .faq-q .pm::before{width:12px;height:1.8px}
.tl-home .faq-q .pm::after{width:1.8px;height:12px}
.tl-home .faq-item.open .pm{background:var(--crimson);border-color:var(--crimson)}
.tl-home .faq-item.open .pm::before,.tl-home .faq-item.open .pm::after{background:#fff}
.tl-home .faq-item.open .pm::after{transform:rotate(90deg);opacity:0}
.tl-home .faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.2,.8,.2,1)}
.tl-home .faq-a p{padding:0 44px 26px 0;color:var(--slate);font-size:14.8px;line-height:1.72}
@media(max-width:900px){.tl-home .faq-wrap{grid-template-columns:1fr;gap:36px}}
.tl-home .offices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tl-home .office{
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:var(--r-lg);
  padding:30px 28px;transition:.3s;position:relative;overflow:hidden;
}
.tl-home .office:hover{background:rgba(255,255,255,.075);border-color:rgba(240,35,76,.32);transform:translateY(-5px)}
.tl-home .office .flag{font-size:13.5px;font-weight:600;color:var(--amber);margin-bottom:12px;display:block}
.tl-home .office h3{font-size:18px;margin-bottom:12px}
.tl-home .office address{font-style:normal;font-size:14px;color:#A8AFC2;line-height:1.7;margin-bottom:16px}
.tl-home .office .cts{display:grid;gap:7px;font-size:13.5px}
.tl-home .office .cts a{display:inline-flex;align-items:center;gap:9px;color:#C3C9D8;transition:.2s}
.tl-home .office .cts a:hover{color:var(--crimson-soft)}
.tl-home .office .cts svg{width:14px;height:14px;color:var(--crimson)}
@media(max-width:900px){.tl-home .offices{grid-template-columns:1fr}}
.tl-home .billing{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:34px}
.tl-home .bchip{
  padding:13px 24px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-family:var(--f-display);font-weight:600;font-size:14.5px;transition:.25s;
}
.tl-home .bchip:hover{border-color:var(--crimson);color:var(--crimson);transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(240,35,76,.5)}
.tl-home .cta-sec{background:var(--void);padding:0 0 120px}
.tl-home .cta{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(125deg,#1A0A14 0%,#2A0C1C 45%,#14060F 100%);
  border:1px solid rgba(240,35,76,.28);
  padding:76px 64px;text-align:center;
}
.tl-home .cta::before{
  content:"";position:absolute;width:640px;height:640px;border-radius:50%;
  top:-260px;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(240,35,76,.4),transparent 62%);filter:blur(70px);
}
.tl-home .cta::after{
  content:"";position:absolute;width:420px;height:420px;border-radius:50%;bottom:-220px;right:-90px;
  background:radial-gradient(circle,rgba(255,184,28,.24),transparent 64%);filter:blur(60px);
}
.tl-home .cta > *{position:relative;z-index:2}
.tl-home .cta h2{margin:20px auto 18px;max-width:760px}
.tl-home .cta .lede{max-width:600px;margin:0 auto}
.tl-home .cta-form{
  display:flex;gap:8px;max-width:520px;margin:34px auto 0;
  background:rgba(255,255,255,.07);border:1px solid var(--line-dark-2);
  padding:7px;border-radius:999px;backdrop-filter:blur(12px);
}
.tl-home .cta-form input{
  flex:1;background:none;border:none;outline:none;color:#fff;padding:0 20px;font-size:14.5px;font-family:var(--f-body);
}
.tl-home .cta-form input::placeholder{color:var(--slate-2)}
.tl-home .cta-alt{margin-top:18px;font-size:13.5px;color:var(--slate-2)}
.tl-home .cta-alt a{color:var(--crimson-soft);font-weight:600}
@media(max-width:680px){.tl-home .cta{padding:52px 26px}
.tl-home .cta-form{flex-direction:column;border-radius:var(--r);background:none;border:none;padding:0}
.tl-home .cta-form input{background:rgba(255,255,255,.07);border:1px solid var(--line-dark-2);border-radius:999px;padding:15px 22px}}
/* Scroll reveal is progressive enhancement: the html.tl-js gate is set by an
   inline script in header.php, so if the JS never loads (blocked, minifier
   error, old browser) the content renders plainly instead of staying at
   opacity:0 and leaving the page blank. */
/* The reveal uses the standalone `translate` property, not `transform`.
   `transform:none` here outranked every element's own transform - the
   orbit's responsive scale() and the translateY hover lift on .svc,
   .ai-card, .bx, .q, .office, .ept - wiping them the moment a section
   revealed. `translate` composes independently, so nothing competes.
   Unsupported browsers simply get the fade without the slide. */
html.tl-js .tl-home .rv{opacity:0;translate:0 26px;transition:opacity .75s cubic-bezier(.2,.8,.2,1),translate .75s cubic-bezier(.2,.8,.2,1)}
html.tl-js .tl-home .rv.in{opacity:1;translate:none}
.tl-home .rv-1{transition-delay:.07s}
.tl-home .rv-2{transition-delay:.14s}
.tl-home .rv-3{transition-delay:.21s}
.tl-home .rv-4{transition-delay:.28s}
@media(prefers-reduced-motion:reduce){.tl-home,.tl-home *,.tl-home *::before,.tl-home *::after{animation:none!important;transition-duration:.01ms!important}
.tl-home .rv{opacity:1;transform:none}
.tl-home .bars .b::after{height:var(--h)}}
/* Bootstrap/theme .btn leaks into our scopes; reset what we don't set. */


/* Fallback shown until a Contact Form 7 id is set in front-page.php. */
.tl-home .cta-form-fallback{margin-top:22px}

/* Elementor editor re-renders widgets after the reveal observer has run, so
   edited sections would stay at opacity:0. Show everything while editing. */
html.tl-js body.elementor-editor-active .tl-home .rv{opacity:1;translate:none}

/* Anyone who has asked for less motion gets the content straight away. */
@media (prefers-reduced-motion:reduce){
  html.tl-js .tl-home .rv{opacity:1;translate:none;transition:none}
}

/* ------------------------------------------------------------------
   Integration hub (replaces the orbit).
   A square stage: static SVG connectors, the brand mark in the centre
   and eight nodes at fixed % positions on a circle. Nodes are centred
   with transform only; nothing rotates, so nothing can drift.
   ------------------------------------------------------------------ */
.tl-home .int-hub{
  position:relative;width:100%;max-width:540px;margin-inline:auto;
  aspect-ratio:1/1;
}
.tl-home .int-hub::before{
  content:"";position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(240,35,76,.26),rgba(255,184,28,.06) 45%,transparent 68%);
  filter:blur(30px);pointer-events:none;
}
.tl-home .ih-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tl-home .ih-ring{
  fill:none;stroke:rgba(255,255,255,.10);stroke-width:.25;
  stroke-dasharray:1 1.6;animation:ihDash 30s linear infinite;
}
.tl-home .ih-ring-in{stroke:rgba(240,35,76,.28);animation-direction:reverse;animation-duration:22s}
.tl-home .ih-link{
  fill:none;stroke:url(#ihLine);stroke-width:.35;stroke-linecap:round;
  stroke-dasharray:1.4 1.4;animation:ihDash 6s linear infinite;
}
.tl-home .ih-packet{fill:var(--amber);filter:drop-shadow(0 0 1.2px var(--amber))}
@keyframes ihDash{to{stroke-dashoffset:-60}}

.tl-home .ih-core{
  position:absolute;left:50%;top:50%;z-index:2;
  width:26%;aspect-ratio:1/1;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--g-brand);
  box-shadow:0 0 0 8px rgba(240,35,76,.12),0 24px 60px -14px rgba(240,35,76,.8);
}
.tl-home .ih-core::before,
.tl-home .ih-core::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(240,35,76,.55);animation:ihPulse 3s ease-out infinite;
}
.tl-home .ih-core::after{animation-delay:1.5s}
@keyframes ihPulse{from{transform:scale(1);opacity:.9}to{transform:scale(1.9);opacity:0}}
.tl-home .ih-core img{width:44%;height:auto;display:block;filter:brightness(0) invert(1);position:relative}

.tl-home .ih-node{
  position:absolute;z-index:3;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  padding:7px 14px 7px 7px;border-radius:999px;
  background:rgba(17,21,31,.88);border:1px solid var(--line-dark-2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.7);
  font-family:var(--f-display);font-weight:600;font-size:13px;color:#E4E7EF;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.tl-home .ih-node:hover{
  border-color:rgba(240,35,76,.6);background:rgba(30,20,30,.95);
  box-shadow:0 0 0 4px rgba(240,35,76,.12),0 14px 34px -10px rgba(240,35,76,.55);
}
.tl-home .ih-ico{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,rgba(240,35,76,.9),rgba(194,16,56,.9));
}
.tl-home .ih-ico img{width:16px;height:16px;display:block}

.tl-home .ih-badge{
  position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);z-index:3;
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  background:rgba(255,184,28,.08);border:1px solid rgba(255,184,28,.28);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-soft);
}
.tl-home .ih-badge i{width:7px;height:7px;border-radius:50%;background:#2BD67B;box-shadow:0 0 8px #2BD67B}

@media(prefers-reduced-motion:reduce){.tl-home .ih-packet{display:none}}

/* Narrow screens: labels would collide, so nodes become icon-only discs. */
@media(max-width:600px){
  .tl-home .int-hub{max-width:380px;margin-top:20px}
  .tl-home .ih-node{padding:5px;gap:0}
  .tl-home .ih-name{display:none}
  .tl-home .ih-ico{width:38px;height:38px}
  .tl-home .ih-ico img{width:18px;height:18px}
  .tl-home .ih-badge{bottom:-6%}
}

/* ==================================================================
   Hero v2 - CRM, ERP and custom solutions (home page, section "Hero",
   class tl-hero-v2; panel markup in the "Dashboard mockup" HTML widget).
   ================================================================== */
/* Slowly drifting background glows. */
.tl-hero-v2.tl-mesh::after{animation:hv2Drift 18s ease-in-out infinite alternate;transform-origin:60% 40%}
@keyframes hv2Drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3%,2%,0) scale(1.08)}100%{transform:translate3d(2%,-2%,0) scale(1.04)}}
/* Shimmer across the gradient words in the heading. */
.tl-hero-v2 .tl-grad{background-size:220% auto;animation:hv2Shimmer 3s ease-in-out 1.5s 1}
@keyframes hv2Shimmer{to{background-position:220% center}}
/* Panel: fades and rises in, then follows the pointer with a gentle tilt (js/tl-home.js). */
.tl-home .console.hv2{--rx:0deg;--ry:0deg;transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .6s cubic-bezier(.2,.8,.2,1);animation:hv2In .9s cubic-bezier(.2,.8,.2,1) backwards .15s}
@keyframes hv2In{from{opacity:0;transform:perspective(1100px) translateY(26px) scale(.97)}to{opacity:1}}
.tl-home .hv2 .chip-float i{position:relative;background:#4ADE80}
.tl-home .hv2 .chip-float i::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(74,222,128,.55);animation:hv2Ping 2s ease-out infinite}
@keyframes hv2Ping{0%{transform:scale(1);opacity:1}80%,100%{transform:scale(3);opacity:0}}
/* Bars keep growing and settling after the first load. */
.tl-home .hv2 .bars .b::after{animation:grow 1.1s cubic-bezier(.2,.8,.2,1) forwards,hv2Bar 4.8s ease-in-out 1.6s infinite}
@keyframes hv2Bar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.86)}}

/* Live integrations: data packets travel between apps, status flips to Synced. */
.tl-home .hv2-flows{background:rgba(255,255,255,.035);border:1px solid var(--line-dark);border-radius:16px;padding:14px 16px;display:grid;gap:10px}
.tl-home .hv2-head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-display);font-size:13.5px;font-weight:600}
.tl-home .hv2-count{font-family:var(--f-body);font-size:12px;font-weight:600;color:#4ADE80}
.tl-home .hv2-flow{display:grid;grid-template-columns:auto 1fr auto 74px;align-items:center;gap:10px;font-size:12.3px}
.tl-home .hv2-flow .app{padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid var(--line-dark);color:#D4D9E6;font-weight:600;white-space:nowrap}
.tl-home .hv2-flow .pipe{position:relative;height:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.tl-home .hv2-flow .pipe i{position:absolute;top:-2px;left:0;width:30%;height:6px;border-radius:6px;transform:translateX(-100%);will-change:transform;
  background:linear-gradient(90deg,transparent,var(--crimson),var(--amber));animation:hv2Packet 2.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes hv2Packet{to{transform:translateX(334%)}}
.tl-home .hv2-flow .st{position:relative;height:18px;font-size:11.5px}
.tl-home .hv2-flow .st b{position:absolute;right:0;top:0;white-space:nowrap;font-weight:600}
.tl-home .hv2-flow .st .sync{color:var(--amber);animation:hv2Sync 6s infinite}
.tl-home .hv2-flow .st .ok{color:#4ADE80;animation:hv2Ok 6s infinite}
@keyframes hv2Sync{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
@keyframes hv2Ok{0%,45%{opacity:0}50%,95%{opacity:1}100%{opacity:0}}
.tl-home .hv2-flow:nth-child(3) .pipe i{animation-delay:.8s}
.tl-home .hv2-flow:nth-child(4) .pipe i{animation-delay:1.6s}
.tl-home .hv2-flow:nth-child(3) .st b{animation-delay:2s}
.tl-home .hv2-flow:nth-child(4) .st b{animation-delay:4s}
@media(max-width:520px){.tl-home .hv2-flow{grid-template-columns:auto 1fr auto;font-size:11.5px}.tl-home .hv2-flow .st{display:none}}
@media(prefers-reduced-motion:reduce){.tl-hero-v2.tl-mesh::after,.tl-hero-v2 .tl-grad{animation:none!important}
  .tl-home .console.hv2{transform:none}}