/* Self-hosted Google Fonts (variable, woff2) — Plus Jakarta Sans & Noto Sans Sinhala */
@font-face {
      font-family: 'Noto Sans Sinhala';
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url('/assets/fonts/noto-sans-sinhala-sinhala.woff2') format('woff2');
      unicode-range: U+0964-0965, U+0D81-0DF4, U+1CF2, U+200C-200D, U+25CC, U+111E1-111F4;
    }

    @font-face {
      font-family: 'Noto Sans Sinhala';
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url('/assets/fonts/noto-sans-sinhala-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
      font-family: 'Noto Sans Sinhala';
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url('/assets/fonts/noto-sans-sinhala-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
      font-family: 'Plus Jakarta Sans';
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
      src: url('/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
      font-family: 'Plus Jakarta Sans';
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
      src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    /*!
     * Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com
     * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
     * Copyright 2023 Fonticons, Inc.
     * Self-hosted subset: only the icons used on this site. When adding a new fa-* icon, regenerate both fonts and this list.
     */
    @font-face {
      font-family: "Font Awesome 6 Free";
      font-style: normal;
      font-weight: 900;
      font-display: block;
      src: url("/assets/fonts/fa-solid-900.4be78531.woff2") format("woff2");
    }

    @font-face {
      font-family: "Font Awesome 6 Brands";
      font-style: normal;
      font-weight: 400;
      font-display: block;
      src: url("/assets/fonts/fa-brands-400.d30a9b19.woff2") format("woff2");
    }

    .fa-solid,
    .fa-brands {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: var(--fa-display, inline-block);
      font-style: normal;
      font-variant: normal;
      line-height: 1;
      text-rendering: auto;
    }

    .fa-solid {
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
    }

    .fa-brands {
      font-family: "Font Awesome 6 Brands";
      font-weight: 400;
    }

    .fa-barcode:before { content: "\f02a"; }
    .fa-bars:before { content: "\f0c9"; }
    .fa-basket-shopping:before { content: "\f291"; }
    .fa-bolt:before { content: "\f0e7"; }
    .fa-book:before { content: "\f02d"; }
    .fa-book-bookmark:before { content: "\e0bb"; }
    .fa-boxes-packing:before { content: "\e4c7"; }
    .fa-boxes-stacked:before { content: "\f468"; }
    .fa-bread-slice:before { content: "\f7ec"; }
    .fa-bullseye:before { content: "\f140"; }
    .fa-cash-register:before { content: "\f788"; }
    .fa-chart-area:before { content: "\f1fe"; }
    .fa-chart-line:before { content: "\f201"; }
    .fa-chart-pie:before { content: "\f200"; }
    .fa-check:before { content: "\f00c"; }
    .fa-chevron-left:before { content: "\f053"; }
    .fa-circle-check:before { content: "\f058"; }
    .fa-clock:before { content: "\f017"; }
    .fa-cubes:before { content: "\f1b3"; }
    .fa-envelope:before { content: "\f0e0"; }
    .fa-facebook-f:before { content: "\f39e"; }
    .fa-file-invoice:before { content: "\f570"; }
    .fa-handshake:before { content: "\f2b5"; }
    .fa-headset:before { content: "\f590"; }
    .fa-house:before { content: "\f015"; }
    .fa-keyboard:before { content: "\f11c"; }
    .fa-language:before { content: "\f1ab"; }
    .fa-location-dot:before { content: "\f3c5"; }
    .fa-lock:before { content: "\f023"; }
    .fa-mobile-screen:before { content: "\f3cf"; }
    .fa-moon:before { content: "\f186"; }
    .fa-phone:before { content: "\f095"; }
    .fa-plus:before { content: "\2b"; }
    .fa-prescription-bottle-medical:before { content: "\f486"; }
    .fa-print:before { content: "\f02f"; }
    .fa-puzzle-piece:before { content: "\f12e"; }
    .fa-receipt:before { content: "\f543"; }
    .fa-robot:before { content: "\f544"; }
    .fa-rotate:before { content: "\f2f1"; }
    .fa-rotate-right:before { content: "\f2f9"; }
    .fa-screwdriver-wrench:before { content: "\f7d9"; }
    .fa-shield-heart:before { content: "\e574"; }
    .fa-shirt:before { content: "\f553"; }
    .fa-spa:before { content: "\f5bb"; }
    .fa-store:before { content: "\f54e"; }
    .fa-sun:before { content: "\f185"; }
    .fa-tag:before { content: "\f02b"; }
    .fa-truck-fast:before { content: "\f48b"; }
    .fa-truck-ramp-box:before { content: "\f4de"; }
    .fa-user-shield:before { content: "\f505"; }
    .fa-wallet:before { content: "\f555"; }
    .fa-whatsapp:before { content: "\f232"; }
    .fa-xmark:before { content: "\f00d"; }

    @font-face {
      font-family: 'UN-Gemunu';
      src: url('/assets/fonts/UN-Gemunu.woff2') format('woff2'), url('/assets/fonts/UN-Gemunu.ttf') format('truetype');
      font-display: swap;
    }

    @font-face {
      font-family: 'UN-Agni';
      src: url('/assets/fonts/UN-Agni.ttf') format('truetype');
      font-display: swap;
    }

    @font-face {
      font-family: 'UN-Dharanee';
      src: url('/assets/fonts/UN-Dharanee.ttf') format('truetype');
      font-display: swap;
    }

    @font-face {
      font-family: 'UN-Derana';
      src: url('/assets/fonts/UN-Derana.ttf') format('truetype');
      font-display: swap;
    }

    @font-face {
      font-family: 'UN-Abhaya';
      src: url('/assets/fonts/UN-Abhaya.ttf') format('truetype');
      font-weight: 400;
      font-display: swap;
    }

    @font-face {
      font-family: 'UN-Abhaya';
      src: url('/assets/fonts/UN-Abhaya-bold-2019.ttf') format('truetype');
      font-weight: 700;
      font-display: swap;
    }

    .font-gemunu {
      font-family: 'UN-Gemunu', sans-serif !important;
    }

    .font-agni {
      font-family: 'UN-Agni', cursive, sans-serif !important;
    }

    .font-dharanee {
      font-family: 'UN-Dharanee', sans-serif !important;
    }

    .font-derana {
      font-family: 'UN-Derana', serif !important;
    }

    .font-abhaya {
      font-family: 'UN-Abhaya', serif !important;
    }

    :root {
      --brand: #f09000;
      --brand-2: #f5c010;
      --brand-ink: #1a1203;
      --grad: linear-gradient(135deg, #f5c010 0%, #f09000 100%);
      --green: #3fb37f;
      --radius: 18px;
      --maxw: 1200px;
      --font: "Plus Jakarta Sans", "Noto Sans Sinhala", system-ui, -apple-system, "Segoe UI", sans-serif;
      --accent: var(--brand);
      --text-dim: var(--muted);
    }

    [data-theme="dark"] {
      --bg: #0b0e14;
      --bg-2: #10141d;
      --surface: #141a25;
      --surface-2: #1a2130;
      --border: #242c3b;
      --text: #eef1f6;
      --muted: #98a2b3;
      --glow: rgba(240, 144, 0, .22);
      --shadow: 0 20px 60px rgba(0, 0, 0, .45);
      --header: rgba(11, 14, 20, .78);
    }

    [data-theme="light"] {
      --bg: #f7f8fa;
      --bg-2: #ffffff;
      --surface: #ffffff;
      --surface-2: #f3f4f7;
      --border: #e6e8ee;
      --text: #121826;
      --muted: #5d6676;
      --glow: rgba(240, 144, 0, .16);
      --shadow: 0 20px 50px rgba(17, 24, 39, .10);
      --header: rgba(255, 255, 255, .82);
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 84px;
    }

    body {
      margin: 0;
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      transition: background .3s, color .3s;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .wrap {
      width: 100%;
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 20px;
    }

    .si {
      font-family: "Noto Sans Sinhala", var(--font);
    }

    .grad-text {
      background: var(--grad);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    /* buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 24px;
      border-radius: 12px;
      font-weight: 700;
      font-size: 15px;
      border: 1px solid transparent;
      cursor: pointer;
      font-family: inherit;
      transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
    }

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

    .btn-primary {
      background: var(--grad);
      color: var(--brand-ink);
      box-shadow: 0 10px 30px var(--glow);
    }

    .btn-primary:hover {
      box-shadow: 0 14px 40px rgba(240, 144, 0, .38);
    }

    .btn-ghost {
      background: var(--surface);
      border-color: var(--border);
      color: var(--text);
    }

    .btn-ghost:hover {
      border-color: var(--brand);
    }

    .btn-wa {
      background: #25d366;
      color: #06290f;
    }

    /* header */
    .header {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 50;
      background: var(--header);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid transparent;
      transition: border-color .3s;
    }

    .header.scrolled {
      border-color: var(--border);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 72px;
      gap: 16px;
    }

    .nav-logo {
      display: inline-flex;
      align-items: center;
      gap: 0;
      text-decoration: none;
      position: relative;
    }

    .nav-logo img.nav-logo-img {
      height: 42px;
      width: auto;
      display: block;
    }

    [data-theme="dark"] .nav-logo-light {
      display: none !important;
    }

    [data-theme="dark"] .nav-logo-dark {
      display: block !important;
    }

    [data-theme="light"] .nav-logo-dark {
      display: none !important;
    }

    [data-theme="light"] .nav-logo-light {
      display: block !important;
    }

    .nav-flag {
      height: 26px;
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.22));
      transition: transform 0.25s ease;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
      margin-left: -12px;
      transform: translateY(-10px);
    }

    .nav-logo:hover .nav-flag {
      transform: translateY(-10px) scale(1.08) rotate(-1deg);
    }

    .nav-links {
      display: flex;
      gap: 4px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .nav-links a {
      padding: 8px 14px;
      border-radius: 10px;
      font-weight: 600;
      font-size: 14.5px;
      color: var(--muted);
      transition: color .2s, background .2s;
    }

    .nav-links a:hover {
      color: var(--text);
      background: var(--surface-2);
    }

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

    .icon-btn {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
      cursor: pointer;
      font-size: 16px;
    }

    .icon-btn:hover {
      border-color: var(--brand);
      color: var(--brand);
    }

    .theme-toggle .fa-sun {
      display: none;
    }

    [data-theme="dark"] .theme-toggle .fa-sun {
      display: inline;
    }

    [data-theme="dark"] .theme-toggle .fa-moon {
      display: none;
    }

    .nav-call-btn {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      padding: 8px 9px 8px 18px;
      border-radius: 99px;
      background: var(--grad);
      color: #ffffff;
      font-weight: 700;
      font-size: 14px;
      text-decoration: none;
      letter-spacing: 0.3px;
      box-shadow: 0 8px 24px rgba(234, 88, 12, 0.38);
      transition: transform .2s ease, box-shadow .2s ease;
      white-space: nowrap;
    }

    .nav-call-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(234, 88, 12, 0.52);
      color: #ffffff;
    }

    .nav-call-arrow {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #ffffff;
      display: grid;
      place-items: center;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      flex-shrink: 0;
    }

    .nav-call-arrow svg {
      display: block;
      animation: arrowDrift 1.8s ease-in-out infinite;
      will-change: transform;
    }

    .nav-call-btn:hover .nav-call-arrow svg {
      transform: translate(3px, -3px);
      animation: none;
    }

    @keyframes arrowDrift {

      0%,
      100% {
        transform: translate(0, 0);
      }

      50% {
        transform: translate(2.5px, -2.5px);
      }
    }

    .nav-call-wrap {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .nav-doodle-arrow {
      color: var(--brand);
      display: block;
      animation: doodleNudge 1.6s ease-in-out infinite;
      will-change: transform;
      flex-shrink: 0;
    }

    @keyframes doodleNudge {

      0%,
      100% {
        transform: translate(0, 0);
      }

      50% {
        transform: translate(4px, -2px);
      }
    }

    @media (max-width: 860px) {
      .nav-doodle-arrow {
        width: 28px;
        height: 18px;
      }
    }

    @media (max-width: 540px) {
      .nav-doodle-arrow {
        display: none;
      }
    }

    .menu-btn {
      display: none;
    }

    /* hero */
    .hero {
      position: relative;
      padding: 140px 0 80px;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      width: 900px;
      height: 900px;
      right: -300px;
      top: -350px;
      background: radial-gradient(circle, var(--glow) 0%, transparent 65%);
      pointer-events: none;
    }

    .hero-grid {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 56px;
      align-items: center;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 14px;
      border-radius: 99px;
      background: var(--surface);
      border: 1px solid var(--border);
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
    }

    .pill .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 4px rgba(63, 179, 127, .2);
    }

    .hero h1 {
      font-size: clamp(36px, 5.2vw, 60px);
      line-height: 1.08;
      letter-spacing: -.03em;
      margin: 20px 0 14px;
      font-weight: 800;
    }

    .hero .si-tag {
      font-size: 18px;
      font-weight: 600;
      color: var(--brand);
      margin: 0 0 14px;
    }

    .hero p.lead {
      font-size: 18px;
      color: var(--muted);
      margin: 0 0 30px;
      max-width: 540px;
    }

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

    .hero-points {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 22px;
      margin-top: 30px;
      padding: 0;
      list-style: none;
      color: var(--muted);
      font-size: 14.5px;
      font-weight: 500;
    }

    .hero-points i {
      color: var(--green);
      margin-right: 6px;
    }

    .mockup {
      position: relative;
    }

    .hero-art-card {
      position: relative;
      border-radius: 22px;
      overflow: hidden;
      background: var(--surface);
      border: 1px solid rgba(245, 192, 16, .28);
      box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 60px rgba(240, 144, 0, .2);
      transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease, border-color .5s ease;
    }

    .mockup:hover .hero-art-card {
      transform: translateY(-6px) scale(1.015);
      border-color: rgba(245, 192, 16, .55);
      box-shadow: 0 40px 100px rgba(0, 0, 0, .6), 0 0 90px rgba(240, 144, 0, .32);
    }

    .hero-art-card img {
      width: 100%;
      height: auto;
      display: block;
    }

    .float-card {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      border-radius: 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      font-size: 13px;
      animation: float 5s ease-in-out infinite;
    }

    .float-card b {
      display: block;
      font-size: 15px;
    }

    .float-card small {
      color: var(--muted);
    }

    .float-card .ic {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: rgba(240, 144, 0, .14);
      color: var(--brand);
    }

    .float-card.fc-1 {
      left: -28px;
      bottom: 40px;
    }

    .float-card.fc-2 {
      right: -14px;
      top: -22px;
      animation-delay: -2.5s;
    }

    .float-card.fc-2 .ic {
      background: rgba(63, 179, 127, .15);
      color: var(--green);
    }

    @keyframes float {
      50% {
        transform: translateY(-10px);
      }
    }

    /* theme-aware screenshots */
    .shot-dark {
      display: none;
    }

    [data-theme="dark"] .shot-dark {
      display: block;
    }

    [data-theme="dark"] .shot-light {
      display: none;
    }

    /* strip */
    .strip {
      border-block: 1px solid var(--border);
      background: var(--bg-2);
    }

    .strip-inner {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

    .stat {
      padding: 28px 20px;
      text-align: center;
      border-left: 1px solid var(--border);
    }

    .stat:first-child {
      border-left: 0;
    }

    .stat b {
      display: block;
      font-size: 26px;
      font-weight: 800;
      letter-spacing: -.02em;
    }

    .stat span {
      color: var(--muted);
      font-size: 14px;
    }

    /* sections */
    section {
      padding: 96px 0;
    }

    .sec-head {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 56px;
    }

    .eyebrow {
      display: inline-block;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--brand);
      margin-bottom: 12px;
    }

    .sec-head h2 {
      font-size: clamp(30px, 4vw, 44px);
      line-height: 1.15;
      letter-spacing: -.025em;
      margin: 0 0 14px;
      font-weight: 800;
    }

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

    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px;
      transition: transform .25s, border-color .25s, box-shadow .25s;
    }

    .card:hover {
      transform: translateY(-4px);
      border-color: rgba(240, 144, 0, .45);
      box-shadow: var(--shadow);
    }

    .card .ic {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      font-size: 20px;
      background: rgba(240, 144, 0, .12);
      color: var(--brand);
      margin-bottom: 18px;
    }

    .card h3 {
      margin: 0 0 8px;
      font-size: 18.5px;
      font-weight: 700;
    }

    .card p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .card .si-sub {
      display: block;
      font-size: 13.5px;
      color: var(--brand);
      font-weight: 600;
      margin: -4px 0 8px;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    /* screens */
    .tabs {
      display: inline-flex;
      gap: 6px;
      padding: 6px;
      border-radius: 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      margin: 0 auto 32px;
    }

    .tabs-center {
      text-align: center;
    }

    .tab {
      padding: 10px 20px;
      border-radius: 10px;
      border: 0;
      background: transparent;
      color: var(--muted);
      font: 600 14.5px var(--font);
      cursor: pointer;
    }

    .tab.active {
      background: var(--grad);
      color: var(--brand-ink);
    }

    .screen-frame {
      max-width: 1100px;
      margin: 0 auto;
    }

    .screen-frame .browser {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .05);
    }

    .browser-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 18px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      user-select: none;
      -webkit-user-select: none;
    }

    .browser-dots {
      display: flex;
      gap: 7px;
      align-items: center;
    }

    .browser-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      display: inline-block;
    }

    .browser-dot.red {
      background: #ff5f56;
    }

    .browser-dot.yellow {
      background: #ffbd2e;
    }

    .browser-dot.green {
      background: #27c93f;
    }

    .browser-address {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 5px 22px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 12.5px;
      color: var(--muted);
      font-weight: 500;
      max-width: 380px;
      width: 100%;
    }

    .browser-address i {
      font-size: 11px;
      color: #22c55e;
    }

    .browser-address span {
      color: var(--text);
      font-weight: 600;
      letter-spacing: .2px;
    }

    .browser-actions {
      display: flex;
      gap: 12px;
      align-items: center;
      color: var(--muted);
      font-size: 12px;
    }

    .split-compare {
      position: relative;
      width: 100%;
      aspect-ratio: 1600 / 815;
      overflow: hidden;
      user-select: none;
      -webkit-user-select: none;
      touch-action: pan-y;
      background: var(--bg);
    }

    .split-compare .screen-panel {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: none;
    }

    .split-compare .screen-panel.active {
      display: block;
      animation: fade .35s ease;
    }

    .compare-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: none;
    }

    .compare-clip {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0);
      -webkit-clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0);
      will-change: clip-path;
      pointer-events: none;
    }

    .compare-divider {
      position: absolute;
      top: 0;
      bottom: 0;
      left: var(--split, 50%);
      width: 2px;
      transform: translateX(-50%);
      background: #ffffff;
      box-shadow: 0 0 10px rgba(0, 0, 0, .55), 0 0 5px rgba(34, 197, 94, .6);
      z-index: 6;
      pointer-events: none;
      will-change: left;
    }

    .compare-handle-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: #ffffff;
      border: 2.5px solid #22c55e;
      color: #16a34a;
      display: grid;
      place-items: center;
      box-shadow: 0 4px 18px rgba(0, 0, 0, .38), 0 0 12px rgba(34, 197, 94, .3);
      transition: transform .15s ease, box-shadow .15s ease;
    }

    .split-compare:hover .compare-handle-btn,
    .split-compare.dragging .compare-handle-btn {
      transform: translate(-50%, -50%) scale(1.12);
      box-shadow: 0 6px 24px rgba(0, 0, 0, .5), 0 0 18px rgba(34, 197, 94, .55);
    }

    .compare-badge {
      position: absolute;
      top: 14px;
      padding: 6px 14px;
      border-radius: 99px;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
      pointer-events: none;
      z-index: 7;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .cb-light {
      left: 14px;
      background: rgba(255, 255, 255, .9);
      color: #1a1a1a;
      border: 1px solid rgba(0, 0, 0, .12);
      box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    }

    .cb-dark {
      right: 14px;
      background: rgba(16, 20, 29, .9);
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, .15);
      box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    }

    .compare-range-input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      opacity: 0;
      cursor: ew-resize;
      z-index: 10;
      -webkit-appearance: none;
      appearance: none;
    }

    @media (max-width: 768px) {
      .screen-frame .browser {
        border-radius: 12px;
      }

      .browser-bar {
        padding: 6px 10px;
      }

      .browser-dots {
        gap: 5px;
      }

      .browser-dot {
        width: 8px;
        height: 8px;
      }

      .browser-address {
        padding: 3px 10px;
        font-size: 11px;
        max-width: 200px;
      }

      .browser-actions {
        display: none;
      }

      .compare-handle-btn {
        width: 30px;
        height: 30px;
        border-width: 2px;
      }

      .compare-handle-btn svg {
        width: 14px;
        height: 14px;
      }

      .compare-badge {
        top: 8px;
        padding: 3px 8px;
        font-size: 10px;
        gap: 4px;
        border-radius: 8px;
      }

      .cb-light {
        left: 8px;
      }

      .cb-dark {
        right: 8px;
      }
    }

    @keyframes fade {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
    }

    .screen-notes {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      max-width: 1060px;
      margin: 26px auto 0;
    }

    .note {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      color: var(--muted);
      font-size: 14.5px;
    }

    .note i {
      color: var(--brand);
      margin-top: 4px;
    }

    .note b {
      color: var(--text);
    }

    /* steps */
    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      counter-reset: step;
    }

    .step {
      position: relative;
    }

    .step .num {
      position: absolute;
      top: 22px;
      right: 24px;
      font-size: 54px;
      font-weight: 800;
      line-height: 1;
      color: transparent;
      -webkit-text-stroke: 1.5px var(--border);
    }

    /* industries */
    .ind-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .ind {
      text-align: center;
      padding: 26px 18px;
    }

    .ind .ic {
      margin: 0 auto 14px;
    }

    .ind h3 {
      font-size: 16px;
    }

    .ind p {
      font-size: 13.5px;
    }

    /* pricing */
    .pricing {
      background: var(--bg-2);
      border-block: 1px solid var(--border);
    }

    .price-wrap {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 24px;
      max-width: 1020px;
      margin: 0 auto;
      align-items: stretch;
    }

    .price-card {
      position: relative;
      padding: 38px;
      border-radius: 24px;
      background: var(--surface);
      border: 1.5px solid transparent;
      background-image: linear-gradient(var(--surface), var(--surface)), var(--grad);
      background-origin: border-box;
      background-clip: padding-box, border-box;
      box-shadow: 0 30px 80px var(--glow);
    }

    .badge {
      position: absolute;
      top: -14px;
      left: 38px;
      padding: 6px 14px;
      border-radius: 99px;
      background: var(--grad);
      color: var(--brand-ink);
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: .03em;
    }

    .price-card h3 {
      margin: 6px 0 4px;
      font-size: 22px;
    }

    .price-card .sub {
      color: var(--muted);
      margin: 0 0 24px;
      font-size: 15px;
    }

    .price {
      display: flex;
      align-items: baseline;
      gap: 10px;
      flex-wrap: wrap;
    }

    .price .cur {
      font-size: 20px;
      font-weight: 700;
      color: var(--muted);
    }

    .price .amt {
      font-size: 58px;
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1;
    }

    .price .per {
      color: var(--muted);
      font-weight: 600;
    }

    .renew {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 18px 0 26px;
      padding: 14px 16px;
      border-radius: 14px;
      background: var(--surface-2);
      border: 1px dashed var(--border);
      font-size: 15px;
    }

    .renew i {
      color: var(--green);
      font-size: 18px;
    }

    .renew b {
      font-size: 17px;
    }

    .checks {
      list-style: none;
      padding: 0;
      margin: 0 0 30px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 18px;
    }

    .checks li {
      display: flex;
      gap: 10px;
      font-size: 14.5px;
    }

    .checks i {
      color: var(--green);
      margin-top: 5px;
      font-size: 13px;
    }

    .price-card .btn {
      width: 100%;
    }

    .addon {
      display: flex;
      flex-direction: column;
      padding: 34px;
      border-radius: 24px;
    }

    .addon .from {
      font-size: 14px;
      color: var(--muted);
      font-weight: 600;
      margin-top: 4px;
    }

    .addon .from b {
      font-size: 34px;
      color: var(--text);
      letter-spacing: -.02em;
      display: block;
      line-height: 1.2;
    }

    .addon ul {
      list-style: none;
      padding: 0;
      margin: 22px 0 26px;
      display: grid;
      gap: 12px;
    }

    .addon li {
      display: flex;
      gap: 10px;
      color: var(--muted);
      font-size: 14.5px;
    }

    .addon li i {
      color: var(--brand);
      margin-top: 5px;
      font-size: 12px;
    }

    .addon .btn {
      margin-top: auto;
    }

    .price-note {
      text-align: center;
      color: var(--muted);
      font-size: 14px;
      margin: 28px auto 0;
    }

    /* faq */
    .faq {
      max-width: 820px;
      margin: 0 auto;
      display: grid;
      gap: 12px;
    }

    .faq details {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 0 22px;
      transition: border-color .2s;
    }

    .faq details[open] {
      border-color: rgba(240, 144, 0, .5);
    }

    .faq summary {
      list-style: none;
      cursor: pointer;
      padding: 20px 0;
      font-weight: 700;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
    }

    .faq summary::-webkit-details-marker {
      display: none;
    }

    .faq summary::after {
      content: "\f067";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      color: var(--brand);
      transition: transform .25s;
    }

    .faq details[open] summary::after {
      transform: rotate(45deg);
    }

    .faq details p {
      margin: 0 0 20px;
      color: var(--muted);
    }

    /* contact */
    .contact-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 24px;
    }

    .contact-list {
      display: grid;
      gap: 14px;
    }

    .c-item {
      display: flex;
      gap: 16px;
      align-items: center;
      padding: 20px 22px;
    }

    .c-item .ic {
      margin: 0;
      flex-shrink: 0;
    }

    .c-item h3 {
      font-size: 15px;
      margin: 0 0 2px;
      color: var(--muted);
      font-weight: 600;
    }

    .c-item a,
    .c-item address {
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      word-break: break-word;
    }

    .c-item a:hover {
      color: var(--brand);
    }

    form.card:hover {
      transform: none;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    label {
      display: block;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--muted);
      margin: 0 0 6px;
    }

    .field {
      margin-bottom: 14px;
    }

    input,
    select,
    textarea {
      width: 100%;
      padding: 13px 14px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text);
      font: 500 15px var(--font);
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 4px var(--glow);
    }

    textarea {
      resize: vertical;
      min-height: 110px;
    }

    form .btn {
      width: 100%;
    }

    .form-hint {
      font-size: 13px;
      color: var(--muted);
      text-align: center;
      margin: 12px 0 0;
    }

    /* cta */
    .cta-box {
      position: relative;
      overflow: hidden;
      text-align: center;
      padding: 64px 28px;
      border-radius: 28px;
      background: radial-gradient(circle at 80% 0%, rgba(245, 192, 16, .28), transparent 55%), radial-gradient(circle at 10% 100%, rgba(240, 144, 0, .25), transparent 55%), var(--surface);
      border: 1px solid var(--border);
    }

    .cta-box h2 {
      font-size: clamp(28px, 4vw, 42px);
      margin: 0 0 12px;
      letter-spacing: -.02em;
      line-height: 1.2;
    }

    .cta-box p {
      color: var(--muted);
      margin: 0 auto 28px;
      max-width: 560px;
      font-size: 17px;
    }

    .cta-box .hero-cta {
      justify-content: center;
    }

    /* footer */
    footer {
      position: relative;
      border-top: 1px solid var(--border);
      padding: 46px 0 0;
      background: var(--bg-2);
      overflow: hidden;
    }

    footer .wrap {
      position: relative;
      z-index: 2;
    }

    .foot-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr 0.9fr;
      gap: 32px;
    }

    .foot-brand-col {
      max-width: 330px;
    }

    .foot-logo-img {
      height: 32px;
      width: auto;
      display: block;
    }

    .foot-tagline {
      color: var(--brand);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin: 10px 0 12px;
    }

    .foot-desc {
      color: var(--muted);
      font-size: 13.5px;
      line-height: 1.6;
      margin-bottom: 16px;
    }

    .foot-contacts {
      display: grid;
      gap: 8px;
      margin-bottom: 16px;
    }

    .foot-contact-row {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 13.5px;
      text-decoration: none;
      transition: color .2s;
    }

    .foot-contact-row:hover {
      color: var(--text);
    }

    .fcr-icon {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      display: grid;
      place-items: center;
      color: var(--brand);
      font-size: 11.5px;
      flex-shrink: 0;
    }

    .foot-sales-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 18px;
      border-radius: 99px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: var(--text);
      font-size: 12.5px;
      font-weight: 600;
      text-decoration: none;
      transition: all .2s;
    }

    .foot-sales-btn:hover {
      border-color: var(--brand);
      background: rgba(245, 158, 11, 0.08);
      color: #fff;
    }

    .foot-sales-btn i {
      font-size: 11px;
      transition: transform .2s;
    }

    .foot-sales-btn:hover i {
      transform: translateX(3px);
    }

    .foot-col h4 {
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--text);
      margin: 0 0 16px;
    }

    .foot-col ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 10px;
    }

    .foot-col a {
      color: var(--muted);
      font-size: 13.5px;
      text-decoration: none;
      transition: color .2s;
    }

    .foot-col a:hover {
      color: var(--brand);
    }

    .foot-socials {
      display: flex;
      gap: 8px;
    }

    .foot-socials a {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--muted);
      display: grid;
      place-items: center;
      font-size: 13px;
      text-decoration: none;
      transition: all .2s;
    }

    .foot-socials a:hover {
      color: var(--brand);
      border-color: var(--brand);
      background: rgba(245, 158, 11, 0.1);
      transform: translateY(-2px);
    }

    .foot-divider {
      border: 0;
      border-top: 1px solid var(--border);
      margin: 32px 0 16px;
    }

    .foot-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      color: var(--muted);
      font-size: 12.5px;
      padding-bottom: 8px;
    }

    .foot-legal {
      display: flex;
      gap: 18px;
    }

    .foot-legal a {
      color: var(--muted);
      text-decoration: none;
      transition: color .2s;
    }

    .foot-legal a:hover {
      color: var(--text);
    }

    .foot-wordmark {
      position: relative;
      margin: 20px auto -0.1em;
      display: flex;
      justify-content: center;
      align-items: center;
      user-select: none;
      pointer-events: none;
      overflow: hidden;
      width: 100%;
    }

    .foot-logo-mark {
      position: relative;
      width: 100%;
      max-width: 580px;
      height: clamp(80px, 14vw, 150px);
    }

    .foot-logo-outline {
      position: absolute;
      inset: 0;
      -webkit-mask-image: url('/assets/img/pos-eka-logo-outline.webp');
      mask-image: url('/assets/img/pos-eka-logo-outline.webp');
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      background-color: var(--border);
      opacity: 0.85;
    }

    .foot-logo-base {
      position: absolute;
      inset: 0;
      -webkit-mask-image: url('/assets/img/pos-eka-logo-transparent.webp');
      mask-image: url('/assets/img/pos-eka-logo-transparent.webp');
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      background-color: var(--text);
      opacity: 0.04;
    }

    .foot-logo-shimmer {
      position: absolute;
      inset: 0;
      -webkit-mask-image: url('/assets/img/pos-eka-logo-transparent.webp');
      mask-image: url('/assets/img/pos-eka-logo-transparent.webp');
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      background: linear-gradient(100deg, transparent 0%, transparent 35%, rgba(240, 144, 0, .55) 45%, rgba(245, 192, 16, .85) 50%, rgba(255, 255, 255, .95) 52%, rgba(245, 192, 16, .85) 54%, rgba(240, 144, 0, .55) 57%, transparent 67%, transparent 100%);
      background-size: 300% 100%;
      animation: sweep 7s ease-in-out infinite;
      filter: drop-shadow(0 0 16px rgba(245, 192, 16, .4));
    }

    @keyframes sweep {
      0% {
        background-position: 100% 0;
      }

      100% {
        background-position: 0% 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .foot-logo-shimmer {
        animation: none;
        background-position: 50% 0;
      }
    }

    @media (max-width: 991px) {
      .foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
      }
    }

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

      .foot-nav-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px 14px;
      }

      .foot-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
    }

    /* floating whatsapp */
    .wa-float {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 60;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #25d366;
      color: #fff;
      font-size: 28px;
      box-shadow: 0 10px 30px rgba(37, 211, 102, .45);
      transition: transform .2s;
    }

    .wa-float:hover {
      transform: scale(1.08);
    }

    /* floating theme dock (above whatsapp) */
    .float-theme-dock {
      position: fixed;
      right: 20px;
      bottom: 88px;
      z-index: 59;
      display: flex;
      align-items: center;
    }

    .float-theme-btn {
      position: relative;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
      display: grid;
      place-items: center;
      font-size: 18px;
      cursor: pointer;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .float-theme-btn:hover {
      transform: translateY(-2px) scale(1.06);
      border-color: var(--brand);
      box-shadow: 0 12px 30px rgba(0, 0, 0, .38), 0 0 14px rgba(240, 144, 0, .35);
    }

    .theme-icon-sun {
      display: none;
      color: #f59e0b;
    }

    .theme-icon-moon {
      display: block;
      color: #38bdf8;
    }

    [data-theme="dark"] .theme-icon-sun {
      display: block;
    }

    [data-theme="dark"] .theme-icon-moon {
      display: none;
    }

    .float-theme-tooltip {
      position: absolute;
      right: calc(100% + 12px);
      top: 50%;
      transform: translateY(-50%) translateX(6px);
      opacity: 0;
      pointer-events: none;
      white-space: nowrap;
      padding: 6px 14px;
      border-radius: 99px;
      font-size: 12.5px;
      font-weight: 600;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: opacity .2s ease, transform .2s ease;
    }

    .float-theme-btn:hover .float-theme-tooltip {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }

    .float-theme-mobile-tab {
      display: none;
    }

    @media (max-width: 768px) {
      .wa-float {
        right: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
        font-size: 26px;
      }

      .float-theme-dock {
        right: 0;
        bottom: 78px;
        transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
        transform: translateX(calc(100% - 32px));
      }

      .float-theme-dock.open {
        transform: translateX(-16px);
      }

      .float-theme-mobile-tab {
        display: grid;
        place-items: center;
        width: 32px;
        height: 42px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-right: 0;
        border-radius: 12px 0 0 12px;
        color: var(--brand);
        font-size: 13px;
        cursor: pointer;
        box-shadow: -4px 6px 18px rgba(0, 0, 0, .25);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }

      .float-theme-mobile-tab i {
        transition: transform .3s ease;
      }

      .float-theme-dock.open .float-theme-mobile-tab i {
        transform: rotate(180deg);
      }

      .float-theme-btn {
        width: 42px;
        height: 42px;
        font-size: 15px;
        margin-right: 4px;
      }

      .float-theme-tooltip {
        display: none;
      }
    }

    /* reveal */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s ease, transform .7s ease;
    }

    .reveal.in {
      opacity: 1;
      transform: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }

      .float-card {
        animation: none;
      }

      html {
        scroll-behavior: auto;
      }
    }

    /* responsive */
    @media (max-width: 1024px) {
      .hero-grid {
        grid-template-columns: 1fr;
        gap: 64px;
      }

      .hero-copy {
        text-align: center;
      }

      .hero p.lead {
        margin-left: auto;
        margin-right: auto;
      }

      .hero-cta,
      .hero-points {
        justify-content: center;
      }

      .browser {
        transform: none;
      }

      .features-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .ind-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .price-wrap,
      .contact-grid {
        grid-template-columns: 1fr;
      }

      .foot-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 860px) {
      .menu-btn {
        display: grid;
      }

      .nav-links {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 2px;
        padding: 12px 16px 18px;
        background: var(--bg-2);
        border-bottom: 1px solid var(--border);
        display: none;
      }

      .nav-links.open {
        display: flex;
      }

      .nav-links a {
        display: block;
        padding: 12px 14px;
      }

      .nav-call-btn {
        padding: 6px 7px 6px 13px;
        font-size: 12px;
        gap: 7px;
      }

      .nav-call-arrow {
        width: 21px;
        height: 21px;
      }

      .nav-call-arrow svg {
        width: 9px;
        height: 9px;
      }

      @media (max-width: 480px) {
        .nav-call-btn {
          padding: 5px 6px 5px 10px;
          font-size: 11px;
          gap: 5px;
        }

        .nav-call-arrow {
          width: 18px;
          height: 18px;
        }

        .nav-call-arrow svg {
          width: 8px;
          height: 8px;
        }
      }

      .steps,
      .screen-notes {
        grid-template-columns: 1fr;
      }

      .strip-inner {
        grid-template-columns: 1fr 1fr;
      }

      .stat:nth-child(3) {
        border-left: 0;
      }

      .stat:nth-child(n+3) {
        border-top: 1px solid var(--border);
      }
    }

    @media (max-width: 600px) {
      .wrap {
        padding: 0 16px;
      }

      section {
        padding: 72px 0;
      }

      .hero {
        padding: 116px 0 60px;
      }

      .nav-logo img.nav-logo-img {
        height: 34px;
      }

      .nav-flag {
        height: 20px;
        margin-left: -10px;
        transform: translateY(-8px);
      }

      .features-grid,
      .form-row,
      .checks,
      .foot-grid {
        grid-template-columns: 1fr;
      }

      .float-card {
        display: none;
      }

      .price-card,
      .addon {
        padding: 28px 22px;
      }

      .badge {
        left: 22px;
      }

      .price .amt {
        font-size: 46px;
      }

      .stat {
        padding: 22px 10px;
      }

      .stat b {
        font-size: 21px;
      }

      .tab {
        padding: 9px 14px;
        font-size: 13.5px;
      }

      .ind-grid {
        gap: 12px;
      }

      .ind {
        padding: 20px 12px;
      }
    }
    /* ===== Inner pages (About / Pricing / FAQ / Contact / Sitemap) ===== */
    .page-hero {
      padding: 130px 0 30px;
      text-align: center;
    }

    .page-hero::before {
      right: 50%;
      transform: translateX(50%);
      top: -500px;
    }

    .page-hero .wrap {
      position: relative;
    }

    .page-hero h1 {
      margin-top: 18px;
    }

    .page-hero p.lead {
      margin-left: auto;
      margin-right: auto;
      max-width: 680px;
    }

    .si-sub {
      display: block;
      font-family: "Noto Sans Sinhala", var(--font);
      font-size: 13.5px;
      font-weight: 600;
      color: var(--brand);
    }

    .contact-form-head {
      margin: 0 0 18px;
    }

    .contact-form-head h2 {
      font-size: 20px;
      margin: 0 0 4px;
    }

    @media (max-width: 860px) {
      .page-hero {
        padding: 110px 0 20px;
      }
    }