/*
 WESTONIK DESIGN SYSTEM — SINGLE CSS SOURCE
 Edit design tokens at the top to change the entire site.
 Bootstrap 4.5 compatible. Never add styles inline in HTML.
 TABLE OF CONTENTS
   01. DESIGN TOKENS
   02. RESET / TYPOGRAPHY
   03. CONTAINERS / SECTIONS
   04. BUTTONS
   05. BADGES
   06. CARDS
   07. FORMS
   08. HEADER
   09. DESKTOP MEGA MENU
   10. MOBILE SLIDE NAVIGATION
   11. SEARCH OVERLAY
   12. HERO SECTION
   13. FOOTER
   14. UTILITIES
   15. RESPONSIVE
   16. CONTEXTUAL ICON THEMES
*/


/* =================================================================
   01. DESIGN TOKENS
   ================================================================= */
/* EDIT THIS FILE FIRST: all globally shared design decisions. */
:root {
  --color-primary: #075ff5;
  --color-primary-hover: #004bdd;
  --color-primary-soft: #eaf2ff;
  --color-ink: #080e30;
  --color-text: #3e4d68;
  --color-muted: #64708a;
  --color-line: #e8eef9;
  --color-white: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f6f9ff;
  --color-footer: #080e30;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-xs: .75rem;
  --font-sm: .875rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-h1: clamp(2.8rem, 5.4vw, 5.2rem);
  --font-h2: clamp(2rem, 3.3vw, 3.25rem);
  --container-max: 1320px;
  --header-height: 50px;
  --section-space: clamp(72px, 9vw, 120px);
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px;
  --radius-xl: 28px; --radius-pill: 999px;
  --shadow-card: 0 12px 36px rgba(15,47,102,.055);
  --shadow-float: 0 22px 65px rgba(13,39,102,.13);
  --speed-fast: 160ms; --speed-normal: 280ms;
  /* Legacy aliases: safe migration of your original navigation. */
  --navy: var(--color-ink);
  --blue: var(--color-primary);
  --line: var(--color-line);
  --muted: var(--color-muted);
  --panelshadow: var(--shadow-float);
 --ws-bg:#070b14; --ws-surface:#101929; --ws-surface-hover:#152139;
 --ws-text:#f4f7ff; --ws-text-muted:#95a5c3; --ws-line:rgba(180,204,245,.13);
 --ws-blue:#3985ff; --ws-blue-soft:rgba(57,133,255,.14);
 --ws-radius:23px; --ws-card-width:clamp(320px,30vw,260px);
 --ws-card-gap:22px; --ws-edge: max(24px, calc((100vw - 1250px) / 2));
 --ws-sticky-top:0px; /* if header is fixed/sticky, set to its height (e.g. 80px) */
 --ws-accent-1:#075fe5; --ws-accent-soft-1:#e0f2fe;
 --ws-accent-2:#9333ea; --ws-accent-soft-2:#f3e8ff;
 --ws-accent-3:#16a34a; --ws-accent-soft-3:#dcfce7;
 --ws-accent-4:#ea580c; --ws-accent-soft-4:#ffedd5;
 --ws-accent-5:#db2777; --ws-accent-soft-5:#fce7f3;
 --ws-accent-6:#0d9488; --ws-accent-soft-6:#ccfbf1;
--ws-header-offset: 50px;      /* Navigation height */
  --ws-header-offset-top: 0px;  /* Extra top spacing */
  --ws-section-padding-top: 15px;
  --ws-section-padding-bottom: 80px;
 --wh-brand: #075fe5;
      --wh-brand-dark: #064bc0;
      --wh-ink: #0b1530;
      --wh-muted: #61718d;
      --wh-container: 1440px;
      --wh-grid-opacity: .10;

  --ws-blue: #075fe5;
  --ws-blue-light: #1677ff;
  --ws-black: #101725;

--wh-brand:#075ff5;--wh-brand-dark:#004fdb;--wh-ink:#0a1234;--wh-muted:#546482;--wh-nav-height:80px;--wh-container:1380px;--wh-radius:26px;--wh-grid-opacity:.055;--wh-stage-height:calc(100svh - var(--wh-nav-height));
}

