/* Heebo self-hosted — /fonts/ served from Vercel CDN */
      @font-face { font-family: 'Heebo'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/fonts/heebo-hebrew.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
      @font-face { font-family: 'Heebo'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/fonts/heebo-math.woff2') format('woff2'); unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF; }
      @font-face { font-family: 'Heebo'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/fonts/heebo-symbols.woff2') format('woff2'); unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF; }
      @font-face { font-family: 'Heebo'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/fonts/heebo-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
      @font-face { font-family: 'Heebo'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/fonts/heebo-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; }
      .skip-to-content {
        position: absolute;
        top: -100%;
        right: 0;
        background: var(--accent, #60a5fa);
        color: #fff;
        padding: 0.5rem 1.25rem;
        z-index: 10000;
        font-weight: 700;
        border-radius: 0 0 6px 6px;
        text-decoration: none;
        transition: top 0.15s;
        font-size: 1rem;
      }
      .skip-to-content:focus {
        top: 0;
      }
      .sr-only,
      .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      .pref-group {
        position: absolute;
        left: -5000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }
      .hp-field {
        position: absolute;
        left: -9999px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }
      .section-divider {
        border: none;
        border-top: 1px solid rgba(148, 163, 184, 0.25);
        margin: 3rem auto 2.5rem;
        max-width: 720px;
        width: 90%;
      }
      .light-mode .section-divider {
        border-top-color: rgba(30, 41, 59, 0.2);
      }
      *:focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 3px;
        border-radius: 4px;
      }
      a:focus-visible,
      button:focus-visible,
      input:focus-visible,
      textarea:focus-visible,
      select:focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 3px;
      }
      .a11y-section {
        min-height: auto;
        padding: 40px 24px;
        background: transparent;
      }
      .a11y-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
        padding: 20px 28px;
        background: rgba(59, 130, 246, 0.08);
        border: 1px solid rgba(59, 130, 246, 0.2);
        border-radius: 16px;
        color: var(--accent);
        font-family: var(--font);
        font-size: clamp(1.3rem, 3vw, 1.8rem);
        font-weight: 800;
        cursor: pointer;
        transition:
          background 0.3s,
          border-color 0.3s;
        text-align: right;
      }
      .a11y-toggle-btn:hover {
        background: rgba(59, 130, 246, 0.14);
        border-color: rgba(59, 130, 246, 0.4);
      }
      .a11y-toggle-arrow {
        font-size: 1.4rem;
        transition: transform 0.4s ease;
        margin-right: auto;
        margin-left: 12px;
      }
      .a11y-section.open .a11y-toggle-arrow {
        transform: rotate(180deg);
      }
      .a11y-body {
        max-height: 0;
        overflow: hidden;
        transition:
          max-height 0.5s ease,
          opacity 0.4s ease;
        opacity: 0;
      }
      .a11y-section.open .a11y-body {
        max-height: 6000px;
        opacity: 1;
      }
      .a11y-content {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
        text-align: right;
      }
      .a11y-content h2 {
        font-size: clamp(1.6rem, 3vw, 2.2rem);
        font-weight: 800;
        margin-bottom: 24px;
        color: var(--accent);
      }
      .a11y-content h3 {
        font-size: 1.2rem;
        font-weight: 700;
        margin: 20px 0 10px;
        color: #f1f5f9;
      }
      .a11y-content p,
      .a11y-content li {
        font-size: 1.05rem;
        color: #e2e8f0;
        line-height: 1.8;
        margin-bottom: 8px;
      }
      .a11y-content ul {
        padding-inline-start: 20px;
        list-style: disc;
      }
      .a11y-content a {
        color: var(--accent);
        text-decoration: underline;
      }
      .a11y-content a:hover {
        color: #60a5fa;
      }
      #a11y-widget-btn {
        bottom: 172px;
        left: 28px;
        width: 60px;
        height: 60px;
        background: rgba(59, 130, 246, 0.18);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 50%;
        border: 1px solid rgba(59, 130, 246, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
          0 8px 32px rgba(0, 0, 0, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        z-index: 1001;
        cursor: pointer;
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease,
          border-color 0.3s ease;
        font-size: 1.7rem;
        color: #f8fafc;
        line-height: 1;
      }
      #a11y-widget-btn:hover {
        transform: scale(1.1);
        box-shadow:
          0 12px 40px rgba(0, 0, 0, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.25);
        border-color: rgba(99, 102, 241, 0.55);
      }
      #a11y-widget-panel {
        position: fixed;
        bottom: 314px;
        left: 28px;
        width: 420px;
        background: rgba(15, 23, 42, 0.97);
        border: 1px solid rgba(59, 130, 246, 0.25);
        border-radius: 20px;
        padding: 16px;
        z-index: 1001;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow:
          0 20px 60px rgba(0, 0, 0, 0.5),
          0 0 30px rgba(59, 130, 246, 0.1);
        opacity: 0;
        transform: translateY(20px) scale(0.95);
        pointer-events: none;
        transition:
          opacity 0.3s ease,
          transform 0.3s ease;
      }
      #a11y-widget-panel.open {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
      }
      .a11y-panel-title {
        font-size: 1rem;
        font-weight: 800;
        color: var(--accent);
        margin-bottom: 10px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }
      .a11y-options {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 7px;
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
      }
      .a11y-options::-webkit-scrollbar {
        width: 6px;
      }
      .a11y-options::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
      }
      .a11y-opt {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 10px 4px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.25s ease;
        font-family: var(--font);
        color: #e2e8f0;
        font-size: 0.72rem;
        font-weight: 600;
        text-align: center;
        line-height: 1.2;
      }
      .a11y-opt:hover {
        background: rgba(59, 130, 246, 0.1);
        border-color: rgba(59, 130, 246, 0.3);
      }
      .a11y-opt.active {
        background: rgba(59, 130, 246, 0.15);
        border-color: var(--accent);
        color: var(--accent);
      }
      .a11y-opt-icon {
        font-size: 1.3rem;
        line-height: 1;
      }
      .a11y-reset {
        display: block;
        width: 100%;
        margin-top: 8px;
        padding: 8px;
        background: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.25);
        border-radius: 10px;
        color: #f87171;
        font-family: var(--font);
        font-size: 0.8rem;
        font-weight: 700;
        cursor: pointer;
        transition:
          background 0.2s,
          border-color 0.2s;
        text-align: center;
      }
      .a11y-reset:hover {
        background: rgba(239, 68, 68, 0.2);
        border-color: rgba(239, 68, 68, 0.5);
      }
      body.a11y-high-contrast
        > *:not(#a11y-widget-btn):not(#a11y-widget-panel) {
        filter: contrast(1.5);
      }
      body.a11y-grayscale > *:not(#a11y-widget-btn):not(#a11y-widget-panel) {
        filter: grayscale(1);
      }
      body.a11y-high-contrast.a11y-grayscale
        > *:not(#a11y-widget-btn):not(#a11y-widget-panel) {
        filter: contrast(1.5) grayscale(1);
      }
      body.a11y-highlight-links a {
        outline: 2px solid #fbbf24 !important;
        outline-offset: 2px;
        text-decoration: underline !important;
      }
      body.a11y-big-cursor,
      body.a11y-big-cursor * {
        cursor:
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 4l20 8-8 4-4 8z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"),
          auto !important;
      }
      body.a11y-readable-font,
      body.a11y-readable-font * {
        font-family: Arial, Helvetica, sans-serif !important;
        letter-spacing: 0.5px;
      }
      body.a11y-letter-spacing,
      body.a11y-letter-spacing * {
        letter-spacing: 0.12em !important;
      }
      body.a11y-line-height,
      body.a11y-line-height * {
        line-height: 2 !important;
      }
      body.a11y-light-bg {
        background: #ffffff !important;
        color: #000000 !important;
      }
      body.a11y-light-bg
        *:not(#a11y-widget-btn):not(#a11y-widget-btn *):not(
          #a11y-widget-panel
        ):not(#a11y-widget-panel *) {
        background-color: #ffffff !important;
        color: #000000 !important;
        border-color: #cccccc !important;
      }
      body.a11y-hide-images img,
      body.a11y-hide-images svg,
      body.a11y-hide-images video,
      body.a11y-hide-images div[class*="image"],
      body.a11y-hide-images div[class*="bg"] {
        background-image: none !important;
      }
      body.a11y-hide-images img,
      body.a11y-hide-images svg {
        visibility: hidden !important;
      }
      body.a11y-stop-animations,
      body.a11y-stop-animations *,
      body.a11y-stop-animations::before,
      body.a11y-stop-animations::after,
      body.a11y-stop-animations *::before,
      body.a11y-stop-animations *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
      }
      body.a11y-stop-animations *:hover,
      body.a11y-stop-animations *:hover::before,
      body.a11y-stop-animations *:hover::after {
        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
      }
      body.a11y-stop-animations .feature-card:hover::before,
      body.a11y-stop-animations .buy-now-btn:hover::before,
      body.a11y-stop-animations .nav-cta:hover::before {
        left: -100% !important;
      }
      body.a11y-stop-animations .pricing-card.bestseller:hover::before {
        top: -3px !important;
        left: -3px !important;
        right: -3px !important;
        bottom: -3px !important;
      }
      body.a11y-stop-animations #s1-particles-canvas {
        display: none !important;
      }
      body.a11y-stop-animations #s1 {
        background: #000 !important;
      }
      body.a11y-stop-animations #hero-title .hero-line-1,
      body.a11y-stop-animations #hero-title .hero-line-2 {
        opacity: 1 !important;
        transform: none !important;
        -webkit-text-fill-color: var(--accent) !important;
        filter: none !important;
        text-shadow: none !important;
        background-position: 0% 50% !important;
      }
      body.a11y-stop-animations .scroll-arrow {
        animation: none !important;
        top: 0 !important;
      }
      body.a11y-stop-animations #wa-btn,
      body.a11y-stop-animations #cal-widget-btn,
      body.a11y-stop-animations #a11y-widget-btn,
      body.a11y-stop-animations #mobile-call-btn,
      body.a11y-stop-animations #lang-toggle {
        animation: none !important;
      }
      body.a11y-stop-animations #wa-btn:hover,
      body.a11y-stop-animations #cal-widget-btn:hover,
      body.a11y-stop-animations #a11y-widget-btn:hover,
      body.a11y-stop-animations #mobile-call-btn:hover,
      body.a11y-stop-animations #lang-toggle:hover {
        transform: none !important;
        box-shadow: none !important;
      }
      body.a11y-stop-animations .problem-item,
      body.a11y-stop-animations .stat-card,
      body.a11y-stop-animations .flow-step,
      body.a11y-stop-animations .feature-card {
        opacity: 1 !important;
        transform: none !important;
      }
      body.a11y-stop-animations .feature-card.show {
        animation: fadeInCard 0.4s ease both;
      }
      body.a11y-stop-animations .flow-icon-wrap::after {
        display: none !important;
      }
      body.a11y-stop-animations .flow-badge.flow-badge-notify {
        animation: none !important;
      }
      body.a11y-stop-animations .pricing-card.bestseller::before {
        animation: none !important;
        --premium-angle: 0deg !important;
      }
      body.a11y-stop-animations .pricing-badge.rainbow-badge {
        animation: none !important;
        background-size: 100% 100% !important;
      }
      body.a11y-stop-animations .nav-logo {
        animation: none !important;
      }
      body.a11y-stop-animations .nav-logo:hover {
        transform: none !important;
      }
      body.a11y-stop-animations .nav-cta {
        animation: none !important;
      }
      body.a11y-stop-animations .nav-cta:hover {
        transform: none !important;
        box-shadow: none !important;
      }
      body.a11y-stop-animations .buy-now-btn:hover,
      body.a11y-stop-animations .submit-btn:hover,
      body.a11y-stop-animations .contact-detail:hover,
      body.a11y-stop-animations .footer-social a:hover,
      body.a11y-stop-animations .exit-popup-btn-primary:hover,
      body.a11y-stop-animations .problem-item:hover,
      body.a11y-stop-animations .flow-step:hover,
      body.a11y-stop-animations .faq-item.open,
      body.a11y-stop-animations .tab-btn:hover,
      body.a11y-stop-animations .form-box,
      body.a11y-stop-animations .newsletter-inner,
      body.a11y-stop-animations .pricing-wp-box {
        transform: none !important;
        box-shadow: none !important;
      }
      body.a11y-stop-animations .startup-border,
      body.a11y-stop-animations .startup-border span {
        animation: none !important;
        opacity: 0 !important;
        display: none !important;
      }
      body.a11y-stop-animations #a11y-reading-guide {
        display: none !important;
      }
      html:has(body.a11y-stop-animations) {
        scroll-behavior: auto !important;
      }
      body.a11y-highlight-titles h1,
      body.a11y-highlight-titles h2,
      body.a11y-highlight-titles h3,
      body.a11y-highlight-titles h4,
      body.a11y-highlight-titles h5,
      body.a11y-highlight-titles h6 {
        outline: 2px solid #3b82f6 !important;
        outline-offset: 2px;
      }
      body.a11y-word-spacing,
      body.a11y-word-spacing * {
        word-spacing: 0.25em !important;
      }
      body.a11y-text-align-center,
      body.a11y-text-align-center * {
        text-align: center !important;
      }
      body.a11y-focus-indicator *:focus {
        outline: 4px solid #f59e0b !important;
        outline-offset: 4px;
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.3) !important;
      }
      body.a11y-invert > *:not(#a11y-widget-btn):not(#a11y-widget-panel) {
        filter: invert(1) hue-rotate(180deg);
      }
      body.a11y-invert img,
      body.a11y-invert video,
      body.a11y-invert canvas {
        filter: invert(1) hue-rotate(180deg);
      }
      body.a11y-dyslexia-font,
      body.a11y-dyslexia-font * {
        font-family:
          "Comic Sans MS", "OpenDyslexic", cursive, sans-serif !important;
        word-spacing: 0.15em;
        letter-spacing: 0.05em;
      }
      #a11y-reading-guide {
        display: none;
        position: fixed;
        left: 0;
        width: 100%;
        height: 12px;
        background: rgba(96, 165, 250, 0.25);
        border-top: 2px solid rgba(96, 165, 250, 0.6);
        border-bottom: 2px solid rgba(96, 165, 250, 0.6);
        pointer-events: none;
        z-index: 99999;
        transition: top 0.05s linear;
      }
      body.a11y-reading-guide #a11y-reading-guide {
        display: block;
      }
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      :root {
        --dark: #0f172a;
        --light: #f0f9ff;
        --accent: #60a5fa;
        --accent-glow: rgba(96, 165, 250, 0.4);
        --text-light: #f8fafc;
        --text-muted: #e2e8f0;
        --font: "Heebo", sans-serif;

        /* Glassmorphism upgrade variables */
        --glass-bg: rgba(255, 255, 255, 0.08);
        --glass-bg-hover: rgba(255, 255, 255, 0.12);
        --glass-border: rgba(255, 255, 255, 0.18);
        --glass-border-hover: rgba(255, 255, 255, 0.35);
        --glass-shadow:
          0 8px 32px rgba(0, 0, 0, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.25),
          inset 0 -1px 0 rgba(255, 255, 255, 0.05),
          inset 0 0 20px 10px rgba(255, 255, 255, 0.04);
        --glass-shadow-hover:
          0 20px 40px rgba(0, 0, 0, 0.35), 0 0 30px rgba(96, 165, 250, 0.15),
          inset 0 1px 0 rgba(255, 255, 255, 0.3),
          inset 0 0 20px 10px rgba(255, 255, 255, 0.06);
        --glass-blur: 14px;
        --glass-radius: 20px;

        /* Light mode glass */
        --glass-bg-light: rgba(255, 255, 255, 0.55);
        --glass-bg-light-hover: rgba(255, 255, 255, 0.75);
        --glass-border-light: rgba(255, 255, 255, 0.5);
        --glass-border-light-hover: rgba(255, 255, 255, 0.7);
        --glass-shadow-light:
          0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8),
          inset 0 -1px 0 rgba(255, 255, 255, 0.2),
          inset 0 0 20px 10px rgba(255, 255, 255, 0.6);
        --glass-shadow-light-hover:
          0 20px 50px rgba(59, 130, 246, 0.12), 0 8px 25px rgba(0, 0, 0, 0.06),
          inset 0 1px 0 rgba(255, 255, 255, 0.9),
          inset 0 0 20px 10px rgba(255, 255, 255, 0.8);
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        font-family: var(--font);
        background: var(--dark);
        color: var(--text-light);
        overflow-x: hidden;
        transition:
          background 0.8s ease,
          color 0.8s ease;
        direction: rtl;
        font-size: 18px;
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      body.light {
        background: var(--light);
        color: #1e293b;
        --accent: #2563eb;
        --accent-glow: rgba(37, 99, 235, 0.4);
      }
      #progress-bar {
        position: fixed;
        top: 0;
        right: 0;
        width: 4px;
        height: 100dvh;
        background: rgba(255, 255, 255, 0.1);
        z-index: 999;
      }
      #progress-fill {
        width: 100%;
        height: 0%;
        background: linear-gradient(to bottom, var(--accent), #60a5fa);
        transition: height 0.1s linear;
        border-radius: 0 0 2px 2px;
        box-shadow: 0 0 12px var(--accent-glow);
      }
      #progress-dots {
        display: none;
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 999;
        gap: 8px;
      }
      #back-to-top-btn {
        position: fixed;
        bottom: 244px;
        left: 28px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(96, 165, 250, 0.18);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: #f8fafc;
        border: 1px solid rgba(96, 165, 250, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
          0 8px 32px rgba(0, 0, 0, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        z-index: 1001;
        cursor: pointer;
        transition:
          transform 0.3s ease,
          opacity 0.3s ease,
          box-shadow 0.3s ease,
          border-color 0.3s ease;
        opacity: 0;
        pointer-events: none;
      }
      #back-to-top-btn.visible {
        opacity: 1;
        pointer-events: auto;
      }
      #back-to-top-btn:hover {
        transform: scale(1.1);
        box-shadow:
          0 12px 40px rgba(0, 0, 0, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.25);
        border-color: rgba(96, 165, 250, 0.55);
      }
      #back-to-top-btn svg {
        width: 24px;
        height: 24px;
      }
      .pdot {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transition: background 0.3s;
        cursor: pointer;
        border: none;
        padding: 0;
        outline: none;
      }
      .pdot:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .pdot.active {
        background: var(--accent);
      }
      @media (max-width: 768px) {
        #progress-bar {
          display: none;
        }
        #progress-dots {
          display: none;
        }
        #a11y-widget-panel {
          width: calc(100vw - 40px);
          left: 20px;
        }
        .a11y-options {
          grid-template-columns: repeat(3, 1fr);
        }
        /* Disable scroll-triggered entrance animations on mobile —
           elements render immediately in both scroll directions */
        .section-title,
        .problem-item,
        .switch-wow,
        .switch-sub,
        .feature-card,
        .stat-card,
        .anim,
        .flow-step {
          opacity: 1 !important;
          transform: none !important;
        }
        .feature-card.visible {
          opacity: 1 !important;
          transform: none !important;
        }
      }
      #cal-widget-btn,
      #wa-btn,
      #a11y-widget-btn,
      #lang-toggle {
        position: fixed;
      }
      #cal-widget-btn::after,
      #wa-btn::after,
      #a11y-widget-btn::after,
      #back-to-top-btn::after,
      #lang-toggle::after {
        content: attr(data-tooltip);
        position: absolute;
        right: auto;
        left: calc(100% + 14px);
        top: 50%;
        transform: translateY(-50%) translateX(-6px);
        background: rgba(15, 23, 42, 0.72);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: #f1f5f9;
        padding: 8px 16px;
        border-radius: 10px;
        font-size: 0.85rem;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition:
          opacity 0.3s ease,
          transform 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        z-index: 1001;
        font-family: inherit;
        letter-spacing: 0.02em;
      }
      #cal-widget-btn::before,
      #wa-btn::before,
      #a11y-widget-btn::before,
      #back-to-top-btn::before,
      #lang-toggle::before {
        content: "";
        position: absolute;
        left: calc(100% + 6px);
        top: 50%;
        transform: translateY(-50%);
        border: 6px solid transparent;
        border-left: none;
        border-right-color: rgba(15, 23, 42, 0.72);
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        z-index: 1001;
      }
      #cal-widget-btn:hover::after,
      #wa-btn:hover::after,
      #a11y-widget-btn:hover::after,
      #back-to-top-btn:hover::after,
      #lang-toggle:hover::after {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
      }
      #cal-widget-btn:hover::before,
      #wa-btn:hover::before,
      #a11y-widget-btn:hover::before,
      #back-to-top-btn:hover::before,
      #lang-toggle:hover::before {
        opacity: 1;
      }
      #a11y-widget-btn[aria-expanded="true"]::after,
      #a11y-widget-btn[aria-expanded="true"]::before {
        opacity: 0 !important;
        visibility: hidden;
      }
      /* lang-toggle is on the right side, so tooltip points left */
      #lang-toggle::after {
        left: auto;
        right: calc(100% + 14px);
        transform: translateY(-50%) translateX(6px);
      }
      /* Hide tooltips on touch devices where hover doesn't exist */
      @media (hover: none) and (pointer: coarse) {
        #cal-widget-btn::after,
        #wa-btn::after,
        #a11y-widget-btn::after,
        #back-to-top-btn::after,
        #lang-toggle::after,
        #cal-widget-btn::before,
        #wa-btn::before,
        #a11y-widget-btn::before,
        #back-to-top-btn::before,
        #lang-toggle::before {
          display: none !important;
        }
      }
      /* Hide tooltips on mobile screens (both languages) */
      @media (max-width: 768px) {
        #cal-widget-btn::after,
        #wa-btn::after,
        #a11y-widget-btn::after,
        #back-to-top-btn::after,
        #lang-toggle::after,
        #cal-widget-btn::before,
        #wa-btn::before,
        #a11y-widget-btn::before,
        #back-to-top-btn::before,
        #lang-toggle::before {
          display: none !important;
        }
      }
      #lang-toggle::before {
        left: auto;
        right: calc(100% + 6px);
        border-right: none;
        border-left-color: rgba(15, 23, 42, 0.72);
      }
      #lang-toggle:hover::after {
        transform: translateY(-50%) translateX(0);
      }
      #cal-widget-btn {
        bottom: 100px;
        left: 28px;
        width: 60px;
        height: 60px;
        background: rgba(139, 92, 246, 0.18);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 50%;
        border: 1px solid rgba(139, 92, 246, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
          0 8px 32px rgba(0, 0, 0, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        z-index: 1000;
        text-decoration: none;
        cursor: pointer;
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease,
          border-color 0.3s ease;
        font-size: 1.7rem;
      }
      #cal-widget-btn:hover {
        transform: scale(1.1);
        box-shadow:
          0 12px 40px rgba(0, 0, 0, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.25);
        border-color: rgba(139, 92, 246, 0.55);
      }
      .cal-icon-wrap {
        width: 30px;
        height: 33px;
        background: #ffffff;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        pointer-events: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
        position: relative;
      }
      .cal-icon-month {
        background: #7c3aed;
        color: #fff;
        font-size: 0.42rem;
        font-weight: 800;
        text-align: center;
        padding: 3px 0 2px;
        letter-spacing: 0.07em;
        line-height: 1;
      }
      .cal-icon-day {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.05rem;
        font-weight: 800;
        color: #1e1b4b;
        line-height: 1;
      }
      #wa-btn {
        bottom: 28px;
        left: 28px;
        width: 60px;
        height: 60px;
        background: rgba(37, 211, 102, 0.15);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 50%;
        border: 1px solid rgba(37, 211, 102, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
          0 8px 32px rgba(0, 0, 0, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        z-index: 1000;
        text-decoration: none;
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease,
          border-color 0.3s ease;
      }
      #wa-btn .wa-pulse {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        box-shadow:
          0 4px 35px rgba(37, 211, 102, 0.45),
          0 0 0 10px rgba(37, 211, 102, 0.06);
        opacity: 0.5;
        animation: waPulse 3s infinite;
        pointer-events: none;
      }
      #wa-btn:hover {
        transform: scale(1.1);
        box-shadow:
          0 12px 40px rgba(0, 0, 0, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.25);
        border-color: rgba(37, 211, 102, 0.5);
      }
      #wa-btn svg {
        width: 32px;
        height: 32px;
        fill: white;
      }
      @keyframes waPulse {
        0%,
        100% {
          opacity: 0.6;
        }
        50% {
          opacity: 1;
        }
      }
      section {
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px 24px;
        position: relative;
        contain: layout style paint;
      }
      #s1 {
        background:
          radial-gradient(
            ellipse at 20% 30%,
            rgba(96, 165, 250, 0.08),
            transparent 50%
          ),
          radial-gradient(
            ellipse at 80% 70%,
            rgba(139, 92, 246, 0.06),
            transparent 50%
          ),
          radial-gradient(
            ellipse at 50% 50%,
            rgba(236, 72, 153, 0.04),
            transparent 50%
          ),
          #060d1a;
        text-align: center;
        overflow: hidden;
      }
      #business-info {
        position: relative;
      }
      #business-info > section {
        position: relative;
        z-index: 1;
      }
      #business-info .a11y-body {
        padding-top: 14px;
      }
      #business-info .a11y-content {
        background: linear-gradient(
          180deg,
          rgba(8, 15, 29, 0.92),
          rgba(15, 23, 42, 0.96)
        );
        border: 1px solid rgba(96, 165, 250, 0.18);
        border-radius: 20px;
        padding: 28px 30px;
        box-shadow:
          0 24px 60px rgba(2, 6, 23, 0.45),
          inset 0 1px 0 rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }
      @media (max-width: 768px) {
        #business-info .a11y-content {
          padding: 22px 20px;
          border-radius: 18px;
        }
      }
      .logo {
        font-size: clamp(1.6rem, 4vw, 2.2rem);
        font-weight: 900;
        margin-bottom: 60px;
        letter-spacing: -1px;
      }
      .logo span.blue {
        color: var(--accent);
      }
      .logo span.thin {
        font-weight: 300;
        color: white;
      }
      .logo-line {
        display: block;
        width: 40px;
        height: 2px;
        background: linear-gradient(to left, var(--accent), transparent);
        margin: 6px auto 0;
        box-shadow: 0 0 8px var(--accent);
      }
      #hero-title {
        font-size: clamp(2rem, 6vw, 4.5rem);
        font-weight: 900;
        line-height: 1.2;
        max-width: 800px;
        margin: 0 auto 30px;
        position: relative;
        z-index: 1;
        overflow: hidden;
        min-height: 1.2em;
      }
      #hero-title .hero-line-1 {
        display: block;
        opacity: 1;
        transform: translateX(80px);
        will-change: transform, opacity;
        animation:
          slideFromRight 0.5s ease-out forwards,
          heroGradient 6s linear 0.5s infinite,
          heroGlow 3s ease-in-out 0.5s infinite;
        background: linear-gradient(
          90deg,
          #60a5fa,
          #a78bfa,
          #f472b6,
          #22d3ee,
          #60a5fa
        );
        background-size: 300% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      #hero-title .hero-line-2 {
        display: block;
        opacity: 1;
        transform: translateX(-80px);
        will-change: transform, opacity;
        animation:
          slideFromLeft 0.5s ease-out 0.15s forwards,
          heroGradient 6s linear 0.65s infinite,
          heroGlow 3s ease-in-out 0.65s infinite;
        background: linear-gradient(
          90deg,
          #22d3ee,
          #60a5fa,
          #a78bfa,
          #f472b6,
          #22d3ee
        );
        background-size: 300% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      @keyframes slideFromRight {
        to {
          transform: translateX(0);
        }
      }
      @keyframes slideFromLeft {
        to {
          transform: translateX(0);
        }
      }
      @keyframes heroGradient {
        0% {
          background-position: 0% 50%;
        }
        100% {
          background-position: 300% 50%;
        }
      }
      @keyframes heroGlow {
        0%,
        100% {
          text-shadow:
            0 0 8px rgba(96, 165, 250, 0.4),
            0 0 20px rgba(96, 165, 250, 0.1);
        }
        33% {
          text-shadow:
            0 0 12px rgba(167, 139, 250, 0.5),
            0 0 30px rgba(167, 139, 250, 0.15);
        }
        66% {
          text-shadow:
            0 0 12px rgba(244, 114, 182, 0.5),
            0 0 30px rgba(244, 114, 182, 0.15);
        }
      }
      @keyframes heroPulse {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.015);
        }
      }
      .hero-sub {
        font-size: clamp(1.15rem, 2.5vw, 1.5rem);
        color: #e2e8f0;
        font-weight: 500;
        margin-bottom: 50px;
        line-height: 1.8;
      }
      .scroll-hint {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        opacity: 0.9;
        cursor: default;
      }
      .scroll-hint span {
        font-size: 0.95rem;
        font-weight: 300;
        color: white;
      }
      .scroll-arrow {
        width: 18px;
        height: 18px;
        border-right: 2px solid white;
        border-bottom: 2px solid white;
        transform: rotate(45deg);
        position: relative;
        animation: bounce 1.5s infinite;
      }
      @keyframes bounce {
        0%,
        100% {
          top: 0;
        }
        50% {
          top: 6px;
        }
      }
      #s2 {
        background:
          radial-gradient(
            ellipse at 10% 20%,
            rgba(239, 68, 68, 0.05),
            transparent 50%
          ),
          radial-gradient(
            ellipse at 90% 80%,
            rgba(96, 165, 250, 0.05),
            transparent 50%
          ),
          #0d1526;
      }
      /* ── Who Am I ── */
      #s-about {
        background:
          radial-gradient(
            ellipse at 30% 20%,
            rgba(96, 165, 250, 0.06),
            transparent 50%
          ),
          radial-gradient(
            ellipse at 70% 80%,
            rgba(139, 92, 246, 0.06),
            transparent 50%
          ),
          #0b1220;
      }
      .about-card {
        max-width: 760px;
        width: 100%;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 28px;
        padding: 48px 52px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
      }
      .about-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: linear-gradient(135deg, #60a5fa, #8b5cf6);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.4rem;
        box-shadow: 0 4px 24px rgba(96, 165, 250, 0.35);
        flex-shrink: 0;
        overflow: hidden;
      }
      .about-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .about-bio {
        font-size: clamp(1.05rem, 2vw, 1.25rem);
        color: #cbd5e1;
        line-height: 1.9;
        text-align: center;
        font-weight: 400;
        max-width: 620px;
      }
      .about-cta-line {
        font-size: clamp(1.1rem, 2.2vw, 1.3rem);
        font-weight: 700;
        color: #60a5fa;
        text-align: center;
        line-height: 1.7;
        max-width: 620px;
      }
      .about-linkedin-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
        padding: 14px 28px;
        background: linear-gradient(135deg, #0077b5, #005582);
        color: #fff;
        font-size: 1rem;
        font-weight: 700;
        font-family: var(--font);
        text-decoration: none;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 4px 20px rgba(0, 119, 181, 0.35);
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease,
          background 0.3s ease;
        cursor: pointer;
      }
      .about-linkedin-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 30px rgba(0, 119, 181, 0.5);
        background: linear-gradient(135deg, #0088cc, #006699);
      }
      .about-linkedin-btn svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
      }
      body.light .about-linkedin-btn {
        box-shadow: 0 4px 20px rgba(0, 119, 181, 0.25);
      }
      .about-highlights {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 48px;
      }
      .about-highlight {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 24px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        font-size: clamp(0.9rem, 1.8vw, 1rem);
        font-weight: 500;
        color: #e2e8f0;
        transition:
          border-color 0.3s,
          background 0.3s;
      }
      .about-highlight:hover {
        border-color: rgba(96, 165, 250, 0.35);
        background: rgba(96, 165, 250, 0.06);
      }
      .about-highlight-icon {
        font-size: 1.5rem;
        flex-shrink: 0;
      }
      body.light .about-card {
        background: rgba(255, 255, 255, 0.88);
        border-color: rgba(0, 0, 0, 0.08);
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
      }
      body.light .about-bio {
        color: #475569;
      }
      body.light .about-cta-line {
        color: #2563eb;
      }
      body.light .about-highlight {
        background: rgba(0, 0, 0, 0.03);
        border-color: rgba(0, 0, 0, 0.08);
        color: #334155;
      }
      body.light .about-highlight:hover {
        border-color: rgba(37, 99, 235, 0.3);
        background: rgba(37, 99, 235, 0.05);
      }
      @media (max-width: 640px) {
        .about-card {
          padding: 32px 24px;
        }
        .about-highlights {
          flex-direction: column;
          align-items: stretch;
        }
      }
      .section-title {
        font-size: clamp(2rem, 4.5vw, 3.2rem);
        font-weight: 900;
        margin-bottom: 60px;
        text-align: center;
        opacity: 0;
        transform: translateY(30px);
        transition:
          opacity 0.7s ease 0.1s,
          transform 0.7s ease 0.1s;
        line-height: 1.3;
      }
      .section-title.visible {
        opacity: 1;
        transform: none;
      }
      .section-title.typewriter-text::after {
        content: "|";
        animation: blink-cursor 0.8s infinite;
        color: var(--accent);
        margin-inline-start: 4px;
        font-weight: 300;
      }
      @keyframes blink-cursor {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
      }
      body.a11y-stop-animations .section-title.typewriter-text::after {
        animation: none;
        opacity: 0;
      }
      .problems-list {
        display: flex;
        flex-direction: column;
        gap: 24px;
        max-width: 600px;
        width: 100%;
      }
      .problem-item {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 24px 28px;
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 20px;
        font-size: clamp(1.1rem, 2.5vw, 1.4rem);
        font-weight: 500;
        opacity: 0;
        transform: translateX(40px);
        transition:
          opacity 0.6s ease,
          transform 0.6s ease,
          border-color 0.3s,
          background 0.3s,
          box-shadow 0.3s;
        cursor: default;
        line-height: 1.6;
        color: #f8fafc;
        position: relative;
        z-index: 1;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      }
      .problem-item:hover {
        border-color: rgba(239, 68, 68, 0.4);
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 32px rgba(239, 68, 68, 0.1);
        transition-delay: 0s;
      }
      .problem-item.visible {
        opacity: 1;
        transform: none;
      }
      .problem-item:nth-child(1) {
        transition:
          opacity 0.5s ease 0.05s,
          transform 0.5s ease 0.05s,
          border-color 0.3s,
          background 0.3s;
      }
      .problem-item:nth-child(2) {
        transition:
          opacity 0.5s ease 0.15s,
          transform 0.5s ease 0.15s,
          border-color 0.3s,
          background 0.3s;
      }
      .problem-item:nth-child(3) {
        transition:
          opacity 0.5s ease 0.25s,
          transform 0.5s ease 0.25s,
          border-color 0.3s,
          background 0.3s;
      }
      .problem-item:nth-child(4) {
        transition:
          opacity 0.5s ease 0.35s,
          transform 0.5s ease 0.35s,
          border-color 0.3s,
          background 0.3s;
      }
      .problem-item:nth-child(5) {
        transition:
          opacity 0.5s ease 0.45s,
          transform 0.5s ease 0.45s,
          border-color 0.3s,
          background 0.3s;
      }
      .x-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        background: rgba(239, 68, 68, 0.15);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        border: 1px solid rgba(239, 68, 68, 0.3);
      }
      #s3-build {
        background:
          linear-gradient(135deg, #060d1a 0%, #0f172a 45%, #160d35 100%) top /
            100% 7500px no-repeat,
          #0f172a;
        text-align: center;
        transition:
          background 0.8s,
          color 0.8s;
        position: relative;
        overflow: hidden;
      }
      @keyframes s3-bg-float {
        0%,
        100% {
          transform: translate(0, 0) rotate(0deg);
        }
        33% {
          transform: translate(2%, -1%) rotate(1deg);
        }
        66% {
          transform: translate(-1%, 2%) rotate(-1deg);
        }
      }
      #s3-build.light-mode {
        background:
          linear-gradient(
              135deg,
              #e0f2fe 0%,
              #dbeafe 30%,
              #c7d2fe 60%,
              #e0e7ff 100%
            )
            top / 100% 7500px no-repeat,
          #e0e7ff;
        color: #0f172a;
        --accent: #2563eb;
        --accent-glow: rgba(37, 99, 235, 0.4);
      }

      .switch-wow {
        font-size: clamp(2.2rem, 6vw, 4.5rem);
        font-weight: 900;
        line-height: 1.15;
        max-width: 750px;
        margin: 0 auto 20px;
        opacity: 0;
        transform: scale(0.9);
        transition:
          opacity 0.8s ease,
          transform 0.8s ease;
        position: relative;
        z-index: 1;
      }
      .switch-wow.visible {
        opacity: 1;
        transform: scale(1);
      }
      .switch-sub {
        font-size: clamp(1rem, 2.5vw, 1.25rem);
        font-weight: 400;
        color: var(--text-muted);
        max-width: 600px;
        margin: 0 auto 50px;
        line-height: 1.7;
        opacity: 0;
        transform: translateY(15px);
        transition:
          opacity 0.7s ease 0.3s,
          transform 0.7s ease 0.3s;
        position: relative;
        z-index: 1;
      }
      .switch-sub.visible {
        opacity: 1;
        transform: translateY(0);
      }
      #s3-build.light-mode .switch-sub {
        color: #334155;
      }
      .features-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 18px;
        max-width: 1000px;
        width: 100%;
        position: relative;
        z-index: 1;
      }
      @media (max-width: 768px) {
        .features-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 14px;
        }
      }
      @media (max-width: 480px) {
        .features-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 12px;
        }
      }
      .feature-card {
        padding: 28px 18px 24px;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 20px;
        box-shadow:
          0 8px 32px rgba(0, 0, 0, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.25),
          inset 0 -1px 0 rgba(255, 255, 255, 0.05),
          inset 0 0 20px 10px rgba(255, 255, 255, 0.04);
        text-align: center;
        font-size: 1.1rem;
        font-weight: 700;
        opacity: 0;
        transform: translateY(30px);
        transition:
          opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
          transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
          border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
          box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
          background 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform, opacity;
        color: #f1f5f9;
        cursor: default;
        position: relative;
        overflow: hidden;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
      }
      .feature-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.8),
          transparent
        );
      }
      .feature-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 100%;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.8),
          transparent,
          rgba(255, 255, 255, 0.3)
        );
      }
      .feature-card:hover {
        transform: translateY(-8px) scale(1.02);
        border-color: rgba(255, 255, 255, 0.35);
        box-shadow:
          0 20px 40px rgba(0, 0, 0, 0.35),
          0 0 30px rgba(96, 165, 250, 0.15),
          inset 0 1px 0 rgba(255, 255, 255, 0.3),
          inset 0 0 20px 10px rgba(255, 255, 255, 0.06);
        background: rgba(255, 255, 255, 0.12);
      }
      #s3-build.light-mode .feature-card {
        background: rgba(255, 255, 255, 0.55);
        border-color: rgba(255, 255, 255, 0.5);
        color: #1e293b;
        box-shadow:
          0 8px 32px rgba(0, 0, 0, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.8),
          inset 0 -1px 0 rgba(255, 255, 255, 0.2),
          inset 0 0 20px 10px rgba(255, 255, 255, 0.6);
      }
      #s3-build.light-mode .feature-card:hover {
        background: rgba(255, 255, 255, 0.75);
        border-color: rgba(255, 255, 255, 0.7);
        box-shadow:
          0 20px 50px rgba(59, 130, 246, 0.12),
          0 8px 25px rgba(0, 0, 0, 0.06),
          inset 0 1px 0 rgba(255, 255, 255, 0.9),
          inset 0 0 20px 10px rgba(255, 255, 255, 0.8);
      }
      #s3-build.light-mode .feature-desc {
        color: #475569;
      }

      .feature-card.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .feature-icon-wrap {
        font-size: 1.6rem;
        width: 2.2em;
        height: 2.2em;
        border-radius: 0.6em;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 14px;
        position: relative;
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease;
        flex-shrink: 0;
      }
      .feature-card:hover .feature-icon-wrap {
        transform: scale(1.1) rotate(-3deg);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      }
      .feature-icon-wrap.gradient-blue {
        background: linear-gradient(135deg, #3b82f6, #06b6d4);
      }
      .feature-icon-wrap.gradient-purple {
        background: linear-gradient(135deg, #8b5cf6, #a855f7);
      }
      .feature-icon-wrap.gradient-cyan {
        background: linear-gradient(135deg, #06b6d4, #22d3ee);
      }
      .feature-icon-wrap.gradient-green {
        background: linear-gradient(135deg, #10b981, #34d399);
      }
      .feature-icon-wrap.gradient-orange {
        background: linear-gradient(135deg, #f97316, #fb923c);
      }
      .feature-icon-wrap.gradient-red {
        background: linear-gradient(135deg, #ef4444, #f87171);
      }
      .feature-icon-wrap.gradient-pink {
        background: linear-gradient(135deg, #ec4899, #f472b6);
      }
      .feature-icon-wrap.gradient-indigo {
        background: linear-gradient(135deg, #6366f1, #818cf8);
      }
      .feature-icon-wrap.gradient-teal {
        background: linear-gradient(135deg, #14b8a6, #2dd4bf);
      }
      .feature-icon-wrap.gradient-amber {
        background: linear-gradient(135deg, #f59e0b, #fbbf24);
      }
      .feature-icon-svg {
        width: 1.2em;
        height: 1.2em;
        flex-shrink: 0;
      }
      .feature-card:hover .feature-icon-svg {
        transform: scale(1.1);
      }
      .feature-icon-svg svg {
        width: 100%;
        height: 100%;
      }
      .feature-name {
        font-size: 1.05rem;
        font-weight: 800;
        margin-bottom: 6px;
        text-align: center;
        text-wrap: balance;
        min-height: 2.4em;
        line-height: 1.2;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .feature-desc {
        font-size: 0.85rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.75);
        line-height: 1.5;
        text-align: center;
      }
      .feature-icon {
        font-size: 1em;
      }
      #mobile-call-btn {
        display: none;
      }
      @media (max-width: 768px) {
        #mobile-call-btn {
          position: fixed;
          bottom: 28px;
          right: 28px;
          width: 60px;
          height: 60px;
          background: rgba(59, 130, 246, 0.18);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          border-radius: 50%;
          border: 1px solid rgba(59, 130, 246, 0.35);
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
          z-index: 1000;
          text-decoration: none;
          transition:
            transform 0.3s ease,
            box-shadow 0.3s ease,
            border-color 0.3s ease;
        }
        #mobile-call-btn::after {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: 50%;
          box-shadow:
            0 4px 35px rgba(59, 130, 246, 0.45),
            0 0 0 10px rgba(59, 130, 246, 0.06);
          opacity: 0.5;
          animation: callPulse 3s infinite;
          pointer-events: none;
        }
        #mobile-call-btn:hover {
          transform: scale(1.1);
          box-shadow:
            0 12px 40px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
          border-color: rgba(59, 130, 246, 0.55);
        }
        #mobile-call-btn svg {
          width: 30px;
          height: 30px;
          fill: #f8fafc;
        }
      }
      @keyframes callPulse {
        0%,
        100% {
          opacity: 0.6;
        }
        50% {
          opacity: 1;
        }
      }
      #s4 {
        background:
          radial-gradient(
            ellipse at 30% 10%,
            rgba(96, 165, 250, 0.06),
            transparent 50%
          ),
          radial-gradient(
            ellipse at 70% 90%,
            rgba(139, 92, 246, 0.05),
            transparent 50%
          ),
          linear-gradient(180deg, #060d1a 0%, #0d1526 50%, #0f172a 100%);
        color: white;
        overflow: hidden;
      }
      .flow-container {
        max-width: 1000px;
        width: 100%;
        position: relative;
      }
      .flow-steps {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
        position: relative;
        width: 100%;
      }

      @media (hover: none) {
        .feature-card:hover {
          transform: none !important;
          border-color: rgba(59, 130, 246, 0.22) !important;
          box-shadow: none !important;
          background: #111a2e !important;
        }
        .feature-card:hover::before {
          left: -100% !important;
        }
        #s3-build.light-mode .feature-card:hover {
          background: #ffffff !important;
          border-color: rgba(59, 130, 246, 0.25) !important;
          box-shadow:
            0 4px 24px rgba(59, 130, 246, 0.08),
            0 1px 3px rgba(0, 0, 0, 0.05) !important;
        }
        .buy-now-btn:hover {
          transform: none !important;
          background: linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.22),
            rgba(29, 78, 216, 0.22)
          ) !important;
          border-color: rgba(59, 130, 246, 0.45) !important;
          box-shadow:
            0 8px 20px rgba(37, 99, 235, 0.2),
            inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
        }
        .buy-now-btn:hover::before {
          left: -100% !important;
        }
        .nav-cta:hover {
          transform: none !important;
          background: linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.22),
            rgba(99, 102, 241, 0.22)
          ) !important;
          box-shadow:
            0 4px 16px rgba(59, 130, 246, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
          border-color: rgba(99, 102, 241, 0.45) !important;
        }
        .nav-cta:hover::before {
          left: -100% !important;
        }
        .submit-btn:hover {
          transform: none !important;
          background: linear-gradient(135deg, #1e40af, #1e3a8a) !important;
          box-shadow:
            0 4px 24px rgba(30, 64, 175, 0.55),
            0 1px 0 rgba(255, 255, 255, 0.12) inset !important;
        }
        .problem-item:hover {
          border-color: rgba(255, 255, 255, 0.1) !important;
          background: #0f1626 !important;
        }
        .pricing-card:hover {
          border-color: rgba(255, 255, 255, 0.18) !important;
          background: linear-gradient(145deg, #1e2845, #151b2e) !important;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
        }
        .pricing-card.popular:hover {
          border-color: var(--accent) !important;
          background: linear-gradient(145deg, #233560, #172040) !important;
          box-shadow:
            0 0 30px rgba(59, 130, 246, 0.2),
            0 8px 32px rgba(0, 0, 0, 0.35) !important;
        }
        .pricing-card.bestseller:hover {
          box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45) !important;
        }
        .pricing-card.bestseller:hover::before {
          top: -3px !important;
          left: -3px !important;
          right: -3px !important;
          bottom: -3px !important;
          filter: none !important;
        }
        .flow-step:hover .flow-icon-wrap {
          transform: none !important;
          box-shadow: none !important;
          border-color: rgba(59, 130, 246, 0.35) !important;
        }
        .contact-detail:hover {
          transform: none !important;
          box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06) !important;
        }
      }

      @media (max-width: 900px) {
        .flow-steps {
          grid-template-columns: 1fr;
          gap: 10px;
        }
      }
      .flow-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
        padding: 20px 16px;
        opacity: 0;
        transform: translateY(40px);
        transition:
          opacity 0.7s ease,
          transform 0.7s ease,
          border-color 0.3s,
          background 0.3s,
          box-shadow 0.3s;
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 20px;
        border: 1px solid rgba(59, 130, 246, 0.2);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        z-index: 1;
      }
      .flow-step:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(59, 130, 246, 0.4);
        box-shadow: 0 8px 32px rgba(59, 130, 246, 0.12);
      }
      .flow-step.visible {
        opacity: 1;
        transform: none;
      }
      .flow-step:nth-child(1) {
        transition-delay: 0.1s;
      }
      .flow-step:nth-child(2) {
        transition-delay: 0.35s;
      }
      .flow-step:nth-child(3) {
        transition-delay: 0.6s;
      }
      .flow-step:nth-child(4) {
        transition-delay: 0.85s;
      }
      .flow-step:nth-child(5) {
        transition-delay: 1.1s;
      }
      .flow-step-number {
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.7rem;
        font-weight: 800;
        color: var(--accent);
        letter-spacing: 2px;
        text-transform: uppercase;
      }
      .flow-icon-wrap {
        font-size: 2.2rem;
        width: 2.6em;
        height: 2.6em;
        border-radius: 50%;
        background: #0f1f3d;
        border: 2px solid rgba(59, 130, 246, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-bottom: 20px;
        margin-top: 20px;
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease,
          border-color 0.3s ease;
        flex-shrink: 0;
      }
      .flow-step:hover .flow-icon-wrap {
        transform: scale(1.08);
        box-shadow:
          0 0 30px rgba(59, 130, 246, 0.3),
          0 0 60px rgba(59, 130, 246, 0.1);
        border-color: var(--accent);
      }
      .flow-icon-wrap::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 1px solid rgba(59, 130, 246, 0.1);
        animation: flowPulse 3s ease-in-out infinite;
      }
      .flow-step:nth-child(1) .flow-icon-wrap::after {
        animation-delay: 0s;
      }
      .flow-step:nth-child(2) .flow-icon-wrap::after {
        animation-delay: 0.5s;
      }
      .flow-step:nth-child(3) .flow-icon-wrap::after {
        animation-delay: 1s;
      }
      .flow-step:nth-child(4) .flow-icon-wrap::after {
        animation-delay: 1.5s;
      }
      @keyframes flowPulse {
        0%,
        100% {
          transform: scale(1);
          opacity: 0.5;
        }
        50% {
          transform: scale(1.18);
          opacity: 0;
        }
      }
      .flow-icon {
        font-size: 1em;
        line-height: 1;
      }
      .flow-step-title {
        font-size: 1.15rem;
        font-weight: 800;
        margin-bottom: 8px;
        line-height: 1.4;
        color: white;
        text-align: center;
      }
      .flow-step-desc {
        font-size: 1.05rem;
        color: #cbd5e1;
        font-weight: 500;
        line-height: 1.6;
        max-width: 220px;
      }
      .flow-badge {
        display: inline-block;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 700;
        margin-top: 10px;
        letter-spacing: 0.5px;
        position: relative;
      }
      .flow-badge-search {
        background: rgba(34, 197, 94, 0.12);
        color: #22c55e;
        border: 1px solid rgba(34, 197, 94, 0.2);
      }
      .flow-badge-form {
        background: rgba(59, 130, 246, 0.12);
        color: #60a5fa;
        border: 1px solid rgba(59, 130, 246, 0.2);
      }
      .flow-badge-notify {
        background: rgba(251, 191, 36, 0.12);
        color: #fbbf24;
        border: 1px solid rgba(251, 191, 36, 0.2);
        animation: notifyPulse 2s ease-in-out infinite;
      }
      @keyframes notifyPulse {
        0%,
        100% {
          opacity: 0;
        }
        50% {
          opacity: 1;
        }
      }
      .flow-badge-notify::after {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.12);
        opacity: 0;
        animation: notifyPulse 2s ease-in-out infinite;
        pointer-events: none;
      }
      .flow-badge-save {
        background: rgba(168, 85, 247, 0.12);
        color: #a855f7;
        border: 1px solid rgba(168, 85, 247, 0.2);
      }
      .flow-subtitle {
        font-size: clamp(1.1rem, 2.2vw, 1.3rem);
        color: #e2e8f0;
        text-align: center;
        max-width: 650px;
        margin: 0 auto 50px;
        font-weight: 500;
        line-height: 1.8;
      }
      /* ── Testimonials ── */
      #s5-social {
        position: relative;
        background:
          radial-gradient(
            ellipse at 20% 80%,
            rgba(96, 165, 250, 0.07),
            transparent 55%
          ),
          radial-gradient(
            ellipse at 80% 20%,
            rgba(168, 85, 247, 0.05),
            transparent 55%
          ),
          #0f172a;
      }
      .wa-icon {
        font-size: 1.4rem;
      }
      #s5 {
        background:
          radial-gradient(
            ellipse at 15% 85%,
            rgba(96, 165, 250, 0.06),
            transparent 50%
          ),
          radial-gradient(
            ellipse at 85% 15%,
            rgba(236, 72, 153, 0.04),
            transparent 50%
          ),
          #0f172a;
        color: white;
      }
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        max-width: 800px;
        width: 100%;
        margin-bottom: 60px;
      }
      @media (max-width: 600px) {
        .stats-grid {
          grid-template-columns: 1fr;
          gap: 20px;
        }
      }
      .stat-card {
        text-align: center;
        padding: 40px 24px;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 20px;
        box-shadow:
          0 8px 32px rgba(0, 0, 0, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.25),
          inset 0 -1px 0 rgba(255, 255, 255, 0.05),
          inset 0 0 20px 10px rgba(255, 255, 255, 0.04);
        opacity: 0;
        transform: translateY(40px);
        transition:
          opacity 0.7s ease,
          transform 0.7s ease;
        position: relative;
        overflow: hidden;
        z-index: 1;
      }
      .stat-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.8),
          transparent
        );
      }
      .stat-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 100%;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.8),
          transparent,
          rgba(255, 255, 255, 0.3)
        );
      }
      .stat-card.visible {
        opacity: 1;
        transform: none;
      }
      .stat-card:nth-child(1) {
        transition-delay: 0.1s;
      }
      .stat-card:nth-child(2) {
        transition-delay: 0.25s;
      }
      .stat-card:nth-child(3) {
        transition-delay: 0.4s;
      }
      .stat-num {
        font-size: clamp(2.5rem, 6vw, 4rem);
        font-weight: 900;
        color: var(--accent);
        line-height: 1;
        margin-bottom: 10px;
      }
      .stat-label {
        font-size: 1.15rem;
        color: #e2e8f0;
        font-weight: 700;
      }
      #contact {
        background: #f0f9ff;
        color: #1e293b;
        --accent: #2563eb;
        --accent-glow: rgba(37, 99, 235, 0.4);
      }
      .contact-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        max-width: 900px;
        width: 100%;
        align-items: start;
      }
      @media (max-width: 768px) {
        .contact-wrap {
          grid-template-columns: 1fr;
          gap: 40px;
        }
      }
      .contact-info {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      .my-photo-wrap {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 10px;
      }
      .my-photo {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid var(--accent);
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.15);
      }
      .my-name {
        font-weight: 900;
        font-size: 1.2rem;
      }
      .my-title {
        font-size: 0.85rem;
        color: #475569;
        margin-top: 4px;
      }
      .contact-detail {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 20px;
        background: rgba(255, 255, 255, 0.65);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 14px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
        text-decoration: none;
        color: #1e293b;
        font-weight: 600;
        transition:
          transform 0.2s,
          box-shadow 0.2s,
          background 0.2s,
          border-color 0.2s;
      }
      .contact-detail:hover {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, 0.85);
        border-color: rgba(255, 255, 255, 0.7);
        box-shadow: 0 6px 20px rgba(15, 23, 42, 0.1);
      }
      .contact-detail-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        background: linear-gradient(135deg, var(--accent), #60a5fa);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        flex-shrink: 0;
      }
      .form-box {
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 24px;
        padding: 36px 32px;
        box-shadow:
          0 10px 40px rgba(15, 23, 42, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.8);
      }
      .form-question {
        font-size: 1.15rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 6px;
      }
      .form-question-sub {
        font-size: 1rem;
        color: #334155;
        margin-bottom: 24px;
        line-height: 1.6;
      }
      .form-group {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 16px;
      }
      .form-group label {
        font-size: 0.95rem;
        font-weight: 700;
        color: #334155;
        text-align: right;
      }
      .form-group input,
      .form-group textarea {
        padding: 14px 18px;
        border: 2px solid rgba(226, 232, 240, 0.7);
        border-radius: 12px;
        font-family: var(--font);
        font-size: 1.05rem;
        direction: rtl;
        outline: none;
        transition:
          border-color 0.3s,
          box-shadow 0.3s,
          background 0.3s;
        color: #1e293b;
        background: rgba(248, 250, 252, 0.8);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
      }
      .form-group input:focus,
      .form-group textarea:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
        background: rgba(255, 255, 255, 0.95);
      }
      .form-group textarea {
        resize: vertical;
        min-height: 100px;
      }
      .submit-btn {
        width: 100%;
        padding: 16px;
        background: linear-gradient(
          135deg,
          rgba(30, 64, 175, 0.9),
          rgba(30, 58, 138, 0.9)
        );
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 14px;
        font-family: var(--font);
        font-size: 1.1rem;
        font-weight: 800;
        cursor: pointer;
        transition:
          transform 0.2s,
          box-shadow 0.2s,
          opacity 0.2s,
          background 0.2s;
        margin-top: 8px;
        box-shadow:
          0 4px 24px rgba(30, 64, 175, 0.45),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
        letter-spacing: 0.02em;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }
      .submit-btn:hover {
        transform: translateY(-2px);
        background: linear-gradient(
          135deg,
          rgba(37, 99, 235, 0.95),
          rgba(30, 64, 175, 0.95)
        );
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow:
          0 8px 32px rgba(30, 64, 175, 0.6),
          inset 0 1px 0 rgba(255, 255, 255, 0.3);
      }
      .submit-btn:active {
        transform: translateY(0);
      }
      .submit-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
      .form-msg {
        text-align: center;
        padding: 14px;
        border-radius: 12px;
        font-weight: 600;
        margin-top: 14px;
        display: none;
      }
      .form-msg.success {
        background: #dcfce7;
        color: #166534;
        display: block;
      }
      .form-msg.error {
        background: #fee2e2;
        color: #991b1b;
        display: block;
      }
      .field-error {
        font-size: 0.85rem;
        color: #ef4444;
        font-weight: 600;
        margin-top: 2px;
        min-height: 0;
        display: block;
        text-align: right;
      }
      .marketing-consent-note {
        margin: 10px auto 0;
        max-width: 600px;
        font-size: 0.78rem;
        line-height: 1.6;
        color: #64748b;
        text-align: center;
      }
      .newsletter-form-wrap {
        flex: 1;
        min-width: 0;
      }
      .newsletter-box {
        margin-inline: auto;
      }
      .newsletter-inner {
        display: flex;
        align-items: center;
        gap: 32px;
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 24px;
        padding: 32px 36px;
        box-shadow:
          0 10px 40px rgba(15, 23, 42, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.8);
      }
      .newsletter-text {
        flex-shrink: 0;
      }
      .newsletter-text h3 {
        margin: 0 0 6px 0;
        font-size: 1.15rem;
        font-weight: 800;
        color: #1e293b;
      }
      .newsletter-text p {
        margin: 0;
        font-size: 0.95rem;
        color: #475569;
        line-height: 1.5;
        max-width: 260px;
      }
      .newsletter-pill-wrap {
        display: flex;
        gap: 10px;
      }
      .newsletter-pill-wrap input {
        flex: 1;
        min-width: 0;
        padding: 14px 18px;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        font-family: var(--font);
        font-size: 1.05rem;
        direction: rtl;
        outline: none;
        transition:
          border-color 0.3s,
          box-shadow 0.3s;
        color: #1e293b;
        background: #f8fafc;
        box-sizing: border-box;
      }
      .newsletter-pill-wrap input:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
        background: white;
      }
      .newsletter-pill-wrap button {
        flex-shrink: 0;
        padding: 14px 28px;
        background: linear-gradient(135deg, #1e40af, #1e3a8a);
        color: #fff;
        border: none;
        border-radius: 12px;
        font-family: var(--font);
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        transition:
          transform 0.2s,
          box-shadow 0.2s;
        white-space: nowrap;
        box-shadow: 0 4px 24px rgba(30, 64, 175, 0.55);
      }
      .newsletter-pill-wrap button:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(30, 64, 175, 0.7);
      }
      .newsletter-pill-wrap button:active {
        transform: translateY(0);
      }
      .nl-consent {
        margin: 10px 0 0;
        font-size: 0.82rem;
        color: #64748b;
        text-align: center;
      }
      @media (max-width: 768px) {
        .newsletter-inner {
          flex-direction: column;
          align-items: stretch;
          padding: 24px;
          gap: 20px;
        }
        .newsletter-text p {
          max-width: 100%;
        }
        .newsletter-pill-wrap {
          flex-direction: column;
        }
        .newsletter-pill-wrap button {
          width: 100%;
        }
      }
      #pricing {
        background: #090e1c;
        color: white;
        position: relative;
      }
      #pricing::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse 90% 55% at 50% -5%,
            rgba(99, 102, 241, 0.1),
            transparent
          ),
          radial-gradient(
            ellipse 55% 45% at 85% 95%,
            rgba(6, 182, 212, 0.07),
            transparent
          ),
          radial-gradient(
            ellipse 45% 55% at 5% 55%,
            rgba(59, 130, 246, 0.06),
            transparent
          );
        pointer-events: none;
      }
      .pricing-grid {
        display: flex;
        justify-content: center;
        gap: 24px;
        max-width: 1020px;
        width: 100%;
        margin-bottom: 48px;
        flex-wrap: wrap;
        align-items: stretch;
      }
      .pricing-grid .pricing-card {
        max-width: 450px;
        width: 100%;
      }
      .pricing-card {
        background: rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 24px;
        box-shadow:
          0 4px 30px rgba(0, 0, 0, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
        padding: 38px 30px;
        text-align: center;
        position: relative;
        overflow: hidden;
        transition:
          transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1),
          box-shadow 0.35s ease,
          border-color 0.35s ease;
        z-index: 1;
        display: flex;
        flex-direction: column;
      }
      .pricing-card:hover {
        transform: translateY(-8px);
        border-color: rgba(255, 255, 255, 0.22);
        box-shadow:
          0 24px 56px rgba(0, 0, 0, 0.45),
          inset 0 1px 0 rgba(255, 255, 255, 0.12);
      }
      .pricing-card.popular {
        border-color: rgba(99, 102, 241, 0.35);
        background: linear-gradient(
          155deg,
          rgba(99, 102, 241, 0.07) 0%,
          rgba(59, 130, 246, 0.04) 100%
        );
      }
      .pricing-card.popular::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #6366f1, #3b82f6, #06b6d4);
        border-radius: 24px 24px 0 0;
      }
      .pricing-card.popular:hover {
        border-color: rgba(99, 102, 241, 0.55);
        box-shadow:
          0 24px 56px rgba(99, 102, 241, 0.18),
          0 0 0 1px rgba(99, 102, 241, 0.15),
          inset 0 1px 0 rgba(255, 255, 255, 0.12);
      }
      .pricing-card.bestseller {
        border: none;
        padding: 40px 32px;
        position: relative;
        overflow: visible;
        background: linear-gradient(
          155deg,
          rgba(15, 25, 52, 0.98) 0%,
          rgba(10, 17, 38, 0.99) 100%
        );
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow:
          0 8px 48px rgba(0, 0, 0, 0.5),
          inset 0 1px 0 rgba(255, 255, 255, 0.06);
        z-index: 2;
      }
      .pricing-card.bestseller::before {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: 27px;
        background: conic-gradient(
          from var(--premium-angle, 0deg),
          #3b82f6 0%,
          #8b5cf6 30%,
          #06b6d4 55%,
          #6366f1 75%,
          #3b82f6 100%
        );
        z-index: -1;
        animation: premium-border-rotate 5s linear infinite;
        opacity: 0.85;
      }
      .pricing-card.bestseller::after {
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        right: 1px;
        bottom: 1px;
        border-radius: 25px;
        background: linear-gradient(155deg, #0f1934, #090e1c);
        z-index: -1;
      }
      .pricing-card.bestseller:hover {
        box-shadow: 0 20px 64px rgba(59, 130, 246, 0.28);
      }
      .pricing-card.bestseller:hover::before {
        opacity: 1;
        filter: brightness(1.15);
      }
      .pricing-card.popular .buy-now-btn {
        margin-top: auto;
      }
      @keyframes premium-border-rotate {
        from {
          --premium-angle: 0deg;
        }
        to {
          --premium-angle: 360deg;
        }
      }
      @property --premium-angle {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
      }

      /* ── Bestseller card – enhanced internals ── */
      .pricing-card.bestseller .pricing-type {
        font-size: 1.5rem;
        font-weight: 900;
        letter-spacing: -0.3px;
        background: linear-gradient(
          135deg,
          #ffffff 0%,
          #bfdbfe 55%,
          #93c5fd 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 8px;
      }
      .pricing-card.bestseller .pricing-type-sub {
        font-size: 0.88rem;
        color: rgba(148, 163, 184, 0.7);
        margin-bottom: 20px;
      }
      .pricing-card.bestseller .pricing-amount {
        display: none;
      }
      .pricing-card.bestseller .pricing-amount-note {
        display: inline-block;
        font-size: 1rem;
        font-weight: 800;
        color: #fbbf24;
        background: rgba(251, 191, 36, 0.1);
        border: 1.5px solid rgba(251, 191, 36, 0.28);
        border-radius: 30px;
        padding: 7px 22px;
        margin-top: 4px;
        letter-spacing: 0.2px;
      }
      .pricing-card.bestseller .pricing-period {
        display: inline-block;
        font-size: 0.78rem;
        font-weight: 700;
        color: #34d399;
        background: rgba(52, 211, 153, 0.1);
        border: 1px solid rgba(52, 211, 153, 0.28);
        border-radius: 20px;
        padding: 4px 14px;
        margin-top: 10px;
        letter-spacing: 0.4px;
      }
      .pricing-card.bestseller .pricing-includes {
        margin-top: 20px;
        gap: 8px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
      }
      .pricing-card.bestseller .pricing-includes li {
        font-size: 0.92rem;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
        gap: 10px;
        padding: 2px 0;
      }
      .pricing-card.bestseller .pricing-includes li::before {
        content: "✓";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        width: 20px;
        height: 20px;
        background: rgba(52, 211, 153, 0.12);
        border: 1.5px solid rgba(52, 211, 153, 0.4);
        border-radius: 50%;
        font-size: 0.6rem;
        font-weight: 900;
        color: #34d399;
        box-shadow: 0 0 6px rgba(52, 211, 153, 0.2);
        flex-shrink: 0;
      }
      .pricing-card.bestseller .buy-now-btn {
        margin-top: auto;
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        border: none;
        box-shadow:
          0 8px 28px rgba(37, 99, 235, 0.5),
          inset 0 1px 0 rgba(255, 255, 255, 0.18);
        font-size: 1.1rem;
        font-weight: 800;
        letter-spacing: 0.2px;
        max-width: 100%;
        animation: none;
      }
      .pricing-card.bestseller .buy-now-btn:hover {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        border: none;
        box-shadow:
          0 14px 38px rgba(37, 99, 235, 0.6),
          0 0 40px rgba(96, 165, 250, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.22);
      }
      .pricing-badge {
        position: absolute;
        top: -14px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        color: white;
        font-size: 0.72rem;
        font-weight: 800;
        padding: 5px 18px;
        border-radius: 20px;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 16px rgba(37, 99, 235, 0.5);
        white-space: nowrap;
        z-index: 2;
      }
      .pricing-badge.rainbow-badge {
        background: linear-gradient(135deg, #2563eb, #7c3aed, #0891b2);
        background-size: 200% 200%;
        animation: badge-shimmer 3.5s ease infinite;
        font-size: 0.75rem;
        padding: 6px 22px;
        box-shadow: 0 4px 18px rgba(37, 99, 235, 0.45);
      }
      @keyframes badge-shimmer {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }
      .pricing-type {
        font-size: 1.38rem;
        font-weight: 800;
        margin-bottom: 8px;
        color: #f1f5f9;
        letter-spacing: -0.2px;
      }
      .pricing-type-sub {
        font-size: 0.88rem;
        color: rgba(255, 255, 255, 0.55);
        margin-bottom: 18px;
        font-weight: 500;
        line-height: 1.55;
      }
      .pricing-amount {
        font-size: clamp(2rem, 5vw, 2.8rem);
        font-weight: 900;
        color: #ffffff;
        line-height: 1.1;
      }
      .pricing-amount span {
        font-size: 1rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.75);
      }
      .pricing-amount-note {
        display: inline-block;
        font-size: 0.9rem;
        font-weight: 700;
        color: #fbbf24;
        background: rgba(251, 191, 36, 0.1);
        border: 1px solid rgba(251, 191, 36, 0.25);
        border-radius: 30px;
        padding: 5px 18px;
        margin-top: 8px;
        letter-spacing: 0.2px;
      }
      .pricing-period {
        display: inline-block;
        font-size: 0.78rem;
        font-weight: 700;
        color: #34d399;
        background: rgba(52, 211, 153, 0.1);
        border: 1px solid rgba(52, 211, 153, 0.25);
        border-radius: 20px;
        padding: 3px 13px;
        margin-top: 9px;
      }
      .pricing-includes {
        margin-top: 18px;
        text-align: right;
        display: flex;
        flex-direction: column;
        gap: 7px;
        flex: 1;
      }
      .pricing-includes li {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.82);
        font-weight: 500;
        list-style: none;
        display: flex;
        align-items: flex-start;
        gap: 9px;
      }
      .pricing-includes li::before {
        content: "✓";
        color: #34d399;
        font-weight: 800;
        flex-shrink: 0;
      }
      .pricing-wp-box {
        max-width: 860px;
        width: 100%;
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-right: 3px solid rgba(139, 92, 246, 0.6);
        border-radius: 18px;
        padding: 28px 36px;
        display: flex;
        align-items: center;
        gap: 28px;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 36px;
        position: relative;
        z-index: 1;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
        transition:
          border-color 0.3s ease,
          box-shadow 0.3s ease;
      }
      .pricing-wp-box:hover {
        border-color: rgba(255, 255, 255, 0.16);
        border-right-color: rgba(139, 92, 246, 0.8);
        box-shadow: 0 8px 36px rgba(139, 92, 246, 0.12);
      }
      .pricing-wp-content {
        flex: 1;
        min-width: 260px;
        text-align: right;
      }
      .pricing-wp-title {
        font-size: 1.15rem;
        font-weight: 800;
        color: #f1f5f9;
        margin-bottom: 8px;
      }
      .pricing-wp-desc {
        font-size: 0.92rem;
        color: rgba(255, 255, 255, 0.62);
        line-height: 1.65;
        margin: 0;
      }
      .pricing-wp-amount {
        font-size: 2rem;
        font-weight: 900;
        color: #fbbf24;
        margin: 8px 0 4px;
      }
      .compare-section {
        max-width: 860px;
        width: 100%;
        margin-bottom: 32px;
        overflow-x: auto;
        border-radius: 18px;
      }
      .compare-title {
        font-size: 1.28rem;
        font-weight: 800;
        color: #e2e8f0;
        text-align: center;
        margin-bottom: 18px;
        letter-spacing: -0.2px;
      }
      .compare-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 16px;
        overflow: hidden;
        font-size: 0.93rem;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
      }
      .compare-table thead th {
        padding: 16px 20px;
        font-weight: 800;
        font-size: 0.95rem;
        letter-spacing: -0.1px;
      }
      .compare-table thead th:first-child {
        background: rgba(15, 22, 45, 0.95);
        color: #64748b;
        text-align: center;
        font-weight: 600;
      }
      .compare-table thead th:nth-child(2) {
        background: linear-gradient(135deg, #1d4ed8, #1e40af);
        color: #fff;
        text-align: center;
      }
      .compare-table thead th:nth-child(3) {
        background: rgba(20, 28, 55, 0.95);
        color: #fff;
        text-align: center;
        font-weight: 600;
      }
      .compare-table tbody tr td {
        padding: 13px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        color: #e2e8f0;
        vertical-align: middle;
        background: rgba(10, 15, 30, 0.8);
      }
      .compare-table tbody tr:nth-child(even) td {
        background: rgba(14, 20, 40, 0.85);
      }
      .compare-table tbody tr td:first-child {
        font-weight: 600;
        color: #94a3b8;
        text-align: center;
      }
      .compare-table tbody tr td:nth-child(2) {
        text-align: center;
        font-weight: 600;
        color: #93c5fd;
        background: rgba(15, 31, 61, 0.9);
      }
      .compare-table tbody tr:nth-child(even) td:nth-child(2) {
        background: rgba(13, 27, 56, 0.9);
      }
      .compare-table tbody tr td:nth-child(3) {
        text-align: center;
        color: #93c5fd;
      }
      .compare-table tbody tr:last-child td {
        border-bottom: none;
      }
      .compare-table tbody tr:last-child td:first-child {
        border-radius: 0 0 0 16px;
      }
      .compare-table tbody tr:last-child td:last-child {
        border-radius: 0 0 16px 0;
      }
      @media (max-width: 768px) {
        .compare-table {
          font-size: 0.82rem;
        }
        .compare-table thead th,
        .compare-table tbody tr td {
          padding: 11px 12px;
        }
        .pricing-wp-box {
          flex-direction: column;
          text-align: center;
          border-right: none;
          border-bottom: 3px solid rgba(139, 92, 246, 0.6);
        }
        .pricing-wp-content {
          text-align: center;
        }
      }
      @media (max-width: 480px) {
        .compare-table {
          font-size: 0.75rem;
        }
        .compare-table thead th,
        .compare-table tbody tr td {
          padding: 9px 8px;
        }
      }
      .light .compare-title {
        color: #1e293b;
      }
      .light .compare-table thead th:first-child {
        background: #f1f5f9;
        color: #64748b;
      }
      .light .compare-table thead th:nth-child(3) {
        background: #e2e8f0;
        color: #1d4ed8;
      }
      .light .compare-table tbody tr td {
        background: #ffffff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        color: #334155;
      }
      .light .compare-table tbody tr:nth-child(even) td {
        background: #f8fafc;
      }
      .light .compare-table tbody tr td:first-child {
        color: #475569;
      }
      .light .compare-table tbody tr td:nth-child(2) {
        color: #1d4ed8;
        background: rgba(37, 99, 235, 0.06);
        font-weight: 700;
      }
      .light .compare-table tbody tr:nth-child(even) td:nth-child(2) {
        background: rgba(37, 99, 235, 0.04);
      }
      .light .compare-table tbody tr td:nth-child(3) {
        color: #1d4ed8;
      }
      body.light .pricing-wp-title {
        color: #1e293b;
      }
      body.light .pricing-wp-desc {
        color: #475569;
      }
      body.light .pricing-wp-box {
        background: rgba(0, 0, 0, 0.02);
        border-color: rgba(0, 0, 0, 0.08);
        border-right-color: rgba(139, 92, 246, 0.5);
      }
      .pricing-note {
        max-width: 850px;
        width: 100%;
        text-align: center;
        margin-top: 20px;
        font-size: 1.05rem;
        color: rgba(255, 255, 255, 0.8);
        line-height: 1.8;
        font-weight: 500;
      }
      .buy-now-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 28px auto 0;
        padding: 16px 36px;
        background: linear-gradient(
          135deg,
          rgba(59, 130, 246, 0.22),
          rgba(29, 78, 216, 0.22)
        );
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        color: #ffffff;
        font-size: 1.15rem;
        font-weight: 800;
        border: 1px solid rgba(59, 130, 246, 0.4);
        border-radius: 50px;
        cursor: pointer;
        text-decoration: none;
        box-shadow:
          0 6px 18px rgba(37, 99, 235, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        width: 100%;
        max-width: 100%;
        position: relative;
        overflow: hidden;
        z-index: 1;
        animation: ctaPulse 2.5s ease-in-out infinite;
        will-change: box-shadow;
      }
      .buy-now-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(
          to right,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.4) 50%,
          rgba(255, 255, 255, 0) 100%
        );
        transform: skewX(-25deg);
        transition: all 0.7s ease;
        pointer-events: none;
      }
      .buy-now-btn:hover::before {
        left: 150%;
      }
      .buy-now-btn:hover {
        transform: translateY(-4px) scale(1.03);
        background: linear-gradient(
          135deg,
          rgba(59, 130, 246, 0.38),
          rgba(29, 78, 216, 0.38)
        );
        border-color: rgba(59, 130, 246, 0.7);
        box-shadow:
          0 12px 32px rgba(37, 99, 235, 0.35),
          inset 0 1px 1px rgba(255, 255, 255, 0.3);
      }
      .buy-now-btn:active {
        transform: translateY(1px) scale(0.98);
        box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
      }
      #faq {
        background: linear-gradient(180deg, #080d18 0%, #0f172a 100%);
        color: white;
        min-height: auto;
        padding: 80px 24px;
        position: relative;
        overflow: hidden;
      }
      #faq::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(96, 165, 250, 0.025) 1px, transparent 1px),
          linear-gradient(90deg, rgba(96, 165, 250, 0.025) 1px, transparent 1px);
        background-size: 48px 48px;
        pointer-events: none;
      }
      .faq-tabs {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 44px;
        direction: rtl;
        position: relative;
        z-index: 1;
      }
      .faq-tab {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: rgba(255, 255, 255, 0.78);
        font-family: var(--font);
        font-size: 0.82rem;
        font-weight: 600;
        padding: 7px 16px;
        border-radius: 100px;
        cursor: pointer;
        transition: all 0.22s ease;
        white-space: nowrap;
      }
      .faq-tab:hover {
        border-color: rgba(96, 165, 250, 0.6);
        color: #fff;
        background: rgba(96, 165, 250, 0.12);
      }
      .faq-tab.active {
        background: rgba(96, 165, 250, 0.22);
        border-color: var(--accent);
        color: var(--accent);
        box-shadow: 0 0 18px rgba(96, 165, 250, 0.25);
      }
      .faq-wrap {
        max-width: 720px;
        width: 100%;
        margin: 0 auto;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        position: relative;
        z-index: 1;
      }
      .faq-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        overflow: hidden;
        position: relative;
        background: transparent;
        transition: background 0.3s ease;
      }
      .faq-item.faq-hidden {
        display: none;
      }
      .faq-item::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(to bottom, var(--accent), #818cf8);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 0 0 0 3px;
      }
      .faq-item.open::after {
        transform: scaleY(1);
      }
      .faq-item.open {
        background: rgba(96, 165, 250, 0.04);
      }
      .faq-q {
        width: 100%;
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.78);
        font-family: var(--font);
        font-size: 1.08rem;
        font-weight: 700;
        text-align: right;
        padding: 22px 24px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        direction: rtl;
        transition: color 0.2s ease;
      }
      .faq-q:hover {
        color: white;
      }
      .faq-item.open .faq-q {
        color: var(--accent);
      }
      .faq-arrow {
        width: 26px;
        height: 26px;
        min-width: 26px;
        border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, 0.18);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
        flex-shrink: 0;
        transition:
          transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
          background 0.3s,
          border-color 0.3s,
          color 0.3s;
        color: rgba(255, 255, 255, 0.45);
      }
      .faq-item.open .faq-arrow {
        transform: rotate(45deg);
        background: var(--accent);
        border-color: var(--accent);
        color: #0a1628;
      }
      .faq-a {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .faq-item.open .faq-a {
        max-height: 300px;
      }
      .faq-a-inner {
        padding: 4px 24px 24px;
        color: rgba(226, 232, 240, 0.7);
        font-size: 1rem;
        line-height: 1.9;
        direction: rtl;
        text-align: right;
        background: transparent;
        border: none;
        border-radius: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      body.light #faq {
        background: linear-gradient(180deg, #e8f4ff 0%, var(--light) 100%);
        color: #1e293b;
      }
      body.light #faq::before {
        background-image:
          linear-gradient(rgba(37, 99, 235, 0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(37, 99, 235, 0.04) 1px, transparent 1px);
      }
      body.light .faq-wrap {
        border-top-color: rgba(0, 0, 0, 0.08);
      }
      body.light .faq-item {
        border-bottom-color: rgba(0, 0, 0, 0.08);
      }
      body.light .faq-item.open {
        background: rgba(37, 99, 235, 0.04);
      }
      body.light .faq-tab {
        background: rgba(0, 0, 0, 0.07);
        border-color: rgba(0, 0, 0, 0.22);
        color: rgba(0, 0, 0, 0.72);
      }
      body.light .faq-tab:hover {
        border-color: rgba(37, 99, 235, 0.55);
        color: #1e293b;
        background: rgba(37, 99, 235, 0.1);
      }
      body.light .faq-tab.active {
        background: rgba(37, 99, 235, 0.15);
        border-color: var(--accent);
        color: var(--accent);
        box-shadow: 0 0 18px rgba(37, 99, 235, 0.2);
      }
      body.light .faq-q {
        color: rgba(15, 23, 42, 0.75);
      }
      body.light .faq-q:hover {
        color: #0f172a;
      }
      body.light .faq-item.open .faq-q {
        color: var(--accent);
      }
      body.light .faq-arrow {
        border-color: rgba(0, 0, 0, 0.18);
        color: rgba(0, 0, 0, 0.35);
      }
      body.light .faq-item.open .faq-arrow {
        color: #fff;
      }
      body.light .faq-a-inner {
        color: rgba(30, 41, 59, 0.7);
      }
      footer {
        position: relative;
        background:
          radial-gradient(
            ellipse at 50% 0%,
            rgba(96, 165, 250, 0.06),
            transparent 60%
          ),
          radial-gradient(
            ellipse at 80% 20%,
            rgba(139, 92, 246, 0.04),
            transparent 50%
          ),
          radial-gradient(
            ellipse at 20% 80%,
            rgba(59, 130, 246, 0.04),
            transparent 50%
          ),
          #060d1a;
        color: #cbd5e1;
        text-align: center;
        padding: 30px 24px;
        font-size: 1rem;
        overflow: hidden;
      }
      footer .star-field {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
      }
      footer .star-field .star {
        position: absolute;
        background: #ffffff;
        border-radius: 50%;
        opacity: 0;
        animation: footerStarTwinkle var(--duration) ease-in-out infinite;
        animation-delay: var(--delay);
      }
      @keyframes footerStarTwinkle {
        0%,
        100% {
          opacity: 0;
          transform: scale(0.5);
        }
        50% {
          opacity: var(--max-opacity);
          transform: scale(1);
        }
      }
      footer .star-field .shooting-star {
        position: absolute;
        width: 80px;
        height: 2px;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.8),
          transparent
        );
        border-radius: 50%;
        opacity: 0;
        animation: footerShootingStar 6s linear infinite;
        animation-delay: var(--delay);
        transform: rotate(-45deg);
      }
      @keyframes footerShootingStar {
        0% {
          opacity: 0;
          transform: translateX(0) translateY(0) rotate(-45deg);
        }
        10% {
          opacity: 1;
        }
        20% {
          opacity: 0;
          transform: translateX(-200px) translateY(200px) rotate(-45deg);
        }
        100% {
          opacity: 0;
        }
      }
      footer .star-field .planet {
        position: absolute;
        border-radius: 50%;
        opacity: 0.15;
        animation: footerPlanetFloat var(--duration) ease-in-out infinite;
        animation-delay: var(--delay);
      }
      @keyframes footerPlanetFloat {
        0%,
        100% {
          transform: translateY(0) rotate(0deg);
        }
        50% {
          transform: translateY(-10px) rotate(5deg);
        }
      }
      footer > *:not(.star-field) {
        position: relative;
        z-index: 1;
      }
      .footer-social {
        display: flex;
        justify-content: center;
        gap: 18px;
        margin-bottom: 16px;
      }
      .footer-social a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition:
          background 0.3s ease,
          border-color 0.3s ease,
          transform 0.3s ease,
          box-shadow 0.3s ease;
        text-decoration: none;
      }
      .footer-social a:hover {
        background: rgba(59, 130, 246, 0.15);
        border-color: rgba(59, 130, 246, 0.4);
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
      }
      .footer-social a svg {
        width: 20px;
        height: 20px;
        fill: #94a3b8;
        transition: fill 0.3s ease;
      }
      .footer-social a:hover svg {
        fill: var(--accent);
      }
      nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        padding: 14px 40px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        background: rgba(15, 23, 42, 0.35);
        backdrop-filter: blur(20px) saturate(140%);
        -webkit-backdrop-filter: blur(20px) saturate(140%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow:
          inset 0 1px 0 0 rgba(255, 255, 255, 0.05),
          0 4px 30px rgba(0, 0, 0, 0.15);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }
      nav.scrolled {
        padding: 10px 40px;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(24px) saturate(150%);
        -webkit-backdrop-filter: blur(24px) saturate(150%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow:
          inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
          0 8px 32px rgba(0, 0, 0, 0.3);
      }
      .nav-logo {
        font-size: 1.35rem;
        font-weight: 900;
        text-decoration: none;
        color: white;
        display: flex;
        align-items: center;
        gap: 12px;
        direction: ltr;
        transition: transform 0.3s ease;
        margin-right: auto;
        margin-left: 0;
        order: 1;
      }
      .nav-logo:hover {
        transform: scale(1.03);
      }
      .nav-logo-img {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        object-fit: cover;
        box-shadow: 0 2px 16px rgba(96, 165, 250, 0.3);
        transition:
          box-shadow 0.3s ease,
          transform 0.3s ease;
      }
      nav.scrolled .nav-logo-img {
        width: 34px;
        height: 34px;
      }
      .nav-logo:hover .nav-logo-img {
        box-shadow: 0 4px 24px rgba(96, 165, 250, 0.5);
        transform: rotate(-5deg) scale(1.05);
      }
      .nav-logo span {
        background: linear-gradient(
          90deg,
          #60a5fa,
          #a78bfa,
          #f472b6,
          #22d3ee,
          #60a5fa
        );
        background-size: 300% 100%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation:
          heroGradient 6s linear infinite,
          navLogoGlow 3s ease-in-out infinite,
          navLogoPulse 3s ease-in-out infinite;
      }
      @keyframes navLogoGlow {
        0%,
        100% {
          text-shadow:
            0 0 4px rgba(96, 165, 250, 0.4),
            0 0 10px rgba(96, 165, 250, 0.1);
        }
        33% {
          text-shadow:
            0 0 6px rgba(167, 139, 250, 0.5),
            0 0 14px rgba(167, 139, 250, 0.15);
        }
        66% {
          text-shadow:
            0 0 6px rgba(244, 114, 182, 0.5),
            0 0 14px rgba(244, 114, 182, 0.15);
        }
      }
      @keyframes navLogoPulse {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.03);
        }
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .nav-links a {
        color: rgba(255, 255, 255, 0.75);
        text-decoration: none;
        font-size: 0.95rem;
        font-weight: 600;
        padding: 8px 16px;
        border-radius: 10px;
        transition:
          color 0.3s ease,
          background 0.3s ease;
        position: relative;
        white-space: nowrap;
      }
      .nav-links a::after {
        content: "";
        position: absolute;
        bottom: 2px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, #60a5fa, #a78bfa);
        border-radius: 2px;
        transition: width 0.3s ease;
      }
      .nav-links a:hover {
        color: #fff;
        background: rgba(96, 165, 250, 0.08);
      }
      .nav-links a:hover::after {
        width: 60%;
      }
      .nav-links a.active {
        color: #fff;
        background: rgba(96, 165, 250, 0.12);
      }
      .nav-links a.active::after {
        width: 60%;
      }
      .nav-links a.nav-ai-link {
        color: #d97757;
        font-weight: 700;
      }
      .nav-links a.nav-ai-link::after {
        background: linear-gradient(90deg, #d97757, #e08a6b);
      }
      .nav-links a.nav-ai-link:hover {
        color: #e08a6b;
        background: rgba(217, 119, 87, 0.08);
      }
      @keyframes ctaPulse {
        0%,
        100% {
          box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
        }
        50% {
          box-shadow:
            0 4px 30px rgba(59, 130, 246, 0.8),
            0 0 40px rgba(99, 102, 241, 0.5);
        }
      }
      .nav-cta {
        padding: 12px 16px;
        background: linear-gradient(
          135deg,
          rgba(59, 130, 246, 0.22),
          rgba(99, 102, 241, 0.22)
        );
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        color: white;
        border: 1px solid rgba(99, 102, 241, 0.45);
        border-radius: 12px;
        font-family: var(--font);
        font-size: 0.95rem;
        font-weight: 700;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow:
          0 4px 16px rgba(59, 130, 246, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        position: relative;
        overflow: hidden;
        animation: ctaPulse 2s ease-in-out infinite;
        will-change: box-shadow;
      }
      .nav-cta::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.15),
          transparent
        );
        transition: left 0.5s ease;
      }
      .nav-cta:hover {
        transform: translateY(-2px) scale(1.03);
        background: linear-gradient(
          135deg,
          rgba(59, 130, 246, 0.35),
          rgba(99, 102, 241, 0.35)
        );
        box-shadow:
          0 8px 28px rgba(59, 130, 246, 0.4),
          inset 0 1px 0 rgba(255, 255, 255, 0.25);
        border-color: rgba(99, 102, 241, 0.65);
      }
      .nav-cta:hover::before {
        left: 100%;
      }
      .nav-hamburger {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        cursor: pointer;
        gap: 5px;
        transition: all 0.3s ease;
        padding: 0;
        order: 3;
      }
      .nav-hamburger:hover {
        background: rgba(96, 165, 250, 0.1);
        border-color: rgba(96, 165, 250, 0.3);
      }
      .nav-hamburger .bar {
        width: 22px;
        height: 2px;
        background: white;
        border-radius: 2px;
        transition: all 0.3s ease;
      }
      .nav-hamburger.open .bar:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
      }
      .nav-hamburger.open .bar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
      }
      .nav-hamburger.open .bar:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
      }
      .nav-mobile-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(6, 13, 26, 0.96);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        z-index: 99;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
      }
      .nav-mobile-overlay.open {
        display: flex;
        opacity: 1;
        pointer-events: auto;
      }
      .nav-mobile-overlay a {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        font-size: 1.4rem;
        font-weight: 700;
        padding: 14px 32px;
        border-radius: 16px;
        transition: all 0.3s ease;
        transform: translateY(20px);
        opacity: 0;
      }
      .nav-mobile-overlay.open a {
        transform: translateY(0);
        opacity: 1;
      }
      .nav-mobile-overlay.open a:nth-child(1) {
        transition-delay: 0.1s;
      }
      .nav-mobile-overlay.open a:nth-child(2) {
        transition-delay: 0.15s;
      }
      .nav-mobile-overlay.open a:nth-child(3) {
        transition-delay: 0.2s;
      }
      .nav-mobile-overlay.open a:nth-child(4) {
        transition-delay: 0.25s;
      }
      .nav-mobile-overlay.open a:nth-child(5) {
        transition-delay: 0.3s;
      }
      .nav-mobile-overlay.open a:nth-child(6) {
        transition-delay: 0.35s;
      }
      .nav-mobile-overlay.open a:nth-child(7) {
        transition-delay: 0.4s;
      }
      .nav-mobile-overlay.open a:nth-child(8) {
        transition-delay: 0.45s;
      }
      .nav-mobile-overlay.open a:nth-child(9) {
        transition-delay: 0.5s;
      }
      .nav-mobile-overlay a.nav-ai-link {
        color: #d97757;
      }
      .nav-mobile-overlay a.nav-ai-link:hover {
        color: #e08a6b;
        background: rgba(217, 119, 87, 0.08);
      }
      .nav-mobile-overlay a:hover {
        color: #fff;
        background: rgba(96, 165, 250, 0.12);
      }
      .anim {
        opacity: 0;
        transform: translateY(30px);
        transition:
          opacity 0.7s ease,
          transform 0.7s ease;
      }
      .anim.visible {
        opacity: 1;
        transform: none;
      }
      @media (max-width: 900px) {
        .nav-links {
          display: none;
        }
        nav > .nav-cta {
          display: none;
        }
        .nav-hamburger {
          display: flex;
          order: 1;
        }
        .nav-logo {
          order: 2;
          margin-right: 0;
        }
        nav {
          justify-content: space-between;
        }
        .nav-mobile-overlay {
          display: flex;
        }
      }
      @media (max-width: 768px) {
        body {
          font-size: 17px;
        }
        nav {
          padding: 12px 18px;
        }
        section {
          padding: 80px 20px;
        }
        #s1 {
          padding-top: 90px;
          justify-content: flex-start;
        }
        .form-box {
          padding: 28px 20px;
        }
        .hero-sub {
          font-size: 1.1rem;
        }
        .scroll-hint {
          bottom: 120px;
        }
        .problem-item {
          font-size: 1.1rem;
        }
        .flow-step-title {
          font-size: 1.1rem;
        }
        .flow-step-desc {
          font-size: 0.95rem;
        }
        .review-text {
          font-size: 1rem;
        }
        .faq-q {
          font-size: 1.05rem;
        }
        .faq-a {
          font-size: 1rem;
        }
        .pricing-note {
          font-size: 1rem;
        }
        #cal-widget-btn,
        #wa-btn,
        #a11y-widget-btn,
        #mobile-call-btn,
        #lang-toggle {
          transition:
            opacity 0.4s ease,
            visibility 0.4s ease,
            transform 0.4s ease;
        }
        .nav-mobile-overlay.open ~ #cal-widget-btn,
        .nav-mobile-overlay.open ~ #wa-btn,
        .nav-mobile-overlay.open ~ #a11y-widget-btn,
        .nav-mobile-overlay.open ~ #mobile-call-btn,
        .nav-mobile-overlay.open ~ #lang-toggle,
        .nav-mobile-overlay.open ~ #back-to-top-btn {
          opacity: 0;
          pointer-events: none;
          visibility: hidden;
          transform: scale(0.8);
        }
        /* Hide floating buttons when scrolling down near bottom on mobile */
        .floating-buttons-hidden #cal-widget-btn,
        .floating-buttons-hidden #wa-btn,
        .floating-buttons-hidden #a11y-widget-btn,
        .floating-buttons-hidden #mobile-call-btn,
        .floating-buttons-hidden #lang-toggle,
        .floating-buttons-hidden #back-to-top-btn {
          opacity: 0 !important;
          pointer-events: none !important;
          visibility: hidden !important;
          transform: translateY(20px) scale(0.9) !important;
        }
        /* Hide floating buttons when mobile nav is open */
        .nav-open #cal-widget-btn,
        .nav-open #wa-btn,
        .nav-open #a11y-widget-btn,
        .nav-open #mobile-call-btn,
        .nav-open #lang-toggle,
        .nav-open #back-to-top-btn {
          opacity: 0 !important;
          pointer-events: none !important;
          visibility: hidden !important;
          transform: translateY(20px) scale(0.9) !important;
        }
        /* Move lang-toggle above mobile-call-btn on small screens */
        body #lang-toggle {
          bottom: 100px;
          right: 28px;
        }
      }
      .startup-border {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        z-index: 9999999;
        animation: startupBorderFadeOut 0.4s ease-out 1s forwards;
        contain: layout;
      }
      .startup-border span {
        position: absolute;
        background: var(--accent);
        box-shadow:
          0 0 15px var(--accent-glow),
          0 0 5px var(--accent);
      }
      .startup-border .border-top {
        top: 0;
        right: 0;
        height: 4px;
        width: 0;
        animation: runBorderTop 0.25s linear forwards;
      }
      .startup-border .border-left {
        top: 0;
        left: 0;
        width: 4px;
        height: 0;
        animation: runBorderLeft 0.25s linear 0.25s forwards;
      }
      .startup-border .border-bottom {
        bottom: 0;
        left: 0;
        height: 4px;
        width: 0;
        animation: runBorderBottom 0.25s linear 0.5s forwards;
      }
      .startup-border .border-right {
        bottom: 0;
        right: 0;
        width: 4px;
        height: 0;
        animation: runBorderRight 0.25s linear 0.75s forwards;
      }
      @keyframes runBorderTop {
        to {
          width: 100%;
        }
      }
      @keyframes runBorderLeft {
        to {
          height: 100%;
        }
      }
      @keyframes runBorderBottom {
        to {
          width: 100%;
        }
      }
      @keyframes runBorderRight {
        to {
          height: 100%;
        }
      }
      @keyframes startupBorderFadeOut {
        to {
          opacity: 0;
          visibility: hidden;
        }
      }
      .category-tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin: 15px auto 40px;
        max-width: 900px;
        padding: 0 20px;
      }
      .tab-btn {
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        color: var(--text-muted);
        padding: 10px 24px;
        border-radius: 30px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-family: inherit;
      }
      .tab-btn:hover {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.3);
        color: var(--text-light);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
      }
      .tab-btn.active {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: #fff;
        border-color: rgba(96, 165, 250, 0.6);
        box-shadow:
          0 4px 20px rgba(96, 165, 250, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.25);
      }
      .light .tab-btn,
      .light-mode .tab-btn {
        background: rgba(255, 255, 255, 0.5);
        border-color: rgba(255, 255, 255, 0.5);
        color: #475569;
      }
      .light .tab-btn:hover,
      .light-mode .tab-btn:hover {
        background: rgba(255, 255, 255, 0.7);
        color: #0f172a;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
      }
      .light .tab-btn.active,
      .light-mode .tab-btn.active {
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: var(--accent);
        border-color: rgba(37, 99, 235, 0.55);
        box-shadow:
          0 4px 20px rgba(37, 99, 235, 0.18),
          inset 0 1px 0 rgba(255, 255, 255, 0.5);
      }
      /* ── Option A: Two-Pane Sidebar Layout ─────────────────────── */
      .services-layout {
        display: flex;
        flex-direction: row; /* LTR default: sidebar on the left */
        gap: 32px;
        align-items: flex-start;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
      }

      .services-sidebar {
        width: 210px;
        flex-shrink: 0;
        position: sticky;
        top: 90px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(20px) saturate(1.6);
        -webkit-backdrop-filter: blur(20px) saturate(1.6);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 20px;
        padding: 12px;
        box-shadow:
          0 4px 24px rgba(0, 0, 0, 0.15),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      .sidebar-cat-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        background: transparent;
        border: none;
        border-left: 3px solid transparent; /* LTR accent indicator */
        border-radius: 0 8px 8px 0;
        padding: 10px 12px 10px 14px;
        color: var(--text-muted);
        font-family: inherit;
        font-size: 0.95rem;
        font-weight: 500;
        cursor: pointer;
        text-align: left;
        width: 100%;
        transition: all 0.2s ease;
      }

      /* RTL: flip sidebar button styling */
      [dir="rtl"] .sidebar-cat-btn {
        border-left: none;
        border-right: 3px solid transparent;
        border-radius: 8px 0 0 8px;
        padding: 10px 14px 10px 12px;
        text-align: right;
      }

      .sidebar-cat-btn:hover {
        background: rgba(255, 255, 255, 0.06);
        color: var(--text-light);
      }

      .sidebar-cat-btn.active {
        background: rgba(96, 165, 250, 0.1);
        border-left-color: var(--accent);
        color: #fff;
      }

      [dir="rtl"] .sidebar-cat-btn.active {
        border-left-color: transparent;
        border-right-color: var(--accent);
      }

      .sidebar-cat-count {
        font-size: 0.78rem;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 1px 8px;
        min-width: 26px;
        text-align: center;
        flex-shrink: 0;
      }

      .sidebar-cat-btn.active .sidebar-cat-count {
        background: rgba(96, 165, 250, 0.25);
        color: var(--accent);
      }

      /* Content pane fills remaining space */
      .services-layout .features-grid {
        flex: 1;
        min-width: 0;
        grid-template-columns: repeat(3, 1fr); /* 3 columns instead of 5 */
        margin: 0; /* override any auto margin */
      }

      /* Light mode overrides */
      .light-mode .services-sidebar {
        background: rgba(255, 255, 255, 0.55);
        border-color: rgba(255, 255, 255, 0.5);
        box-shadow:
          0 4px 24px rgba(0, 0, 0, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.6);
      }
      .light-mode .sidebar-cat-btn {
        color: #475569;
      }
      .light-mode .sidebar-cat-btn:hover {
        background: rgba(0, 0, 0, 0.04);
        color: #0f172a;
      }
      .light-mode .sidebar-cat-btn.active {
        background: rgba(37, 99, 235, 0.07);
        border-left-color: #2563eb;
        color: #1e40af;
      }
      [dir="rtl"] .light-mode .sidebar-cat-btn.active {
        border-left-color: transparent;
        border-right-color: #2563eb;
      }
      .light-mode .sidebar-cat-count {
        background: rgba(0, 0, 0, 0.07);
      }
      .light-mode .sidebar-cat-btn.active .sidebar-cat-count {
        background: rgba(37, 99, 235, 0.15);
        color: #2563eb;
      }

      /* RTL: flex row follows inline direction (right→left), so sidebar stays on the right */
      [dir="rtl"] .services-layout {
        flex-direction: row;
      }

      /* ── Mobile: sidebar collapses to horizontal scroll row ──── */
      @media (max-width: 768px) {
        .services-layout,
        [dir="rtl"] .services-layout {
          flex-direction: column;
          gap: 16px;
          padding: 0 12px;
          width: 100%;
        }

        .services-sidebar {
          width: 100%;
          position: static;
          flex-direction: row;
          overflow-x: auto;
          gap: 8px;
          padding: 8px;
          scrollbar-width: none;
          border-radius: 16px;
        }
        .services-sidebar::-webkit-scrollbar {
          display: none;
        }

        .sidebar-cat-btn {
          width: auto;
          flex-shrink: 0;
          border-right: none;
          border-radius: 30px;
          border: 1px solid rgba(255, 255, 255, 0.15);
          padding: 8px 16px;
          font-size: 0.88rem;
          white-space: nowrap;
        }

        .services-sidebar {
          justify-content: flex-start;
        }

        .sidebar-cat-btn.active {
          border-color: rgba(96, 165, 250, 0.6);
          box-shadow: 0 4px 16px rgba(96, 165, 250, 0.2);
        }

        .sidebar-cat-count {
          display: none; /* hide counts on mobile to save space */
        }

        [dir="rtl"] .sidebar-cat-btn {
          width: auto;
          border-left: none;
          border-right: none;
          border-radius: 30px;
          border: 1px solid rgba(255, 255, 255, 0.15);
          padding: 8px 16px;
          text-align: center;
        }

        [dir="rtl"] .sidebar-cat-btn.active {
          border-color: rgba(96, 165, 250, 0.6);
        }

        [dir="rtl"] .light-mode .sidebar-cat-btn.active {
          border-color: rgba(37, 99, 235, 0.5);
        }

        .feature-card {
          padding: 20px 14px 16px;
        }

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

      @media (max-width: 480px) {
        .services-layout .features-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      .feature-card.hide {
        display: none !important;
      }
      .feature-card.show {
        animation: fadeInCard 0.4s ease both;
      }
      @keyframes fadeInCard {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .exit-popup-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 10000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
      }
      .exit-popup-overlay.active {
        opacity: 1;
        pointer-events: auto;
      }
      .exit-popup {
        background: rgba(15, 23, 42, 0.85);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border: 1px solid rgba(96, 165, 250, 0.3);
        border-radius: 24px;
        padding: 32px 28px;
        max-width: 460px;
        width: 100%;
        text-align: center;
        box-shadow:
          0 30px 80px rgba(0, 0, 0, 0.5),
          0 0 40px rgba(96, 165, 250, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
        transform: translateY(20px) scale(0.96);
        transition: transform 0.35s ease;
        position: relative;
      }
      .exit-popup-overlay.active .exit-popup {
        transform: translateY(0) scale(1);
      }
      .exit-popup-close {
        position: absolute;
        top: 14px;
        left: 14px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.06);
        color: #e2e8f0;
        font-size: 1.4rem;
        line-height: 1;
        cursor: pointer;
        transition:
          background 0.2s,
          color 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .exit-popup-close:hover {
        background: rgba(255, 255, 255, 0.14);
        color: #fff;
      }
      .exit-popup-title {
        font-size: clamp(1.35rem, 4vw, 1.7rem);
        font-weight: 800;
        color: #f8fafc;
        margin-bottom: 16px;
        line-height: 1.4;
      }
      .exit-popup-text {
        font-size: 1.05rem;
        color: #e2e8f0;
        margin-bottom: 28px;
        line-height: 1.7;
      }
      .exit-popup-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .exit-popup-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 14px 24px;
        border-radius: 12px;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        transition:
          transform 0.2s,
          box-shadow 0.2s;
        text-decoration: none;
        border: none;
      }
      .exit-popup-btn-primary {
        background: linear-gradient(135deg, #3b82f6, #6366f1);
        color: #fff;
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
      }
      .exit-popup-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(59, 130, 246, 0.5);
      }
      .exit-popup-btn-secondary {
        background: transparent;
        color: #94a3b8;
        border: 1px solid rgba(255, 255, 255, 0.12);
      }
      .exit-popup-btn-secondary:hover {
        color: #f8fafc;
        border-color: rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.04);
      }
      body.light .exit-popup {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-color: rgba(37, 99, 235, 0.25);
        box-shadow:
          0 30px 80px rgba(0, 0, 0, 0.18),
          0 0 40px rgba(37, 99, 235, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.8);
      }
      body.light .exit-popup-title {
        color: #0f172a;
      }
      body.light .exit-popup-text {
        color: #334155;
      }
      body.light .exit-popup-close {
        background: rgba(15, 23, 42, 0.06);
        color: #475569;
      }
      body.light .exit-popup-close:hover {
        background: rgba(15, 23, 42, 0.12);
        color: #0f172a;
      }
      body.light .exit-popup-btn-secondary {
        color: #64748b;
        border-color: rgba(15, 23, 42, 0.12);
      }
      body.light .exit-popup-btn-secondary:hover {
        color: #0f172a;
        border-color: rgba(15, 23, 42, 0.22);
        background: rgba(15, 23, 42, 0.04);
      }
      @media (max-width: 480px) {
        .exit-popup {
          padding: 26px 22px;
        }
        .exit-popup-close {
          top: 10px;
          left: 10px;
          width: 36px;
          height: 36px;
          font-size: 1.2rem;
        }
      }
      .section-soon-badge {
        display: inline-block;
        background: linear-gradient(135deg, #f59e0b, #ef4444);
        color: #fff;
        font-size: 0.55em;
        font-weight: 800;
        padding: 4px 12px;
        border-radius: 20px;
        vertical-align: middle;
        margin-right: 8px;
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
      }
      /* Section floating balls background (Deloitte-style) */
      .section-balls {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
      }
      #s3-build .section-balls {
        bottom: auto;
        height: min(100%, 7500px);
      }
      .section-ball {
        position: absolute;
        border-radius: 50%;
        opacity: 0.28;
        will-change: transform;
        transform: translateZ(0);
        animation: sectionFloat var(--duration, 6s) ease-in-out infinite;
        animation-delay: var(--delay, 0s);
      }
      .section-ball.ball-blue {
        background: radial-gradient(
          circle at 30% 30%,
          rgba(96, 165, 250, 0.95),
          rgba(59, 130, 246, 0.3)
        );
        box-shadow: 0 0 40px rgba(96, 165, 250, 0.2);
      }
      .section-ball.ball-purple {
        background: radial-gradient(
          circle at 30% 30%,
          rgba(139, 92, 246, 0.9),
          rgba(124, 58, 237, 0.25)
        );
        box-shadow: 0 0 40px rgba(139, 92, 246, 0.18);
      }
      .section-ball.ball-green {
        background: radial-gradient(
          circle at 30% 30%,
          rgba(16, 185, 129, 0.9),
          rgba(5, 150, 105, 0.25)
        );
        box-shadow: 0 0 40px rgba(16, 185, 129, 0.18);
      }
      .section-ball.ball-cyan {
        background: radial-gradient(
          circle at 30% 30%,
          rgba(6, 182, 212, 0.9),
          rgba(8, 145, 178, 0.25)
        );
        box-shadow: 0 0 40px rgba(6, 182, 212, 0.18);
      }
      .section-ball.ball-rose {
        background: radial-gradient(
          circle at 30% 30%,
          rgba(244, 63, 94, 0.85),
          rgba(225, 29, 72, 0.25)
        );
        box-shadow: 0 0 40px rgba(244, 63, 94, 0.15);
      }
      @keyframes sectionFloat {
        0%,
        100% {
          transform: translateY(0) translateX(0) scale(1);
        }
        50% {
          transform: translateY(-25px) translateX(8px) scale(1.05);
        }
      }
      body.a11y-stop-animations * {
        animation: none !important;
        transition: none !important;
      }
      .light-mode .section-ball,
      .light .section-ball {
        opacity: 0.18;
      }
      @media (max-width: 768px) {
        .section-ball {
          opacity: 0.2;
        }
      }

      .hero-tech-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        margin: 14vh auto 0;
        flex-wrap: wrap;
        padding: 24px 32px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.05);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      }
      .hero-tech-icons svg {
        width: 36px;
        height: 36px;
        opacity: 0.85;
        transition:
          opacity 0.3s,
          transform 0.3s;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
      }
      .hero-tech-icons svg:hover {
        opacity: 1;
        transform: translateY(-4px) scale(1.1);
      }
      @media (max-width: 480px) {
        .hero-tech-icons {
          gap: 12px;
        }
        .hero-tech-icons svg {
          width: 30px;
          height: 30px;
        }
      }
      @media (max-width: 768px) {
        .hero-tech-icons {
          display: none;
        }
      }

      /* Glassmorphism fallback for browsers without backdrop-filter support */
      @supports not (backdrop-filter: blur(10px)) {
        .feature-card,
        .pricing-card,
        .stat-card,
        .problem-item,
        .flow-step,
        .faq-item,
        .faq-a-inner,
        .form-box,
        .contact-detail,
        .newsletter-inner,
        .pricing-wp-box,
        .exit-popup,
        .tab-btn,
        .nav-cta,
        .buy-now-btn,
        #wa-btn,
        #cal-widget-btn,
        #a11y-widget-btn,
        #mobile-call-btn,
        .compare-table thead th:first-child,
        .compare-table thead th:nth-child(3),
        .compare-table tbody tr:nth-child(even) td,
        .compare-table tbody tr:nth-child(odd) td {
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
        }
        .feature-card,
        .pricing-card,
        .stat-card,
        .problem-item,
        .flow-step,
        .faq-item,
        .pricing-wp-box {
          background: rgba(255, 255, 255, 0.95);
          border: 1px solid rgba(0, 0, 0, 0.1);
        }
        .form-box,
        .contact-detail,
        .newsletter-inner {
          background: #ffffff;
          border: 1px solid #e2e8f0;
        }
        .exit-popup {
          background: #0f172a;
        }
        body.light .exit-popup {
          background: #ffffff;
        }
      }

      /* prefers-reduced-motion: respect user preferences for glass transitions */
      @media (prefers-reduced-motion: reduce) {
        .feature-card,
        .pricing-card,
        .stat-card,
        .problem-item,
        .flow-step,
        .faq-item,
        .form-box,
        .contact-detail,
        .newsletter-inner,
        .pricing-wp-box,
        .tab-btn,
        .submit-btn,
        .nav-cta,
        .buy-now-btn {
          transition: none !important;
        }
      }

      /* Mobile animation performance — same animations, lighter & faster */
      @media (max-width: 768px) {
        /* Shorter slide distance + snappier duration (0.4s vs 0.6-0.8s) */
        .section-title {
          transform: translateY(14px);
          transition:
            opacity 0.4s ease 0.07s,
            transform 0.4s ease 0.07s;
        }
        /* problem-item: swap far lateral slide for a gentle vertical drop */
        .problem-item {
          transform: translateY(14px);
          transition:
            opacity 0.4s ease,
            transform 0.4s ease,
            border-color 0.3s,
            background 0.3s;
        }
        .problem-item:nth-child(1) {
          transition:
            opacity 0.4s ease 0.05s,
            transform 0.4s ease 0.05s,
            border-color 0.3s,
            background 0.3s;
        }
        .problem-item:nth-child(2) {
          transition:
            opacity 0.4s ease 0.1s,
            transform 0.4s ease 0.1s,
            border-color 0.3s,
            background 0.3s;
        }
        .problem-item:nth-child(3) {
          transition:
            opacity 0.4s ease 0.15s,
            transform 0.4s ease 0.15s,
            border-color 0.3s,
            background 0.3s;
        }
        .problem-item:nth-child(4) {
          transition:
            opacity 0.4s ease 0.2s,
            transform 0.4s ease 0.2s,
            border-color 0.3s,
            background 0.3s;
        }
        .problem-item:nth-child(5) {
          transition:
            opacity 0.4s ease 0.25s,
            transform 0.4s ease 0.25s,
            border-color 0.3s,
            background 0.3s;
        }
        .feature-card {
          transform: translateY(16px);
          transition:
            opacity 0.4s ease,
            transform 0.4s ease;
        }
        /* flow-step: reduce blur (5px vs 12px) + shorter stagger */
        .flow-step {
          transform: translateY(16px);
          backdrop-filter: blur(5px);
          -webkit-backdrop-filter: blur(5px);
          transition:
            opacity 0.4s ease,
            transform 0.4s ease,
            border-color 0.25s,
            background 0.25s,
            box-shadow 0.25s;
        }
        .flow-step:nth-child(1) {
          transition-delay: 0.05s;
        }
        .flow-step:nth-child(2) {
          transition-delay: 0.1s;
        }
        .flow-step:nth-child(3) {
          transition-delay: 0.15s;
        }
        .flow-step:nth-child(4) {
          transition-delay: 0.2s;
        }
        .flow-step:nth-child(5) {
          transition-delay: 0.25s;
        }
        /* cards: reduce blur (5px vs 14px), keep fade+slide */
        .stat-card {
          transform: translateY(14px);
          backdrop-filter: blur(5px);
          -webkit-backdrop-filter: blur(5px);
          transition:
            opacity 0.4s ease,
            transform 0.4s ease;
        }
        .anim {
          transform: translateY(14px);
          transition:
            opacity 0.4s ease,
            transform 0.4s ease;
        }
        /* Floating background balls: smaller travel distance, no scale */
        .section-ball {
          will-change: auto;
          animation: mobileBallFloat var(--duration, 8s) ease-in-out infinite !important;
          animation-delay: var(--delay, 0s) !important;
        }
        @keyframes mobileBallFloat {
          0%,
          100% {
            transform: translateY(0);
          }
          50% {
            transform: translateY(-10px);
          }
        }
        /* Footer: slow down shooting stars instead of hiding them */
        .footer-shooting-star {
          animation-duration: 10s !important;
        }
        .footer-star {
          animation-duration: 5s !important;
        }
        .footer-planet {
          animation-duration: 12s !important;
        }
      }
      /* Live availability dot shown next to the floating contact buttons */
      #wa-btn,
      #mobile-call-btn {
        overflow: visible;
      }
      #wa-btn .live-dot,
      #mobile-call-btn .live-dot {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #22c55e;
        border: 2px solid #ffffff;
        box-shadow: 0 0 10px rgba(34, 197, 94, 0.85);
        pointer-events: none;
        z-index: 2;
      }
      #wa-btn .live-dot::before,
      #mobile-call-btn .live-dot::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 50%;
        background: rgba(34, 197, 94, 0.55);
        animation: liveDotPulse 2s ease-out infinite;
        pointer-events: none;
      }
      @keyframes liveDotPulse {
        0% {
          transform: scale(0.6);
          opacity: 0.9;
        }
        100% {
          transform: scale(2.4);
          opacity: 0;
        }
      }
      body.a11y-stop-animations #wa-btn .live-dot::before,
      body.a11y-stop-animations #mobile-call-btn .live-dot::before {
        animation: none !important;
      }
      @media (max-width: 900px) {
        .flow-step:nth-child(n),
        .problem-item:nth-child(n),
        .stat-card:nth-child(n) {
          transition-delay: 0s !important;
        }
      }

      /* ─── Language Toggle Floating Button ────────────────────────────────────── */
      #lang-toggle {
        bottom: 28px;
        right: 28px;
        width: 60px;
        height: 60px;
        background: rgba(96, 165, 250, 0.15);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 50%;
        border: 1px solid rgba(96, 165, 250, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
          0 8px 32px rgba(0, 0, 0, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        z-index: 1000;
        cursor: pointer;
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease,
          border-color 0.3s ease;
        padding: 0;
      }
      #lang-toggle:hover {
        transform: scale(1.1);
        box-shadow:
          0 12px 40px rgba(0, 0, 0, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.25);
        border-color: rgba(96, 165, 250, 0.5);
      }
      #lang-toggle .lang-globe {
        width: 32px;
        height: 32px;
        display: block;
        color: var(--text-light);
      }
      body.light #lang-toggle .lang-globe {
        color: var(--dark);
      }
      body.light #lang-toggle {
        background: rgba(96, 165, 250, 0.12);
        border-color: rgba(96, 165, 250, 0.25);
      }
      #lang-toggle:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .grecaptcha-badge {
        visibility: hidden !important;
      }
      /* ─── Cookie Consent Banner ──────────────────────────────────────────────── */
      #cookie-banner {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--card-bg, #1e293b);
        border-top: 1px solid rgba(148, 163, 184, 0.25);
        padding: 1rem 1.5rem;
        z-index: 9998;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.75rem;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
      }
      #cookie-banner[hidden] {
        display: none !important;
      }
      #cookie-banner p {
        margin: 0;
        font-size: 0.88rem;
        flex: 1;
        min-width: 200px;
        line-height: 1.5;
      }
      .cookie-banner-btns {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
      }
      .cookie-banner-btns button {
        padding: 0.45rem 1.2rem;
        border-radius: 6px;
        font-size: 0.88rem;
        font-weight: 700;
        cursor: pointer;
        border: 2px solid var(--accent, #60a5fa);
        touch-action: manipulation;
        transition: opacity 0.15s;
      }
      .cookie-banner-btns button:hover {
        opacity: 0.85;
      }
      #cookie-accept {
        background: var(--accent, #60a5fa);
        color: #fff;
      }
      #cookie-reject {
        background: transparent;
        color: var(--accent, #60a5fa);
      }
      /* ─── Consent Checkboxes in Form ─────────────────────────────────────────── */
      .consent-row {
        margin-top: 0.75rem;
      }
      .consent-label {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        font-size: 0.85rem;
        line-height: 1.5;
        cursor: pointer;
        color: #000;
      }
      .consent-label input[type="checkbox"] {
        margin-top: 0.2rem;
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        accent-color: var(--accent, #60a5fa);
        cursor: pointer;
      }
      .consent-label a {
        color: var(--accent, #60a5fa);
      }
      /* ─── Mobile touch optimisation ─────────────────────────────────────────── */
      a,
      button,
      [role="button"],
      label,
      select,
      summary {
        touch-action: manipulation;
      }
      .faq-wrap,
      .services-grid,
      .pricing-grid {
        overscroll-behavior: contain;
      }

      /* ─── LTR Overrides (English mode) ──────────────────────────────────────── */
      html.lang-en body {
        direction: ltr;
      }
      html.lang-en .faq-wrap h3,
      html.lang-en .flow-step-desc,
      html.lang-en .marketing-consent-note,
      html.lang-en .pricing-note,
      html.lang-en .a11y-toggle-btn,
      html.lang-en .a11y-content,
      html.lang-en .a11y-content h2,
      html.lang-en .a11y-content h3,
      html.lang-en .a11y-content p,
      html.lang-en .a11y-content li {
        text-align: left !important;
      }
      html.lang-en .flow-step-title {
        text-align: center !important;
      }
      html.lang-en .faq-tabs {
        direction: ltr;
      }
      html.lang-en .faq-q {
        direction: ltr;
        text-align: left;
      }
      html.lang-en .faq-a-inner {
        direction: ltr;
        text-align: left;
      }
      html.lang-en input,
      html.lang-en textarea {
        direction: ltr;
        text-align: left;
      }
      html.lang-en .contact-details .detail-row {
        flex-direction: row;
      }
      html.lang-en .contact-form-wrap .form-row {
        flex-direction: row;
      }
      html.lang-en .nav-links {
        direction: ltr;
      }
      html.lang-en .nav-logo {
        margin-right: auto;
        margin-left: 0;
        order: 1;
      }
      html.lang-en nav > .nav-cta {
        left: auto;
        right: 40px;
        order: 3;
      }
      html.lang-en .problems-list .problem-item {
        flex-direction: row;
      }
      html.lang-en .problem-item span {
        text-align: left;
      }
      html.lang-en .feature-card {
        direction: ltr;
      }
      html.lang-en .feature-name,
      html.lang-en .feature-desc {
        text-align: center;
      }
      html.lang-en .pricing-card {
        direction: ltr;
      }
      html.lang-en .pricing-features li {
        text-align: left;
      }
      html.lang-en .comparison-table th,
      html.lang-en .comparison-table td {
        text-align: left;
      }
      html.lang-en .footer-links {
        direction: ltr;
      }
      html.lang-en .form-group label {
        text-align: left;
      }
      html.lang-en .pricing-includes {
        text-align: left;
      }
      html.lang-en .compare-table td,
      html.lang-en .compare-table th {
        text-align: left;
        direction: ltr;
      }
      html.lang-en .contact-details .detail-label {
        text-align: left;
      }
      html.lang-en .contact-details .detail-value {
        text-align: left;
      }
      html.lang-en .newsletter-form label {
        text-align: left;
      }
      /* Force LTR on inputs/textareas so placeholders render left-to-right */
      html.lang-en input::placeholder,
      html.lang-en textarea::placeholder {
        direction: ltr;
        text-align: left;
      }
      /* Ensure emojis stay in their logical position in LTR */
      html.lang-en .feature-icon,
      html.lang-en .x-icon {
        direction: ltr;
        unicode-bidi: embed;
      }

      /* ─── Blog Section ───────────────────────────────────────────────────────── */
      #blog {
        position: relative;
        padding: 80px 20px;
        background: var(--dark, #0f172a);
        overflow: hidden;
      }
      #blog::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 80%, rgba(96, 165, 250, 0.08), transparent 60%);
        pointer-events: none;
        z-index: 0;
      }
      .blog-container {
        position: relative;
        z-index: 1;
        max-width: 1200px;
        margin: 0 auto;
      }
      .blog-header {
        text-align: center;
        margin-bottom: 48px;
      }
      .blog-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 16px;
        border: 1px solid rgba(96, 165, 250, 0.4);
        background: rgba(96, 165, 250, 0.1);
        color: var(--accent, #60a5fa);
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 20px;
      }
      #blog .section-title {
        margin-bottom: 16px;
      }
      #blog .section-title::after {
        content: "";
        display: block;
        width: 60px;
        height: 3px;
        background: var(--accent, #60a5fa);
        margin: 14px auto 0;
        border-radius: 2px;
      }
      .blog-subtitle {
        text-align: center;
        color: var(--text-muted, #e2e8f0);
        font-size: 1rem;
        max-width: 500px;
        margin: 0 auto;
        line-height: 1.6;
      }
      .blog-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-bottom: 40px;
      }
      .blog-card {
        position: relative;
        display: flex;
        flex-direction: column;
        flex: 1;
        background: var(--glass-bg, rgba(255, 255, 255, 0.08));
        border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18));
        border-radius: var(--glass-radius, 20px);
        box-shadow: var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.25));
        overflow: hidden;
        transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
          border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
          transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
          box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .blog-card:hover {
        background: var(--glass-bg-hover, rgba(255, 255, 255, 0.12));
        border-color: var(--glass-border-hover, rgba(255, 255, 255, 0.35));
        transform: translateY(-4px);
        box-shadow: var(--glass-shadow-hover, 0 20px 40px rgba(0, 0, 0, 0.35));
      }
      .blog-card-link {
        text-decoration: none;
        color: inherit;
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      .blog-card-img-wrap {
        position: relative;
        width: 100%;
        height: 200px;
        overflow: hidden;
      }
      .blog-card-img-placeholder {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(139, 92, 246, 0.2));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
      }
      .blog-card-category {
        position: absolute;
        top: 12px;
        inset-inline-end: 12px;
        background: var(--accent, #60a5fa);
        color: #fff;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 20px;
        padding: 4px 12px;
        z-index: 2;
      }
      .blog-card-body {
        padding: 20px 24px 24px;
        display: flex;
        flex-direction: column;
        flex: 1;
      }
      .blog-card-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.8rem;
        color: var(--text-muted, #e2e8f0);
        opacity: 0.7;
        margin-bottom: 10px;
      }
      .blog-card-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--text-light, #f8fafc);
        line-height: 1.4;
        margin: 0 0 8px;
        transition: color 0.2s ease;
      }
      .blog-card-link:hover .blog-card-title {
        color: var(--accent, #60a5fa);
      }
      .blog-card-desc {
        font-size: 0.9rem;
        color: var(--text-muted, #e2e8f0);
        line-height: 1.6;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .blog-card-divider {
        border: none;
        border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18));
        margin: 16px 0;
        margin-top: auto;
      }
      .blog-card-readmore {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--accent, #60a5fa);
        font-weight: 600;
        font-size: 0.9rem;
        transition: opacity 0.2s ease;
      }
      .blog-card-link:hover .blog-card-readmore {
        opacity: 0.8;
      }
      .blog-card-readmore-arrow {
        display: inline-block;
        transition: transform 0.2s ease;
      }
      .blog-card-link:hover .blog-card-readmore-arrow {
        transform: translateX(-4px);
      }
      html[dir="ltr"] .blog-card-link:hover .blog-card-readmore-arrow {
        transform: translateX(4px);
      }
      .blog-card.anim:nth-child(1) {
        transition-delay: 0.1s;
      }
      .blog-card.anim:nth-child(2) {
        transition-delay: 0.2s;
      }
      .blog-card.anim:nth-child(3) {
        transition-delay: 0.3s;
      }
      .blog-cta {
        text-align: center;
      }
      .btn-blog-outline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 2px solid var(--accent, #60a5fa);
        color: var(--accent, #60a5fa);
        background: transparent;
        padding: 14px 36px;
        border-radius: 50px;
        font-size: 1rem;
        font-weight: 600;
        text-decoration: none;
        transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
      }
      .btn-blog-outline:hover {
        background: var(--accent, #60a5fa);
        color: #0f172a;
        box-shadow: 0 4px 24px var(--accent-glow, rgba(96, 165, 250, 0.4));
      }
      .btn-blog-outline:focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 3px;
      }
      @media (max-width: 1024px) {
        .blog-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 768px) {
        .blog-grid {
          grid-template-columns: 1fr;
        }
        #blog {
          padding: 60px 16px;
        }
        .blog-card-readmore {
          min-height: 44px;
        }
        .btn-blog-outline {
          min-height: 44px;
          padding: 12px 28px;
        }
      }

      /* ── Social Proof / Testimonials ── */
      #s5-social {
        padding: 100px 24px;
        background: var(--dark, #0f172a);
        text-align: center;
      }
      .testimonials-grid {
        display: flex;
        justify-content: center;
        gap: 32px;
        flex-wrap: wrap;
        margin-top: 56px;
      }
      .testimonial-card {
        background: var(--glass-bg, rgba(255,255,255,0.08));
        border: 1px solid var(--glass-border, rgba(255,255,255,0.18));
        backdrop-filter: blur(var(--glass-blur, 14px));
        -webkit-backdrop-filter: blur(var(--glass-blur, 14px));
        border-radius: var(--glass-radius, 20px);
        padding: 40px 36px 32px;
        max-width: 480px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        box-shadow: var(--glass-shadow);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
      }
      .testimonial-card:hover {
        box-shadow: var(--glass-shadow-hover);
        transform: translateY(-4px);
      }
      .testimonial-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        overflow: hidden;
        border: 3px solid var(--accent, #60a5fa);
        box-shadow: 0 0 20px var(--accent-glow, rgba(96,165,250,0.4));
        flex-shrink: 0;
      }
      .testimonial-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .testimonial-initials {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--accent, #60a5fa), #818cf8);
        color: #0f172a;
        font-size: 2rem;
        font-weight: 700;
        font-family: var(--font, "Heebo", sans-serif);
        line-height: 1;
      }
      .testimonial-quote {
        font-size: 1.05rem;
        line-height: 1.75;
        color: var(--text-muted, #e2e8f0);
        font-style: italic;
        position: relative;
        padding: 0 8px;
      }
      .testimonial-quote::before {
        content: "\201C";
        font-size: 4rem;
        color: var(--accent, #60a5fa);
        opacity: 0.35;
        position: absolute;
        top: -20px;
        right: -4px;
        line-height: 1;
        font-style: normal;
      }
      .testimonial-meta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
      }
      .testimonial-name {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-light, #f8fafc);
      }
      .testimonial-role {
        font-size: 0.875rem;
        color: var(--accent, #60a5fa);
        font-weight: 500;
      }
      .testimonials-cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-top: 56px;
        padding: 16px 36px;
        background: linear-gradient(135deg, #25d366, #128c7e);
        color: #fff;
        font-size: 1.05rem;
        font-weight: 700;
        font-family: var(--font, "Heebo", sans-serif);
        border-radius: 50px;
        text-decoration: none;
        box-shadow: 0 4px 24px rgba(37,211,102,0.35);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
      }
      .testimonials-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(37,211,102,0.5);
      }
      .testimonials-cta .wa-icon {
        font-size: 1.3rem;
      }
      @media (max-width: 768px) {
        #s5-social {
          padding: 70px 16px;
        }
        .testimonial-card {
          padding: 32px 24px 28px;
        }
      }