:root{
      --primary:#6f2bd8;
      --primary-dark:#5420aa;
      --primary-soft:#f3ebff;
      --primary-soft-2:#faf7ff;
      --blue:#2f6fed;
      --ink:#211936;
      --text:#4f4760;
      --muted:#7b7487;
      --line:#e9e3f0;
      --white:#fff;
      --section:#fbfaff;
      --shadow:0 18px 50px rgba(56,34,86,.10);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --container:1180px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:'Rubik',Arial,Helvetica,sans-serif;
      color:var(--ink);
      background:#fff;
      line-height:1.6;
      -webkit-font-smoothing:antialiased;
    }

    a{color:inherit;text-decoration:none}
    button,input,textarea{font:inherit}
    img{display:block;max-width:100%}

    .container{
      width:min(var(--container),calc(100% - 40px));
      margin-inline:auto;
    }

    .section{
      padding:82px 0;
    }

    .section--soft{
      background:var(--section);
    }

    .section-head{
      max-width:760px;
      margin:0 auto 42px;
      text-align:center;
    }

    .section-head h2{
      margin:0 0 12px;
      font-size:clamp(32px,4vw,46px);
      line-height:1.15;
      letter-spacing:-1px;
    }

    .section-head p{
      margin:0;
      color:var(--muted);
      font-size:18px;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--primary);
      font-size:14px;
      font-weight:800;
      margin-bottom:14px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:48px;
      padding:0 22px;
      border-radius:40px;
      border:1px solid transparent;
      font-weight:800;
      transition:.2s ease;
      white-space:nowrap;
    }

    .btn:hover{transform:translateY(-2px)}

.btn-login {
    min-height: 44px;
    padding: 0 18px;
      color:var(--primary-dark);
    background: transparent;
      border-color:#cdbcf0;
}

.btn-login:hover {
    color: var(--primary);
    background: var(--primary-soft);
    transform: none;
}

    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg,var(--primary),#8b3df0);
      box-shadow:0 10px 24px rgba(111,43,216,.22);
    }

    .btn-secondary{
      color:var(--primary-dark);
      background:#fff;
      border-color:#cdbcf0;
    }

    .btn-blue{
      color:#fff;
      background:linear-gradient(135deg,#4477f2,#2f62df);
      box-shadow:0 10px 24px rgba(47,111,237,.20);
    }

    .topbar{
      position:sticky;
      top:0;
      z-index:100;
      background:rgba(255,255,255,.94);
      backdrop-filter:blur(12px);
      border-bottom:1px solid var(--line);
    }

    .nav{
      min-height:72px;
      display:flex;
      align-items:center;
      gap:28px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:18px;
      font-weight:900;
      color:var(--primary-dark);
      white-space:nowrap;
    }

    .brand-mark{
      width:48px;
      height:48px;
      display:grid;
      place-items:center;
      font-size:18px;
    }

.nav-links {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 26px;
    height: 72px;
    font-size: 15px;
    font-weight: 700;
    color: #42394f;
}

.nav-links > a,
.nav-dropdown-trigger {
    height: 72px;
    display: flex;
    align-items: center;
    padding: 0;
    line-height: 1;
    white-space: nowrap;
}

    .nav-actions{
      display:flex;
      gap:10px;
    }

.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    height: 72px;
}

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    font-size: 15px;
    font-weight: 700;
    color: #42394f;
    white-space: nowrap;
}

.nav-arrow {
    font-size: 9px;
    transition: transform 0.2s ease;
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% - 15px);
    right: 50%;
    transform: translateX(50%) translateY(8px);

    width: 235px;
    padding: 12px 0;

    background: #ffffff;
    border: 1px solid #e7e1ed;
    border-radius: 20px;

    box-shadow:
        0 20px 45px rgba(38, 24, 55, 0.18),
        0 4px 12px rgba(38, 24, 55, 0.08);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;

    z-index: 200;
}

/* Invisible bridge prevents the menu closing while moving the mouse */
.nav-dropdown-menu::before {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: -12px;
    height: 12px;
}

