/* ============================================================
   WHASOLS THEME — ws.css v2.0
   Brand: #006699 · #00bbee · #00e5a0 | Fonts: Plus Jakarta Sans · Inter · DM Mono
   Light mode only | Custom CSS — no Bootstrap/Tailwind
   ============================================================ */

/* ---- GOOGLE FONTS ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap');

/* ---- ROOT TOKENS ---- */
:root {

  /* ── PRIMARY BLUE  #006699 ─────────────────────────────── */
  --ws-primary:        #006699;
  --ws-primary-dark:   #004d73;
  --ws-primary-deep:   #003352;
  --ws-primary-deeper: #002233;
  --ws-primary-mid:    #cce6f0;
  --ws-primary-light:  #e6f3f8;
  --ws-primary-xlight: #f0f8fc;

  /* ── ACCENT GREEN  #5DAA00 ─────────────────────────────── */
  --ws-green:          #5DAA00;
  --ws-green-dark:     #3d7200;
  --ws-green-deep:     #2a5000;
  --ws-green-mid:      #c8e8a0;
  --ws-green-light:    #eaf5d4;
  --ws-green-xlight:   #f4fbea;

  /* ── ACCENT SKY BLUE  #9CDEFF ──────────────────────────── */
  --ws-sky:            #9CDEFF;
  --ws-sky-dark:       #5ab8e8;
  --ws-sky-deep:       #2a96d4;
  --ws-sky-mid:        #caeeff;
  --ws-sky-light:      #e5f6ff;
  --ws-sky-xlight:     #f0fbff;

  /* ── TEXT ──────────────────────────────────────────────── */
  --ws-text:           #0f1923;
  --ws-text-2:         #4a5568;
  --ws-text-3:         #8a9ab0;
  --ws-text-4:         #b8c4d0;
  --ws-text-5:         #ccd8e2;

  /* ── BACKGROUNDS ────────────────────────────────────────── */
  --ws-bg:             #ffffff;
  --ws-bg-2:           #f7f9fc;
  --ws-bg-3:           #eef2f7;
  --ws-bg-4:           #e4ebf2;

  /* ── BORDERS ────────────────────────────────────────────── */
  --ws-border:         #dde3ed;
  --ws-border-2:       #c8d3e0;
  --ws-border-brand:   rgba(0, 102, 153, .14);
  --ws-border-brand-2: rgba(0, 102, 153, .28);

  /* ── SEMANTIC STATES ────────────────────────────────────── */
  --ws-success:        #1a7a4a;
  --ws-success-bg:     #e8f5ef;
  --ws-success-mid:    #b2d8c3;

  --ws-warning:        #8a5c00;
  --ws-warning-bg:     #fef8e6;
  --ws-warning-mid:    #f0d48a;

  --ws-danger:         #c0392b;
  --ws-danger-bg:      #fdf0ee;
  --ws-danger-mid:     #f0b8b3;

  --ws-info:           #1a5fa8;
  --ws-info-bg:        #e8f1fc;
  --ws-info-mid:       #b3cef0;

  /* ── SHAPE ──────────────────────────────────────────────── */
  --ws-radius:         8px;
  --ws-radius-lg:      12px;
  --ws-radius-xl:      20px;
  --ws-radius-2xl:     36px;
  --ws-radius-full:    9999px;

  /* ── SHADOW ─────────────────────────────────────────────── */
  --ws-shadow-sm:      0 1px 3px rgba(0,0,0,.07);
  --ws-shadow:         0 2px 8px rgba(0,0,0,.08);
  --ws-shadow-md:      0 4px 16px rgba(0,0,0,.10);
  --ws-shadow-lg:      0 8px 32px rgba(0,0,0,.12);
  --ws-shadow-xl:      0 16px 48px rgba(0,0,0,.14);
  --ws-shadow-brand:   0 0 40px rgba(0,102,153,.22);
  --ws-shadow-green:   0 0 40px rgba(93,170,0,.20);

  /* ── MOTION ─────────────────────────────────────────────── */
  --ws-transition:     .18s ease;
  --ws-transition-md:  .28s ease;

  /* ── SHORT-NAME ALIASES ─────────────────────────────────── */
  /* blue */
  --p:    #006699;
  --pd:   #004d73;
  --pdp:  #003352;
  --pdpp: #002233;
  --pl:   #e6f3f8;
  --pm:   #cce6f0;
  --pg:   rgba(0,102,153,.18);

  /* green */
  --ac2:  #5DAA00;
  --ac2d: #3d7200;
  --ac2l: #eaf5d4;
  --ac2m: #c8e8a0;

  /* sky blue */
  --ac:   #9CDEFF;
  --acd:  #5ab8e8;
  --acp:  #2a96d4;
  --acl:  #e5f6ff;
  --acm:  #caeeff;

  /* neutral */
  --ink:  #0f1923;
  --ink2: #2d3f52;
  --ink3: #64788e;
  --ink4: #9fb0c0;
  --ink5: #ccd8e2;

  --s:    #ffffff;
  --s2:   #f7f9fc;
  --s3:   #eef2f7;
  --s4:   #e4ebf2;

  --bd:   rgba(0,102,153,.14);
  --bd2:  rgba(0,102,153,.28);

  /* states */
  --ok:   #1a7a4a;
  --okb:  #e8f5ef;
  --warn: #8a5c00;
  --warnb:#fef8e6;
  --err:  #c0392b;
  --errb: #fdf0ee;

  /* shape */
  --r:    8px;
  --rl:   12px;
  --rxl:  20px;
  --r2xl: 36px;
  --rf:   9999px;

  /* shadow */
  --sh:   0 2px 8px rgba(0,0,0,.08);
  --shm:  0 8px 32px rgba(0,0,0,.10);
  --shl:  0 20px 60px rgba(0,0,0,.14);
  --shg:  0 0 40px rgba(0,102,153,.22);
  --shgg: 0 0 40px rgba(93,170,0,.20);

  /* motion */
  --ease: cubic-bezier(.22,1,.36,1);
}

/* =========================
   FIELDSET
   ========================= */

fieldset{
    border:1px solid var(--ws-border);
    border-radius:var(--ws-radius);
    padding:20px;
    margin-bottom:20px;
    background:var(--ws-bg);
    box-shadow:var(--ws-shadow);
}

fieldset legend{
    font-size:15px;
    font-weight:600;
    padding:0 10px;
    color:var(--ws-primary);
    width:auto;
    margin-bottom:0;
}

/* =========================
   LABEL
   ========================= */

label,
.form-label{
    font-size:14px;
    font-weight:600;
    color:var(--ws-text);
    display:block;
}

/* =========================
   INPUT + SELECT
   ========================= */

.form-control,
.form-select,
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea{
    width:100%;
    min-height:46px;
    border:1px solid var(--ws-border);
    border-radius:var(--ws-radius);
    padding:10px 14px;
    font-size:14px;
    color:var(--ws-text);
    background:#fff;
    transition:all .2s ease;
    box-shadow:none;
}

.form-control:focus,
.form-select:focus,
input:not([type="radio"]):not([type="checkbox"]):focus,
select:focus,
textarea:focus{
    border-color:var(--ws-primary);
    box-shadow:0 0 0 3px rgba(13,110,253,0.15);
    outline:none;
}
/* checkbox + radio wrapper */
.form-check{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
    position:relative;
}

/* hide default */
.form-check input[type="checkbox"],
.form-check input[type="radio"]{
    appearance:none;
    -webkit-appearance:none;
    width:20px;
    height:20px;
    border:2px solid var(--ws-border);
    background:#fff;
    cursor:pointer;
    position:relative;
    transition:all .25s ease;
    box-shadow:none;
    flex-shrink:0;
}

/* checkbox */
.form-check input[type="checkbox"]{
    border-radius:6px;
}

/* radio */
.form-check input[type="radio"]{
    border-radius:50%;
}

/* hover */
.form-check input[type="checkbox"]:hover,
.form-check input[type="radio"]:hover{
    border-color:var(--ws-primary);
}

/* focus */
.form-check input[type="checkbox"]:focus,
.form-check input[type="radio"]:focus{
    outline:none;
    border-color:var(--ws-primary);
    box-shadow:0 0 0 4px rgba(13,110,253,.15);
}

/* checked state */
.form-check input[type="checkbox"]:checked,
.form-check input[type="radio"]:checked{
    background:var(--ws-primary);
    border-color:var(--ws-primary);
    animation:wsCheckPop .2s ease;
}

/* checkbox tick */
.form-check input[type="checkbox"]::after{
    content:'';
    position:absolute;
    left:5px;
    top:1px;
    width:5px;
    height:10px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg) scale(0);
    transition:transform .2s ease;
}

/* radio dot */
.form-check input[type="radio"]::after{
    content:'';
    position:absolute;
    width:8px;
    height:8px;
    background:#fff;
    border-radius:50%;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(0);
    transition:transform .2s ease;
}

/* show checked icon */
.form-check input[type="checkbox"]:checked::after,
.form-check input[type="radio"]:checked::after{
    transform:
        translate(-0%,-0%)
        rotate(45deg)
        scale(1);
}

/* fix radio transform */
.form-check input[type="radio"]:checked::after{
    transform:translate(-50%,-50%) scale(1);
}

/* disabled */
.form-check input:disabled{
    opacity:.6;
    cursor:not-allowed;
}

/* label */
.form-check label{
    cursor:pointer;
    user-select:none;
    color:var(--ws-text);
    font-size:14px;
}

/* animation */
@keyframes wsCheckPop{
    0%{
        transform:scale(.85);
    }
    50%{
        transform:scale(1.1);
    }
    100%{
        transform:scale(1);
    }
}
/* =========================
   BUTTONS
   ========================= */

.btn-primary{
    background:var(--ws-primary);
    border-color:var(--ws-primary);
}

.btn-primary:hover{
    opacity:.92;
}

/* =========================
   BUTTON GROUP
   ========================= */

.btn-group{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.btn-group .btn{
    flex:1;
}

/* =========================
   FORM GROUP
   ========================= */

.form-group{
    margin-bottom:18px;
}

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

@media(max-width:768px){

    fieldset{
        padding:15px;
        border-radius:8px;
    }

    label,
    .form-label{
        font-size:13px;
    }

    .form-control,
    .form-select,
    input,
    select,
    textarea{
        min-height:42px;
        font-size:13px;
        padding:9px 12px;
    }
    .btn-group{
        flex-direction:column;
    }

}

/* =========================
   LARGE DESKTOP
   ========================= */

@media(min-width:1400px){

    .form-control,
    .form-select,
    input,
    select,
    textarea{
        min-height:50px;
        font-size:15px;
    }

    .btn{
        min-height:48px;
        font-size:15px;
    }
}
/* =========================
   INPUT GROUP
   ========================= */

.input-group{
    display:flex;
    align-items:stretch;
    width:100%;
    position:relative;
}

.input-group .form-control,
.input-group input{
    flex:1;
    border-radius:10px 0 0 10px;
    border-right:0;
    min-height:46px;
    z-index:1;
}

/* =========================
   INPUT GROUP BUTTON
   ========================= */

.input-group-btn,
.input-group-append,
.input-group-prepend{
    display:flex;
    align-items:stretch;
}

.input-group-btn .btn,
.input-group-append .btn,
.input-group-prepend .btn{
    border-radius:0 10px 10px 0;
    min-width:52px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
}

/* =========================
   LEFT BUTTON SUPPORT
   ========================= */

.input-group-prepend .btn{
    border-radius:10px 0 0 10px;
}

.input-group-prepend + .form-control{
    border-radius:0 10px 10px 0 !important;
    border-left:0;
}

/* =========================
   MULTIPLE BUTTONS
   ========================= */

.input-group-btn .btn + .btn,
.input-group-append .btn + .btn{
    border-radius:0;
}

/* last button */
.input-group-btn .btn:last-child,
.input-group-append .btn:last-child{
    border-radius:0 10px 10px 0;
}

/* =========================
   MOBILE
   ========================= */

@media(max-width:768px){

    .input-group .form-control,
    .input-group input{
        min-height:42px;
        font-size:13px;
    }

    .input-group-btn .btn,
    .input-group-append .btn,
    .input-group-prepend .btn{
        min-width:46px;
        padding:0 14px;
        font-size:13px;
    }

}

.ws-main-img{
  height:355px;
}
/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 15px; line-height: 1.65;
  color: var(--ws-text); background: var(--ws-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--ws-primary); text-decoration: none; transition: color var(--ws-transition); }
a:hover { color: var(--ws-primary-dark); }
ul, ol { list-style: disc; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ============================================================
   ANIMATIONS & KEYFRAMES
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.85); }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes progressFill {
  from { width: 0%; }
  to   { width: var(--target-width, 100%); }
}

/* ---- Animation utility classes ---- */
.ws-anim-fade-up   { animation: fadeUp .6s ease both; }
.ws-anim-fade-in   { animation: fadeIn .5s ease both; }
.ws-anim-scale-in  { animation: scaleIn .5s ease both; }
.ws-anim-slide-left  { animation: slideInLeft .6s ease both; }
.ws-anim-slide-right { animation: slideInRight .6s ease both; }
.ws-anim-float     { animation: float 3s ease-in-out infinite; }
.ws-anim-pulse     { animation: pulse 2s ease-in-out infinite; }

/* Staggered delays */
.ws-delay-1 { animation-delay: .1s; }
.ws-delay-2 { animation-delay: .2s; }
.ws-delay-3 { animation-delay: .3s; }
.ws-delay-4 { animation-delay: .4s; }
.ws-delay-5 { animation-delay: .5s; }
.ws-delay-6 { animation-delay: .6s; }
.ws-delay-7 { animation-delay: .7s; }
.ws-delay-8 { animation-delay: .8s; }
.ws-delay-9 { animation-delay: .9s; }
.ws-delay-10 { animation-delay: 1s; }
.ws-delay-11 { animation-delay: 1.1s; }
.ws-delay-12 { animation-delay: 1.2s; }
.ws-delay-13 { animation-delay: 1.3s; }
.ws-delay-14 { animation-delay: 1.4s; }
.ws-delay-15 { animation-delay: 1.5s; }
.ws-delay-16 { animation-delay: 1.6s; }
.ws-delay-17 { animation-delay: 1.7s; }
.ws-delay-18 { animation-delay: 1.8s; }
.ws-delay-19 { animation-delay: 1.9s; }
.ws-delay-20 { animation-delay: 2s; }
.ws-delay-21 { animation-delay: 2.1s; }
.ws-delay-22 { animation-delay: 2.2s; }
.ws-delay-23 { animation-delay: 2.3s; }
.ws-delay-24 { animation-delay: 2.4s; }
.ws-delay-25 { animation-delay: 2.5s; }
.ws-delay-26 { animation-delay: 2.6s; }
.ws-delay-27 { animation-delay: 2.7s; }
.ws-delay-28 { animation-delay: 2.8s; }
.ws-delay-29 { animation-delay: 2.9s; }
.ws-delay-30 { animation-delay: 3s; }

/* Scroll-reveal (JS adds .ws-revealed) */
.ws-reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity .65s ease, transform .65s ease;
}
.ws-reveal.ws-revealed { opacity: 1; transform: translateY(0); }
.ws-reveal-left  { opacity: 0; transform: translateX(-32px); transition: opacity .65s ease, transform .65s ease; }
.ws-reveal-right { opacity: 0; transform: translateX(32px);  transition: opacity .65s ease, transform .65s ease; }
.ws-reveal-left.ws-revealed, .ws-reveal-right.ws-revealed { opacity: 1; transform: translateX(0); }

/* ============================================================
   LAYOUT
   ============================================================ */
.ws-container    { max-width: 95%; margin: 0 auto; padding: 0 28px; }
.ws-container-sm { max-width: 75%;  margin: 0 auto; padding: 0 28px; }
.ws-container-xs { max-width: 56%;  margin: 0 auto; padding: 0 28px; }
.ws-section      { padding: 80px 0; }
.ws-section-sm   { padding: 48px 0; }
.ws-section-lg   { padding: 110px 0; }