.theme-dark .ws-badge {
    background: rgba(22, 119, 255, 0.10);
    border: 1px solid rgba(22, 119, 255, 0.28);
    color: #60a5fa;
    box-shadow: 0 0 20px rgba(22, 119, 255, 0.12);
}
.theme-dark .ws-badge-dot {
    background: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22);
}
.theme-dark .ws-title { color: #ffffff; }
.theme-dark .ws-subtitle { color: #94a3b8; }

/* =================================================================
   02. RESET / TYPOGRAPHY
   ================================================================= */
/* Site-wide defaults; Bootstrap is loaded before these overrides. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; color:var(--color-ink); background:var(--color-white); font-family:var(--font-body); line-height:1.65; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); color:var(--color-ink); line-height:1.18; }
a { color:var(--color-primary); text-decoration:none; }
a:hover { color:var(--color-primary-hover); text-decoration:none; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
img { max-width:100%; height:auto; }
:focus-visible { outline:3px solid #70a4ff; outline-offset:3px; }
::selection { background:#d6e6ff; color:var(--color-ink); }


/* =================================================================
   03. CONTAINERS / SECTIONS
   ================================================================= */
.w-container { width:min(var(--container-max),calc(100% - 48px)); margin-inline:auto; }
.w-section { padding-block:var(--section-space); }
.w-section--light { background:var(--color-surface-alt); }
.w-section--white { background:var(--color-white); }
.w-section__eyebrow { color:var(--color-primary); text-transform:uppercase; font-size:var(--font-xs); font-weight:800; letter-spacing:.14em; margin-bottom:14px; }
.w-section__title { font-size:var(--font-h2); font-weight:800; letter-spacing:-.045em; }
.w-section__lead { color:var(--color-muted); max-width:660px; font-size:var(--font-lg); }
@media(max-width:575px){.w-container{width:calc(100% - 36px)}}


/* =================================================================
   04. BUTTONS
   ================================================================= */
.w-btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; padding:13px 24px; font-family:var(--font-heading); font-size:14px; font-weight:700; border-radius:var(--radius-md); border:1px solid transparent; transition:background var(--speed-fast),color var(--speed-fast),transform var(--speed-fast); }
.w-btn:hover { transform:translateY(-2px); }
.w-btn--primary { background:var(--color-primary); color:white; box-shadow:0 10px 24px rgba(7,95,245,.16); }
.w-btn--primary:hover { background:var(--color-primary-hover); color:white; }
.w-btn--outline { background:white; border-color:#a9c8ff; color:var(--color-primary); }
.w-btn--outline:hover { border-color:var(--color-primary); color:var(--color-primary-hover); }
.w-btn--dark { background:var(--color-ink); color:white; }
.w-btn--dark:hover { color:white; background:#1b2c5e; }
.w-btn--sm { min-height:40px; padding:9px 16px; }
.w-btn--lg { min-height:60px; padding:17px 30px; }


/* =================================================================
   05. BADGES
   ================================================================= */
.w-badge { display:inline-flex; align-items:center; gap:7px; background:var(--color-primary-soft); color:var(--color-primary); border-radius:var(--radius-pill); padding:9px 16px; font-family:var(--font-heading); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }


/* =================================================================
   06. CARDS
   ================================================================= */
.w-card { height:100%; padding:32px; border:1px solid var(--color-line); background:var(--color-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); transition:transform var(--speed-normal),box-shadow var(--speed-normal); }
.w-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-float); }
.w-card__icon { width:52px; height:52px; display:grid; place-items:center; border-radius:var(--radius-md); background:var(--color-primary-soft); color:var(--color-primary); font-size:21px; margin-bottom:24px; }
.w-card__title { font-size:19px; font-weight:700; margin-bottom:10px; }
.w-card__text { color:var(--color-muted); font-size:14px; margin-bottom:0; }


/* =================================================================
   07. FORMS
   ================================================================= */
.w-field { display:flex; flex-direction:column; gap:7px; margin-bottom:20px; }
.w-field__label { font-weight:600; font-size:13px; color:var(--color-ink); }
.w-input,.w-select,.w-textarea { display:block; width:100%; min-height:50px; background:white; color:var(--color-ink); border:1px solid #dce5f3; padding:12px 15px; border-radius:var(--radius-sm); outline:none; transition:border-color var(--speed-fast),box-shadow var(--speed-fast); }
.w-textarea { min-height:130px; resize:vertical; }
.w-input:focus,.w-select:focus,.w-textarea:focus { border-color:var(--color-primary); box-shadow:0 0 0 4px rgba(7,95,245,.09); }
.w-input::placeholder,.w-textarea::placeholder { color:#93a0b5; }
.w-field__help { color:var(--color-muted); font-size:12px; }


/* =================================================================
   08. HEADER
   ================================================================= */
/* Westonik — layout/header.css */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.97);border-bottom:1px solid #edf1f7;backdrop-filter:blur(18px)}
.header-container{width:min(1524px,calc(100% - 60px));margin:auto;display:flex;align-items:center;min-height:80px;gap:30px}
.brand{display:inline-flex;align-items:center;flex:none;gap:9px;color:var(--navy);font-weight:800;font-size:24px;letter-spacing:-1.5px;white-space:nowrap}.brand:hover{color:var(--navy)}
.brand-symbol{font-size:36px;line-height:1;font-weight:800;letter-spacing:-6px;padding-right:6px;color:var(--blue);font-family:var(--font-heading)}
/* Replace the sample wordmark with your original, unedited logo image:
<img src="assets/westonik-official-logo.png" alt="Westonik" class="official-logo"> */
.official-logo{height:41px;width:auto;max-width:200px;object-fit:contain}
.desktop-nav{display:flex;align-items:center;gap:3px;margin:0 auto;align-self:stretch}
.nav-entry{display:flex;align-items:center}.nav-trigger,.nav-direct{height:100%;min-height:80px;display:inline-flex;align-items:center;gap:10px;padding:0 17px;background:none;border:0;color:var(--navy);font-size:13.5px;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}
.nav-trigger .chevron{font-size:10px;color:#536582;transition:transform .2s}.nav-trigger[aria-expanded=true] .chevron{transform:rotate(180deg)}
.nav-trigger:hover,.nav-direct:hover,.nav-trigger[aria-expanded=true]{color:var(--blue)}
.nav-trigger::after,.nav-direct::after{content:"";position:absolute;bottom:0;left:17px;right:17px;height:3px;border-radius:3px 3px 0 0;background:var(--blue);transform:scaleX(0);transition:transform .2s}
.nav-trigger:hover::after,.nav-trigger[aria-expanded=true]::after,.nav-direct:hover::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:22px;margin-left:auto;white-space:nowrap}.icon-button{border:0;background:transparent;color:var(--navy);width:37px;height:42px;display:grid;place-items:center;font-size:18px;cursor:pointer}.icon-button:hover{color:var(--blue)}
.header-separator{height:26px;width:1px;background:var(--line)}.client-login{color:var(--navy);font-size:13px;font-weight:500}.client-login:hover{color:var(--blue)}
.header-cta{height:49px;padding:0 22px;display:flex;align-items:center;gap:11px;border-radius:13px;background:#075cf4;color:white;font-size:13px;font-weight:600;box-shadow:0 10px 24px rgba(7,95,245,.17)}.header-cta:hover{background:#004cdd;color:white}.header-cta i{font-size:14px}
.hamburger{display:none;border:0;background:transparent;font-size:21px;color:var(--navy);width:40px;height:42px;cursor:pointer}

/* Token-powered overrides */
.site-header { min-height:var(--header-height); }
.nav-trigger,.nav-direct,.client-login,.header-cta { font-family:var(--font-heading); }
.header-cta { background:var(--color-primary); }


/* =================================================================
   09. DESKTOP MEGA MENU
   ================================================================= */
/* Westonik — components/mega-menu.css */
.mega-backdrop{position:fixed;inset:80px 0 0;background:rgba(6,20,53,.20);z-index:999;opacity:0;visibility:hidden;transition:.2s;pointer-events:none}.mega-backdrop.active{opacity:1;visibility:visible;pointer-events:auto}
.mega-shell{position:absolute;top:100%;left:0;width:100%;background:white;box-shadow:var(--panelshadow);border-top:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-9px);transition:opacity .19s,transform .19s,visibility .19s;pointer-events:none;z-index:1001}
.mega-shell.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.mega-container{max-width:1370px;margin:0 auto;padding:33px 24px 38px}.mega-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.mega-eyebrow{font-size:10px;letter-spacing:2px;color:var(--blue);font-weight:700;text-transform:uppercase;margin-bottom:7px}.mega-heading h2{font-size:23px;letter-spacing:-.8px;font-weight:700;margin:0}.mega-all{font-size:12px;font-weight:600;color:var(--blue)}
.mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 290px;gap:12px}.mega-group{display:flex;flex-direction:column;gap:7px}.mega-group-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#8a97ab;padding:2px 10px 9px}.mega-link{display:flex;align-items:flex-start;gap:13px;border-radius:12px;padding:12px 10px;color:var(--navy);transition:background .15s,transform .15s}.mega-link:hover{background:#f0f6ff;color:var(--navy);transform:translateX(2px)}.mega-link-icon{display:grid;place-items:center;flex:0 0 39px;height:39px;border-radius:11px;background:#eaf2ff;color:var(--blue);font-size:16px}.mega-link strong{display:block;font-size:12.5px;font-weight:600;line-height:1.4;margin:1px 0 4px}.mega-link small{display:block;color:#79869a;font-size:10.5px;line-height:1.55}
.mega-promo{background:linear-gradient(145deg,#eff6ff,#dcecff);border:1px solid #d5e6ff;border-radius:18px;padding:25px 23px;display:flex;flex-direction:column;justify-content:space-between;min-height:250px}.promo-mark{height:46px;width:46px;border-radius:12px;display:grid;place-items:center;background:white;color:var(--blue);font-size:21px}.mega-promo h3{font-size:20px;font-weight:700;letter-spacing:-.6px;line-height:1.4;margin:20px 0 8px}.mega-promo p{font-size:11.5px;color:#657693;line-height:1.8;margin-bottom:15px}.promo-link{font-size:12px;font-weight:700;color:var(--blue)}
.mega-footer{border-top:1px solid var(--line);margin-top:25px;padding-top:17px;display:flex;justify-content:space-between;color:#8793a8;font-size:11px}.mega-footer a{color:var(--blue);font-weight:600}


/* =================================================================
   10. MOBILE SLIDE NAVIGATION
   ================================================================= */
/* Westonik — components/mobile-navigation.css */
.mobile-shade{position:fixed;inset:0;background:rgba(5,15,44,.5);z-index:1200;opacity:0;visibility:hidden;transition:.3s}.mobile-shade.active{opacity:1;visibility:visible}
.mobile-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:white;z-index:1201;transform:translateX(103%);visibility:hidden;transition:transform .31s cubic-bezier(.2,.7,.2,1),visibility .31s;overflow:hidden;box-shadow:-15px 0 60px rgba(7,23,52,.12)}.mobile-drawer.open{transform:translateX(0);visibility:visible}
.mobile-top{height:77px;display:flex;justify-content:space-between;align-items:center;padding:0 22px;border-bottom:1px solid var(--line)}.mobile-close{width:36px;height:36px;border:0;background:#f0f5ff;border-radius:10px;color:var(--navy);font-size:17px}
.mobile-stage{position:relative;height:calc(100% - 77px);overflow:hidden}.mobile-screen{position:absolute;inset:0;overflow-y:auto;background:white;padding:22px 23px 34px;transform:translateX(103%);transition:transform .32s cubic-bezier(.2,.7,.2,1);visibility:hidden}.mobile-screen.current{transform:translateX(0);visibility:visible}.mobile-screen.to-left{transform:translateX(-30%);visibility:hidden}
.mobile-caption{font-size:10px;font-weight:700;letter-spacing:1.7px;color:#8a98ae;text-transform:uppercase;margin:7px 0 17px}.mobile-line,.mobile-single{display:flex;justify-content:space-between;align-items:center;width:100%;padding:18px 3px;border:0;border-bottom:1px solid #eff2f7;background:transparent;color:var(--navy);font-size:15px;font-weight:600;text-align:left}.mobile-line i{color:#8290a4;font-size:12px}.mobile-single:hover,.mobile-line:hover{color:var(--blue)}.mobile-back{display:flex;align-items:center;gap:11px;border:0;background:transparent;padding:2px 0 23px;font-size:13px;font-weight:600;color:var(--blue)}.mobile-subtitle{font-size:23px;font-weight:700;letter-spacing:-.7px;margin-bottom:20px}.mobile-group-name{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:#8a97ac;font-weight:700;margin:25px 0 9px}.mobile-item{display:flex;align-items:center;gap:13px;padding:12px 0;color:var(--navy);border-bottom:1px solid #f0f3f9}.mobile-item:hover{color:var(--blue)}.mobile-item .mega-link-icon{flex-basis:38px;height:38px}.mobile-item strong{font-size:12px;display:block}.mobile-item small{font-size:10px;line-height:1.6;color:#8a96aa;display:block;margin-top:3px}.mobile-cta{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:30px;padding:16px;color:white;border-radius:11px;background:var(--blue);font-size:13px;font-weight:600}.mobile-cta:hover{color:white}.mobile-meta{display:flex;gap:20px;margin-top:27px;font-size:12px}.mobile-meta a{color:#61718c}


/* =================================================================
   11. SEARCH OVERLAY
   ================================================================= */
/* Westonik — components/search.css */
.search-screen{position:fixed;inset:0;background:rgba(6,16,43,.73);z-index:1400;display:flex;justify-content:center;align-items:flex-start;padding:15vh 20px 20px;visibility:hidden;opacity:0;transition:.2s}.search-screen.open{visibility:visible;opacity:1}.search-box{background:#fff;width:min(660px,100%);border-radius:19px;padding:27px;box-shadow:0 30px 90px #06132f45}.search-row{display:flex;align-items:center;gap:14px}.search-row input{border:0;outline:0;font-size:17px;min-width:0;flex:1;color:var(--navy)}.search-row button{background:#edf3fd;border:0;border-radius:8px;width:32px;height:32px}.search-hint{margin-top:19px;font-size:11px;color:#8b98ae}


/* =================================================================
   12. HERO SECTION
   ================================================================= */
/* ================================
       HERO SECTION
    ================================= */

    .wh-hero {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: #fcfdff;
    }

    .wh-stage {
      position: relative;
      padding: 10px 0 45px;
      overflow: hidden;
      isolation: isolate;
    }

    /* MATH GRID BACKGROUND */

    .wh-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;

      opacity: var(--wh-grid-opacity);

      background-image:
        linear-gradient(
          #2776e6 1px,
          transparent 1px
        ),
        linear-gradient(
          90deg,
          #2776e6 1px,
          transparent 1px
        );

      background-size: 48px 48px;

      -webkit-mask-image:
        linear-gradient(
          90deg,
          #000,
          transparent 50%,
          #000
        );

      mask-image:
        linear-gradient(
          90deg,
          #000,
          transparent 50%,
          #000
        );

      pointer-events: none;
    }

    /* SOFT BLUE CORNER GLOWS */

    .wh-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;

      background:
        radial-gradient(
          ellipse 30% 40% at 95% 14%,
          rgba(28,118,250,.17),
          transparent 100%
        ),
        radial-gradient(
          ellipse 26% 35% at 4% 92%,
          rgba(31,132,255,.12),
          transparent 100%
        ),
        radial-gradient(
          ellipse 22% 30% at 57% 43%,
          rgba(147,197,253,.12),
          transparent 100%
        );

      pointer-events: none;
    }

    .wh-container {
      width: min(
        var(--wh-container),
        calc(100% - 80px)
      );
      margin: 0 auto;
    }

    /* ================================
       TWO COLUMN LAYOUT
    ================================= */

    .wh-layout {
      display: grid;

      grid-template-columns:
        minmax(0, 1.01fr)
        minmax(0, .99fr);

      gap: clamp(30px, 4vw, 68px);

      align-items: center;
    }

    .wh-copy {
      min-width: 0;
      padding: 18px 0;
    }

    /* EYEBROW */

    .wh-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;

      padding: 9px 15px;

      background: #e8f1ff;
      border: 1px solid #d8e8ff;
      border-radius: 99px;

      color: var(--wh-brand);

      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1.7px;
      text-transform: uppercase;
    }

    .wh-eyebrow i {
      font-size: 13px;
    }

    /* TITLE */

    .wh-title {
      font-family: 'Plus Jakarta Sans', sans-serif;

      font-size: clamp(38px, 3.65vw, 66px);
      font-weight: 800;

      letter-spacing: -.065em;
      line-height: 1.12;

      max-width: 780px;

      margin: 24px 0 18px;

      color: var(--wh-ink);
    }

    .wh-title em {
      font-style: normal;
      color: var(--wh-brand);
    }

    /* DESCRIPTION */

    .wh-desc {
      font-size: clamp(13px, 1vw, 16px);
      line-height: 1.85;

      color: var(--wh-muted);

      max-width: 595px;
      margin: 0 0 24px;
    }

    /* ================================
       CALL TO ACTION BUTTONS
    ================================= */

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

    .wh-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 14px;

      padding: 14px 20px;

      border-radius: 12px;

      font-size: 12.5px;
      font-weight: 700;

      transition:
        background .25s,
        transform .25s,
        box-shadow .25s;

      text-decoration: none !important;
    }

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

    .wh-btn-primary {
      background: var(--wh-brand);
      color: #fff;

      box-shadow:
        0 12px 24px rgba(7,95,245,.16);
    }

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

    .wh-btn-secondary {
      color: var(--wh-brand);

      border: 1px solid #9abfff;
      background: rgba(255,255,255,.82);
    }

    .wh-btn-secondary:hover {
      color: var(--wh-brand);
      background: #edf5ff;
    }

    /* ================================
       HERO BENEFITS
    ================================= */

    .wh-benefits {
      display: grid;

      grid-template-columns:
        repeat(4, minmax(0, 1fr));

      gap: 12px;

      margin-top: clamp(22px, 3.2vh, 38px);

      max-width: 660px;
    }

    .wh-benefit {
      display: flex;
      align-items: center;
      gap: 9px;

      min-width: 0;
    }

    .wh-benefit-icon {
      flex-shrink: 0;

      width: 39px;
      height: 39px;

      border-radius: 12px;

      background: #e6f0ff;
      color: var(--wh-brand);

      display: grid;
      place-items: center;

      font-size: 17px;
    }

    .wh-benefit-label {
      font-size: 10.5px;
      font-weight: 700;
      line-height: 1.35;

      letter-spacing: -.02em;
      color: #18233d;
    }

    /* ================================
       TRUSTED CLIENTS
    ================================= */

    .wh-trusted {
      margin-top: clamp(22px, 4vh, 45px);
    }

    .wh-trusted-heading {
      font-size: 10px;
      font-weight: 800;

      letter-spacing: 1.8px;

      color: #657696;
      margin-bottom: 12px;
    }

    .wh-logos {
      display: block;

      width: min(100%, 600px);
      height: auto;

      object-fit: contain;
      object-position: left center;
    }

    /* ================================
       RIGHT HERO IMAGE
       NO CAROUSEL
    ================================= */

    .wh-visual {
      position: relative;

      display: flex;
      align-items: center;
      justify-content: center;

      min-width: 0;
      width: 100%;
    }

    .wh-visual::before {
      content: "";

      position: absolute;

      left: 8%;
      right: 4%;
      top: 12%;
      bottom: 5%;

      background:
        radial-gradient(
          ellipse,
          rgba(30,105,235,.16),
          transparent 70%
        );

      filter: blur(35px);

      pointer-events: none;
    }

    .wh-hero-image {
      position: relative;
      z-index: 1;

      display: block;

      width: 100%;
      height: auto;
      max-height: 460px;

      object-fit: contain;
    }

    /* ================================
       FOUR RECTANGULAR CARDS
    ================================= */

    .wh-brand-grid {
      display: grid;

      grid-template-columns:
        repeat(4, minmax(0, 1fr));

      gap: 16px;

      margin-top: 38px;
      padding-bottom: 10px;
    }

    .wh-brand-card {
      position: relative;

      display: flex;
      align-items: center;
      gap: 15px;

      min-width: 0;
      min-height: 100px;

      padding: 14px 12px;

      background: rgba(255,255,255,.92);

      border: 1px solid #e2eaf5;
      border-radius: 16px;

      box-shadow:
        0 5px 25px rgba(10,48,100,.035);

      text-decoration: none !important;

      transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
    }

    .wh-brand-card:hover {
      transform: translateY(-5px);

      border-color: #accdff;

      box-shadow:
        0 14px 35px rgba(7,95,229,.10);
    }

    /* BRAND ICON */

    .wh-brand-icon {
      flex-shrink: 0;

      width: 52px;
      height: 52px;

      display: flex;
      align-items: center;
      justify-content: center;

      border-radius: 14px;

      background: #eaf3ff;
      color: var(--wh-brand);

      font-size: 21px;

      transition:
        background .25s,
        color .25s;
    }

    .wh-brand-card:hover .wh-brand-icon {
      background: var(--wh-brand);
      color: #fff;
    }

    /* BRAND TEXT */

    .wh-brand-content {
      flex: 1;
      min-width: 0;
    }

    .wh-brand-category {
      display: block;

      margin-bottom: 5px;

      font-size: 9px;
      font-weight: 800;

      letter-spacing: 1.15px;
      text-transform: uppercase;

      color: var(--wh-brand);
    }

    .wh-brand-content h3 {
      margin: 0 0 5px;

      font-size: 16px;
      font-weight: 800;
      line-height: 1.3;

      letter-spacing: -.035em;

      color: var(--wh-ink);
    }

    .wh-brand-content p {
      margin: 0;

      font-size: 10.5px;
      line-height: 1.5;

      color: #76839a;
    }

    /* ARROW */

    .wh-brand-arrow {
      flex-shrink: 0;
      align-self: flex-start;

      font-size: 12px;

      color: #8292ad;

      transition:
        color .25s,
        transform .25s;
    }

    .wh-brand-card:hover .wh-brand-arrow {
      color: var(--wh-brand);
      transform: translate(2px, -2px);
    }

    .wh-brand-card:focus-visible,
    .wh-btn:focus-visible {
      outline: 3px solid var(--wh-brand);
      outline-offset: 3px;
    }

    /* ================================
       RESPONSIVE: TABLETS
    ================================= */

    @media (max-width: 1199px) {

      .wh-title {
        font-size: clamp(36px, 4vw, 52px);
      }

      .wh-brand-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }

      .wh-benefits {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }

    }

    /* ================================
       RESPONSIVE: SMALL TABLETS
    ================================= */

    @media (max-width: 991px) {

      .wh-stage {
        padding: 65px 0 35px;
      }

      .wh-container {
        width: calc(100% - 40px);
      }

      .wh-layout {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .wh-copy {
        padding: 0;
      }

      .wh-title {
        max-width: 750px;
      }

      .wh-visual {
        max-width: 650px;
        margin: 0 auto;
      }

      .wh-hero-image {
        max-height: 500px;
      }

      .wh-brand-grid {
        margin-top: 30px;
      }

    }

    /* ================================
       RESPONSIVE: MOBILE
    ================================= */

    @media (max-width: 575px) {

      .wh-stage {
        padding: 45px 0 30px;
      }

      .wh-container {
        width: calc(100% - 30px);
      }

      .wh-title {
        font-size: clamp(34px, 9vw, 43px);
        letter-spacing: -.055em;
        line-height: 1.15;
      }

      .wh-desc {
        font-size: 13px;
        line-height: 1.8;
      }

      .wh-actions {
        gap: 10px;
      }

      .wh-btn {
        padding: 13px 15px;
        font-size: 11px;
        gap: 8px;
      }

      .wh-benefits {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 15px;
      }

      .wh-visual {
        margin-top: 5px;
      }

      .wh-brand-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 25px;
      }

      .wh-brand-card {
        min-height: 95px;
        padding: 16px;
      }

      .wh-brand-icon {
        width: 47px;
        height: 47px;
      }

    }

    @media (prefers-reduced-motion: reduce) {
      .wh-btn,
      .wh-brand-card,
      .wh-brand-icon,
      .wh-brand-arrow {
        transition: none;
      }
    }





/* ========================================
   WHY WESTONIK - CTA BUTTONS
======================================== */

.wx-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 32px;
}



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