.nav-dropdown-menu a {
    display: block;
    padding: 11px 24px;

    color: #2f2937;
    font-size: 15px;
    font-weight: 600;
    text-align: right;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        padding-right 0.15s ease;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus {
    color: #6f2bd8;
    background: #f7f1ff;
    padding-right: 29px;
    outline: none;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(50%) translateY(0);
}

.nav-dropdown:hover .nav-arrow,
.nav-dropdown:focus-within .nav-arrow {
    transform: rotate(180deg);
}

    .hero{
      position:relative;
      overflow:hidden;
      padding:74px 0 34px;
    }


    .hero-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1.03fr .97fr;
      gap:58px;
      align-items:center;
    }

    .hero-copy h1{
      margin:0 0 18px;
      max-width:700px;
      font-size:clamp(44px,5.2vw,72px);
      line-height:1.04;
      letter-spacing:-2px;
    }

    .hero-copy .lead{
      max-width:660px;
      margin:0 0 24px;
      color:var(--text);
      font-size:20px;
    }

    .check-list{
      list-style:none;
      padding:0;
      margin:0 0 28px;
      display:grid;
      gap:12px;
    }

    .check-list li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      font-weight:700;
      color:#40364e;
    }

    .check-icon{
      width:22px;
      height:22px;
      flex:0 0 22px;
      border-radius:50%;
      display:grid;
      place-items:center;
      margin-top:2px;
      background:var(--primary);
      color:#fff;
      font-size:13px;
    }

    .hero-actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }

    .hero-proof{
      margin-top:18px;
      display:flex;
      gap:18px;
      flex-wrap:wrap;
      color:#6c6277;
      font-size:14px;
      font-weight:700;
    }

    .hero-media{
      min-height:470px;
      display:grid;
      place-items:center;
      position:relative;
    }

    .image-placeholder{
      border-radius:24px;
      background:
        linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.38)),
        linear-gradient(135deg,#ddd2fa,#baa0f3);
      border:1px solid rgba(255,255,255,.9);
      box-shadow:0 28px 70px rgba(61,34,93,.20);
      color:#634d80;
      display:grid;
      place-items:center;
      text-align:center;
      font-weight:800;
      overflow:hidden;
      position:relative;
    }

    .image-placeholder::after{
      content:"";
      position:absolute;
      border-radius:18px;
      pointer-events:none;
    }

    .image-placeholder span{
      position:relative;
      z-index:1;
      padding:20px;
    }

    .hero-image{
      width:100%;
      min-height:430px;
    }

