/* ======================================================
   BAUNDULE DESIGN SYSTEM (ENTERPRISE MASTER FINAL V4)
   - Clean + Complete + Scalable
   - Bootstrap Safe + Mobile Optimized
   - Horizontal Scroll Fixed
   - Hero Video Removed
====================================================== */

/* ================= ROOT ================= */
:root {
    /* BRAND */
    --bs-primary: #F5C400;
    --bs-primary-rgb: 245,196,0;
    --bs-secondary: #0A0A0A;
    --bs-secondary-rgb: 10,10,10;
    --bs-dark: #000;
    --bs-white: #fff;
    --bs-success: #00b30c;

    /* COLORS */
    --color-bg: #faf7ef;
    --color-surface: #fff;
    --color-surface-2: #f4efe4;
    --color-text: #111;
    --color-text-muted: #5c5c5c;
    --color-text-faint: #9a9a9a;
    --color-border: rgba(0,0,0,0.08);
    --color-divider: rgba(0,0,0,0.06);

    /* STATES */
    --color-primary-soft: rgba(245,196,0,0.12);
    --color-primary-hover: #d4a800;
    --color-primary-active: #b38f00;

    /* GRADIENT */
    --color-brand-gradient: linear-gradient(135deg,#F5C400,#d4a800);
    
    /* PRELOADER */
    --pre-bg:#06070a;
    --pre-gold:#d6a84f;
    --pre-text:#f6f1e8;
    --pre-soft:rgba(255,255,255,.52);
    --pre-line:rgba(255,255,255,.14);
    --pre-ease:cubic-bezier(.22,1,.36,1);

    /* TYPOGRAPHY */
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Manrope', sans-serif;

    /* TYPE SCALE */
    --text-xs: clamp(0.75rem,0.72rem+0.15vw,0.875rem);
    --text-sm: clamp(0.875rem,0.84rem+0.2vw,1rem);
    --text-base: clamp(1rem,0.98rem+0.2vw,1.125rem);
    --text-lg: clamp(1.125rem,1.05rem+0.45vw,1.4rem);
    --text-xl: clamp(1.6rem,1.2rem+1.6vw,2.8rem);
    --text-2xl: clamp(2.4rem,1.6rem+4vw,5.5rem);

    /* SPACING */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; 
    --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

    /* UI */
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 32px; --radius-full: 999px;

    --shadow-sm: 0 4px 14px rgba(0,0,0,0.06);
    --shadow-md: 0 12px 30px rgba(0,0,0,0.10);
    --shadow-lg: 0 24px 60px rgba(0,0,0,0.16);

    --transition-fast: 180ms cubic-bezier(.16,1,.3,1);
    --transition-smooth: 300ms cubic-bezier(.16,1,.3,1);

    /* LAYOUT */
    --container-width: 1320px;
    --header-height: 90px;
}

/* ================= RESET ================= */
html { width: 100%; overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; width: 100%; overflow-x: hidden; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; }
video, img { height: auto; }
ul, ol { margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; transition: var(--transition-fast); }


/* ======================================================
   REMOVE BLUE CLICK / FOCUS (FINAL FIX)
====================================================== */

/* 1. Remove focus styles ONLY for mouse click */
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
input:focus:not(:focus-visible),
.form-control:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* 2. Keep keyboard accessibility */
:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* 3. Kill Bootstrap blue glow completely */
.btn:focus,
.btn:active,
.form-control:focus,
input:focus {
    box-shadow: none !important;
}

/* 4. Remove mobile tap highlight */
* {
    -webkit-tap-highlight-color: transparent;
}

/* ================= CONTAINER & GRID SAFETY ================= */
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    width: 100%; max-width: var(--container-width); padding-left: 24px; padding-right: 24px; margin-left: auto; margin-right: auto;
}
.row { --bs-gutter-x: 24px; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-left: calc(var(--bs-gutter-x) * -0.5); margin-right: calc(var(--bs-gutter-x) * -0.5); }
.row > * { min-width: 0; padding-left: calc(var(--bs-gutter-x) * 0.5); padding-right: calc(var(--bs-gutter-x) * 0.5); }

/* ================= TYPOGRAPHY ================= */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); margin-bottom: var(--space-4); line-height: 1.15; font-weight: 600; color: var(--bs-secondary); }
p { margin-bottom: var(--space-4); color: var(--color-text-muted); max-width: 65ch; }

/* ================= COMPONENTS ================= */
.btn { border-radius: var(--radius-full); padding: 14px 28px; font-weight: 700; border: none; transition: all var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.btn-primary { background: var(--bs-primary); color: #000; box-shadow: 0 8px 24px rgba(245,196,0,0.25); }
.btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-2px); }

.card { border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: var(--space-8); background: var(--color-surface); box-shadow: var(--shadow-sm); transition: transform var(--transition-smooth); height: 100%; }
/*.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }*/

/* ================= RESPONSIVE ================= */
@media (max-width: 991px) {
    .container { padding-left: 20px; padding-right: 20px; }
    .btn { width: 100%; }
}
@media (max-width: 575px) {
    .container { padding-left: 16px; padding-right: 16px; }
    .row { --bs-gutter-x: 16px; }
}

Use a permanent vertical scrollbar and disable SweetAlert2’s scrollbar compensation. SweetAlert2 can add padding-right to the body to compensate for removed scrollbars, which is a common cause of page shift, and Bootstrap modals use similar scrollbar compensation behavior.

CSS fix
Add this CSS globally:

css
/* Keep scrollbar space reserved all the time */
html {
    overflow-y: scroll;
}

/* Prevent body jump when SweetAlert2 or Bootstrap modal opens */
body,
body.modal-open,
body.swal2-shown,
html.swal2-shown {
    padding-right: 0 !important;
    margin-right: 0 !important;
}

/* Keep modal/page behavior stable */
body.modal-open {
    overflow-y: scroll !important;
}

/* SweetAlert2 container alignment stability */
.swal2-container {
    padding: 1rem !important;
}

/* Optional: prevent animation-related micro shift */
.swal2-popup {
    box-sizing: border-box;
}