/* PRIMARY BUTTON */

.wx-btn-primary {
  background: #075fe5;
  color: #fff;

  box-shadow: 0 10px 24px rgba(7, 95, 229, .16);
}

.wx-btn-primary:hover {
  background: #064fc3;
  color: #fff;
  box-shadow: 0 14px 28px rgba(7, 95, 229, .22);
}

/* SECONDARY BUTTON */

.wx-btn-outline {
  background: #fff;
  color: #075fe5;
  border-color: #b9d4fb;
}

.wx-btn-outline:hover {
  background: #edf5ff;
  border-color: #075fe5;
  color: #075fe5;
}

.wx-btn:focus-visible {
  outline: 3px solid #075fe5;
  outline-offset: 3px;
}

/* ========================================
   CLIENT LOGO MARQUEE
======================================== */

.wx-clients {
  position: relative;
  margin-top: 76px;
  padding: 0 0 10px;
  width: 100%;
  min-width: 0;
}

/* SECTION LABEL */

.wx-clients-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 29px;
}

.wx-clients-label {
  flex: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #71819b;
  text-align: center;
}

.wx-clients-line {
  display: block;
  width: 55px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    #c7d8ed,
    transparent
  );
}

/* MARQUEE VIEWPORT */

.wx-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;

  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );

  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* INFINITE SCROLL TRACK */