/* ---- GRID ---- */
.ws-grid         { display: grid; gap: 24px; }
.ws-grid-2       { grid-template-columns: repeat(2, 1fr); }
.ws-grid-3       { grid-template-columns: repeat(3, 1fr); }
.ws-grid-4       { grid-template-columns: repeat(4, 1fr); }
.ws-grid-5       { grid-template-columns: repeat(5, 1fr); }
.ws-grid-6       { grid-template-columns: repeat(6, 1fr); }
.ws-grid-auto    { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ws-grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

@media (max-width: 1024px) {
  .ws-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ws-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .ws-grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .ws-grid-2, .ws-grid-3, .ws-grid-4, .ws-grid-5 { grid-template-columns: 1fr; }
  .ws-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .ws-section    { padding: 56px 0; }
  .ws-section-lg { padding: 72px 0; }
}
@media (max-width: 480px) {
  .ws-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .ws-container, .ws-container-sm, .ws-container-xs { padding: 0 16px; }
}

/* ============================================================
   NAVBAR
   ============================================================ */
.ws-nav {
  position: sticky; top: 0; z-index: 500;
  background: #fff;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ws-border);
  height: 66px; display: flex; align-items: center;
  transition: box-shadow var(--ws-transition);
}
.ws-nav.scrolled { box-shadow: var(--ws-shadow-md); }
.ws-nav-inner {
  display: flex; align-items: center;
  justify-content: space-between; width: 100%;
}
.ws-nav-logo {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  flex-shrink: 0;
}
.ws-nav-logo-mark {
  width: 34px; height: 34px; background: var(--ws-primary);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  transition: transform var(--ws-transition);
}
.ws-nav-logo:hover .ws-nav-logo-mark { transform: rotate(-6deg) scale(1.08); }
.ws-nav-logo-mark i { color: #fff; font-size: 18px; }
.ws-nav-logo-text {
  font-size: 18px; font-weight: 800; color: var(--ws-primary);
  letter-spacing: -.5px;
}
.ws-nav-links { display: flex; align-items: center; gap: 2px; }
.ws-nav-item { position: relative; }
.ws-nav-link {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 14px; font-size: 13.5px; font-weight: 500;
  color: var(--ws-text-2); border-radius: var(--ws-radius);
  transition: var(--ws-transition); text-decoration: none; white-space: nowrap;
}
.ws-nav-link:hover { color: var(--ws-primary); background: var(--ws-primary-light); }
.ws-nav-link i { font-size: 12px; transition: transform var(--ws-transition); }
.ws-nav-item:hover .ws-nav-link i { transform: rotate(180deg); }
.ws-nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Mega dropdown */
/* ::after creates an invisible bridge between the nav link and the dropdown
   so the hover state is maintained while the cursor travels across the gap */
.ws-nav-item::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -8px; height: 8px;
}
.ws-mega-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: #fff; border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-xl);
  padding: 8px 20px 20px; /* top padding bridges the visual gap */
  min-width: 520px; box-shadow: var(--ws-shadow-xl);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 600;
}
.ws-nav-item:hover .ws-mega-menu {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.ws-mega-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ws-mega-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: var(--ws-radius-lg);
  text-decoration: none; transition: var(--ws-transition);
}
.ws-mega-item:hover { background: var(--ws-primary-light); }
.ws-mega-icon {
  width: 36px; height: 36px; border-radius: var(--ws-radius);
  background: var(--ws-primary-light); display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.ws-mega-icon i { font-size: 18px; color: var(--ws-primary); }
.ws-mega-title { font-size: 13px; font-weight: 600; color: var(--ws-text); margin-bottom: 2px; }
.ws-mega-desc  { font-size: 12px; color: var(--ws-text-3); line-height: 1.5; }

/* ── NAV ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;height:68px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;background:#fff;backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(0,102,153,.1);transition:box-shadow .3s}
.nav.solid{box-shadow:0 4px 24px rgba(0,0,0,.08)}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--p),var(--ac));display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px var(--pg);transition:transform .2s var(--ease)}
.nav-logo:hover .nav-icon{transform:rotate(-8deg) scale(1.1)}
.nav-icon i{font-size:18px;color:#fff}
.nav-wordmark{font-size:19px;font-weight:900;color:var(--ink);letter-spacing:-.5px}
.nav-wordmark span{color:var(--p)}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-item{position:relative}
.nlink{padding:8px 15px;font-size:14px;font-weight:600;color:var(--ink2);border-radius:var(--r);transition:all .2s;text-decoration:none;display:flex;align-items:center;gap:4px}
.nlink:hover{color:var(--p);background:var(--pl)}
.nlink i{font-size:12px;transition:transform .2s}
.nav-item:hover .nlink i{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100%);left:50%;transform:translateX(-50%) translateY(-8px);background:#fff;border:1px solid var(--bd);border-radius:var(--rxl);padding:20px;min-width:480px;box-shadow:var(--shl);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s var(--ease);z-index:800}
.nav-item:hover .mega{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)}
.mega-g{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mega-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--ink4);margin-bottom:12px}
.mi{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:var(--rl);text-decoration:none;transition:background .15s}
.mi:hover{background:var(--s2)}
.mi-icon{width:38px;height:38px;border-radius:var(--r);background:var(--pl);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.mi:hover .mi-icon{background:var(--p)}
.mi-icon i{font-size:19px;color:var(--p);transition:color .15s}
.mi:hover .mi-icon i{color:#fff}
.mi-t{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:2px}
.mi-d{font-size:12px;color:var(--ink3);line-height:1.45}
.nav-act{display:flex;align-items:center;gap:8px}
.nav-ham{display:none;background:none;border:1.5px solid var(--bd2);border-radius:var(--r);padding:8px;cursor:pointer;color:var(--ink2)}
.nav-ham i{font-size:20px}
/* close button — hidden on desktop, shown inside the open drawer */
.nav-close{display:none;position:absolute;top:16px;right:16px;background:none;border:1.5px solid var(--bd2);border-radius:var(--r);padding:8px;cursor:pointer;color:var(--ink2)}
.nav-close i{font-size:20px;display:block}
@media(max-width:900px){
  .nav-links,.nav-act{display:none}
  .nav-ham{display:flex}
  /* ── Open drawer ── */
  .nav.open{
    position:fixed;inset:0;height:100dvh;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    padding:0 0 32px;overflow-y:auto;
    background:#fff;backdrop-filter:none;z-index:999;
    animation:fadeIn .18s ease;
    box-shadow:none;border-bottom:none;
  }
  /* Logo sits at top with its own padding row */
  .nav.open .nav-logo{padding:20px 24px 16px;border-bottom:1px solid var(--s3)}
  .nav.open .nav-logo img{height:48px;width:auto}
  .nav.open .nav-close{display:flex}
  .nav.open .nav-ham{display:none}
  .nav.open .nav-links{display:flex;flex-direction:column;gap:0;padding:8px 0}
  .nav.open .nav-act{display:flex;flex-direction:column;gap:8px;padding:16px 24px 0;border-top:1px solid var(--s3)}
  .nav.open .nav-act .btn{justify-content:center}
  /* top-level nav links */
  .nav.open .nlink{
    padding:14px 24px;font-size:15px;font-weight:600;color:var(--ink);
    border-bottom:1px solid var(--s3);border-radius:0;
    justify-content:space-between;width:100%;background:none;
  }
  .nav.open .nlink:hover{background:var(--s2);color:var(--p)}
  /* chevron state */
  .nav.open .nav-item{position:relative;float:left;width:100%;}
  .nav.open .nav-item:hover .nlink i,.nav.open .nlink i{transform:none;transition:transform .25s ease}
  .nav.open .nav-item.open > .nlink i{transform:rotate(180deg)}
  .nav.open .nav-item.open > .nlink{color:var(--p)}
  /* accordion mega */
  .nav.open .mega{
    position:static;left:auto;transform:none;opacity:1;pointer-events:auto;
    box-shadow:none;border:none;border-radius:0;padding:0;min-width:0;
    background:var(--s2);max-height:0;overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav.open .nav-item.open .mega{max-height:700px}
  .nav.open .mega-g{display:flex;flex-direction:column;gap:0;grid-template-columns:unset}
  .nav.open .mi{
    padding:13px 24px 13px 36px;
    border-top:1px solid var(--s3);border-radius:0;
    background:none;
  }
  .nav.open .mi:last-child{border-bottom:1px solid var(--s3)}
  .nav.open .mi:hover{background:var(--pl)}
  .nav.open .mi-t{font-size:14px;font-weight:500;color:var(--ink2)}
  .nav.open .mi:hover .mi-t{color:var(--p)}
  .nav.open .mi-icon,.nav.open .mi-d{display:none}
}

/* KEYFRAMES */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes orb1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-40px) scale(1.1)}66%{transform:translate(-40px,30px) scale(.95)}}
@keyframes orb2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-50px,60px) scale(.9)}66%{transform:translate(40px,-30px) scale(1.08)}}
@keyframes orb3{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,50px) scale(1.05)}66%{transform:translate(-60px,-20px) scale(.92)}}
@keyframes popIn{from{opacity:0;transform:scale(.85) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes gradText{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* scroll reveal */
.rev{opacity:0;transform:translateY(32px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rev.rl{transform:translateX(-32px)}.rev.rr{transform:translateX(32px)}.rev.rs{transform:scale(.95)}
.revd{opacity:1!important;transform:none!important}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.48s}

/* LAYOUT */
.w{max-width:90%;margin:0 auto;padding:0 32px}
.wsm{max-width:80%;margin:0 auto;padding:0 32px}
.s100{padding:50px 0}
.s64{padding:64px 0}
@media(max-width:768px){.w,.wsm{padding:0 20px}.s100{padding:64px 0}.s64{padding:44px 0}}


/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:11px 24px;border-radius:var(--rl);font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;border:1.5px solid transparent;text-decoration:none;transition:all .22s var(--ease);white-space:nowrap;position:relative;overflow:hidden}
.btn i{font-size:18px}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--p);color:#fff;border-color:var(--p);box-shadow:0 4px 20px var(--pg)}
.btn-p:hover{background:var(--pd);border-color:var(--pd);transform:translateY(-2px);box-shadow:0 8px 30px var(--pg);color:#fff}
.btn-g{background:transparent;color:var(--ink2);border-color:var(--s4)}
.btn-g:hover{background:var(--s2);color:var(--ink);border-color:var(--bd2)}
.btn-o{background:transparent;color:var(--p);border-color:var(--p)}
.btn-o:hover{background:var(--pl);transform:translateY(-2px)}
.btn-glass{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.22);color:#fff}
.btn-white{background:#fff;color:var(--p);border-color:#fff;font-weight:700}
.btn-white:hover{background:var(--pl)}
.btn-sm{padding:7px 16px;font-size:13px;border-radius:var(--r)}
.btn-sm i{font-size:15px}
.btn-lg{padding:14px 32px;font-size:16px;border-radius:var(--rxl)}
.btn-lg i{font-size:20px}
.btn-xl{padding:18px 40px;font-size:17px;border-radius:var(--rxl)}
.btn-shimmer{background:linear-gradient(90deg,var(--p) 0%,var(--ac) 50%,var(--p) 100%);background-size:200% auto;color:#fff;border:none;animation:shimmer 2.5s linear infinite;box-shadow:0 4px 24px var(--pg)}
.btn-shimmer:hover{transform:translateY(-2px);box-shadow:0 8px 36px rgba(0,102,153,.4)}

/* ============================================================
   HERO SECTION
   ============================================================ */
.ws-hero {
  background: linear-gradient(160deg, var(--ws-bg) 0%, var(--ws-primary-xlight) 100%);
  padding: 90px 0 80px; position: relative; overflow: hidden;
}
.ws-hero::before {
  content: ''; position: absolute; top: -120px; right: -120px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, var(--ws-primary-mid) 0%, transparent 70%);
  opacity: .4; pointer-events: none;
}
.ws-hero::after {
  content: ''; position: absolute; bottom: -80px; left: -80px;
  width: 350px; height: 350px; border-radius: 50%;
  background: radial-gradient(circle, var(--ws-primary-light) 0%, transparent 70%);
  opacity: .5; pointer-events: none;
}
.ws-hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: center;
}
.ws-hero-label {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ws-primary-light); color: var(--ws-primary-dark);
  border: 1px solid var(--ws-primary-mid); border-radius: var(--ws-radius-full);
  padding: 5px 14px; font-size: 12px; font-weight: 600;
  margin-bottom: 18px; animation: fadeUp .5s ease both;
}
.ws-hero-label i { font-size: 13px; }
.ws-hero h1 {
  font-size: clamp(32px, 4vw, 52px); font-weight: 800;
  color: var(--ws-text); line-height: 1.15; letter-spacing: -1.5px;
  margin-bottom: 18px; animation: fadeUp .6s .1s ease both;
}
.ws-hero h1 .ws-accent {
  color: var(--ws-primary);
  background: linear-gradient(135deg, var(--ws-primary) 0%, #0099cc 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.ws-hero-desc {
  font-size: 17px; color: var(--ws-text-2); line-height: 1.7;
  margin-bottom: 32px; max-width: 520px;
  animation: fadeUp .6s .2s ease both;
}
.ws-hero-actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px;
  animation: fadeUp .6s .3s ease both;
}
.ws-hero-trust {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--ws-text-3);
  animation: fadeUp .6s .4s ease both;
}
.ws-trust-avatars { display: flex; }
.ws-trust-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #fff; background: var(--ws-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  margin-left: -8px;
}
.ws-trust-avatar:first-child { margin-left: 0; }
.ws-trust-avatar:nth-child(2) { background: #0a8a6a; }
.ws-trust-avatar:nth-child(3) { background: #7a4ab5; }
.ws-trust-avatar:nth-child(4) { background: #c97020; background: var(--ws-primary); }
.ws-hero-visual { animation: scaleIn .7s .2s ease both; position: relative; }
.ws-left,.pull-left{float: left!important;}
.ws-right,.pull-right{float: right!important;}
.ws-m-5,.m-5{margin: 5px!important;}
.ws-m-10,.m-10{margin: 10px!important;}
.ws-m-15,.m-15{margin: 15px!important;}
.ws-m-20,.m-20{margin: 20px!important;}
.ws-m-25,.m-25{margin: 25px!important;}
.ws-m-30,.m-30{margin: 30px!important;}
.ws-m-35,.m-35{margin: 35px!important;}
.ws-m-40,.m-40{margin: 40px!important;}
.ws-m-50,.m-50{margin: 50px!important;}
.ws-m-60,.m-60{margin: 60px!important;}

.ws-mr-5,.mr-5{margin-right: 5px!important;}
.ws-mr-10,.mr-10{margin-right: 10px!important;}
.ws-mr-15,.mr-15{margin-right: 15px!important;}
.ws-mr-20,.mr-20{margin-right: 20px!important;}
.ws-mr-25,.mr-25{margin-right: 25px!important;}
.ws-mr-30,.mr-30{margin-right: 30px!important;}
.ws-mr-35,.mr-35{margin-right: 35px!important;}
.ws-mr-40,.mr-40{margin-right: 40px!important;}
.ws-mr-50,.mr-50{margin-right: 50px!important;}
.ws-mr-60,.mr-60{margin-right: 60px!important;}
.ws-ml-5,.ml-5{margin-left: 5px!important;}
.ws-ml-10,.ml-10{margin-left: 10px!important;}
.ws-ml-15,.ml-15{margin-left: 15px!important;}
.ws-ml-20,.ml-20{margin-left: 20px!important;}
.ws-ml-25,.ml-25{margin-left: 25px!important;}
.ws-ml-30,.ml-30{margin-left: 30px!important;}
.ws-ml-35,.ml-35{margin-left: 35px!important;}
.ws-ml-40,.ml-40{margin-left: 40px!important;}
.ws-ml-50,.ml-50{margin-left: 50px!important;}
.ws-ml-60,.ml-60{margin-left: 60px!important;}
.ws-mt-5,.mt-5{margin-top: 5px!important;}
.ws-mt-10,.mt-10{margin-top: 10px!important;}
.ws-mt-15,.mt-15{margin-top: 15px!important;}
.ws-mt-20,.mt-20{margin-top: 20px!important;}
.ws-mt-25,.mt-25{margin-top: 25px!important;}
.ws-mt-30,.mt-30{margin-top: 30px!important;}
.ws-mt-35,.mt-35{margin-top: 35px!important;}
.ws-mt-40,.mt-40{margin-top: 40px!important;}
.ws-mt-50,.mt-50{margin-top: 50px!important;}
.ws-mt-60,.mt-60{margin-top: 60px!important;}
.ws-mb-5,.mb-5{margin-bottom: 5px!important;}
.ws-mb-10,.mb-10{margin-bottom: 10px!important;}
.ws-mb-15,.mb-15{margin-bottom: 15px!important;}
.ws-mb-20,.mb-20{margin-bottom: 20px!important;}
.ws-mb-25,.mb-25{margin-bottom: 25px!important;}
.ws-mb-30,.mb-30{margin-bottom: 30px!important;}
.ws-mb-35,.mb-35{margin-bottom: 35px!important;}
.ws-mb-40,.mb-40{margin-bottom: 40px!important;}
.ws-mb-50,.mb-50{margin-bottom: 50px!important;}
.ws-mb-60,.mb-60{margin-bottom: 60px!important;}
.ws-p-0,.p-0{padding: 0px!important;}
.ws-p-5,.p-5{padding: 5px!important;}
.ws-p-10,.p-10{padding: 10px!important;}
.ws-p-15,.p-15{padding: 15px!important;}
.ws-p-20,.p-20{padding: 20px!important;}
.ws-p-25,.p-25{padding: 25px!important;}
.ws-p-30,.p-30{padding: 30px!important;}
.ws-p-35,.p-35{padding: 35px!important;}
.ws-p-40,.p-40{padding: 40px!important;}
.ws-p-50,.p-50{padding: 50px!important;}
.ws-p-60,.p-60{padding: 60px!important;}
.ws-pr-0,.pr-0{padding-right: 0px!important;}
.ws-pr-5,.pr-5{padding-right: 5px!important;}
.ws-pr-10,.pr-10{padding-right: 10px!important;}
.ws-pr-15,.pr-15{padding-right: 15px!important;}
.ws-pr-20,.pr-20{padding-right: 20px!important;}
.ws-pr-25,.pr-25{padding-right: 25px!important;}
.ws-pr-30,.pr-30{padding-right: 30px!important;}
.ws-pr-35,.pr-35{padding-right: 35px!important;}
.ws-pr-40,.pr-40{padding-right: 40px!important;}
.ws-pr-50,.pr-50{padding-right: 50px!important;}
.ws-pr-60,.pr-60{padding-right: 60px!important;}
.ws-pl-0,.pl-0{padding-left: 0px!important;}
.ws-pl-5,.pl-5{padding-left: 5px!important;}
.ws-pl-10,.pl-10{padding-left: 10px!important;}
.ws-pl-15,.pl-15{padding-left: 15px!important;}
.ws-pl-20,.pl-20{padding-left: 20px!important;}
.ws-pl-25,.pl-25{padding-left: 25px!important;}
.ws-pl-30,.pl-30{padding-left: 30px!important;}
.ws-pl-35,.pl-35{padding-left: 35px!important;}
.ws-pl-40,.pl-40{padding-left: 40px!important;}
.ws-pl-50,.pl-50{padding-left: 50px!important;}
.ws-pl-60,.pl-60{padding-left: 60px!important;}
.ws-pt-0,.pt-0{padding-top: 0px!important;}
.ws-pt-5,.pt-5{padding-top: 5px!important;}
.ws-pt-10,.pt-10{padding-top: 10px!important;}
.ws-pt-15,.pt-15{padding-top: 15px!important;}
.ws-pt-20,.pt-20{padding-top: 20px!important;}
.ws-pt-25,.pt-25{padding-top: 25px!important;}
.ws-pt-30,.pt-30{padding-top: 30px!important;}
.ws-pt-35,.pt-35{padding-top: 35px!important;}
.ws-pt-40,.pt-40{padding-top: 40px!important;}
.ws-pt-50,.pt-50{padding-top: 50px!important;}
.ws-pt-60,.pt-60{padding-top: 60px!important;}
.ws-pb-0,.pb-0{padding-bottom: 0px!important;}
.ws-pb-5,.pb-5{padding-bottom: 5px!important;}
.ws-pb-10,.pb-10{padding-bottom: 10px!important;}
.ws-pb-15,.pb-15{padding-bottom: 15px!important;}
.ws-pb-20,.pb-20{padding-bottom: 20px!important;}
.ws-pb-25,.pb-25{padding-bottom: 25px!important;}
.ws-pb-30,.pb-30{padding-bottom: 30px!important;}
.ws-pb-35,.pb-35{padding-bottom: 35px!important;}
.ws-pb-40,.pb-40{padding-bottom: 40px!important;}
.ws-pb-50,.pb-50{padding-bottom: 50px!important;}
.ws-pb-60,.pb-60{padding-bottom: 60px!important;}
.text-center {text-align: center !important;}
.text-left {text-align: left !important;}
.d-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}
.flex-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
}
.align-items-center {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}
.justify-content-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}
@media screen and (min-width: 992px) {
    .basket, .container {
        padding: 0 10px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #1f314f;
  font-family: arial;
  text-transform: capitalize;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 15px;
}

h1 {
  font-size: 52px;
}

h2 {
  font-size: 42px;
}

h3 {
  font-size: 38px;
}

h4 {
  font-size: 32px;
}

h5 {
  font-size: 24px;
}

h6 {
  font-size: 18px;
}
/* Dashboard mockup inside hero */
.ws-dash-mockup {
  background: #fff; border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-xl); box-shadow: var(--ws-shadow-xl);
  overflow: hidden; animation: float 4s ease-in-out infinite;
}
.ws-dash-topbar {
  background: var(--ws-primary); padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
}
.ws-dash-topbar-title { font-size: 12px; font-weight: 600; color: #fff; flex: 1; }
.ws-dash-topbar i { font-size: 14px; color: rgba(255,255,255,.7); }
.ws-dash-body { padding: 16px; }
.ws-dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.ws-dash-stat {
  background: var(--ws-bg-2); border-radius: var(--ws-radius); padding: 10px 12px;
  border: 1px solid var(--ws-border);
}
.ws-dash-stat-label { font-size: 9px; color: var(--ws-text-3); margin-bottom: 3px; font-weight: 500; }
.ws-dash-stat-val   { font-size: 18px; font-weight: 700; color: var(--ws-primary); }
.ws-dash-stat-sub   { font-size: 9px; color: var(--ws-success); margin-top: 2px; }
.ws-dash-table { background: #fff; border: 1px solid var(--ws-border); border-radius: var(--ws-radius); overflow: hidden; }
.ws-dash-table-head { background: var(--ws-bg-3); display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; padding: 7px 10px; }
.ws-dash-table-head span { font-size: 9px; font-weight: 600; color: var(--ws-text-3); text-transform: uppercase; letter-spacing: .5px; }
.ws-dash-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--ws-bg-3); align-items: center; }
.ws-dash-row span { font-size: 10px; color: var(--ws-text-2); }
.ws-dash-pill { display: inline-block; padding: 2px 7px; border-radius: 20px; font-size: 9px; font-weight: 600; }
.ws-dash-pill.active  { background: var(--ws-success-bg); color: var(--ws-success); }
.ws-dash-pill.pending { background: var(--ws-warning-bg); color: var(--ws-warning); }

@media (max-width: 900px) {
  .ws-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .ws-hero-desc  { max-width: 100%; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.ws-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 10px 22px;
  border-radius: var(--ws-radius); font-family: inherit;
  font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1.5px solid transparent; line-height: 1;
  white-space: nowrap; text-decoration: none;
  transition: all var(--ws-transition); position: relative; overflow: hidden;
}
.ws-btn::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0); transition: background var(--ws-transition);
}
.ws-btn:hover::after { background: rgba(255,255,255,.08); }
.ws-btn:active { transform: scale(.97); }
.ws-btn i { font-size: 17px; }

