* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   font-family: Inter,Arial,sans-serif;
   background: #071427;
   color: #fff;
   overflow-x: hidden
}

.ws-page {
   position: relative;
   min-height: 100vh;
   background: #071427
}

.ws-floating-whatsapp {
   position: fixed;
   right: 28px;
   bottom: 28px;
   z-index: 150;
   width: 62px;
   height: 62px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #22c55e;
   color: #fff;
   text-decoration: none;
   box-shadow: 0 18px 45px rgba(34,197,94,.35);
   transition: .18s ease
}

   .ws-floating-whatsapp:hover {
      transform: translateY(-3px) scale(1.03)
   }

   .ws-floating-whatsapp i {
      font-size: 32px
   }

.ws-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   border: 0;
   text-decoration: none;
   cursor: pointer;
   transition: .18s ease;
   font-family: Inter,Arial,sans-serif
}

.ws-btn-primary {
   background: linear-gradient(135deg,#ff7a18,#ff8f2d) !important;
   color: #fff !important
}

   .ws-btn-primary:hover {
      transform: translateY(-2px);
      filter: brightness(1.06)
   }

.ws-btn-outline {
   border: 1px solid rgba(255,122,24,.72) !important;
   background: rgba(255,122,24,.04) !important;
   color: #fff !important
}

   .ws-btn-outline:hover {
      background: rgba(255,122,24,.12) !important;
      transform: translateY(-2px)
   }

.ws-nav {
   position: sticky;
   top: 14px;
   z-index: 90;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 22px;
   min-height: 86px;
   padding: 16px 28px;
   margin: 16px 20px 0;
   border: 1px solid rgba(255,255,255,.13);
   border-radius: 28px;
   background: linear-gradient(135deg,rgba(8,18,34,.94),rgba(34,45,63,.84));
   box-shadow: 0 22px 64px rgba(2,6,23,.32);
   backdrop-filter: blur(22px)
}

.ws-page.scrolled .ws-nav {
   background: linear-gradient(135deg,rgba(8,18,34,.97),rgba(34,45,63,.9));
   box-shadow: 0 18px 55px rgba(2,6,23,.36)
}

.ws-brand {
   display: flex;
   align-items: center;
   text-decoration: none;
   flex: 0 0 auto
}

.ws-logo {
   display: flex;
   align-items: center;
   justify-content: center
}

   .ws-logo img {
      max-height: 66px;
      width: auto;
      display: block
   }

.ws-nav-links {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   flex: 1
}

   .ws-nav-links a {
      height: 42px;
      display: flex;
      align-items: center;
      position: relative;
      padding: 0 10px;
      border-radius: 999px;
      color: rgba(255,255,255,.86);
      font-size: 14px;
      font-weight: 800;
      text-decoration: none;
      letter-spacing: -.01em;
      transition: .18s ease
   }

      .ws-nav-links a:hover {
         color: #fff;
         background: rgba(255,255,255,.08);
         transform: translateY(-1px)
      }

      .ws-nav-links a:first-child {
         color: #fff
      }

         .ws-nav-links a:first-child:after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 3px;
            width: 28px;
            height: 3px;
            border-radius: 999px;
            background: #ff7a18;
            transform: translateX(-50%);
            box-shadow: 0 0 16px rgba(255,122,24,.6)
         }

.ws-nav-login {
   position: relative;
   flex: 0 0 auto
}

   .ws-nav-login form {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0
   }

.ws-nav-input {
   height: 48px;
   padding: 0 17px;
   border-radius: 16px;
   border: 1px solid rgba(255,255,255,.15);
   background: rgba(255,255,255,.09);
   color: #fff;
   outline: none;
   font-size: 14px;
   font-weight: 700;
   box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
   transition: .18s ease
}

.ws-nav-input-user {
   width: 250px
}

.ws-nav-input-pass {
   width: 170px
}

.ws-nav-input::placeholder {
   color: rgba(255,255,255,.58)
}

.ws-nav-input:focus {
   border-color: rgba(255,107,0,.75);
   background: rgba(255,255,255,.12);
   box-shadow: 0 0 0 4px rgba(255,107,0,.14)
}