.wx-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: wxMarqueeScroll 28s linear infinite;
  will-change: transform;
}

.wx-marquee-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
}

/* INDIVIDUAL LOGO CONTAINERS */

.wx-client-logo {
  flex: 0 0 auto;

  width: 180px;
  height: 78px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(219, 229, 243, .65);
  background: rgba(255, 255, 255, .65);
  border-radius: 12px;

  padding: 15px 23px;

  transition:
    background .25s,
    border-color .25s,
    box-shadow .25s;
}

.wx-client-logo img {
  display: block;
  max-width: 100%;
  max-height: 47px;
  width: auto;
  height: auto;
  object-fit: contain;

  filter: grayscale(100%);
  opacity: .70;

  transition:
    filter .3s ease,
    opacity .3s ease,
    transform .3s ease;
}

.wx-client-logo:hover {
  background: #fff;
  border-color: #c7dcfb;
  box-shadow: 0 8px 25px rgba(15, 66, 130, .07);
}

.wx-client-logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.04);
}

/* LOOP ANIMATION
   50% = EXACTLY ONE LOGO GROUP */

@keyframes wxMarqueeScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Pause only when hovered or keyboard-focused.
   Remove these rules for strictly continuous motion. */
.wx-marquee:hover .wx-marquee-track,
.wx-marquee:focus-within .wx-marquee-track {
  animation-play-state: paused;
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 991px) {

  .wx-clients {
    margin-top: 60px;
  }

  .wx-marquee-track {
    animation-duration: 24s;
  }

  .wx-client-logo {
    width: 155px;
    height: 70px;
    padding: 13px 19px;
  }

  .wx-marquee-group {
    gap: 18px;
    padding-right: 18px;
  }

}

@media (max-width: 575px) {

  .wx-actions {
    margin-top: 26px;
    gap: 10px;
  }

  .wx-btn {
    padding: 12px 15px;
    font-size: 11px;
    min-height: 45px;
  }

  .wx-clients {
    margin-top: 48px;
  }

  .wx-clients-header {
    gap: 10px;
    margin-bottom: 22px;
  }

  .wx-clients-label {
    font-size: 8.5px;
    letter-spacing: 1.2px;
  }

  .wx-clients-line {
    width: 25px;
  }

  .wx-marquee-track {
    animation-duration: 22s;
  }

  .wx-marquee-group {
    gap: 12px;
    padding-right: 12px;
  }

  .wx-client-logo {
    width: 138px;
    height: 64px;
    padding: 12px 16px;
    border-radius: 10px;
  }

  .wx-client-logo img {
    max-height: 38px;
  }

}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
  .wx-marquee-track {
    animation: none;
  }

  .wx-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .wx-btn,
  .wx-client-logo,
  .wx-client-logo img {
    transition: none;
  }
}




