/* ─── CSS Variables ─────────────────────────────── */
:root {
    --navy:        #0B172D;
    --dark-navy:   #01154F;
    --blue:        #0050E0;
    --mid-blue:    #0092b8;
    --steel:       #34A0CE;
    --cyan:        #03F3D9;
    --orange:      #FD6008;
    --light-gray:  #f6f5f1;
    --light:       #F1FAFE;
    --bg-dark:     #030e3e;
    --white:       #ffffff;
    --text-body:   #1d293d;
    --text-muted:  #99a1af;
    --text-footer: #6a7282;
  
    --grad-header:   linear-gradient(90deg,  #052154 0%, #117fc9 100%);
    --grad-hero:     linear-gradient(135deg, #052053 0%, #117fc9 100%);
    --grad-feat:     linear-gradient(135deg, #00316f 0%, #006abd 100%);
    --grad-ind:      linear-gradient(90deg,  #030e3e 0%, #0e87d4 100%);
    --grad-valid:    linear-gradient(180deg, #030e3e 0%, #0e87d4 100%);
    --grad-orange:   linear-gradient(90deg,  #fc6108 0%, #ff9a60 100%);
    --grad-badge:    linear-gradient(90deg,  #00b8db 0%, #2b7fff 100%);
  
    --ff-head: 'Oxanium', sans-serif;
    --ff-body: 'Inter', sans-serif;
  
  }
  
  /* ─── Reset ─────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth;scroll-padding-top: 90px;}
  body {
    font-family: var(--ff-body);
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-body);
    background: var(--white);
    overflow-x: hidden;
  }
  img { max-width: 100%; height: auto; display: block; }
  a   { text-decoration: none; color: inherit; }
  ul  { list-style: none; }
  button { cursor: pointer; border: none; background: none; }
  h1, h2 { font-family: var(--ff-head); }
  :focus-visible, :focus, :focus-within { outline: none !important; }
  /* ─── Shared container (1600 - 220*2 = 1160px content) ── */
  .container {
    max-width: 1210px;  /* 1160px content + 25px padding each side */
    margin-inline: auto;
    width: 100%;
    padding-inline: 25px;
  }
  .section-label {
    font-family: var(--ff-head);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.37px;
  }
  .btn-orange {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--grad-orange);
    color: var(--white);
    font-family: var(--ff-body);
    font-weight: 600;
    border-radius: 100px;
    transition: opacity .2s, transform .2s;
  }
  .btn-orange:hover { opacity: .88; transform: translateY(-2px); }
  
  /* ─── Theme Utility Classes ─────────────────────── */
  
  /* Background — solid colors */
  .bg-navy       { background-color: var(--navy); }
  .bg-dark-navy  { background-color: var(--dark-navy); }
  .bg-dark       { background-color: var(--bg-dark); }
  .bg-blue       { background-color: var(--blue); }
  .bg-mid-blue   { background-color: var(--mid-blue); }
  .bg-steel      { background-color: var(--steel); }
  .bg-cyan       { background-color: var(--cyan); }
  .bg-orange     { background-color: var(--orange); }
  .bg-light-gray { background-color: var(--light-gray); }
  .bg-light      { background-color: var(--light); }
  .bg-white      { background-color: var(--white); }
  
  /* Background — gradients */
  .bg-grad-header { background: var(--grad-header); }
  .bg-grad-hero   { background: var(--grad-hero); }
  .bg-grad-feat   { background: var(--grad-feat); }
  .bg-grad-ind    { background: var(--grad-ind); }
  .bg-grad-valid  { background: var(--grad-valid); }
  .bg-grad-orange { background: var(--grad-orange); }
  .bg-grad-badge  { background: var(--grad-badge); }
  
  /* Border — solid colors (1px solid by default) */
  .border-navy       { border: 1px solid var(--navy); }
  .border-dark-navy  { border: 1px solid var(--dark-navy); }
  .border-dark       { border: 1px solid var(--bg-dark); }
  .border-blue       { border: 1px solid var(--blue); }
  .border-mid-blue   { border: 1px solid var(--mid-blue); }
  .border-steel      { border: 1px solid var(--steel); }
  .border-cyan       { border: 1px solid var(--cyan); }
  .border-orange     { border: 1px solid var(--orange); }
  .border-light-gray { border: 1px solid var(--light-gray); }
  .border-light      { border: 1px solid var(--light); }
  .border-white      { border: 1px solid var(--white); }
  
  /* Outline — solid colors (1px solid, no offset) */
  .outline-navy       { outline: 1px solid var(--navy); }
  .outline-dark-navy  { outline: 1px solid var(--dark-navy); }
  .outline-dark       { outline: 1px solid var(--bg-dark); }
  .outline-blue       { outline: 1px solid var(--blue); }
  .outline-mid-blue   { outline: 1px solid var(--mid-blue); }
  .outline-steel      { outline: 1px solid var(--steel); }
  .outline-cyan       { outline: 1px solid var(--cyan); }
  .outline-orange     { outline: 1px solid var(--orange); }
  .outline-light-gray { outline: 1px solid var(--light-gray); }
  .outline-light      { outline: 1px solid var(--light); }
  .outline-white      { outline: 1px solid var(--white); }
  
  /* Text colors */
  .text-navy       { color: var(--navy); }
  .text-dark-navy  { color: var(--dark-navy); }
  .text-dark       { color: var(--bg-dark); }
  .text-blue       { color: var(--blue); }
  .text-mid-blue   { color: var(--mid-blue); }
  .text-steel      { color: var(--steel); }
  .text-cyan       { color: var(--cyan); }
  .text-orange     { color: var(--orange); }
  .text-light-gray { color: var(--light-gray); }
  .text-light      { color: var(--light); }
  .text-white      { color: var(--white); }
  .text-body       { color: var(--text-body); }
  .text-muted      { color: var(--text-muted); }
  .text-footer     { color: var(--text-footer); }
  
  /* Font sizes — based on project type scale */
  .fs-13  { font-size: 13px; }
  .fs-14  { font-size: 14px; }
  .fs-15  { font-size: 15px; }
  .fs-16  { font-size: 16px; }
  .fs-18  { font-size: 18px; }
  .fs-20  { font-size: 20px; }
  .fs-22  { font-size: 22px; }
  .fs-24  { font-size: 24px; }
  .fs-28  { font-size: 28px; }
  .fs-32  { font-size: 32px; }
  .fs-36  { font-size: 36px; }
  .fs-42  { font-size: 42px; }
  .fs-48  { font-size: 48px; }
  .fs-52  { font-size: 52px; }
  
  /* Font families */
  .ff-head { font-family: var(--ff-head); }
  .ff-body { font-family: var(--ff-body); }
  
  /* Font weights */
  .fw-400 { font-weight: 400; }
  .fw-500 { font-weight: 500; }
  .fw-600 { font-weight: 600; }
  .fw-700 { font-weight: 700; }
  
  /* ─── 1. HEADER ──────────────────────────────────── */
  header {
    /* Exact Figma gradient: #052154 → #117fc9 left-to-right */
    background: linear-gradient(90deg, #052154 0%, #117fc9 100%);
    height: 90px;
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
  }
  header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* Logo uses the real loho.svg (208×52.74px) */
  .logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .logo img {
    width: 208px;
    height: 53px;
    display: block;
  }
  /* Main nav */
  nav, #menu-main-menu {
    display: flex;
    align-items: center;
    gap: 24px;   /* 24px gap from Figma */
  }
  nav a {
    font-family: var(--ff-head);
    font-size: 18px;
    font-weight: 500;
    color: var(--white);
    white-space: nowrap;
    transition: color .2s;
  }
  nav a:hover { color: var(--cyan); }
  /* Search icon link */
  .nav-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    transition: opacity .2s;
  }
  .nav-search img {
    width: 36px;
    height: 36px;
    display: block;
  }
  .nav-search:hover { opacity: .75; }
/* Search bar that drops into the header */
.header-search-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(90deg, #052154 0%, #117fc9 100%);
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 12px;
  z-index: 201;
  /* hidden by default */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease;
  max-width: 100%;
}
.header-search-bar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1170px;
  margin: 0 auto;
  width: 100%;
}
.header-search-bar.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.header-search-bar form {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
}
.header-search-bar input[type="search"] {
  flex: 1;
  height: 44px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.1);
  color: var(--white);
  font-family: var(--ff-head);
  font-size: 17px;
  font-weight: 400;
  padding: 0 18px;
  outline: none;
  transition: border-color .2s, background .2s;
}
.header-search-bar input[type="search"]::placeholder {
  color: rgba(255,255,255,.55);
}
.header-search-bar input[type="search"]:focus {
  border-color: var(--orange);
  background: rgba(255,255,255,.15);
}
/* remove native search cancel button */
.header-search-bar input[type="search"]::-webkit-search-cancel-button { display: none; }
.header-search-bar button[type="submit"] {
  height: 44px;
  padding: 0 22px;
  border-radius: 6px;
  border: none;
  background: linear-gradient(90deg, #fc6108 0%, #ff9a60 33%, #fc6108 100%);
  background-size: 200% 100%;
  background-position: left center;
  color: var(--white);
  font-family: var(--ff-head);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-position 0.4s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
  white-space: nowrap;
}
.header-search-bar button[type="submit"]:hover { background-position: right center;box-shadow: 0 8px 20px rgba(252, 97, 8, 0.3); }
.header-search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  opacity: .7;
  transition: opacity .2s;
  color: var(--white);
}
.header-search-close:hover { opacity: 1; }
.header-search-close svg { display: block; }  
  /* Mobile hamburger */
  .hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
  }
  .hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
    transform-origin: center;
    }
    /* Close (X) state */
    .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }  
  /* ─── 2. HERO ────────────────────────────────────── */
  /* Figma: 1600×621px  |  grad #052053→#117fc9  |  pad T120 L73 B120 R73 */
  /* Height is driven by padding + content, not fixed height */
  .hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #052053 0%, #117fc9 100%);
  }
  
  /* Network dots pattern – Figma: Picture1 1, 576×763px at x=1033.5 y=0 */
  .hero-bg-pattern {
    position: absolute;
    top: 0;
    right: 0;
    width: 878px;   /* covers same area as shield */
    height: 100%;
    object-fit: cover;
    object-position: left center;
    pointer-events: none;
    z-index: 0;
  }
  
  /* Shield – Figma: Picture1 2, 878×899px at x=722 y=−54.8 */
  /* Positioned absolute so it doesn't affect section height */
  .hero-shield {
    position: absolute;
    right: -48px;
    top: 0px;
    pointer-events: none;
    z-index: 1;
  }
  
  /* Content row – Frame 22: x=73, y=120 */
  /* padding drives section height: T120 + content + B120 */
  .hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 127px;            /* gap between scroll indicator and text */
    padding: 120px 25px 120px 25px;
    max-width: 1504px;
    margin: 0 auto;
  }
  
  /* ── Scroll indicator (drop down) – 21×372px at x=73 y=124.5 ── */
  .scroll-down {
    flex-shrink: 0;
    width: 21px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-top: 4px;   /* y=124.5 vs content y=120 → 4.5px offset */
    cursor: pointer;
  }
  /* Mouse icon – 21×30px, r:10 */
  .scroll-down .mouse {
    width: 21px;
    height: 30px;
    border: 1.5px solid #2dabfd;
    border-radius: 10px;
    position: relative;
    flex-shrink: 0;
  }
  /* Scroll wheel – 1×10px inside mouse */
  .scroll-down .mouse::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 10px;
    background: #2dabfd;
    border-radius: 1px;
  }
  /* Animated dot */
  .scroll-down .mouse::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 2px;
    background: #2dabfd;
    animation: scroll-pulse 1.5s ease-in-out infinite;
  }
  @keyframes scroll-pulse {
    0%,100% { opacity: 1; top: 8px; }
    50%      { opacity: .3; top: 14px; }
  }
  /* Vertical line – 1×160px */
  .scroll-down .scroll-line {
    width: 1px;
    height: 160px;
    background: #2dabfd;
    flex-shrink: 0;
    margin-top: 16px;  /* gap between mouse bottom and line top */
  }
  /* "scroll down" label – Montserrat 12px w400, vertical */
  .scroll-down .scroll-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #2dacfd;
    writing-mode: vertical-rl;
    letter-spacing: 3.6px;
    margin-top: 40px;
  }
  
  /* ── Hero Swiper ── */
  .hero-swiper {
    width: 720px;
    flex-shrink: 0;
    overflow: hidden;
    margin: 0 !important;
  }
  .hero-swiper .swiper-slide { width: 100%; }
  .hero-swiper .swiper-pagination { margin-top: 24px; position: static; }
  .hero-swiper .swiper-pagination-bullet { background: var(--cyan); opacity: .4; }
  .hero-swiper .swiper-pagination-bullet-active { opacity: 1; }
  
  /* ── Text content (Container) – 616×381px at x=221 y=120 ── */
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 616px;
    flex-shrink: 0;
  }
  
  /* Badge – 326×52px r:12 grad #00b8db→#2b7fff  */
  .hero-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(90deg, #00b8db 0%, #2b7fff 100%);
    color: var(--white);
    font-family: var(--ff-body);
    font-size: 24px;
    font-weight: 400;
    padding: 14px 24px;
    border-radius: 12px;
    line-height: 1;
    min-width: 326px;
    min-height: 52px;
    letter-spacing: -0.15px;
    margin-bottom: 24px;  /* gap to H1: y=196 − (y=120+h=52) = 24px */
  }
  .hero-badge strong { font-weight: 700; }
  
  /* H1 – Oxanium 52px w700, 594×112px, gap to paragraph: 24px */
  .hero h1 {
    font-family: var(--ff-head);
    font-size: 50px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.077;   /* 112px / (52px × 2 lines) */
    letter-spacing: 0.35px;
    margin-bottom: 26px;
    width: 720px;
  }
  
  /* Paragraph – Inter 24px w500, 616×89px */
  .hero-desc {
    font-family: var(--ff-body);
    font-size: 24px;
    font-weight: 500;
    color: var(--white);
    line-height: 36px;
    letter-spacing: -0.44px;
    margin-bottom: 24px;  /* gap to button */
    max-width: 530px;
  }
  .hero-desc .orange {color: #fc6108;}
  .hero-desc .cyan-text { color: #03f3d9; }
  
  /* CTA Button – 221×56px, fully rounded, grad #fc6108→#ff9a60 */
.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    background: linear-gradient(90deg, #fc6108 0%, #ff9a60 33%, #fc6108 100%);
    background-size: 200% 100%;
    background-position: left center;
    color: var(--white);
    font-family: var(--ff-body);
    font-size: 22px;
    font-weight: 600;
    padding: 0 25px;
    height: 56px;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    letter-spacing: -0.31px;
    white-space: nowrap;
    transition:
    background-position 0.4s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
  }
  .btn-cta:hover { background-position: right center;box-shadow: 0 8px 20px rgba(252, 97, 8, 0.3);}
  .btn-cta svg { width: 16px; height: 16px; flex-shrink: 0; }
  
  /* ─── 3. SECTION 1 — 100% DETERMINISTIC ────────────
     Figma: Frame 21 (5:1330) | 1600×361 | r:36 | #f6f5f1
     Padding T120 L220 B120 R220
     HORIZONTAL layout | primaryAxisAlignItems: SPACE_BETWEEN
     counterAxisAlignItems: CENTER (vertical centering)
     Left  text: 383×114px | Oxanium 36px w700
     Right frame: 586×121px | Inter 16px + 24px w700
  ─────────────────────────────────────────────────── */
  .section-det {
    background: #f6f5f1;
    padding: 120px 0;
  }
  .section-det .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* Left: 383px, Oxanium 36px w700 */
  .det-left {
    flex: 0 0 400px;
  }
  .det-left h2 {
    font-family: var(--ff-head);
    font-size: 48px;
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -0.45px;
    margin: 0;
    display: flex;
    flex-flow: column;
  }
  .det-left h2 .orange { color: #fc6108; display: block; }
  .det-left h2 .dark   { color: #012d64; display: block; }
  /* Right: 586px, two stacked text nodes (gap 4px) */
  .det-right {
    flex: 0 0 586px;
    display: flex;
    flex-direction: column;
    gap: 26px;
  }
  .det-right > p {
    font-family: var(--ff-body);
    font-size: 20px;
    font-weight: 400;
    color: #1d293d;
    line-height: 30px;
    letter-spacing: -0.31px;
    margin: 0;
  }
  .det-right > p .orange { color: #fc6108; font-weight: 700; }
  .det-right .det-sub h3 {
    font-family: var(--ff-body);
    font-size: 24px;
    font-weight: 700;
    color: #117ec7;
    line-height: 1;
    letter-spacing: -0.31px;
    margin: 0;
  }
  .det-right .det-sub h3 span { color: #123463; }
  /* ─── 4. SECTION 2 ──────────────────────────────────
     Figma: Text Block (19:3533) | 1600×984px
     grad:#00316f→#006abd | VERTICAL gap:48 | pad T120 B120
     ① Top heading block  1160×145px (centered)
     ② Video              1114×342px  r:36 (centered)
     ③ Bottom block       1160×161px (centered)
  ─────────────────────────────────────────────────── */
  .section-s2 {
    background: linear-gradient(135deg, #00316f 0%, #006abd 100%);
    padding: 119px 0 140px 0;
  }
  .section-s2 .container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
  }
  
  /* ① Top heading: centered text */
  .s2-heading {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }
  .s2-heading h2 {
    font-family: var(--ff-head);
    font-size: 48px;
    font-weight: 700;
    color: var(--white);
    line-height: 52px;
    letter-spacing: -0.45px;
    margin: 0 auto;
    max-width: 1128px;
  }
  .s2-heading p {
    font-family: var(--ff-body);
    font-size: 20px;
    font-weight: 500;
    color: var(--white);
    line-height: 1.6;
    letter-spacing: -0.31px;
    max-width: 960px;
    margin: 0;
  }
  
  /* ② Video: 1114×342px r:36, centered */
  .s2-video-wrap {
    width: 100%;
    max-width: 1114px;
    border-radius: 36px;
    overflow: hidden;
    line-height: 0;   /* remove inline gap */
  }
  .s2-video-wrap video {
    width: 100%;
    display: block;
    border-radius: 36px;
  }
  
  /* ③ Bottom: headline + 4-col features */
  .s2-bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .s2-bottom h2 {
    font-family: var(--ff-head);
    font-size: 36px;
    font-weight: 700;
    color: var(--white);
    line-height: 38px;
    letter-spacing: -0.45px;
    text-align: center;
    margin: 0 auto;
    max-width: 1030px;
  }
  .s2-bottom h2 .cyan { color: var(--cyan); }
  /* 4-col features: SPACE_BETWEEN from Figma */
  .s2-features {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
  }
  .s2-features li {
    font-family: var(--ff-body);
    font-size: 20px;
    font-weight: 500;
    color: var(--white);
    line-height: 1.5;
    letter-spacing: -0.31px;
    width: calc(25% - 48px);
    position: relative;
    padding: 10px 0px;
  }
  .s2-features li:after{
    content: '';
    height: 100%;
    width: 2px;
    position: absolute;
    right: -19px;
    top:0;
    background-color: #fff;
  }
  .s2-features li:nth-child(4n):after{display: none;}
  
  /* ─── 5. SECTION 3 — FEATURES & BENEFITS ───────────
     Figma: Text Block (93:6) | 1600×736.7px
     bg:#f6f5f1 | VERTICAL gap:70 | pad T120 B120
     ① Heading block: label + h2 + para (gap:24 inner)
     ② Device card:   1160×236.7px r:31.8 bg:#fff
  ─────────────────────────────────────────────────── */
  .section-s3 {
    background: #f6f5f1;
    padding: 123px 0 119px 0;
  }
  .section-s3 .container {
    display: flex;
    flex-direction: column;
    gap: 70px;           /* gap:70 from Figma */
  }
  /* ① Heading block */
  .s3-heading {
    display: flex;
    flex-direction: column;
    /* gap:24 between label→h2→para */
  }
  .s3-label h2{
    font-family: var(--ff-head);
    font-size: 22px;
    font-weight: 700;
    color: #fc6108;
    text-transform: uppercase;
    letter-spacing: 0.37px;
    margin-bottom: 25px;
  }
  .s3-heading h3 {
    font-family: var(--ff-head);
    font-size: 48px;
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -0.45px;
    margin: 0 0 17px 0;
  }
  .s3-heading h3 .blue   { color: #0092b8; }
  .s3-heading h3 .dark   {color: #012d64;font-size: 48px;}
  .s3-heading h3 .orange {color: #fc6108;font-size: 48px;}
  .s3-heading > .s3-para>p {
    font-family: var(--ff-body);
    font-size: 20px;
    font-weight: 400;
    color: #1d293d;
    line-height: 1.6;
    letter-spacing: 0px;
    margin: 0;
  }
  /* ② Device image card: 1160×236.7px r:31.8 bg:#fff */
  .s3-device {
    overflow: hidden;
    background: #ffffff;
    line-height: 0;
  }
  .s3-device img {
    width: 100%;
    display: block;
  }
  
  /* ─── 6. SECTION 4 — AUGMENTING, NOT REPLACING ─────
     Figma: Text Block (129:2) | 1600×943px
     grad:#030e3e→#0e87d4 | VERTICAL gap:48 | pad T120 B120
     ① Heading: H2 cyan + para white, centered
     ② Diagram: Standard-Cybersecurity-Technologies.png (966px)
     ③ 3 cards: 882px row, each 285×156px r:8
     ④ Tagline: Oxanium 28px w700 cyan, centered
  ─────────────────────────────────────────────────── */
  .section-s4 {
    background: linear-gradient(135deg, #030e3e 0%, #0e87d4 100%);
    padding: 118px 0 110px 0;
  }
  .section-s4 .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* ① Heading block — centered */
  .s4-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    margin-bottom: 76px;
  }
  .s4-heading h2 {
    font-family: var(--ff-head);
    font-size: 48px;
    font-weight: 700;
    color: #03f3d9;
    line-height: 1.2;
    letter-spacing: -0.45px;
    margin: 0;
  }
  .s4-heading p {
    font-family: var(--ff-body);
    font-size: 20px;
    font-weight: 500;
    color: var(--white);
    max-width: 589px;
    line-height: 1.5;
    letter-spacing: -0.31px;
    margin: 0;
  }
  /* ② Diagram image — 966px centered */
  .s4-diagram {
    width: 100%;
    max-width: 1000px;
    line-height: 0;
    left: -15px;
    position: relative;
    margin-bottom: 46px;
  }
  .s4-diagram img {
    width: 100%;
    display: block;
  }
  /* ③ 3 cards — 882px row centered, each 285×156px r:8 */
  .s4-cards {
    display: flex;
    gap: 13.49px;           /* exact Figma gap */
    width: 100%;
    max-width: 882px;
    margin-bottom: 45px;
  }
  .s4-card {
    flex: 0 0 285px;
    border-radius: 8px;
    /* r:8.09 from Figma */
    background: rgba(255,255,255,.08);
    border: 1.35px solid rgba(255,255,255,.15);
    padding: 10px;
    display: flex;
    justify-content: center;
  }
  .s4-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;             /* gap:12 from Frame 1098 */
    text-align: center;
    width: 237px;          /* inner Frame 1098 width */
  }
  .s4-card h3 {
    font-family: var(--ff-body);
    font-size: 22px;
    font-weight: 600;
    color: #03f3d9;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.31px;
  }
  .s4-card p {
    font-family: var(--ff-body);
    font-size: 18px;
    font-weight: 500;
    color: var(--white);
    line-height: 1.5;
    letter-spacing: 0px;
    margin: 0;
  }
  /* ④ Tagline: Oxanium 28px w700 cyan */
  .s4-tagline h4 {
    font-family: var(--ff-head);
    font-size: 28px;
    font-weight: 700;
    color: #03f3d9;
    text-align: center;
    letter-spacing: -0.45px;
    margin: 0;
  }
  
  /* ─── 7. SECTION 5 — ZECURITY HARDWALL BENEFITS ────
     Figma: Div[elementor] (9:2779) | 1600×840.6px
     bg:#030e3e | VERTICAL gap:48 | pad T120 B120
     bg decorations: bg-left.png (abs left), bg-right.png (abs right)
     ① Top row HORIZONTAL gap:24 — left text 532px + right device card 603px
     ② Cards row 1: 1161px, 4×280px r:8 gap:13.5
     ③ Cards row 2: 867.5px centred, 3×280px r:8 gap:13.5
  ─────────────────────────────────────────────────── */
  .section-s5 {
    background: #030e3e;
    padding: 124px 0 121px 0;
    position: relative;
    overflow: hidden;
  }
  /* Background decorations — absolute, don't affect layout */
  .s5-bg-left {
    position: absolute;
    left: 0; top: 50%;
    width: 478px;
    pointer-events: none;
    z-index: 0;
    transform: translateY(-50%);
  }
  .s5-bg-right {
    position: absolute;
    right: 0; top: 0px;
    width: 453px;
    pointer-events: none;
    z-index: 0;
  }
  .section-s5 .container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
  }
  /* ① Top row: text left + device card right */
  .s5-top {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .s5-text {
    flex: 0 0 532px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .s5-label h2 {
    font-family: var(--ff-head);
    font-size: 22px;
    font-weight: 700;
    color: #fe9254;
    letter-spacing: 0.37px;
  }
  /* H2: Frame 36 (569×84px) — two lines with different colours */
  .s5-text h3 {
    font-family: var(--ff-head);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.45px;
    margin: 0;
  }
  .s5-text h3 .white { color: #ffffff; display: block; }
  .s5-text h3 .cyan  { color: #03f3d9; display: block; }
  .s5-text > p {
    font-family: var(--ff-body);
    font-size: 22px;
    font-weight: 400;
    color: #ffffff;
    line-height: 29px;
    letter-spacing: -0.44px;
    margin: 0;
  }
  /* Device card: Frame 1085 — 603×123px r:16.5 bg:#fff */
  .s5-device {
    flex: 0 0 603px;
    overflow: hidden;
    line-height: 0;
    margin-bottom: 40px;
  }
  .s5-device img { width: 100%; display: block; }
  /* ② Cards grid */
  .s5-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .s5-row {
    display: flex;
    gap: 13.5px;
    flex-wrap: wrap;
    justify-content: center;
  }
  /* Each card: 280×140px r:8.09 */
  .s5-card {
    flex: 0 0 279px;
    border-radius: 8px;
    background: rgba(255,255,255,.10);
    border: 1.35px solid rgb(3 243 217 / 50%);
    display: flex;
    align-items: normal;
    gap: 10px;
    padding: 24px 24px;
    backdrop-filter: blur(5.394088268280029px);
    min-height: 140px;
  }
  .s5-card img {
    display: block;
  }
.s5-card .s5-icn {
    width: 43px;
}

.s5-card-text {
    width: calc(100% - 53px);
}
  .s5-card p {
    font-family: var(--ff-body);
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    line-height: 24px;
    letter-spacing: -0.31px;
    margin: 0;
  }
  
  /* ─── 8. SECTION 6 — INDEPENDENTLY VERIFIED ────────
     Figma: Text Block (21:753) | 1600×850px
     bg:#0e7ac4 | VERTICAL gap:22 | pad T120 B120
     ① Label: Oxanium 22px w700 #03f3d9
     ② Two-col HORIZONTAL gap:56:
        Left  565px: H2 Oxanium 36px + para Inter 22px (gap:40)
        Right 545px: 4 rows VERTICAL gap:30 (icon 86px + name + quote)
  ─────────────────────────────────────────────────── */
  .section-s6 {
    background: #0e7ac4;
    padding: 123px 0 86px 0;
  }
  .section-s6 .container {
    display: flex;
    flex-direction: column;
    gap: 22px;         /* gap between label and two-col block */
  }
  /* Label */
  .s6-label h2 {
    font-family: var(--ff-head);
    font-size: 22px;
    font-weight: 700;
    color: #03f3d9;
    letter-spacing: 0.37px;
    margin: 0;
    text-transform: uppercase;
  }
  /* Two-column block */
  .s6-body {
    display: flex;
    align-items: flex-start;
    gap: 56px;         /* exact Figma gap */
  }
  /* Left column: 565px */
  .s6-left {
    flex: 0 0 565px;
    display: flex;
    flex-direction: column;
    gap: 42px;         /* gap between H2 and para */
  }
  .s6-left h3 {
    font-family: var(--ff-head);
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    line-height: 52px;
    letter-spacing: -0.45px;
    margin: 0;
  }
  .s6-left h3 .orange { color: #fc6108; }
  .s6-left p {
    font-family: var(--ff-body);
    font-size: 22px;
    font-weight: 500;
    color: #ffffff;
    line-height: 29px;
    letter-spacing: -0.44px;
    margin: 0;
  }
  /* Right column: 545px, 4 rows gap:30 */
  .s6-right {
    flex: 0 0 545px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  /* Each test row: HORIZONTAL SPACE_BETWEEN, icon 86px + text */
  .s6-row {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 29px 0;
  }
  .s6-row:first-child { padding-top: 0; }
  .s6-row + .s6-row {
    border-top: 1px solid #C1E6FF;
  }
  .s6-row img {
    flex-shrink: 0;
    width: 86px;
    height: 86px;
    object-fit: contain;
  }
  .s6-row-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .s6-row-text h4 {
    font-family: var(--ff-body);
    font-size: 26px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.44px;
  }
  .s6-row-text p {
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.5;
    letter-spacing: -0.31px;
    margin: 0;
  }
  
  /* ─── 9. SECTION 7 — UNPRECEDENTED VALIDATION ──────
     Figma: Div[elementor] (204:2) | 1600×1109px
     bg:#030e3e | VERTICAL gap:48 | pad T120 B120
     ① Top block: label + SPACE_BETWEEN (H2 569px | para 530px)
     ② Patents label Oxanium 22px #03f3d9 + 4 cards SPACE_BETWEEN
     ③ THIRD PARTY TESTS block + SOC2 badge
     ④ 4 test cards 257×178px r:8.1 cyan border
  ─────────────────────────────────────────────────── */
  .section-s7 {
    background: #030e3e;
    padding: 124px 0 120px 0;
  }
  .section-s7 .container {
    display: flex;
    flex-direction: column;
  }
  /* ① Top block: label above, then SPACE_BETWEEN H2 | para */
  .s7-top {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 51px;
  }
  .s7-label h2 {
    font-family: var(--ff-head);
    font-size: 22px;
    font-weight: 700;
    color: #fe9254;
    letter-spacing: 0.37px;
    margin: 0;
  }
  .s7-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
  }
  .s7-h2-wrap { flex: 0 0 569px; }
  .s7-h2-wrap h3 {
    font-family: var(--ff-head);
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    line-height: 42px;
    letter-spacing: -0.45px;
    margin: 0;
  }
  .s7-para-wrap { flex: 0 0 530px; }
  .s7-para-wrap p {
    font-family: var(--ff-body);
    font-size: 22px;
    font-weight: 400;
    color: #ffffff;
    line-height: 29px;
    letter-spacing: -0.44px;
    margin: 0;
  }
  /* ② Patents label + 4 cards */
  .s7-patents {
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    margin-bottom: 42px;
  }
  .s7-patents-label h4{
    font-family: var(--ff-head);
    font-size: 22px;
    font-weight: 700;
    color: #03f3d9;
    letter-spacing: 0.37px;
    margin: 0;
    text-align: center;
  }
  .s7-patent-cards {
    display: flex;
    justify-content: center;
    gap: 8.6px;
    width: 100%;
    flex-wrap: wrap;
  }
  .s7-patent-card {
    /* flex: 1; */
    border-radius: 8px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 0 10px;
    height: 92px;
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    min-width: 270px;
  }
  .s7-patent-card h4 {
    font-family: var(--ff-body);
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    letter-spacing: -0.31px;
    margin: 0;
  }
  /* ③ THIRD PARTY TESTS block */
  .s7-tests-block {
    display: flex;
    flex-direction: column;
    gap: 49px;
  }
  .s7-tests-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-right: 58px;
  }
  .s7-tests-text {flex: 0 0 530px;}
  .s7-tests-heading h4 {
    font-family: var(--ff-head);
    font-size: 30px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.40px;
    margin: 0 0 18px;
  }
  .s7-tests-text > p {
    font-family: var(--ff-body);
    font-size: 22px;
    font-weight: 400;
    color: #ffffff;
    line-height: 29px;
    letter-spacing: -0.44px;
    margin: 0;
  }
  /* SOC2 badge: image 30, 150×150px */
  .s7-soc2 {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
  }
  /* ④ 4 test cards: 257×178px r:8.1 cyan border */
  .s7-test-cards {
    display: flex;
    justify-content: center;
    gap: 43px;
    flex-wrap: wrap;
  }
  .s7-test-card {
    flex: 0 0 257px;
    min-height: 178px;
    border-radius: 8px;
    background: rgba(3,243,217,0.05);
    border: 1px solid #03f3d9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .s7-test-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }
  .s7-test-card h4 {
    font-family: var(--ff-head);
    font-size: 26px;
    font-weight: 700;
    color: #03f3d9;
    margin: 0;
    line-height: 28px;
    letter-spacing: 0.40px;
    word-break: break-word;
  }
  .s7-test-card h4 span { display: inline-block; }
  .s7-test-card p {
    font-family: var(--ff-body);
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    line-height: 20px;
    letter-spacing: -0.31px;
  }
  
  /* ─── 10. SECTION 8 — COMPARISON TABLE ─────────────
     Figma: ComparisonTable (21:673) | 1600×1412px
     bg:#ffffff | VERTICAL gap:48 | pad T120 B120
     Table container: 1160×1013px r:10
     Header: H2 Oxanium 36px #0092b8 centred
             para Inter 16px #1d293d centred
  ─────────────────────────────────────────────────── */
  .section-comparison {
    background: #ffffff;
    padding: 112px 0;
  }
  .section-comparison .container {
    display: flex;
    flex-direction: column;
    gap: 46px;
  }
  /* Header block: centered */
  .comp-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
  }
  .comp-header h2 {
    font-family: var(--ff-head);
    font-size: 48px;
    font-weight: 700;
    color: #0092b8;
    letter-spacing: -0.45px;
    margin: 0;
  }
  .comp-header p {
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 400;
    color: #1d293d;
    line-height: 1.7;
    letter-spacing: -0.31px;
  }
  /* Table wrapper: r:10 overflow clip */
  .table-scroll {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0px 10px 15px -3px rgb(0 0 0 / 10%);
  }
  /* Table */
  .comp-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ff-body);
    font-size: 14px;
  }
  /* Column widths */
  .comp-table col.col-layer   { width: 17%; }
  .comp-table col.col-focus   { width: 15%; }
  .comp-table col.col-mech    { width: 20%; }
  .comp-table col.col-blind   { width: 18%; }
  .comp-table col.col-how     { width: 30%; }
  /* Header row: #0b172d bg, white Oxanium */
  .comp-table th {
    background: #01154F;
    color: #ffffff;
    font-family: var(--ff-head);
    font-size: 22px;
    font-weight: 600;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
    border-right: 1px solid #03F3D9; 
    line-height: 24px;
    text-align: center;
  }
  .comp-table th:last-child { border-right: none; }
  .comp-table th .orange { color: #fc6108; }
  /* Body cells */
  .comp-table td {
    padding: 10px;
    color: #0b172d;
    border-bottom: 1px solid rgb(52 160 206 / 30%);
    border-right: 1px solid rgb(52 160 206 / 30%);
    vertical-align: middle;
    font-size: 16px;
    line-height: 20px;
  }
  .comp-table td:last-child { border-right: none; }
  /* Company name: orange Oxanium bold */
  .comp-table .co-name {
    font-family: var(--ff-head);
    font-size: 16px;
    font-weight: 700;
    color: #fc6108;
    display: block;
    margin-bottom: 3px;
  }
  /* Vendors sub-text */
  .comp-table .co-vendor {
    font-size: 12px;
    color: #6a7282;
    display: block;
  }
  /* Zecurity highlight row */
  .comp-table .row-zecurity td {
    vertical-align: middle;
  }
  .comp-table .row-zecurity .co-name {
    font-size: 16px;
  }
  /* Section divider rows */
  .comp-table .row-section td {
    background: #0b172d;
    color: #ffffff;
    font-family: var(--ff-head);
    font-weight: 700;
    font-size: 16px;
    padding: 20px 14px 18px 14px;
    line-height: 1;
  }
  /* Hover on regular rows */
  .comp-table tbody tr:not(.row-section):not(.row-zecurity):hover td {
    background: #f8fafb;
  }
  /* Bullet list inside cells */
  .comp-table .cell-list {
    padding-left: 20px;
    margin: 0;
    list-style-type: disc;
  }
  .comp-table .cell-list li { margin-bottom: 4px;line-height: 18px;}
  .comp-table tbody tr:nth-child(even) td, .comp-table tbody tr:last-child td, .comp-table tbody tr:first-child td {
    background: #F1FAFE;
}

.comp-table tbody tr.row-section:nth-child(even) td {
    background: #01154F;
}


  /* ─── 11. SECTION 9 — INDUSTRIES ────────────────────
     Figma: Div[elementor] (96:5768) | 1600×515px
     grad:#030e3e→#0e87d4 | VERTICAL gap:78 | pad T120 B120
     bg-top-right.png abs top-right | bg-bottom-left.png abs bottom-left
     ① Headline: Oxanium 36px w700 white, centred (850px)
     ② 5 tabs: SPACE_BETWEEN gap:48, icon 62px + label Oxanium 22px w600
  ─────────────────────────────────────────────────── */
  .section-s9 {
    background: linear-gradient(90deg, #030e3e 0%, #0e87d4 100%);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
  }
  /* Background decorations — absolute, no layout impact */
  .s9-bg-tr {
    position: absolute;
    top: 0; right: 0;
    width: 360px;
    pointer-events: none;
    z-index: 0;
  }
  .s9-bg-bl {
    position: absolute;
    bottom: -40%; left: 0;
    width: 360px;
    pointer-events: none;
    z-index: 0;
  }
  .section-s9 .container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 57px;        /* exact Figma gap */
    align-items: center;
  }
  /* ① Headline */
  .s9-headline h2 {
    font-family: var(--ff-head);
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    line-height: 52px;
    letter-spacing: -0.45px;
    text-align: center;
    max-width: 1128px;
    margin: 0;
  }
  /* ② 5 industry tabs: SPACE_BETWEEN */
  .s9-tabs {
    display: flex;
    justify-content: space-between;
    align-items: flex-top;
    width: 100%;
  }
  .s9-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    /* gap:36 between icon and label from Figma */
    cursor: pointer;
    transition: transform .2s;
    padding: 0 18px;
  }
  .s9-tab:hover { transform: translateY(-4px); }
  /* Icon: 62×62px white bg */
  .s9-icon {
    width: 83px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .s9-icon img {
    width: 83px;
    display: block;
  }
  .s9-tab span {
    font-family: var(--ff-head);
    font-size: 22px;
    line-height: 24px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.37px;
    white-space: normal;
    text-align: center;
  }
  .s9-tab span span {
    display: inline-block;
  }
  /* ─── 12. SECTION 10 — CONTACT / NINJA FORM ─────────
     Figma: Text Block (23:101) | 1600×710.7px
     bg:#f1f1f1 | VERTICAL gap:17.9 | pad T100 B100
     ① Heading block: H2 Oxanium 36px #012d64 + para Open Sans 18.3px
     ② Ninja Form embed (visual: underline fields, gap:20 VERTICAL)
        Row1: 3 fields gap:23.3 | Row2: 2 fields | Textarea bg:#fff
        Field labels: Inter 13.3px w400 #0049cc
     ③ Button: 228×48px fully rounded grad #fc6108→#ff9a60
     ④ Disclaimer: Inter 16px w500 #000000
  ─────────────────────────────────────────────────── */
  .section-s10 {
    background: #f1f1f1;
    padding: 100px 0;
  }
  .section-s10 .container {
    display: flex;
    flex-direction: column;
    gap: 43px;          /* gap:46 between heading and form */
  }
  /* ① Heading block */
  .s10-header {
    display: flex;
    flex-direction: column;
    gap: 21px;
    max-width: 1110px;
  }
  .s10-header h2 {
    font-family: var(--ff-head);
    font-size: 48px;
    font-weight: 700;
    color: #012d64;
    line-height: 1.25;
    letter-spacing: -0.45px;
    margin: 0;
  }
  .s10-header p {
    font-family: 'Open Sans', sans-serif;
    font-size: 18.33px;
    font-weight: 400;
    color: #012d64;
    line-height: 21.67px;
    margin: 0;
  }
  /* ② Ninja Form wrapper — styles mirror Figma field design */
  .s10-form-wrap {
    display: flex;
    flex-direction: column;
    gap: 17.9px;        /* section gap reused for bottom note */
  }
  /* Ninja Form override: underline-only fields to match Figma */
  .nf-form-wrap .nf-field-container { margin-bottom: 0 !important; }
  .nf-form-wrap .field-wrap { display: flex; flex-direction: column; gap: 8px; }
  .nf-form-wrap label {
    font-family: var(--ff-body) !important;
    font-size: 13.33px !important;
    font-weight: 400 !important;
    color: #0049cc !important;
  }
  .nf-form-wrap input[type="text"],
  .nf-form-wrap input[type="email"],
  .nf-form-wrap input[type="tel"],
  .nf-form-wrap select,
  .nf-form-wrap textarea {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #b0b8c8 !important;
    border-radius: 0 !important;
    padding: 4px 8px !important;
    font-family: var(--ff-body) !important;
    font-size: 13px !important;
    color: #0049CD !important;
    width: 100% !important;
    outline: none !important;
    transition: border-color .2s !important;
  }
  .nf-form-wrap input:focus,
  .nf-form-wrap select:focus,
  .nf-form-wrap textarea:focus {
    border-bottom-color: #0049cc !important;
  }
  .nf-form-wrap textarea {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #b0b8c8 !important;
    resize: vertical;
    height: 119px !important;
    padding: 10px 8px !important;
  }
  /* Submit button */
  .nf-form-wrap input[type="button"],
  .nf-form-wrap input[type="submit"],
  .nf-form-wrap .submit-wrap input {
    background: linear-gradient(90deg, #fc6108 0%, #ff9a60 100%) !important;
    color: #ffffff !important;
    font-family: var(--ff-body) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 12px 28px !important;
    width: auto !important;
    cursor: pointer !important;
    height: 48px !important;
    transition: opacity .2s !important;
  }
  section.section-s10 .nf-form-title { display: none; } 
  section.section-s10 .nf-before-form-content { display: none; } 
  .s10-form-wrap .nf-field-label { display: none; } 
  .nf-form-wrap input[type="text"]::placeholder, .nf-form-wrap input[type="email"]::placeholder, .nf-form-wrap input[type="tel"]::placeholder, .nf-form-wrap select::placeholder, .nf-form-wrap textarea::placeholder { color: #0049CD; font-size: 13px; font-weight: 400; } 
  nf-fields-wrap { display: flex; gap: 26px 23px; flex-wrap: wrap; } 
  nf-fields-wrap nf-field:first-child, nf-fields-wrap nf-field:nth-child(2), nf-fields-wrap nf-field:nth-child(3), nf-fields-wrap nf-field:nth-child(4), nf-fields-wrap nf-field:nth-child(5) { width: calc(33.33% - (46px / 3)); } 
  nf-field { width: 100%; }
  .nf-form-wrap input[type="submit"]:hover { opacity: .88 !important; }
  /* Static preview form (fallback when Ninja Forms not active) */
  .s10-form-static {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .s10-row {
    display: flex;
    gap: 23.3px;
  }
  .s10-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .s10-field label {
    font-family: var(--ff-body);
    font-size: 13.33px;
    font-weight: 400;
    color: #0049cc;
  }
  .s10-field input,
  .s10-field select {
    background: transparent;
    border: none;
    border-bottom: 1px solid #b0b8c8;
    border-radius: 0;
    padding: 6px 0;
    font-family: var(--ff-body);
    font-size: 14px;
    color: #1d293d;
    width: 100%;
  }
  .s10-field input:focus,
  .s10-field select:focus { outline: none; border-bottom-color: #0049cc; }
  .s10-textarea {
    background: #ffffff;
    border: none;
    border-bottom: 1px solid #b0b8c8;
    padding: 10px;
    font-family: var(--ff-body);
    font-size: 14px;
    color: #1d293d;
    width: 100%;
    min-height: 119px;
    resize: vertical;
  }
  .s10-textarea:focus { outline: none; border-bottom-color: #0049cc; }
  .s10-divider {
    height: 1px;
    background: #c8d4e8;
    margin: 4px 0;
  }
  .s10-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 228px;
    height: 48px;
    background: linear-gradient(90deg, #fc6108 0%, #ff9a60 100%);
    color: #ffffff;
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 500;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: opacity .2s;
  }
  .s10-submit:hover { opacity: .88; }
  /* Disclaimer */
  .s10-note {
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    letter-spacing: -0.31px;
    margin: 0;
  }
  
  /* ─── 13. COPYWRITE BAR (1:3) ───────────────────────
     Figma: 1600×60px | bg:#101028
     Text: Inter 16px w400 white, centred
  ─────────────────────────────────────────────────── */
  .copywrite {
    background: #101028;
    height: 60px;
    display: flex;
    align-items: center;
  }
  .copywrite .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .copywrite p {
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
  }
  
  /* ─── 14. FOOTER (42:1867) ───────────────────────────
     Figma: 1600×438px | bg:#0b172d
     border-top: 1px solid #03f3d9 (cyan line)
     Container pad T64 | VERTICAL gap:48
     Brand col 464px (logo 208px + desc 384px + social gap:16)
     3 nav cols: 208/208/144px | Oxanium 16px w500 headers
                 Inter 16px w400 #99a1af links | gap:12
     Bottom bar: SPACE_BETWEEN | Inter 14px #6a7282 | links gap:24
  ─────────────────────────────────────────────────── */
  footer {
    background: #0b172d;
    border-top: 3px solid #03f3d9;    /* cyan accent line */
    padding: 64px 0 0;
  }
  footer .container {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }
  /* Main content row */
  .footer-top {
    display: flex;
    align-items: flex-start;
    gap: 0;
    justify-content: space-between;
  }
  /* Brand column: 464px wide */
  .footer-brand {
    flex: 0 0 512px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .footer-brand .logo img {
    width: 208px;
    height: 53px;
  }
  .footer-brand p {
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 400;
    color: #99a1af;
    line-height: 1.5;
    letter-spacing: -0.31px;
    max-width: 384px;
    margin: 0;
  }
  /* Social icons row */
  .footer-social {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #99a1af;
    transition: color .2s;
  }
  .footer-social a:hover { color: #ffffff; }
  .footer-social svg { width: 20px; height: 20px; fill: currentColor; }
  /* Nav columns group */
  .footer-cols {
    display: flex;
    gap: 48px;          /* space between the 3 columns */
  }
  /* Each column: fixed widths from Figma */
  .footer-col-product  { flex: 0 0 208px; }
  .footer-col-company  { flex: 0 0 208px; }
  .footer-col-resources{ flex: 0 0 144px; }
  .footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* gap:16 between heading and list */
    align-items: flex-start;
  }
  .footer-col h4 {
    font-family: var(--ff-head);
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
  }
  .footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* gap:12 between links */
  }
  .footer-col li a {
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 400;
    color: #99a1af;
    letter-spacing: -0.31px;
    transition: color .2s;
  }
  .footer-col li a:hover { color: #03f3d9; }
  /* Bottom bar: SPACE_BETWEEN */
  .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 79px;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .footer-bottom p {
    font-family: var(--ff-body);
    font-size: 14px;
    font-weight: 400;
    color: #6a7282;
    letter-spacing: -0.15px;
    margin: 0;
  }
  .footer-bottom-links, .footer-bottom-links ul {
    display: flex;
    gap: 22px;
  }
  .footer-bottom-links a {
    font-family: var(--ff-body);
    font-size: 14px;
    font-weight: 400;
    color: #6a7282;
    letter-spacing: -0.15px;
    transition: color .2s;
  }
  .footer-bottom-links a:hover { color: #ffffff; }
  .header-nav {display: flex;align-items: center;gap: 24px;}

  .main-con-sec.error-main { display: flex; flex-flow: column; align-items: center; padding: 20vh 0; } 
  .content-404 { text-align: center; } 
  .main-con-sec.error-main h1 { font-size: 54px; line-height: 1; font-weight: 900; font-family: var(--ff-head); margin-bottom: 10px; } 
  .content-404 h3 { margin-bottom: 20px; }

  .search-results-header {margin-bottom: 40px;} 
  .search-results-page { padding: 20vh 0; } 
  .search-results-grid article a { color: #1d293d; } 
  .search-results-grid article a h2 { color: #fc6108; }

  .search-results-grid article .search-card-link { display: inline-flex; gap: 20px; } 
  .search-card-image { width: 220px; } 
  .search-results-grid article .search-card-link .search-card-title { max-width: calc(100% - 240px); }


  .no-results.not-found { text-align: center; max-width: 500px; margin: 0 auto; } 
  .no-results.not-found .search-results-header { margin-bottom: 0; } 
  .no-results.not-found form { display: flex; align-items: center; gap: 8px; justify-content: center; max-width: 350px; margin: 20px auto 0 auto; } 
  .no-results.not-found input[type="search"] { flex: 1; height: 44px; border-radius: 6px; border: 2px solid var(--orange); background: #fff; color: var(--navy); font-family: var(--ff-head); font-size: 16px; font-weight: 400; padding: 0 15px; outline: none; transition: border-color .2s, background .2s; min-width: 220px; } 
  .no-results.not-found input[type="search"]::placeholder { color: var(--navy); } 
  .no-results.not-found input[type="search"]:focus { border-color: var(--orange); } 
  .no-results.not-found input[type="search"]::-webkit-search-cancel-button { display: none; } 
  .no-results.not-found .search-submit { height: 44px; padding: 0 22px; border-radius: 6px; border: none; background: linear-gradient(90deg, #fc6108 0%, #ff9a60 33%, #fc6108 100%); background-size: 200% 100%; background-position: left center; color: var(--white); font-family: var(--ff-head); font-size: 16px; font-weight: 600; cursor: pointer; transition: background-position 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease; white-space: nowrap; } 
  .no-results.not-found .search-submit:hover { background-position: right center;box-shadow: 0 8px 20px rgba(252, 97, 8, 0.3); }
  
  .page-content-default.custom-page-content ul { list-style-type: disc; padding-left: 30px; }

  .page-content-default { padding: 120px 0px; } 
  .page-content-default h1 { margin-bottom: 20px; } 
  .page-content-default h2 { margin-bottom: 15px; } 
  .page-content-default h3, .page-content-default h4 { margin-bottom: 10px; } 
  .page-content-default p a, .page-content-default li a { color: var(--orange); }

  .nf-error-msg { display: none; } 
  .nf-form-wrap .nf-error input[type="text"], .nf-form-wrap .nf-error input[type="email"], .nf-form-wrap .nf-error input[type="tel"], .nf-form-wrap .nf-error select, .nf-form-wrap .nf-error textarea { border-color: #e80000 !important; } 
  .nf-form-wrap .nf-error input[type="text"]::placeholder, .nf-form-wrap .nf-error input[type="email"]::placeholder, .nf-form-wrap .nf-error input[type="tel"]::placeholder, .nf-form-wrap .nf-error select, .nf-form-wrap .nf-error textarea::placeholder { color: #e80000; } 
  .nf-form-content + .nf-after-form-content .nf-error-msg { display: block; }

  .nf-response-msg { font-family: var(--ff-head); font-weight: 700; color: #18bc91; }

  /* Image Break Section Start */
.image-video-section { background-size: cover; background-repeat: no-repeat; background-position: top center; width: 100%; height: 500px; overflow:hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items:center; -webkit-box-pack: center; -ms-flex-pack: center;justify-content: center; text-align: center; position:relative; background-attachment: fixed;     border-bottom: 5px solid #03f3d9; }
.image-video-section:after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgb(0 34 84 / 60%); mix-blend-mode: soft-light; }
.image-video-section:before { content: ""; background: -webkit-gradient(linear, left top, right top, from(rgba(56, 91, 132, 0.2)), color-stop(48.56%, rgba(68, 133, 198, 0.18)), to(rgba(46, 144, 170, 0.2))); background: -o-linear-gradient(left, rgba(56, 91, 132, 0.2) 0%, rgba(68, 133, 198, 0.18) 48.56%, rgba(46, 144, 170, 0.2) 100%); background: linear-gradient(90deg, rgba(56, 91, 132, 0.2) 0%, rgba(68, 133, 198, 0.18) 48.56%, rgba(46, 144, 170, 0.2) 100%); position: absolute; width: 100%; height: 100%; z-index: 1; }
.image-video-section .middle-content-area { position: relative; z-index: 2; }
.image-video-section video { position: absolute; width: 100%; height: 100%; z-index: 0; object-fit: cover; }
/* Image Break Section End */
/*background-watermark css start here*/

.background-watermark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
/*    background-size: cover;*/
  background-position: bottom right;
  background-repeat: no-repeat;
  z-index: 1;
}
.opacity-1 { opacity: 0.10 }
.opacity-2 { opacity: 0.20 }
.opacity-3 { opacity: 0.30 }
.opacity-4 { opacity: 0.40 }
.opacity-5 { opacity: 0.50 }
.opacity-6 { opacity: 0.60 }
.opacity-7 { opacity: 0.70 }
.opacity-8 { opacity: 0.80 }
.opacity-9 { opacity: 0.90 }
.opacity-10 { opacity: 100 }

  /* remove native search cancel button */ 
  /* ─── RESPONSIVE ─────────────────────────────────── */
  /* Container is max 1160px centred – sections only need vertical padding.
     Add side padding to container at sub-desktop widths. */

  @media (min-width: 1601px) {
    .hero-bg-pattern{min-width: 54%;}
  }
  @media (max-width: 1599px) {.hero-shield { right: 0px;}}
  @media (max-width: 1499px) {
    .hero-inner {gap: 80px;}
  }
  @media (max-width: 1399px){
    .hero-inner { gap: 50px; } 
    .hero-bg-pattern {max-width: 55%;} 
    .hero-shield {
        right: 0px;
        top: 50px;
        max-width: calc(100% - 815px);
    }
  }
  @media (max-width: 1199px) { 
    .container { padding-inline: 40px; }
    .hero-inner { gap: 48px; }
    .hero-content { width: 500px; }
    .hero-swiper { width: 500px; }
    .hero h1 { font-size: 40px; width: 100%; }
    .hero-desc { width: 100%; }
    .hero-shield { width: 500px; height: auto; left: auto; right: 0; top: 0px;max-width: calc(100% - 650px);}
    .hero-left { flex: 1; max-width: 100%; }
    .hero-right { display: none; }
    .section-det .container { flex-direction: column; }
    .det-left, .det-right { flex: none; width: 100%; }
    .features-top { flex-direction: column; }
    .features-screenshot { flex: none; width: 100%; }
    .section-s6 .s6-body { flex-direction: column; } 
    .s6-left, .s6-right { flex: none; width: 100%; }

    .s5-top { flex-wrap: wrap; } 
    .s7-top-row { flex-wrap: wrap; } 
    .s7-patent-cards { flex-wrap: wrap; } 
    .s7-test-cards { flex-wrap: wrap; justify-content: center; gap: 25px; } 
    .hero-inner { padding: 80px 25px; } 
    .hero-shield { top: 0px; } 
    .section-det { padding: 80px 0; } 
    .page-content-default { padding: 80px 0px; } 
    .det-left h2 { margin-bottom: 20px; } 
    .section-s2 { padding: 80px 0 100px 0; } 
    .s2-features { flex-wrap: wrap; } 
    .s2-features li {flex: unset;width: calc(50% - 20px);} 
    .s2-features li:nth-child(2n):after{display: none;}
    .section-s3 { padding: 80px 0 80px 0; } 
    .section-s3 .container { gap: 50px; } 
    .section-s4 { padding: 80px 0; } 
    .section-s5 { padding: 80px 0 80px 0; } 
    .s5-text { flex: unset; width: 100%; } 
    .s5-device { margin-bottom: 0; } 
    .s5-bg-left { width: 350px; } 
    .s5-bg-right { width: 400px; } 
    .section-s6 { padding: 80px 0 60px 0; } 
    .section-s7 { padding: 80px 0 80px 0; } 
    .s7-h2-wrap { flex: unset; } 
    .s7-para-wrap { flex: unset; } 
    .s7-tests-top { padding-right: 0; } 
    .section-comparison { padding: 80px 0; }

    .footer-brand {flex: 0 0 350px;padding-right: 15px;} 
    .footer-cols { gap: 30px; } 
    .footer-col { flex: 0 0 180px; }
  }
  @media (max-width: 1023px) {
    .hero-shield { position: absolute; opacity: 0.25; right: 0px; top: 0px;bottom: 0;left: 0;margin: auto;height: 80%; width: 80%; object-fit: contain; object-position: center; max-height: 100%;max-width: 100%;} 
    .s4-cards { flex-wrap: wrap; justify-content: center; } 
    .s9-tabs { flex-wrap: wrap; justify-content: center; gap: 30px; } 
    nf-fields-wrap nf-field:first-child, nf-fields-wrap nf-field:nth-child(2), nf-fields-wrap nf-field:nth-child(3), nf-fields-wrap nf-field:nth-child(4), nf-fields-wrap nf-field:nth-child(5) { width: calc(50% - (23px / 2)); } 
    .footer-top { flex-wrap: wrap; gap: 40px; } 
    .footer-brand { flex: unset; width: 100%; padding: 0; } 
    .footer-brand p { max-width: 100%; } 
    .footer-bottom { flex-flow: column; padding-bottom: 50px; }
    .s9-bg-tr{max-width: 40%;}
    .s9-bg-bl{max-width: 40%;bottom: 0;}
    .s9-tab {width: calc(33.33% - 20px);}
  }
  /* Mobile: up to 767px */
  @media (max-width: 767px) {
    html {scroll-padding-top: 75px;}
    .container { padding-inline: 20px; }
    nav { display: none; }
    nav.open {
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 75px;
      left: 0;
      right: 0;
      background: linear-gradient(90deg, #052154 0%, #117fc9 100%);
      padding: 24px 20px;
      z-index: 199;
      gap: 20px;
      border-top: 1px solid rgba(255,255,255,.15);
    }
    .hamburger { display: flex; }
    .logo img { width: 140px; height: auto; }
    /* Section 2 responsive */
    .s2-features { flex-wrap: wrap; }
          /* Hero responsive */
    .hero-inner { gap: 32px; padding: 60px 20px; }
    .hero-content { width: 100%; max-width: 100%; }
    .hero-swiper { width: 100%; }
    .hero h1 { font-size: 28px; width: auto; }
    .hero-desc { font-size: 16px; width: auto; }
    .hero-badge { font-size: 16px; min-width: unset; padding: 12px 16px; }
    .btn-cta { font-size: 16px; height: 48px; padding: 0 24px; }
    .hero-bg-pattern { width: 50vw; }
    .scroll-down { display: none; }
    /* Sections */
    .hero h1 { font-size: 32px; }
    .hero-desc { font-size: 18px; }
    .hero .btn-orange { font-size: 16px; padding: 12px 24px; }
    .scroll-down { display: none; }
    .det-left h2,
    .airgap-text h2,
    .features-left h2,
    .matrix-header h2,
    .benefits-header h2,
    .verified-left h2,
    .valid-header h2,
    .comp-header h2,
    .ind-headline,
    .contact-header h2 { font-size: 26px;line-height: 1.3;}
    .det-right .det-sub h3 { font-size: 20px; line-height: 1.3;}
    .page-content-default h1, .page-content-default h2, .page-content-default h3, .page-content-default h4, .page-content-default h5, .page-content-default h6 { line-height: 1.3; }
    .benefit-card { flex: 0 0 100%; }
    .matrix-cards { flex-direction: column; }
    .patents-row,
    .tests-grid { flex-wrap: wrap; }
    .patent-card, .test-card { flex: 0 0 calc(50% - 10px); }
    .form-row { flex-direction: column; }
    .footer-top { flex-direction: column; gap: 32px; }
    .footer-cols { flex-wrap: wrap; }
    .footer-col { flex: 0 0 calc(50% - 20px); }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .footer-bottom-links, .footer-bottom-links ul { flex-wrap: wrap; justify-content: center; }
    .ind-tabs { gap: 20px; }
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .comp-table { min-width: 700px; }
    .s7-tests-top { flex-flow: column; } 
    .s7-tests-text { width: 100%; flex: unset; } 
    .s5-device { flex: unset; }

    .section-det { padding: 60px 0; } 
    .page-content-default { padding: 60px 0px; } 
    .section-s2 { padding: 60px 0; } 
    .s2-heading h2 { font-size: 26px;line-height: 1.3;} 
    .section-s2 .container { gap: 30px; } 
    .s2-bottom h2 { font-size: 26px;line-height: 1.3; } 
    .section-s3 { padding: 60px 0; } 
    .s3-label h2{ font-size: 18px; } 
    .s3-heading h3 { font-size: 26px; line-height: 1.3; } 
    .s3-heading h3 .dark { font-size: 26px; } 
    .s3-heading h3 .orange {font-size: 26px;} 
    .section-s3 .container { gap: 30px; } 
    .s4-heading h2 { font-size: 26px; line-height: 1.3; } 
    .section-s4 { padding: 60px 0; } 
    .s4-diagram { left: 0; } 
    .s4-card h3 { font-size: 18px; line-height: 1.4; } 
    .s4-tagline h4 { font-size: 20px; line-height: 1.4; } 
    .s4-card { flex: 0 0 270px; } 
    .section-s5 { padding: 60px 0 60px 0; } 
    .s5-bg-right { width: 250px; } 
    .s5-text { gap: 15px; } 
    .s5-text h3 { font-size: 26px; } 
    .s5-text > p { font-size: 16px; line-height: 1.4; } 
    .s5-card { flex: 0 0 270px; } 
    .s5-bg-left { width: 250px; } 
    .section-s6 { padding: 60px 0 40px 0; } 
    .s6-label h2 { font-size: 18px; } 
    .s6-left h3 { font-size: 26px; line-height: 1.4; } 
    .s6-left p { font-size: 16px; line-height: 1.4; } 
    .s6-left { gap: 20px; } 
    .s6-row-text h4 { font-size: 18px; } 
    .section-s7 { padding: 60px 0px; } 
    .s7-top { gap: 20px; } 
    .s7-label h2 { font-size: 18px; line-height: 1.4; } 
    .s7-h2-wrap { width: 100%; } 
    .s7-h2-wrap h3 { font-size: 26px; line-height: 1.4; } 
    .s7-para-wrap p { font-size: 16px; line-height: 1.4; } 
    .s7-top-row { gap: 20px; } 
    .s7-patents { gap: 20px; } 
    .s7-patent-card p { font-size: 16px; white-space: normal; } 
    .s7-patent-card { width: calc(50% - 5px); } 
    .s7-tests-heading h4 { font-size: 24px; } 
    .s7-tests-text > p { font-size: 16px; line-height: 1.4; } 
    .s7-test-cards { gap: 20px; } 
    .s7-test-card h4 { font-size: 18px; } 
    .section-comparison { padding: 60px 0; } 
    .section-comparison .container { gap: 30px; } 
    .comp-table th { font-size: 18px; line-height: 1.4; } 
    .section-s9 { padding: 60px 0; } 
    .s9-headline h2 { font-size: 26px; line-height: 1.4; } 
    .section-s10 { padding: 60px 0; } 
    .s10-header h2 { font-size: 26px; line-height: 1.4; } 
    .s10-header { gap: 10px; } 
    .s10-header p { font-size: 16px; line-height: 1.4; } 
    .footer-col { flex: 0 0 165px; }
    .header-search-bar { padding: 0 20px; } 
    .header-search-bar input[type="search"] {padding: 0 10px;max-width: calc(100% - 90px);} 
    .header-search-bar form { max-width: calc(100% - 49px); } 
    .header-search-bar button[type="submit"] { padding: 0 15px; }

    .header-nav { gap: 20px; } 
    .nav-search img { width: 30px; height: 30px; } 
    header { height: 75px; }
    .header-search-bar{height: 75px;}

    .search-results-grid article .search-card-link { flex-flow: column; }
    .s5-label h2 { font-size: 18px; }
    .s9-tabs{column-gap: 0;}
    .s9-tab{width: 33.33%;}

    footer{padding: 40px 0 0;}
    footer .container{gap: 30px;}
  }
  @media (max-width: 599px) {
    .s5-card { padding: 10px 15px; width: 100%; flex: unset; } 
    .s6-row img { width: 50px; height: 50px; } 
    .s6-row { gap: 20px; } 
    .s7-tests-heading h4 { margin-bottom: 10px; } 
    .s7-test-card { width: 100%; flex: unset; height: unset; } 
    .comp-table td { font-size: 14px; } 
    .s9-tab span { font-size: 18px; line-height: 1.4; } 
    nf-fields-wrap nf-field:first-child, nf-fields-wrap nf-field:nth-child(2), nf-fields-wrap nf-field:nth-child(3), nf-fields-wrap nf-field:nth-child(4), nf-fields-wrap nf-field:nth-child(5) { width: 100%; } 
    .footer-col { flex: 0 0 100%; } 
    .footer-bottom-links, .footer-bottom-links ul { gap: 15px; } 
    .footer-bottom { padding-bottom: 30px; }
    .s9-tab{width: 50%;padding: 0 10px;}
  }
  @media (max-width: 479px) {
    .hero h1 { font-size: 24px; }
    .logo img { width: 120px; }
    .patent-card, .test-card { flex: 0 0 100%; }
    .footer-col { flex: 0 0 100%; }
    .s2-features { gap: 0px; } 
    .s2-features li { width: 100%; text-align: center; padding: 15px 0; } 
    .s2-features li:after { display: none; } 
    .s2-features li:not(:last-child) { border-bottom: 1px solid #fff; }
  }