.ws-btn-primary  { background: var(--ws-primary); color: #fff; border-color: var(--ws-primary); box-shadow: 0 2px 8px rgba(0,102,153,.3); }
.ws-btn-primary:hover { background: var(--ws-primary-dark); border-color: var(--ws-primary-dark); color: #fff; box-shadow: 0 4px 16px rgba(0,102,153,.4); transform: translateY(-1px); }
.ws-btn-secondary { background: transparent; color: var(--ws-primary); border-color: var(--ws-primary); }
.ws-btn-secondary:hover { background: var(--ws-primary-light); transform: translateY(-1px); }
.ws-btn-ghost  { background: transparent; color: var(--ws-text-2); border-color: var(--ws-border-2); }
.ws-btn-ghost:hover { background: var(--ws-bg-3); color: var(--ws-text); border-color: var(--ws-border-2); }
.ws-btn-default  { background: transparent; color: var(--ws-text-2); border-color: var(--ws-border-2); }
.ws-btn-default:hover { background: var(--ws-bg-3); color: var(--ws-text); border-color: var(--ws-border-2); }
.ws-btn-dark   { background: var(--ws-text); color: #fff; border-color: var(--ws-text); }
.ws-btn-dark:hover { background: #1e2d3d; transform: translateY(-1px); }
.ws-btn-success { background: var(--ws-success); color: #fff; border-color: var(--ws-success); }
.ws-btn-danger  { background: var(--ws-danger); color: #fff; border-color: var(--ws-danger); }

.ws-btn-sm  { padding: 7px 16px; font-size: 12.5px; }
.ws-btn-sm i { font-size: 15px; }
.ws-btn-lg  { padding: 13px 30px; font-size: 15.5px; }
.ws-btn-xl  { padding: 16px 38px; font-size: 17px; border-radius: var(--ws-radius-lg); }
.ws-btn-icon { padding: 10px; }
.ws-btn-full { width: 100%; }

/* Shimmer button variant */
.ws-btn-shimmer {
  background: linear-gradient(135deg, var(--ws-primary) 0%, #0099cc 50%, var(--ws-primary) 100%);
  background-size: 200% auto; color: #fff; border: none;
  animation: shimmer 2.5s linear infinite;
  box-shadow: 0 4px 20px rgba(0,102,153,.35);
}
.ws-btn-shimmer:hover { box-shadow: 0 6px 28px rgba(0,102,153,.5); transform: translateY(-2px); }
.btn-facebook {
    color: #fff !important;
    background-color: #3b5998 !important;
    border-color: rgba(0, 0, 0, .2) !important;
}
.btn-twitter {
    color: #fff !important;
    background-color: #55acee !important;
    border-color: rgba(0, 0, 0, .2) !important;
}
.btn-linkedin {
    color: #fff !important;
    background-color: #007bb6 !important;
    border-color: rgba(0, 0, 0, .2) !important;
}
/* ============================================================
   BADGES & TAGS
   ============================================================ */
.ws-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--ws-radius-full);
  font-size: 11px; font-weight: 600; line-height: 1;
}
.ws-badge i { font-size: 11px; }
.ws-badge-primary { background: var(--ws-primary-light); color: var(--ws-primary-dark); }
.ws-badge-success { background: var(--ws-success-bg); color: var(--ws-success); }
.ws-badge-warning { background: var(--ws-warning-bg); color: var(--ws-warning); }
.ws-badge-danger  { background: var(--ws-danger-bg); color: var(--ws-danger); }
.ws-badge-neutral { background: var(--ws-bg-3); color: var(--ws-text-2); border: 1px solid var(--ws-border); }
.ws-badge-dark    { background: var(--ws-text); color: #fff; }

.ws-text-primary {color: var(--ws-primary-dark); }
.ws-text-success {color: var(--ws-success); }
.ws-text-warning {color: var(--ws-warning); }
.ws-text-danger  {color: var(--ws-danger); }
.ws-text-neutral {color: var(--ws-text-2);}
.ws-text-dark    {color: #000; }


.ws-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 14px; border-radius: var(--ws-radius);
  font-size: 12.5px; font-weight: 500; border: 1px solid var(--ws-border);
  background: #fff; color: var(--ws-text-2); cursor: pointer;
  transition: var(--ws-transition);
}
.ws-tag:hover, .ws-tag.active {
  border-color: var(--ws-primary); color: var(--ws-primary);
  background: var(--ws-primary-light);
}
.ws-tag i { font-size: 14px; }

/* ============================================================
   CARDS & FEATURE BOXES
   ============================================================ */
.ws-card {
  background: #fff; border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg); padding: 24px;
  transition: all var(--ws-transition-md);
}
.ws-card:hover {
  border-color: var(--ws-primary-mid);
  box-shadow: var(--ws-shadow-md);
  transform: translateY(-3px);
}

.ws-feat-box {
  background: #fff; border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg); padding: 28px 24px;
  position: relative; overflow: hidden;
  transition: all var(--ws-transition-md);
}
.ws-feat-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ws-primary); transform: scaleX(0); transform-origin: left;
  transition: transform var(--ws-transition-md);
}
.ws-feat-box::after {
  content: ''; position: absolute; bottom: -60px; right: -60px;
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--ws-primary-xlight);
  transition: all .4s ease; transform: scale(0);
}
.ws-feat-box:hover { border-color: var(--ws-primary-mid); box-shadow: var(--ws-shadow-md); transform: translateY(-4px); }
.ws-feat-box:hover::before { transform: scaleX(1); }
.ws-feat-box:hover::after { transform: scale(1); }
.ws-feat-icon {
  width: 48px; height: 48px; border-radius: var(--ws-radius-lg);
  background: var(--ws-primary-light); display: flex;
  align-items: center; justify-content: center; margin-bottom: 16px;
  transition: all var(--ws-transition);
}
.ws-feat-icon i { font-size: 24px; color: var(--ws-primary); transition: transform var(--ws-transition); }
.ws-feat-box:hover .ws-feat-icon { background: var(--ws-primary); }
.ws-feat-box:hover .ws-feat-icon i { color: #fff; transform: scale(1.15); }
.ws-feat-title { font-size: 16px; font-weight: 700; color: var(--ws-text); margin-bottom: 8px; }
.ws-feat-desc  { font-size: 13.5px; color: var(--ws-text-2); line-height: 1.7; }
.ws-feat-link  { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--ws-primary); display: flex; align-items: center; gap: 4px; }
.ws-feat-link i { font-size: 14px; transition: transform var(--ws-transition); }
.ws-feat-box:hover .ws-feat-link i { transform: translateX(4px); }

/* App integration card */
.ws-app-card {
  background: #fff; border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg); padding: 18px;
  display: flex; align-items: flex-start; gap: 14px;
  transition: all var(--ws-transition-md); cursor: pointer;
}
.ws-app-card:hover { border-color: var(--ws-primary); box-shadow: var(--ws-shadow-md); transform: translateY(-2px); }
.ws-app-icon {
  width: 48px; height: 48px; border-radius: var(--ws-radius-lg);
  background: var(--ws-bg-3); display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
  border: 1px solid var(--ws-border); transition: var(--ws-transition);
}
.ws-app-icon i { font-size: 24px; color: var(--ws-primary); }
.ws-app-card:hover .ws-app-icon { background: var(--ws-primary-light); border-color: var(--ws-primary-mid); }
.ws-app-name { font-size: 14px; font-weight: 700; color: var(--ws-text); margin-bottom: 3px; }
.ws-app-desc { font-size: 12px; color: var(--ws-text-3); line-height: 1.5; }
.ws-app-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; }

/* Marketplace colorful card */
.ws-market-card {
  border-radius: var(--ws-radius-xl); padding: 24px 16px 20px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 10px;
  cursor: pointer; position: relative; color: #fff;
  transition: all var(--ws-transition-md); min-height: 140px;
  overflow: hidden;
}
.ws-market-card::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0); transition: var(--ws-transition);
}
.ws-market-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: var(--ws-shadow-lg); }
.ws-market-card:hover::before { background: rgba(255,255,255,.08); }
.ws-market-card > i { font-size: 38px; opacity: .9; transition: transform var(--ws-transition); }
.ws-market-card:hover > i { transform: scale(1.1) rotate(-5deg); }
.ws-market-card-label { font-size: 13.5px; font-weight: 700; position: relative; }
.ws-market-card-count {
  position: absolute; top: 10px; right: 12px;
  background: rgba(255,255,255,.28); border-radius: var(--ws-radius-full);
  padding: 2px 9px; font-size: 11px; font-weight: 700;
}