.ws-nav-submit {
   height: 48px !important;
   min-height: 48px !important;
   padding: 0 24px !important;
   border-radius: 16px !important;
   font-size: 14px !important;
   font-weight: 900 !important;
   white-space: nowrap !important;
   box-shadow: 0 16px 38px rgba(255,107,0,.34) !important
}

   .ws-nav-submit .material-icons {
      font-size: 19px !important
   }

.ws-login-popover {
   position: absolute;
   right: 0;
   top: 62px;
   width: 330px;
   padding: 14px;
   border-radius: 22px;
   background: rgba(15,23,42,.96);
   border: 1px solid rgba(255,255,255,.14);
   box-shadow: 0 26px 70px rgba(2,6,23,.42);
   backdrop-filter: blur(24px);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-8px) scale(.98);
   transition: .18s ease;
   z-index: 120
}

   .ws-login-popover.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1)
   }

   .ws-login-popover:before {
      content: "";
      position: absolute;
      right: 26px;
      top: -8px;
      width: 16px;
      height: 16px;
      background: rgba(15,23,42,.96);
      border-left: 1px solid rgba(255,255,255,.14);
      border-top: 1px solid rgba(255,255,255,.14);
      transform: rotate(45deg)
   }

.ws-login-popover-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 10px
}

.ws-login-popover-title {
   display: flex;
   align-items: center;
   gap: 9px;
   color: #fff;
   font-size: 14px;
   font-weight: 900
}

   .ws-login-popover-title i {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: rgba(255,107,0,.14);
      color: #ff8a2a;
      font-size: 19px
   }

.ws-login-popover-sub {
   display: block;
   margin-top: 4px;
   color: rgba(255,255,255,.58);
   font-size: 12px;
   font-weight: 600;
   line-height: 1.35
}

.ws-popover-close {
   width: 30px;
   height: 30px;
   border: 0;
   border-radius: 10px;
   background: rgba(255,255,255,.08);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer
}

   .ws-popover-close:hover {
      background: rgba(255,255,255,.14)
   }

.ws-turnstile-box {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 72px;
   padding-top: 6px
}

/* HERO SEM ABSOLUTO NO FLUXO PRINCIPAL */
.ws-hero {
   position: relative;
   display: grid;
   grid-template-columns: minmax(460px,.9fr) minmax(620px,1.1fr);
   align-items: center;
   gap: 28px;
   padding: 40px 72px 90px;
   min-height: auto;
   height: auto;
   overflow: hidden;
   background: radial-gradient(circle at 88% 8%,rgba(255,107,0,.18),transparent 30%),radial-gradient(circle at 5% 58%,rgba(0,102,255,.13),transparent 28%),linear-gradient(135deg,#071427 0%,#0d1830 100%)
}

   .ws-hero:before {
      content: "";
      position: absolute;
      left: -14%;
      bottom: -22%;
      width: 80%;
      height: 42%;
      border-radius: 50%;
      background: repeating-linear-gradient(170deg,rgba(255,107,0,.34) 0,rgba(255,107,0,.34) 1px,transparent 2px,transparent 9px);
      filter: blur(.2px);
      opacity: .66;
      transform: rotate(-8deg);
      z-index: 1
   }

   .ws-hero:after {
      content: "";
      position: absolute;
      right: -10%;
      bottom: -14%;
      width: 70%;
      height: 34%;
      border-radius: 50%;
      background: repeating-linear-gradient(170deg,rgba(0,132,255,.35) 0,rgba(0,132,255,.35) 1px,transparent 2px,transparent 10px);
      opacity: .54;
      transform: rotate(-10deg);
      z-index: 1
   }

.ws-hero-glow-orange, .ws-hero-glow-blue {
   position: absolute;
   pointer-events: none;
   z-index: 1;
   border-radius: 999px;
   filter: blur(46px)
}

.ws-hero-glow-orange {
   right: 2%;
   top: 10%;
   width: 330px;
   height: 330px;
   background: rgba(255,107,0,.3);
   opacity: .72
}

.ws-hero-glow-blue {
   right: 10%;
   bottom: 8%;
   width: 380px;
   height: 260px;
   background: rgba(0,132,255,.23);
   opacity: .55
}

.ws-hero-content {
   position: relative;
   z-index: 3;
   max-width: 590px;
   padding-top: 0
}

.ws-hero-pill {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   height: 40px;
   padding: 0 18px;
   margin-bottom: 20px;
   border-radius: 999px;
   border: 1px solid rgba(255,255,255,.13);
   background: rgba(255,255,255,.06);
   color: #fff;
   font-size: 14px;
   font-weight: 800;
   box-shadow: inset 0 1px 0 rgba(255,255,255,.05)
}

   .ws-hero-pill i {
      font-size: 18px;
      color: #ff7a18
   }

.ws-hero-slogan {
   position: relative;
   margin-bottom: 20px;
   padding-bottom: 17px
}

   .ws-hero-slogan:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 72px;
      height: 4px;
      border-radius: 999px;
      background: #ff7a18
   }

   .ws-hero-slogan span {
      display: block
   }

   .ws-hero-slogan .line1 {
      font-size: 26px;
      font-weight: 500;
      color: #fff;
      line-height: 1.1
   }

   .ws-hero-slogan .line2 {
      font-size: 30px;
      font-weight: 900;
      color: #ff7a18;
      line-height: 1.1
   }

