body.tla-elementor-page{margin:0;background:#fff}
.tla-kicker{letter-spacing:.18em;text-transform:uppercase;font-weight:800}
.tla-hero{position:relative;overflow:hidden;background:
radial-gradient(circle at 72% 30%,rgba(22,134,255,.16),transparent 31%),
linear-gradient(135deg,#06121d,#0a1b2d 68%,#0e2a48)!important}
.tla-client-logo img{filter:grayscale(1);opacity:.78;transition:.25s ease;max-height:58px;object-fit:contain}
.tla-client-logo:hover img{filter:none;opacity:1;transform:translateY(-2px)}
.tla-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.tla-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(15,48,80,.09);border-color:#bfdcf7!important}
.tla-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.tla-reveal.tla-visible{opacity:1;transform:none}
.tla-flow{position:relative;min-height:430px;width:100%}
.tla-flow svg{position:absolute;inset:0;width:100%;height:100%}
.tla-flow path{fill:none;stroke:#1fa8ff;stroke-width:2;opacity:.7;stroke-dasharray:7 8;animation:tlaDash 2s linear infinite}
@keyframes tlaDash{to{stroke-dashoffset:-30}}
.tla-node{position:absolute;min-width:158px;padding:15px 17px;border-radius:16px;color:#fff;background:rgba(12,34,55,.84);border:1px solid rgba(80,173,255,.42);box-shadow:0 0 18px rgba(18,133,255,.14);backdrop-filter:blur(10px)}
.tla-node b{display:block;font-size:15px}.tla-node small{color:#a8bbcf}
.tla-node.center{left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;padding:26px 18px;min-width:160px;border-color:#2eabff;animation:tlaPulse 2.7s ease-in-out infinite}
.tla-node.center strong{font-size:32px;letter-spacing:.06em}
@keyframes tlaPulse{0%,100%{box-shadow:0 0 24px rgba(20,155,255,.30)}50%{box-shadow:0 0 46px rgba(20,155,255,.68)}}
.tla-n1{left:2%;top:6%}.tla-n2{right:0;top:8%}.tla-n3{left:0;top:38%}.tla-n4{right:0;top:38%}.tla-n5{left:6%;bottom:8%}.tla-n6{right:2%;bottom:8%}
.tla-flow-example{border:1px solid #dce8f4;border-radius:18px;padding:22px;background:#fff;box-shadow:0 10px 28px rgba(20,48,80,.04)}
.tla-flow-example.green{background:linear-gradient(135deg,#effdf5,#fff)}
.tla-flow-example.blue{background:linear-gradient(135deg,#f0f7ff,#fff)}
.tla-flow-example.purple{background:linear-gradient(135deg,#f7f3ff,#fff)}
.tla-flow-example.orange{background:linear-gradient(135deg,#fff7ef,#fff)}
.tla-flow-icons{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:22px}.tla-flow-icons span{color:#82a7c8;font-weight:900}


/* =========================================================
   TLA Responsive System v1.1
   Desktop: 1025px+
   Tablet/iPad: 768px–1024px
   Mobile: <=767px
   ========================================================= */

/* Desktop refinements */
@media (min-width:1025px){
  .tla-hero-left{width:50%!important;max-width:50%!important}
  .tla-hero-right{width:50%!important;max-width:50%!important}
  .tla-hero .elementor-heading-title{font-size:clamp(56px,5.2vw,72px)!important}
}

/* Tablet / iPad */
@media (min-width:768px) and (max-width:1024px){
  .tla-hero{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  .tla-hero > .e-con-inner,
  .tla-hero.e-con{
    gap:28px!important;
  }
  .tla-hero-left{width:48%!important;max-width:48%!important}
  .tla-hero-right{width:52%!important;max-width:52%!important}
  .tla-hero .elementor-heading-title{
    font-size:clamp(44px,5.8vw,58px)!important;
    line-height:1.02!important;
  }
  .tla-hero .elementor-widget-text-editor{
    font-size:16px!important;
  }

  .tla-flow{
    min-height:390px;
    transform:scale(.9);
    transform-origin:center center;
  }
  .tla-node{
    min-width:140px;
    padding:12px 14px;
  }
  .tla-node b{font-size:14px}
  .tla-node small{font-size:11px}

  .tla-logos-row,
  .tla-problem-row,
  .tla-services-grid,
  .tla-flows-grid,
  .tla-process-steps,
  .tla-why-grid{
    flex-wrap:wrap!important;
  }

  .tla-logo-col{
    width:23%!important;
    max-width:23%!important;
    min-width:0!important;
  }
  .tla-problem-card,
  .tla-why-card{
    width:48%!important;
    max-width:48%!important;
  }
  .tla-service-card{
    width:48%!important;
    max-width:48%!important;
  }
  .tla-flow-card{
    width:48%!important;
    max-width:48%!important;
  }
  .tla-process-step{
    width:31.5%!important;
    max-width:31.5%!important;
  }
  .tla-process-step:nth-child(4),
  .tla-process-step:nth-child(5){
    width:48%!important;
    max-width:48%!important;
  }

  .tla-cta-inner{
    gap:24px!important;
    padding:34px!important;
  }
  .tla-cta-copy{width:66%!important;max-width:66%!important}
  .tla-cta-button-col{width:34%!important;max-width:34%!important}
}

/* Mobile */
@media (max-width:767px){
  body.tla-elementor-page{
    overflow-x:hidden;
  }

  /* Comfortable page gutters */
  .tla-elementor-page .e-con{
    --container-max-width:100%;
  }

  /* Hero stacks naturally */
  .tla-hero{
    padding:70px 18px 46px!important;
  }
  .tla-hero > .e-con-inner,
  .tla-hero.e-con{
    flex-direction:column!important;
    gap:12px!important;
  }
  .tla-hero-left,
  .tla-hero-right{
    width:100%!important;
    max-width:100%!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .tla-hero .elementor-heading-title{
    font-size:clamp(40px,12vw,52px)!important;
    line-height:1.00!important;
    letter-spacing:-.045em!important;
  }
  .tla-hero .elementor-widget-text-editor{
    font-size:16px!important;
  }
  .tla-hero .elementor-button{
    width:100%!important;
    justify-content:center!important;
  }

  /* Mobile workflow: keep the approved look, but make it fit */
  .tla-flow{
    min-height:430px!important;
    transform:none!important;
    margin-bottom:0!important;
    max-width:430px;
    margin-left:auto;
    margin-right:auto;
  }
  .tla-node{
    min-width:118px!important;
    max-width:135px;
    padding:10px 10px!important;
    border-radius:13px;
  }
  .tla-node b{font-size:12px!important}
  .tla-node small{font-size:9px!important;line-height:1.2;display:block}
  .tla-node.center{
    min-width:126px!important;
    padding:20px 10px!important;
  }
  .tla-node.center strong{font-size:26px!important}
  .tla-n1{left:0;top:8%}.tla-n2{right:0;top:8%}
  .tla-n3{left:0;top:42%}.tla-n4{right:0;top:42%}
  .tla-n5{left:1%;bottom:5%}.tla-n6{right:1%;bottom:5%}

  /* Logo wall */
  .tla-logos-row{
    flex-direction:row!important;
    flex-wrap:wrap!important;
    gap:8px!important;
  }
  .tla-logo-col{
    width:47%!important;
    max-width:47%!important;
    min-height:64px;
  }
  .tla-client-logo img{
    max-height:46px!important;
    max-width:125px!important;
    margin:auto;
  }

  /* All main card groups stack one-per-row */
  .tla-problem-row,
  .tla-services-grid,
  .tla-flows-grid,
  .tla-process-steps,
  .tla-why-grid{
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    gap:12px!important;
  }
  .tla-problem-card,
  .tla-service-card,
  .tla-flow-card,
  .tla-process-step,
  .tla-why-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .tla-card,
  .tla-flow-example{
    padding:18px!important;
  }

  /* Keep section headings readable */
  .tla-elementor-page h2.elementor-heading-title{
    font-size:clamp(32px,9vw,42px)!important;
    line-height:1.05!important;
  }
  .tla-elementor-page h3.elementor-heading-title{
    font-size:18px!important;
  }

  /* CTA */
  .tla-cta-inner{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:20px!important;
    padding:26px!important;
  }
  .tla-cta-copy,
  .tla-cta-button-col{
    width:100%!important;
    max-width:100%!important;
  }
  .tla-cta-button-col{
    align-items:stretch!important;
  }
  .tla-cta-button-col .elementor-widget-button,
  .tla-cta-button-col .elementor-button{
    width:100%!important;
  }
  .tla-cta-button-col .elementor-button{
    justify-content:center!important;
  }

  /* Touch targets */
  .tla-elementor-page .elementor-button{
    min-height:48px;
  }
}

/* Very small phones */
@media (max-width:390px){
  .tla-hero .elementor-heading-title{
    font-size:39px!important;
  }
  .tla-flow{
    transform:scale(.92)!important;
    transform-origin:top center;
    margin-bottom:-25px!important;
  }
  .tla-node{
    min-width:108px!important;
    max-width:120px!important;
  }
}