/* ========= FOLLOWING CONTENT / MOBILE ========= */
.demo-next{padding:90px 24px;min-height:280px;background:#071022;text-align:center;color:white}.demo-next h2{font:800 clamp(30px,4vw,48px)/1.15 'Plus Jakarta Sans',sans-serif}
@media(max-width:1200px){.wh-container{width:calc(100% - 50px)}.wh-benefits{grid-template-columns:repeat(2,1fr);max-width:450px}.wh-title{font-size:clamp(35px,4vw,57px)}.wh-trusted{margin-top:25px}.wh-visual{height:min(580px,70svh)}}
@media(max-width:991px){:root{--wh-nav-height:74px}.wh-hero{height:auto!important}.wh-stage{position:relative;top:auto;height:auto;min-height:0;padding:52px 0 64px;overflow:hidden}.wh-layout{grid-template-columns:1fr;gap:40px}.wh-copy{padding:0}.wh-title{max-width:760px}.wh-visual{width:min(100%,660px);height:min(570px,65vw);min-height:360px;margin:0 auto}.wh-benefits{max-width:660px;grid-template-columns:repeat(4,1fr)}.wh-logos{max-width:600px}.wh-scroll-hint{display:none}}
@media(max-width:600px){.wh-container{width:calc(100% - 36px)}.wh-stage{padding:38px 0 45px}.wh-title{font-size:clamp(34px,9vw,47px);margin:19px 0 14px}.wh-actions{gap:9px}.wh-btn{padding:13px 14px;font-size:11px}.wh-benefits{gap:15px 10px;grid-template-columns:repeat(2,1fr);margin-top:25px}.wh-benefit-label{font-size:11px}.wh-trusted{margin-top:27px}.wh-visual{height:420px;min-height:0;padding-right:21px}.wh-image-meta{left:19px;right:17px;bottom:20px}.wh-image-meta p{font-size:11px}.wh-dots{gap:11px}.wh-logos{width:100%}}
@media(prefers-reduced-motion:reduce){.wh-image-card,.wh-dot,.wh-btn{transition:none!important}}



/* =================================================================
   13. FOOTER
   ================================================================= */
.w-footer { background:var(--color-footer); color:#b8c4df; padding:65px 0 22px; }
.w-footer__title { color:white; font:700 15px var(--font-heading); margin-bottom:20px; }
.w-footer a { display:block; color:#b8c4df; font-size:14px; margin-bottom:12px; }
.w-footer a:hover { color:white; }
.w-footer__bottom { border-top:1px solid #263454; padding-top:22px; margin-top:48px; font-size:12px; color:#99a8c9; }


/* =================================================================
   14. UTILITIES
   ================================================================= */
/* Westonik — base/utilities.css */
body.no-scroll{overflow:hidden}


/* =================================================================
   15. RESPONSIVE
   ================================================================= */
/* Westonik — base/responsive.css */
@media (max-width:1399px){.header-container{width:calc(100% - 48px);gap:16px}.nav-trigger,.nav-direct{padding:0 10px;font-size:12px}.header-actions{gap:14px}.header-cta{padding:0 16px}.brand{font-size:21px}.brand-symbol{font-size:32px}}
@media (max-width:1099px){.desktop-nav,.header-actions .header-separator,.client-login{display:none}.header-container{min-height:74px}.hamburger{display:block}.header-actions{margin-left:auto;gap:9px}.header-cta{height:43px}.mega-shell,.mega-backdrop{display:none}}
@media (max-width:540px){.header-container{width:calc(100% - 32px)}.brand{font-size:21px}.header-actions .header-cta{display:none}.demo-hero{padding:72px 24px}.demo-hero h1{letter-spacing:-1.7px}.mobile-drawer{width:min(420px,100%)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}}


/* =================================================================
   16. CONTEXTUAL ICON THEMES
   Menu theme follows data-menu; icon variants are reusable throughout.
   Change values here to change ALL icons of that category.
   ================================================================= */
:root {
  --icon-service: #0866f5;
  --icon-service-bg: #e9f2ff;
  --icon-product: #7c3aed;
  --icon-product-bg: #f2eaff;
  --icon-industry: #008c83;
  --icon-industry-bg: #e1f8f3;
  --icon-company: #e17419;
  --icon-company-bg: #fff2e5;
}
/* Category palettes for full-width navigation, category promos, and mobile items. */
.mega-shell[data-theme="services"],
.mobile-screen[data-theme="services"] { --menu-icon: var(--icon-service); --menu-icon-bg: var(--icon-service-bg); }
.mega-shell[data-theme="products"],
.mobile-screen[data-theme="products"] { --menu-icon: var(--icon-product); --menu-icon-bg: var(--icon-product-bg); }
.mega-shell[data-theme="industries"],
.mobile-screen[data-theme="industries"] { --menu-icon: var(--icon-industry); --menu-icon-bg: var(--icon-industry-bg); }
.mega-shell[data-theme="company"],
.mobile-screen[data-theme="company"] { --menu-icon: var(--icon-company); --menu-icon-bg: var(--icon-company-bg); }
.mega-shell[data-theme] .mega-link-icon,
.mobile-screen[data-theme] .mega-link-icon {
  color: var(--menu-icon);
  background: var(--menu-icon-bg);
}
.mega-shell[data-theme] .promo-mark { color: var(--menu-icon); }
/* Use on reusable cards on any page: w-card__icon--service/product/industry */
.w-card__icon--service { color: var(--icon-service); background: var(--icon-service-bg); }
.w-card__icon--product { color: var(--icon-product); background: var(--icon-product-bg); }
.w-card__icon--industry { color: var(--icon-industry); background: var(--icon-industry-bg); }
.w-card__icon--company { color: var(--icon-company); background: var(--icon-company-bg); }
/* Icon for search field: avoids inline CSS */
.search-row > i { color: var(--color-primary, #075ff5); }



/* 03. STICKY SECTION + TRACK */
.ws-services{position:relative;background:var(--ws-bg);color:var(--ws-text);isolation:isolate; /* height calculated by JS on desktop */}
.ws-services .container{max-width:1250px}
.ws-sticky{position:sticky;top:var(--ws-sticky-top);height:calc(100svh - var(--ws-sticky-top));min-height:620px;overflow:hidden;background:var(--ws-bg);display:flex;flex-direction:column;justify-content:center}
.ws-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 52% 58% at 51% 49%,rgba(26,111,255,.29) 0%,rgba(11,76,184,.18) 35%,rgba(7,40,104,.06) 65%,transparent 82%),radial-gradient(ellipse 42% 50% at 50% 48%,rgba(58,144,255,.14),transparent 75%);filter:blur(16px)}
.ws-inner{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;gap:clamp(16px,2.5vh,27px)}
.ws-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;padding-top:15px}
.ws-heading-copy{max-width:850px}
.ws-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.16em;color: var(--color-primary);font-weight:700;margin-bottom:14px}
.ws-status-dot{width:7px;height:7px;background:#4f9dff;border-radius:50%;box-shadow:0 0 0 5px rgba(79,157,255,.11)}
.ws-heading-rule{width:26px;height:1px;background:rgba(140,183,255,.45)}
.ws-heading h2{font-size:clamp(33px,3.55vw,54px);line-height:1.14;font-weight:800;margin:0 0 12px; color:#fff}
.ws-heading h2 span{color: var(--color-primary);}
.ws-heading p{color:var(--ws-text-muted);font-size:clamp(13px,1.05vw,15px);line-height:1.72;max-width:700px;margin:0}
.ws-heading-side{display:flex;align-items:center;gap:14px;flex-shrink:0;padding-bottom:5px;color:var(--ws-text-muted);font-size:11px;line-height:1.5}
.ws-side-number{font-size:48px;font-weight:800;letter-spacing:-.06em;color:rgba(190,211,245,.2);line-height:1}
.ws-track-viewport{width:100%;overflow:hidden;outline:none;touch-action:pan-y}
.ws-track-viewport:focus-visible{outline:2px solid var(--ws-blue);outline-offset:-2px}
.ws-track{display:flex;align-items:stretch;gap:var(--ws-card-gap);width:max-content;padding:4px var(--ws-edge) 10px;transform:translate3d(0,0,0);will-change:transform}
.ws-slide{width:var(--ws-card-width);flex:0 0 var(--ws-card-width);min-width:0}
/* 04. ORIGINAL WHITE PORTRAIT CARDS — preserved visual design */
.ws-card{position:relative;background:#fff; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20350%20438%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M18%201H278Q292%201%20292%2015V35Q292%2051%20308%2051H333Q349%2051%20349%2067V420Q349%20437%20332%20437H18Q1%20437%201%20420V18Q1%201%2018%201Z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23e1e6ec%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat; border-radius:26px;padding:clamp(26px,3vh,34px) clamp(22px,2vw,30px) clamp(50px,5.5vh,60px);box-shadow:0 18px 45px -10px rgba(0,0,0,.35);min-height:clamp(480px,54vh,550px);height:100%;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .35s ease}



.ws-card:hover{transform:translateY(-8px);box-shadow:0 25px 50px -8px rgba(22,119,255,.25)}
.ws-card.is-active{border-color:rgba(22,119,255,.8);box-shadow:0 25px 55px -10px rgba(22,119,255,.28)}

.ws-number {
    position: absolute;
    z-index: 2;
    top: 9px;
    right: -8px;
    width: 38px;
    color: #9ba6b2;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}



.ws-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:clamp(14px,2vh,22px);background:var(--ws-accent-soft);color:var(--ws-accent)}
.ws-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ws-card h3{font-size:22px;font-weight:700;color:#0f172a;line-height:1.25;margin:0 0 10px;letter-spacing:-.025em}
.ws-description{font-size:14px;line-height:1.6;color:#475569;margin-bottom:clamp(14px,2vh,20px);min-height:0}
.ws-features{background:#f8fafc;border:1px solid #edf2f7;border-radius:14px;padding:15px 18px;list-style:none;display:flex;flex-direction:column;gap:clamp(7px,1.2vh,10px)}
.ws-features li{font-size:13.5px;font-weight:600;color:#1e293b;display:flex;align-items:center;gap:10px}
.ws-features li svg{width:15px;height:15px;flex-shrink:0;fill:none;stroke:var(--ws-accent);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}


.ws-link {
    position: absolute;
    z-index: 2;
    right: 25px;
    bottom: 21px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #17212e;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}



.ws-link:hover{color:#1677ff;padding-right:20px}
.ws-link svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.5;fill:none;transition:transform .25s ease}
.ws-link:hover svg{transform:translateX(3px)}
/* 05. PROGRESS + CTA */
.ws-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-bottom:12px}
.ws-progress-area{width:min(360px,52%)}
.ws-progress-label{display:block;font-size:10px;letter-spacing:.13em;font-weight:700;color:#8ba0bd;margin-bottom:11px}
.ws-current{color:#fff;margin-left:12px}
.ws-progress{height:3px;background:#283751;border-radius:5px;overflow:hidden}
.ws-progress-fill{display:block;width:0;height:100%;background:linear-gradient(90deg,#2475ff,#78bcff);transition:width .08s linear}
.ws-scroll-hint{display:inline-flex;align-items:center;gap:10px;font-size:11px;color:#97a9c6}.ws-scroll-hint-icon{font-size:20px;color:#71a7ff}
.ws-after{background:#070c18;color:#fff;border-top:1px solid var(--ws-line);padding:65px 0 85px}
.ws-after-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
.ws-after h2{font-size:clamp(25px,3vw,39px);font-weight:800;letter-spacing:-.045em;margin:10px 0}
.ws-after p{font-size:13px;color:#9cabca;margin:0}
.ws-after-eyebrow{font-size:10px;letter-spacing:.15em;color:#82b0ff;font-weight:700}
.ws-after-actions{display:flex;flex-wrap:wrap;gap:12px}
.ws-btn{white-space:nowrap;display:inline-flex;align-items:center;gap:13px;border-radius:11px;padding:15px 20px;font-size:12px;font-weight:700;transition:transform .2s,background .2s}
.ws-btn:hover{transform:translateY(-2px)}.ws-btn-primary{background:#0866f5;color:#fff}.ws-btn-primary:hover{background:#247aff;color:#fff}.ws-btn-outline{border:1px solid #384861;color:#fff}.ws-btn-outline:hover{border-color:#659eff;color:#fff}
/* 06. SMALL SCREENS + REDUCED MOTION */
@media(max-width:991px){
 .ws-services{height:auto!important}
 .ws-sticky{position:relative;top:auto;height:auto;min-height:0;padding:75px 0 55px}
 .ws-heading{padding-top:0;display:block}.ws-heading-side{display:none}
 .ws-inner{gap:28px}
 .ws-track-viewport{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x mandatory;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
 .ws-track-viewport::-webkit-scrollbar{display:none}
 .ws-track{transform:none!important;will-change:auto}
 .ws-slide{scroll-snap-align:start;width:min(82vw,380px);flex-basis:min(82vw,380px)}
 .ws-card{min-height:480px}
 .ws-scroll-hint .ws-hint-text{font-size:0}.ws-scroll-hint .ws-hint-text::after{content:'Swipe cards';font-size:11px}
 .ws-after-inner{align-items:flex-start;flex-direction:column}
}
@media(max-width:575px){:root{--ws-edge:20px;--ws-card-gap:14px}
 .ws-sticky{padding:60px 0 42px}.ws-heading h2{font-size:34px}.ws-heading p{font-size:13px}
 .ws-card{min-height:480px;padding:26px 22px 60px}
 .ws-progress-area{width:57%}.ws-scroll-hint{font-size:10px}
 .ws-after{padding:48px 0 65px}.ws-after-actions{width:100%}.ws-btn{justify-content:center}
}
@media(max-height:740px) and (min-width:992px){.ws-sticky{min-height:0}.ws-inner{gap:12px}.ws-heading h2{font-size:clamp(28px,3vw,43px);margin-bottom:6px}.ws-heading p{font-size:12px}.ws-card{min-height:440px;padding:22px 22px 55px}.ws-icon{width:50px;height:50px;margin-bottom:12px}.ws-icon svg{height:22px;width:22px}.ws-description{margin-bottom:10px}.ws-features{padding-top:10px;gap:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ws-track,.ws-card,.ws-progress-fill,.ws-btn{transition:none!important}}
/* Sticky section below navigation */
.ws-services .ws-sticky {
  position: sticky;
  top: var(--ws-header-offset);

  height: calc(100svh - var(--ws-header-offset));
  min-height: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding-top: var(--ws-top-space);
  padding-bottom: 24px;

  overflow: hidden;
}

/* Keep the heading visible */
.ws-services .ws-header {
  position: relative;
  z-index: 5;
  flex-shrink: 0;
}

/* Maintain anchor scroll spacing */
#services {
  scroll-margin-top: var(--ws-header-offset);
}

@media (max-width: 991px) {
  :root {
    --ws-header-offset: 74px;
    --ws-top-space: 24px;
  }

  .ws-services .ws-sticky {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
}

/* ==========================================
   WESTONIK SERVICES — SPACING REFINEMENTS
   ========================================== */

/* Sticky section remains below the navigation */


.ws-services .ws-sticky {
  position: sticky;
  top: var(--ws-header-offset);

  height: calc(100svh - var(--ws-header-offset));

  padding-top: var(--ws-header-offset-top);
  padding-bottom: 20px;
  box-sizing: border-box;
  justify-content: flex-start;
}


/* Spacing between heading and cards */
.ws-services .ws-header {
  margin-bottom: 24px;
  flex-shrink: 0;
}

/* Prevent the card carousel from extending
   beyond the sticky stage */
.ws-services .ws-track-viewport {
  min-height: 0;
}

/* Make cards fit shorter laptop screens */
@media (min-width: 992px) and (max-height: 850px) {
  .ws-services .ws-sticky {
    padding-top: 24px;
    padding-bottom: 16px;
  }

  .ws-services .ws-header {
    margin-bottom: 16px;
  }

  .ws-services .ws-card {
    min-height: 0;
    height: min(490px, 58vh);
    padding-top: 22px;
    padding-bottom: 44px;
  }

  .ws-services .ws-icon {
    margin-bottom: 12px;
  }

  .ws-services .ws-description {
    margin-bottom: 12px;
  }
}

/* Mobile: keep natural vertical section flow */
@media (max-width: 991px) {
  .ws-services .ws-sticky {
    position: relative;
    top: auto;
    height: auto;
    padding: 60px 0 45px;
  }

  .ws-services .ws-header {
    margin-bottom: 24px;
  }

  .ws-services .ws-card {
    height: auto;
  }
}
.ws-services .ws-title {
  color: #ffffff;
}

.ws-services .ws-title span {
  color: #65a5ff;
}


.wx-section{--wx-blue:#0768f7;--wx-navy:#081638;--wx-text:#435477;position:relative;overflow:hidden;background:radial-gradient(ellipse at 0% 32%,rgba(46,132,255,.075),transparent 27%),radial-gradient(ellipse at 100% 25%,rgba(46,132,255,.045),transparent 28%),#fbfdff;padding:80px 0 70px;color:var(--wx-navy);font-family:Poppins,sans-serif}


.wx-section *{box-sizing:border-box}.wx-container{max-width:1740px;padding-left:48px;padding-right:48px;position:relative;z-index:2}.wx-dots{position:absolute;width:160px;height:260px;background-image:radial-gradient(#8fc2ff 1px,transparent 1.2px);background-size:13px 13px;opacity:.53;pointer-events:none}.wx-dots-left{left:-40px;top:0}.wx-dots-right{right:-50px;top:0}.wx-intro-row{margin-bottom:25px}.wx-office-wrap{position:relative;margin:0 27px 0 54px}.wx-office-img{display:block;width:100%;height:425px;object-fit:cover;object-position:center;border-radius:19px;border:5px solid white;box-shadow:0 15px 40px rgba(24,73,128,.15)}.wx-float{position:absolute;display:flex;align-items:center;gap:12px;padding:15px 19px;background:rgba(255,255,255,.98);border:1px solid #c9deff;border-radius:17px;box-shadow:0 9px 25px rgba(9,65,145,.15);transform:rotate(-5deg);white-space:nowrap}.wx-float-exp{top:31px;left:-42px}.wx-float-project{bottom:21px;left:-43px;transform:rotate(-6deg)}.wx-float-trust{right:-12px;bottom:55px;transform:rotate(4deg)}.wx-floating-icon{font-size:23px;color:var(--wx-blue)}.wx-float strong{display:block;font-size:24px;font-weight:800;line-height:1.2}.wx-float small{display:block;font-size:12px;color:#586685}.wx-float .wx-trust-title{font-size:15px}.wx-copy-col{padding-left:27px;padding-right:26px}.wx-eyebrow{color:var(--wx-blue);font-size:12px;font-weight:700;letter-spacing:3px;margin-bottom:17px;display:flex;align-items:center;gap:13px}.wx-eyebrow span{display:inline-block;background:#338eff;width:53px;height:2px}.wx-title{font-size:clamp(32px,2.75vw,50px);font-weight:800;letter-spacing:-1.7px;line-height:1.13;margin:0 0 15px}.wx-title em{color:var(--wx-blue);font-style:normal}.wx-intro{font-size:14px;line-height:1.85;color:var(--wx-text);margin:0 0 15px}.wx-benefit-grid{margin-left:-7px;margin-right:-7px}.wx-benefit-grid>div{padding-left:7px;padding-right:7px}.wx-benefit{height:100%;min-height:91px;display:flex;align-items:flex-start;gap:13px;padding:14px 12px;background:rgba(255,255,255,.83);border:1px solid #e3edfb;border-radius:15px;box-shadow:0 8px 23px rgba(30,90,156,.045)}.wx-benefit-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:47px;height:47px;border-radius:14px;background:#eaf3ff;color:var(--wx-blue);font-size:21px}.wx-benefit h3{font-size:12px;font-weight:700;line-height:1.45;margin:2px 0 4px;color:#0d1931}.wx-benefit p{font-size:10.5px;line-height:1.6;color:#62718e;margin:0}.wx-stat-row{margin-bottom:0}.wx-stat-row>div{padding-left:8px;padding-right:8px}.wx-stat{position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;min-height:87px;padding:14px 17px;border:1px solid #e1ebf9;border-radius:15px;background:#fff;box-shadow:0 6px 24px rgba(13,70,141,.025)}.wx-stat-icon{flex:0 0 56px;display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:#edf5ff;border-radius:17px;color:var(--wx-blue);font-size:26px}.wx-stat-copy{position:relative;z-index:2}.wx-stat-copy strong{display:block;font-size:27px;line-height:1.3;font-weight:800;white-space:nowrap}.wx-stat-copy span{display:block;font-size:12px;color:#61718b}.wx-stat-copy .wx-stat-tech{font-size:16px}.wx-spark{position:absolute;width:92px;right:10px;bottom:8px;opacity:.7}.wx-clients{margin:3px 8px 16px;padding:18px 18px 19px;background:linear-gradient(110deg,#f0f6fe,#f6f9ff,#edf5ff);border-radius:16px}.wx-clients h3{text-align:center;font-size:17px;font-weight:700;margin:0 0 17px}.wx-logo-list{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 0}.wx-logo-list span{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:9px;padding:0 12px;border-right:1px solid #cbd7e7;color:#687991;font-size:15px;font-weight:600;white-space:nowrap}.wx-logo-list span:last-child{border-right:0}.wx-logo-list i{font-size:22px;color:#697b97}.wx-work-row{padding-left:8px;padding-right:8px}.wx-work-row>div{padding-left:8px;padding-right:8px}.wx-work{display:grid;grid-template-columns:51% 49%;height:202px;overflow:hidden;border:1px solid #ddf3f0;border-radius:16px}.wx-work-mint{background:linear-gradient(105deg,#eafcf7 0%,#f6fffe 55%,#f0fbf8 100%)}.wx-work-blush{background:linear-gradient(105deg,#fff1f5,#fffafd 90%);border-color:#fae4e9}.wx-work-art{position:relative;min-width:0;overflow:hidden}.wx-work-art img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.wx-work-content{padding:18px 19px 13px 9px;align-self:center}.wx-work-tag{font-size:9px;letter-spacing:.8px;font-weight:700;color:#52647d}.wx-work-content h3{font-weight:800;font-size:25px;letter-spacing:-.8px;margin:5px 0 7px}.wx-work-content p{font-size:12px;color:#586985;line-height:1.6;margin:0 0 12px}.wx-outline-btn{display:inline-flex;align-items:center;gap:15px;border:1px solid #c8dfff;background:rgba(255,255,255,.65);border-radius:35px;padding:9px 17px;color:#0571fc;text-decoration:none;font-size:11px;font-weight:600;transition:.2s}.wx-outline-btn:hover{background:#086cf2;color:#fff;text-decoration:none;border-color:#086cf2;transform:translateY(-2px)}
@media(max-width:1450px){.wx-container{padding-left:32px;padding-right:32px}.wx-office-img{height:420px}.wx-office-wrap{margin-left:32px;margin-right:18px}.wx-copy-col{padding-left:14px;padding-right:15px}.wx-benefit{gap:9px;padding:10px 9px}.wx-benefit-icon{width:40px;height:42px;font-size:19px}.wx-benefit h3{font-size:11px}.wx-benefit p{font-size:10px}.wx-logo-list span{font-size:13px}.wx-title{font-size:clamp(31px,3vw,44px)}}
@media(max-width:991px){.wx-section{padding:45px 0 55px}.wx-office-img{height:420px}.wx-office-wrap{margin:0 25px 0 35px}.wx-copy-col{padding:45px 15px 0}.wx-title{font-size:42px}.wx-intro{font-size:14px}.wx-benefit{min-height:100px}.wx-benefit h3{font-size:13px}.wx-benefit p{font-size:11px}.wx-work{height:240px}.wx-logo-list span{flex:1 1 25%;margin:5px 0}.wx-logo-list span:nth-child(4){border-right:0}}
@media(max-width:575px){.wx-container{padding-left:19px;padding-right:19px}.wx-office-wrap{margin:0 10px}.wx-office-img{height:300px;object-position:center}.wx-float{padding:9px 10px;gap:7px;border-radius:12px}.wx-float-exp{left:-12px;top:15px}.wx-float-project{bottom:12px;left:-11px}.wx-float-trust{right:-11px;bottom:62px}.wx-floating-icon{font-size:15px}.wx-float strong{font-size:15px}.wx-float small{font-size:8px}.wx-float .wx-trust-title{font-size:11px}.wx-copy-col{padding:32px 13px 0}.wx-title{font-size:33px;letter-spacing:-1px}.wx-eyebrow{margin-bottom:11px}.wx-intro{font-size:12px}.wx-benefit{min-height:85px}.wx-stat{gap:9px;min-height:88px;padding:9px}.wx-stat-icon{width:38px;height:41px;flex-basis:38px;font-size:18px;border-radius:11px}.wx-stat-copy strong{font-size:19px}.wx-stat-copy .wx-stat-tech{font-size:11px;white-space:normal}.wx-stat-copy span{font-size:9px}.wx-spark{width:45px;opacity:.33}.wx-clients{margin-left:0;margin-right:0;padding:20px 9px}.wx-clients h3{font-size:13px;line-height:1.6}.wx-logo-list span{flex:1 1 50%;font-size:13px}.wx-logo-list span:nth-child(even){border-right:0}.wx-logo-list span:nth-child(4){border-right:0}.wx-work{grid-template-columns:45% 55%;height:195px}.wx-work-content{padding:12px 11px 12px 4px}.wx-work-content h3{font-size:18px}.wx-work-content p{font-size:9.5px}.wx-work-tag{font-size:8px}.wx-outline-btn{font-size:9px;padding:8px 9px;gap:7px}}
@media(prefers-reduced-motion:reduce){.wx-outline-btn{transition:none}}

/* Scoped styles: safe to paste into Westonik demo.php */
#ws-products {--wp-ink:#0a1b35;--wp-muted:#62718a;--wp-blue:#1267ef;--wp-line:#e6edf7;position:relative;isolation:isolate;background:linear-gradient(165deg,#ffffff 15%,#f7faff 70%,#eef5ff 100%);color:var(--wp-ink);padding:110px 0 120px;overflow:hidden;font-family:'Poppins',sans-serif}
#ws-products *{box-sizing:border-box}
#ws-products:before{content:"";position:absolute;right:-210px;top:75px;width:600px;height:600px;background:radial-gradient(circle,#dceafe 0%,rgba(220,234,254,0) 67%);pointer-events:none;z-index:-1}
#ws-products:after{content:"";position:absolute;inset:0;background-image:radial-gradient(#b7cbed 1px,transparent 1px);background-size:27px 27px;mask-image:linear-gradient(90deg,transparent 45%,#000);opacity:.18;z-index:-1;pointer-events:none}
#ws-products .wp-container{max-width:1240px;margin:auto;padding:0 24px}
#ws-products .wp-intro{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:48px}
#ws-products .wp-eyebrow{display:flex;align-items:center;gap:9px;color:#1766df;font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;margin-bottom:16px}
#ws-products .wp-eyebrow:before{content:"";width:22px;height:3px;background:linear-gradient(90deg,#0664eb,#61a6ff);border-radius:4px}
#ws-products h2{font-size:clamp(31px,4.4vw,43px);line-height:1.13;letter-spacing:-.055em;font-weight:800;max-width:700px;margin:0}
#ws-products h2 em{font-style:normal;color:#1677ff}
#ws-products .wp-intro>p{max-width:350px;font-size:14px;line-height:1.85;color:var(--wp-muted);margin:0 0 6px}
#ws-products .wp-layout{display:grid;grid-template-columns:350px minmax(0,1fr);gap:22px;align-items:stretch}
#ws-products .wp-list{display:flex;flex-direction:column;gap:12px}
#ws-products .wp-choice{width:100%;border:1px solid #e2eaf6;background:rgba(255,255,255,.8);border-radius:19px;display:flex;gap:14px;align-items:center;text-align:left;padding:17px 17px;cursor:pointer;transition:background .25s,border-color .25s,box-shadow .25s,transform .25s;min-height:94px;color:var(--wp-ink)}
#ws-products .wp-choice:hover{transform:translateX(4px);border-color:#b7d0f8}
#ws-products .wp-choice.is-active{background:#fff;border-color:#a9cdfd;box-shadow:0 13px 40px rgba(37,92,160,.11);transform:translateX(6px)}
#ws-products .wp-choice:focus-visible{outline:3px solid #8fbcff;outline-offset:3px}
#ws-products .wp-logo{height:51px;width:51px;flex:none;display:grid;place-items:center;border-radius:15px;font-size:23px;font-weight:800;background:var(--tone);color:var(--tone-ink)}
#ws-products .wp-choice-title{display:block;font-size:17px;font-weight:700;letter-spacing:-.025em;line-height:1.3}
#ws-products .wp-choice-sub{display:block;font-size:11px;color:#748097;margin-top:5px;line-height:1.5}
#ws-products .wp-choice-arrow{margin-left:auto;font-size:19px;color:#b3c3db}
#ws-products .wp-choice.is-active .wp-choice-arrow{color:var(--wp-blue)}
#ws-products .wp-feature{--accent:#1668ed;--accent-soft:#e3edff;position:relative;border:1px solid #dce7f6;min-height:535px;background:#fff;border-radius:29px;box-shadow:0 35px 75px rgba(24,60,117,.085);overflow:hidden;display:grid;grid-template-columns:minmax(245px,.88fr) minmax(0,1.12fr)}
#ws-products .wp-feature:before{content:"";position:absolute;width:390px;height:390px;border-radius:50%;right:-100px;top:-100px;background:var(--accent-soft);opacity:.45;filter:blur(50px);pointer-events:none}
#ws-products .wp-content{z-index:1;padding:48px 0 45px 40px;display:flex;flex-direction:column;align-items:flex-start}
#ws-products .wp-kicker{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:800;margin-bottom:28px;display:flex;gap:9px;align-items:center}
#ws-products .wp-kicker:before{content:"";width:8px;height:8px;background:var(--accent);border-radius:50%}
#ws-products .wp-name{font-size:clamp(31px,3.2vw,46px);font-weight:800;letter-spacing:-.06em;margin:0 0 17px;line-height:1.13}
#ws-products .wp-description{font-size:13px;line-height:1.85;color:#66768c;margin:0 0 28px;max-width:300px}
#ws-products .wp-chips{display:flex;flex-wrap:wrap;gap:8px;max-width:320px;margin-bottom:30px}
#ws-products .wp-chip{padding:9px 11px;border-radius:9px;background:#f3f7fc;color:#43546c;font-size:10px;font-weight:600;border:1px solid #e5edf7}
#ws-products .wp-actions{margin-top:auto;display:flex;align-items:center;gap:17px;flex-wrap:wrap}
#ws-products .wp-main-cta{display:inline-flex;gap:16px;align-items:center;justify-content:center;border-radius:11px;background:#0968ee;color:#fff!important;padding:15px 19px;font-weight:700;font-size:12px;text-decoration:none!important;box-shadow:0 8px 20px rgba(12,106,238,.22);transition:transform .2s,background .2s}
#ws-products .wp-main-cta:hover{background:#0057d8;transform:translateY(-2px)}
#ws-products .wp-count{font-size:11px;font-weight:700;color:#9ba8bc;white-space:nowrap}
#ws-products .wp-count strong{color:#253b59}
#ws-products .wp-art{min-width:0;display:flex;align-items:center;justify-content:center;padding:40px 0 10px 10px;position:relative;overflow:hidden}
#ws-products .wp-orbit{position:absolute;width:390px;height:390px;right:-40px;top:80px;border-radius:50%;border:1px solid rgba(31,99,211,.12);box-shadow:0 0 0 45px rgba(39,112,233,.028),0 0 0 95px rgba(39,112,233,.025)}
#ws-products .wp-laptop{width:105%;max-width:545px;position:relative;transform:translateX(16px) rotate(-5deg);filter:drop-shadow(0 26px 21px rgba(14,39,78,.16))}
#ws-products .wp-screen{height:288px;overflow:hidden;border:9px solid #172334;border-bottom:12px solid #172334;border-radius:15px 15px 6px 6px;background:#fff;box-shadow:inset 0 0 0 1px #e1e8f1}
#ws-products .wp-laptop-base{height:13px;background:linear-gradient(#d7dfe8,#98a7b8);margin:0 -18px;border-radius:2px 2px 70% 70%;position:relative}
#ws-products .wp-laptop-base:before{content:"";position:absolute;left:42%;right:42%;height:4px;top:0;background:#8f9fb0;border-radius:0 0 9px 9px}
#ws-products .wp-app{height:100%;display:grid;grid-template-columns:74px 1fr;font-family:Arial,sans-serif}
#ws-products .wp-sidebar{background:#13253c;color:#d6e6fb;padding:19px 11px}
#ws-products .wp-sidebar b{display:block;font-size:10px;margin-bottom:31px;letter-spacing:-.02em}
#ws-products .wp-sidebar i{display:block;width:95%;height:7px;background:rgba(255,255,255,.19);margin:17px 0;border-radius:5px}
#ws-products .wp-sidebar i:first-of-type{background:var(--accent)}
#ws-products .wp-panel{background:#f6f9fd;padding:18px;min-width:0}
#ws-products .wp-panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:21px}
#ws-products .wp-panel-top b{font-size:13px;color:#20374f}
#ws-products .wp-panel-top span{font-size:8px;color:#9aa9ba}
#ws-products .wp-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:15px}
#ws-products .wp-metric{background:#fff;border:1px solid #e9eef6;border-radius:8px;padding:11px 8px}
#ws-products .wp-metric small{font-size:8px;color:#8a9aab;display:block;margin-bottom:8px}
#ws-products .wp-metric strong{font-size:16px;color:#1d334b}
#ws-products .wp-metric span{display:block;width:50%;height:4px;border-radius:5px;margin-top:10px;background:var(--accent-soft)}
#ws-products .wp-chart{height:107px;background:#fff;border-radius:9px;border:1px solid #e9eef6;padding:12px 13px;display:flex;align-items:end;gap:9px;position:relative}
#ws-products .wp-chart:before{content:"Activity overview";position:absolute;top:11px;left:13px;font-size:9px;color:#405671;font-weight:700}
#ws-products .wp-bar{flex:1;background:linear-gradient(0deg,var(--accent),var(--accent-soft));border-radius:3px 3px 0 0;max-height:70px;min-height:15px;opacity:.85}
#ws-products .wp-float{position:absolute;bottom:60px;left:7px;border:1px solid #e0e8f3;box-shadow:0 18px 35px rgba(28,67,127,.16);background:#fff;padding:13px 18px;border-radius:12px;display:flex;gap:10px;align-items:center;z-index:2;transform:rotate(4deg)}
#ws-products .wp-float-icon{height:34px;width:34px;background:var(--accent-soft);color:var(--accent);border-radius:10px;display:grid;place-items:center;font-size:16px}
#ws-products .wp-float b{display:block;font-size:12px}
#ws-products .wp-float small{font-size:9px;color:#8995a4}
#ws-products .wp-bottom{margin-top:24px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
#ws-products .wp-bottom-note{font-size:11px;letter-spacing:.08em;font-weight:700;color:#8595ad;text-transform:uppercase}
#ws-products .wp-progress{display:flex;gap:7px}
#ws-products .wp-progress span{height:4px;width:26px;background:#dce5f0;border-radius:100px;transition:background .3s,width .3s}
#ws-products .wp-progress span.is-active{width:53px;background:#1677ff}
#ws-products .wp-bottom-link{font-size:12px;color:#176cda;font-weight:700;text-decoration:none}
#ws-products .wp-bottom-link:hover{text-decoration:underline}
@media(max-width:991px){#ws-products{padding:76px 0}#ws-products .wp-layout{grid-template-columns:1fr}#ws-products .wp-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}#ws-products .wp-choice{min-height:91px;padding:12px;flex-direction:column;gap:9px;text-align:center;justify-content:center}#ws-products .wp-choice-arrow,#ws-products .wp-choice-sub{display:none}#ws-products .wp-choice-title{font-size:12px}#ws-products .wp-choice.is-active{transform:translateY(-3px)}#ws-products .wp-logo{height:38px;width:38px;font-size:17px;border-radius:11px}#ws-products .wp-feature{grid-template-columns:1fr 1fr}}
@media(max-width:700px){#ws-products .wp-container{padding:0 17px}#ws-products .wp-intro{display:block;margin-bottom:28px}#ws-products .wp-intro>p{margin-top:16px;font-size:12px}#ws-products .wp-feature{display:flex;flex-direction:column;min-height:unset;border-radius:22px}#ws-products .wp-content{padding:31px 24px 0}#ws-products .wp-kicker{margin-bottom:16px}#ws-products .wp-name{font-size:32px}#ws-products .wp-description{max-width:100%;margin-bottom:16px}#ws-products .wp-chips{margin-bottom:20px}#ws-products .wp-actions{margin-top:0}#ws-products .wp-art{min-height:290px;padding:36px 22px 25px}#ws-products .wp-laptop{transform:rotate(-3deg);width:95%}#ws-products .wp-screen{height:213px}#ws-products .wp-float{bottom:26px;left:7px;padding:8px 10px}#ws-products .wp-metrics{gap:5px}#ws-products .wp-metric{padding:7px 5px}#ws-products .wp-metric strong{font-size:12px}#ws-products .wp-panel{padding:12px}#ws-products .wp-chart{height:70px;gap:5px}#ws-products .wp-chart:before{display:none}#ws-products .wp-sidebar{padding:13px 7px}#ws-products .wp-app{grid-template-columns:55px 1fr}#ws-products .wp-sidebar b{font-size:7px}#ws-products .wp-bottom{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){#ws-products *,#ws-products *:before,#ws-products *:after{transition:none!important;animation:none!important}}


   /* =========================================
       WESTONIK GLOBAL BUTTON DESIGN SYSTEM
    ========================================= */

    :root {
      --ws-brand: #075fe5;
      --ws-brand-light: #1677ff;
      --ws-brand-dark: #064bc0;
      --ws-black: #101725;
      --ws-radius: 11px;
    }

    /* COMMON BUTTON */

    .ws-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 16px;

      min-height: 50px;
      padding: 14px 22px;

      border: 1px solid transparent;
      border-radius: var(--ws-radius);

      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 12.5px;
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: -.015em;

      white-space: nowrap;
      text-decoration: none !important;
      cursor: pointer;

      transition:
        transform .3s cubic-bezier(.2,.8,.2,1),
        box-shadow .3s ease,
        background .3s ease,
        border-color .3s ease,
        color .3s ease;
    }

    /* =========================================
       DIAGONAL ARROW ANIMATION
    ========================================= */

/* Normal: arrow facing right → */
.ws-btn .ws-btn-arrow {
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    transform: rotate(0deg);

    transition: transform 0.4s
        cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover: rotate to upper-right ↗ */
.ws-btn:hover .ws-btn-arrow {
    transform: translate(4px, -3px) rotate(-45deg);
}

    .ws-btn:active {
      transform: translateY(0);
    }

    /* =========================================
       1. WHITE BUTTON
    ========================================= */

    .ws-btn-white {
      color: #101725;
      background: #ffffff;

      border-color: #dce3ec;

      box-shadow:
        0 4px 16px rgba(16,42,80,.04);
    }

    .ws-btn-white:hover {
      color: var(--ws-brand);
      background: #ffffff;
      border-color: #9dbef0;

      box-shadow:
        0 10px 25px rgba(16,42,80,.11);
    }

    /* =========================================
       2. BRAND GRADIENT BUTTON
    ========================================= */

    .ws-btn-brand {
      color: #ffffff;

      background: linear-gradient(
        110deg,
        #075fe5 0%,
        #1677ff 100%
      );

      box-shadow:
        0 8px 22px rgba(7,95,229,.24);
    }

    .ws-btn-brand:hover {
      color: #ffffff;

      background: linear-gradient(
        110deg,
        #064bc0 0%,
        #075fe5 100%
      );

      box-shadow:
        0 13px 30px rgba(7,95,229,.35);
    }

    /* =========================================
       3. BLACK BUTTON
    ========================================= */

    .ws-btn-black {
      color: #ffffff;
      background: var(--ws-black);

      box-shadow:
        0 7px 20px rgba(0,0,0,.12);
    }

    .ws-btn-black:hover {
      color: #ffffff;
      background: #252e40;

      box-shadow:
        0 13px 28px rgba(0,0,0,.20);
    }

    /* =========================================
       BUTTON SIZES
    ========================================= */

    .ws-btn-sm {
      min-height: 42px;
      padding: 11px 17px;
      gap: 11px;
      font-size: 11px;
    }

    .ws-btn-lg {
      min-height: 57px;
      padding: 17px 27px;
      gap: 20px;
      font-size: 14px;
    }

    /* =========================================
       ACCESSIBILITY
    ========================================= */

    .ws-btn:focus-visible {
      outline: 3px solid #75aeff;
      outline-offset: 4px;
    }

    .ws-btn:disabled,
    .ws-btn[aria-disabled="true"] {
      opacity: .5;
      pointer-events: none;
      cursor: not-allowed;
    }

    @media (prefers-reduced-motion: reduce) {
      .ws-btn,
      .ws-btn .ws-btn-arrow {
        transition: none;
      }

      .ws-btn:hover,
      .ws-btn:hover .ws-btn-arrow {
        transform: none;
      }

      .ws-btn .ws-btn-arrow {
        transform: rotate(-45deg);
      }
    }

    @media (max-width: 575px) {
      .ws-btn {
        min-height: 46px;
        padding: 12px 17px;
        gap: 12px;
        font-size: 11.5px;
      }
    }

    /* DEMO LAYOUT ONLY */

    .ws-demo {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 25px;
      padding: 30px 15px;
      background: #f7faff;
    }

    .ws-demo h2 {
      color: #101725;
      font: 800 28px 'Plus Jakarta Sans', sans-serif;
      margin: 0;
      text-align: center;
    }

    .ws-demo-buttons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
    }