.ws-hero h1 {
   margin: 0 0 20px;
   color: #fff;
   font-size: 46px;
   line-height: .96;
   font-weight: 900;
   letter-spacing: -.055em;
   text-shadow: 0 14px 34px rgba(0,0,0,.22);
   max-width: 590px
}

   .ws-hero h1 span {
      color: #ff7a18
   }

.ws-hero p {
   max-width: 540px;
   margin: 0;
   color: rgba(255,255,255,.9);
   font-size: 15.5px;
   line-height: 1.45
}

.ws-hero-actions {
   display: flex;
   align-items: center;
   gap: 18px;
   margin-top: 22px
}

   .ws-hero-actions .ws-btn {
      height: 50px;
      padding: 0 24px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 900
   }

.ws-mockup-real {
   --mx: 0deg;
   --my: 0deg;
   position: relative;
   z-index: 3;
   display: flex;
   align-self: center;
   align-items: center;
   justify-content: flex-end;
   width: 100%;
   transform: translateY(-18px) perspective(1500px) rotateX(calc(2deg + var(--my))) rotateY(calc(-6deg + var(--mx))) rotateZ(.8deg);
   transform-origin: center;
   transition: transform .18s ease-out,filter .18s ease-out
}

   .ws-mockup-real:before {
      content: "";
      position: absolute;
      inset: 5% -1% 3% 5%;
      border-radius: 34px;
      background: linear-gradient(135deg,rgba(255,107,0,.62),rgba(0,102,255,.22));
      filter: blur(32px);
      opacity: 1;
      transform: translate(12px,28px);
      z-index: -1
   }

   .ws-mockup-real:hover {
      filter: saturate(1.04) contrast(1.02)
   }

   .ws-mockup-real img {
      width: 100%;
      max-width: 860px;
      display: block;
      border-radius: 30px;
      box-shadow: 0 40px 78px rgba(0,0,0,.36)
   }

.ws-mini-highlight {
   grid-column: 1/-1;
   position: relative;
   z-index: 6;
   display: grid;
   grid-template-columns: repeat(4,minmax(0,1fr));
   gap: 0;
   width: 100%;
   margin: 38px auto 0;
   padding: 18px 20px;
   border-radius: 28px;
   border: 1px solid rgba(255,255,255,.12);
   background: rgba(12,24,43,.78);
   box-shadow: 0 24px 70px rgba(0,0,0,.28);
   backdrop-filter: blur(20px)
}

.ws-mini-card {
   display: grid;
   grid-template-columns: 50px 1fr;
   gap: 12px;
   align-items: center;
   padding: 4px 14px;
   border-right: 1px solid rgba(255,255,255,.1);
   background: transparent;
   box-shadow: none
}

   .ws-mini-card:last-child {
      border-right: 0
   }

   .ws-mini-card i {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,107,0,.72);
      background: rgba(255,107,0,.08);
      color: #ff7a18;
      font-size: 25px
   }

   .ws-mini-card b {
      display: block;
      color: #fff;
      font-size: 14px;
      font-weight: 900;
      margin-bottom: 4px
   }

   .ws-mini-card span {
      display: block;
      color: rgba(255,255,255,.72);
      font-size: 12px;
      line-height: 1.35
   }

.ws-hero-logo-bottom {
   display: none
}

.ws-section-divider {
   display: none
}