.authority-wrap {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.authority-strip {
    width: 100%;
      position:relative;
      z-index:2;
      margin-top: 80px;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      border:1px solid var(--line);
      border-radius:22px;
      background:#fff;
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    .authority-item{
      min-height:104px;
      padding:20px;
      display:flex;
      justify-content:center;
      align-items:center;
      gap:14px;
      text-align:right;
      border-left:1px solid var(--line);
    }

    .authority-item:last-child{border-left:0}

    .authority-icon{
      width:46px;
      height:46px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:var(--primary-soft);
      color:var(--primary);
      font-size:22px;
      flex:0 0 46px;
    }

    .authority-value{
      font-size:26px;
      line-height:1;
      font-weight:900;
      color:var(--primary-dark);
      margin-bottom:5px;
    }

    .authority-label{
      color:var(--muted);
      font-size:13px;
      font-weight:700;
    }

    .logo-panel{
      padding:30px;
      border:1px solid var(--line);
      border-radius:22px;
      background:#fff;
      box-shadow:0 10px 34px rgba(58,38,82,.05);
    }

    .logo-grid{
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:0;
      border-top:1px solid var(--line);
      border-right:1px solid var(--line);
      border-radius:16px;
      overflow:hidden;
    }

    .logo-cell{
      min-height:84px;
      display:grid;
      place-items:center;
      border-left:1px solid var(--line);
      border-bottom:1px solid var(--line);
      background:#fff;
      padding:12px;
      color:#3f3949;
      font-weight:800;
      text-align:center;
    }

    .logo-cell img{
      max-height:42px;
      max-width:120px;
      object-fit:contain;
    }

    .logo-more{
      text-align:center;
      margin-top:18px;
      color:var(--primary);
      font-weight:800;
    }

    .product-section{
      padding-top:36px;
    }

    .product-card{
      display:grid;
      grid-template-columns:1fr 1fr;
      align-items:center;
      gap:52px;
      margin-bottom:26px;
      padding:46px;
      border:1px solid #e4d9f3;
      border-radius:var(--radius-xl);
      background:linear-gradient(135deg,#fff 0%,#f4edff 100%);
      box-shadow:0 12px 40px rgba(61,42,83,.06);
    }

    .product-card:nth-child(even){
      background:linear-gradient(135deg,#f9edff 0%,#fff 100%);
    }

    .product-card--reverse .product-media{order:2}

    .product-copy h2{
      margin:0 0 12px;
      font-size:clamp(32px,4vw,46px);
      line-height:1.15;
      letter-spacing:-1px;
    }

    .product-copy p{
      margin:0 0 18px;
      color:var(--muted);
      font-size:18px;
    }

    .product-media{
      min-height:330px;
    }

    .integration-grid{
      display:grid;
      grid-template-columns:repeat(8,1fr);
      gap:10px;
    }

    .integration-card{
      min-height:86px;
      border:1px solid var(--line);
      border-radius:16px;
      background:#fff;
      display:grid;
      place-items:center;
      padding:12px;
      font-weight:900;
      color:#453d52;
      box-shadow:0 6px 18px rgba(48,34,66,.04);
    }

    .integration-card img{
      max-height:34px;
      max-width:92px;
      object-fit:contain;
    }

    .webinar-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:24px;
    }

    .webinar-card{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:22px;
      align-items:center;
      padding:26px;
      border:1px solid var(--line);
      border-radius:22px;
      background:#fff;
      box-shadow:0 12px 34px rgba(56,37,78,.07);
    }

    .webinar-card h3{
      margin:0 0 10px;
      font-size:25px;
      line-height:1.25;
    }

    .webinar-card p{
      margin:0 0 18px;
      color:var(--muted);
    }

    .date-pill{
      display:inline-block;
      margin-bottom:10px;
      padding:5px 10px;
      border-radius:99px;
      background:var(--primary-soft);
      color:var(--primary);
      font-size:12px;
      font-weight:900;
    }

    .webinar-media{
      min-height:190px;
      border-radius:18px;
    }

.final-cta {
    position: relative;
    overflow: visible;

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 34px;

    min-height: 220px;

    /* Space for the badge on the right */
    padding: 48px 220px 48px 48px;

    border-radius: 28px;
    color: #ffffff;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255, 255, 255, 0.12),
            transparent 28%
        ),
        linear-gradient(135deg, #8614c7, #3e3fc7);

    box-shadow: 0 24px 60px rgba(74, 34, 155, 0.22);
}

.final-cta-content {
    position: relative;
    z-index: 2;
}

.final-cta h2 {
    margin: 0 0 10px;
    font-size: clamp(30px, 3.5vw, 44px);
    line-height: 1.15;
}

.final-cta p {
    margin: 0;
    color: #eadfff;
    font-size: 18px;
}

.final-actions {
    position: relative;
    z-index: 2;

    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.final-cta-badge {
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);

    width: 145px;
    height: 145px;

    padding: 8px;

    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 3px solid rgba(255, 255, 255, 0.75);

    box-shadow:
        0 18px 40px rgba(39, 16, 91, 0.35),
        inset 0 0 0 5px rgba(255, 255, 255, 0.10);

    z-index: 3;
}

.final-cta-badge img {
    width: 100%;
    height: 100%;
    display: block;

    border-radius: 50%;
    object-fit: cover;
}

    .btn-white{
      color:var(--primary-dark);
      background:#fff;
    }

    .btn-ghost{
      color:#fff;
      border-color:rgba(255,255,255,.62);
      background:transparent;
    }

    footer{
      padding:58px 0 24px;
      background:#17132b;
      color:#cfc7da;
    }

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

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

    footer p{
      color:#afa6bb;
    }

    footer a{
      display:block;
      margin:7px 0;
      color:#cfc7da;
      font-size:14px;
    }

    .copyright{
      margin-top:36px;
      padding-right:18px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.1);
      color:#9f96aa;
      font-size:13px; 
    }

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}


.footer-contact-link {
    color: #241d2d;
    font-size: 17px;
    font-weight: 800;
}

.footer-contact-link:hover {
    color: #6f2bd8;
}

.whatsapp-footer-button {
    display: flex;
    align-items: center;
    gap: 13px;

    min-width: 275px;
    padding: 11px 16px;

    border-radius: 10px;
    background: linear-gradient(135deg, #57cc45, #3eb833);
    color: #ffffff;

    box-shadow: 0 10px 24px rgba(57, 177, 49, 0.28);
}

.whatsapp-footer-button strong {
    display: block;
    font-size: 19px;
    line-height: 1.2;
}

.whatsapp-footer-button small {
    display: block;
    font-size: 13px;
    opacity: 0.92;
}

.whatsapp-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    display: grid;
    place-items: center;

    border: 3px solid #ffffff;
    border-radius: 50%;
    font-size: 24px;
}

.language-switcher {
    position: relative;
    display: inline-block;
    width: auto;
}

/* Main selected-language button */
.language-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 50px;
    padding: 0 16px;

    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;

    font-size: 15px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;
    white-space: nowrap;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.language-button:hover,
.language-button:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.38);
    outline: none;
}