/* Doc category card */
.ws-doc-card {
  border-radius: var(--ws-radius-lg); overflow: hidden;
  border: 1px solid var(--ws-border); cursor: pointer;
  transition: all var(--ws-transition-md);
}
.ws-doc-card:hover { box-shadow: var(--ws-shadow-md); transform: translateY(-3px); }
.ws-doc-card-top {
  padding: 22px 20px; display: flex;
  align-items: center; gap: 14px;
}
.ws-doc-card-top i { font-size: 30px; color: rgba(255,255,255,.9); }
.ws-doc-card-title { font-size: 17px; font-weight: 700; color: #fff; }
.ws-doc-card-body { padding: 14px 16px; background: #fff; border-top: 1px solid var(--ws-border); }
.ws-doc-card-desc { font-size: 13px; color: var(--ws-primary); font-weight: 500; }

/* Stats card */
.ws-stat-card {
  background: var(--ws-bg-2); border-radius: var(--ws-radius-xl);
  padding: 24px; border: 1px solid var(--ws-border);
  text-align: center; transition: var(--ws-transition-md);
}
.ws-stat-card:hover { background: var(--ws-primary-light); border-color: var(--ws-primary-mid); transform: translateY(-3px); }
.ws-stat-icon { font-size: 28px; color: var(--ws-primary); margin-bottom: 10px; }
.ws-stat-value {
  font-size: 36px; font-weight: 800; color: var(--ws-primary);
  letter-spacing: -1.5px; line-height: 1;
  margin-bottom: 6px;
}
.ws-stat-label { font-size: 13px; color: var(--ws-text-3); font-weight: 500; }

/* Pricing card */
.ws-pricing-card {
  background: #fff; border: 2px solid var(--ws-border);
  border-radius: var(--ws-radius-xl); padding: 32px 28px;
  transition: all var(--ws-transition-md); position: relative; overflow: hidden;
}
.ws-pricing-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--ws-border); transition: background var(--ws-transition);
}
.ws-pricing-card:hover { box-shadow: var(--ws-shadow-lg); transform: translateY(-4px); border-color: var(--ws-border-2); }
.ws-pricing-card:hover::before { background: var(--ws-primary); }
.ws-pricing-card.featured {
  border-color: var(--ws-primary);
  box-shadow: 0 0 0 4px var(--ws-primary-light), var(--ws-shadow-md);
}
.ws-pricing-card.featured::before { background: var(--ws-primary); }
.ws-pricing-badge { margin-bottom: 12px; }
.ws-pricing-name {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--ws-text-3); margin-bottom: 8px;
}
.ws-pricing-price {
  font-size: 48px; font-weight: 800; color: var(--ws-text);
  letter-spacing: -2px; line-height: 1; margin-bottom: 4px;
}
.ws-pricing-price span { font-size: 18px; font-weight: 400; color: var(--ws-text-3); }
.ws-pricing-period { font-size: 12.5px; color: var(--ws-text-3); margin-bottom: 16px; }
.ws-pricing-desc { font-size: 14px; color: var(--ws-text-2); margin-bottom: 22px; line-height: 1.6; }
.ws-pricing-divider { height: 1px; background: var(--ws-border); margin-bottom: 22px; }
.ws-pricing-features { margin-bottom: 28px; }
.ws-pricing-feat {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: var(--ws-text-2); margin-bottom: 10px; line-height: 1.5;
}
.ws-pricing-feat i { font-size: 16px; color: var(--ws-success); flex-shrink: 0; margin-top: 2px; }
.ws-pricing-feat.no { color: var(--ws-text-4); }
.ws-pricing-feat.no i { color: var(--ws-text-4); }

/* ============================================================
   NAVBAR DROPDOWN (simple)
   ============================================================ */
.ws-dropdown { position: relative; display: inline-flex; }
.ws-dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: #fff; border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg); padding: 6px;
  min-width: 210px; box-shadow: var(--ws-shadow-lg);
  z-index: 400; display: none; animation: scaleIn .18s ease;
}
.ws-dropdown.open .ws-dropdown-menu { display: block; }
.ws-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--ws-radius);
  font-size: 13.5px; color: var(--ws-text-2); cursor: pointer;
  transition: var(--ws-transition); text-decoration: none;
}
.ws-dropdown-item:hover { background: var(--ws-primary-light); color: var(--ws-primary); }
.ws-dropdown-item i { font-size: 16px; width: 18px; }
.ws-dropdown-divider { height: 1px; background: var(--ws-border); margin: 4px 0; }
.ws-dropdown-label {
  font-size: 10px; font-weight: 700; color: var(--ws-text-3);
  text-transform: uppercase; letter-spacing: 1px; padding: 6px 12px 2px;
}

/* ============================================================
   TABS
   ============================================================ */
.ws-tabs {
  display: flex; gap: 0; border-bottom: 2px solid var(--ws-border);
  margin-bottom: 28px; overflow-x: auto;
}
.ws-tab {
  padding: 11px 20px; font-size: 14px; font-weight: 500;
  color: var(--ws-text-3); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: var(--ws-transition); white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
}
.ws-tab:hover { color: var(--ws-primary); }
.ws-tab.active { color: var(--ws-primary); border-bottom-color: var(--ws-primary); }
.ws-tab i { font-size: 16px; }
.ws-tab-count {
  background: var(--ws-bg-3); color: var(--ws-text-3);
  border-radius: var(--ws-radius-full); padding: 1px 7px;
  font-size: 11px; font-weight: 600;
}
.ws-tab.active .ws-tab-count { background: var(--ws-primary-light); color: var(--ws-primary); }
.ws-tab-pane { display: none; animation: fadeIn .25s ease; }
.ws-tab-pane.active { display: block; }

.ws-tabs-pill {
  display: flex; gap: 4px; background: var(--ws-bg-3);
  padding: 4px; border-radius: var(--ws-radius-lg);
  width: fit-content; margin-bottom: 28px;
}
.ws-tab-pill {
  padding: 8px 20px; font-size: 13.5px; font-weight: 500;
  color: var(--ws-text-2); border-radius: var(--ws-radius);
  cursor: pointer; transition: all var(--ws-transition);
}
.ws-tab-pill:hover { color: var(--ws-text); }
.ws-tab-pill.active {
  background: #fff; color: var(--ws-primary);
  box-shadow: 0 1px 6px rgba(0,0,0,.1); font-weight: 600;
}
.hide{display:none!important;}
/* =============================
  MKT Card boxes 
  ============================== */
.ws-box-style2 .ws-btbv 
{
    width: 100%!important;
    border-radius: 0px!important;
    position: absolute!important;
    bottom: 0!important;
    height: 40px!important;
    line-height: 40px!important;
}
    
.ws-box-style2 {
    position: relative;
    margin-bottom: 50px;
    border-radius: 6px;
    padding-bottom: 10px;
    min-height: 225px;
}

.ws-box-style2 > .post__body {
    padding-top: 10px!important;
    padding-left: 10px!important;
    overflow: hidden;
}
.ws-box-style2 > .post__body > .post__title{
    font-size:18px!important;
}
.ws-box-style2 > .ws-box-header
{
    height: 110px;
    border-radius: 4px 4px 0px 0px!important;
}
    
.ws-box-style2 > .ws-box-header > .title-slogan{
    position: relative;
    display: table-cell;
    padding: 26px 16px 8px 105px;
    vertical-align: middle;
    font-size: 20px;
    line-height: 28px;
    color: #fff; 
}
.ws-box-style2 > .ws-box-header > .title-icon {
    display: table-cell;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 80px;
    height: 80px;
    text-align: center;
}

.ws-box-style2 > .ws-box-header > .title-icon > span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    background: hsla(0,0%,100%,.1);
    border-radius: 100%;
    -webkit-transition: all .45s ease-in-out;
    transition: all .45s ease-in-out;
}

.ws-box-style2 > .ws-box-header > .title-icon > span:before {
    width: calc(100% + 32px);
    height: calc(100% + 32px);
    margin-top: calc(-50% - 16px);
    margin-left: calc(-50% - 16px);
    background: hsla(0,0%,100%,.04);
    -webkit-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
.ws-box-style2 > .ws-box-header > .title-icon > span:after, .ws-box-style2 > .ws-box-header > .title-icon > span:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 100%;
}

.ws-box-style2 > .ws-box-header > .title-icon > img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 55px;
    margin: auto;
    color: transparent;
    border: none;
    outline: none;
}

.ws-box-style{
    position: relative;
    margin-bottom: 50px;
    border-radius: 6px;
    padding-bottom: 10px;
}

.ws-box-style > .post__body {
    padding-top: 10px!important;
    padding-left: 10px!important;
    overflow: hidden;
}
.ws-box-style > .post__body > .post__title{
    font-size:18px!important;
}
.ws-box-style > .ws-box-header
{
    height: 150px;
    border-radius: 4px 4px 0px 0px!important;
}
    
.ws-box-style > .ws-box-header > .title-slogan{
    position: relative;
    display: table-cell;
    padding: 48px 16px 8px 135px;
    vertical-align: middle;
    font-size: 24px;
    line-height: 28px;
    color: #fff; 
}
.ws-box-style > .ws-box-header > .title-icon,
.mkt-g > .mkt-c > .mkt-icon {
    display: table-cell;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 70px;
    height: 70px;
    text-align: center;
}
.ws-box-style > .ws-box-header > .title-icon > span,
.mkt-g > .mkt-c > .mkt-icon > span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    background: hsla(0,0%,100%,.1);
    border-radius: 100%;
    -webkit-transition: all .45s ease-in-out;
    transition: all .45s ease-in-out;
}
.mkt-g > .mkt-c > .mkt-icon > span:before,
.ws-box-style > .ws-box-header > .title-icon > span:before {
    width: calc(100% + 32px);
    height: calc(100% + 32px);
    margin-top: calc(-50% - 16px);
    margin-left: calc(-50% - 16px);
    background: hsla(0,0%,100%,.04);
    -webkit-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
.mkt-g > .mkt-c > .mkt-icon > span:after,
.mkt-g > .mkt-c > .mkt-icon > span:before,
.ws-box-style > .ws-box-header > .title-icon > span:after,
.ws-box-style > .ws-box-header > .title-icon > span:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 100%;
}

.ws-box-style > .ws-box-header > .title-icon > img,
.mkt-g > .mkt-c > .mkt-icon > img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 64px;
    margin: auto;
    color: transparent;
    border: none;
    outline: none;
}