/* SEÇÕES */
.ws-section {
   position: relative;
   padding: 88px 88px
}

.ws-section-white {
   background: #fff;
   color: #0f172a
}

.ws-section-soft {
   background: #f6f8fb;
   color: #0f172a
}

#portais {
   margin-top: 0 !important;
   padding-top: 110px !important
}

.ws-section-head {
   max-width: 820px;
   margin: 0 auto 38px;
   text-align: center
}

.ws-kicker {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 12px;
   padding: 7px 14px;
   border-radius: 999px;
   background: rgba(255,107,0,.1);
   color: #ff6b00;
   font-size: 12px;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: .06em
}

.ws-section-head h2 {
   margin: 0 0 12px;
   font-size: 38px;
   line-height: 1.08;
   font-weight: 900;
   letter-spacing: -.04em;
   color: inherit
}

.ws-section-head p {
   margin: 0;
   color: #64748b;
   font-size: 16px;
   line-height: 1.65
}

.ws-card {
   border: 1px solid rgba(15,23,42,.08);
   background: #fff;
   border-radius: 24px;
   box-shadow: 0 16px 42px rgba(15,23,42,.08)
}

.ws-portals, .ws-modules, .ws-benefits, .ws-use-grid, .ws-contact-grid, .ws-testimonials {
   display: grid;
   gap: 18px
}

.ws-portals {
   grid-template-columns: repeat(3,1fr)
}

.ws-portal-card {
   display: grid;
   grid-template-columns: 58px 1fr;
   gap: 18px;
   padding: 24px
}

.ws-icon, .ws-module-icon {
   width: 52px;
   height: 52px;
   border-radius: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg,#ff7a18,#ff9d4b);
   color: #fff;
   box-shadow: 0 14px 28px rgba(255,107,0,.22)
}

   .ws-icon i, .ws-module-icon i {
      font-size: 27px
   }

.ws-card h3 {
   margin: 0 0 8px;
   font-size: 20px;
   color: #0f172a
}

.ws-card p, .ws-card span {
   color: #64748b;
   line-height: 1.58
}

.ws-modules {
   grid-template-columns: repeat(3,1fr)
}

.ws-module {
   display: grid;
   grid-template-columns: 54px 1fr;
   gap: 14px;
   padding: 20px;
   align-items: start
}

   .ws-module b, .ws-benefit b, .ws-use-card b, .ws-contact-card b {
      display: block;
      color: #0f172a;
      font-size: 16px;
      margin-bottom: 5px
   }
.ws-flow {
   display: grid;
   grid-template-columns: repeat(4,minmax(240px,320px));
   justify-content: center;
   gap: 24px;
   max-width: 1400px;
   margin: 0 auto;
}

.ws-flow-step {
   position: relative;
   padding: 24px 18px;
   border-radius: 24px;
   text-align: center;
   border: 1px solid rgba(15,23,42,.08);
   background: #fff;
   box-shadow: 0 16px 38px rgba(15,23,42,.07);
   width: 100%;
}

.ws-flow-icon {
   width: 58px;
   height: 58px;
   margin: 0 auto 14px;
   border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #0f172a;
   color: #fff;
}

.ws-flow-step b {
   display: block;
   margin-bottom: 7px;
   color: #0f172a;
}

.ws-flow-step span {
   font-size: 13px;
   color: #64748b;
   line-height: 1.45;
}

@media(max-width:1200px) {
   .ws-flow {
      grid-template-columns: repeat(2,minmax(260px,1fr));
   }
}

@media(max-width:768px) {
   .ws-flow {
      grid-template-columns: 1fr;
      gap: 16px;
   }
}
.ws-why {
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   gap: 30px;
   align-items: center
}

   .ws-why .ws-section-head {
      text-align: left;
      margin: 0
   }

.ws-benefits {
   grid-template-columns: repeat(2,1fr)
}

.ws-benefit {
   padding: 22px
}

   .ws-benefit .ws-module-icon {
      margin-bottom: 14px
   }

.ws-use-grid {
   grid-template-columns: repeat(4,1fr)
}

.ws-use-card {
   padding: 20px
}

.ws-testimonials {
   grid-template-columns: repeat(3,1fr)
}

.ws-testimonial {
   padding: 24px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 20px
}

