/* ============ Design tokens (from Figma variables) ============ */
  :root{
    --primary-50:#e7efff;
    --primary-200:#91b7ff;
    --primary-500:#0f62fe;
    --primary-900:#06296b;
    --neutral-50:#fcfdfe;
    --neutral-75:#f9fbfe;
    --neutral-100:#f3f7fd;
    --neutral-200:#dde7f6;
    --neutral-700:#6781a6;
    --neutral-800:#425b80;
    --neutral-900:#101828;
    --white:#ffffff;
    --success-200:#aaf0c4;
    --success-400:#3ccb7f;
    --success-600:#099250;
    --error-100:#fbeaea;
    --error-200:#f7d4d4;
    --error-400:#e67f7f;
    --error-600:#be2626;

    --font-main:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    --text-xs:11px;
    --text-sm:12px;
    --text-md:14px;
    --text-lg:16px;
    --text-xlg:18px;
    --h8:20px;
    --h7:24px;
    --h4:36px;
    --h2:42px;

    --shadow-card:
      -1px 1px 2px 0 rgba(116,131,154,.10),
      -2px 3px 4px 0 rgba(116,131,154,.09),
      -5px 7px 5px 0 rgba(116,131,154,.05),
      -9px 13px 6px 0 rgba(116,131,154,.01),
      -14px 20px 7px 0 rgba(116,131,154,0);
    --shadow-card-hover:
      -2px 4px 6px 0 rgba(116,131,154,.16),
      -4px 8px 12px 0 rgba(116,131,154,.13),
      -8px 16px 22px 0 rgba(116,131,154,.11),
      -14px 26px 30px 0 rgba(116,131,154,.07),
      -20px 34px 36px 0 rgba(116,131,154,.03);

    --container-w:1440px;
    --gutter:clamp(20px, 5vw, 120px);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; overflow-x:hidden; }
  body{
    margin:0;
    font-family:var(--font-main);
    color:var(--neutral-900);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    max-width:100vw;
    width:100%;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; margin:0; padding:0; }
  button{ font-family:inherit; cursor:pointer; }

  .shell{
    max-width:var(--container-w);
    margin:0 auto;
    padding-left:var(--gutter);
    padding-right:var(--gutter);
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:var(--text-md);
    font-weight:600;
    padding:10px 20px;
    border-radius:8px;
    border:1px solid transparent;
    white-space:nowrap;
  }
  .btn-primary{
    background:var(--primary-500);
    color:var(--white);
  }
  .btn-primary:hover{ background:var(--primary-900); }
  .btn-secondary{
    background:var(--white);
    color:var(--neutral-900);
    border-color:var(--neutral-200);
  }
  .btn-secondary:hover{ border-color:var(--primary-500); color:var(--primary-500); }

  /* nudging arrow icon reused across CTA buttons (Figma "arrow-right" motion) */
  .arrow-nudge{
    display:inline-flex;
    width:16px; height:16px;
  }
  .arrow-nudge svg{
    animation: arrow-nudge-move 2s linear infinite;
  }
  @keyframes arrow-nudge-move{
    0%{ transform:translateX(0); }
    25%{ transform:translateX(4px); }
    50%{ transform:translateX(0); }
    100%{ transform:translateX(0); }
  }

  /* ============ Header / Nav ============ */
  .site-header{
    position:sticky; top:0; z-index:200;
    background:var(--white);
    border-bottom:1px solid var(--neutral-100);
  }
  .nav-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    height:88px;
  }
  .logo{ display:flex; align-items:center; gap:8px; }
  .logo-text{ line-height:1.15; text-align:left; }
  .logo-text .name{
    display:block;
    font-size:21px;
    font-weight:700;
    color:#0a1856;
    letter-spacing:-.2px;
  }
  .logo-text .tagline{
    display:block;
    font-size:11px;
    font-weight:500;
    color:#2f6fed;
    letter-spacing:.2px;
  }

  .nav-right{
    display:flex;
    align-items:center;
    gap:40px;
  }
  .main-nav{
    display:flex;
    align-items:center;
    gap:32px;
  }
  .nav-item{ position:relative; }
  .nav-link{
    display:flex;
    align-items:center;
    gap:6px;
    background:none;
    border:none;
    font-size:var(--text-md);
    font-weight:500;
    color:var(--neutral-800);
    padding:8px 2px;
  }
  .nav-item:hover > .nav-link,
  .nav-link[aria-expanded="true"]{ color:var(--primary-500); }
  .nav-link .chev{ width:14px; height:14px; transition:transform .15s ease; }
  .nav-item:hover .chev,
  .nav-link[aria-expanded="true"] .chev{ transform:rotate(180deg); }

  .dropdown-menu, .mega-menu{
    position:absolute;
    top:100%;
    left:50%;
    transform:translate(-50%, 8px);
    background:var(--white);
    border:1px solid var(--neutral-100);
    box-shadow:var(--shadow-card);
    border-radius:12px;
    opacity:0;
    visibility:hidden;
    transition:opacity .15s ease, transform .15s ease;
    z-index:100;
  }
  .nav-item:hover .dropdown-menu,
  .nav-item:hover .mega-menu{
    opacity:1; visibility:visible; transform:translate(-50%, 0);
  }

  .dropdown-menu{ min-width:180px; padding:8px; left:0; transform-origin:top left; transform:translate(0,8px); }
  .nav-item:hover .dropdown-menu{ transform:translate(0,0); }
  .dropdown-menu a{
    display:block;
    padding:10px 12px;
    border-radius:8px;
    font-size:var(--text-md);
    color:var(--neutral-800);
  }
  .dropdown-menu a:hover{ background:var(--neutral-75); color:var(--primary-500); }

  .mega-menu{
    left:50%;
    width:820px;
    padding:20px;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:8px;
  }
  .mega-menu a{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:10px;
    border-radius:10px;
    font-size:13px;
    font-weight:500;
    color:var(--neutral-900);
    line-height:1.3;
  }
  .mega-menu a:hover{ background:var(--neutral-75); }
  .mega-menu .ic{
    flex:none;
    width:32px; height:32px;
    border-radius:8px;
    background:var(--primary-50);
    color:var(--primary-500);
    display:flex; align-items:center; justify-content:center;
  }
  .mega-menu .ic svg{ width:16px; height:16px; }

  .header-cta{ display:flex; align-items:center; gap:16px; }
  .mobile-toggle{
    display:none;
    background:none;
    border:1px solid transparent;
    padding:6px;
    border-radius:8px;
    cursor:pointer;
    color:var(--neutral-900);
    transition:all .2s ease;
    min-width: 40px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .mobile-toggle svg{ width:22px; height:22px; display:block; }
  .mobile-toggle:hover,
  .mobile-toggle.is-active{
    background:var(--primary-50);
    border-color:var(--primary-200);
    color:var(--primary-500);
  }

  body.menu-open{ overflow:hidden; }

  @media (max-width:1100px){
    .nav-container{ height:70px; gap:12px; }
    .logo{ flex-shrink:1; min-width:0; }
    .logo-icon{ max-width:clamp(110px, 32vw, 160px); width:auto !important; }
    .header-cta{ gap:8px; }
    .header-cta .btn{ padding:8px 14px; font-size:12.5px; }
    .header-cta .btn-secondary{ display:none; }
    .mobile-toggle{ display:flex; align-items:center; justify-content:center; }

    .main-nav{
      position:fixed;
      top:74px;
      left:0;
      right:0;
      bottom:0;
      background:#ffffff;
      flex-direction:column;
      align-items:stretch;
      gap:0;
      padding:16px 20px 40px;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      border-top:1px solid var(--neutral-100);
      box-shadow:0 16px 36px rgba(0,0,0,0.12);
      opacity:0;
      visibility:hidden;
      transform:translateY(-8px);
      transition:opacity .25s ease, transform .25s ease, visibility .25s;
      z-index:999;
    }
    .main-nav.open{
      display:flex;
      opacity:1;
      visibility:visible;
      transform:translateY(0);
    }

    .main-nav .nav-item{
      width:100%;
      border-bottom:1px solid var(--neutral-100);
      padding:4px 0;
    }
    .main-nav .nav-link{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      font-size:15.5px;
      font-weight:600;
      padding:12px 4px;
      color:var(--neutral-900);
      background:none;
      border:none;
      cursor:pointer;
      text-align:left;
    }
    .main-nav .nav-link .chev{
      width:16px;
      height:16px;
      transition:transform .2s ease;
    }
    .main-nav .nav-item.is-expanded .nav-link .chev{
      transform:rotate(180deg);
    }

    .main-nav .dropdown-menu,
    .main-nav .mega-menu{
      position:static;
      width:100%;
      max-width:100%;
      transform:none !important;
      box-shadow:none;
      border:1px solid var(--neutral-100);
      border-radius:10px;
      background:var(--neutral-50);
      padding:10px;
      margin:4px 0 12px;
      display:none;
      opacity:1;
      visibility:visible;
      grid-template-columns:1fr;
      gap:4px;
      box-sizing:border-box;
    }
    @media (min-width:560px) and (max-width:1100px){
      .main-nav .mega-menu{
        grid-template-columns:1fr 1fr;
      }
    }
    .main-nav .nav-item.is-expanded .dropdown-menu,
    .main-nav .nav-item.is-expanded .mega-menu{
      display:grid;
    }
    .main-nav .nav-item.is-expanded .dropdown-menu{
      display:flex;
      flex-direction:column;
    }
    .main-nav .mega-menu a{
      padding:8px 10px;
      font-size:13px;
      border-radius:6px;
      background:none;
    }
    .main-nav .mega-menu a:hover{
      background:#ffffff;
    }
    .main-nav .dropdown-menu a{
      padding:8px 10px;
      font-size:13.5px;
      font-weight:500;
    }
  }

  /* ============ Hero (slideshow) ============ */
  .hero{
    position:relative;
    min-height:716px;
    color:#fff;
    overflow:hidden;
    display:flex;
    align-items:center;
    background:#050b18;
  }
  .hero-slide-bg{
    position:absolute; inset:0;
    overflow:hidden;
    opacity:0; visibility:hidden;
    transition:opacity 1.2s ease;
  }
  .hero-slide-bg.active{ opacity:1; visibility:visible; }
  .hero-slide-bg img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center;
  }
  .hero-slide-bg::after{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(to right, rgba(3,6,14,.65) 0%, rgba(3,6,14,.25) 42%, rgba(3,6,14,0) 62%),
      linear-gradient(to bottom, rgba(3,6,14,0) 55%, rgba(3,6,14,.7) 100%);
  }
  .hero-scrim{
    position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 78%, rgba(0,0,0,.85) 100%);
    pointer-events:none;
  }
  .hero-content{
    position:relative;
    z-index:2;
    width:100%;
  }
  .hero-slides-text{
    position:relative;
    min-height:420px;
  }
  .hero-inner{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:24px;
    max-width:670px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .6s ease;
  }
  .hero-inner.active{ opacity:1; visibility:visible; pointer-events:auto; }
  .hero-tag{
    display:inline-flex;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.2);
    color:var(--neutral-50);
    font-size:clamp(11px, 1.1vw, 13px);
    font-weight:600;
    letter-spacing:-.14px;
    padding:6px 12px;
    border-radius:10px;
    max-width:100%;
    white-space:normal;
  }
  .hero-tag.small-caps{ font-variant:small-caps; letter-spacing:.2px; }
  .hero-title{
    margin:0;
    font-size:clamp(28px, 5.5vw, 58px);
    line-height:1.2;
    font-weight:700;
    letter-spacing:-.02em;
    word-break:break-word;
  }
  .hero-title .accent{ color:#19b1ef; }
  .hero-desc{
    margin:0;
    max-width:718px;
    font-size:clamp(14px, 1.35vw, 18px);
    line-height:1.6;
    color:var(--neutral-100);
    opacity:.9;
  }
  .hero-actions{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
  .btn-lg{ padding:14px 28px; font-size:16px; border-radius:10px; }
  .btn-ghost-light{
    background:rgba(252,253,254,.1);
    border:1px solid var(--neutral-50);
    color:#fff;
  }
  .btn-ghost-light:hover{ background:rgba(252,253,254,.2); }

  .hero-dots{
    position:absolute;
    z-index:3;
    left:50%; bottom:28px;
    transform:translateX(-50%);
    display:flex; align-items:center; gap:12px;
    background:rgba(255,255,255,.1);
    padding:8px; border-radius:8px;
  }
  .hero-dots .dot{
    width:8px; height:8px; border-radius:50%;
    background:rgba(255,255,255,.45);
    border:none; padding:0;
    transition:all .2s ease;
  }
  .hero-dots .dot.active{ width:12px; height:12px; background:#fff; }

  /* Trust stats auto-scrolling banner */
  .stats-banner{
    background:var(--primary-50);
    overflow:hidden;
    padding:24px 0;
    position:relative;
  }
  .stats-banner::before, .stats-banner::after{
    content:"";
    position:absolute; top:0; bottom:0; width:80px; z-index:2;
    pointer-events:none;
  }
  .stats-banner::before{ left:0; background:linear-gradient(to right, var(--primary-50), rgba(231,239,255,0)); }
  .stats-banner::after{ right:0; background:linear-gradient(to left, var(--primary-50), rgba(231,239,255,0)); }
  .stats-track{
    display:flex;
    align-items:center;
    gap:64px;
    width:max-content;
    animation:stats-scroll 34s linear infinite;
  }
  .stats-banner:hover .stats-track{ animation-play-state:paused; }
  .stat-block{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
  }
  .stat-icon{
    display:flex; align-items:center; justify-content:center;
    width:48px; height:48px; flex-shrink:0;
    border-radius:12px;
    background:rgba(255,255,255,.55);
    color:var(--primary-500);
  }
  .stat-icon svg{ width:24px; height:24px; }
  .stat-text{ display:flex; flex-direction:column; gap:2px; white-space:nowrap; }
  .stat-num{
    font-size:36px; line-height:48px; font-weight:700;
    color:var(--neutral-900); letter-spacing:-0.36px;
  }
  .stat-label{ font-size:14px; color:var(--neutral-800); letter-spacing:-0.14px; }

  @keyframes stats-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .stats-track{ animation:none; }
  }

  /* Platform Modules grid */
  .modules-section{
    padding:80px var(--gutter) 100px;
  }
  .modules-head{ margin-bottom:40px; max-width:620px; }
  .modules-head .eyebrow{
    color:var(--primary-500);
    font-size:var(--text-sm);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin:0 0 8px;
  }
  .modules-head h2{
    font-size:var(--h4);
    line-height:1.2;
    letter-spacing:-.02em;
    margin:0 0 8px;
    font-weight:700;
    color:var(--neutral-900);
  }
  .modules-sub{
    color:var(--neutral-700);
    font-size:var(--text-xlg);
    margin:0;
  }
  .modules-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:24px;
  }
  @media (max-width:980px){ .modules-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .modules-grid{ grid-template-columns:1fr; } }

  .module-card{
    position:relative;
    display:flex;
    flex-direction:column;
    background:var(--white);
    border-radius:16px;
    padding:24px;
    border:1px solid var(--neutral-200);
    box-shadow:var(--shadow-card);
    transition:
      transform .45s cubic-bezier(.4,0,.2,1),
      box-shadow .45s cubic-bezier(.4,0,.2,1),
      border-color .45s ease;
  }
  .module-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px -12px rgba(15,98,254,.28);
    border-color:transparent;
  }
  .module-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:14px;
  }
  .module-icon{
    width:48px; height:48px;
    border-radius:12px;
    background:var(--primary-50);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition:background .4s ease, color .4s ease, transform .4s ease;
  }
  .module-icon svg{ width:24px; height:24px; color:var(--primary-500); transition:color .4s ease; }
  .module-card:hover .module-icon{
    background:linear-gradient(135deg,#3b82f6,#0f62fe);
    transform:rotate(-6deg) scale(1.06);
  }
  .module-card:hover .module-icon svg{ color:#fff; }
  .module-card h3{
    font-size:var(--text-lg);
    line-height:1.3;
    margin:0;
    font-weight:600;
    color:var(--neutral-900);
  }
  .module-card p{
    font-size:13.5px;
    line-height:1.55;
    color:var(--neutral-700);
    margin:0 0 20px;
    flex-grow:1;
  }
  .module-card .explore-more{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border:1px solid var(--neutral-200);
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    color:var(--neutral-900);
    text-decoration:none;
    align-self:flex-start;
    transition:border-color .2s ease, color .2s ease;
  }
  .module-card .explore-more:hover{ border-color:var(--primary-500); color:var(--primary-500); }
  .module-card .explore-more svg{ width:15px; height:15px; }

  /* ============ Challenges We Solve (AI connector diagram) ============ */
  .challenges-section{
    background:#080d1f;
    padding:80px 0 100px;
    overflow:hidden;
  }
  .challenges-head{ max-width:640px; margin-bottom:56px; padding-left:var(--gutter); padding-right:var(--gutter); }
  .challenges-head .eyebrow{
    color:#ff8f8a;
    font-size:var(--text-sm);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin:0 0 8px;
  }
  .challenges-head h2{
    color:#fff;
    font-size:var(--h4);
    line-height:1.2;
    letter-spacing:-.02em;
    font-weight:700;
    margin:0 0 10px;
  }
  .challenges-sub{
    color:#aab4cc;
    font-size:var(--text-xlg);
    margin:0;
  }

  .challenges-grid{
    position:relative;
    display:grid;
    grid-template-columns:1fr minmax(280px,360px) 1fr;
    align-items:center;
    gap:16px;
  }
  .connector-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:1;
  }
  .connector-svg path.connector{
    fill:none;
    stroke-linecap:round;
  }
  .connector-svg path.connector.challenge{ stroke:#e67f7f; stroke-width:1.6; }
  .connector-svg path.connector.solution{ stroke:#3ccb7f; stroke-width:1.6; }
  .connector-svg .connector.active{ stroke-width:2.2; filter:drop-shadow(0 0 4px currentColor); }
  .connector-svg .pulse{ opacity:.9; }
  .connector-svg .pulse-glow{
    filter:blur(3px);
  }

  .challenges-col{ position:relative; z-index:2; display:flex; flex-direction:column; gap:16px; }
  .col-label{
    font-size:var(--text-sm);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin:0 0 4px;
  }
  .col-label.challenge-label{ color:#ff8f8a; }
  .col-label.solution-label{ color:#4fe3a5; }

  .diagram-card{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:16px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:16px;
    transition:border-color .35s ease, background .35s ease, transform .35s ease;
  }
  .diagram-card:hover{
    background:rgba(255,255,255,.06);
    transform:translateY(-2px);
  }
  .challenge-card:hover{ border-color:rgba(230,127,127,.45); }
  .solution-card:hover{ border-color:rgba(76,227,150,.45); }

  .diagram-icon{
    width:40px; height:40px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .diagram-icon svg{ width:20px; height:20px; }
  .challenge-card .diagram-icon{ background:rgba(230,127,127,.15); color:#ef9490; }
  .solution-card .diagram-icon{ background:rgba(60,203,127,.16); color:#4fe3a5; }
  .challenge-card.big-icon .diagram-icon{ width:48px; height:48px; }
  .challenge-card.big-icon .diagram-icon svg{ width:22px; height:22px; }

  .diagram-card h4{
    color:#fff;
    font-size:15px;
    font-weight:600;
    line-height:1.35;
    margin:0 0 4px;
  }
  .diagram-card p{
    color:#98a2bd;
    font-size:13.5px;
    line-height:1.5;
    margin:0;
  }
  .diagram-card p b, .diagram-card p strong{ color:#e3e8f5; font-weight:600; }

  .ai-engine-col{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    min-height:480px;
  }
  .ai-glow{
    position:absolute;
    width:420px; height:420px;
    border-radius:50%;
    background:
      radial-gradient(circle at 35% 30%, rgba(93,120,255,.35), transparent 55%),
      radial-gradient(circle at 65% 70%, rgba(168,85,247,.3), transparent 55%),
      radial-gradient(circle at 50% 50%, rgba(45,212,191,.18), transparent 60%);
    filter:blur(30px);
    pointer-events:none;
  }
  .ai-ring{
    position:relative;
    width:180px; height:180px;
    border-radius:50%;
    background:#0a0f24;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 0 40px rgba(93,120,255,.25);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:box-shadow .3s ease;
  }
  .ai-ring::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:50%;
    padding:1px;
    background:conic-gradient(from 0deg, rgba(93,120,255,.5), rgba(168,85,247,.5), rgba(45,212,191,.5), rgba(93,120,255,.5));
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:.7;
  }
  .ai-ring.pulse-hit{ box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 0 62px rgba(120,150,255,.55); }
  .ai-ring-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;
  }
  .ai-mini-logo{ display:flex; align-items:center; gap:6px; }
  .ai-mini-logo img{ width:20px; height:20px; }
  .ai-mini-logo span{ color:#fff; font-size:13px; font-weight:700; letter-spacing:-.01em; }
  .ai-core-text{
    font-size:38px;
    font-weight:700;
    letter-spacing:-.02em;
    background:linear-gradient(135deg,#8b9dff,#c084fc);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    line-height:1;
  }
  .ai-subtitle{
    color:#8b93ad;
    font-size:10px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
  }

  @media (max-width:1100px){
    .challenges-grid{ grid-template-columns:1fr; }
    .connector-svg{ display:none; }
    .ai-engine-col{ min-height:340px; order:-1; }
  }
  @media (prefers-reduced-motion:reduce){
    .connector-svg .reveal-stroke, .connector-svg path.connector{ transition:none !important; }
  }

  /* ============ The Two Lenses ============ */
  .lenses-section{ padding:80px var(--gutter) 100px; }
  .lenses-head{ max-width:700px; margin-bottom:40px; }
  .lenses-head .eyebrow{
    color:var(--primary-500);
    font-size:var(--text-sm);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin:0 0 8px;
  }
  .lenses-head h2{
    color:var(--neutral-900);
    font-size:var(--h4);
    line-height:1.2;
    letter-spacing:-.02em;
    font-weight:700;
    margin:0 0 10px;
  }
  .lenses-sub{ color:var(--neutral-700); font-size:var(--text-xlg); margin:0; }

  .lenses-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
  }
  @media (max-width:1000px){ .lenses-grid{ grid-template-columns:1fr; } }

  .lens-card{
    position:relative;
    isolation:isolate;
    background:#fff;
    border:1px solid rgba(226,232,240,.2);
    border-radius:16px;
    box-shadow:var(--shadow-card);
    padding:48px;
    display:flex;
    flex-direction:column;
    gap:40px;
    overflow:hidden;
    transition:
      transform .45s cubic-bezier(.4,0,.2,1),
      box-shadow .45s cubic-bezier(.4,0,.2,1),
      border-color .45s cubic-bezier(.4,0,.2,1);
  }
  .lens-card::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    background:linear-gradient(to right, #385394, #24206c);
    opacity:1;
    transition:opacity .45s cubic-bezier(.4,0,.2,1);
  }
  .lens-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-card-hover), 0 24px 48px -14px rgba(36,32,108,.4);
    border-color:var(--neutral-200);
  }
  .lens-card:hover::before{ opacity:0; }

  .lens-top{ position:relative; z-index:1; display:flex; gap:24px; align-items:center; }
  .lens-badge{
    width:72px; height:72px;
    border-radius:50%;
    background:var(--primary-50);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition:transform .4s cubic-bezier(.4,0,.2,1), background-color .45s cubic-bezier(.4,0,.2,1);
  }
  .lens-badge svg{ width:32px; height:32px; color:var(--primary-500); transition:color .45s cubic-bezier(.4,0,.2,1); }
  .lens-card:hover .lens-badge{ transform:scale(1.07); background:var(--primary-500); }
  .lens-card:hover .lens-badge svg{ color:#fff; }

  .lens-text{ position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; flex:1; min-width:0; }
  .lens-text h3{
    color:var(--primary-50);
    font-size:24px;
    line-height:1.35;
    font-weight:700;
    margin:0;
    transition:color .45s cubic-bezier(.4,0,.2,1);
  }
  .lens-card:hover .lens-text h3{ color:var(--neutral-900); }
  .lens-underline{
    display:block;
    width:40px;
    height:2px;
    background:rgba(255,255,255,.35);
    border-radius:2px;
    transition:width .4s ease, background-color .45s cubic-bezier(.4,0,.2,1);
  }
  .lens-card:hover .lens-underline{ width:64px; background:var(--primary-500); }
  .lens-text p{
    color:var(--neutral-200);
    font-size:16px;
    line-height:1.5;
    margin:0;
    transition:color .45s cubic-bezier(.4,0,.2,1);
  }
  .lens-card:hover .lens-text p{ color:#64748b; }

  .lens-divider{ position:relative; z-index:1; height:1px; width:100%; background:rgba(255,255,255,.14); transition:background-color .45s cubic-bezier(.4,0,.2,1); }
  .lens-card:hover .lens-divider{ background:var(--neutral-200); }

  .lens-features{
    position:relative; z-index:1;
    display:flex;
    gap:16px;
    width:100%;
  }
  .lens-feature{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    text-align:center;
  }
  .lf-icon{
    width:48px; height:48px;
    border-radius:50%;
    background:#eff4ff;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .lf-icon svg{ width:24px; height:24px; color:var(--primary-500); }
  .lens-feature p{
    color:var(--neutral-100);
    font-size:13px;
    font-weight:600;
    line-height:1.4;
    margin:0;
    transition:color .45s cubic-bezier(.4,0,.2,1);
  }
  .lens-card:hover .lens-feature p{ color:#0b132b; }

  .lens-notch{
    position:absolute;
    left:50%;
    bottom:-1px;
    transform:translateX(-50%);
    z-index:1;
    width:60px;
    height:4px;
    overflow:hidden;
    background:#1e61eb;
    border-radius:4px 4px 0 0;
    transition:width .4s ease;
  }
  .lens-notch::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to right, #385394, #24206c);
    opacity:0;
    transition:opacity .45s cubic-bezier(.4,0,.2,1);
  }
  .lens-card:hover .lens-notch{ width:84px; }
  .lens-card:hover .lens-notch::before{ opacity:1; }

  /* ============ Operational Impact (Measurable impact stats) ============ */
  .impact-section{ background:#0c1733; padding:80px 0; }
  .impact-head{ max-width:760px; margin:0 0 40px; padding-left:var(--gutter); padding-right:var(--gutter); }
  .impact-head .eyebrow{ color:#19b1ef; font-size:var(--text-sm); font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px; }
  .impact-head h2{ color:#fff; font-size:var(--h2); line-height:1.25; letter-spacing:-.02em; font-weight:700; margin:0 0 14px; }
  .impact-head p{ color:rgba(255,255,255,.72); font-size:var(--text-xlg); line-height:1.6; margin:0; }

  .impact-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin:0 0 48px;
  }
  @media (max-width:900px){ .impact-stats{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .impact-stats{ grid-template-columns:1fr; } }

  .impact-stat{
    position:relative;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.2);
    border-radius:16px;
    padding:24px 32px;
    display:flex;
    flex-direction:column;
    gap:12px;
    overflow:hidden;
  }
  .impact-stat::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:12px;
    border:4px solid #11baff;
    filter:blur(10px);
    pointer-events:none;
  }
  .impact-stat .stat-count{ position:relative; font-size:48px; font-weight:700; color:var(--primary-50); line-height:1; margin:0; }
  .impact-stat .stat-label{ position:relative; font-size:16px; font-weight:600; color:#fff; line-height:1.4; margin:0; }

  .impact-tags-label{ font-size:12px; font-weight:700; color:rgba(255,255,255,.44); text-transform:uppercase; letter-spacing:.03em; margin:0 0 16px; }
  .impact-tags{ display:flex; flex-wrap:wrap; gap:12px; }
  .impact-tag{
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.13);
    border-radius:8px;
    padding:8px 16px;
    font-size:14px;
    font-weight:600;
    color:#fff;
  }

  /* ============ Why Cytrusst Over Others ============ */
  .why-section{ padding:90px var(--gutter) 100px; background:var(--white); }
  .why-head{ max-width:760px; margin-bottom:40px; }
  .why-head .eyebrow{ color:#19b1ef; font-size:var(--text-sm); font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px; }
  .why-head h2{ color:#03106c; font-size:var(--h2); line-height:1.25; letter-spacing:-.02em; font-weight:700; margin:0 0 12px; }
  .why-head p{ color:var(--neutral-800); font-size:var(--text-xlg); line-height:1.6; margin:0; }

  .benefits-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-bottom:56px;
  }
  @media (max-width:860px){ .benefits-grid{ grid-template-columns:1fr; } }

  .benefit-card{
    position:relative;
    background:var(--white);
    border:1px solid var(--neutral-200);
    border-radius:16px;
    padding:32px;
    display:flex;
    flex-direction:column;
    gap:16px;
    box-shadow:0 18px 20px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
    transition:
      transform .45s cubic-bezier(.4,0,.2,1),
      box-shadow .45s cubic-bezier(.4,0,.2,1),
      border-color .45s cubic-bezier(.4,0,.2,1);
  }
  .benefit-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-card-hover), 0 24px 48px -14px rgba(15,98,254,.18);
    border-color:var(--primary-200);
  }
  .benefit-top{ display:flex; gap:10px; align-items:center; }
  .benefit-icon{
    position:relative;
    width:44px; height:44px;
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition:transform .45s cubic-bezier(.4,0,.2,1);
  }
  .benefit-card:hover .benefit-icon{ transform:scale(1.08); }
  .benefit-icon svg{
    width:22px; height:22px;
    position:absolute; inset:0; margin:auto;
    transition:opacity .4s cubic-bezier(.4,0,.2,1);
  }
  .benefit-icon .bi-solid{ opacity:0; }
  .benefit-card:hover .benefit-icon .bi-outline{ opacity:0; }
  .benefit-card:hover .benefit-icon .bi-solid{ opacity:1; }

  .benefit-icon.icon-sky{ background:#e0f2fe; color:#0284c7; }
  .benefit-icon.icon-indigo{ background:#eef2ff; color:#4f46e5; }
  .benefit-icon.icon-emerald{ background:#ecfdf5; color:#059669; }
  .benefit-icon.icon-orange{ background:#fff7ed; color:#ea580c; }
  

  .benefit-top h3{ font-size:24px; line-height:1.35; font-weight:700; color:var(--neutral-900); margin:0; }
  .benefit-desc{ font-size:16px; line-height:1.5; color:#475569; margin:0; }

  .why-closing{ text-align:center; color:#265ebe; font-size:28px; font-weight:700; letter-spacing:-.01em; margin:0; }

  /* ============ Built for Regulators ============ */
  .regulators-section{
    padding:90px var(--gutter) 100px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
    flex-wrap:wrap;
  }
  .regulators-left{ max-width:572px; display:flex; flex-direction:column; gap:24px; flex:1 1 420px; min-width:0; }
  .regulators-left .eyebrow{ color:#19b1ef; font-size:var(--text-sm); font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px; }
  .regulators-left h2{ color:#03106c; font-size:var(--h2); line-height:1.25; letter-spacing:-.02em; font-weight:700; margin:0 0 10px; }
  .regulators-sub{ color:var(--neutral-800); font-size:var(--text-xlg); line-height:1.6; margin:0; }
  .regulators-cta{
    display:inline-flex; align-items:center; gap:10px;
    align-self:flex-start;
    background:var(--primary-500); color:#fff;
    padding:14px 18px; border-radius:999px;
    font-size:16px; font-weight:600;
    box-shadow:0 10px 12px rgba(0,157,255,.15);
    transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1);
  }
  .regulators-cta:hover{ transform:translateY(-3px); box-shadow:0 16px 22px rgba(0,157,255,.28); }
  .regulators-cta svg{ width:16px; height:16px; }

  .regulators-right{ flex:1 1 500px; max-width:696px; min-width:0; }
  @media (max-width:900px){
    .regulators-section{ gap:36px; padding:60px var(--gutter); }
    .regulators-left{ flex:1 1 100%; max-width:100%; width:100%; }
    .regulators-right{ flex:1 1 100%; max-width:100%; width:100%; }
    .compliance-panel{ padding:18px 16px; }
    .feature-row{ height:auto; min-height:56px; padding:12px 14px; }
  }
  .compliance-panel{
    position:relative;
    background:#fff;
    border:1px solid var(--neutral-200);
    border-radius:16px;
    padding:24px;
    box-shadow:-8px 12px 12px rgba(116,131,154,.01), -2px 2px 3px rgba(116,131,154,.05);
    overflow:hidden;
  }
  .compliance-panel::before{
    content:'';
    position:absolute; inset:0;
    background-image:radial-gradient(rgba(15,98,254,.1) 1px, transparent 1px);
    background-size:15px 15px;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.5), transparent 70%);
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.5), transparent 70%);
    pointer-events:none;
  }
  .panel-header{ position:relative; margin-bottom:16px; }
  .panel-header h3{ font-size:24px; line-height:1.35; font-weight:700; color:#0f1b2d; margin:0 0 4px; }
  .panel-header p{ font-size:14px; color:#4b5b6c; margin:0; }
  .feature-list{ position:relative; display:flex; flex-direction:column; gap:16px; }
  .feature-row{
    display:flex; align-items:center; gap:12px;
    background:#fff;
    border:1px solid var(--neutral-100);
    border-left:1px solid var(--neutral-100);
    border-radius:8px;
    height:64px;
    padding:14px 16px;
    box-sizing:border-box;
    transition:border-color .5s ease, border-left-width .5s ease, box-shadow .5s ease;
  }
  .feature-row.is-active{
    border-color:var(--primary-200);
    border-left-width:6px;
    box-shadow:
      -14px 14px 4px rgba(33,150,243,.01),
      -8px 8px 3.5px rgba(33,150,243,.05),
      -3px 3px 2.5px rgba(33,150,243,.09),
      -1px 1px 1.5px rgba(33,150,243,.1);
  }
  .feature-icon{
    width:28px; height:28px; border-radius:10px;
    background:rgba(15,98,254,.06);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition:background-color .5s ease;
  }
  .feature-icon svg{ width:16px; height:16px; color:var(--primary-500); transition:color .5s ease; }
  .feature-row.is-active .feature-icon{ background:var(--primary-500); }
  .feature-row.is-active .feature-icon svg{ color:#fff; }
  .feature-row p{ margin:0; font-size:16px; font-weight:500; color:#0f1b2d; }

  /* ============ GRC deep dive ============ */
  .grc-section{ padding:90px var(--gutter) 100px; }
  .grc-head{ max-width:820px; }
  .grc-head .eyebrow{ color:#19b1ef; font-size:var(--text-sm); font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px; }
  .grc-head h2{ color:#03106c; font-size:var(--h2); line-height:1.25; letter-spacing:-.02em; font-weight:700; margin:0 0 12px; }
  .grc-head p{ color:var(--neutral-800); font-size:var(--text-xlg); line-height:1.6; margin:0; }
  .grc-subheading{
    font-size:20px; font-weight:700; color:var(--neutral-900);
    border-top:1px solid var(--neutral-200);
    margin:32px 0 32px;
    padding-top:24px;
  }

  .grc-cards-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  @media (max-width:980px){ .grc-cards-row{ grid-template-columns:1fr; } }

  .grc-card{
    position:relative;
    isolation:isolate;
    background:#fff;
    border:1px solid var(--neutral-200);
    border-radius:16px;
    padding:32px 24px;
    display:flex;
    flex-direction:column;
    gap:16px;
    box-shadow:var(--shadow-card);
    overflow:hidden;
    transition:
      transform .45s cubic-bezier(.4,0,.2,1),
      box-shadow .45s cubic-bezier(.4,0,.2,1);
  }
  .grc-card::before{
    content:'';
    position:absolute; inset:0; z-index:0;
    background:linear-gradient(to right, #385394, #24206c);
    opacity:1;
    transition:opacity .45s cubic-bezier(.4,0,.2,1);
  }
  .grc-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-card-hover), 0 24px 48px -14px rgba(36,32,108,.3);
  }
  .grc-card:hover::before{ opacity:0; }

  .grc-top{ position:relative; z-index:1; display:flex; gap:10px; align-items:flex-start; }
  .grc-badge{
    width:40px; height:40px; border-radius:12px; flex-shrink:0;
    background:var(--primary-50); color:var(--primary-500);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:16px;
    transition:background-color .45s cubic-bezier(.4,0,.2,1), color .45s cubic-bezier(.4,0,.2,1);
  }
  .grc-card:hover .grc-badge{ background:var(--primary-500); color:#fff; }
  .grc-top h3{ flex:1; min-width:0; font-size:20px; line-height:1.3; font-weight:700; color:var(--neutral-50); margin:0; transition:color .45s cubic-bezier(.4,0,.2,1); }
  .grc-card:hover .grc-top h3{ color:var(--neutral-900); }
  .grc-desc{ position:relative; z-index:1; font-size:16px; line-height:1.5; color:var(--neutral-100); margin:0; transition:color .45s cubic-bezier(.4,0,.2,1); }
  .grc-card:hover .grc-desc{ color:var(--neutral-800); }

  .metric-card{
    position:relative; z-index:1;
    background:#f5f8ff;
    border:1px solid var(--neutral-100);
    border-radius:16px;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:12px;
    transition:background-color .45s cubic-bezier(.4,0,.2,1), border-color .45s cubic-bezier(.4,0,.2,1), box-shadow .45s cubic-bezier(.4,0,.2,1);
  }
  .grc-card:hover .metric-card{
    background:#fff;
    border-color:transparent;
    box-shadow:-2px -2px 5px rgba(0,0,0,.06), 2px 2px 5px rgba(0,0,0,.06);
  }
  .metric-label{ font-size:13px; font-weight:500; color:var(--neutral-800); margin:0; }
  .metric-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
  .metric-left{ display:flex; flex-direction:column; gap:6px; }
  .metric-value{ font-size:28px; font-weight:700; color:var(--neutral-900); letter-spacing:-.28px; margin:0; line-height:1; }
  .metric-value span{ font-size:14px; font-weight:600; }
  .metric-trend{ font-size:12px; font-weight:700; color:#00c572; margin:0; }

  .bar-chart{ display:flex; align-items:flex-end; gap:4px; height:60px; width:110px; flex-shrink:0; }
  .bar-chart span{
    display:block; width:8px; border-radius:2px 2px 0 0;
    background:linear-gradient(to bottom, #3b82f6, #93c5fd);
    height:0%;
    transition:height 1.1s cubic-bezier(.4,0,.2,1);
  }
  .grc-cards-row.revealed .bar-chart span{ height:var(--h); }

  .sparkline{ width:108px; height:53.5px; flex-shrink:0; overflow:visible; }
  .sparkline-area{ opacity:0; transition:opacity 1s ease .3s; }
  .sparkline-path{ fill:none; stroke:#f2994a; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }

  .donut-ring{ width:58px; height:58px; flex-shrink:0; }
  .donut-track{ fill:none; stroke:#e2e8f0; stroke-width:6; }
  .donut-fill{ fill:none; stroke:#00c572; stroke-width:6; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; }

  @media (prefers-reduced-motion: reduce){
    .bar-chart span{ transition:none; }
    .sparkline-area{ transition:none; }
  }

  /* ============ Before / After Cytrusst ============ */
  .compare-section{ padding:0 var(--gutter) 100px; }
  .compare-wrap{
    position:relative;
    overflow-x:auto;
    overflow-y:hidden;
    border-radius:24px;
    border:1px solid var(--neutral-200);
    background:#fff;
    -webkit-overflow-scrolling:touch;
    user-select:none;
    -webkit-user-select:none;
    touch-action:pan-y;
  }
  .compare-stage{
    position:relative;
    width:100%;
    min-width:980px;
    min-height:520px;
  }
  .compare-before, .compare-after{
    padding:44px 40px 40px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:30px;
    width:100%;
    box-sizing:border-box;
  }
  .compare-before{ position:relative; z-index:0; background:#fff; }
  .compare-after{
    position:absolute; inset:0; z-index:1;
    background:#f6f8fc;
    clip-path:inset(0 100% 0 0);
    height:100%;
    pointer-events:none;
  }
  .compare-top{ text-align:center; max-width:640px; }
  .compare-tag{
    display:inline-flex;
    padding:6px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin:0 0 18px;
  }
  .compare-before .compare-tag{ background:var(--neutral-100); color:var(--neutral-700); }
  .compare-after .compare-tag{ background:var(--primary-50); color:var(--primary-500); }
  .compare-top h3{ font-size:30px; font-weight:700; color:var(--neutral-900); margin:0 0 10px; letter-spacing:-.02em; }
  .compare-top p{ font-size:15px; line-height:1.55; color:var(--neutral-700); margin:0; }

  /* ---- flow diagram ---- */
  .diagram-body{ display:flex; align-items:center; justify-content:center; }
  .diagram-you{ width:70px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
  .diagram-you-icon{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .diagram-you-icon svg{ width:19px; height:19px; }
  .compare-before .diagram-you-icon{ background:var(--neutral-100); }
  .compare-before .diagram-you-icon svg{ color:var(--neutral-700); }
  .compare-after .diagram-you-icon{ background:var(--primary-50); }
  .compare-after .diagram-you-icon svg{ color:var(--primary-500); }
  .diagram-you span{ font-size:12px; font-weight:700; color:var(--neutral-800); }

  .diagram-hub{
    flex-shrink:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px;
    background:#fff; border:1px solid var(--neutral-200); border-radius:12px;
    padding:13px 26px 13px 15px; box-shadow:var(--shadow-card);
  }
  .hub-row{ display:flex; align-items:center; gap:8px; }
  .hub-row img{ width:22px; height:22px; display:block; }
  .hub-row span{ font-size:14px; font-weight:700; color:var(--neutral-900); white-space:nowrap; }
  .hub-tagline{ font-size:10px; font-weight:600; color:#2f6fed; letter-spacing:.2px; padding-left:30px; white-space:nowrap; }

  .connector-zone{ position:relative; width:108px; align-self:stretch; flex-shrink:0; }
  .line-h{ position:absolute; height:0; border-top:2px dashed #c7d2e3; }
  .line-v{ position:absolute; width:0; border-left:2px dashed #c7d2e3; }
  .line-arrow{ position:absolute; width:6px; height:6px; border-right:2px solid #c7d2e3; border-bottom:2px solid #c7d2e3; transform:rotate(-45deg); }
  .compare-after .line-h, .compare-after .line-v{ border-color:#c7d9fb; }
  .compare-after .line-arrow{ border-color:#c7d9fb; }
  .compare-before .zone-out .line-h.final, .compare-before .zone-out .line-arrow.final{ border-color:#f0b3ab; }
  .compare-after .zone-out .line-h.final, .compare-after .zone-out .line-arrow.final{ border-color:#a3e2c1; }

  .diagram-rows{ display:flex; flex-direction:column; flex-shrink:0; }
  .diagram-rows.rows-3{ gap:14px; }
  .diagram-rows.rows-4{ gap:10px; }
  .diagram-row{ display:flex; align-items:center; }
  .row-connector{ position:relative; width:48px; height:2px; flex-shrink:0; }
  .row-connector .line-h{ left:0; right:0; top:0; }
  .row-connector .line-arrow{ right:0; top:-3px; }

  .diagram-box{
    display:flex; align-items:center; gap:9px;
    background:#fff; border:1px solid var(--neutral-100); border-radius:10px;
    padding:0 13px; font-weight:600; color:var(--neutral-900);
    box-shadow:0 1px 3px rgba(15,23,42,.05); white-space:nowrap; flex-shrink:0;
  }
  .rows-3 .diagram-box{ height:48px; width:250px; font-size:14px; }
  .rows-4 .diagram-box{ height:38px; width:300px; font-size:13px; }
  .box-icon{ display:flex; align-items:center; justify-content:center; border-radius:7px; flex-shrink:0; }
  .rows-3 .box-icon{ width:28px; height:28px; }
  .rows-4 .box-icon{ width:24px; height:24px; }
  .rows-3 .box-icon svg{ width:16px; height:16px; }
  .rows-4 .box-icon svg{ width:14px; height:14px; }
  .tone-gray{ background:var(--neutral-100); color:var(--neutral-700); }
  .tone-green{ background:#e3f6ea; color:#12905a; }
  .tone-amber{ background:#fef2df; color:#c8790a; }
  .tone-red{ background:#fdecea; color:#d1493a; }
  .tone-indigo{ background:#ece9fd; color:#5b4fdb; }
  .tone-blue{ background:var(--primary-50); color:var(--primary-500); }

  .diagram-outcome{
    flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    border-radius:14px; padding:20px 16px; text-align:center; width:150px;
  }
  .compare-before .diagram-outcome{ background:#fdf1f0; border:1px solid #f5d3cf; }
  .compare-after .diagram-outcome{ background:#eefaf3; border:1px solid #c9f0da; }
  .outcome-icon-plain{ width:30px; height:30px; color:#d1493a; }
  .outcome-badge{ width:38px; height:38px; border-radius:50%; background:#189a5c; display:flex; align-items:center; justify-content:center; }
  .outcome-badge svg{ width:18px; height:18px; color:#fff; }
  .outcome-text{ display:flex; flex-direction:column; line-height:1.3; font-weight:700; font-size:14.5px; }
  .compare-before .outcome-text{ color:#b23a2e; }
  .compare-after .outcome-text{ color:#0c7a45; }

  .compare-tags{ display:flex; gap:10px 22px; flex-wrap:wrap; justify-content:center; max-width:640px; }
  .compare-tags span{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; }
  .compare-tags svg{ width:16px; height:16px; flex-shrink:0; }
  .tag-good{ color:#0f9d58; }
  .tag-bad{ color:#d1493a; }

  .compare-divider{
    position:absolute; top:0; bottom:0; left:0; z-index:10;
    width:4px;
    background:var(--primary-500);
    box-shadow:0 0 0 3px rgba(15,98,254,.25);
    transform:translateX(-50%);
    cursor:ew-resize;
    touch-action:none;
  }
  .compare-divider-dot{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:36px; height:36px; border-radius:50%;
    background:var(--primary-500);
    box-shadow:0 4px 14px rgba(15,98,254,.4), 0 0 0 3px #fff;
    display:flex; align-items:center; justify-content:center;
    cursor:grab;
  }
  .compare-divider-dot::before{
    content:'↔';
    color:#fff;
    font-size:16px;
    font-weight:700;
    line-height:1;
  }

  @media (max-width:900px){
    .compare-before, .compare-after{
      padding:32px 20px 36px;
    }
  }

  /* ============ Works With Your Stack — integrations ============ */
  .integ-section{ padding:90px var(--gutter) 100px; background:var(--white); }
  .integ-head{ max-width:700px; margin-bottom:8px; }
  .integ-head .eyebrow{ color:#19b1ef; font-size:var(--text-sm); font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px; }
  .integ-head h2{ color:#03106c; font-size:var(--h2); line-height:1.25; letter-spacing:-.02em; font-weight:700; margin:0 0 14px; }
  .integ-head p{ color:var(--neutral-800); font-size:var(--text-xlg); line-height:1.6; margin:0; max-width:640px; }

  .integ-stats{ display:flex; justify-content:center; align-items:baseline; flex-wrap:wrap; gap:14px 56px; margin:40px 0 60px; }
  .integ-stat{ display:flex; align-items:baseline; gap:10px; }
  .integ-stats .stat-count{ display:inline-block; font-size:42px; font-weight:700; color:var(--primary-500); line-height:1; margin:0; }
  .integ-stat-label{ font-size:28px; font-weight:700; color:var(--neutral-900); line-height:1; }
  @media (max-width:600px){
    .integ-stats{ gap:10px 32px; }
    .integ-stats .stat-count{ font-size:30px; }
    .integ-stat-label{ font-size:19px; }
  }

  .integ-diagram{ position:relative; max-width:1280px; margin:0 auto; }
  .integ-diagram-grid{ display:flex; align-items:center; gap:0; }
  .integ-col{ display:flex; flex-direction:column; justify-content:space-between; gap:26px; width:30.3%; flex-shrink:0; }
  .integ-hub-area{ position:relative; flex:1 1 auto; aspect-ratio:520/446; }
  .connector-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
  .connector-svg path{ fill:none; stroke-width:1.6; stroke-dasharray:4 5; opacity:.5; }
  .hub-connector-svg path{ animation:hub-flow 1.4s linear infinite; }
  @keyframes hub-flow{ to{ stroke-dashoffset:-18; } }
  @media (prefers-reduced-motion: reduce){ .hub-connector-svg path{ animation:none; } }

  .hub-circle{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:17.3%; aspect-ratio:1/1; border-radius:50%;
    background:var(--white); border:1.5px solid var(--neutral-200);
    box-shadow:var(--shadow-card);
    display:flex; align-items:center; justify-content:center;
    z-index:2;
  }
  .hub-circle img{ width:52%; height:52%; }
  .hub-circle::before{
    content:''; position:absolute; inset:-16%; border-radius:50%;
    border:2px solid var(--primary-200); opacity:.6; pointer-events:none;
    animation:hub-pulse-ring 2.6s ease-out infinite;
  }
  @keyframes hub-pulse-ring{
    0%{ transform:scale(.85); opacity:.55; }
    70%{ transform:scale(1.2); opacity:0; }
    100%{ transform:scale(1.2); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){ .hub-circle::before{ animation:none; opacity:0; } }

  .petal{
    position:absolute; z-index:1; cursor:pointer;
    width:41.5%; aspect-ratio:215/207;
    opacity:0; transform:translate(-50%,-50%) scale(.55);
    transition:opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1), z-index 0s;
    transition-delay:var(--d,0s);
  }
  .petal.is-in{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  .petal:hover{ z-index:3; }
  .petal-shape{
    position:absolute; inset:0; width:100%; height:100%;
    transform:rotate(var(--rot)); transform-origin:center;
    filter:
      drop-shadow(-1px 1px 2px rgba(116,131,154,.10))
      drop-shadow(-2px 3px 4px rgba(116,131,154,.09))
      drop-shadow(-5px 7px 5px rgba(116,131,154,.06))
      drop-shadow(-9px 13px 6px rgba(116,131,154,.02));
    transition:transform .4s cubic-bezier(.34,1.56,.64,1), filter .35s ease;
  }
  .petal-shape path{ transition:fill .3s ease, stroke-width .3s ease; }
  .petal:hover .petal-shape{
    transform:rotate(var(--rot)) scale(1.1);
    filter:
      drop-shadow(-2px 3px 5px rgba(116,131,154,.16))
      drop-shadow(-4px 7px 9px rgba(116,131,154,.14))
      drop-shadow(-9px 15px 12px rgba(116,131,154,.10))
      drop-shadow(-16px 24px 16px rgba(116,131,154,.04));
  }
  .petal:hover .petal-shape path{ fill:var(--fill-hover); stroke-width:2.4; }
  .petal-content{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    width:58%; text-align:center;
    z-index:2; transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  }
  .petal:hover .petal-content{ transform:translate(-50%,-50%) scale(1.08); }
  .petal-content svg{ width:18px; height:18px; }
  .petal-content span{ font-size:10px; font-weight:600; line-height:1.25; transition:color .3s ease; }
  .petal:hover .petal-content span{ font-weight:700; }
  @keyframes icon-pop{
    0%{ transform:scale(1) rotate(0); }
    45%{ transform:scale(1.3) rotate(-8deg); }
    75%{ transform:scale(.94) rotate(4deg); }
    100%{ transform:scale(1.12) rotate(0); }
  }
  .petal:hover .petal-content svg{ animation:icon-pop .55s cubic-bezier(.34,1.56,.64,1) forwards; }

  .petal.p-cloud{ left:36.6%; top:22.4%; } .petal.p-cloud svg,.petal.p-cloud span{ color:#008fff; }
  .petal.p-itsm{ left:62.5%; top:22.4%; } .petal.p-itsm svg,.petal.p-itsm span{ color:#b8930a; }
  .petal.p-comm{ left:75.1%; top:50%; } .petal.p-comm svg,.petal.p-comm span{ color:#9900ff; }
  .petal.p-devops{ left:62.5%; top:77.6%; } .petal.p-devops svg,.petal.p-devops span{ color:#00b232; }
  .petal.p-sec{ left:36.6%; top:77.6%; } .petal.p-sec svg,.petal.p-sec span{ color:#fd8915; }
  .petal.p-iam{ left:24.9%; top:50%; } .petal.p-iam svg,.petal.p-iam span{ color:#061178; }

  .hub-connector-svg path{ transition:stroke-width .3s ease, opacity .3s ease; }
  .hub-connector-svg path.is-active{ stroke-width:2.6; opacity:.95; animation-duration:.6s; }
  .hub-circle.is-pulsing::before{ animation-duration:1.1s; border-color:var(--primary-500); }

  @media (prefers-reduced-motion: reduce){
    .petal{ transition:none; opacity:1; transform:translate(-50%,-50%) scale(1) !important; }
    .petal:hover .petal-content svg{ animation:none; }
  }

  .spoke-card{
    position:relative; background:var(--white);
    border:1.5px solid var(--neutral-200); border-radius:16px;
    box-shadow:var(--shadow-card);
    padding:18px 20px; display:flex; align-items:center; gap:12px;
  }
  .spoke-logos{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex:1; min-width:0; }
  .spoke-logo{ font-size:12.5px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; text-align:center; }
  .spoke-more{
    flex-shrink:0; background:var(--neutral-200); color:var(--primary-500);
    font-size:11.5px; font-weight:700; padding:7px 12px; border-radius:999px; white-space:nowrap;
  }
  .spoke-card.tone-amber .spoke-more{ background:#fbf0d8; color:#b8790a; }
  .spoke-card.tone-purple .spoke-more{ background:#f1e3ff; color:#8b23e0; }
  .spoke-card.tone-green .spoke-more{ background:#dff5e6; color:#0e9448; }

  .brand-aws{ color:#232f3e; } .brand-azure{ color:#0078d4; } .brand-gcloud{ color:#4285f4; }
  .brand-accessowl{ color:#4338ca; } .brand-cyberark{ color:#111827; } .brand-auth0{ color:#eb5424; }
  .brand-crowdstrike{ color:#e01a3c; } .brand-sentinelone{ color:#5b2a86; } .brand-datadog{ color:#632ca6; }
  .brand-jira{ color:#0052cc; } .brand-helpdesk{ color:#0f9d8c; } .brand-freshservice{ color:#2fae4e; }
  .brand-slack{ color:#4a154b; } .brand-teams{ color:#5059c9; } .brand-outlook{ color:#0364b8; }
  .brand-github{ color:#111827; } .brand-gitlab{ color:#e24329; } .brand-jenkins{ color:#d33833; }

  .integ-cta{ display:flex; justify-content:center; margin-top:56px; }

  .integ-mobile-hub{ display:none; text-align:center; margin:0 0 28px; }
  .integ-mobile-hub span{ font-size:13px; font-weight:700; color:var(--neutral-700); }

  @media (max-width:900px){
    .integ-diagram-grid{ flex-direction:column; gap:16px; }
    .integ-col{ width:100%; flex-direction:column; }
    .integ-hub-area{ display:none; }
    .integ-mobile-hub{ display:block; }
  }

  /* ============ Compliance-ready across every standard ============ */
  .compliance-section{ padding:0 var(--gutter) 100px; background:var(--white); }
  .compliance-head{ max-width:760px; margin-bottom:32px; }
  .compliance-head .eyebrow{ color:#19b1ef; font-size:var(--text-sm); font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px; }
  .compliance-head h2{ color:#03106c; font-size:var(--h2); line-height:1.25; letter-spacing:-.02em; font-weight:700; margin:0 0 12px; }
  .compliance-head p{ color:var(--neutral-800); font-size:var(--text-xlg); line-height:1.6; margin:0; }

  .framework-badges{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:40px; }
  .framework-badge{
    display:flex; align-items:center; gap:10px;
    background:var(--neutral-75); border:1px solid var(--neutral-200);
    border-radius:999px; padding:10px 14px;
  }
  .framework-badge svg{ width:18px; height:18px; color:var(--neutral-700); }
  .framework-badge span{ font-size:13px; font-weight:600; color:var(--neutral-900); white-space:nowrap; }

  .compliance-cards{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  @media (max-width:860px){ .compliance-cards{ grid-template-columns:1fr; } }

  .compliance-card{
    position:relative;
    background:var(--white);
    border:1px solid var(--neutral-200);
    border-radius:16px; padding:32px;
    display:flex; flex-direction:column; gap:14px;
    transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
  }
  .compliance-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px -12px rgba(15,98,254,.28);
    border-color:transparent;
  }

  .compliance-icon{
    width:56px; height:56px; border-radius:14px;
    background:var(--neutral-100);
    display:flex; align-items:center; justify-content:center;
    transition:background .4s ease, color .4s ease, transform .4s ease;
    color:var(--primary-500);
  }
  .compliance-icon svg{ width:26px; height:26px; }
  .compliance-card:hover .compliance-icon{
    background:linear-gradient(135deg,#3b82f6,#0f62fe);
    color:#fff;
    transform:rotate(-6deg) scale(1.06);
  }

  .compliance-card h3{ font-size:var(--h7); font-weight:700; color:var(--neutral-900); margin:0; letter-spacing:-.01em; }
  .compliance-underline{ width:40px; height:3px; background:var(--neutral-200); border-radius:2px; }
  .compliance-card p{ font-size:var(--text-md); line-height:1.6; color:var(--neutral-800); margin:0 0 4px; }
  .compliance-more{
    display:flex; align-items:center; gap:6px;
    font-size:13px; font-weight:700; color:var(--primary-500);
    opacity:0; transform:translateX(-6px);
    transition:opacity .3s ease, transform .3s ease;
  }
  .compliance-more svg{ width:14px; height:14px; }
  .compliance-card:hover .compliance-more{ opacity:1; transform:translateX(0); }

  /* ============ Securing the sectors — industries carousel ============ */
  .industries-section{
    padding:90px 0 100px;
    background:linear-gradient(135deg,#1c2b6b,#0d1442);
    position:relative; overflow:hidden;
  }
  .industries-head{ margin-bottom:40px; max-width:700px; padding-left:var(--gutter); padding-right:var(--gutter); }
  .industries-head .eyebrow{ color:#5ac8ff; font-size:var(--text-sm); font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px; }
  .industries-head h2{ color:#fff; font-size:var(--h2); line-height:1.25; letter-spacing:-.02em; font-weight:700; margin:0 0 12px; }
  .industries-head p{ color:rgba(255,255,255,.72); font-size:var(--text-xlg); line-height:1.6; margin:0; }

  .industries-carousel{
    width:100%; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  }
  .industries-track{
    display:flex; gap:24px; width:max-content;
    animation:industries-scroll 40s linear infinite;
  }
  .industries-carousel:hover .industries-track{ animation-play-state:paused; }
  @keyframes industries-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion: reduce){ .industries-track{ animation:none; } }

  .industry-card{
    flex-shrink:0; width:340px;
    background:var(--white);
    border-radius:16px;
    overflow:hidden;
    box-shadow:var(--shadow-card);
  }
  .industry-image{
    height:170px; position:relative;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .industry-badge{ display:flex; align-items:center; gap:12px; padding:20px 24px 0; }
  .industry-badge-icon{
    width:40px; height:40px; border-radius:10px; flex-shrink:0;
    background:var(--primary-50); color:var(--primary-500);
    display:flex; align-items:center; justify-content:center;
  }
  .industry-badge-icon svg{ width:20px; height:20px; }
  .industry-badge span:last-child{ font-size:var(--text-lg); font-weight:700; color:var(--neutral-900); }
  .industry-card p{ padding:12px 24px 24px; margin:0; font-size:13.5px; line-height:1.6; color:var(--neutral-700); }

  .tone-nci{ background:url(assets/images/industry-nci.jpg) center/cover no-repeat, linear-gradient(135deg,#1e3a8a,#111827); }
  .tone-bfsi{ background:url(assets/images/industry-bfsi.jpg) center/cover no-repeat, linear-gradient(135deg,#0c4a6e,#1e3a8a); }
  .tone-health{ background:url(assets/images/industry-health.jpg) center/cover no-repeat, linear-gradient(135deg,#0e7490,#164e63); }
  .tone-it{ background:url(assets/images/industry-it.jpg) center/cover no-repeat, linear-gradient(135deg,#1d4ed8,#1e293b); }
  .tone-mfg{ background:url(assets/images/industry-mfg.jpg) center/cover no-repeat, linear-gradient(135deg,#334155,#0f172a); }
  .tone-gov{ background:url(assets/images/industry-gov.jpg) center/cover no-repeat, linear-gradient(135deg,#3730a3,#1e1b4b); }

  /* ============ Testimonials ============ */
  .testimonials-section{ padding:60px var(--gutter) 100px; background:var(--white); overflow:hidden; }
  .testimonials-head{ max-width:700px; margin-bottom:40px; }
  .testimonials-head .eyebrow{ color:#19b1ef; font-size:var(--text-sm); font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px; }
  .testimonials-head h2{ color:#03106c; font-size:var(--h2); line-height:1.25; letter-spacing:-.02em; font-weight:700; margin:0 0 12px; }
  .testimonials-head p{ color:var(--neutral-800); font-size:var(--text-xlg); line-height:1.6; margin:0; }

  .testi-row{
    width:calc(100% + var(--gutter) * 2); margin-left:calc(var(--gutter) * -1);
    overflow:hidden; margin-bottom:20px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  }
  .testi-track{ display:flex; gap:24px; width:max-content; padding:0 var(--gutter); }
  .testi-track-left{ animation:testi-scroll-left 32s linear infinite; }
  .testi-track-right{ animation:testi-scroll-right 32s linear infinite; }
  .testi-row:hover .testi-track{ animation-play-state:paused; }
  @keyframes testi-scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @keyframes testi-scroll-right{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
  @media (prefers-reduced-motion: reduce){ .testi-track-left, .testi-track-right{ animation:none; } }

  .testi-card{
    flex-shrink:0; width:clamp(280px, 85vw, 420px);
    background:var(--white);
    border:1px solid var(--neutral-200);
    border-radius:16px;
    padding:24px 20px;
    display:flex; flex-direction:column; gap:14px;
  }
  .testi-role{ margin:0; font-size:13px; font-weight:700; color:var(--primary-500); text-transform:uppercase; letter-spacing:.03em; }
  .testi-quote{ margin:0; font-size:15px; line-height:1.65; color:var(--neutral-900); }

  /* ============ CTA banner ============ */
  .cta-section{ padding:0 var(--gutter) 100px; }
  .cta-card{
    position:relative; overflow:hidden;
    background:linear-gradient(135deg,#0d1442,#1c2b6b);
    border-radius:24px;
    padding:64px 40px;
    text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:20px;
  }
  .cta-glow{ position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; }
  .cta-glow-1{ width:480px; height:480px; left:-180px; top:-160px; background:radial-gradient(circle,rgba(59,130,246,.35),transparent 70%); }
  .cta-glow-2{ width:520px; height:520px; right:-220px; bottom:-200px; background:radial-gradient(circle,rgba(99,102,241,.3),transparent 70%); }
  .cta-tag{
    position:relative; z-index:1;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
    color:#fff; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    padding:6px 16px; border-radius:999px;
  }
  .cta-card h2{ position:relative; z-index:1; color:#fff; font-size:var(--h2); line-height:1.25; letter-spacing:-.02em; font-weight:700; margin:0; max-width:760px; }
  .cta-card > p{ position:relative; z-index:1; color:rgba(255,255,255,.72); font-size:var(--text-xlg); margin:0; max-width:640px; }
  .cta-card .btn{ position:relative; z-index:1; margin-top:8px; }
  .cta-card .btn svg{ width:16px; height:16px; }
  .cta-closing{ position:relative; z-index:1; color:rgba(255,255,255,.5); font-size:13px; margin:8px 0 0; }

  /* ============ FAQ ============ */
  .faq-section{ padding:90px var(--gutter) 110px; background:var(--white); }
  .faq-head{ max-width:700px; margin:0 auto 32px; text-align:center; }
  .faq-head .eyebrow{ color:#19b1ef; font-size:var(--text-sm); font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px; }
  .faq-head h2{ color:#03106c; font-size:var(--h2); line-height:1.25; letter-spacing:-.02em; font-weight:700; margin:0 0 12px; }
  .faq-head p{ color:var(--neutral-800); font-size:var(--text-xlg); line-height:1.6; margin:0; }

  .faq-tabs{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:40px; }
  .faq-tab{
    background:var(--white); border:1px solid var(--neutral-200); border-radius:10px;
    padding:10px 30px; font-size:14px; font-weight:600; color:var(--neutral-800);
    transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .faq-tab:hover{ border-color:var(--primary-200); }
  .faq-tab.is-active{ background:var(--primary-500); border-color:var(--primary-500); color:#fff; }

  /* ============ Footer ============ */
  .site-footer{ background:#070e1a; width:100%; }
  .footer-shell{ display:flex; flex-direction:column; gap:40px; padding:64px var(--gutter) 48px; }
  .footer-brand{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  .footer-tagline{ color:var(--neutral-200); font-size:14px; line-height:1.6; max-width:480px; margin:0; }
  .footer-social{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
  .social-link{
    width:40px; height:40px; border-radius:50%; flex:none;
    background:#0f172a; border:1px solid var(--neutral-800);
    display:flex; align-items:center; justify-content:center;
    color:var(--neutral-200);
    transition:transform .3s cubic-bezier(.4,0,.2,1), background .3s, border-color .3s, color .3s;
  }
  .social-link svg{ width:18px; height:18px; }
  .social-link:hover{ transform:translateY(-3px); border-color:var(--primary-500); color:#fff; background:var(--primary-500); }
  .social-link.wa-social:hover{ background:#25D366; border-color:#25D366; }

  .footer-links{ display:flex; gap:64px; flex-wrap:wrap; }
  .footer-col{ display:flex; flex-direction:column; gap:20px; }
  .footer-col.col-products{ width:290px; }
  .footer-col.col-contact{ width:237px; }
  .footer-col.col-reg, .footer-col.col-company, .footer-col.col-resources{ flex:1 1 140px; min-width:0; }
  .footer-col h4{ margin:0; font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#f8f8ff; }
  .footer-col-list{ display:flex; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none; }
  .footer-col-list a{ color:var(--neutral-200); font-size:14px; text-decoration:none; transition:color .25s; }
  .footer-col-list a:hover{ color:#fff; }
  .footer-contact-list{ display:flex; flex-direction:column; gap:12px; }
  .footer-contact-list a{ color:var(--neutral-200); font-size:14px; text-decoration:none; transition:color .25s; }
  .footer-contact-list a:hover{ color:#fff; }
  .footer-cert-badges{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .cert-chip{
    width:35px; height:35px; border-radius:8px; flex:none;
    background:rgba(255,255,255,.06); border:1px solid var(--neutral-800);
    display:flex; align-items:center; justify-content:center;
    font-size:8.5px; font-weight:700; letter-spacing:-.02em; color:var(--neutral-200);
  }
  .footer-countries{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
  .footer-country{ display:flex; gap:6px; align-items:center; font-size:14px; color:var(--neutral-200); }
  .footer-country .flag{ font-size:16px; line-height:1; }

  .footer-divider{ height:1px; background:var(--neutral-800); width:100%; border:0; margin:0; flex:none; }

  .footer-bottom{ display:flex; flex-direction:column; gap:24px; }
  .footer-cert-label{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--neutral-700); margin:0 0 24px; }
  .footer-badges-row{ display:flex; gap:12px; flex-wrap:wrap; }
  .footer-badge{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 16px; border-radius:999px;
    background:#0f172a; border:1px solid var(--neutral-800);
    color:#f8f8ff; font-size:12px; font-weight:600;
  }
  .footer-badge svg{ width:14px; height:14px; color:var(--primary-200); }
  .footer-copyright-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; }
  .footer-copyright-row p{ margin:0; color:var(--neutral-700); }
  .footer-legal-links{ display:flex; gap:24px; flex-wrap:wrap; }
  .footer-legal-links a{ color:var(--neutral-200); text-decoration:none; font-size:13px; transition:color .25s; }
  .footer-legal-links a:hover{ color:#fff; }

  @media (max-width:900px){
    .footer-links{ gap:36px; }
    .footer-col.col-products{ width:100%; }
    .footer-col.col-contact{ width:100%; }
  }
  @media (max-width:560px){
    .footer-shell{ padding:48px var(--gutter) 36px; gap:32px; }
    .footer-brand{ flex-direction:column; gap:20px; }
    .footer-links{ flex-direction:column; gap:28px; }
    .footer-copyright-row{ flex-direction:column; align-items:flex-start; gap:12px; }
    .footer-legal-links{ gap:16px; }
  }

  /* ============ WhatsApp floating button ============ */
  .whatsapp-float{
    position:fixed; right:24px; bottom:24px; z-index:999;
    width:60px; height:60px; border-radius:50%;
    background:#25D366;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    box-shadow:0 10px 26px rgba(0,0,0,.3), 0 0 0 0 rgba(37,211,102,.5);
    transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
    animation:waPulse 2.6s ease-out infinite;
  }
  .whatsapp-float svg{ width:30px; height:30px; }
  .whatsapp-float:hover{ transform:scale(1.08); box-shadow:0 14px 32px rgba(0,0,0,.35); }
  .whatsapp-float:hover .wa-tooltip{ opacity:1; transform:translateY(-50%) translateX(0); }
  .wa-tooltip{
    position:absolute; right:72px; top:50%; transform:translateY(-50%) translateX(6px);
    background:#101828; color:#fff; font-size:13px; font-weight:600;
    padding:8px 14px; border-radius:8px; white-space:nowrap;
    opacity:0; pointer-events:none;
    transition:opacity .3s, transform .3s;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
  }
  .wa-tooltip::after{
    content:''; position:absolute; right:-5px; top:50%; transform:translateY(-50%);
    width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:5px solid #101828;
  }
  @keyframes waPulse{
    0%{ box-shadow:0 10px 26px rgba(0,0,0,.3), 0 0 0 0 rgba(37,211,102,.5); }
    70%{ box-shadow:0 10px 26px rgba(0,0,0,.3), 0 0 0 14px rgba(37,211,102,0); }
    100%{ box-shadow:0 10px 26px rgba(0,0,0,.3), 0 0 0 0 rgba(37,211,102,0); }
  }
  @media (max-width:560px){
    .whatsapp-float{ right:16px; bottom:16px; width:52px; height:52px; }
    .whatsapp-float svg{ width:26px; height:26px; }
    .wa-tooltip{ display:none; }
  }

  .faq-list{ max-width:1000px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
  .faq-list[hidden]{ display:none; }
  .faq-item{
    background:var(--white); border:.8px solid var(--neutral-200); border-radius:10px;
    overflow:hidden;
  }
  .faq-question{
    width:100%; background:none; border:none; text-align:left; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:18px 32px; font-family:inherit;
  }
  .faq-question span{ font-size:14px; font-weight:500; color:var(--neutral-800); line-height:1.5; }
  .faq-chevron{ width:18px; height:18px; color:var(--primary-500); flex-shrink:0; transition:transform .3s ease; }
  .faq-item.is-open .faq-chevron{ transform:rotate(180deg); }
  .faq-answer{ max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.4,0,.2,1); }
  .faq-answer p{ margin:0; padding:0 32px 20px; font-size:13.5px; line-height:1.65; color:var(--neutral-700); }

  /* ============ Global Mobile Refinements (max-width: 768px) ============ */
  @media (max-width: 768px) {
    :root {
      --h2: 28px;
      --h4: 24px;
      --gutter: 18px;
    }

    .hero { min-height: 580px; }
    .hero-slides-text { min-height: 380px; }
    .hero-dots { bottom: 16px; }
    .btn-lg { padding: 12px 20px; font-size: 14px; }

    /* Lenses Section Mobile */
    .lenses-section { padding: 60px var(--gutter); }
    .lens-card { padding: 24px 18px; gap: 24px; }
    .lens-top { gap: 14px; }
    .lens-badge { width: 54px; height: 54px; }
    .lens-badge svg { width: 26px; height: 26px; }
    .lens-features { flex-direction: column; gap: 16px; }
    .lens-feature { flex-direction: row; text-align: left; gap: 14px; align-items: flex-start; }
    .lf-icon { width: 38px; height: 38px; }
    .lf-icon svg { width: 18px; height: 18px; }

    /* Modules, Why, Integrations, FAQ padding */
    .modules-section,
    .why-section,
    .grc-section,
    .integ-section,
    .compliance-section,
    .faq-section {
      padding: 60px var(--gutter);
    }

    .cta-section { padding: 0 var(--gutter) 60px; }
    .cta-card { padding: 40px 20px; }

    .faq-question { padding: 14px 18px; }
    .faq-answer p { padding: 0 18px 16px; }
  }