.ws-box-bg-light-yellow,.ws-box-bg-1 {
    background: #f7d305;
    background: -moz-linear-gradient(160deg, #f7d305 0%, #ebc109 100%);
    background: -o-linear-gradient(160deg, #f7d305 0%, #ebc109 100%);
    background: -webkit-linear-gradient(290deg, #f7d305 0%, #ebc109 100%);
    background: -ms-linear-gradient(160deg, #f7d305 0%,#ebc109 100%);
    background: linear-gradient(160deg, #f7d305 0%,#ebc109 100%);
}
.ws-box-bg-light-green,.ws-box-bg-2 {
    background: #66d9a3;
    background: -moz-linear-gradient(160deg, #66d9a3 0%, #4cb584 100%);
    background: -o-linear-gradient(160deg, #66d9a3 0%, #4cb584 100%);
    background: -webkit-linear-gradient(290deg, #66d9a3 0%, #4cb584 100%);
    background: -ms-linear-gradient(160deg, #66d9a3 0%,#4cb584 100%);
    background: linear-gradient(160deg, #66d9a3 0%,#4cb584 100%);
}
.ws-box-bg-red,.ws-box-bg-3 {
    background: #ff5d5d;
    background: -moz-linear-gradient(160deg, #ff5d5d 0%, #cf4444 100%);
    background: -o-linear-gradient(160deg, #ff5d5d 0%, #cf4444 100%);
    background: -webkit-linear-gradient(290deg, #ff5d5d 0%, #cf4444 100%);
    background: -ms-linear-gradient(160deg, #ff5d5d 0%,#cf4444 100%);
    background: linear-gradient(160deg, #ff5d5d 0%,#cf4444 100%);
}
.ws-box-bg-grey,.ws-box-bg-4 {
    background: #a5a5af;
    background: -moz-linear-gradient(160deg, #a5a5af 0%, #747380 100%);
    background: -o-linear-gradient(160deg, #a5a5af 0%, #747380 100%);
    background: -webkit-linear-gradient(290deg, #a5a5af 0%, #747380 100%);
    background: -ms-linear-gradient(160deg, #a5a5af 0%,#747380 100%);
    background: linear-gradient(160deg, #a5a5af 0%,#747380 100%);
}
.ws-box-bg-orange,.ws-box-bg-5 {
    background: #ff8742;
    background: -moz-linear-gradient(160deg, #ff8742 0%, #ff6e30 100%);
    background: -o-linear-gradient(160deg, #ff8742 0%, #ff6e30 100%);
    background: -webkit-linear-gradient(290deg, #ff8742 0%, #ff6e30 100%);
    background: -ms-linear-gradient(160deg, #ff8742 0%,#ff6e30 100%);
    background: linear-gradient(160deg, #ff8742 0%,#ff6e30 100%);
}
.ws-box-bg-light-orange,.ws-box-bg-6 {
    background: #ebd335;
    background: -moz-linear-gradient(160deg, #ebd335 0%, #e0bc0a 100%);
    background: -o-linear-gradient(160deg, #ebd335 0%, #e0bc0a 100%);
    background: -webkit-linear-gradient(290deg, #ebd335 0%, #e0bc0a 100%);
    background: -ms-linear-gradient(160deg, #ebd335 0%,#e0bc0a 100%);
    background: linear-gradient(160deg, #ebd335 0%,#e0bc0a 100%);
}
.ws-box-bg-dark-orange,.ws-box-bg-7  {
    background: #e3a148;
    background: -moz-linear-gradient(160deg, #e3a148 0%, #dc8510 100%);
    background: -o-linear-gradient(160deg, #e3a148 0%, #dc8510 100%);
    background: -webkit-linear-gradient(290deg, #e3a148 0%, #dc8510 100%);
    background: -ms-linear-gradient(160deg, #e3a148 0%,#dc8510 100%);
    background: linear-gradient(160deg, #e3a148 0%,#dc8510 100%);
}
.ws-box-bg-jamuni,.ws-box-bg-8 {
    background: #968aeb;
    background: -moz-linear-gradient(160deg, #968aeb 0%, #7376c9 100%);
    background: -o-linear-gradient(160deg, #968aeb 0%, #7376c9 100%);
    background: -webkit-linear-gradient(290deg, #968aeb 0%, #7376c9 100%);
    background: -ms-linear-gradient(160deg, #968aeb 0%,#7376c9 100%);
    background: linear-gradient(160deg, #968aeb 0%,#7376c9 100%);
}
.ws-box-bg-crystal,.ws-box-bg-9 {
    background: #a2d0e2;
    background: -moz-linear-gradient(160deg, #a2d0e2 0%, #89b4c5 100%);
    background: -o-linear-gradient(160deg, #a2d0e2 0%, #89b4c5 100%);
    background: -webkit-linear-gradient(290deg, #a2d0e2 0%, #89b4c5 100%);
    background: -ms-linear-gradient(160deg, #a2d0e2 0%,#89b4c5 100%);
    background: linear-gradient(160deg, #a2d0e2 0%,#89b4c5 100%);
}
.ws-box-bg-gray,.ws-box-bg-10 {
    background: #c5d0a1;
    background: -moz-linear-gradient(160deg, #c5d0a1 0%, #aeba80 100%);
    background: -o-linear-gradient(160deg, #c5d0a1 0%, #aeba80 100%);
    background: -webkit-linear-gradient(290deg, #c5d0a1 0%, #aeba80 100%);
    background: -ms-linear-gradient(160deg, #c5d0a1 0%,#aeba80 100%);
    background: linear-gradient(160deg, #c5d0a1 0%,#aeba80 100%);
}
.ws-box-bg-meroon,.ws-box-bg-11 {
    background: #ccb6a3;
    background: -moz-linear-gradient(160deg, #ccb6a3 0%, #ab9989 100%);
    background: -o-linear-gradient(160deg, #ccb6a3 0%, #ab9989 100%);
    background: -webkit-linear-gradient(290deg, #ccb6a3 0%, #ab9989 100%);
    background: -ms-linear-gradient(160deg, #ccb6a3 0%,#ab9989 100%);
    background: linear-gradient(160deg, #ccb6a3 0%,#ab9989 100%);
}
.ws-box-bg-dark-meroon,.ws-box-bg-12 {
    background: #725bf1;
    background: -moz-linear-gradient(160deg, #725bf1 0%, #5140bb 100%);
    background: -o-linear-gradient(160deg, #725bf1 0%, #5140bb 100%);
    background: -webkit-linear-gradient(290deg, #725bf1 0%, #5140bb 100%);
    background: -ms-linear-gradient(160deg, #725bf1 0%,#5140bb 100%);
    background: linear-gradient(160deg, #725bf1 0%,#5140bb 100%);
}
.ws-box-bg-green,.ws-box-bg-13 {
    background: #48d984;
    background: -moz-linear-gradient(160deg, #48d984 0%, #2eb964 100%);
    background: -o-linear-gradient(160deg, #48d984 0%, #2eb964 100%);
    background: -webkit-linear-gradient(290deg, #48d984 0%, #2eb964 100%);
    background: -ms-linear-gradient(160deg, #48d984 0%,#2eb964 100%);
    background: linear-gradient(160deg, #48d984 0%,#2eb964 100%);
}
.ws-box-bg-light-green2,.ws-box-bg-14 {
    background: #a7de26;
    background: -moz-linear-gradient(160deg, #a7de26 0%, #99cc23 100%);
    background: -o-linear-gradient(160deg, #a7de26 0%, #99cc23 100%);
    background: -webkit-linear-gradient(290deg, #a7de26 0%, #99cc23 100%);
    background: -ms-linear-gradient(160deg, #a7de26 0%,#99cc23 100%);
    background: linear-gradient(160deg, #a7de26 0%,#99cc23 100%);
}
.ws-box-bg-slati,.ws-box-bg-15 {
    background: #53b0bd;
    background: -moz-linear-gradient(160deg, #53b0bd 0%, #499ba6 100%);
    background: -o-linear-gradient(160deg, #53b0bd 0%, #499ba6 100%);
    background: -webkit-linear-gradient(290deg, #53b0bd 0%, #499ba6 100%);
    background: -ms-linear-gradient(160deg, #53b0bd 0%,#499ba6 100%);
    background: linear-gradient(160deg, #53b0bd 0%,#499ba6 100%);
}
.ws-box-bg-light-slaty,.ws-box-bg-16 {
    background: #97a6db;
    background: -moz-linear-gradient(160deg, #97a6db 0%, #6c83bd 100%);
    background: -o-linear-gradient(160deg, #97a6db 0%, #6c83bd 100%);
    background: -webkit-linear-gradient(290deg, #97a6db 0%, #6c83bd 100%);
    background: -ms-linear-gradient(160deg, #97a6db 0%,#6c83bd 100%);
    background: linear-gradient(160deg, #97a6db 0%,#6c83bd 100%);
}
.ws-box-bg-light-slati,.ws-box-bg-17 {
    background: #90d6d1;
    background: -moz-linear-gradient(160deg, #90d6d1 0%, #72b2ae 100%);
    background: -o-linear-gradient(160deg, #90d6d1 0%, #72b2ae 100%);
    background: -webkit-linear-gradient(290deg, #90d6d1 0%, #72b2ae 100%);
    background: -ms-linear-gradient(160deg, #90d6d1 0%,#72b2ae 100%);
    background: linear-gradient(160deg, #90d6d1 0%,#72b2ae 100%);
}

.ws-box-bg-light-dark-sky,.ws-box-bg-18 {
    background: #2db9e3;
    background: -moz-linear-gradient(160deg, #2db9e3 0%, #138fbd 100%);
    background: -o-linear-gradient(160deg, #2db9e3 0%, #138fbd 100%);
    background: -webkit-linear-gradient(290deg, #2db9e3 0%, #138fbd 100%);
    background: -ms-linear-gradient(160deg, #2db9e3 0%,#138fbd 100%);
    background: linear-gradient(160deg, #2db9e3 0%,#138fbd 100%);
}
.ws-box-bg-sky,.ws-box-bg-19 {
    background: #007bfc;
    background: -moz-linear-gradient(160deg, #007bfc 0%, #51b0fe 100%);
    background: -o-linear-gradient(160deg, #007bfc 0%, #51b0fe 100%);
    background: -webkit-linear-gradient(290deg, #007bfc 0%, #51b0fe 100%);
    background: -ms-linear-gradient(160deg, #007bfc 0%,#51b0fe 100%);
    background: linear-gradient(160deg, #007bfc 0%,#51b0fe 100%);
}
.ws-box-style-light-yellow,
.ws-box-style-light-green,
.ws-box-style-grey,
.ws-box-style-red,
.ws-box-style-orange,
.ws-box-style-dark-orange,
.ws-box-style-jamuni,
.ws-box-style-grey,
.ws-box-style-orange,
.ws-box-style-light-orange,
.ws-box-style-slati,
.ws-box-style-light-slaty,
.ws-box-style-light-slati,
.ws-box-style-light-dark-sky,
.ws-box-style-green,
.ws-box-style-light-green2,
.ws-box-style-dark-meroon,
.ws-box-style-meroon,
.ws-box-style-gray,
.ws-box-style-crystal,
.ws-box-style-jamuni,
.ws-box-style-sky,
.ws-box-style-1,.ws-box-style-2,.ws-box-style-3,.ws-box-style-4,.ws-box-style-5,.ws-box-style-6,.ws-box-style-7,.ws-box-style-8,.ws-box-style-9,.ws-box-style-10,
.ws-box-style-11,.ws-box-style-12,.ws-box-style-13,.ws-box-style-14,.ws-box-style-15,.ws-box-style-16,.ws-box-style-17,.ws-box-style-18,.ws-box-style-19,.ws-box-style-20
{
    background: #fff;
}

/* ============================================================
   SIDEBAR LAYOUT
   ============================================================ */
.ws-sidebar-layout { display: grid; grid-template-columns: 270px 1fr; gap: 36px; }
@media (max-width: 1000px) { .ws-sidebar-layout { grid-template-columns: 1fr; } }

.ws-sidebar {
  background: #fff; border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-xl); padding: 18px;
  height: fit-content; position: sticky; top: 82px;
}
.ws-sidebar-title {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--ws-text-3); padding: 6px 12px; margin-bottom: 4px;
}
.ws-sidebar-item {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: var(--ws-radius-lg);
  font-size: 13.5px; color: var(--ws-text-2);
  cursor: pointer; transition: var(--ws-transition); text-decoration: none;
}
.ws-sidebar-item:hover { background: var(--ws-bg-2); color: var(--ws-text); }
.ws-sidebar-item.active { background: var(--ws-primary-light); color: var(--ws-primary); font-weight: 600; }
.ws-sidebar-item i { font-size: 17px; width: 20px; }
.ws-sidebar-badge { margin-left: auto; }
.ws-sidebar-divider { height: 1px; background: var(--ws-border); margin: 8px 0; }

/* ============================================================
   ALERTS
   ============================================================ */
.ws-alert {
  display: block;position: relative; align-items: flex-start; gap: 12px;
  padding: 14px 18px; border-radius: var(--ws-radius-lg);
  border: 1px solid transparent; margin-bottom: 12px;
  animation: fadeIn .3s ease;
}
.ws-alert:last-child { margin-bottom: 0; }
.ws-alert i { position:absolute;left:0;top:0;font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.ws-alert-body { flex: 1; }
.ws-alert-title { font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
.ws-alert-text  { font-size: 13px; line-height: 1.6; }
.ws-alert-close { background: none; border: none; font-size: 18px; cursor: pointer; opacity: .6; transition: opacity var(--ws-transition); }
.ws-alert-close:hover { opacity: 1; }
.ws-alert-info    { background: var(--ws-info-bg);    border-color: #b5d4f5; color: var(--ws-info); }
.ws-alert-success { background: var(--ws-success-bg); border-color: var(--ws-success-mid); color: var(--ws-success); }
.ws-alert-warning { background: var(--ws-warning-bg); border-color: var(--ws-warning-mid); color: var(--ws-warning); }
.ws-alert-danger  { background: var(--ws-danger-bg);  border-color: var(--ws-danger-mid);  color: var(--ws-danger); }

/* ============================================================
   MODALS
   ============================================================ */
.ws-modal-backdrop {
  background: rgba(15,25,35,.55); position: fixed; inset: 0;
  z-index: 1000; display: flex; align-items: center;
  justify-content: center; padding: 24px;
  animation: fadeIn .22s ease;
}
.ws-modal {
  background: #fff; border-radius: var(--ws-radius-xl);
  max-width: 55%; width: 55%; box-shadow: var(--ws-shadow-xl);
  animation: scaleIn .22s ease;
}
.ws-modal-header {
  padding: 24px 26px 18px; border-bottom: 1px solid var(--ws-border);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.ws-modal-title { font-size: 18px; font-weight: 700; color: var(--ws-text); }
.ws-modal-sub   { font-size: 13px; color: var(--ws-text-3); margin-top: 3px; }
.ws-modal-body  { padding: 24px 26px; }
.ws-modal-footer {
  padding: 18px 26px 24px; border-top: 1px solid var(--ws-border);
  display: flex; justify-content: flex-end; gap: 10px;
}
.ws-modal-close {
  background: var(--ws-bg-3); border: none; border-radius: var(--ws-radius);
  padding: 6px; cursor: pointer; color: var(--ws-text-2);
  transition: var(--ws-transition); display: flex;
}
.ws-modal-close:hover { background: var(--ws-danger-bg); color: var(--ws-danger); }
.ws-modal-close i { font-size: 20px; }
.ws-modal-backdrop {
  background: rgba(15,25,35,.55);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .22s ease, visibility .22s ease;
}

.ws-modal-backdrop.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Modal animation wrapper */
.ws-modal {
  background: #fff;
  border-radius: var(--ws-radius-xl);
  max-width: 55%;
  width: 55%;
  box-shadow: var(--ws-shadow-xl);

  transform: scale(.85);
  opacity: 0;

  transition: transform .22s ease, opacity .22s ease;
}

/* Open state */
.ws-modal-backdrop.show .ws-modal {
  transform: scale(1);
  opacity: 1;
}

/* Close animation (extra smooth exit) */
.ws-modal-backdrop.hide .ws-modal {
  transform: scale(.85);
  opacity: 0;
}
/* ============================================================
   FAQ / ACCORDION
   ============================================================ */
.ws-faq-item {
  border: 1px solid var(--ws-border); border-radius: var(--ws-radius-lg);
  margin-bottom: 10px; overflow: hidden; transition: border-color var(--ws-transition);
}
.ws-faq-item:hover { border-color: var(--ws-primary-mid); }
.ws-faq-item.open  { border-color: var(--ws-primary-mid); }
.ws-faq-question {
  padding: 18px 22px; font-size: 15px; font-weight: 600; color: var(--ws-text);
  cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; transition: var(--ws-transition);
  user-select: none;
}
.ws-faq-item.open .ws-faq-question { color: var(--ws-primary); background: var(--ws-primary-xlight); }
.ws-faq-icon {
  font-size: 20px; color: var(--ws-text-3); flex-shrink: 0;
  transition: transform .3s ease, color var(--ws-transition);
}
.ws-faq-item.open .ws-faq-icon { transform: rotate(45deg); color: var(--ws-primary); }
.ws-faq-answer {
  padding: 0 22px; max-height: 0; overflow: hidden;
  transition: max-height .38s ease, padding .22s ease;
  font-size: 14.5px; color: var(--ws-text-2); line-height: 1.75;
}
.ws-faq-item.open .ws-faq-answer { max-height: 500px; padding: 16px 22px 22px; }

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.ws-compare-wrap { overflow-x: auto; border-radius: var(--ws-radius-xl); box-shadow: var(--ws-shadow); }
.ws-compare { width: 100%; border-collapse: collapse; }
.ws-compare th {
  padding: 16px 18px; text-align: center; font-size: 13.5px;
  font-weight: 700; background: var(--ws-bg-2); border: 1px solid var(--ws-border);
}
.ws-compare th:first-child { text-align: left; min-width: 220px; }
.ws-compare th.featured { background: var(--ws-primary); color: #fff; }
.ws-compare td {
  padding: 14px 18px; text-align: center; font-size: 13.5px;
  color: var(--ws-text-2); border: 1px solid var(--ws-border);
}
.ws-compare td:first-child { text-align: left; font-weight: 500; color: var(--ws-text); }
.ws-compare tbody tr { transition: background var(--ws-transition); }
.ws-compare tbody tr:hover td { background: var(--ws-bg-2); }
.ws-compare .ws-compare-cat td {
  background: var(--ws-bg-3); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1px; color: var(--ws-text-3);
  text-align: left;
}
.ws-chk  { color: var(--ws-success); font-size: 20px; }
.ws-nope { color: var(--ws-text-4); font-size: 20px; }

/* ============================================================
   PAGINATION
   ============================================================ */
.ws-pagination { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ws-page-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--ws-radius);
  font-size: 13.5px; font-weight: 500; color: var(--ws-text-2);
  border: 1px solid var(--ws-border); cursor: pointer;
  transition: var(--ws-transition); background: #fff; text-decoration: none;
}
.ws-page-btn:hover { border-color: var(--ws-primary); color: var(--ws-primary); background: var(--ws-primary-light); }
.ws-page-btn.active { background: var(--ws-primary); border-color: var(--ws-primary); color: #fff; }
.ws-page-btn.disabled { opacity: .35; pointer-events: none; }
.ws-page-btn i { font-size: 17px; }
.ws-page-dots { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--ws-text-3); font-size: 15px; }

/* ============================================================
   TIMELINE
   ============================================================ */
.ws-timeline { position: relative; padding-left: 36px; }
.ws-timeline::before {
  content: ''; position: absolute; left: 13px; top: 10px; bottom: 10px;
  width: 2px; background: var(--ws-border);
}
.ws-timeline-item { position: relative; margin-bottom: 36px; }
.ws-timeline-item:last-child { margin-bottom: 0; }
.ws-timeline-dot {
  position: absolute; left: -36px; top: 4px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ws-primary); border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--ws-primary);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--ws-transition);
}
.ws-timeline-dot i { font-size: 12px; color: #fff; }
.ws-timeline-dot.done     { background: var(--ws-success); box-shadow: 0 0 0 2px var(--ws-success); }
.ws-timeline-dot.upcoming { background: var(--ws-bg-4); box-shadow: 0 0 0 2px var(--ws-border-2); }
.ws-timeline-dot.upcoming i { color: var(--ws-text-3); }
.ws-timeline-date { font-size: 11.5px; font-weight: 600; color: var(--ws-text-3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
.ws-timeline-card { background: #fff; border: 1px solid var(--ws-border); border-radius: var(--ws-radius-lg); padding: 18px 20px; transition: all var(--ws-transition-md); }
.ws-timeline-card:hover { border-color: var(--ws-primary-mid); box-shadow: var(--ws-shadow); }
.ws-timeline-title { font-size: 15px; font-weight: 700; color: var(--ws-text); margin-bottom: 6px; }
.ws-timeline-desc  { font-size: 13.5px; color: var(--ws-text-2); line-height: 1.65; margin-bottom: 10px; }

/* ============================================================
   FORMS
   ============================================================ */
.ws-form-group { margin-bottom: 20px; }
.ws-form-group:last-child { margin-bottom: 0; }
.ws-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ws-text); margin-bottom: 7px; }
.ws-label-req::after { content: ' *'; color: var(--ws-danger); }
.ws-input, .ws-select, .ws-textarea {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--ws-border); border-radius: var(--ws-radius-lg);
  font-size: 14px; font-family: inherit;
  color: var(--ws-text); background: #fff; outline: none;
  transition: all var(--ws-transition); line-height: 1.5;
}
.ws-input::placeholder { color: var(--ws-text-4); }
.ws-input:hover, .ws-select:hover { border-color: var(--ws-border-2); }
.ws-input:focus, .ws-select:focus, .ws-textarea:focus {
  border-color: var(--ws-primary);
  box-shadow: 0 0 0 3px var(--ws-primary-light);
}
.ws-input.error { border-color: var(--ws-danger); }
.ws-input.error:focus { box-shadow: 0 0 0 3px var(--ws-danger-bg); }
.ws-hint { font-size: 12px; color: var(--ws-text-3); margin-top: 5px; display: flex; align-items: center; gap: 4px; }
.ws-hint.error { color: var(--ws-danger); }
.ws-hint i { font-size: 13px; }
.ws-input-wrap { position: relative; }
.ws-input-wrap .ws-input-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--ws-text-3); pointer-events: none; }
.ws-input-wrap .ws-input { padding-left: 42px; }
.ws-textarea { min-height: 110px; resize: vertical; }
.ws-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a9ab0' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.ws-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .ws-form-row { grid-template-columns: 1fr; } }

/* ============================================================
   SEARCH BAR
   ============================================================ */
.ws-search { position: relative; }
.ws-search .ws-search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 19px; color: var(--ws-text-3); pointer-events: none; }
.ws-search input {
  width: 100%; padding: 13px 16px 13px 46px;
  border: 1.5px solid var(--ws-border); border-radius: var(--ws-radius-xl);
  font-size: 15px; font-family: inherit;
  color: var(--ws-text); background: #fff; outline: none;
  transition: all var(--ws-transition);
}
.ws-search input:focus { border-color: var(--ws-primary); box-shadow: 0 0 0 3px var(--ws-primary-light); }
.ws-search input::placeholder { color: var(--ws-text-3); }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.ws-section-header { margin-bottom: 48px; }
.ws-section-header.center { text-align: center; }
.ws-section-header.center p { margin: 0 auto; }
.ws-section-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--ws-primary);
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px;
}
.ws-section-label i { font-size: 14px; }
.ws-section-header h2 {
  font-size: clamp(26px, 3.5vw, 40px); font-weight: 800;
  color: var(--ws-text); letter-spacing: -1px; line-height: 1.2; margin-bottom: 14px;
}
.ws-section-header p {
  font-size: 16.5px; color: var(--ws-text-2); line-height: 1.7; max-width: 65%;
}

/* Breadcrumb */
.ws-breadcrumb { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 24px; }
.ws-breadcrumb a { font-size: 13px; color: var(--ws-text-3); transition: color var(--ws-transition); }
.ws-breadcrumb a:hover { color: var(--ws-primary); }
.ws-breadcrumb-sep { font-size: 13px; color: var(--ws-text-4); }
.ws-breadcrumb-current { font-size: 13px; color: var(--ws-text); font-weight: 500; }

/* ============================================================
   FEATURE REQUEST LIST
   ============================================================ */
.ws-req-item {
  background: #fff; border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg); padding: 18px 20px;
  display: flex; align-items: flex-start; gap: 16px;
  transition: all var(--ws-transition-md);
}
.ws-req-item:hover { border-color: var(--ws-primary-mid); box-shadow: var(--ws-shadow); }
.ws-req-vote { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 50px; }
.ws-req-vote-btn {
  background: var(--ws-bg-2); border: 1.5px solid var(--ws-border);
  border-radius: var(--ws-radius); padding: 6px 10px;
  font-size: 14px; cursor: pointer; transition: var(--ws-transition);
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.ws-req-vote-btn:hover { background: var(--ws-primary-light); border-color: var(--ws-primary); color: var(--ws-primary); transform: translateY(-2px); }
.ws-req-vote-btn.voted { background: var(--ws-primary); border-color: var(--ws-primary); color: #fff; }
.ws-req-vote-count { font-size: 13px; font-weight: 700; color: var(--ws-text-2); }
.ws-req-body { flex: 1; min-width: 0; }
.ws-req-title { font-size: 14.5px; font-weight: 700; color: var(--ws-text); margin-bottom: 5px; }
.ws-req-desc  { font-size: 13px; color: var(--ws-text-2); line-height: 1.6; margin-bottom: 10px; }
.ws-req-meta  { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--ws-text-3); }
.ws-req-status { padding: 3px 9px; border-radius: var(--ws-radius-full); font-size: 11px; font-weight: 700; }
.ws-req-status.planned     { background: var(--ws-info-bg);    color: var(--ws-info); }
.ws-req-status.in-progress { background: var(--ws-warning-bg); color: var(--ws-warning); }
.ws-req-status.done        { background: var(--ws-success-bg); color: var(--ws-success); }
.ws-req-status.reviewing   { background: var(--ws-bg-3);       color: var(--ws-text-2); }

/* ============================================================
   FOOTER
   ============================================================ */
.ws-footer { background: var(--ws-text); color: rgba(255,255,255,.65); padding: 64px 0 28px; }
.ws-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
@media (max-width: 1024px) { .ws-footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px)  { .ws-footer-grid { grid-template-columns: 1fr 1fr; } }
.ws-footer-brand p { font-size: 13.5px; line-height: 1.7; margin-top: 10px; max-width: 260px; }
.ws-footer-col h4 { font-size: 12px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 14px; }
.ws-footer-col a { display: block; font-size: 13.5px; color: rgba(255,255,255,.55); margin-bottom: 9px; text-decoration: none; transition: color var(--ws-transition); }
.ws-footer-col a:hover { color: #fff; }
.ws-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; font-size: 13px;
}
.ws-footer-socials { display: flex; gap: 8px; }
.ws-footer-social {
  width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--ws-radius); display: flex; align-items: center;
  justify-content: center; text-decoration: none; color: rgba(255,255,255,.6);
  transition: all var(--ws-transition);
}
.ws-footer-social:hover { background: var(--ws-primary); border-color: var(--ws-primary); color: #fff; }
.ws-footer-social i { font-size: 15px; }
.ws-footer-logo { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ws-footer-logo-mark { width: 30px; height: 30px; background: var(--ws-primary); border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.ws-footer-logo-mark i { color: #fff; font-size: 16px; }
.ws-footer-logo-text { font-size: 17px; font-weight: 800; color: #fff; }

/* ============================================================
   UTILITY
   ============================================================ */
.ws-divider { height: 1px; background: var(--ws-border); margin: 28px 0; }
.ws-text-primary { color: var(--ws-primary); }
.ws-text-muted   { color: var(--ws-text-2); }
.ws-fw-700 { font-weight: 700; }
.ws-fw-800 { font-weight: 800; }
.ws-mt-0  { margin-top: 0 !important; }
.ws-mb-8  { margin-bottom: 8px; }
.ws-mb-16 { margin-bottom: 16px; }
.ws-mb-24 { margin-bottom: 24px; }
.ws-mb-32 { margin-bottom: 32px; }
.ws-d-flex { display: flex; }
.ws-align-center { align-items: center; }
.ws-justify-between { justify-content: space-between; }
.ws-gap-8  { gap: 8px; }
.ws-gap-12 { gap: 12px; }
.ws-gap-16 { gap: 16px; }
.ws-flex-1 { flex: 1; }
.ws-bg-surface { background: var(--ws-bg-2); }
.ws-rounded { border-radius: var(--ws-radius-lg); }

/* Market card colors */
.bg-blue { background: #1a6ecf; }
.bg-teal { background: #0e8f76; }
.bg-purple{ background: #6b48c8; }
.bg-orange{ background: #e07520; }
.bg-red{ background: #c93c3c; }
.bg-cyan { background: #1098ad; }
.bg-green { background: #2a8c4a; }
.bg-pink { background: #c2457a; }
.bg-amber { background: #c49010; }
.bg-slate { background: #4a6a8a; }
.bg-indigo { background: #4355b9; }
.bg-rose { background: #d4404a; }
/* Base + hover auto-darker using color-mix */
.bg-1  { --c:#1a6ecf; background: var(--c); }
.bg-2  { --c:#0e8f76; background: var(--c); }
.bg-3  { --c:#6b48c8; background: var(--c); }
.bg-4  { --c:#e07520; background: var(--c); }
.bg-5  { --c:#c93c3c; background: var(--c); }
.bg-6  { --c:#1098ad; background: var(--c); }
.bg-7  { --c:#2a8c4a; background: var(--c); }
.bg-8  { --c:#c2457a; background: var(--c); }
.bg-9  { --c:#c49010; background: var(--c); }
.bg-10 { --c:#4a6a8a; background: var(--c); }
.bg-11 { --c:#4355b9; background: var(--c); }
.bg-12 { --c:#d4404a; background: var(--c); }
.bg-13 { --c:#7c3aed; background: var(--c); }
.bg-14 { --c:#2563eb; background: var(--c); }
.bg-15 { --c:#059669; background: var(--c); }
.bg-16 { --c:#dc2626; background: var(--c); }
.bg-17 { --c:#ea580c; background: var(--c); }
.bg-18 { --c:#16a34a; background: var(--c); }
.bg-19 { --c:#0ea5e9; background: var(--c); }
.bg-20 { --c:#db2777; background: var(--c); }
.bg-21 { --c:#f59e0b; background: var(--c); }
.bg-22 { --c:#84cc16; background: var(--c); }
.bg-23 { --c:#6366f1; background: var(--c); }
.bg-24 { --c:#14b8a6; background: var(--c); }
.bg-25 { --c:#f43f5e; background: var(--c); }
.bg-26 { --c:#8b5cf6; background: var(--c); }
.bg-27 { --c:#06b6d4; background: var(--c); }
.bg-28 { --c:#22c55e; background: var(--c); }
.bg-29 { --c:#fb7185; background: var(--c); }
.bg-30 { --c:#334155; background: var(--c); }

/* Auto hover (darker shade) */
[class^="bg-"]:hover {
  background: color-mix(in srgb, var(--c) 80%, black);
  color:#fff!important;
  transition: 0.2s ease;
}
/* ============================================================
   MOBILE OVERFLOW FIX
   ============================================================ */
html, body { overflow-x: hidden; max-width: 100%; }
/* Floating dashboard badges use negative left/right — clamp to viewport on small screens */
@media (max-width: 768px) {
  [style*="left:-"], [style*="left: -"],
  [style*="right:-"], [style*="right: -"] {
    left: auto !important; right: auto !important;
    position: static !important; transform: none !important;
    margin: 8px 0 !important;
  }
}


/* ── HERO ── */
.hero{min-height:100vh;display:flex;align-items:center;padding:120px 0 80px;position:relative;overflow:hidden;background:var(--ink)}
.orbs{position:absolute;inset:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(80px)}
.o1{width:600px;height:600px;background:radial-gradient(circle,rgba(0,102,153,.9) 0%,transparent 70%);top:-100px;left:-100px;animation:orb1 12s ease-in-out infinite;opacity:.55}
.o2{width:500px;height:500px;background:radial-gradient(circle,rgba(0,187,238,.8) 0%,transparent 70%);top:200px;right:-150px;animation:orb2 15s ease-in-out infinite;opacity:.5}
.o3{width:400px;height:400px;background:radial-gradient(circle,rgba(0,229,160,.7) 0%,transparent 70%);bottom:-80px;left:30%;animation:orb3 18s ease-in-out infinite;opacity:.3}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,102,153,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,102,153,.07) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.hero-fade{position:absolute;bottom:0;left:0;right:0;height:180px;background:linear-gradient(to bottom,transparent,var(--s));pointer-events:none}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:900px){.hero-in{grid-template-columns:1fr;gap:48px}}

/* hero pill */
.hero-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);border-radius:var(--rf);padding:6px 16px 6px 8px;margin-bottom:22px;animation:fadeUp .5s var(--ease) both}
.pill-dot{width:8px;height:8px;border-radius:50%;background:var(--ac2);animation:blink 1.4s ease-in-out infinite;flex-shrink:0}
.hero-pill-txt{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.88)}
.hero-pill a{color:var(--ac);font-weight:800;font-size:12.5px;margin-left:4px}

.hero-h1{font-size:clamp(40px,5.5vw,68px);font-weight:900;line-height:1.07;letter-spacing:-2.5px;color:#fff;margin-bottom:22px;animation:fadeUp .6s .1s var(--ease) both}
.grad{background:linear-gradient(135deg,var(--ac) 0%,var(--ac2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:18px;color:rgba(255,255,255,.68);line-height:1.72;margin-bottom:36px;max-width:520px;animation:fadeUp .6s .2s var(--ease) both}
.hero-sub strong{color:#fff;font-weight:700}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:44px;animation:fadeUp .6s .3s var(--ease) both}
.hero-stats{display:flex;flex-wrap:wrap;gap:0;animation:fadeUp .6s .4s var(--ease) both}
.hstat{min-width:120px;padding:0 28px 0 0;position:relative}
.hstat:not(:last-child)::after{content:'';position:absolute;right:14px;top:4px;bottom:4px;width:1px;background:rgba(255,255,255,.15)}
.hstat:first-child{padding-left:0}
.hstat-n{font-size:24px;font-weight:900;color:#fff;letter-spacing:-1px;line-height:1}
.hstat-l{font-size:11.5px;color:rgba(255,255,255,.45);font-weight:500;margin-top:3px}

/* dashboard */
.dash{background:rgba(255,255,255,.06);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.14);border-radius:var(--rl);overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.05);animation:float 5s ease-in-out infinite}
.dash-bar{background:rgba(0,102,153,.55);backdrop-filter:blur(10px);padding:11px 18px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.1)}
.dots{display:flex;gap:5px}
.dot{width:10px;height:10px;border-radius:50%}
.dot-r{background:#ff5f57}.dot-y{background:#ffbd2e}.dot-g{background:#28c840}
.bar-title{font-size:12px;font-weight:700;color:rgba(255,255,255,.8);margin-left:8px;flex:1}
.bar-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--ac2));display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:#fff}
.dash-body{padding:16px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.kpi{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:var(--rl);padding:12px 13px}
.kpi-l{font-size:8.5px;font-weight:800;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.8px;margin-bottom:5px}
.kpi-v{font-size:22px;font-weight:900;color:#fff;letter-spacing:-1px;line-height:1}
.kpi-t{font-size:9px;margin-top:3px;font-weight:700}
.kpi-t.up{color:var(--ac2)}.kpi-t.warn{color:var(--warn)}
.dlbl{font-size:8.5px;font-weight:800;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:1px;margin-bottom:7px}
.dtable{background:rgba(255,255,255,.05);border-radius:var(--rl);overflow:hidden;border:1px solid rgba(255,255,255,.07)}
.dth{display:grid;grid-template-columns:2fr 1.2fr 1fr 1fr;padding:7px 11px}
.dth span{font-size:8px;font-weight:700;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.5px}
.dr{display:grid;grid-template-columns:2fr 1.2fr 1fr 1fr;padding:8px 11px;border-top:1px solid rgba(255,255,255,.05);align-items:center}
.dr-n{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.78)}
.dr-s{font-size:10px;color:rgba(255,255,255,.4)}
.dr-a{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.65)}
.dp{display:inline-block;padding:2px 7px;border-radius:20px;font-size:9px;font-weight:800}
.dp.ok{background:rgba(0,229,160,.2);color:#00e5a0}
.dp.pn{background:rgba(245,158,11,.2);color:#f59e0b}
.dp.nw{background:rgba(0,187,238,.2);color:#00bbee}
.feed{margin-top:11px;display:flex;flex-direction:column;gap:5px}
.fev{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--r);padding:7px 10px}
.fev-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.fev-dot.g{background:#00e5a0;box-shadow:0 0 5px #00e5a0}
.fev-dot.b{background:var(--ac);box-shadow:0 0 5px var(--ac)}
.fev-dot.a{background:var(--warn);box-shadow:0 0 5px var(--warn)}
.fev-t{font-size:10px;color:rgba(255,255,255,.65);font-weight:500;flex:1}
.fev-tm{font-size:9px;color:rgba(255,255,255,.28);font-family:'DM Mono',monospace}

/* floating cards */
.flt{position:absolute;background:#fff;border:1px solid var(--bd);border-radius:var(--rl);padding:10px 14px;box-shadow:var(--shl);display:flex;align-items:center;gap:9px;z-index:2}
.flt:nth-child(1){animation:float 4s ease-in-out infinite}
.flt:nth-child(2){animation:float 4s 1.5s ease-in-out infinite}
.flt-ic{width:32px;height:32px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.flt-t{font-size:12px;font-weight:800;color:var(--ink)}
.flt-s{font-size:10.5px;color:var(--ink3)}

/* ── MARQUEE ── */
.mq-wrap{padding:26px 0;background:var(--s2);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);overflow:hidden}
.mq-lbl{text-align:center;font-size:10.5px;font-weight:800;color:var(--ink4);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px}
.mq-track{display:flex;gap:12px;animation:marquee 20s ease-in-out infinite;width:max-content}
/* Pause animation on hover */
.mq-track:hover{
    animation-play-state: paused;
}
.int-ch{display:flex;align-items:center;gap:8px;padding:8px 18px;background:#fff;border:1px solid var(--bd);border-radius:var(--rf);font-size:13px;font-weight:700;color:var(--ink2);box-shadow:0 1px 4px rgba(0,0,0,.05)}
.int-ch i{font-size:17px;color:var(--p)}

/* ── STATS ── */
.stats-s{padding:0px;background:var(--ink);position:relative;overflow:hidden}
.stats-s::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(0,102,153,.28) 0%,transparent 70%)}
.stats-g{display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:1}
.sbox{text-align:center;padding:44px 24px;border-right:1px solid rgba(255,255,255,.06);transition:background .25s}
.sbox:last-child{border-right:none}
.sbox:hover{background:rgba(255,255,255,.03)}
.sicon{width:52px;height:52px;border-radius:var(--rl);background:rgba(0,102,153,.28);border:1px solid rgba(0,102,153,.38);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.sicon i{font-size:26px;color:var(--ac)}
.snum{font-size:48px;font-weight:900;color:#fff;letter-spacing:-2px;line-height:1;margin-bottom:6px}
.snum em{font-size:22px;color:var(--ac);font-style:normal}
.slbl{font-size:13px;color:rgba(255,255,255,.4);font-weight:500}
@media(max-width:768px){.stats-g{grid-template-columns:repeat(2,1fr)}.sbox{border-bottom:1px solid rgba(255,255,255,.06)}}

/* ── FEATURES BENTO ── */
.feat-s{padding:50px 0}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;color:var(--p);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px}
.eyebrow i{font-size:14px}
.sh2{font-size:clamp(30px,4vw,48px);font-weight:900;color:var(--ink);letter-spacing:-1.5px;line-height:1.12;margin-bottom:16px}
.ssub{font-size:17px;color:var(--ink3);line-height:1.7;max-width:600px}
.sh-center{text-align:center}.sh-center .ssub{margin:0 auto}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.bc{background:#fff;border:1.5px solid var(--bd);border-radius:var(--rxl);padding:28px;position:relative;overflow:hidden;transition:all .3s var(--ease)}
.bc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--p),var(--ac));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.bc:hover{border-color:var(--pm);box-shadow:var(--shm);transform:translateY(-6px)}
.bc:hover::before{transform:scaleX(1)}
.bc.w2{grid-column:span 2}
.bc.dark{background:var(--ink);border-color:rgba(255,255,255,.1)}
.bc-icon{width:52px;height:52px;border-radius:var(--rl);background:var(--pl);display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:all .25s var(--ease)}
.bc-icon i{font-size:26px;color:var(--p);transition:all .25s}
.bc:hover .bc-icon{background:var(--p)}
.bc:hover .bc-icon i{color:#fff;transform:scale(1.15) rotate(-5deg)}
.bc-t{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:8px}
.bc.dark .bc-t{color:#fff}
.bc-d{font-size:14px;color:var(--ink3);line-height:1.7}
.bc.dark .bc-d{color:rgba(255,255,255,.5)}
.bc-arr{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--p);margin-top:16px}
.bc-arr i{font-size:15px;transition:transform .2s}
.bc:hover .bc-arr i{transform:translateX(5px)}
.bc.dark .bc-arr{color:var(--ac)}
.bento-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.btag{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--rf);font-size:11.5px;font-weight:700;background:var(--s2);color:var(--ink2);border:1px solid var(--bd)}
.btag i{font-size:12px;color:var(--p)}
/* billing pipeline visual */
.bpipe{margin-top:18px;background:var(--s2);border-radius:var(--rl);padding:14px;border:1px solid var(--bd)}
.bpipe-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:var(--r);margin-bottom:6px;border:1px solid transparent}
.bpipe-row:last-child{margin-bottom:0}
.bpipe-row.ok{background:rgba(14,168,112,.07);border-color:rgba(14,168,112,.18)}
.bpipe-row.pp{background:rgba(0,102,153,.06);border-color:rgba(0,102,153,.14)}
.bpipe-row.wn{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.18)}
.bpipe-row.info{background:#008fcf4d;border-color:#008fcf}
.bpipe-row.danger{background:#ff00003b;border-color:#ff0000}
.bpipe-lbl{font-size:12px;font-weight:600;color:var(--ink2)}
/* savings highlight */
.savings-box{margin-top:18px;padding:16px;background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.2);border-radius:var(--rl)}
.savings-num{font-size:32px;font-weight:900;color:#00c489;letter-spacing:-1px}
.savings-lbl{font-size:11px;color:rgba(255,255,255,.45);margin-top:2px}
@media(max-width:768px){.bento{grid-template-columns:1fr}.bc.w2{grid-column:span 1}}

/* ── HOW ── */
.how-s{padding:50px 0;background:var(--ink);position:relative;overflow:hidden}
.how-s::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,102,153,.18) 0%,transparent 60%)}
.how-g{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:1}
@media(max-width:900px){.how-g{grid-template-columns:1fr;gap:48px}}
.how-steps{display:flex;flex-direction:column}
.hstep{display:flex;gap:20px;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.07);cursor:pointer;position:relative;transition:padding .2s}
.hstep:last-child{border-bottom:none}
.hstep.act{padding-left:16px}
.hstep.act::before{content:'';position:absolute;left:0;top:26px;bottom:26px;width:3px;background:linear-gradient(180deg,var(--ac),var(--ac2));border-radius:3px}
.hnum{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;font-weight:900;color:rgba(255,255,255,.35);transition:all .25s}
.hstep.act .hnum{background:linear-gradient(135deg,var(--p),var(--ac));border-color:transparent;color:#fff;box-shadow:0 4px 16px var(--pg)}
.htitle{font-size:16px;font-weight:800;color:rgba(255,255,255,.4);margin-bottom:4px;transition:color .2s}
.hstep.act .htitle{color:rgba(255,255,255,.9)}
.hdesc{font-size:13.5px;color:rgba(255,255,255,.4);line-height:1.65;display:none}
.hstep.act .hdesc{display:block;color:rgba(255,255,255,.55)}
/* activity panel */
.apanel{background:rgba(255,255,255,.05);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:var(--r2xl);padding:26px;min-height:420px;display:flex;flex-direction:column;justify-content:center}
.ap-lbl{font-size:9.5px;font-weight:800;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:1px;margin-bottom:18px}
.act-list{display:flex;flex-direction:column;gap:9px}
.act-item{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border-radius:var(--rl);border:1px solid rgba(255,255,255,.07)}
.act-item.g{background:rgba(0,229,160,.07);border-color:rgba(0,229,160,.15)}
.act-item.b{background:rgba(0,187,238,.07);border-color:rgba(0,187,238,.14)}
.act-item.a{background:rgba(245,158,11,.07);border-color:rgba(245,158,11,.15)}
.act-ic{width:34px;height:34px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.act-ic.g{background:rgba(0,229,160,.15)}.act-ic.b{background:rgba(0,187,238,.15)}.act-ic.a{background:rgba(245,158,11,.15)}
.act-ic.g i{color:#00e5a0;font-size:17px}.act-ic.b i{color:var(--ac);font-size:17px}.act-ic.a i{color:var(--warn);font-size:17px}
.act-title{font-size:13px;font-weight:700;color:rgba(255,255,255,.85);margin-bottom:2px}
.act-meta{font-size:11px;color:rgba(255,255,255,.35)}
.act-badge{display:inline-block;padding:2px 7px;border-radius:20px;font-size:9.5px;font-weight:800}
.ab-g{background:rgba(0,229,160,.14);color:#00e5a0}
.ab-b{background:rgba(0,187,238,.14);color:var(--ac)}
.ab-a{background:rgba(245,158,11,.14);color:var(--warn)}

/* ── MARKETPLACE ── */
.mkt-s{padding:50px 0;background:var(--s2)}
.mkt-g{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:48px}
.mkt-c{border-radius:var(--rxl);padding:24px 14px 20px;min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;cursor:pointer;color:#fff;position:relative;overflow:hidden;transition:all .3s var(--ease)}
.mkt-c::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:.2s}
.mkt-c:hover{transform:translateY(-7px) scale(1.03);box-shadow:0 20px 50px rgba(0,0,0,.18)}
.mkt-c:hover::before{background:rgba(255,255,255,.1)}
.mkt-c > i{font-size:34px;opacity:.9;transition:transform .3s var(--ease)}
.mkt-c:hover > i{transform:scale(1.15) rotate(-8deg)}
.mkt-name{padding: 8px 0px 8px 50px;font-size: 20px;}
.mkt-cnt{position:absolute;top:9px;right:9px;background:rgba(0,0,0,.25);border-radius:var(--rf);padding:2px 8px;font-size:9.5px;font-weight:800}
@media(max-width:1024px){.mkt-g{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.mkt-g{grid-template-columns:repeat(1,1fr)}}

/* ── PRICING ── */
.price-s{padding:50px 0}
.tog-wrap{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:52px}
.tog-lbl{font-size:14px;font-weight:700;color:var(--ink3)}
.tog{position:relative;width:50px;height:28px;cursor:pointer}
.tog input{opacity:0;width:0;height:0}
.tog-tr{position:absolute;inset:0;background:var(--s4);border-radius:14px;transition:.3s;border:1px solid var(--bd2)}
.tog input:checked + .tog-tr{background:var(--p);border-color:var(--p)}
.tog-th{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.3s;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.tog input:checked ~ .tog-th{left:25px}
.price-g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pc{background:#fff;border:2px solid var(--bd);border-radius:var(--r2xl);padding:36px 32px;position:relative;overflow:hidden;transition:all .3s var(--ease)}
.pc::after{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--s4);transition:background .3s}
.pc:hover{border-color:var(--pm);box-shadow:0 20px 60px rgba(0,102,153,.1);transform:translateY(-6px)}
.pc:hover::after{background:linear-gradient(90deg,var(--p),var(--ac))}
.pc.feat{border-color:var(--p);box-shadow:0 0 0 4px var(--pl),0 20px 60px rgba(0,102,153,.14)}
.pc.feat::after{background:linear-gradient(90deg,var(--p),var(--ac))}
.pc-badge{margin-bottom:16px;min-height:24px}
.pc-plan{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:2px;color:var(--ink4);margin-bottom:10px}
.pc-amt{font-size:54px;font-weight:900;color:var(--ink);letter-spacing:-3px;line-height:1}
.pc-amt sup{font-size:22px;font-weight:700;vertical-align:super;letter-spacing:0}
.pc-amt sub{font-size:16px;font-weight:500;color:var(--ink3);letter-spacing:0;vertical-align:baseline}
.pc-period{font-size:13px;color:var(--ink4);margin-bottom:16px;margin-top:4px}
.pc-tag{font-size:14px;color:var(--ink3);line-height:1.6;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--bd)}
.pc-feats{list-style:none;margin-bottom:32px;display:flex;flex-direction:column;gap:11px}
.pf{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink2)}
.pf i{font-size:17px;color:var(--ok);flex-shrink:0;margin-top:1px}
.pf.no{color:var(--ink5)}.pf.no i{color:var(--ink5)}
@media(max-width:900px){.price-g{grid-template-columns:1fr;max-width:440px;margin:0 auto}}

/* ── REVIEWS ── */
.rev-s{padding:50px 0;background:var(--s2)}
.rev-g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.rc{background:#fff;border:1px solid var(--bd);border-radius:var(--rxl);padding:28px;transition:all .3s var(--ease);position:relative;overflow:hidden}
.rc::before{content:'"';position:absolute;top:-10px;right:18px;font-size:120px;font-weight:900;color:var(--pl);line-height:1;pointer-events:none}
.rc:hover{border-color:var(--pm);box-shadow:var(--shm);transform:translateY(-5px)}
.rev-stars{color:#f59e0b;font-size:15px;letter-spacing:2px;margin-bottom:14px}
.rev-txt{font-size:14.5px;color:var(--ink2);line-height:1.75;margin-bottom:22px;position:relative;z-index:1}
.revr{display:flex;align-items:center;gap:12px}
.revr-av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#fff;flex-shrink:0}
.revr-name{font-size:14px;font-weight:800;color:var(--ink)}
.revr-role{font-size:12px;color:var(--ink3)}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:52px}
.trust-chip{display:flex;align-items:center;gap:8px;padding:10px 20px;background:#fff;border:1px solid var(--bd);border-radius:var(--rf);font-size:13px;font-weight:700;color:var(--ink2);box-shadow:0 1px 4px rgba(0,0,0,.06)}
.trust-chip i{font-size:18px;color:var(--p)}
@media(max-width:900px){.rev-g{grid-template-columns:1fr}}

/* ── CTA ── */
.cta-s{padding:120px 0;background:var(--ink);text-align:center;position:relative;overflow:hidden}
.cta-eyebrow{display:inline-flex;align-items:center;gap:6px;background:rgba(0,187,238,.14);border:1px solid rgba(0,187,238,.28);border-radius:var(--rf);padding:5px 14px;font-size:11.5px;font-weight:800;color:var(--ac);margin-bottom:20px;text-transform:uppercase;letter-spacing:1px}
.cta-h{font-size:clamp(32px,5vw,60px);font-weight:900;color:#fff;letter-spacing:-2px;line-height:1.08;margin-bottom:18px}
.cta-sub{font-size:18px;color:rgba(255,255,255,.6);max-width:480px;margin:0 auto 40px;line-height:1.65}
.cta-acts{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-bottom:44px}
.cta-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;padding-top:36px;border-top:1px solid rgba(255,255,255,.1)}
.ct-item{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.5);font-weight:600}
.ct-item i{font-size:17px;color:var(--ac)}

/* ── FOOTER ── */
.foot{background:#050d16;padding:72px 0 32px}
.foot-g{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px}
.foot-brand p{font-size:13.5px;color:rgba(255,255,255,.38);line-height:1.75;margin-top:12px;max-width:260px}
.foot-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.fb{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:1px solid rgba(255,255,255,.1);border-radius:var(--rf);font-size:11px;font-weight:700;color:rgba(255,255,255,.45)}
.fb i{font-size:12px}
.foot-col h4{font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.3);margin-bottom:18px}
.foot-col a{display:block;font-size:13.5px;color:rgba(255,255,255,.4);margin-bottom:10px;text-decoration:none;transition:color .15s}
.foot-col a:hover{color:#fff}
.foot-bot{border-top:1px solid rgba(255,255,255,.07);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.foot-copy{font-size:12.5px;color:rgba(255,255,255,.28)}
.foot-copy a{color:rgba(255,255,255,.28)}.foot-copy a:hover{color:rgba(255,255,255,.7)}
.fsocs{display:flex;gap:8px}
.fsoc{width:34px;height:34px;border:1px solid rgba(255,255,255,.11);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.38);text-decoration:none;transition:all .2s;font-size:16px}
.fsoc:hover{background:var(--p);border-color:var(--p);color:#fff}
.foot-logo{display:flex;align-items:center;gap:10px;margin-bottom:6px}
@media(max-width:1024px){.foot-g{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.foot-g{grid-template-columns:1fr 1fr}}

/* badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--rf);font-size:11px;font-weight:800}
.bp{background:var(--pl);color:var(--pd)}
.info{background:#008fcf;color:#fff}
.danger{background:#ff0000;color:#fff}
.bok{background:rgba(14,168,112,.11);color:var(--ok)}
.bwarn{background:rgba(245,158,11,.11);color:#d97706}
.bneu{background:var(--s3);color:var(--ink3);border:1px solid var(--bd)}
.bnew{background:rgba(0,229,160,.11);color:#059669}


.ws-doc-content h2{font-size:22px;font-weight:700;color:var(--ws-text);margin:32px 0 12px;letter-spacing:-.3px}.ws-doc-content h3{font-size:17px;font-weight:600;color:var(--ws-text);margin:24px 0 8px}.ws-doc-content p{font-size:15px;color:var(--ws-text-2);line-height:1.75;margin-bottom:14px}.ws-doc-content pre{background:var(--ws-text);border-radius:var(--ws-radius-lg);padding:18px 20px;overflow-x:auto;margin:16px 0}.ws-doc-content code{font-size:13px;color:#a8d8f0;font-family:monospace;line-height:1.7}.ws-doc-content .ws-doc-note{background:var(--ws-info-bg);border:1px solid #b5d4f5;border-radius:var(--ws-radius-lg);padding:14px 16px;font-size:14px;color:var(--ws-info);margin:18px 0;display:flex;gap:10px}.ws-doc-content .ws-doc-note i{font-size:18px;flex-shrink:0;margin-top:2px}

/* Bootstrap equivalent */

.col-sm-12{
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
/* Extra small devices (phones) */
.col-xs-1  { width: 8.333333%; }
.col-xs-2  { width: 16.666667%; }
.col-xs-3  { width: 25%; }
.col-xs-4  { width: 33.333333%; }
.col-xs-5  { width: 41.666667%; }
.col-xs-6  { width: 50%; }
.col-xs-7  { width: 58.333333%; }
.col-xs-8  { width: 66.666667%; }
.col-xs-9  { width: 75%; }
.col-xs-10 { width: 83.333333%; }
.col-xs-11 { width: 91.666667%; }
.col-xs-12 { width: 100%; }

/* Base column style */
[class*="col-"] {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    float: left;
    box-sizing: border-box;
}

/* Small devices ≥768px */
@media (min-width: 768px) {
    .col-sm-1  { width: 8.333333%; }
    .col-sm-2  { width: 16.666667%; }
    .col-sm-3  { width: 25%; }
    .col-sm-4  { width: 33.333333%; }
    .col-sm-5  { width: 41.666667%; }
    .col-sm-6  { width: 50%; }
    .col-sm-7  { width: 58.333333%; }
    .col-sm-8  { width: 66.666667%; }
    .col-sm-9  { width: 75%; }
    .col-sm-10 { width: 83.333333%; }
    .col-sm-11 { width: 91.666667%; }
    .col-sm-12 { width: 100%; }
}

/* Medium devices ≥992px */
@media (min-width: 992px) {
    .col-md-1  { width: 8.333333%; }
    .col-md-2  { width: 16.666667%; }
    .col-md-3  { width: 25%; }
    .col-md-4  { width: 33.333333%; }
    .col-md-5  { width: 41.666667%; }
    .col-md-6  { width: 50%; }
    .col-md-7  { width: 58.333333%; }
    .col-md-8  { width: 66.666667%; }
    .col-md-9  { width: 75%; }
    .col-md-10 { width: 83.333333%; }
    .col-md-11 { width: 91.666667%; }
    .col-md-12 { width: 100%; }
}

/* Large devices ≥1200px */
@media (min-width: 1200px) {
    .col-lg-1  { width: 8.333333%; }
    .col-lg-2  { width: 16.666667%; }
    .col-lg-3  { width: 25%; }
    .col-lg-4  { width: 33.333333%; }
    .col-lg-5  { width: 41.666667%; }
    .col-lg-6  { width: 50%; }
    .col-lg-7  { width: 58.333333%; }
    .col-lg-8  { width: 66.666667%; }
    .col-lg-9  { width: 75%; }
    .col-lg-10 { width: 83.333333%; }
    .col-lg-11 { width: 91.666667%; }
    .col-lg-12 { width: 100%; }
}
/* Modern clearfix */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
/* Clearfix row */
.row::after {
    content: "";
    display: table;
    clear: both;
}
@media (min-width: 768px){
    .col-md-6{
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 992px){
    .col-lg-3{
        flex: 0 0 25%;
        max-width: 25%;
    }
}
.row{
    display:flex;
    flex-wrap:wrap;
    margin-right:-15px;
    margin-left:-15px;
}
.blog-grid .ws-box-style2{
  background: #f4f8ff !important;
}
.blog-grid a{
  color: #333;
}
blockquote {
    background: #ffe60073 !important;
    border: 1px dashed #d09d04 !important;
    padding: 10px !important;
        border-radius: var(--rl);
}
.prose li{
  list-style: disc;
}
.ws-404-main{flex:1;display:flex;align-items:center;justify-content:center;padding:80px 24px;background:var(--ws-bg-2);position:relative}.ws-404-bg{position:absolute;font-size:clamp(120px,20vw,200px);font-weight:800;color:var(--ws-primary);opacity:.07;user-select:none;line-height:1;letter-spacing:-8px}
.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Focus state */
.form-control:focus {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
}

/* Disabled */
.form-control:disabled,
.form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}

/* Placeholder */
.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}
.ws-app-card .ws-app-link{position: absolute;top: 0;left: 0;text-align: center;width: 100%;height: 100%;background: #00669938;border-radius: 12px;padding-top: 50px;color: #000;text-decoration: none;font-size: 20px;display: none;}
.ws-app-card:hover .ws-app-link{display: block;}
.ws-app-card:hover .ws-app-link a{color:#fff;text-decoration: none}
.prose hr{border:none;border-top:1px solid var(--bd);margin:28px 0}
/* BENEFITS */
.benefits-section{padding:88px 0}
.benefits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:52px}
.benefit-item{display:flex;gap:16px;padding:22px;background:var(--s2);border:1px solid var(--bd);border-radius:var(--rxl);transition:all .22s var(--ease)}
.benefit-item:hover{border-color:var(--pm);box-shadow:var(--sh);transform:translateY(-3px)}
.bi-icon{width:46px;height:46px;border-radius:var(--r);background:var(--pl);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bi-icon i{font-size:23px;color:var(--p)}
.bi-title{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:5px}
.bi-desc{font-size:13.5px;color:var(--ink3);line-height:1.65}
@media(max-width:700px){.benefits-grid{grid-template-columns:1fr}}
.text-white{color: #fff!important;}

.ws-feature-nav{position:sticky;top:66px;z-index:200;background:#fff;border-bottom:1px solid var(--ws-border)}
.ws-tab-section{padding:72px 0;border-bottom:1px solid var(--ws-border)}
.ws-tab-section:last-child{border-bottom:none}
.ws-icon-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
.ws-icon-row:last-child{margin-bottom:0}
.ws-icon-row-icon{width:44px;height:44px;border-radius:10px;background:var(--ws-primary-light);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ws-icon-row-icon i{font-size:22px;color:var(--ws-primary)}
.ws-icon-row-title{font-size:15px;font-weight:700;color:var(--ws-text);margin-bottom:3px}
.ws-icon-row-desc{font-size:13.5px;color:var(--ws-text-2);line-height:1.65}
.ws-screen{background:#fff;border:1px solid var(--ws-border);border-radius:var(--ws-radius-xl);padding:22px;box-shadow:var(--ws-shadow-lg)}
.bg-white, .ws-bg-white{background: #fff!important;}
.text-white,.ws-text-white{color: #fff!important;}
/*-------------------------
   Awards
-------------------------*/
.awards .fancybox-item {
  border-radius: 5px;
  text-align: center;
  padding: 48px 30px 37px;
  background-color: #f1f5fe;
  padding: 10px 10px 10px;
  margin-bottom: 10px;
  position: relative;  
}

.awards .fancybox-item .fancybox__icon__img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 65px;
  margin-bottom: 30px;
}

.awards .fancybox-item .fancybox__icon__img img {
  max-height: 100%;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}

.awards .fancybox-item .fancybox__title {
  font-size: 14px;
}
.awards .fancybox-item .fancybox__counts {
    position: absolute;
    right: 0px;
    top: 0px;
    background: #f1f1f1;
    border: 2px solid #f1f1f1;
    width: 50px;
    height: 25px;
    color: #8e8e99!important;
    line-height: 25px;
    border-radius: 0px 3px 0px 10px;
}

.awards .fancybox-item .fancybox__desc {
  font-size: 14px;
  margin-bottom: 0;
}

.awards .fancybox-item:hover .fancybox__icon__img img {
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
}

.awards .fancybox-item:hover .fancybox__title {
  color: #006699;
}

.awards .pinned-ribbon {
  position: absolute;
  top: 0;
  right: 40px;
  width: 15px;
  height: 30px;
  background-color: #006699;
}

.awards .pinned-ribbon:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border: 7.5px solid transparent;
  border-bottom-color: #f9f9f9;
}

.awards .btn__primary.btn__link .icon-outlined {
  color: #091d3e;
}

.awards .btn__primary.btn__link:hover .icon-outlined {
  color: #ffffff;
  border-color: #091d3e;
  background-color: #091d3e;
}

/* Mobile Phones & tablets and Small Screens */
@media screen and (max-width: 992px) {
  .awards .fancybox-item {
    padding: 28px 20px 27px;
    margin-bottom: 20px;
  }
  .awards .fancybox-item .fancybox__icon__img {
    margin-bottom: 15px;
  }
  .awards .pinned-ribbon {
    right: 20px;
  }
}

/* ============================================================
   1. TOP ANNOUNCEMENT BAR  (.ws-topbar)
   ============================================================ */
.ws-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 950;
  height: 40px; display: flex; align-items: center; justify-content: center;
  padding: 0 16px; gap: 10px;
  font-size: 13px; font-weight: 500;
  transition: transform .3s ease, opacity .3s ease;
}
.ws-topbar.ws-topbar-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.ws-topbar-primary { background: var(--ws-primary); color: #fff; }
.ws-topbar-dark    { background: #0d1b2a; color: rgba(255,255,255,.9); }
.ws-topbar-warning { background: #f59e0b; color: #fff; }
.ws-topbar-success { background: #0ea870; color: #fff; }
.ws-topbar-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 99px;
  font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  background: rgba(255,255,255,.22); color: inherit; flex-shrink: 0;
}
.ws-topbar-text { flex: 1; text-align: center; }
.ws-topbar-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ws-topbar-text a:hover { opacity: .8; }
.ws-topbar-close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.18); border: none; border-radius: 6px;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: inherit; transition: background .15s; flex-shrink: 0;
}
.ws-topbar-close:hover { background: rgba(255,255,255,.35); }
.ws-topbar-close i { font-size: 14px; }
/* Nav shifts down when topbar is visible */
body.ws-has-topbar .ws-nav { top: 40px; }
@media (max-width: 600px) {
  .ws-topbar { font-size: 12px; }
  .ws-topbar-badge { display: none; }
}

/* ============================================================
   2. MODAL ENHANCEMENTS  (base already in ws.css)
   ============================================================ */
.ws-modal-sm  { max-width: 380px; }
.ws-modal-lg  { max-width: 720px; }
.ws-modal-xl  { max-width: 920px; }
/* Danger / confirm variant */
.ws-modal-danger .ws-modal-header { background: var(--ws-danger-bg); border-color: rgba(220,53,69,.2); }
.ws-modal-danger .ws-modal-title  { color: var(--ws-danger); }
/* Icon modal (centred icon + title) */
.ws-modal-icon-header {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 32px 26px 20px; gap: 14px;
}
.ws-modal-icon-wrap {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ws-modal-icon-wrap i { font-size: 26px; }
.ws-modal-icon-wrap.primary { background: var(--ws-primary-light); color: var(--ws-primary); }
.ws-modal-icon-wrap.danger  { background: var(--ws-danger-bg);    color: var(--ws-danger); }
.ws-modal-icon-wrap.success { background: rgba(14,168,112,.1);    color: #0ea870; }
.ws-modal-icon-wrap.warning { background: rgba(245,158,11,.1);    color: #d97706; }
/* Slide-in animation for larger modals */
@keyframes slideDown { from { opacity:0; transform:translateY(-24px); } to { opacity:1; transform:none; } }
.ws-modal-lg .ws-modal,
.ws-modal-xl .ws-modal { animation: slideDown .25s ease; }

/* ============================================================
   3. SCROLL TO TOP  (.ws-scroll-top)
   ============================================================ */
.ws-scroll-top {
  position: fixed; bottom: 80px; right: 20px; z-index: 700;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ws-primary); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,102,153,.35);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .15s;
  transform: translateY(10px);
}
.ws-scroll-top.ws-visible { opacity: 1; pointer-events: all; transform: none; }
.ws-scroll-top:hover { background: var(--ws-primary-dark); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,102,153,.45); }
.ws-scroll-top i { font-size: 18px; }

/* ============================================================
   4. COOKIE CONSENT  (.ws-cookie)
   ============================================================ */
.ws-cookie {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 850;
  background: #fff; border-top: 1px solid var(--ws-border);
  box-shadow: 0 -4px 24px rgba(0,0,0,.1);
  padding: 16px 24px; display: flex;
  align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  transform: translateY(100%); transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.ws-cookie.ws-cookie-visible { transform: translateY(0); }
.ws-cookie-body { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 220px; }
.ws-cookie-icon {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
  background: var(--ws-primary-light); color: var(--ws-primary);
  display: flex; align-items: center; justify-content: center;
}
.ws-cookie-icon i { font-size: 20px; }
.ws-cookie-text { font-size: 13.5px; line-height: 1.55; color: var(--ws-text-2); }
.ws-cookie-text strong { display: block; font-size: 14px; color: var(--ws-text); margin-bottom: 1px; }
.ws-cookie-text a { color: var(--ws-primary); }
.ws-cookie-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (max-width: 640px) {
  .ws-cookie { padding: 14px 16px; }
  .ws-cookie-body { gap: 10px; }
  .ws-cookie-actions { width: 100%; }
  .ws-cookie-actions .ws-btn { flex: 1; justify-content: center; }
}

/* ============================================================
   5. MINI CART  (.ws-cart-*)
   ============================================================ */
.ws-cart-trigger {
  position: relative; background: none; border: none; cursor: pointer;
  width: 38px; height: 38px; border-radius: var(--ws-radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--ws-text-2); transition: background .15s, color .15s;
}
.ws-cart-trigger:hover { background: var(--ws-bg-3); color: var(--ws-primary); }
.ws-cart-trigger i { font-size: 20px; }
.ws-cart-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 17px; height: 17px; border-radius: 99px; padding: 0 4px;
  background: var(--ws-primary); color: #fff;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; line-height: 1;
}
.ws-cart-badge:empty,
.ws-cart-badge[data-count="0"] { display: none; }
/* Overlay */
.ws-cart-overlay {
  position: fixed; inset: 0; z-index: 690;
  background: rgba(15,25,35,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.ws-cart-overlay.ws-cart-open { opacity: 1; pointer-events: all; }
/* Drawer */
.ws-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 695;
  width: 340px; max-width: 100vw;
  background: #fff; box-shadow: -4px 0 32px rgba(0,0,0,.12);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.ws-cart-drawer.ws-cart-open { transform: translateX(0); }
.ws-cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 16px; border-bottom: 1px solid var(--ws-border);
}
.ws-cart-head-title { font-size: 16px; font-weight: 800; color: var(--ws-text); display: flex; align-items: center; gap: 8px; }
.ws-cart-head-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--ws-primary-light); color: var(--ws-primary);
  border-radius: 99px; font-size: 11px; font-weight: 800;
}
.ws-cart-close-btn {
  background: var(--ws-bg-3); border: none; border-radius: var(--ws-radius);
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ws-text-2); transition: background .15s;
}
.ws-cart-close-btn:hover { background: var(--ws-danger-bg); color: var(--ws-danger); }
.ws-cart-close-btn i { font-size: 18px; }
/* Items area */
.ws-cart-items { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.ws-cart-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px; border: 1px solid var(--ws-border); border-radius: var(--ws-radius-lg);
  background: var(--ws-bg-2);
}
.ws-cart-item-icon {
  width: 38px; height: 38px; border-radius: var(--ws-radius); flex-shrink: 0;
  background: var(--ws-primary-light); color: var(--ws-primary);
  display: flex; align-items: center; justify-content: center;
}
.ws-cart-item-icon i { font-size: 18px; }
.ws-cart-item-body { flex: 1; min-width: 0; }
.ws-cart-item-name { font-size: 13.5px; font-weight: 700; color: var(--ws-text); line-height: 1.3; margin-bottom: 3px; }
.ws-cart-item-desc { font-size: 12px; color: var(--ws-text-3); }
.ws-cart-item-price { font-size: 13.5px; font-weight: 800; color: var(--ws-primary); white-space: nowrap; }
.ws-cart-item-remove {
  background: none; border: none; cursor: pointer; color: var(--ws-text-3);
  padding: 2px; border-radius: 4px; transition: color .15s; flex-shrink: 0;
}
.ws-cart-item-remove:hover { color: var(--ws-danger); }
.ws-cart-item-remove i { font-size: 15px; }
/* Empty state */
.ws-cart-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px 24px; gap: 12px;
}
.ws-cart-empty i { font-size: 44px; color: var(--ws-text-4); }
.ws-cart-empty-title { font-size: 15px; font-weight: 700; color: var(--ws-text); }
.ws-cart-empty-sub { font-size: 13px; color: var(--ws-text-3); }
/* Footer */
.ws-cart-foot {
  border-top: 1px solid var(--ws-border);
  padding: 16px 20px; display: flex; flex-direction: column; gap: 10px;
}
.ws-cart-subtotal { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ws-text-2); }
.ws-cart-total    { display: flex; justify-content: space-between; font-size: 15px; font-weight: 800; color: var(--ws-text); }
.ws-cart-total span:last-child { color: var(--ws-primary); }
/* Base table */
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

/* Table borders */
.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
  padding: 10px;
  text-align: left;
}

/* Header style */
.table thead th {
  background: #f8f9fa;
  font-weight: 600;
}

/* Striped rows */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f2f2f2;
}

/* Hover effect (optional like Bootstrap) */
.table-hover tbody tr:hover {
  background-color: #e9ecef;
}

/* Base table */
.table-modern {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* Header */
.table-modern thead th {
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
}

/* Body cells */
.table-modern tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: #475569;
  font-size: 14px;
}

/* Hover row */
.table-modern tbody tr {
  transition: all 0.2s ease;
}

.table-modern tbody tr:hover {
  background: #f1f5f9;
  transform: scale(1.005);
}

/* Zebra striping (soft) */
.table-modern tbody tr:nth-child(even) {
  background: #fcfcfd;
}



/* Action buttons */
.btn-action {
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: 0.2s;
}

.btn-view {
  background: #e0f2fe;
  color: #0369a1;
}

.btn-edit {
  background: #fef3c7;
  color: #92400e;
}

.btn-delete {
  background: #fee2e2;
  color: #991b1b;
}

.btn-action:hover {
  opacity: 0.85;
}

/* Responsive */
@media (max-width: 768px) {
  .table-modern thead {
    display: none;
  }

  .table-modern tbody tr {
    display: block;
    margin-bottom: 12px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 10px;
  }

  .table-modern tbody td {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border: none;
  }

  .table-modern tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #64748b;
  }
}