.ws-quote {
   font-size: 54px;
   line-height: .7;
   color: #ff7a18;
   font-weight: 900
}

.ws-stars {
   color: #ffb020;
   letter-spacing: 2px;
   margin-top: 12px
}

.ws-person {
   display: flex;
   align-items: center;
   gap: 12px
}

.ws-avatar {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #0f172a;
   color: #fff;
   font-weight: 900
}

.ws-person b {
   display: block;
   color: #0f172a
}

.ws-person span {
   font-size: 13px
}

.ws-contact-grid {
   grid-template-columns: repeat(3,1fr)
}

.ws-contact-card {
   padding: 26px;
   text-align: center
}

   .ws-contact-card > i {
      font-size: 34px;
      color: #ff7a18;
      margin-bottom: 10px
   }

   .ws-contact-card a {
      color: #0f172a;
      font-weight: 800;
      text-decoration: none
   }

.ws-cta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 28px;
   margin: 0;
   padding: 58px 88px;
   background: linear-gradient(135deg,#071427,#12233d);
   color: #fff
}

   .ws-cta h2 {
      margin: 0 0 8px;
      font-size: 34px;
      font-weight: 900;
      letter-spacing: -.03em
   }

   .ws-cta p {
      margin: 0;
      color: rgba(255,255,255,.72)
   }

   .ws-cta .ws-btn {
      height: 54px;
      padding: 0 28px;
      border-radius: 999px;
      font-weight: 900
   }

.ws-footer {
   padding: 56px 88px 24px;
   background: #050b16;
   color: rgba(255,255,255,.75)
}

.ws-footer-grid {
   display: grid;
   grid-template-columns: 1.5fr repeat(3,1fr);
   gap: 34px
}

.ws-footer h4 {
   margin: 0 0 14px;
   color: #fff
}

.ws-footer a {
   display: block;
   color: rgba(255,255,255,.72);
   text-decoration: none;
   margin: 8px 0
}

   .ws-footer a:hover {
      color: #fff
   }

.ws-footer p {
   line-height: 1.6;
   margin: 0
}

.ws-footer-bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   margin-top: 34px;
   padding-top: 18px;
   border-top: 1px solid rgba(255,255,255,.1);
   font-size: 13px;
   color: rgba(255,255,255,.55)
}

/* RESPONSIVO */
@media(min-width:1501px) {
   .ws-hero {
      grid-template-columns: minmax(500px,.88fr) minmax(700px,1.12fr);
      padding: 58px 88px 110px
   }

   .ws-hero-content {
      max-width: 700px
   }

   .ws-hero h1 {
      font-size: 64px
   }

   .ws-hero p {
      font-size: 18px;
      line-height: 1.58
   }

   .ws-mockup-real {
      transform: translateY(-24px) perspective(1500px) rotateX(calc(2deg + var(--my))) rotateY(calc(-7deg + var(--mx))) rotateZ(1deg)
   }

      .ws-mockup-real img {
         max-width: 1060px
      }

   .ws-mini-highlight {
      margin-top: 46px;
      padding: 20px 26px
   }

   .ws-mini-card {
      grid-template-columns: 64px 1fr;
      gap: 16px;
      padding: 6px 22px
   }

      .ws-mini-card i {
         width: 62px;
         height: 62px;
         font-size: 30px
      }

      .ws-mini-card b {
         font-size: 15px
      }

      .ws-mini-card span {
         font-size: 13px
      }
}