.language-arrow {
    display: inline-block;
    font-size: 10px;
    line-height: 1;
    transition: transform 0.18s ease;
}

/* Dropdown panel */
.language-menu {
    position: absolute;

    /* Place directly below the button */
    top: calc(100% + 8px);
    right: 0;
    left: auto;

    min-width: 150px;
    padding: 7px;

    background: #ffffff;
    border: 1px solid #e7e1ec;
    border-radius: 11px;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.24),
        0 4px 12px rgba(0, 0, 0, 0.10);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(7px);

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;

    z-index: 9999;
}

/* Invisible hover bridge */
.language-menu::before {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: -8px;
    height: 8px;
}

/* Language links */
.language-menu a {
    display: block;
    width: 100%;

    padding: 10px 12px;
    border-radius: 7px;

    color: #2f2937;
    background: transparent;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-align: right;
    white-space: nowrap;

    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.language-menu a:hover,
.language-menu a:focus {
    background: #f4edff;
    color: #6f2bd8;
    outline: none;
}

/* Open dropdown */
.language-switcher:hover .language-menu,
.language-switcher:focus-within .language-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.language-switcher:hover .language-arrow,
.language-switcher:focus-within .language-arrow {
    transform: rotate(180deg);
}

/* Optional active language */
.language-menu a.active {
    background: #f4edff;
    color: #6f2bd8;
    font-weight: 800;
}

    @media(max-width:1020px){
      .nav-links{display:none}
      .hero-grid,
      .product-card,
      .webinar-card{
        grid-template-columns:1fr;
      }
      .hero-copy{text-align:center}
      .hero-copy .lead{margin-inline:auto}
      .check-list{max-width:650px;margin-inline:auto;margin-bottom:28px;text-align:right}
      .hero-actions,.hero-proof{justify-content:center}
      .authority-strip{grid-template-columns:repeat(2,1fr)}
      .logo-grid{grid-template-columns:repeat(4,1fr)}
      .integration-grid{grid-template-columns:repeat(4,1fr)}
      .webinar-grid{grid-template-columns:1fr}
      .product-card--reverse .product-media{order:0}
      .final-cta{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:repeat(2,1fr)}
    }

    @media(max-width:680px){
      .container{width:min(100% - 24px,var(--container))}
      .section{padding:58px 0}
      .nav{gap:10px}
      .brand span:last-child{display:none}
      .nav-actions .btn-secondary{display:none}
    .btn-login { padding: 0 12px; font-size: 14px;}
    .nav-actions .btn-primary { padding: 0 14px; font-size: 14px;}
      .hero{padding-top:48px}
      .hero-copy h1{font-size:42px}
      .hero-image{min-height:330px}
      .authority-strip{grid-template-columns:1fr 1fr}
      .authority-item{padding:16px 12px;gap:9px}
      .authority-value{font-size:21px}
      .logo-panel{padding:18px}
      .logo-grid{grid-template-columns:repeat(2,1fr)}
      .product-card{padding:26px}
      .product-media{min-height:250px}
      .integration-grid{grid-template-columns:repeat(2,1fr)}
      .webinar-card{padding:20px}
      .final-cta{padding:32px 24px}
      .final-actions{flex-direction:column}
      .footer-grid{grid-template-columns:1fr 1fr}

    .language-button {
        min-height: 46px;
        padding: 0 14px;
        font-size: 14px;
    }

    .language-menu {
        right: 0;
        left: auto;
        min-width: 140px;
    }

    .language-menu a {
        padding: 10px;
        font-size: 14px;
    }

    }