@media(max-width:1366px) {
   .ws-nav {
      min-height: 76px;
      padding: 10px 26px;
      margin: 12px 18px 0
   }

   .ws-logo img {
      max-height: 50px
   }

   .ws-nav-links {
      gap: 12px
   }

      .ws-nav-links a {
         font-size: 13px
      }

   .ws-nav-input-user {
      width: 210px
   }

   .ws-nav-input-pass {
      width: 150px
   }

   .ws-nav-input, .ws-nav-submit {
      height: 46px !important;
      min-height: 46px !important
   }

   .ws-hero {
      grid-template-columns: minmax(430px,.85fr) minmax(560px,1.15fr);
      padding: 34px 56px 86px;
      gap: 18px
   }

   .ws-hero-content {
      max-width: 560px
   }

   .ws-hero-pill {
      height: 38px;
      margin-bottom: 18px;
      font-size: 13px
   }

   .ws-hero-slogan {
      margin-bottom: 18px;
      padding-bottom: 16px
   }

      .ws-hero-slogan .line1 {
         font-size: 24px
      }

      .ws-hero-slogan .line2 {
         font-size: 28px
      }

   .ws-hero h1 {
      font-size: 42px;
      line-height: .96;
      margin-bottom: 18px
   }

   .ws-hero p {
      font-size: 15px;
      line-height: 1.42
   }

   .ws-hero-actions {
      margin-top: 18px
   }

      .ws-hero-actions .ws-btn {
         height: 48px;
         padding: 0 22px;
         font-size: 13px
      }

   .ws-mockup-real {
      transform: translateY(-22px) perspective(1500px) rotateX(calc(2deg + var(--my))) rotateY(calc(-6deg + var(--mx))) rotateZ(.8deg)
   }

      .ws-mockup-real img {
         max-width: 880px
      }

   .ws-mini-highlight {
      margin-top: 34px;
      width: 100%;
      padding: 16px 18px
   }

   .ws-mini-card {
      grid-template-columns: 48px 1fr;
      gap: 12px;
      padding: 4px 14px
   }

      .ws-mini-card i {
         width: 48px;
         height: 48px;
         font-size: 24px
      }

      .ws-mini-card b {
         font-size: 14px;
         margin-bottom: 4px
      }

      .ws-mini-card span {
         font-size: 12px;
         line-height: 1.35
      }
}

@media(max-width:1180px) {
   .ws-nav {
      flex-wrap: wrap
   }

   .ws-nav-links {
      order: 3;
      width: 100%;
      justify-content: flex-start;
      overflow-x: auto;
      padding-top: 4px
   }

   .ws-nav-login {
      margin-left: auto
   }

   .ws-hero {
      grid-template-columns: 1fr;
      padding: 42px 28px 56px
   }

   .ws-hero-content {
      max-width: 760px
   }

   .ws-mockup-real {
      justify-content: center;
      margin-top: 20px;
      transform: perspective(1200px) rotateX(calc(2deg + var(--my))) rotateY(calc(-5deg + var(--mx))) rotateZ(1deg)
   }

      .ws-mockup-real img {
         width: 100%;
         max-width: 930px
      }

   .ws-mini-highlight {
      width: 100%;
      margin: 26px auto 0;
      grid-template-columns: repeat(2,1fr)
   }

   .ws-mini-card:nth-child(2) {
      border-right: 0
   }

   .ws-portals, .ws-modules, .ws-testimonials {
      grid-template-columns: 1fr 1fr
   }

   .ws-flow {
      grid-template-columns: repeat(3,1fr)
   }

   .ws-why {
      grid-template-columns: 1fr
   }

   .ws-use-grid {
      grid-template-columns: repeat(2,1fr)
   }

   .ws-section, .ws-cta, .ws-footer {
      padding-left: 28px;
      padding-right: 28px
   }

   .ws-footer-grid {
      grid-template-columns: 1fr 1fr
   }
}

@media(max-width:760px) {
   .ws-nav {
      margin: 10px;
      top: 10px;
      align-items: flex-start
   }

   .ws-logo img {
      max-height: 52px
   }

   .ws-brand {
      width: 100%;
      justify-content: center
   }

   .ws-nav-login {
      width: 100%;
      margin-left: 0
   }

      .ws-nav-login form {
         display: grid;
         grid-template-columns: 1fr
      }

   .ws-nav-input, .ws-nav-input-user, .ws-nav-input-pass, .ws-nav-submit {
      width: 100% !important
   }

   .ws-login-popover {
      position: fixed;
      left: 14px;
      right: 14px;
      top: 120px;
      width: auto
   }

      .ws-login-popover:before {
         display: none
      }

   .ws-nav-links {
      justify-content: flex-start
   }

   .ws-hero {
      padding: 34px 18px 44px
   }

      .ws-hero h1 {
         font-size: 43px
      }

   .ws-hero-slogan .line1 {
      font-size: 24px
   }

   .ws-hero-slogan .line2 {
      font-size: 27px
   }

   .ws-hero-actions {
      flex-direction: column;
      align-items: stretch
   }

      .ws-hero-actions .ws-btn {
         width: 100%
      }

   .ws-mockup-real {
      transform: none
   }

   .ws-mini-highlight {
      grid-template-columns: 1fr
   }

   .ws-mini-card {
      border-right: 0;
      border-bottom: 1px solid rgba(255,255,255,.1)
   }

      .ws-mini-card:last-child {
         border-bottom: 0
      }

   .ws-portals, .ws-modules, .ws-testimonials, .ws-benefits, .ws-contact-grid, .ws-use-grid, .ws-flow {
      grid-template-columns: 1fr
   }

   .ws-section {
      padding: 58px 18px
   }

   .ws-section-head h2 {
      font-size: 30px
   }

   .ws-cta {
      display: block;
      padding: 42px 18px
   }

      .ws-cta .ws-btn {
         margin-top: 20px
      }

   .ws-footer {
      padding: 42px 18px 20px
   }

   .ws-footer-grid {
      grid-template-columns: 1fr
   }

   .ws-footer-bottom {
      display: block
   }

      .ws-footer-bottom span {
         display: block;
         margin-top: 8px
      }
}

@media(max-width:520px) {
   .ws-hero h1 {
      font-size: 38px
   }

   .ws-hero-pill {
      font-size: 12px;
      padding: 0 13px
   }

   .ws-mini-card {
      grid-template-columns: 44px 1fr
   }

      .ws-mini-card i {
         width: 44px;
         height: 44px;
         font-size: 22px
      }

   .ws-floating-whatsapp {
      width: 56px;
      height: 56px;
      right: 18px;
      bottom: 18px
   }
}

.ws-mobile-access {
   display: none;
   align-items: center;
   gap: 7px;
   border: 1px solid rgba(255,122,26,.45);
   background: rgba(255,122,26,.10);
   color: #fff;
   text-decoration: none;
   border-radius: 999px;
   padding: 10px 14px;
   font-size: 12px;
   font-weight: 800;
   white-space: nowrap
}

   .ws-mobile-access i {
      font-size: 17px;
      color: #ff7a1a
   }

@media(max-width:768px) {
   .ws-nav-login {
      display: none !important
   }

   .ws-mobile-access {
      display: inline-flex
   }

   .ws-nav {
      gap: 10px
   }

   .ws-nav-links {
      display: none !important
   }
}

.ws-footer-link {
   border: 0;
   background: transparent;
   color: inherit;
   font: inherit;
   cursor: pointer;
   padding: 0;
   text-decoration: none
}

   .ws-footer-link:hover {
      color: #ff7a1a;
      text-decoration: underline
   }

.ws-flow-cta {
   max-width: 1180px;
   margin: 34px auto 0;
   padding: 20px 24px;
   border-radius: 24px;
   background: linear-gradient(135deg,rgba(255,122,26,.14),rgba(255,255,255,.96));
   border: 1px solid rgba(255,122,26,.18);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   box-shadow: 0 18px 42px rgba(15,23,42,.06)
}

   .ws-flow-cta b {
      display: block;
      color: #0f172a;
      font-size: 18px;
      font-weight: 900;
      margin-bottom: 4px
   }

   .ws-flow-cta span {
      display: block;
      color: #64748b;
      font-size: 13px;
      line-height: 1.45
   }

@media(max-width:768px) {
   .ws-flow-cta {
      flex-direction: column;
      align-items: flex-start
   }

      .ws-flow-cta .ws-btn {
         width: 100%;
         justify-content: center
      }
}

.ws-flow-note {
   max-width: 820px;
   margin: 26px auto 0;
   padding: 0 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   color: #64748b;
   font-size: 13px;
   font-weight: 700;
   text-align: center
}

   .ws-flow-note i {
      font-size: 18px;
      color: #ff7a1a
   }

   .ws-flow-note span {
      position: relative
   }

      .ws-flow-note span:before, .ws-flow-note span:after {
         content: "";
         position: absolute;
         top: 50%;
         width: 56px;
         height: 1px;
         background: linear-gradient(90deg,transparent,#cbd5e1)
      }

      .ws-flow-note span:before {
         right: 100%;
         margin-right: 16px
      }

      .ws-flow-note span:after {
         left: 100%;
         margin-left: 16px;
         transform: scaleX(-1)
      }

@media(max-width:768px) {
   .ws-flow-note span:before, .ws-flow-note span:after {
      display: none
   }
}