@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');

/* ===== RESET & ROOT ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* ── Luxury Warm Palette ── */
    --bg-main:      #F6F0E8;
    --bg-light:     #EFE4D6;
    --bg-accent:    #E6D5C3;
    --bg-card:      #FAF7F2;
    --bg-white:     #FFFDF9;
    --brown-dark:   #2F241F;
    --brown-mid:    #6A5145;
    --copper:       #B86F52;
    --copper-dark:  #9A5B42;
    --gold:         #C2A477;
    --gold-light:   #D4B896;
    --text-dark:    #2F241F;
    --text-mid:     #6A5145;
    --text-light:   #9A8070;
    --text-muted:   #B8A090;
    --border-warm:  rgba(184,111,82,0.16);
    --border-light: rgba(184,111,82,0.08);

    /* ── Legacy aliases (keep for old rules) ── */
    --pink:        #B86F52;
    --pink-l:      #C4835F;
    --pink-bg:     #F6F0E8;
    --teal:        #C2A477;
    --teal-l:      #D4B896;
    --teal-bg:     #F6F0E8;
    --purple:      #6A5145;
    --purple-l:    #8A6B58;
    --purple-bg:   #EFE4D6;
    --dark:        #2F241F;
    --gray:        #6A5145;
    --gray-l:      #F6F0E8;
    --border:      rgba(184,111,82,0.18);
    --white:       #FFFDF9;
    --radius:      18px;
    --radius-lg:   24px;
    --shadow-sm:   0 2px 12px rgba(47,36,31,0.08);
    --shadow-md:   0 8px 30px rgba(47,36,31,0.10);
    --shadow-pink: 0 8px 28px rgba(184,111,82,0.22);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Tajawal', sans-serif;
    direction: rtl;
    text-align: center;
    color: var(--dark);
    background: var(--white);
    line-height: 1.7;
    overflow-x: hidden;
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

img { max-width: 100%; }
a { text-decoration: none; }

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 30px;
    border-radius: var(--radius);
    font-family: 'Tajawal', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.22s ease;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, #C0375E 0%, #D96080 100%);
    color: #fff;
    box-shadow:
        0 4px 18px rgba(192,55,94,0.38),
        0 1px 0 rgba(255,255,255,0.12) inset;
    border-color: transparent;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 32px rgba(192,55,94,0.48),
        0 1px 0 rgba(255,255,255,0.12) inset;
    background: linear-gradient(135deg, #C8406A 0%, #E0688A 100%);
}

.btn-outline {
    background: transparent;
    color: var(--pink);
    border-color: var(--pink);
}
.btn-outline:hover {
    background: var(--pink-bg);
    transform: translateY(-2px);
}

.btn-ghost {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.90);
    border-color: rgba(255,255,255,0.22);
}
.btn-ghost:hover {
    background: rgba(255,255,255,0.13);
    border-color: rgba(255,255,255,0.38);
    transform: translateY(-2px);
}

.btn-wa {
    background: #25D366;
    color: #fff;
    box-shadow: 0 6px 20px rgba(37,211,102,0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-wa:hover {
    background: #1EB858;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(37,211,102,0.42);
}

.btn-large { padding: 17px 38px; font-size: 18px; border-radius: 18px; }
.btn-full  { width: 100%; }

/* ===== NAVBAR ===== */
.navbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 999;
    background: linear-gradient(90deg, rgba(104,67,52,0.70), rgba(123,79,59,0.62));
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    border-bottom: 1px solid rgba(255,248,242,0.18);
    box-shadow: 0 8px 30px rgba(54,32,24,0.10);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.navbar.scrolled {
    background: linear-gradient(90deg, rgba(104,67,52,0.84), rgba(123,79,59,0.78));
    box-shadow: 0 8px 32px rgba(54,32,24,0.18);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}
.logo-img {
    display: block;
    height: 40px;
    width: auto;
    object-fit: contain;
    filter: none;
    opacity: 1;
    mix-blend-mode: normal;
}
.logo-text { font-size: 18px; font-weight: 900; color: #FFF8F2; }

.nav-links {
    display: flex;
    gap: 28px;
    align-items: center;
    margin: 0;
    padding: 0;
}
.nav-links a {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #FFF8F2;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    transition: color 220ms ease;
}
.nav-links a:hover,
.nav-links a:focus-visible { color: #FFFFFF; }

.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    min-height: 40px;
    margin: 0;
    line-height: 1;
    font-size: 15px;
    border-radius: 100px;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin: 0;
}
.hamburger span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: #FFF8F2;
    border-radius: 4px;
    transition: all 0.3s;
}

/* ===== HERO — LIGHT PREMIUM ===== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 110px 20px 80px;
    background: #06041A;
    position: relative;
    overflow: hidden;
}

/* Multi-layer background mesh */
.hero-bg { position: absolute; inset: 0; pointer-events: none; }

.hbg-mesh {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}
.hbg-m1 {
    width: 900px; height: 900px;
    background: radial-gradient(circle, rgba(74,45,154,0.60) 0%, transparent 65%);
    top: -260px; left: 30%;
    transform: translateX(-20%);
}
.hbg-m2 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(192,55,94,0.38) 0%, transparent 65%);
    bottom: -100px; right: -60px;
}
.hbg-m3 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(100,60,200,0.28) 0%, transparent 65%);
    top: 35%; left: -80px;
}
.hbg-grid {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 30px 30px;
}
.hbg-vignette {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.45) 100%);
}

/* Two-column layout + brands bar spanning full width */
.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    grid-template-rows: auto auto;
    gap: 44px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Brands bar */
.hero-brands {
    grid-column: 1 / -1;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.07);
    text-align: center;
}
.hero-brands-label {
    font-size: 12px;
    color: rgba(255,255,255,0.30);
    margin-bottom: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.hero-brands-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.hb-logo {
    font-size: 15px;
    font-weight: 800;
    color: rgba(255,255,255,0.30);
    letter-spacing: 0.05em;
    transition: color 0.2s;
}
.hb-logo:hover { color: rgba(255,255,255,0.60); }
.hb-en { letter-spacing: 0.12em; }
.hb-sep { color: rgba(255,255,255,0.15); font-size: 16px; }

/* ---- Text column ---- */
.hero-text { text-align: right; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.90);
    padding: 9px 20px;
    border-radius: 50px;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 2px 12px rgba(74,45,154,0.25);
}
.badge-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #C0375E;
    box-shadow: 0 0 0 3px rgba(192,55,94,0.22);
    animation: pulse-dot 2.2s infinite;
    flex-shrink: 0;
}
@keyframes pulse-dot {
    0%,100% { box-shadow: 0 0 0 3px rgba(192,55,94,0.22); }
    50%      { box-shadow: 0 0 0 6px rgba(192,55,94,0.07); }
}

.hero-h1 {
    font-size: clamp(32px, 4.5vw, 58px);
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}
.h1-gradient {
    background: linear-gradient(135deg, #C0375E 0%, #7B4FBE 50%, #C0375E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-desc {
    font-size: clamp(14px, 1.7vw, 17px);
    color: rgba(255,255,255,0.62);
    line-height: 1.9;
    margin-bottom: 28px;
}

.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 34px;
    justify-content: flex-start;
}

.h-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.85);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 13.5px;
    font-weight: 600;
    transition: all 0.22s;
    cursor: default;
}
.h-chip:hover {
    background: rgba(192,55,94,0.18);
    border-color: rgba(192,55,94,0.38);
    color: #FF7DAE;
}

.hero-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* ---- Device column ---- */
.hero-devices {
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Float animations */
@keyframes fcard-a { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-8px) rotate(0.5deg)} }
@keyframes fcard-b { 0%,100%{transform:translateY(0) rotate(1deg)}  50%{transform:translateY(-6px) rotate(-0.5deg)} }
@keyframes fcard-c { 0%,100%{transform:translateY(0) rotate(-0.5deg)} 50%{transform:translateY(-10px) rotate(1deg)} }
@keyframes live-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.5)} }

/* ============================================
   DEVICES SCENE — iMAC + iPAD COMPOSITION
   ============================================ */
.devices-scene {
    position: relative;
    display: block;
    width: 100%;
    animation: devices-levitate 7s ease-in-out infinite;
}
/* Ambient purple glow behind devices */
.devices-scene::before {
    content: '';
    position: absolute;
    width: 80%; height: 60%;
    top: 10%; left: 10%;
    background: radial-gradient(ellipse at center, rgba(110,55,210,0.40) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
    filter: blur(20px);
}
@keyframes devices-levitate {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

/* ────────────────────────────────
   iMAC — Primary Device
   ──────────────────────────────── */
.device-mac-wrap {
    position: relative;
    width: 100%;
    z-index: 1;
}

.device-mac-img {
    position: relative;
    z-index: 2;
    width: 100%;
    display: block;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* ERP Dashboard — behind device image; white screen area becomes transparent via multiply */
.ed-mac {
    position: absolute;
    z-index: 1;
    /* Tuned to apple-mac.png screen area */
    top: 6.8%;
    left: 9%;
    width: 82%;
    height: 54.5%;
    background: #12082A;
    overflow: hidden;
    border-radius: 2px;
    font-family: 'Tajawal', sans-serif;
    display: flex;
    flex-direction: column;
}

/* ────────────────────────────────
   iPAD — Secondary Device (in front of iMac)
   ──────────────────────────────── */
.device-ipad-wrap {
    position: absolute;
    width: 44%;
    bottom: -2%;
    left: 2%;
    z-index: 5;
    transform: rotate(-5deg);
    transform-origin: bottom right;
    filter: drop-shadow(0 16px 48px rgba(74,45,154,0.55)) drop-shadow(0 4px 12px rgba(0,0,0,0.55));
}

.device-ipad-img {
    position: relative;
    z-index: 2;
    width: 100%;
    display: block;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* ERP Dashboard — strictly inside the iPad screen (bezel is ~9% each side) */
.ed-ipad {
    position: absolute;
    z-index: 1;
    top: 9.5%;
    left: 9%;
    width: 82%;
    height: 81%;
    background: #1A0D38;
    overflow: hidden;
    border-radius: 6px;
    font-family: 'Tajawal', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 5px;
}

/* ============================================
   iMAC ERP DASHBOARD STYLES
   ============================================ */
.ed-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: #1A0D38;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    gap: 6px;
    flex-shrink: 0;
}
.ed-brand {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 7px;
    font-weight: 800;
    color: #C4A8FF;
    white-space: nowrap;
}
.ed-brand-dot {
    width: 9px; height: 9px;
    background: linear-gradient(135deg, #C0375E, #4A2D9A);
    border-radius: 2px;
    flex-shrink: 0;
}
.ed-tabs { display: flex; gap: 1px; }
.ed-tab {
    font-size: 6px;
    padding: 2px 5px;
    border-radius: 3px;
    color: rgba(255,255,255,0.32);
    cursor: default;
    font-family: 'Tajawal';
}
.ed-tab-on {
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.95);
    font-weight: 700;
}
.ed-nav-end { display: flex; align-items: center; gap: 5px; }
.ed-bell { position: relative; font-size: 8px; cursor: default; }
.ed-bell-dot {
    position: absolute; top: -1px; right: -1px;
    width: 3px; height: 3px;
    background: #C0375E; border-radius: 50%;
}
.ed-user-chip {
    display: flex; align-items: center; gap: 3px;
    background: rgba(255,255,255,0.09);
    border-radius: 10px; padding: 1.5px 5px 1.5px 3px;
}
.ed-uav {
    width: 10px; height: 10px; border-radius: 50%;
    background: linear-gradient(135deg, #C0375E, #4A2D9A);
}
.ed-user-chip span { font-size: 6px; font-weight: 700; color: rgba(255,255,255,0.9); }

.ed-body { display: flex; flex: 1; overflow: hidden; }

.ed-sb {
    width: 56px;
    background: #2D1867;
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
}
.ed-sb-item {
    font-size: 5.5px;
    color: rgba(255,255,255,0.58);
    padding: 3.5px 5px;
    cursor: default;
    border-radius: 0 3px 3px 0;
    margin-right: 3px;
}
.ed-sb-on {
    background: linear-gradient(135deg, #C0375E, #9B2E55);
    color: #fff; font-weight: 700;
}

.ed-main {
    flex: 1;
    padding: 5px 7px;
    overflow: hidden;
    background: #12082A;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ed-phdr { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.ed-ptitle { font-size: 8px; font-weight: 800; color: #fff; }
.ed-psub   { font-size: 5.5px; color: rgba(255,255,255,0.35); }
.ed-phdr-actions { display: flex; gap: 3px; }
.ed-btn-sec {
    font-size: 5.5px; padding: 2px 5px;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 3px; color: rgba(255,255,255,0.60);
    cursor: default; font-family: 'Tajawal';
}
.ed-btn-pri {
    font-size: 5.5px; padding: 2px 5px;
    background: linear-gradient(135deg, #4A2D9A, #7055C4);
    border: none; border-radius: 3px;
    color: #fff; cursor: default;
    font-family: 'Tajawal'; font-weight: 700;
}

.ed-kpis {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 3px;
    flex-shrink: 0;
}
.ed-kpi {
    background: rgba(255,255,255,0.05);
    border-radius: 5px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ed-kpi-hd  { display: flex; align-items: center; justify-content: space-between; }
.ed-kpi-ico {
    width: 14px; height: 14px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    font-size: 7px;
}
.ed-kpi-up  { font-size: 5.5px; font-weight: 700; color: #2BBFA6; }
.ed-kpi-val { font-size: 12px; font-weight: 900; color: #fff; line-height: 1; }
.ed-kpi-lbl { font-size: 5.5px; color: rgba(255,255,255,0.38); }
.ed-kpi-bar {
    height: 2px; background: rgba(255,255,255,0.08);
    border-radius: 1px; overflow: hidden; margin-top: 1px;
}
.ed-kpi-fill { height: 100%; border-radius: 1px; }

.ed-grid2 {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.ed-card {
    background: rgba(255,255,255,0.04);
    border-radius: 5px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ed-card-hdr {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 3px; flex-shrink: 0;
}
.ed-card-title { font-size: 7px; font-weight: 800; color: rgba(255,255,255,0.88); }
.ed-legend {
    display: flex; align-items: center; gap: 4px;
    font-size: 5px; color: rgba(255,255,255,0.35);
}
.ed-leg-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.ed-see-all { font-size: 5.5px; color: #9B7FEA; cursor: default; }
.ed-chart-svg { width: 100%; flex: 1; overflow: visible; }

.ed-appt-row {
    display: flex; align-items: center; gap: 4px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ed-appt-row:last-child { border-bottom: none; }
.ed-appt-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.ed-appt-info { flex: 1; min-width: 0; }
.ed-appt-name { font-size: 6px; font-weight: 700; color: rgba(255,255,255,0.90); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-appt-svc  { font-size: 5px; color: rgba(255,255,255,0.35); white-space: nowrap; }
.ed-badge { font-size: 5px; padding: 1px 3px; border-radius: 2px; font-weight: 700; white-space: nowrap; }
.ed-badge-done { background: rgba(14,159,135,0.22);  color: #2BBFA6; }
.ed-badge-live { background: rgba(192,55,94,0.25);   color: #FF7DAE; }
.ed-badge-next { background: rgba(120,80,220,0.22);  color: #B89FFF; }

/* ============================================
   iPAD ERP DASHBOARD STYLES
   ============================================ */
.ed-ipad-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 3px 5px;
    background: rgba(255,255,255,0.06); border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;
}
.ed-ipad-brand { display: flex; align-items: center; gap: 3px; font-size: 7px; font-weight: 800; color: #C4A8FF; }
.ed-ipad-dot {
    width: 7px; height: 7px;
    background: linear-gradient(135deg, #C0375E, #4A2D9A);
    border-radius: 2px;
}
.ed-ipad-menu { font-size: 9px; color: rgba(255,255,255,0.55); cursor: default; }

.ed-ipad-ptitle { font-size: 7.5px; font-weight: 800; color: #fff; padding: 0 2px; flex-shrink: 0; }

.ed-ipad-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; flex-shrink: 0; }
.ed-ipad-kpi  { border-radius: 6px; padding: 5px; color: #fff; display: flex; flex-direction: column; gap: 1px; }
.ed-ipad-kpi-ico { font-size: 10px; }
.ed-ipad-kpi-val { font-size: 13px; font-weight: 900; line-height: 1; }
.ed-ipad-kpi-lbl { font-size: 6px; opacity: 0.85; }

.ed-ipad-card { background: rgba(255,255,255,0.05); border-radius: 5px; padding: 4px 5px; border: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; }
.ed-ipad-card-hdr { font-size: 6.5px; font-weight: 800; color: rgba(255,255,255,0.88); margin-bottom: 4px; }

.ed-ipad-bars { display: flex; align-items: flex-end; gap: 2px; height: 32px; }
.ed-ipad-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; gap: 1px; }
.ed-ipad-bar { width: 100%; border-radius: 2px 2px 0 0; min-height: 2px; opacity: 0.8; align-self: flex-end; }
.ed-ipad-bar-lbl { font-size: 4px; color: rgba(255,255,255,0.30); text-align: center; white-space: nowrap; }

.ed-ipad-row {
    display: flex; align-items: center; gap: 4px;
    padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ed-ipad-row:last-child { border-bottom: none; }
.ed-ipad-dot-live {
    width: 5px; height: 5px; border-radius: 50%;
    background: #C0375E; box-shadow: 0 0 0 2px rgba(192,55,94,0.2);
    flex-shrink: 0;
}
.ed-ipad-dot-next { width: 5px; height: 5px; border-radius: 50%; background: #4A2D9A; flex-shrink: 0; }
.ed-ipad-row-info { flex: 1; }
.ed-ipad-rname { font-size: 6px; font-weight: 700; color: rgba(255,255,255,0.90); }
.ed-ipad-rsvc  { font-size: 5px; color: rgba(255,255,255,0.35); }
.ed-ipad-badge { font-size: 5px; font-weight: 700; padding: 1px 4px; border-radius: 2px; white-space: nowrap; }

.ed-ipad-add-btn {
    width: 100%; padding: 4px;
    background: linear-gradient(135deg, #C0375E, #9B2E55);
    color: #fff; border: none; border-radius: 5px;
    font-size: 6.5px; font-weight: 700;
    font-family: 'Tajawal'; cursor: default;
    flex-shrink: 0; margin-top: auto;
}

/* ============================================
   FLOATING GLASSMORPHISM CARDS
   ============================================ */
.fcard {
    position: absolute; z-index: 30;
    background: rgba(18,8,50,0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    box-shadow:
        0 8px 40px rgba(74,45,154,0.38),
        0 2px 10px rgba(0,0,0,0.40),
        inset 0 1px 0 rgba(255,255,255,0.10);
    color: #fff;
    padding: 10px 14px;
    cursor: default;
}

/* Revenue card — upper left, floating above the scene card */
.fcard-rev {
    top: -16px; left: 8px;
    display: flex; align-items: center; gap: 10px;
    animation: fcard-a 5.5s ease-in-out infinite;
}
.fcard-icon { font-size: 22px; line-height: 1; }
.fcard-num  { font-size: 18px; font-weight: 900; color: #2BBFA6; line-height: 1.1; }
.fcard-lbl  { font-size: 11px; color: rgba(255,255,255,0.55); }
.fcard-pulse {
    position: absolute; top: 10px; right: 10px;
    width: 6px; height: 6px; background: #2BBFA6; border-radius: 50%;
    animation: live-pulse 2s ease-in-out infinite;
}

/* Notification card — right side, near the iPad */
.fcard-notify {
    bottom: 60px; right: -14px;
    min-width: 155px;
    display: flex; flex-direction: column; gap: 6px;
    animation: fcard-b 6.2s ease-in-out infinite 0.8s;
}
.fcard-noti-top { display: flex; align-items: center; gap: 5px; }
.fcard-live-dot {
    width: 6px; height: 6px; background: #C0375E; border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(192,55,94,0.22);
    animation: live-pulse 1.8s ease-in-out infinite;
}
.fcard-noti-title { font-size: 10px; font-weight: 800; color: #fff; }
.fcard-noti-row  { display: flex; align-items: center; gap: 7px; }
.fcard-av {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #C0375E, #7055C4);
    box-shadow: 0 2px 6px rgba(192,55,94,0.35);
}
.fcard-noti-name { font-size: 10px; font-weight: 700; color: #fff; }
.fcard-noti-info { font-size: 9px; color: rgba(255,255,255,0.50); }

/* Rating card — below center of the iMac */
.fcard-rating {
    bottom: -16px; left: 30%;
    text-align: center; min-width: 80px;
    animation: fcard-c 4.8s ease-in-out infinite 1.6s;
}
.fcard-stars    { font-size: 11px; color: #F5A623; letter-spacing: 1px; }
.fcard-rate-val { font-size: 20px; font-weight: 900; color: #fff; line-height: 1; }
.fcard-rate-lbl { font-size: 10px; color: rgba(255,255,255,0.55); }

/* ===== STATS BAR ===== */
.stats-bar {
    background: #fff;
    padding: 44px 0;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.stats-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 36px;
}

.stat-num {
    font-size: 38px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-label {
    font-size: 14px;
    color: var(--gray);
    font-weight: 500;
}

.stat-divider {
    width: 1px;
    height: 52px;
    background: var(--border);
    flex-shrink: 0;
}

/* ===== SECTION COMMON ===== */
section { padding: 90px 0; }

.section-tag {
    display: inline-block;
    background: var(--pink-bg);
    color: var(--pink);
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: 0.3px;
}

.section-title {
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 900;
    color: var(--dark);
    margin-bottom: 14px;
    line-height: 1.3;
}

.section-sub {
    font-size: 17px;
    color: var(--gray);
    max-width: 620px;
    margin: 0 auto 52px;
    line-height: 1.8;
}

/* ===== REALITY CHECK ===== */
.reality-check { background: var(--gray-l); }

.pain-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 48px;
    text-align: right;
}

.pain-card {
    background: #fff;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: all 0.25s;
}
.pain-card:hover {
    border-color: var(--pink);
    box-shadow: 0 6px 24px rgba(192,55,94,0.09);
    transform: translateY(-3px);
}

.pain-icon { font-size: 30px; flex-shrink: 0; line-height: 1; }

.pain-card p {
    font-size: 15px;
    color: var(--dark);
    font-weight: 500;
    line-height: 1.65;
}

.reality-closing {
    background: linear-gradient(135deg, var(--purple), var(--pink));
    color: #fff;
    padding: 36px 44px;
    border-radius: var(--radius-lg);
    max-width: 760px;
    margin: 0 auto;
}
.reality-closing p { font-size: 17px; margin-bottom: 10px; }
.reality-bold { font-size: 22px !important; font-weight: 900 !important; margin-bottom: 0 !important; }

/* ===== FEATURES — CONTROL CENTER ===== */

.cc-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 8% 20%,  rgba(223,170,128,0.12) 0%, transparent 38%),
        radial-gradient(ellipse at 92% 16%, rgba(235,196,169,0.14) 0%, transparent 38%),
        radial-gradient(ellipse at 50% 95%, rgba(213,175,145,0.07) 0%, transparent 45%),
        #fffaf5;
    padding: clamp(110px,12vw,155px) 0 clamp(72px,9vw,110px);
    scroll-margin-top: 70px;
}
.cc-container {
    width: min(100% - 48px, 1380px);
    margin-inline: auto;
}

/* Header */
.cc-header {
    max-width: 800px;
    margin: 0 auto clamp(36px,5vw,60px);
    text-align: center;
}
.cc-title {
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 900;
    color: #1a0806;
    line-height: 1.25;
    margin: 10px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cc-accent { color: #B86F52; }
.cc-sub {
    font-size: clamp(13px, 1.05vw, 15px);
    color: #7a5540;
    line-height: 1.7;
    margin: 0 auto;
    max-width: 580px;
}

/* Two-column layout */
.cc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    gap: clamp(24px, 4vw, 60px);
    align-items: start;
}
.cc-dashboard-col { grid-column: 1; }
.cc-modules-col   { grid-column: 2; }

/* ── Dashboard window ── */
.dash-window {
    background: #fff;
    border-radius: 16px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.05),
        0 8px 30px rgba(0,0,0,0.09),
        0 28px 70px rgba(0,0,0,0.06);
    overflow: hidden;
    font-family: 'Tajawal', sans-serif;
    font-size: 10px;
}
.dash-browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    background: #f2ede8;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    direction: ltr;
}
.dash-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dash-dot-r { background: #ff6058; }
.dash-dot-y { background: #ffbd2e; }
.dash-dot-g { background: #29c941; }
.dash-url-bar {
    flex: 1;
    margin: 0 8px;
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 9.5px;
    color: #8a7a72;
    text-align: center;
    font-family: monospace;
}
.dash-body {
    display: flex;
    direction: ltr;
    height: 400px;
    overflow: hidden;
}
.dash-sidebar {
    width: 50px;
    background: #1e120a;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 2px;
    flex-shrink: 0;
}
.dash-sidebar-logo {
    width: 28px; height: 28px;
    background: linear-gradient(135deg, #B86F52, #e0956e);
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.dash-nav-item {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
}
.dash-nav-item svg {
    width: 16px; height: 16px;
    stroke: rgba(255,255,255,0.42);
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dash-nav-item.active { background: rgba(184,111,82,0.25); }
.dash-nav-item.active svg { stroke: #e8a882; }

.dash-main {
    flex: 1;
    background: #faf6f1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    direction: rtl;
    min-width: 0;
}
.dash-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    flex-shrink: 0;
}
.dash-topbar-title { font-size: 11px; font-weight: 700; color: #1e120a; }
.dash-topbar-sub   { font-size: 8.5px; color: #9a7a68; }
.dash-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, #B86F52, #e0956e);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: #fff;
    flex-shrink: 0;
}
.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    padding: 8px 10px 5px;
    flex-shrink: 0;
}
.dash-stat {
    background: #fff;
    border-radius: 9px;
    padding: 7px 9px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.dash-stat-label { font-size: 7.5px; color: #9a7a68; margin-bottom: 2px; }
.dash-stat-value { font-size: 14px; font-weight: 800; color: #1e120a; line-height: 1.1; }
.dash-stat-trend { font-size: 7px; color: #B86F52; margin-top: 2px; }
.dash-stat-trend.good { color: #2da08c; }
.dash-lower {
    flex: 1;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 7px;
    padding: 5px 10px 10px;
    overflow: hidden;
    direction: rtl;
    min-height: 0;
}
.dash-appts {
    background: #fff;
    border-radius: 9px;
    padding: 9px;
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dash-panel-title {
    font-size: 8.5px;
    font-weight: 700;
    color: #1e120a;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 4px;
    flex-shrink: 0;
}
.dash-appt-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.dash-appt-row:last-child { border-bottom: none; }
.dash-appt-dot  { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dash-appt-info { flex: 1; min-width: 0; }
.dash-appt-name { font-size: 8px; font-weight: 600; color: #1e120a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-appt-svc  { font-size: 7px; color: #9a7a68; }
.dash-appt-time { font-size: 7.5px; color: #6a4f42; font-weight: 600; font-family: monospace; flex-shrink: 0; }
.dash-appt-badge { font-size: 6.5px; font-weight: 600; padding: 2px 5px; border-radius: 4px; flex-shrink: 0; }
.badge-ok   { background: rgba(45,160,140,0.11); color: #1a8a76; }
.badge-wait { background: rgba(184,111,82,0.12); color: #8a5230; }
.dash-chart-panel {
    background: #fff;
    border-radius: 9px;
    padding: 9px;
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dash-chart-amount { font-size: 12px; font-weight: 800; color: #1e120a; margin-bottom: 4px; }
.dash-chart-amount small { font-size: 8px; color: #9a7a68; font-weight: 400; }
.dash-chart-bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding-top: 4px;
    min-height: 0;
}
.dash-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; justify-content: flex-end; }
.dash-bar-col span { font-size: 6px; color: #9a7a68; }
.dash-bar-today { color: #B86F52 !important; font-weight: 700; }
.dash-bar { width: 100%; border-radius: 3px 3px 0 0; background: rgba(184,111,82,0.18); min-height: 3px; }
.dash-bar-hi { background: #B86F52; }

/* ── Module cards ── */
.cc-modules-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.module-card {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto minmax(0,1fr);
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255,252,248,0.90);
    border: 1px solid rgba(185,116,75,0.14);
    border-radius: 18px;
    text-align: right;
    direction: rtl;
    cursor: default;
    font-family: 'Tajawal', sans-serif;
    box-shadow: 0 2px 8px rgba(80,48,28,0.04);
    transition:
        transform    300ms cubic-bezier(.22,.68,0,1.1),
        box-shadow   300ms ease,
        border-color 300ms ease,
        background   300ms ease;
}
/* RTL hover — elevation toward the left */
html[dir="rtl"] .module-card:hover {
    background: rgba(255,252,248,0.94);
    border-color: rgba(181,108,77,0.42);
    box-shadow: 0 14px 35px rgba(80,45,30,0.12);
    transform: translateX(-10px) translateY(-2px);
}
/* LTR hover — elevation toward the right */
html[dir="ltr"] .module-card:hover {
    background: rgba(255,252,248,0.94);
    border-color: rgba(181,108,77,0.42);
    box-shadow: 0 14px 35px rgba(80,45,30,0.12);
    transform: translateX(10px) translateY(-2px);
}

.module-icon {
    width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 240ms ease, transform 240ms ease;
}
.module-icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.module-card:hover .module-icon { transform: scale(1.08); }

.mi-rose   { background: rgba(184,111,82,0.12); color: #B86F52; }
.mi-teal   { background: rgba(45,160,140,0.10); color: #2da08c; }
.mi-purple { background: rgba(130,90,180,0.10); color: #825ab4; }
.mi-amber  { background: rgba(217,119,6,0.10);  color: #d97706; }
.mi-sky    { background: rgba(59,130,246,0.10);  color: #3b82f6; }
.mi-green  { background: rgba(34,197,94,0.10);   color: #16a34a; }

.module-num {
    font-size: 9.5px; font-weight: 800;
    color: rgba(90,51,32,0.25);
    letter-spacing: 0.03em;
    font-family: monospace;
    flex-shrink: 0;
}

.module-content { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.module-title { font-size: 13px; font-weight: 700; color: #2a1509; line-height: 1.25; display: block; }
.module-desc  { font-size: 10.5px; color: #8a6a58; line-height: 1.45; display: block; }
.module-tags  { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.module-tags span {
    font-size: 9px; font-weight: 600;
    padding: 2px 7px; border-radius: 6px;
    background: rgba(184,111,82,0.08); color: #7a4a30;
    white-space: nowrap;
}

.module-arrow { display: none !important; }

/* ── Benefits bar ── */
.cc-benefits {
    margin-top: clamp(36px,5vw,60px);
    padding-top: 24px;
    border-top: 1px solid rgba(184,111,82,0.12);
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 14px;
}
.cc-benefit {
    display: flex; flex-direction: column;
    align-items: center; gap: 8px; text-align: center;
}
.cc-benefit-icon {
    width: 40px; height: 40px; border-radius: 12px;
    background: rgba(184,111,82,0.08);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cc-benefit-icon svg { width: 20px; height: 20px; stroke: #B86F52; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cc-benefit-label { font-size: 11px; font-weight: 600; color: #5a3320; line-height: 1.4; }

/* ── Tablet ── */
@media (max-width: 1100px) {
    .cc-layout { grid-template-columns: 1fr; }
    .cc-dashboard-col { grid-column: 1; grid-row: 1; }
    .cc-modules-col   { grid-column: 1; grid-row: 2; }
}

/* ── Mobile ── */
@media (max-width: 767px) {
    .module-card { grid-template-columns: auto minmax(0,1fr); }
    .module-num  { display: none; }
    .cc-benefits { grid-template-columns: 1fr 1fr; gap: 12px; }
    .dash-body   { height: 300px; }
    .dash-stats  { grid-template-columns: repeat(2,1fr); }
    .dash-lower  { grid-template-columns: 1fr; }
    .dash-chart-panel { display: none; }
}

/* Language toggle button */
.lang-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255,255,255,0.14);
    border: 1.5px solid rgba(255,255,255,0.32);
    border-radius: 20px;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.03em;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: 'Tajawal', sans-serif;
    line-height: 1;
}
.lang-toggle:hover { background: rgba(255,255,255,0.26); border-color: rgba(255,255,255,0.6); }
.lang-toggle:active { transform: scale(0.95); }
.lt-ar { transition: opacity 0.2s; opacity: 1; }
.lt-en { transition: opacity 0.2s; opacity: 0.48; }
.lt-sep { opacity: 0.35; margin: 0 1px; font-weight: 400; }
.lang-toggle.en-active .lt-ar { opacity: 0.48; }
.lang-toggle.en-active .lt-en { opacity: 1; }


/* ===== HOW IT WORKS — STAIR JOURNEY ===== */
.stair-section {
    background: #F6F0E8;
    padding: clamp(72px, 9vw, 110px) 0 clamp(80px, 10vw, 120px);
    position: relative;
    overflow: hidden;
    scroll-margin-top: 70px;
}

.stair-header {
    text-align: center;
    margin-bottom: 52px;
}

/* ─── Stage ─── */
.stair-stage {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

/* ─── Ball ─── */
.stair-ball {
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 20;
    pointer-events: none;
    display: none;
    transform-origin: center center;
}

.stair-ball-inner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #d9a08a 0%, #B86F52 52%, #8c4b30 100%);
    box-shadow:
        0 6px 20px rgba(184,111,82,0.45),
        inset 0 -4px 8px rgba(0,0,0,0.15),
        inset 0 4px 10px rgba(255,255,255,0.25);
}

.stair-ball-shadow {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 6px;
    border-radius: 50%;
    background: rgba(100,58,28,0.30);
    filter: blur(3px);
}

/* ─── Cards ─── */
.stair-card {
    background: #FFFDF9;
    border: 1px solid rgba(184,111,82,0.14);
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(100,64,38,0.06);
    padding: 22px 20px 26px;
    direction: rtl;
    text-align: right;
    transition: box-shadow 300ms ease, border-color 300ms ease;
}

.sc-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* No transform here — getBoundingClientRect must return true layout position */
}

.sc-revealed {
    opacity: 1;
    pointer-events: auto;
    animation: sc-pop 500ms cubic-bezier(.22,1.4,.5,1) both;
}

@keyframes sc-pop {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1);       }
}

.sc-active {
    box-shadow:
        0 10px 36px rgba(184,111,82,0.18),
        0 2px 8px rgba(184,111,82,0.08);
    border-color: rgba(184,111,82,0.32);
}

.sc-active .sc-badge {
    background: linear-gradient(135deg, #B86F52, #C4835F);
    color: #FFFDF9;
    box-shadow: 0 4px 12px rgba(184,111,82,0.38);
}

.sc-completed { opacity: 0.68; }

.sc-completed .sc-badge {
    background: rgba(184,111,82,0.14);
    color: #B86F52;
}

.sc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.sc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(184,111,82,0.11);
    color: #B86F52;
    font-size: 14px;
    font-weight: 800;
    transition: background 350ms ease, color 350ms ease, box-shadow 350ms ease;
    flex-shrink: 0;
}

.sc-icon {
    display: flex;
    color: rgba(184,111,82,0.40);
}

.sc-title {
    font-size: clamp(15px, 1.4vw, 17px);
    font-weight: 800;
    color: #2F241F;
    margin-bottom: 10px;
    line-height: 1.4;
}

.sc-desc {
    font-size: clamp(13px, 1.2vw, 14px);
    color: #6A5145;
    line-height: 1.72;
}

/* ─── Desktop: staircase layout ─── */
@media (min-width: 900px) {
    .stair-ball { display: block; }

    .stair-stage { height: 660px; }

    .stair-card {
        position: absolute;
        width: 23%;
    }

    /* RTL journey: step 1 at physical right (peak), step 4 at physical left (base) */
    .stair-card[data-step="1"] { right: 0;      bottom: 380px; }
    .stair-card[data-step="2"] { right: 25.3%;  bottom: 260px; }
    .stair-card[data-step="3"] { right: 50.6%;  bottom: 140px; }
    .stair-card[data-step="4"] { right: 75.9%;  bottom: 20px;  }
}

/* ─── Tablet: 2-column grid ─── */
@media (min-width: 540px) and (max-width: 899px) {
    .stair-stage {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .stair-ball { display: none; }
}

/* ─── Mobile: vertical stack ─── */
@media (max-width: 539px) {
    .stair-stage {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .stair-ball { display: none; }
}

/* ===== COMPARE — PREMIUM SPLIT ===== */
.pcompare-section {
    background: linear-gradient(155deg, #EDE3D6 0%, #F4EBE0 50%, #ECE3D4 100%);
    padding: clamp(72px, 9vw, 110px) 0 clamp(80px, 10vw, 120px);
    position: relative;
    overflow: hidden;
    scroll-margin-top: 70px;
}

.pcompare-section::before {
    content: '';
    position: absolute;
    top: -15%;
    right: -8%;
    width: 50%;
    aspect-ratio: 1;
    background: radial-gradient(ellipse, rgba(212,158,124,0.18) 0%, transparent 68%);
    pointer-events: none;
}

.pcompare-section::after {
    content: '';
    position: absolute;
    bottom: -12%;
    left: -6%;
    width: 42%;
    aspect-ratio: 1;
    background: radial-gradient(ellipse, rgba(196,128,90,0.13) 0%, transparent 70%);
    pointer-events: none;
}

.pcompare-header {
    text-align: center;
    margin-bottom: 44px;
    position: relative;
    z-index: 1;
}

/* ─── Premium toggle ─── */
.pctoggle {
    display: flex;
    justify-content: center;
    gap: 0;
    max-width: 430px;
    margin: 0 auto 52px;
    background: rgba(238,228,214,0.85);
    border: 1px solid rgba(184,111,82,0.20);
    border-radius: 100px;
    padding: 5px;
    position: relative;
    z-index: 1;
}

.pctab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 18px;
    border-radius: 100px;
    border: none;
    background: transparent;
    font-family: 'Tajawal', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #8A6655;
    cursor: pointer;
    direction: rtl;
    white-space: nowrap;
    transition: all 260ms cubic-bezier(.22,.68,0,1.05);
}

.pct-icon {
    display: flex;
    align-items: center;
    opacity: 0.75;
}

.pctab.active {
    background: linear-gradient(135deg, #B86F52 0%, #9E5A3C 100%);
    color: #FFFDF9;
    box-shadow:
        0 4px 18px rgba(184,111,82,0.40),
        0 1px 4px rgba(184,111,82,0.18);
}

.pctab.active .pct-icon { opacity: 1; }

.pctab:hover:not(.active) {
    background: rgba(184,111,82,0.09);
    color: #B86F52;
}

/* ─── Arena: two-column split ─── */
.pcarena {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    align-items: stretch;
    max-width: 1020px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ─── Column shared ─── */
.pca-col {
    overflow: hidden;
    transition: opacity 340ms ease, transform 340ms cubic-bezier(.22,.68,0,1.05);
}

/* Old column (right in RTL) */
.pca-col.pca-old {
    background: linear-gradient(175deg, #F2E9E1 0%, #EDE0D5 100%);
    border: 1px solid rgba(170,120,95,0.16);
    border-radius: 0 24px 24px 0;
    box-shadow: inset 0 1px 0 rgba(255,245,238,0.60);
}

/* WOW column (left in RTL) */
.pca-col.pca-wow {
    background: linear-gradient(175deg, #FFFDF9 0%, #FBF5EE 100%);
    border: 1px solid rgba(184,111,82,0.22);
    border-radius: 24px 0 0 24px;
    box-shadow:
        0 8px 48px rgba(184,111,82,0.13),
        inset 0 1px 0 rgba(255,255,255,0.90);
}

/* Active/passive states (desktop) */
.pca-col.pca-active  { opacity: 1; transform: scale(1); }
.pca-col.pca-passive { opacity: 0.46; transform: scale(0.986); }

/* ─── Column header ─── */
.pca-col-header {
    text-align: center;
    padding: 28px 24px 22px;
    border-bottom: 1px solid rgba(140,90,60,0.09);
}

.pca-hicon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.pca-hicon.old-hicon {
    background: rgba(190,120,110,0.14);
    color: #B56060;
}

.pca-hicon.wow-hicon {
    background: rgba(184,111,82,0.14);
    color: #B86F52;
    box-shadow: 0 4px 16px rgba(184,111,82,0.18);
}

.pca-col-label {
    font-size: 17px;
    font-weight: 800;
    color: #2F241F;
    margin-bottom: 4px;
    line-height: 1.3;
}

.pca-col.pca-wow .pca-col-label { color: #2A1E16; }

.pca-col-sub {
    font-size: 12.5px;
    color: #8A6655;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* ─── Items ─── */
.pca-items {
    padding: 16px 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pci {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 15px;
    border-radius: 14px;
    direction: rtl;
    text-align: right;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

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

.pci.old-item {
    background: rgba(195,145,130,0.10);
    border: 1px solid rgba(185,120,105,0.13);
}

.pci.old-item:hover { box-shadow: 0 4px 14px rgba(150,80,70,0.08); }

.pci.wow-item {
    background: rgba(250,244,236,0.90);
    border: 1px solid rgba(184,111,82,0.14);
}

.pci.wow-item:hover { box-shadow: 0 4px 14px rgba(184,111,82,0.10); }

/* Item marker icon */
.pci-marker {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.old-marker {
    background: rgba(195,90,85,0.13);
    color: #B55555;
}

.wow-marker {
    background: rgba(184,111,82,0.14);
    color: #B86F52;
}

.pci-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.68;
    color: #4A3328;
}

.pci.wow-item .pci-text { color: #2F241F; }

/* ─── VS Divider ─── */
.pca-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.pca-divider::before {
    content: '';
    position: absolute;
    top: 5%;
    bottom: 5%;
    left: 50%;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(184,111,82,0.22) 25%,
        rgba(184,111,82,0.22) 75%,
        transparent
    );
}

.pca-vs {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #B86F52, #A05840);
    color: #FFFDF9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.5px;
    box-shadow:
        0 4px 16px rgba(184,111,82,0.38),
        0 0 0 3px rgba(238,228,214,0.85);
    position: relative;
    z-index: 1;
}

/* ─── Mobile: stack columns ─── */
@media (max-width: 767px) {
    .pcarena {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .pca-col.pca-old { border-radius: 20px; }
    .pca-col.pca-wow { border-radius: 20px; }

    .pca-divider { display: none; }

    .pca-mobile-hidden { display: none !important; }

    /* On mobile, passive = same as active (no dim needed) */
    .pca-col.pca-passive {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 479px) {
    .pctoggle { max-width: 100%; }
}

/* Keep .hidden utility for any remaining references */
.hidden { display: none !important; }

/* ===== PRICING ===== */
.pricing-section {
    background: linear-gradient(180deg, var(--gray-l) 0%, #fff 60%);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1020px;
    margin: 0 auto 30px;
    align-items: start;
}

.pricing-card {
    background: #fff;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    text-align: center;
    position: relative;
    transition: all 0.3s;
}
.pricing-card:hover { box-shadow: var(--shadow-md); }

.pricing-card.featured {
    border-color: var(--pink);
    transform: scale(1.04);
    box-shadow: 0 20px 60px rgba(192,55,94,0.14);
}
.pricing-card.featured:hover {
    transform: scale(1.05);
    box-shadow: 0 24px 70px rgba(192,55,94,0.18);
}

.plan-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--pink), var(--purple));
    color: #fff;
    padding: 6px 22px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--shadow-pink);
}

.plan-name { font-size: 22px; font-weight: 800; color: var(--dark); margin-bottom: 18px; }

.plan-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
}
.price-num  { font-size: 50px; font-weight: 900; color: var(--pink); line-height: 1; }
.price-unit { font-size: 15px; color: var(--gray); }

.price-day-tag {
    display: inline-block;
    background: var(--teal-bg);
    color: var(--teal);
    font-size: 12.5px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 24px;
}

.plan-feats {
    list-style: none;
    text-align: right;
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.plan-feats li {
    font-size: 14.5px;
    font-weight: 500;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}
.feat-yes { color: var(--dark); }
.feat-no  { color: #C5C7D4; text-decoration: line-through; }

.pricing-note { font-size: 14px; color: var(--gray); text-align: center; }

/* ===== FAQ ===== */
.faq-section { background: var(--gray-l); }

.faq-list {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: right;
}

.faq-item {
    background: #fff;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    overflow: hidden;
    transition: border-color 0.25s;
}
.faq-item.open { border-color: var(--pink); }

.faq-q {
    width: 100%;
    padding: 20px 24px;
    background: none;
    border: none;
    font-family: 'Tajawal', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: right;
}
.faq-arr {
    font-size: 13px;
    color: var(--pink);
    flex-shrink: 0;
    transition: transform 0.3s;
}
.faq-item.open .faq-arr { transform: rotate(-180deg); }

.faq-ans {
    display: none;
    padding: 0 24px 22px;
}
.faq-ans p { font-size: 15px; color: var(--gray); line-height: 1.8; }

/* ===== FINAL CTA ===== */
.final-cta {
    background: linear-gradient(145deg, #1C1528 0%, #4A2D9A 60%, #7055C4 100%);
    padding: 110px 0;
}

.cta-title {
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 900;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.3;
}
.cta-sub {
    font-size: 18px;
    color: rgba(255,255,255,0.70);
    margin-bottom: 56px;
}

.cta-form-box {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 44px 44px 36px;
    max-width: 720px;
    margin: 0 auto 44px;
}

.form-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 28px;
}

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

.f-input {
    padding: 14px 18px;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-family: 'Tajawal', sans-serif;
    font-size: 15.5px;
    color: var(--dark);
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
    text-align: right;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}
.f-input:focus { border-color: var(--pink); }
.f-input-full  { grid-column: 1 / -1; }
.f-input::placeholder { color: #B0B5C8; }

.btn-submit {
    width: 100%;
    margin-bottom: 16px;
}
.form-note { font-size: 13.5px; color: var(--gray); }

.wa-section { text-align: center; }
.wa-section p { color: rgba(255,255,255,0.68); font-size: 16px; margin-bottom: 18px; }

/* ===== FOOTER ===== */
.footer {
    background: var(--dark);
    padding: 44px 0;
}
.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.footer-logo {
    height: 38px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.75;
}
.footer-brand-name {
    font-size: 17px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
}

.footer-nav {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    justify-content: center;
}
.footer-nav a {
    font-size: 14.5px;
    color: rgba(255,255,255,0.55);
    transition: color 0.2s;
}
.footer-nav a:hover { color: var(--pink); }

.footer-copy { font-size: 13px; color: rgba(255,255,255,0.35); }

/* ===== RESPONSIVE — TABLET ===== */
@media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .hero-text  { text-align: center; }
    .hero-chips { justify-content: center; }
    .hero-btns  { justify-content: center; }
    .hero-devices { max-width: 560px; margin: 0 auto; }
    .fcard-rev    { top: -10px; left: 8px; }
    .fcard-notify { right: -10px; bottom: 50px; }
    .fcard-rating { bottom: -12px; left: 25%; }

    .pain-grid     { grid-template-columns: 1fr 1fr; }
    /* compare-grid removed — new split layout used instead */
    .pricing-grid  { grid-template-columns: 1fr; max-width: 480px; }
    .pricing-card.featured { transform: scale(1); }

}

/* ===== RESPONSIVE — MOBILE ===== */
@media (max-width: 640px) {
    section { padding: 68px 0; }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(255,255,255,0.98);
        flex-direction: column;
        gap: 0;
        border-top: 1px solid var(--border);
        box-shadow: var(--shadow-md);
        padding: 8px 0;
    }
    .nav-links.open { display: flex; }
    .nav-links a {
        padding: 14px 24px;
        border-bottom: 1px solid var(--border);
        width: 100%;
        text-align: right;
    }
    .nav-links a:last-child { border-bottom: none; }
    .nav-cta { display: none; }
    .hamburger { display: flex; }

    .hero { padding: 100px 20px 60px; min-height: auto; }
    .hero-inner { grid-template-columns: 1fr; }
    .hero-text  { text-align: center; }
    .hero-chips { justify-content: center; }
    .hero-btns  { flex-direction: column; align-items: center; justify-content: center; }
    .hero-devices { display: flex; max-width: 440px; margin: 0 auto; }
    .devices-scene { padding: 14px 12px 10px; gap: 8px; }
    .device-ipad-wrap { flex-basis: 35%; }
    .btn-large { width: 100%; max-width: 340px; }

    .stats-grid { gap: 28px; }
    .stat-divider { display: none; }
    .stat-item { padding: 0 12px; }

    .pain-grid     { grid-template-columns: 1fr; }
    .pricing-grid  { grid-template-columns: 1fr; max-width: 100%; }

    /* Features responsive rules are inside the .cc-section block above */

    .reality-closing { padding: 28px 22px; }
    .reality-bold { font-size: 18px !important; }

    .cta-form-box { padding: 28px 20px 24px; }
    .form-row { grid-template-columns: 1fr; }

    .footer-nav { gap: 16px; }

    .section-sub { margin-bottom: 36px; }
}

@media (max-width: 380px) {
    .hero-h1 { font-size: 30px; }
    .section-title { font-size: 24px; }
    .price-num { font-size: 42px; }
    .cta-title { font-size: 24px; }
}


/* ====================================================
   ██████████  NEW CSS DEVICES — LAPTOP + TABLET  ██████
   ==================================================== */

/* Updated hero text elements */
.hero-chips-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 28px;
}
.h-chip-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.82);
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.22s;
    cursor: default;
    text-align: right;
}
.h-chip-v2:hover {
    background: rgba(192,55,94,0.18);
    border-color: rgba(192,55,94,0.38);
    color: #FF7DAE;
}
.hcv-ico { font-size: 18px; line-height: 1; flex-shrink: 0; }

.hero-btns-col { flex-direction: column !important; gap: 10px !important; }
.btn-full { width: 100%; }

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
    justify-content: flex-start;
}
.h-trust-item {
    font-size: 12.5px;
    color: rgba(255,255,255,0.42);
    display: flex;
    align-items: center;
    gap: 5px;
}
.h-trust-chk { color: #0E9F87; font-weight: 900; }

/* Brands bar update */
.hb-sub {
    display: block;
    font-size: 9px;
    font-weight: 400;
    opacity: 0.55;
    line-height: 1.3;
}

/* Override devices-scene for new CSS device layout */
.devices-scene {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    padding-bottom: 18%;
}

/* ─────────────────────────────────────
   CSS LAPTOP DEVICE
   ───────────────────────────────────── */
.dev-laptop-wrap {
    position: relative;
    width: 100%;
    z-index: 1;
    filter:
        drop-shadow(0 28px 60px rgba(74,45,154,0.50))
        drop-shadow(0 0 35px rgba(192,55,94,0.12));
}

.dev-laptop { position: relative; width: 100%; }

.dev-lid {
    background: linear-gradient(160deg, #2D2048 0%, #1C1438 100%);
    border-radius: 10px 10px 0 0;
    padding: 7px 9px 0;
    border: 1.5px solid rgba(255,255,255,0.11);
    border-bottom: none;
    position: relative;
}
.dev-lid::before {
    content: '';
    position: absolute;
    top: 0; left: 10px; right: 10px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
}
.dev-lid::after {
    content: '';
    position: absolute;
    top: 17px; left: 9px; right: 9px; bottom: 0;
    border-radius: 3px;
    box-shadow: 0 0 50px rgba(192,55,94,0.13), 0 0 90px rgba(74,45,154,0.10);
    pointer-events: none;
}

.dev-cam-bar {
    height: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}
.dev-cam-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.13);
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.06);
}

.dev-screen {
    background: #090520;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.dev-screen::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.018) 0%, transparent 28%);
    pointer-events: none;
    z-index: 200;
    border-radius: 3px;
}

.dev-hinge {
    height: 5px;
    background: linear-gradient(180deg, #3A2855 0%, #1A0E35 100%);
    position: relative;
}
.dev-hinge::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: rgba(255,255,255,0.14);
}

.dev-base {
    background: linear-gradient(180deg, #261B40 0%, #181030 100%);
    border-radius: 0 0 10px 10px;
    padding: 8px 15px 12px;
    border: 1.5px solid rgba(255,255,255,0.07);
    border-top: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
}
.dev-base::after {
    content: '';
    position: absolute;
    bottom: -10px; left: 6%; right: 6%;
    height: 10px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.38) 0%, transparent 70%);
}

.dev-kb { display: flex; flex-direction: column; gap: 2.5px; align-items: center; }
.dev-kb-row { display: flex; gap: 2px; justify-content: center; }
.dk {
    width: 13px; height: 5.5px;
    background: rgba(255,255,255,0.07);
    border-radius: 1.5px;
    border-bottom: 1px solid rgba(0,0,0,0.30);
    box-shadow: 0 0.5px 0 rgba(255,255,255,0.04);
    flex-shrink: 0;
}
.dk-wide  { width: 21px; }
.dk-tab   { width: 19px; }
.dk-caps  { width: 18px; }
.dk-shift { width: 25px; }
.dk-enter { width: 20px; }
.dk-fn    { width: 15px; }
.dk-space { width: 72px; }
.dev-kb-fn { gap: 3px; }
.dev-trackpad {
    width: 36%;
    height: 11px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 3px;
    margin: 0 auto;
}

/* ─────────────────────────────────────
   ERP DASHBOARD (inside laptop screen)
   ───────────────────────────────────── */
.erp-dash {
    position: absolute;
    inset: 0;
    display: flex;
    font-family: 'Tajawal', sans-serif;
    overflow: hidden;
    background: #0A051E;
}

/* Sidebar */
.erp-sb {
    width: 60px;
    background: #180E30;
    display: flex;
    flex-direction: column;
    padding: 5px 0;
    border-left: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
.erp-sb-logo {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px 7px;
    font-size: 7px;
    font-weight: 900;
    color: #C4A8FF;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 4px;
    flex-shrink: 0;
}
.erp-sb-logo-ic {
    width: 11px; height: 11px;
    background: linear-gradient(135deg, #C0375E, #7B5CF6);
    border-radius: 3px;
    flex-shrink: 0;
}
.erp-sb-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5px;
    padding: 0 3px;
}
.erp-sb-item {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3.5px 4px;
    border-radius: 4px;
    font-size: 5px;
    color: rgba(255,255,255,0.40);
    cursor: default;
    white-space: nowrap;
}
.esbi-ic { font-size: 7px; flex-shrink: 0; }
.erp-sb-active {
    background: rgba(192,55,94,0.22);
    color: rgba(255,255,255,0.92);
    font-weight: 700;
}

/* Main content */
.erp-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 5px 6px;
    gap: 4px;
    min-width: 0;
}
.erp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
.erp-topbar-title {
    font-size: 9px;
    font-weight: 900;
    color: rgba(255,255,255,0.92);
}
.erp-topbar-end { display: flex; align-items: center; gap: 6px; }
.erp-topbar-bell { position: relative; font-size: 7px; }
.erp-bell-dot {
    position: absolute; top: -1px; right: -1px;
    width: 3px; height: 3px;
    background: #C0375E; border-radius: 50%;
}
.erp-topbar-user {
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 2px 5px 2px 2px;
}
.erp-uav {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: linear-gradient(135deg, #C0375E, #7B5CF6);
    flex-shrink: 0;
}
.erp-topbar-user span { font-size: 5.5px; font-weight: 700; color: rgba(255,255,255,0.85); }

/* KPI cards */
.erp-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    flex-shrink: 0;
}
.erp-kpi {
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 5px;
    padding: 5px 6px;
    overflow: hidden;
}
.erp-kpi-pink   { border-color: rgba(192,55,94,0.28); background: rgba(192,55,94,0.05); }
.erp-kpi-teal   { border-color: rgba(14,159,135,0.25); background: rgba(14,159,135,0.04); }
.erp-kpi-purple { border-color: rgba(123,92,246,0.25); background: rgba(123,92,246,0.04); }
.erp-kpi-amber  { border-color: rgba(232,168,56,0.25); background: rgba(232,168,56,0.04); }
.erp-kpi-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
    gap: 2px;
}
.erp-kpi-lbl {
    font-size: 4.5px;
    color: rgba(255,255,255,0.42);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.erp-kpi-badge {
    font-size: 4px;
    font-weight: 700;
    color: #FF7DAE;
    background: rgba(192,55,94,0.15);
    padding: 1px 2.5px;
    border-radius: 2.5px;
    white-space: nowrap;
    flex-shrink: 0;
}
.erp-kpi-val {
    font-size: 12px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 4px;
}
.erp-spark { width: 100%; height: 12px; display: block; overflow: visible; }

/* Charts row */
.erp-charts-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 4px;
    flex: 1;
    min-height: 0;
}
.erp-chart-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 5px;
    padding: 5px 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.erp-chart-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
    flex-shrink: 0;
}
.erp-chart-title {
    font-size: 5.5px;
    font-weight: 700;
    color: rgba(255,255,255,0.82);
}
.erp-chart-val {
    font-size: 4.5px;
    color: rgba(255,255,255,0.30);
    white-space: nowrap;
}
.erp-area-svg { width: 100%; flex: 1; min-height: 0; display: block; overflow: visible; }
.erp-area-card { }

/* Donut */
.erp-donut-card .erp-chart-card { }
.erp-pie-body {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-height: 0;
}
.erp-pie-svg-wrap { width: 52px; height: 52px; flex-shrink: 0; }
.erp-pie-svg-wrap svg { width: 100%; height: 100%; }
.erp-pie-legend {
    display: flex;
    flex-direction: column;
    gap: 2.5px;
    flex: 1;
}
.erp-pie-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 4.5px;
    color: rgba(255,255,255,0.60);
}
.erp-pie-item span {
    width: 5px; height: 5px;
    border-radius: 1.5px;
    flex-shrink: 0;
    display: inline-block;
}

/* Bottom row */
.erp-bottom-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4px;
    flex: 0.85;
    min-height: 0;
}
.erp-see-all {
    font-size: 4.5px;
    color: rgba(192,55,94,0.85);
    cursor: default;
    font-weight: 700;
    white-space: nowrap;
}

/* Appointments table */
.erp-appt-t { width: 100%; border-collapse: collapse; }
.erp-appt-t tr { border-bottom: 1px solid rgba(255,255,255,0.04); }
.erp-appt-t tr:last-child { border-bottom: none; }
.eat-name {
    font-size: 5.5px; font-weight: 700;
    color: rgba(255,255,255,0.82);
    padding: 3.5px 3px; white-space: nowrap;
}
.eat-svc {
    font-size: 4.5px; color: rgba(255,255,255,0.38);
    padding: 3.5px 3px; white-space: nowrap;
}
.eat-time {
    font-size: 4.5px; color: rgba(255,255,255,0.32);
    padding: 3.5px 3px; white-space: nowrap;
}
.eat-badge {
    font-size: 4px; padding: 1.5px 3px;
    border-radius: 3px; font-weight: 700; white-space: nowrap;
}
.eat-done { background: rgba(14,159,135,0.15); color: #0E9F87; }
.eat-live  { background: rgba(192,55,94,0.15); color: #C0375E; }
.eat-next  { background: rgba(123,92,246,0.15); color: #A78BFA; }

/* Staff list */
.erp-staff-list { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.erp-si { display: flex; align-items: center; gap: 3.5px; }
.erp-si-av {
    width: 13px; height: 13px; border-radius: 50%;
    font-size: 5.5px; display: flex;
    align-items: center; justify-content: center;
    color: #fff; font-weight: 900; flex-shrink: 0;
}
.erp-si-inf {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.erp-si-nm {
    font-size: 5px; font-weight: 700;
    color: rgba(255,255,255,0.75);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.erp-si-bar {
    height: 3px; background: rgba(255,255,255,0.08);
    border-radius: 3px; overflow: hidden;
}
.erp-si-bar div { height: 100%; border-radius: 3px; }
.erp-si-pct {
    font-size: 5px; font-weight: 700;
    color: rgba(255,255,255,0.50); white-space: nowrap; flex-shrink: 0;
}

/* ─────────────────────────────────────
   CSS TABLET DEVICE
   ───────────────────────────────────── */
.dev-tablet-wrap {
    position: absolute;
    bottom: -4%;
    right: -10%;
    width: 50%;
    z-index: 10;
    transform: rotate(3deg);
    transform-origin: bottom left;
    filter:
        drop-shadow(0 18px 44px rgba(74,45,154,0.60))
        drop-shadow(0 4px 14px rgba(0,0,0,0.55));
}

.dev-tablet { position: relative; }

.dev-tab-bezel {
    background: linear-gradient(160deg, #241A3E 0%, #170E2C 100%);
    border-radius: 7px 7px 0 0;
    padding: 5px 5px 0;
    border: 1.5px solid rgba(255,255,255,0.11);
    border-bottom: none;
    position: relative;
}
.dev-tab-bezel::before {
    content: '';
    position: absolute;
    top: 0; left: 6px; right: 6px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
}

.dev-tab-top-bar {
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1px;
}
.dev-tab-cam-dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
}

.dev-tab-screen {
    background: #090520;
    border-radius: 2px 2px 0 0;
    overflow: hidden;
    aspect-ratio: 4 / 2.85;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.dev-tab-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.016) 0%, transparent 25%);
    pointer-events: none;
    z-index: 200;
}

.dev-tab-kb {
    background: linear-gradient(180deg, #1F1438 0%, #130C24 100%);
    border-radius: 0 0 7px 7px;
    padding: 5px 8px 7px;
    border: 1.5px solid rgba(255,255,255,0.07);
    border-top: 1px solid rgba(255,255,255,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.dev-tab-kb-keys { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.dtk-row { display: flex; gap: 1.5px; justify-content: center; }
.dtk {
    width: 10.5px; height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 1px;
    border-bottom: 1px solid rgba(0,0,0,0.25);
    flex-shrink: 0;
}
.dtk-w  { width: 16px; }
.dtk-fw { width: 19px; }
.dtk-sp { width: 55px; }
.dtk-bot-row { gap: 2px; }
.dev-tab-trackpad {
    width: 24%;
    height: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 2px;
}

/* ─────────────────────────────────────
   CALENDAR APP (inside tablet screen)
   ───────────────────────────────────── */
.cal-app {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #0A0519;
    font-family: 'Tajawal', sans-serif;
    overflow: hidden;
}

.cal-topbar {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 5px;
    background: #120828;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.cal-topbar-start { flex: 1; }
.cal-t-title {
    font-size: 6px;
    font-weight: 900;
    color: rgba(255,255,255,0.88);
}
.cal-btn-new {
    background: linear-gradient(135deg, #C0375E, #D96080);
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 4.5px;
    font-weight: 700;
    padding: 2px 4px;
    cursor: default;
    font-family: 'Tajawal';
    white-space: nowrap;
}
.cal-tabs { display: flex; gap: 1px; }
.cal-tab {
    font-size: 4px;
    padding: 2px 3.5px;
    border-radius: 3px;
    color: rgba(255,255,255,0.30);
    cursor: default;
    white-space: nowrap;
}
.cal-tab-on {
    background: rgba(192,55,94,0.22);
    color: rgba(192,55,94,0.95);
    font-weight: 700;
}

.cal-date-hdr {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2px 5px;
    background: rgba(255,255,255,0.015);
    border-bottom: 1px solid rgba(255,255,255,0.045);
    flex-shrink: 0;
}
.cal-nav-btn { font-size: 8px; color: rgba(255,255,255,0.30); cursor: default; line-height: 1; }
.cal-date-str {
    font-size: 5.5px;
    font-weight: 700;
    color: rgba(255,255,255,0.82);
}

.cal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Staff header row */
.cal-staff-hdr {
    display: flex;
    align-items: center;
    padding: 2px 2px 2px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
    gap: 0;
}
.cal-time-col-ph { width: 18px; flex-shrink: 0; }
.cal-sc {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 2px 0;
    border-right: 1px solid rgba(255,255,255,0.04);
}
.cal-sc-av {
    width: 11px; height: 11px;
    border-radius: 50%;
    font-size: 5px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.cal-sc-nm { font-size: 4px; font-weight: 700; color: rgba(255,255,255,0.78); }
.cal-sc-role { font-size: 3px; color: rgba(255,255,255,0.30); }
.cal-stats-col-hdr {
    width: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-right: 1px solid rgba(255,255,255,0.04);
}
.cal-stats-col-hdr span {
    font-size: 3px;
    font-weight: 700;
    color: rgba(255,255,255,0.45);
    text-align: center;
}

/* Time grid */
.cal-grid-area {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
}
.cal-times {
    width: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 2px 1px;
    flex-shrink: 0;
}
.cal-times span {
    font-size: 3px;
    color: rgba(255,255,255,0.25);
    text-align: center;
    white-space: nowrap;
}

.cal-col {
    flex: 1;
    position: relative;
    border-right: 1px solid rgba(255,255,255,0.04);
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.022) 0px,
        rgba(255,255,255,0.022) 1px,
        transparent 1px,
        transparent 12.5%
    );
}
.cal-ab {
    position: absolute;
    left: 1px; right: 1px;
    border-radius: 2px;
    padding: 2px 2px;
    overflow: hidden;
}
.cal-ab-nm {
    font-size: 3.5px;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.cal-ab-sv {
    font-size: 2.8px;
    color: rgba(255,255,255,0.68);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Stats column */
.cal-stats-col-body {
    width: 46px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 3px 2px;
    overflow: hidden;
}
.cal-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.cal-si-n {
    font-size: 7.5px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}
.cal-si-l {
    font-size: 2.8px;
    color: rgba(255,255,255,0.38);
    line-height: 1.3;
    white-space: nowrap;
}

/* Mini monthly calendar inside stats */
.cal-mini-month {
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 3px;
}
.cal-mm-title {
    font-size: 3px;
    font-weight: 700;
    color: rgba(255,255,255,0.45);
    text-align: center;
    margin-bottom: 2px;
}
.cal-mm-dows {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.cal-mm-dows span {
    font-size: 2.2px;
    color: rgba(255,255,255,0.22);
    text-align: center;
    line-height: 1.5;
}
.cal-mm-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.cal-mm-grid span {
    font-size: 2.2px;
    color: rgba(255,255,255,0.32);
    text-align: center;
    line-height: 1.7;
}
.cal-mm-today {
    background: #C0375E !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-weight: 900;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 6px;
    height: 6px;
    margin: 0 auto;
}

/* Update floating card positions for new layout */
.fcard-notify {
    bottom: 55% !important;
    right: -18px !important;
}
.fcard-rev {
    top: -14px !important;
    left: 6px !important;
}
.fcard-rating {
    bottom: 8% !important;
    left: 22% !important;
}

/* ────────────────────────────────────────
   CREATIVE HERO UPGRADES — Premium touches
   ──────────────────────────────────────── */

/* Screen edge glow — neon light emanating from screen */
.dev-screen {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.05),
        0 0 30px rgba(192,55,94,0.12),
        0 0 60px rgba(74,45,154,0.10) !important;
}

/* Laptop surface reflection */
.dev-base::before {
    content: '';
    position: absolute;
    top: 0; left: 15%; right: 15%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.18),
        rgba(255,255,255,0.18),
        transparent
    );
}

/* Screen scanline overlay for realism */
.dev-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.03) 2px,
        rgba(0,0,0,0.03) 4px
    );
    pointer-events: none;
    z-index: 300;
}

/* Tablet screen glow */
.dev-tab-screen {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.05),
        0 0 20px rgba(123,92,246,0.15),
        0 0 40px rgba(74,45,154,0.10) !important;
}

/* Enhanced ambient glow behind devices */
.devices-scene::before {
    background: radial-gradient(ellipse at 60% 40%, rgba(110,55,210,0.45) 0%, rgba(192,55,94,0.08) 50%, transparent 70%) !important;
    width: 110% !important;
    height: 80% !important;
    top: 0 !important;
    left: -5% !important;
    filter: blur(30px) !important;
}

/* Bottom reflection under the laptop */
.dev-laptop-wrap::after {
    content: '';
    position: absolute;
    bottom: -24px;
    left: 5%;
    right: 5%;
    height: 24px;
    background: radial-gradient(ellipse at center, rgba(74,45,154,0.30) 0%, transparent 65%);
    filter: blur(4px);
    z-index: -1;
}

/* Enhanced floating card shine */
.fcard::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    border-radius: 14px 14px 0 0;
}

/* Brands bar brand logos — updated glow on hover */
.hb-logo {
    text-align: center !important;
    line-height: 1.25;
    cursor: default;
}
.hb-logo:hover { color: rgba(255,255,255,0.65) !important; }

/* Hero trust checkmarks extra style */
.hero-trust {
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* ERP dashboard glow on active sidebar item */
.erp-sb-active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: #C0375E;
    border-radius: 0 2px 2px 0;
}
.erp-sb-item { position: relative; }

/* Donut chart rotate to start at 12 o clock */
.erp-pie-svg-wrap svg {
    transform: rotate(-90deg);
}

/* Calendar appointment blocks — brighter gradient top */
.cal-ab::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 100%);
    border-radius: 2px 2px 0 0;
}

/* Tablet device - slight 3D tilt */
.dev-tab-bezel {
    transform-style: preserve-3d;
}

/* Mobile responsive fix for tablet device */
@media (max-width: 768px) {
    .dev-tablet-wrap {
        width: 46% !important;
        right: -5% !important;
        bottom: -2% !important;
    }
    .dev-tab-screen {
        aspect-ratio: 4 / 3 !important;
    }
}

@media (max-width: 600px) {
    .dev-tablet-wrap {
        display: none;
    }
    .devices-scene {
        padding-bottom: 0 !important;
    }
}

/* ============================================================
   HERO LIGHT THEME + REALISTIC DEVICES UPGRADE
   ============================================================ */

/* Hero background — light purple gradient */
.hero {
    background: linear-gradient(160deg, #F2EEFF 0%, #EAE4FF 35%, #F6F2FF 70%, #EEF0FF 100%) !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 110px 20px 80px;
    position: relative;
    overflow: hidden;
}

/* Updated mesh glows for light mode */
.hbg-m1 {
    background: radial-gradient(circle, rgba(139,92,246,0.18) 0%, transparent 65%) !important;
    width: 800px !important; height: 800px !important;
    top: -200px !important; left: 25% !important;
}
.hbg-m2 {
    background: radial-gradient(circle, rgba(192,55,94,0.14) 0%, transparent 65%) !important;
    width: 500px !important; height: 500px !important;
    bottom: -80px !important; right: -40px !important;
}
.hbg-m3 {
    background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 65%) !important;
    top: 30% !important; left: -60px !important;
}
.hbg-grid {
    background-image: radial-gradient(circle, rgba(139,92,246,0.06) 1px, transparent 1px) !important;
}
.hbg-vignette {
    background: radial-gradient(ellipse at center, transparent 50%, rgba(139,92,246,0.06) 100%) !important;
}

/* Hero text — dark on light background */
.hero-h1 {
    color: #1C1030 !important;
    font-size: clamp(30px, 4.2vw, 54px);
    line-height: 1.22;
    margin-bottom: 22px;
}

.h1-gradient {
    background: linear-gradient(135deg, #C0375E 0%, #7B5CF6 60%, #C0375E 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.hero-desc {
    color: #5B5472 !important;
    font-size: clamp(14px, 1.6vw, 16.5px) !important;
}

/* Badge — updated for light bg */
.badge {
    background: rgba(139,92,246,0.10) !important;
    color: #4A2D9A !important;
    border: 1px solid rgba(139,92,246,0.22) !important;
    box-shadow: 0 2px 12px rgba(139,92,246,0.12) !important;
}
.badge-dot {
    background: #C0375E !important;
}

/* Updated hero chips for light bg */
.h-chip-v2 {
    background: rgba(255,255,255,0.75) !important;
    border: 1px solid rgba(139,92,246,0.18) !important;
    color: #3D2B7A !important;
    box-shadow: 0 2px 8px rgba(139,92,246,0.08) !important;
}
.h-chip-v2:hover {
    background: rgba(192,55,94,0.08) !important;
    border-color: rgba(192,55,94,0.30) !important;
    color: #C0375E !important;
}

/* Trust badges — light mode */
.h-trust-item { color: #8B82A8 !important; }
.h-trust-chk  { color: #0E9F87 !important; }
.hero-trust   { border-top: 1px solid rgba(139,92,246,0.12) !important; }

/* Floating cards — white glassmorphism on light bg */
.fcard {
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(139,92,246,0.15) !important;
    box-shadow:
        0 10px 40px rgba(74,45,154,0.14),
        0 2px 10px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.90) !important;
    color: #1C1030 !important;
}
.fcard-num  { color: #0E9F87 !important; }
.fcard-lbl  { color: #8B82A8 !important; }
.fcard-noti-title { color: #1C1030 !important; }
.fcard-noti-name  { color: #1C1030 !important; }
.fcard-noti-info  { color: #8B82A8 !important; }
.fcard-rate-val   { color: #1C1030 !important; }
.fcard-rate-lbl   { color: #8B82A8 !important; }

/* Brands bar — light mode */
.hero-brands {
    border-top: 1px solid rgba(139,92,246,0.12) !important;
}
.hero-brands-label { color: #9B93BB !important; }
.hb-logo { color: rgba(74,45,154,0.35) !important; }
.hb-logo:hover { color: rgba(74,45,154,0.70) !important; }
.hb-sep { color: rgba(139,92,246,0.20) !important; }

/* Devices scene ambient — light mode */
.devices-scene::before {
    background: radial-gradient(ellipse at 55% 45%,
        rgba(139,92,246,0.20) 0%,
        rgba(192,55,94,0.06) 50%,
        transparent 70%) !important;
    filter: blur(40px) !important;
}

/* =============================================
   ULTRA-REALISTIC CSS LAPTOP DEVICE
   ============================================= */

/* Space Gray aluminum body */
.dev-lid {
    background: linear-gradient(175deg,
        #3A3A3C 0%,
        #2C2C2E 20%,
        #242426 60%,
        #1C1C1E 100%) !important;
    border-radius: 11px 11px 0 0 !important;
    border: 1px solid rgba(0,0,0,0.55) !important;
    border-bottom: none !important;
    box-shadow:
        0 -1px 0 rgba(255,255,255,0.12) inset,
        1px 0 0 rgba(255,255,255,0.04) inset,
        -1px 0 0 rgba(255,255,255,0.04) inset !important;
    padding: 7px 7px 0 !important;
}

/* Top edge metallic shine */
.dev-lid::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04),
        rgba(255,255,255,0.18) 25%,
        rgba(255,255,255,0.22) 50%,
        rgba(255,255,255,0.18) 75%,
        rgba(255,255,255,0.04)) !important;
    border-radius: 11px 11px 0 0 !important;
}

/* Camera notch bar */
.dev-cam-bar {
    height: 12px !important;
    background: #1A1A1C !important;
    border-radius: 2px 2px 0 0 !important;
    margin: 0 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.dev-cam-dot {
    width: 4px !important; height: 4px !important;
    background: #3C3C3E !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 4px rgba(50,180,255,0.25) !important;
}

/* Screen — deep black with subtle bezel */
.dev-screen {
    background: #000000 !important;
    border-radius: 0 !important;
    aspect-ratio: 16 / 10 !important;
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.8),
        0 0 20px rgba(139,92,246,0.20),
        0 0 40px rgba(192,55,94,0.10) !important;
    margin: 0 2px !important;
}

/* Screen glass reflection */
.dev-screen::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(135deg,
            rgba(255,255,255,0.05) 0%,
            transparent 35%,
            transparent 65%,
            rgba(0,0,0,0.08) 100%) !important;
    pointer-events: none !important;
    z-index: 300 !important;
    border-radius: 0 !important;
}

/* Hinge — realistic joint */
.dev-hinge {
    height: 7px !important;
    background: linear-gradient(180deg,
        #2A2A2C 0%,
        #1C1C1E 40%,
        #252527 100%) !important;
    position: relative !important;
    overflow: hidden !important;
}
.dev-hinge::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.15) 30%,
        rgba(255,255,255,0.20) 50%,
        rgba(255,255,255,0.15) 70%,
        transparent) !important;
}
.dev-hinge::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    height: 1px !important;
    background: rgba(0,0,0,0.60) !important;
}

/* Base/keyboard area — aluminum */
.dev-base {
    background: linear-gradient(175deg,
        #3C3C3E 0%,
        #2E2E30 25%,
        #262628 70%,
        #1E1E20 100%) !important;
    border-radius: 0 0 11px 11px !important;
    border: 1px solid rgba(0,0,0,0.55) !important;
    border-top: none !important;
    padding: 8px 14px 10px !important;
    box-shadow:
        inset 0 -1px 0 rgba(255,255,255,0.08),
        0 4px 20px rgba(0,0,0,0.30) !important;
}

/* Bottom edge shine on base */
.dev-base::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    height: 1.5px !important;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.02),
        rgba(255,255,255,0.10) 30%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0.10) 70%,
        rgba(255,255,255,0.02)) !important;
    border-radius: 0 0 11px 11px !important;
}

/* Bottom surface reflection under laptop */
.dev-base::after {
    content: '' !important;
    position: absolute !important;
    bottom: -18px !important; left: 5% !important; right: 5% !important;
    height: 18px !important;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.18) 0%, transparent 70%) !important;
    filter: blur(3px) !important;
    z-index: -1 !important;
}

/* Keyboard keys — realistic dark */
.dk {
    width: 12.5px !important; height: 5.5px !important;
    background: linear-gradient(175deg, #3A3A3C 0%, #2C2C2E 100%) !important;
    border-radius: 2px !important;
    border: 0.5px solid rgba(0,0,0,0.50) !important;
    border-bottom: 1.5px solid rgba(0,0,0,0.55) !important;
    box-shadow:
        0 0.5px 0 rgba(255,255,255,0.07) inset,
        0 1px 0 rgba(0,0,0,0.25) !important;
    flex-shrink: 0 !important;
}

/* Trackpad — realistic glass */
.dev-trackpad {
    width: 34% !important;
    height: 12px !important;
    background: linear-gradient(175deg, #2E2E30 0%, #252527 100%) !important;
    border: 0.5px solid rgba(255,255,255,0.06) !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.30) !important;
}

/* Drop shadow around the whole laptop */
.dev-laptop-wrap {
    filter:
        drop-shadow(0 30px 60px rgba(0,0,0,0.28))
        drop-shadow(0 8px 20px rgba(0,0,0,0.18))
        drop-shadow(0 0 0 1px rgba(0,0,0,0.12)) !important;
}

/* =============================================
   ULTRA-REALISTIC CSS TABLET DEVICE
   ============================================= */
.dev-tab-bezel {
    background: linear-gradient(175deg,
        #3A3A3C 0%,
        #2C2C2E 30%,
        #232325 70%,
        #1A1A1C 100%) !important;
    border-radius: 8px 8px 0 0 !important;
    border: 1px solid rgba(0,0,0,0.55) !important;
    border-bottom: none !important;
    box-shadow:
        0 -1px 0 rgba(255,255,255,0.10) inset,
        1px 0 0 rgba(255,255,255,0.04) inset,
        -1px 0 0 rgba(255,255,255,0.04) inset !important;
    padding: 6px 6px 0 !important;
}
.dev-tab-bezel::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.02),
        rgba(255,255,255,0.16) 30%,
        rgba(255,255,255,0.20) 50%,
        rgba(255,255,255,0.16) 70%,
        rgba(255,255,255,0.02)) !important;
    border-radius: 8px 8px 0 0 !important;
}

.dev-tab-top-bar {
    height: 9px !important;
    background: #151517 !important;
    border-radius: 2px 2px 0 0 !important;
    margin: 0 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.dev-tab-cam-dot {
    width: 3.5px !important; height: 3.5px !important;
    background: #2A2A2C !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 0 4px rgba(50,180,255,0.20) !important;
}

.dev-tab-screen {
    background: #000 !important;
    border-radius: 0 !important;
    margin: 0 1px !important;
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.80),
        0 0 20px rgba(139,92,246,0.22),
        0 0 35px rgba(192,55,94,0.08) !important;
}

.dev-tab-kb {
    background: linear-gradient(175deg, #3C3C3E 0%, #2C2C2E 40%, #242426 100%) !important;
    border-radius: 0 0 8px 8px !important;
    border: 1px solid rgba(0,0,0,0.55) !important;
    border-top: 1px solid rgba(0,0,0,0.50) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22) !important;
}

.dtk {
    background: linear-gradient(175deg, #3A3A3C 0%, #2C2C2E 100%) !important;
    border: 0.5px solid rgba(0,0,0,0.50) !important;
    border-bottom: 1.5px solid rgba(0,0,0,0.55) !important;
    box-shadow: 0 0.5px 0 rgba(255,255,255,0.06) inset !important;
}

.dev-tab-trackpad {
    background: linear-gradient(175deg, #2E2E30 0%, #252527 100%) !important;
    border: 0.5px solid rgba(255,255,255,0.06) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.dev-tablet-wrap {
    filter:
        drop-shadow(0 22px 44px rgba(0,0,0,0.28))
        drop-shadow(0 5px 14px rgba(0,0,0,0.18)) !important;
}

/* ─────────────────────────────────────
   NAVBAR — Light theme update
   ───────────────────────────────────── */
.navbar {
    background: rgba(255,255,255,0.82) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(139,92,246,0.12) !important;
    box-shadow: 0 1px 20px rgba(139,92,246,0.08) !important;
}
.nav-links a {
    color: #4A3870 !important;
}
.nav-links a:hover { color: #C0375E !important; }
.hamburger span { background: #4A3870 !important; }
.logo-text { color: #C0375E !important; }

/* ─────────────────────────────────────
   BUTTONS — Light hero compatibility
   ───────────────────────────────────── */

/* Ghost button on light background */
.hero-text .btn-ghost,
.hero-btns .btn-ghost {
    background: rgba(74,45,154,0.07) !important;
    color: #4A2D9A !important;
    border-color: rgba(74,45,154,0.28) !important;
}
.hero-text .btn-ghost:hover,
.hero-btns .btn-ghost:hover {
    background: rgba(74,45,154,0.14) !important;
    border-color: rgba(74,45,154,0.45) !important;
    transform: translateY(-2px) !important;
}

/* ─────────────────────────────────────
   TABLET → iPAD (No keyboard)
   ───────────────────────────────────── */

/* iPad bezel — fully rounded all sides */
.dev-tab-bezel {
    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,0.55) !important;
    border-bottom: 1px solid rgba(0,0,0,0.55) !important;
    padding: 10px 8px 0 !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06) inset,
        0 -1px 0 rgba(255,255,255,0.10) inset !important;
}

/* iPad screen fills the bezel nicely */
.dev-tab-screen {
    border-radius: 2px !important;
    margin: 0 1px !important;
}

/* iPad bottom bezel — no keyboard, just a strip */
.dev-ipad-bottom-bezel {
    height: 22px;
    background: linear-gradient(180deg,
        #2A2A2C 0%,
        #242426 50%,
        #1E1E20 100%);
    border-radius: 0 0 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(0,0,0,0.40);
}

/* iPad Home button (round) */
.dev-ipad-home {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3C3C3E, #2A2A2C);
    border: 0.8px solid rgba(255,255,255,0.12);
    box-shadow: 0 0 0 1.5px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Remove old tablet keyboard styles */
.dev-tab-kb,
.dev-tab-trackpad,
.dev-tab-kb-keys,
.dtk, .dtk-row {
    display: none !important;
}

/* iPad — side button (power) */
.dev-tablet-wrap::before {
    display: none !important;
}
.dev-tablet-wrap .dev-tab-bezel::after {
    content: '' !important;
    position: absolute !important;
    right: -2px !important;
    top: 22% !important;
    width: 2px !important;
    height: 18px !important;
    background: linear-gradient(180deg, #3C3C3E, #2A2A2C) !important;
    border-radius: 0 2px 2px 0 !important;
}

/* iPad overall drop shadow */
.dev-tablet-wrap {
    filter:
        drop-shadow(0 24px 48px rgba(0,0,0,0.32))
        drop-shadow(0 6px 16px rgba(0,0,0,0.20)) !important;
}

/* ─────────────────────────────────────
   iPAD SEAMLESS BODY FIX
   ───────────────────────────────────── */

/* Bezel top only — connects to bottom strip */
.dev-tab-bezel {
    border-radius: 12px 12px 0 0 !important;
    border-bottom: none !important;
    padding: 10px 8px 0 !important;
}

/* Bottom strip same material, seamless */
.dev-ipad-bottom-bezel {
    background: linear-gradient(180deg,
        #2A2A2C 0%,
        #222224 50%,
        #1C1C1E 100%) !important;
    border: 1px solid rgba(0,0,0,0.55) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.28) !important;
}

/* iPad home button */
.dev-ipad-home {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #3C3C3E, #252527) !important;
    border: 0.8px solid rgba(255,255,255,0.12) !important;
    box-shadow:
        0 0 0 1.5px rgba(0,0,0,0.40),
        inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* ══════════════════════════════════════════════════════════════
   REALISTIC MACBOOK KEYBOARD — Full layout
   ══════════════════════════════════════════════════════════════ */

.dev-kb {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    width: 100% !important;
    padding: 0 !important;
}

.dev-kb-row {
    display: flex !important;
    gap: 1px !important;
    width: 100% !important;
    align-items: flex-end !important;
}

/* BASE KEY — silver aluminum */
.dk {
    flex: 1 !important;
    height: 8px !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 4.5px !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif !important;
    font-weight: 500 !important;
    color: #2A2A2C !important;
    background: linear-gradient(175deg, #D5D5D7 0%, #C5C5C7 40%, #BABBBD 100%) !important;
    border-radius: 1.5px !important;
    border: 0.5px solid rgba(0,0,0,0.22) !important;
    border-bottom: 1px solid rgba(0,0,0,0.28) !important;
    box-shadow:
        0 0.5px 0 rgba(255,255,255,0.50) inset,
        0 -0.5px 0 rgba(0,0,0,0.08) inset !important;
    cursor: default !important;
    letter-spacing: 0 !important;
    user-select: none !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Key hover — subtle press effect */
.dk:hover {
    background: linear-gradient(175deg, #E0E0E2 0%, #D0D0D2 100%) !important;
    transform: scale(0.97) !important;
    transition: all 0.08s ease !important;
}

/* Function row — shorter height */
.dk-row-fn { align-items: flex-end !important; }
.dk-row-fn .dk,
.dk-fk {
    height: 5.5px !important;
    font-size: 3.8px !important;
}
.dk-fgap {
    flex: 0.3 !important;
    min-width: 3px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Special widths */
.dk-esc  { flex: 1.1 !important; }
.dk-bs   { flex: 1.5 !important; }
.dk-tab  { flex: 1.5 !important; font-size: 3.8px !important; }
.dk-caps { flex: 1.75 !important; font-size: 3.8px !important; }
.dk-return { flex: 2.2 !important; font-size: 3.8px !important; }
.dk-shl  { flex: 2.2 !important; font-size: 5.5px !important; }
.dk-shr  { flex: 2.8 !important; font-size: 5.5px !important; }

/* Modifier row */
.dk-row-mod .dk { height: 8px !important; }
.dk-mod  { flex: 1.0 !important; font-size: 3.8px !important; }
.dk-opt  { flex: 1.25 !important; font-size: 5px !important; }
.dk-cmd  { flex: 1.6 !important; font-size: 6px !important; }
.dk-space {
    flex: 4.3 !important;
    background: linear-gradient(175deg, #C8C8CA 0%, #B8B8BA 100%) !important;
}
.dk-arr  { flex: 1.0 !important; font-size: 5.5px !important; }

/* Arrow keys stacked ↑↓ */
.dk-arr-col {
    flex: 1.0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5px !important;
}
.dk-arrh {
    flex: 1 !important;
    height: 3.75px !important;
    font-size: 4px !important;
}

/* ══════════════════════════════════════════════════════════════
   SILVER ALUMINUM DEVICE COLORS
   ══════════════════════════════════════════════════════════════ */

/* MacBook lid — brushed silver */
.dev-lid {
    background: linear-gradient(175deg,
        #E2E2E4 0%,
        #D4D4D6 15%,
        #C8C8CA 50%,
        #BEBEBF 85%,
        #B4B4B6 100%) !important;
    border: 1px solid rgba(0,0,0,0.18) !important;
    border-bottom: none !important;
    box-shadow:
        0 -1px 0 rgba(255,255,255,0.80) inset,
        0.5px 0 0 rgba(255,255,255,0.40) inset,
        -0.5px 0 0 rgba(255,255,255,0.40) inset !important;
}

/* Silver top edge shine */
.dev-lid::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.30),
        rgba(255,255,255,0.70) 25%,
        rgba(255,255,255,0.85) 50%,
        rgba(255,255,255,0.70) 75%,
        rgba(255,255,255,0.30)) !important;
    border-radius: 11px 11px 0 0 !important;
}

/* Hinge — silver */
.dev-hinge {
    background: linear-gradient(180deg, #C8C8CA 0%, #B8B8BA 50%, #C2C2C4 100%) !important;
    border-left: 0.5px solid rgba(0,0,0,0.15) !important;
    border-right: 0.5px solid rgba(0,0,0,0.15) !important;
}
.dev-hinge::before {
    background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.60) 30%,
        rgba(255,255,255,0.75) 50%,
        rgba(255,255,255,0.60) 70%,
        transparent) !important;
}
.dev-hinge::after {
    background: rgba(0,0,0,0.12) !important;
}

/* Base / palm rest — silver */
.dev-base {
    background: linear-gradient(175deg,
        #DCDCDE 0%,
        #CECECE 20%,
        #C4C4C6 60%,
        #BABABC 100%) !important;
    border: 1px solid rgba(0,0,0,0.18) !important;
    border-top: none !important;
    box-shadow:
        0 -1px 0 rgba(0,0,0,0.10) inset,
        0 1px 0 rgba(255,255,255,0.70) inset,
        0 6px 24px rgba(0,0,0,0.22) !important;
}
.dev-base::before {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.10),
        rgba(255,255,255,0.40) 30%,
        rgba(255,255,255,0.50) 50%,
        rgba(255,255,255,0.40) 70%,
        rgba(255,255,255,0.10)) !important;
}

/* Trackpad — silver glass */
.dev-trackpad {
    background: linear-gradient(175deg, #D0D0D2 0%, #C0C0C2 100%) !important;
    border: 0.5px solid rgba(0,0,0,0.16) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        0 1px 2px rgba(0,0,0,0.10) !important;
}

/* Full device drop shadow on light background */
.dev-laptop-wrap {
    filter:
        drop-shadow(0 36px 70px rgba(0,0,0,0.22))
        drop-shadow(0 10px 24px rgba(0,0,0,0.14))
        drop-shadow(0 2px 6px rgba(0,0,0,0.08)) !important;
}

/* ── iPad silver ── */
.dev-tab-bezel {
    background: linear-gradient(175deg,
        #E0E0E2 0%,
        #D2D2D4 20%,
        #C6C6C8 60%,
        #BCBCBE 100%) !important;
    border: 1px solid rgba(0,0,0,0.18) !important;
    border-bottom: none !important;
    box-shadow:
        0 -1px 0 rgba(255,255,255,0.70) inset,
        0.5px 0 0 rgba(255,255,255,0.35) inset,
        -0.5px 0 0 rgba(255,255,255,0.35) inset !important;
}
.dev-tab-bezel::before {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.20),
        rgba(255,255,255,0.60) 30%,
        rgba(255,255,255,0.75) 50%,
        rgba(255,255,255,0.60) 70%,
        rgba(255,255,255,0.20)) !important;
}
.dev-ipad-bottom-bezel {
    background: linear-gradient(180deg,
        #CCCCCE 0%,
        #C2C2C4 50%,
        #BABABB 100%) !important;
    border: 1px solid rgba(0,0,0,0.18) !important;
    border-top: none !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.16) !important;
}
.dev-ipad-home {
    background: linear-gradient(135deg, #D4D4D6, #BEBEC0) !important;
    border: 0.8px solid rgba(0,0,0,0.20) !important;
    box-shadow:
        0 0 0 1.5px rgba(255,255,255,0.50),
        inset 0 1px 0 rgba(255,255,255,0.60) !important;
}
.dev-tablet-wrap {
    filter:
        drop-shadow(0 28px 56px rgba(0,0,0,0.22))
        drop-shadow(0 6px 18px rgba(0,0,0,0.14)) !important;
}

/* ══════════════════════════════════════════════════════════════
   AUTO-BROWSE ANIMATION ON SCREEN HOVER
   ══════════════════════════════════════════════════════════════ */

/* ERP dashboard — smooth scroll simulation */
@keyframes erp-auto-scroll {
    0%   { transform: translateY(0); }
    12%  { transform: translateY(0); }
    30%  { transform: translateY(-28%); }
    48%  { transform: translateY(-28%); }
    62%  { transform: translateY(-14%); }
    74%  { transform: translateY(-14%); }
    88%  { transform: translateY(0); }
    100% { transform: translateY(0); }
}

/* Calendar — time grid pan */
@keyframes cal-auto-scroll {
    0%   { transform: translateY(0); }
    15%  { transform: translateY(0); }
    35%  { transform: translateY(-22%); }
    55%  { transform: translateY(-22%); }
    75%  { transform: translateY(0); }
    100% { transform: translateY(0); }
}

/* Scan highlight line */
@keyframes scan-sweep {
    0%   { top: 0%;   opacity: 0; }
    5%   { opacity: 0.7; }
    90%  { opacity: 0.5; }
    100% { top: 100%; opacity: 0; }
}

/* Mouse cursor dot */
@keyframes cursor-move {
    0%   { top: 20%; left: 60%; opacity: 0; }
    10%  { opacity: 1; }
    30%  { top: 45%; left: 35%; }
    55%  { top: 70%; left: 55%; }
    80%  { top: 30%; left: 75%; }
    90%  { opacity: 1; }
    100% { top: 20%; left: 60%; opacity: 0; }
}

/* Activate on screen hover — ERP scroll */
.dev-screen:hover .erp-main {
    animation: erp-auto-scroll 6s ease-in-out infinite !important;
    transition: none !important;
}

/* Activate on screen hover — Calendar scroll */
.dev-tab-screen:hover .cal-grid-area {
    animation: cal-auto-scroll 5s ease-in-out infinite !important;
    transition: none !important;
}

/* Screen glow brightens on hover */
.dev-screen:hover {
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.8),
        0 0 30px rgba(139,92,246,0.45),
        0 0 60px rgba(192,55,94,0.20) !important;
    cursor: pointer !important;
}
.dev-tab-screen:hover {
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.8),
        0 0 25px rgba(139,92,246,0.40),
        0 0 50px rgba(192,55,94,0.15) !important;
    cursor: pointer !important;
}

/* Scan line on ERP screen hover */
.dev-screen {
    position: relative !important;
}
.dev-screen:hover::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important; right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(192,55,94,0.85), rgba(139,92,246,0.85), transparent) !important;
    pointer-events: none !important;
    z-index: 500 !important;
    animation: scan-sweep 4s ease-in-out infinite !important;
}

/* Floating cursor dot on tablet screen hover */
.dev-tab-screen {
    position: relative !important;
}
.dev-tab-screen:hover::after {
    content: "" !important;
    position: absolute !important;
    width: 4px !important;
    height: 4px !important;
    background: rgba(255,255,255,0.90) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 4px rgba(255,255,255,0.80) !important;
    pointer-events: none !important;
    z-index: 500 !important;
    animation: cursor-move 5s ease-in-out infinite !important;
}

/* Tooltip on hover */
.dev-screen::before {
    content: "اضغط للتصفح" !important;
    display: none !important;
}

/* Smooth animation for erp-main overflow */
.erp-main {
    overflow: hidden !important;
    transition: transform 0.8s ease !important;
}


/* ══════════════════════════════════════════════════════════════
   CORRECTED AUTO-BROWSE ANIMATIONS
   Target individual content elements so overflow:hidden works
   ══════════════════════════════════════════════════════════════ */

@keyframes erp-browse {
    0%,10%  { transform: translateY(0);    opacity: 1; }
    28%,44% { transform: translateY(-32%); opacity: 1; }
    62%,76% { transform: translateY(-16%); opacity: 1; }
    94%,100%{ transform: translateY(0);    opacity: 1; }
}

@keyframes cal-browse {
    0%,12%  { transform: translateY(0);    opacity: 1; }
    32%,52% { transform: translateY(-28%); opacity: 1; }
    72%,88% { transform: translateY(0);    opacity: 1; }
    100%    { transform: translateY(0);    opacity: 1; }
}

/* Hover on ERP screen — browse all content panels together */
.dev-screen:hover .erp-topbar,
.dev-screen:hover .erp-kpis,
.dev-screen:hover .erp-charts-row,
.dev-screen:hover .erp-bottom-row {
    animation: erp-browse 6.5s cubic-bezier(0.4,0,0.2,1) infinite !important;
    animation-delay: 0s !important;
}

/* Hover on calendar screen — browse calendar content */
.dev-tab-screen:hover .cal-topbar,
.dev-tab-screen:hover .cal-date-hdr,
.dev-tab-screen:hover .cal-staff-hdr,
.dev-tab-screen:hover .cal-body {
    animation: cal-browse 5.5s cubic-bezier(0.4,0,0.2,1) infinite !important;
}

/* Override the broken erp-main scroll (wrong selector) */
.dev-screen:hover .erp-main {
    animation: none !important;
    overflow: visible !important;
}

/* Keep erp-dash overflow:hidden to clip the scroll */
.erp-dash {
    overflow: hidden !important;
}

/* Pulse animation for KPI cards when hovered */
@keyframes kpi-pulse {
    0%,100% { box-shadow: none; }
    50% { box-shadow: 0 0 8px rgba(192,55,94,0.5); }
}

/* Mini cursor blink on ERP screen hover */
@keyframes cursor-blink {
    0%,45% { opacity: 0; }
    50%,95% { opacity: 1; }
    100%    { opacity: 0; }
}

/* ERP screen hover effects + cursor indicator */
.dev-screen:hover .erp-kpi:nth-child(1) { animation: kpi-pulse 2s ease-in-out 0.5s infinite !important; }
.dev-screen:hover .erp-kpi:nth-child(2) { animation: kpi-pulse 2s ease-in-out 1.0s infinite !important; }
.dev-screen:hover .erp-kpi:nth-child(3) { animation: kpi-pulse 2s ease-in-out 1.5s infinite !important; }
.dev-screen:hover .erp-kpi:nth-child(4) { animation: kpi-pulse 2s ease-in-out 2.0s infinite !important; }

/* Row highlight in appointments table */
@keyframes row-hl {
    0%,100% { background: transparent; }
    50% { background: rgba(139,92,246,0.15); }
}
.dev-screen:hover .erp-appt-t tr:nth-child(1) { animation: row-hl 3s ease 0s infinite !important; }
.dev-screen:hover .erp-appt-t tr:nth-child(2) { animation: row-hl 3s ease 0.75s infinite !important; }
.dev-screen:hover .erp-appt-t tr:nth-child(3) { animation: row-hl 3s ease 1.5s infinite !important; }
.dev-screen:hover .erp-appt-t tr:nth-child(4) { animation: row-hl 3s ease 2.25s infinite !important; }

/* Donut chart spin on hover */
.dev-screen:hover .erp-pie-svg-wrap svg {
    animation: none !important;
}
.dev-screen:hover .erp-pie-svg-wrap {
    animation: spin-slow 8s linear infinite !important;
}
@keyframes spin-slow {
    from { transform: rotate(-90deg); }
    to   { transform: rotate(270deg); }
}

/* Calendar appointment blocks pulse */
@keyframes appt-pulse {
    0%,100% { filter: brightness(1); }
    50% { filter: brightness(1.4); }
}
.dev-tab-screen:hover .cal-ab:nth-child(1) { animation: appt-pulse 2s ease 0s infinite !important; }
.dev-tab-screen:hover .cal-ab:nth-child(2) { animation: appt-pulse 2s ease 0.6s infinite !important; }
.dev-tab-screen:hover .cal-ab:nth-child(3) { animation: appt-pulse 2s ease 1.2s infinite !important; }
.dev-tab-screen:hover .cal-ab:nth-child(4) { animation: appt-pulse 2s ease 1.8s infinite !important; }

/* Tooltip hint */
.dev-screen { cursor: pointer !important; }
.dev-tab-screen { cursor: pointer !important; }


/* KEYBOARD WIDTH FIX — match base padding to lid padding (7px) */
.dev-base { padding: 8px 7px 10px !important; }
.dev-kb   { width: 100% !important; box-sizing: border-box !important; }

/* ══════════════════════════════════════════════════════════════
   TRACKPAD — Realistic Force Touch Glass
   ══════════════════════════════════════════════════════════════ */
.dev-trackpad {
    width: 58% !important;
    height: 20px !important;
    margin: 6px auto 0 !important;
    display: block !important;
    border-radius: 5px !important;
    background: linear-gradient(170deg,
        #D2D2D4 0%, #C6C6C8 30%, #BCBCBE 70%, #B4B4B6 100%) !important;
    border: 0.5px solid rgba(0,0,0,0.16) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -0.5px 0 rgba(0,0,0,0.10),
        inset 1px 0 0 rgba(255,255,255,0.20),
        inset -1px 0 0 rgba(255,255,255,0.20),
        0 2px 6px rgba(0,0,0,0.12) !important;
    position: relative !important;
    overflow: hidden !important;
}
/* top-half glass sheen */
.dev-trackpad::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 50% !important;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 100%) !important;
    border-radius: 5px 5px 0 0 !important;
    pointer-events: none !important;
}
/* subtle click line at bottom */
.dev-trackpad::after {
    content: "" !important;
    position: absolute !important;
    bottom: 3px !important; left: 30% !important; right: 30% !important;
    height: 0.5px !important;
    background: rgba(0,0,0,0.12) !important;
    border-radius: 1px !important;
}

/* ══════════════════════════════════════════════════════════════
   ERP DASHBOARD — LIGHT THEME
   ══════════════════════════════════════════════════════════════ */

/* Main app shell */
.erp-dash {
    background: #F7F5FF !important;
    overflow: hidden !important;
}

/* Sidebar — soft lavender */
.erp-sb {
    background: linear-gradient(180deg, #F0ECFF 0%, #E8E2FF 100%) !important;
    border-right: 1px solid rgba(139,92,246,0.12) !important;
    min-width: 30px !important;
}
.erp-sb-logo   { color: #7B5CF6 !important; }
.erp-sb-logo-ic {
    background: linear-gradient(135deg,#7B5CF6,#C0375E) !important;
    box-shadow: 0 2px 6px rgba(192,55,94,0.35) !important;
}
.erp-sb-item   { color: #5B4A8A !important; }
.erp-sb-active {
    background: rgba(139,92,246,0.14) !important;
    color: #7B5CF6 !important;
    border-radius: 3px !important;
}
.esbi-ic { color: inherit !important; }

/* Top bar */
.erp-topbar {
    background: #FFFFFF !important;
    border-bottom: 1px solid rgba(139,92,246,0.08) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}
.erp-topbar * { color: #3A2E6A !important; }

/* KPI cards */
.erp-kpis {
    background: transparent !important;
    flex-shrink: 0 !important;
}
.erp-kpi {
    background: #FFFFFF !important;
    border: 1px solid rgba(139,92,246,0.10) !important;
    box-shadow: 0 2px 10px rgba(139,92,246,0.09) !important;
}
.erp-kpi-lbl, .erp-kpi-hdr span { color: #8878B8 !important; }
.erp-kpi-val { color: #1C1030 !important; font-weight: 700 !important; }
.erp-kpi-badge {
    border: 1px solid rgba(14,159,135,0.25) !important;
    color: #0E9F87 !important;
    background: rgba(14,159,135,0.08) !important;
}
/* Keep each KPI accent color via top border */
.erp-kpi:nth-child(1) { border-top: 2px solid #C0375E !important; }
.erp-kpi:nth-child(2) { border-top: 2px solid #7B5CF6 !important; }
.erp-kpi:nth-child(3) { border-top: 2px solid #0E9F87 !important; }
.erp-kpi:nth-child(4) { border-top: 2px solid #E8A838 !important; }

/* Chart cards */
.erp-charts-row { flex-shrink: 0 !important; }
.erp-chart-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(139,92,246,0.09) !important;
    box-shadow: 0 2px 8px rgba(139,92,246,0.07) !important;
}
.erp-chart-title, .erp-chart-val { color: #1C1030 !important; }
.erp-see-all { color: #C0375E !important; }

/* Area chart axis labels */
.erp-area-svg text { fill: rgba(74,46,122,0.40) !important; }
/* Area chart fill gradient — update to lighter purple */
.erp-area-svg stop:first-child { stop-color: rgba(192,55,94,0.28) !important; }
.erp-area-svg stop:last-child  { stop-color: rgba(192,55,94,0.01) !important; }

/* Donut center hole — match light bg */
.erp-pie-svg-wrap circle[fill="#0A051E"] { fill: #FFFFFF !important; }

/* Pie legend */
.erp-pie-item { color: #5B4A8A !important; }

/* Bottom row */
.erp-bottom-row { flex-shrink: 0 !important; }

/* Appointments table */
.erp-appt-t tr { border-bottom: 1px solid rgba(139,92,246,0.06) !important; }
.eat-name  { color: #1C1030 !important; font-weight: 600 !important; }
.eat-svc   { color: #8878B8 !important; }
.eat-time  { color: #4A3870 !important; }
.eat-badge { font-weight: 600 !important; }
.eat-done  { background: rgba(14,159,135,0.12) !important; color: #0E9F87 !important; }
.eat-live  { background: rgba(192,55,94,0.12) !important; color: #C0375E !important; }
.eat-next  { background: rgba(139,92,246,0.12) !important; color: #7B5CF6 !important; }

/* Staff list */
.erp-si-nm  { color: #1C1030 !important; }
.erp-si-bar { background: rgba(139,92,246,0.10) !important; }
.erp-si-pct { color: #4A3870 !important; }

/* Scrollable content: prevent shrink so panels overflow screen height */
.erp-main {
    overflow: hidden !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}
.erp-topbar    { flex-shrink: 0 !important; }
.erp-kpis      { flex-shrink: 0 !important; }
.erp-charts-row{ flex-shrink: 0 !important; }
.erp-bottom-row{ flex-shrink: 0 !important; }

/* ══════════════════════════════════════════════════════════════
   CALENDAR — LIGHT THEME
   ══════════════════════════════════════════════════════════════ */

.cal-app {
    background: #FFFFFF !important;
    color: #1C1030 !important;
}
.cal-topbar {
    background: #FAFAFA !important;
    border-bottom: 1px solid rgba(139,92,246,0.10) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}
.cal-t-title   { color: #1C1030 !important; }
.cal-btn-new   {
    background: linear-gradient(135deg,#C0375E,#7B5CF6) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(192,55,94,0.35) !important;
}
.cal-tab       { color: #8878B8 !important; background: transparent !important; }
.cal-tab-on    {
    background: rgba(139,92,246,0.12) !important;
    color: #7B5CF6 !important;
    border-radius: 3px !important;
}
.cal-date-hdr  {
    background: #F5F2FF !important;
    border-bottom: 1px solid rgba(139,92,246,0.10) !important;
}
.cal-date-str  { color: #1C1030 !important; }
.cal-nav-btn   { color: #7B5CF6 !important; background: rgba(139,92,246,0.08) !important; }

/* Staff header row */
.cal-staff-hdr { background: #F9F7FF !important; border-bottom: 1px solid rgba(139,92,246,0.08) !important; }
.cal-sc-nm     { color: #1C1030 !important; }
.cal-sc-role   { color: #8878B8 !important; }
.cal-stats-col-hdr { background: #F0ECFF !important; border-right: 1px solid rgba(139,92,246,0.10) !important; }

/* Time grid */
.cal-body      { background: #FFFFFF !important; }
.cal-times     { color: #B0A8C8 !important; background: #F9F7FF !important; border-right: 1px solid rgba(139,92,246,0.08) !important; }
.cal-col       { border-right: 1px solid rgba(139,92,246,0.06) !important; }
.cal-time-col-ph { background: #F9F7FF !important; }

/* Stats sidebar */
.cal-stats-col-body { background: #F5F2FF !important; }
.cal-stat-item { border-bottom: 1px solid rgba(139,92,246,0.08) !important; }
.cal-si-l      { color: #8878B8 !important; }
.cal-si-n      { font-weight: 700 !important; color: #1C1030 !important; }

/* Mini calendar */
.cal-mini-month { background: rgba(139,92,246,0.05) !important; border-radius: 4px !important; }
.cal-mm-title  { color: #4A3870 !important; }
.cal-mm-dows span { color: #B0A8C8 !important; }
.cal-mm-grid span { color: #4A3870 !important; }
.cal-mm-today  {
    background: #C0375E !important;
    color: #FFFFFF !important;
    border-radius: 50% !important;
}

/* Appointment blocks — keep vivid colors, just ensure text is white */
.cal-ab-nm { color: #FFFFFF !important; }
.cal-ab-sv { color: rgba(255,255,255,0.85) !important; }

/* ══════════════════════════════════════════════════════════════
   DONUT CHART CENTER — update fill for light theme
   ══════════════════════════════════════════════════════════════ */
.erp-pie-svg-wrap svg circle:last-child { fill: #FFFFFF !important; }

/* Spark bars in KPIs — updated colors */
.erp-spark rect { fill: rgba(139,92,246,0.20) !important; }
.erp-spark rect:last-child { fill: #7B5CF6 !important; }


/* ╔══════════════════════════════════════════════════════════════╗
   ║         KEYBOARD MEGA UPGRADE — Photo-Realistic 3D          ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* KEY BED — recessed dark tray holding all keys */
.dev-kb {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #9A9A9C !important;        /* dark aluminum tray */
    border-radius: 4px !important;
    padding: 1.5px !important;
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.22),  /* recessed look */
        inset 0 0 0 0.5px rgba(0,0,0,0.16) !important;
}

.dev-kb-row {
    display: flex !important;
    gap: 0 !important;
    width: 100% !important;
    align-items: flex-end !important;
    padding: 0.5px 0 !important;
}

/* ─────────────────── BASE KEY — 3D Silver ─────────────────── */
.dk {
    flex: 1 !important;
    height: 10px !important;
    min-width: 0 !important;
    margin: 0 0.6px !important;
    box-sizing: border-box !important;
    position: relative !important;

    /* Center label */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Typography */
    font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 4.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #1A1A1C !important;
    letter-spacing: 0 !important;
    user-select: none !important;

    /* Key surface — gradient light-to-dark top-to-bottom */
    background: linear-gradient(180deg,
        #E6E6E8 0%,     /* top: brightest (catches overhead light) */
        #DCDCDE 25%,    /* upper face */
        #D4D4D6 65%,    /* main face */
        #CACACA 100%    /* bottom: slightly darker */
    ) !important;

    /* Realistic 3D shape */
    border-radius: 2.5px !important;
    border-top:    0.5px solid rgba(255,255,255,0.85) !important;   /* top highlight edge */
    border-left:   0.5px solid rgba(255,255,255,0.50) !important;   /* left catch */
    border-right:  0.5px solid rgba(0,0,0,0.14) !important;         /* right shadow */
    border-bottom: 2.5px solid rgba(0,0,0,0.30) !important;         /* KEY DEPTH ← main 3D effect */

    /* Subtle top-surface inner light */
    box-shadow:
        0 0.5px 0 rgba(255,255,255,0.60) inset,
        0 -0.5px 0 rgba(0,0,0,0.06) inset,
        0 1px 2px rgba(0,0,0,0.10) !important;   /* key shadow on bed */

    cursor: default !important;
    transition: transform 0.06s ease, box-shadow 0.06s ease, border-bottom-width 0.06s ease !important;
}

/* KEY PRESS — physically moves down */
.dk:hover {
    background: linear-gradient(180deg,
        #DCDCDE 0%, #D0D0D2 40%, #C8C8CA 100%) !important;
    border-bottom-width: 1px !important;     /* depth shrinks = pressed */
    transform: translateY(1.5px) !important; /* key physically moves down */
    box-shadow:
        0 0.5px 0 rgba(255,255,255,0.45) inset,
        0 0 1px rgba(0,0,0,0.08) !important;
}

/* ── FUNCTION ROW — shorter, slimmer keys ── */
.dk-row-fn { padding: 0.5px 0 0.3px !important; }

.dk-row-fn .dk, .dk-fk {
    height: 6.5px !important;
    font-size: 3.5px !important;
    border-bottom-width: 1.5px !important;
}
.dk-row-fn .dk:hover {
    border-bottom-width: 0.5px !important;
    transform: translateY(1px) !important;
}

/* Gap markers between F-key groups */
.dk-fgap {
    flex: 0.35 !important;
    min-width: 4px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* ── WIDE SPECIAL KEYS — override flex ── */
.dk-esc    { flex: 1.12 !important; }
.dk-bs     { flex: 1.55 !important; }                              /* Backspace / backslash */
.dk-tab    { flex: 1.55 !important; font-size: 3.8px !important; }
.dk-caps   { flex: 1.80 !important; font-size: 3.8px !important; }
.dk-return { flex: 2.25 !important; font-size: 3.8px !important; }
.dk-shl    { flex: 2.30 !important; font-size: 5.5px !important; }
.dk-shr    { flex: 2.85 !important; font-size: 5.5px !important; }

/* CAPS LOCK indicator dot */
.dk-caps::after {
    content: "" !important;
    position: absolute !important;
    left: 2.5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 2px !important; height: 2px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.18) !important;
}

/* ── MODIFIER ROW ── */
.dk-row-mod .dk { height: 10px !important; }
.dk-mod  { flex: 1.00 !important; font-size: 3.8px !important; }
.dk-opt  { flex: 1.25 !important; font-size: 5.5px !important; }
.dk-cmd  { flex: 1.62 !important; font-size: 6.5px !important; }

/* Spacebar — same 3D treatment but flatter surface */
.dk-space {
    flex: 4.35 !important;
    background: linear-gradient(180deg,
        #E0E0E2 0%, #D6D6D8 30%, #CCCCCE 100%) !important;
    border-bottom-width: 2.5px !important;
}
.dk-space:hover {
    background: linear-gradient(180deg, #D4D4D6 0%, #CCCCCE 100%) !important;
    border-bottom-width: 1px !important;
    transform: translateY(1.5px) !important;
}

/* Arrow keys */
.dk-arr  { flex: 1.00 !important; font-size: 5.5px !important; }

.dk-arr-col {
    flex: 1.00 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5px !important;
    margin: 0 0.6px !important;
}
.dk-arrh {
    flex: 1 !important;
    height: 4.75px !important;
    margin: 0 !important;
    font-size: 4px !important;
    background: linear-gradient(180deg, #E2E2E4 0%, #D4D4D6 100%) !important;
    border-radius: 1.5px !important;
    border-top:   0.5px solid rgba(255,255,255,0.80) !important;
    border-left:  0.5px solid rgba(255,255,255,0.45) !important;
    border-right: 0.5px solid rgba(0,0,0,0.12) !important;
    border-bottom: 1.5px solid rgba(0,0,0,0.28) !important;
    box-shadow: 0 0.5px 0 rgba(255,255,255,0.55) inset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1A1A1C !important;
    font-family: -apple-system, "SF Pro Text", sans-serif !important;
    font-weight: 500 !important;
    user-select: none !important;
    box-sizing: border-box !important;
    transition: transform 0.06s ease, border-bottom-width 0.06s ease !important;
}
.dk-arrh:hover {
    transform: translateY(1px) !important;
    border-bottom-width: 0.5px !important;
}

/* ── TRACKPAD UPGRADE — bigger & more realistic ── */
.dev-trackpad {
    width: 62% !important;
    height: 22px !important;
    margin: 6px auto 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    border-radius: 5px !important;

    /* Glass-like surface matching the base aluminum */
    background: linear-gradient(170deg,
        #D6D6D8 0%,
        #CACACA 35%,
        #C2C2C4 70%,
        #BABABB 100%) !important;

    border-top:    0.5px solid rgba(255,255,255,0.65) !important;
    border-left:   0.5px solid rgba(255,255,255,0.40) !important;
    border-right:  0.5px solid rgba(0,0,0,0.14) !important;
    border-bottom: 0.5px solid rgba(0,0,0,0.18) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),     /* top-surface sheen */
        inset 0 -0.5px 0 rgba(0,0,0,0.08),
        0 1px 4px rgba(0,0,0,0.12) !important;

    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: box-shadow 0.12s ease !important;
}

/* Top-half glass reflection */
.dev-trackpad::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 45% !important;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.25) 0%,
        rgba(255,255,255,0.05) 100%) !important;
    border-radius: 5px 5px 0 0 !important;
    pointer-events: none !important;
}

/* Physical click line */
.dev-trackpad::after {
    content: "" !important;
    position: absolute !important;
    bottom: 4px !important;
    left: 25% !important; right: 25% !important;
    height: 0.5px !important;
    background: rgba(0,0,0,0.10) !important;
    border-radius: 1px !important;
    pointer-events: none !important;
}

/* Trackpad click effect */
.dev-trackpad:hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 1px 3px rgba(0,0,0,0.08),
        0 0.5px 2px rgba(0,0,0,0.10) !important;
}

/* ══════════════════════════════════════════════════════════════
   APPLE MAC IMAGE — replaces CSS laptop
   ══════════════════════════════════════════════════════════════ */

.mac-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    filter:
        drop-shadow(0 40px 80px rgba(0,0,0,0.22))
        drop-shadow(0 10px 28px rgba(0,0,0,0.14));
}

.mac-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Adjust the devices-scene so iPad overlaps mac image correctly */
.devices-scene {
    position: relative !important;
    padding-bottom: 10% !important;
}

/* iPad sits lower-right overlapping the mac */
.dev-tablet-wrap {
    position: absolute !important;
    bottom: -2% !important;
    right: -8% !important;
    width: 46% !important;
    z-index: 10 !important;
}

/* ══════════════════════════════════════════════════════════════
   iMAC SCREEN OVERLAY — positions ERP on the monitor screen
   ══════════════════════════════════════════════════════════════ */

.mac-wrap {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    filter:
        drop-shadow(0 40px 80px rgba(0,0,0,0.20))
        drop-shadow(0 12px 30px rgba(0,0,0,0.12)) !important;
}

.mac-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Screen area on the iMac image:
   top≈5%  left≈7%  width≈86%  height≈62%  */
.mac-screen-overlay {
    position: absolute !important;
    top: 5% !important;
    left: 7% !important;
    width: 86% !important;
    height: 62% !important;
    overflow: hidden !important;
    z-index: 1 !important;       /* behind the mac frame */
    border-radius: 2px !important;
}

/* ERP dash fills the overlay 100% */
.mac-screen-overlay .erp-dash {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* ── Scale up ERP text for the larger iMac screen ── */
.mac-screen-overlay .erp-sb {
    min-width: 52px !important;
    max-width: 52px !important;
    padding: 6px 4px !important;
}
.mac-screen-overlay .erp-sb-logo {
    font-size: 7px !important;
    margin-bottom: 8px !important;
}
.mac-screen-overlay .erp-sb-logo-ic {
    width: 12px !important;
    height: 12px !important;
    font-size: 7px !important;
    margin-left: 3px !important;
}
.mac-screen-overlay .erp-sb-item {
    font-size: 6.5px !important;
    padding: 3px 4px !important;
    margin-bottom: 1.5px !important;
    border-radius: 3px !important;
}
.mac-screen-overlay .esbi-ic {
    font-size: 7px !important;
    margin-left: 3px !important;
}

/* Topbar */
.mac-screen-overlay .erp-topbar {
    padding: 5px 8px !important;
    font-size: 7px !important;
    min-height: 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* KPIs */
.mac-screen-overlay .erp-kpis {
    gap: 5px !important;
    padding: 5px 6px !important;
}
.mac-screen-overlay .erp-kpi {
    padding: 5px 6px !important;
    border-radius: 5px !important;
}
.mac-screen-overlay .erp-kpi-lbl {
    font-size: 5.5px !important;
}
.mac-screen-overlay .erp-kpi-badge {
    font-size: 5px !important;
    padding: 1px 3px !important;
}
.mac-screen-overlay .erp-kpi-val {
    font-size: 11px !important;
    font-weight: 700 !important;
    margin: 3px 0 2px !important;
}
.mac-screen-overlay .erp-spark {
    height: 12px !important;
    margin-top: 2px !important;
}

/* Charts */
.mac-screen-overlay .erp-charts-row {
    gap: 5px !important;
    padding: 0 6px 4px !important;
}
.mac-screen-overlay .erp-chart-card {
    padding: 5px 6px !important;
    border-radius: 5px !important;
}
.mac-screen-overlay .erp-chart-hdr {
    margin-bottom: 4px !important;
}
.mac-screen-overlay .erp-chart-title {
    font-size: 6.5px !important;
}
.mac-screen-overlay .erp-chart-val {
    font-size: 6px !important;
}
.mac-screen-overlay .erp-area-svg {
    height: 45px !important;
}

/* Donut */
.mac-screen-overlay .erp-pie-svg-wrap {
    width: 46px !important;
    height: 46px !important;
}
.mac-screen-overlay .erp-pie-legend {
    gap: 2.5px !important;
}
.mac-screen-overlay .erp-pie-item {
    font-size: 5.5px !important;
}
.mac-screen-overlay .erp-pie-item span {
    width: 5px !important;
    height: 5px !important;
}

/* Bottom row */
.mac-screen-overlay .erp-bottom-row {
    padding: 0 6px 5px !important;
    gap: 5px !important;
}
.mac-screen-overlay .eat-name {
    font-size: 6px !important;
}
.mac-screen-overlay .eat-svc {
    font-size: 5.5px !important;
}
.mac-screen-overlay .eat-time {
    font-size: 5.5px !important;
}
.mac-screen-overlay .eat-badge {
    font-size: 5px !important;
    padding: 1px 3px !important;
}
.mac-screen-overlay .erp-si {
    margin-bottom: 3px !important;
}
.mac-screen-overlay .erp-si-av {
    width: 12px !important;
    height: 12px !important;
    font-size: 6px !important;
    margin-left: 4px !important;
}
.mac-screen-overlay .erp-si-nm {
    font-size: 6px !important;
}
.mac-screen-overlay .erp-si-bar {
    height: 3px !important;
    margin-top: 2px !important;
}
.mac-screen-overlay .erp-si-pct {
    font-size: 6px !important;
}
.mac-screen-overlay .erp-see-all {
    font-size: 5.5px !important;
}

/* Glass shine overlay on top of ERP (z-index above overlay) */
.mac-screen-overlay::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0.08) 25%,
        transparent 55%
    ) !important;
    pointer-events: none !important;
    z-index: 999 !important;
    border-radius: 2px !important;
}

/* Auto-browse on hover — ERP inside iMac */
.mac-screen-overlay:hover .erp-topbar,
.mac-screen-overlay:hover .erp-kpis,
.mac-screen-overlay:hover .erp-charts-row,
.mac-screen-overlay:hover .erp-bottom-row {
    animation: erp-browse 6.5s cubic-bezier(0.4,0,0.2,1) infinite !important;
}
.mac-screen-overlay { cursor: pointer !important; }

/* Devices scene — ensure good layout with the image */
.devices-scene {
    position: relative !important;
    padding-bottom: 8% !important;
    min-height: auto !important;
}

/* ─────────────────────────────────────
   ERP SIDEBAR LOGO IMAGE
   ───────────────────────────────────── */
.erp-sb-logo-img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
}
.erp-sb-logo-ic { display: none !important; }

/* ─────────────────────────────────────
   PRICING SECTION
   ───────────────────────────────────── */
.pricing-section {
    padding: 80px 0;
    background: linear-gradient(160deg, #F8F5FF 0%, #FFFFFF 100%);
}
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1.12fr 1fr;
    gap: 24px;
    margin-top: 48px;
    align-items: start;
}
.price-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 32px 24px;
    border: 1.5px solid rgba(139,92,246,0.14);
    box-shadow: 0 4px 20px rgba(139,92,246,0.07);
    text-align: center;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(139,92,246,0.14);
}
.price-card-featured {
    border-color: #7B5CF6;
    border-width: 2px;
    box-shadow: 0 8px 40px rgba(123,92,246,0.22);
    background: linear-gradient(160deg, #FDFBFF 0%, #F5F0FF 100%);
}
.price-badge {
    position: absolute;
    top: -14px;
    right: 50%;
    transform: translateX(50%);
    background: linear-gradient(135deg, #C0375E, #7B5CF6);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 20px;
    white-space: nowrap;
}
.price-badge-empty { height: 20px; }
.price-plan-name {
    font-size: 18px;
    font-weight: 700;
    color: #1C1030;
    margin-bottom: 16px;
    margin-top: 8px;
}
.price-val {
    font-size: 42px;
    font-weight: 900;
    color: #1C1030;
    line-height: 1;
    margin-bottom: 6px;
}
.price-currency {
    font-size: 18px;
    font-weight: 700;
    vertical-align: super;
    color: #7B5CF6;
}
.price-per {
    font-size: 16px;
    font-weight: 400;
    color: #7B7094;
}
.price-daily {
    font-size: 13px;
    color: #9C8EC0;
    margin-bottom: 24px;
}
.price-daily strong { color: #C0375E; }
.price-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    text-align: right;
}
.price-features li {
    font-size: 13.5px;
    color: #3A2F5C;
    padding: 6px 0;
    border-bottom: 1px solid rgba(139,92,246,0.07);
}
.price-features li.muted {
    color: #C0B8D4;
}
.btn-outline-plan {
    display: inline-block;
    width: 100%;
    padding: 12px 24px;
    border-radius: 10px;
    border: 2px solid rgba(139,92,246,0.35);
    color: #7B5CF6;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    background: transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    font-family: 'Tajawal', sans-serif;
}
.btn-outline-plan:hover {
    background: rgba(123,92,246,0.06);
    border-color: #7B5CF6;
}
.price-card-featured .btn { width: 100%; }
.pricing-note {
    text-align: center;
    color: #7B7094;
    font-size: 13px;
    margin-top: 32px;
}
@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin-left: auto;
        margin-right: auto;
    }
    .price-card-featured { order: -1; }
}

/* ─────────────────────────────────────
   FREE REPORT — GIFT SECTION
   ───────────────────────────────────── */
.gift-section {
    background: linear-gradient(155deg, #fffaf6 0%, #f5ece0 50%, #fffbf7 100%);
    padding: clamp(72px, 9vw, 110px) 0 clamp(80px, 10vw, 120px);
    position: relative;
    overflow: hidden;
    scroll-margin-top: 70px;
}
.gift-bg-decor {
    position: absolute;
    top: -30%;
    left: -5%;
    width: 55%;
    aspect-ratio: 1;
    background: radial-gradient(ellipse, rgba(198,162,111,0.13) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.gift-bg-decor::after {
    content: '';
    position: absolute;
    bottom: -40%;
    right: -20%;
    width: 50%;
    aspect-ratio: 1;
    background: radial-gradient(ellipse, rgba(184,111,82,0.10) 0%, transparent 65%);
}
.gift-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
    position: relative;
    z-index: 1;
}
.gift-content { direction: rtl; }
.gift-heading {
    font-size: clamp(24px, 3vw, 40px);
    line-height: 1.38;
    color: #2f1d17;
    margin-bottom: 18px;
}
.gift-desc {
    font-size: clamp(14px, 1.45vw, 17px);
    color: #6a5145;
    line-height: 1.85;
    margin-bottom: 28px;
}
.gift-free-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(184,111,82,0.09);
    border: 1px solid rgba(184,111,82,0.20);
    color: #8f4f38;
    border-radius: 100px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 28px;
}
.gift-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 34px;
}
.gift-benefit {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: rgba(255,253,249,0.92);
    border: 1px solid rgba(184,111,82,0.12);
    border-radius: 16px;
    padding: 15px;
    direction: rtl;
    text-align: right;
    transition: box-shadow 220ms ease, transform 220ms ease;
}
.gift-benefit:hover {
    box-shadow: 0 6px 20px rgba(184,111,82,0.10);
    transform: translateY(-1px);
}
.gb-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(184,111,82,0.11);
    color: #b86f52;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gb-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #2f1d17;
    display: block;
    margin-bottom: 3px;
}
.gb-desc {
    font-size: 12px;
    color: #75594c;
    line-height: 1.6;
}
.gift-cta-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    direction: rtl;
}
.gift-primary-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #b86f52, #9e5038);
    color: #fffdf9;
    border: none;
    border-radius: 100px;
    padding: 14px 26px;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(184,111,82,0.30);
    transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
    direction: rtl;
    text-decoration: none;
}
.gift-primary-cta:hover {
    background: linear-gradient(135deg, #a05840, #8b4230);
    transform: translateY(-2px);
    box-shadow: 0 14px 38px rgba(184,111,82,0.40);
}
.gift-primary-cta svg { transition: transform 220ms ease; flex-shrink: 0; }
.gift-primary-cta:hover svg { transform: translateX(-3px); }
.gift-secondary-cta {
    background: transparent;
    border: 1px solid rgba(184,111,82,0.28);
    color: #8f4f38;
    border-radius: 100px;
    padding: 13px 20px;
    font-family: 'Tajawal', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 220ms ease, border-color 220ms ease;
}
.gift-secondary-cta:hover {
    background: rgba(184,111,82,0.07);
    border-color: rgba(184,111,82,0.48);
}
.gift-delivery-note {
    font-size: 12.5px;
    color: #8a7268;
    display: flex;
    align-items: center;
    gap: 6px;
    direction: rtl;
    margin-bottom: 22px;
}
.gift-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    direction: rtl;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #6a5145;
    font-weight: 600;
}
.trust-item svg { color: rgba(184,111,82,0.55); flex-shrink: 0; }
/* ── Report preview ── */
.gift-preview-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}
.report-preview {
    position: relative;
    width: 310px;
    height: 410px;
    animation: reportFloat 6s ease-in-out infinite;
}
@keyframes reportFloat {
    0%, 100% { transform: translateY(0px) rotate(0.3deg); }
    50%       { transform: translateY(-10px) rotate(-0.3deg); }
}
.report-sheet {
    position: absolute;
    border-radius: 16px;
    background: #fffdf9;
}
.report-sheet--back {
    width: 90%;
    height: 91%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(-5.5deg);
    background: linear-gradient(135deg, #f0e4d6, #e8d8c8);
    opacity: 0.65;
    box-shadow: 0 12px 40px rgba(86,57,42,0.10);
}
.report-sheet--middle {
    width: 94%;
    height: 95%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    background: linear-gradient(135deg, #faf2ea, #f2e8de);
    opacity: 0.82;
    box-shadow: 0 16px 45px rgba(86,57,42,0.10);
}
.report-sheet--front {
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    direction: rtl;
    background: linear-gradient(160deg, #fffdf9 0%, #fdf5ee 100%);
    border: 1px solid rgba(184,111,82,0.16);
    box-shadow: 0 24px 60px rgba(86,57,42,0.14);
}
.report-cover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.report-brand {
    font-size: 10px;
    font-weight: 800;
    color: #b86f52;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.report-free-badge {
    background: linear-gradient(135deg, #b86f52, #c4835f);
    color: #fffdf9;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 11px;
    border-radius: 100px;
    box-shadow: 0 3px 10px rgba(184,111,82,0.35);
}
.report-cover-body { margin-bottom: 12px; }
.report-kicker {
    font-size: 9px;
    font-weight: 700;
    color: rgba(184,111,82,0.55);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 5px;
}
.report-title {
    font-size: 17px;
    font-weight: 900;
    color: #2f1d17;
    line-height: 1.3;
    margin-bottom: 3px;
}
.report-subtitle { font-size: 11px; color: #75594c; margin-bottom: 3px; }
.report-meta { font-size: 9.5px; color: rgba(117,89,76,0.55); }
.report-divider-line {
    height: 1px;
    background: rgba(184,111,82,0.13);
    margin: 10px 0;
}
.report-metrics {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 12px;
}
.rm-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 7px;
    direction: rtl;
}
.rm-label { font-size: 10.5px; color: #6a5145; font-weight: 600; }
.rm-bar {
    width: 75px;
    height: 5px;
    background: rgba(184,111,82,0.13);
    border-radius: 100px;
    overflow: hidden;
}
.rm-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(184,111,82,0.45), rgba(184,111,82,0.75));
    border-radius: 100px;
}
.rm-fill--mid { background: linear-gradient(90deg, rgba(198,162,111,0.55), rgba(198,162,111,0.80)); }
.rm-fill--good { background: linear-gradient(90deg, rgba(184,111,82,0.65), #b86f52); }
.rm-val { font-size: 10px; font-weight: 800; color: #b86f52; min-width: 26px; text-align: center; }
.report-reco {
    background: rgba(184,111,82,0.07);
    border: 1px solid rgba(184,111,82,0.14);
    border-radius: 10px;
    padding: 9px 12px;
    direction: rtl;
}
.report-reco-label {
    font-size: 9px;
    font-weight: 700;
    color: rgba(184,111,82,0.65);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
}
.report-reco-text { font-size: 11px; font-weight: 700; color: #4a3025; }
/* ── Gift modal ── */
.gift-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.gift-modal[hidden] { display: none; }
.gift-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(30,15,10,0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.gift-modal-box {
    position: relative;
    z-index: 1;
    background: #fffdf9;
    border-radius: 24px;
    padding: 36px 32px;
    max-width: 620px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 32px 80px rgba(86,57,42,0.22);
    direction: rtl;
    border: 1px solid rgba(184,111,82,0.16);
}
.gift-modal-close {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(184,111,82,0.18);
    background: rgba(248,242,235,0.90);
    color: #8f4f38;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 200ms ease;
}
.gift-modal-close:hover { background: rgba(184,111,82,0.13); }
.gm-title { font-size: 21px; font-weight: 900; color: #2f1d17; margin-bottom: 5px; }
.gm-sub { font-size: 13.5px; color: #75594c; margin-bottom: 24px; line-height: 1.6; }
.gift-form { display: flex; flex-direction: column; gap: 14px; }
.gf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gf-field { display: flex; flex-direction: column; gap: 5px; }
.gf-field--full { grid-column: 1 / -1; }
.gf-field label { font-size: 12.5px; font-weight: 700; color: #4a3228; direction: rtl; }
.gf-req { color: #b86f52; }
.gf-field input,
.gf-field select,
.gf-field textarea {
    border: 1px solid rgba(184,111,82,0.22);
    border-radius: 12px;
    padding: 10px 13px;
    font-family: 'Tajawal', sans-serif;
    font-size: 14px;
    color: #2f1d17;
    background: #fffdf9;
    direction: rtl;
    transition: border-color 200ms ease, box-shadow 200ms ease;
    outline: none;
    width: 100%;
}
.gf-field input:focus,
.gf-field select:focus,
.gf-field textarea:focus {
    border-color: rgba(184,111,82,0.55);
    box-shadow: 0 0 0 3px rgba(184,111,82,0.11);
}
.gf-field textarea { resize: vertical; min-height: 78px; }
.gf-error-msg {
    background: rgba(180,50,50,0.08);
    border: 1px solid rgba(180,50,50,0.20);
    color: #a33;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    direction: rtl;
}
.gf-error-msg[hidden] { display: none; }
.gift-submit-btn { width: 100%; justify-content: center; padding: 15px 32px; font-size: 15.5px; }
.gf-privacy {
    font-size: 11.5px;
    color: #8a7268;
    display: flex;
    align-items: center;
    gap: 5px;
    direction: rtl;
    justify-content: center;
    margin-top: -2px;
}
.gift-success { text-align: center; padding: 20px 0; }
.gift-success[hidden] { display: none; }
.gift-success-icon {
    width: 64px;
    height: 64px;
    background: rgba(184,111,82,0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    color: #b86f52;
}
.gift-success h3 { font-size: 21px; font-weight: 900; color: #2f1d17; margin-bottom: 10px; }
.gift-success p { font-size: 14.5px; color: #6a5145; line-height: 1.75; margin-bottom: 22px; }
/* Entrance animations */
.gift-content .section-tag,
.gift-content .gift-heading,
.gift-content .gift-desc,
.gift-content .gift-free-label,
.gift-content .gift-benefits,
.gift-content .gift-cta-wrap,
.gift-content .gift-delivery-note,
.gift-content .gift-trust,
.gift-preview-col {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.gift-section.gift-visible .gift-content .section-tag    { opacity: 1; transform: none; transition-delay: 0ms; }
.gift-section.gift-visible .gift-content .gift-heading   { opacity: 1; transform: none; transition-delay: 80ms; }
.gift-section.gift-visible .gift-content .gift-desc      { opacity: 1; transform: none; transition-delay: 150ms; }
.gift-section.gift-visible .gift-content .gift-free-label { opacity: 1; transform: none; transition-delay: 200ms; }
.gift-section.gift-visible .gift-content .gift-benefits  { opacity: 1; transform: none; transition-delay: 260ms; }
.gift-section.gift-visible .gift-content .gift-cta-wrap  { opacity: 1; transform: none; transition-delay: 340ms; }
.gift-section.gift-visible .gift-content .gift-delivery-note { opacity: 1; transform: none; transition-delay: 400ms; }
.gift-section.gift-visible .gift-content .gift-trust     { opacity: 1; transform: none; transition-delay: 440ms; }
.gift-section.gift-visible .gift-preview-col             { opacity: 1; transform: none; transition-delay: 200ms; }
@media (max-width: 900px) {
    .gift-layout { grid-template-columns: 1fr; }
    .gift-preview-col { order: -1; }
    .report-preview { width: 280px; height: 370px; }
}
@media (max-width: 600px) {
    .gift-benefits { grid-template-columns: 1fr; }
    .gf-row { grid-template-columns: 1fr; }
    .gift-modal-box { padding: 28px 18px; }
    .gift-cta-wrap { flex-direction: column; align-items: stretch; }
    .gift-primary-cta,
    .gift-secondary-cta { justify-content: center; text-align: center; }
    .report-preview { width: 240px; height: 315px; }
}


/* ─────────────────────────────────────
   PRICING NAV LINK
   ───────────────────────────────────── */
.nav-links a[href="#pricing"] { display: inline; }


/* ═══════════════════════════════════════════════════════════════
   HERO PAGE IMAGE + SALON COLOR PALETTE
   Colors extracted from images/hero page.png:
   Primary Rose:  #B5564A  ← salon chairs / warm rose tones
   Primary Dark:  #8A3828  ← deep terracotta / shadow
   Blush Light:   #F0C8B8  ← soft wall blush
   Cream Warm:    #FBF5F1  ← cream highlights
   Section Warm:  #F5EAE0  ← warm beige sections
   Gold Accent:   #C8883A  ← candle/golden warmth
   Text Dark:     #1A0806  ← deep warm shadow
   Text Body:     #5A2E22  ← warm brown
   Text Muted:    #9A6856  ← muted warm
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. HERO — Real photo background ── */
.hero {
    background: url('images/hero%20page.png') center / cover no-repeat !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Dark warm overlay so text stays readable */
.hbg-vignette {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        160deg,
        rgba(20, 6, 4, 0.78) 0%,
        rgba(40, 14, 8, 0.62) 45%,
        rgba(15, 5, 3, 0.50) 100%
    ) !important;
    z-index: 1 !important;
    opacity: 1 !important;
}

/* Hide abstract mesh layers — we have a real photo now */
.hbg-mesh, .hbg-grid {
    opacity: 0 !important;
    display: none !important;
}

/* Hero inner above overlay */
.hero-inner {
    position: relative !important;
    z-index: 2 !important;
}

/* ── 2. HERO TEXT — white on photo ── */
.hero-h1 {
    color: #FFFFFF !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.35) !important;
}
.h1-gradient {
    background: linear-gradient(90deg, #F0C8B8 0%, #FFFFFF 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.hero-desc {
    color: #F5E4DC !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.25) !important;
}
.badge {
    background: rgba(255,255,255,0.15) !important;
    color: #F5E0D4 !important;
    border-color: rgba(255,255,255,0.28) !important;
    backdrop-filter: blur(8px) !important;
}
.badge-dot {
    background: #F0C8B8 !important;
    box-shadow: 0 0 6px rgba(240,200,184,0.8) !important;
}
.h-chip-v2 {
    background: rgba(255,255,255,0.13) !important;
    color: #F5E4DC !important;
    border-color: rgba(255,255,255,0.22) !important;
    backdrop-filter: blur(6px) !important;
}
.h-chip-v2:hover {
    background: rgba(255,255,255,0.22) !important;
}
.btn-ghost {
    color: #F5E4DC !important;
    border-color: rgba(255,255,255,0.38) !important;
}
.btn-ghost:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #FFFFFF !important;
}
.h-trust-chk {
    color: #F0C8B8 !important;
}
.hero-trust {
    color: #F0D4C8 !important;
    opacity: 0.92 !important;
}

/* Floating cards — warmer glass on photo */
.fcard {
    background: rgba(255,255,255,0.93) !important;
    color: #1A0806 !important;
    border-color: rgba(255,255,255,0.6) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important;
}
.fcard-val, .fcard-title {
    color: #1A0806 !important;
}
.fcard-icon { filter: none !important; }

/* ── 3. NAVBAR ── */
.navbar {
    background: rgba(255,255,255,0.90) !important;
    border-bottom-color: rgba(181,86,74,0.12) !important;
}

/* ── 4. PRIMARY COLOR → Warm Rose #B5564A ── */

/* Buttons */
.btn-primary,
.btn-submit {
    background: linear-gradient(135deg, #B5564A 0%, #8A3828 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 20px rgba(181,86,74,0.38) !important;
}
.btn-primary:hover,
.btn-submit:hover {
    background: linear-gradient(135deg, #C46050 0%, #9A4030 100%) !important;
    box-shadow: 0 8px 30px rgba(181,86,74,0.50) !important;
}

/* Section tags / chips */
.section-tag {
    background: linear-gradient(135deg, rgba(181,86,74,0.12), rgba(200,136,58,0.10)) !important;
    color: #8A3828 !important;
    border-color: rgba(181,86,74,0.22) !important;
}

/* Section title gradient (h1-gradient in sections) */
.section-title .highlight,
.section-title span,
.h1-gradient-section {
    background: linear-gradient(90deg, #B5564A, #C8883A) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Stats bar */
.stats-bar {
    background: linear-gradient(135deg, #1A0806 0%, #2A1008 100%) !important;
}
.stat-num {
    background: linear-gradient(90deg, #F0C8B8, #C8883A) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.stat-divider {
    background: rgba(240,200,184,0.25) !important;
}

/* Page body background */
body {
    background: #FBF5F1 !important;
}

/* ── 5. REALITY CHECK — rose tones ── */
.reality-check {
    background: linear-gradient(160deg, #F5EAE0 0%, #FBF5F1 100%) !important;
}
.pain-card {
    background: #FFFFFF !important;
    border-color: rgba(181,86,74,0.12) !important;
    box-shadow: 0 4px 18px rgba(181,86,74,0.08) !important;
}
.pain-card:hover {
    border-color: rgba(181,86,74,0.30) !important;
    box-shadow: 0 8px 30px rgba(181,86,74,0.16) !important;
}
.pain-icon {
    background: linear-gradient(135deg, rgba(181,86,74,0.10), rgba(200,136,58,0.08)) !important;
    border-color: rgba(181,86,74,0.14) !important;
}

/* ── 6. FEATURES SECTION ── */
.features-section { background: #FAF0E6 !important; }

/* ── 7. HOW IT WORKS ── */
.stair-section { background: linear-gradient(160deg, #F5EAE0 0%, #FBF5F1 100%) !important; }
.sc-badge { background: rgba(181,86,74,0.12) !important; color: #B5564A !important; }
.sc-active .sc-badge { background: linear-gradient(135deg,#B5564A,#8A3828) !important; color: #fff !important; }

/* ── 8. COMPARE SECTION ── */
.pcompare-section { background: linear-gradient(155deg, #EDE3D6 0%, #F4EBE0 50%, #ECE3D4 100%) !important; }
.pctab.active { background: linear-gradient(135deg, #B5564A, #8A3828) !important; }
.pca-vs { background: linear-gradient(135deg, #B5564A, #8A3828) !important; }
.wow-marker { background: rgba(181,86,74,0.14) !important; color: #B5564A !important; }
.wow-hicon  { background: rgba(181,86,74,0.14) !important; color: #B5564A !important; }

/* ── 9. PRICING ── */
.pricing-section {
    background: linear-gradient(160deg, #F5EAE0 0%, #FBF5F1 100%) !important;
}
.price-card {
    border-color: rgba(181,86,74,0.14) !important;
}
.price-card-featured {
    border-color: #B5564A !important;
    background: linear-gradient(160deg, #FBF5F1 0%, #F5EAE0 100%) !important;
    box-shadow: 0 8px 40px rgba(181,86,74,0.22) !important;
}
.price-badge {
    background: linear-gradient(135deg, #B5564A, #C8883A) !important;
}
.price-currency { color: #B5564A !important; }
.price-card-featured .btn {
    background: linear-gradient(135deg, #B5564A, #8A3828) !important;
    box-shadow: 0 4px 18px rgba(181,86,74,0.35) !important;
}
.btn-outline-plan {
    border-color: rgba(181,86,74,0.35) !important;
    color: #B5564A !important;
}
.btn-outline-plan:hover {
    background: rgba(181,86,74,0.06) !important;
    border-color: #B5564A !important;
}
.price-daily strong { color: #B5564A !important; }

/* ── 10. GIFT / FREE REPORT ── */
.gift-section { background: linear-gradient(155deg, #fffaf6 0%, #f5ece0 50%, #fffbf7 100%) !important; }
.gift-primary-cta { background: linear-gradient(135deg, #B5564A, #9C3E35) !important; }
.report-free-badge { background: linear-gradient(135deg, #B5564A, #C07A60) !important; }

/* ── 11. FAQ ── */
.faq-section {
    background: linear-gradient(160deg, #F5EAE0 0%, #FBF5F1 100%) !important;
}
.faq-q:hover, .faq-q.open {
    color: #B5564A !important;
}
.faq-arr { color: #B5564A !important; }
.faq-item { border-color: rgba(181,86,74,0.14) !important; }


/* ── 13. FINAL CTA ── */
.final-cta {
    background: linear-gradient(160deg, #3A1410 0%, #4E2218 100%) !important;
}

/* ── 14. FOOTER ── */
.footer {
    background: #1A0806 !important;
    border-top-color: rgba(240,200,184,0.12) !important;
}
.footer-nav a:hover { color: #F0C8B8 !important; }
.footer-copy { color: rgba(240,200,184,0.45) !important; }

/* ── 15. SECTION TITLES GLOBAL ── */
.section-title { color: #1A0806 !important; }
.section-sub { color: #5A2E22 !important; }

/* ── 16. ERP SIDEBAR / CALENDAR colors ── */
.erp-sb {
    background: linear-gradient(180deg, #2E1008, #1A0806) !important;
}
.erp-sb-logo { color: #F0C8B8 !important; }
.erp-sb-item.erp-sb-active {
    background: rgba(181,86,74,0.22) !important;
    color: #F0C8B8 !important;
    border-right-color: #B5564A !important;
}
.erp-sb-item { color: rgba(240,200,184,0.70) !important; }
.erp-topbar {
    background: #FBF5F1 !important;
    border-bottom-color: rgba(181,86,74,0.12) !important;
}
.erp-kpi:nth-child(1) { border-top-color: #B5564A !important; }
.erp-kpi:nth-child(2) { border-top-color: #C8883A !important; }
.erp-kpi:nth-child(3) { border-top-color: #8A3828 !important; }
.erp-kpi:nth-child(4) { border-top-color: #D4907A !important; }

/* Calendar accent */
.cal-btn-new {
    background: linear-gradient(135deg, #B5564A, #C8883A) !important;
}
.cal-mm-today {
    background: #B5564A !important;
    color: #FFFFFF !important;
}
.cal-appt-1 { background: rgba(181,86,74,0.18) !important; color: #8A3828 !important; }
.cal-appt-2 { background: rgba(200,136,58,0.18) !important; color: #7A5010 !important; }
.cal-appt-3 { background: rgba(212,144,122,0.20) !important; color: #8A3828 !important; }

/* ── 17. HERO LAYOUT — text right, left side empty showing background image ── */
.hero {
    background-position: 75% center !important;
}
.hero .container {
    padding: 0 2px !important;
    margin-right: 40px !important;
    margin-left: auto !important;
}
.hero-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 40px 0 24px !important;
    text-align: right !important;
}
.hero-text {
    grid-column: 1 !important;  /* RTL: col 1 = right side */
    max-width: 560px !important;
    text-align: right !important;
    width: 100% !important;
}
/* Left column stays empty — background image is visible through it */
.hero-inner::after {
    content: '' !important;
    grid-column: 2 !important;
}
.hero-btns-col {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}
.btn-full {
    width: auto !important;
    min-width: 190px !important;
}
.hero-chips-grid {
    justify-content: flex-start !important;
}
.hero-trust {
    justify-content: flex-start !important;
}
.badge {
    margin: 0 0 20px !important;
    display: inline-flex !important;
}
.hero-brands {
    grid-column: 1 / -1 !important;
    text-align: right !important;
    margin-top: 32px !important;
}

/* Responsive — stack on mobile */
@media (max-width: 768px) {
    .hero {
        background-position: 70% center !important;
    }
    .hero-inner {
        grid-template-columns: 1fr !important;
        padding: 90px 0 56px !important;
        text-align: center !important;
    }
    .hero-text {
        grid-column: 1 !important;
        text-align: center !important;
        max-width: 100% !important;
    }
    .hero-btns-col {
        flex-direction: column !important;
        align-items: center !important;
    }
    .btn-full {
        width: 100% !important;
        max-width: 320px !important;
    }
    .hero-chips-grid { justify-content: center !important; }
    .hero-trust { justify-content: center !important; }
    .badge { margin: 0 auto 20px !important; }
    .hero-brands { grid-column: 1 !important; text-align: center !important; }
}

/* ── 18. FIX BLUE / PURPLE TEXT IN HERO ── */
/* Ghost button — was showing purple border & text */
.btn-ghost {
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,0.42) !important;
    background: transparent !important;
}
.btn-ghost:hover {
    background: rgba(255,255,255,0.14) !important;
    border-color: rgba(255,255,255,0.65) !important;
    color: #FFFFFF !important;
}
/* Trust items */
.h-trust-item {
    color: rgba(255,255,255,0.85) !important;
}
.h-trust-chk {
    color: #F0C8B8 !important;
}
/* Section tags elsewhere — ensure rose not blue */
.section-tag {
    color: #8A3828 !important;
    background: linear-gradient(135deg, rgba(181,86,74,0.10), rgba(200,136,58,0.08)) !important;
    border-color: rgba(181,86,74,0.20) !important;
}
/* Any remaining purple/blue links */
a { color: inherit !important; }
a:hover { color: inherit !important; }
.nav-links a { color: #2A1208 !important; }
.nav-links a:hover { color: #B5564A !important; }

/* ── 19. TRUST / BRANDS BAR (replaces stats bar) ── */
.trust-bar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
    padding: 14px 20px !important;
}
.trust-bar-label {
    color: rgba(240,200,184,0.90) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}
.trust-bar-sep {
    color: rgba(240,200,184,0.25) !important;
    font-size: 18px !important;
    font-weight: 100 !important;
}
.trust-bar-dot {
    color: rgba(240,200,184,0.35) !important;
    font-size: 14px !important;
}
.hb-logo {
    color: rgba(255,255,255,0.82) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
}
.hb-sub {
    font-size: 10px !important;
    font-weight: 400 !important;
    opacity: 0.65 !important;
    margin-right: 3px !important;
}
/* Hide old stats-grid if it still gets rendered */
.stats-grid { display: none !important; }

/* ── 20. NAVBAR — transparent at hero, warm-brown glass on scroll ── */
.navbar {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid transparent !important;
    box-shadow: none !important;
    transition:
        background 0.35s ease,
        backdrop-filter 0.35s ease,
        -webkit-backdrop-filter 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease !important;
    height: auto !important;
}
.navbar.scrolled {
    background: rgba(92,52,39,0.68) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
    box-shadow: 0 8px 32px rgba(43,22,14,0.10) !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}
.navbar .logo-text {
    color: #FFF8F2 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
}
.navbar .logo-img {
    display: block !important;
    height: 44px !important;
    width: auto !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    margin: 0 !important;
}
@media (max-width: 640px) {
    .navbar .logo-img  { height: 38px !important; }
    .navbar .logo-text { font-size: 18px !important; }
}
.navbar .nav-links a {
    display: inline-flex !important;
    align-items: center !important;
    color: #FFF8F2 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    transition: color 220ms ease !important;
}
.navbar .nav-links a:hover,
.navbar .nav-links a:focus-visible {
    color: #FFFFFF !important;
}
.navbar .nav-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,248,242,0.92) !important;
    color: #4a2d22 !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    box-shadow: 0 2px 12px rgba(54,32,24,0.10) !important;
    min-height: 40px !important;
    padding: 0 22px !important;
    margin: 0 !important;
    line-height: 1 !important;
    transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease !important;
}
.navbar .nav-cta:hover {
    background: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(54,32,24,0.16) !important;
}
.navbar .hamburger span {
    background: #FFF8F2 !important;
}
/* Same glass as .scrolled when over dark/light sections */
.navbar.nav-on-light,
.navbar.nav-on-dark {
    background: rgba(92,52,39,0.68) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
    box-shadow: 0 8px 32px rgba(43,22,14,0.10) !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}
.navbar.nav-on-light .logo-img,
.navbar.nav-on-dark .logo-img {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}
.navbar.nav-on-light .nav-links a,
.navbar.nav-on-dark .nav-links a {
    color: #FFF8F2 !important;
}
.navbar.nav-on-light .nav-cta,
.navbar.nav-on-dark .nav-cta {
    background: rgba(255,248,242,0.92) !important;
    color: #4a2d22 !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
}
.navbar.nav-on-light .hamburger span,
.navbar.nav-on-dark .hamburger span {
    background: #FFF8F2 !important;
}
/* Mobile menu: opaque version of same glass brown */
@media (max-width: 768px) {
    .nav-links.open {
        background: rgba(104,67,52,0.97) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        border-top: 1px solid rgba(255,248,242,0.16) !important;
    }
    .nav-links.open a {
        color: #FFF8F2 !important;
    }
}

/* ── 21. FONT — Readex Pro (elegant, suits feminine salon brand) ── */
body, h1, h2, h3, h4, h5, h6, p, span, a, button, input, textarea, select {
    font-family: 'Readex Pro', 'Tajawal', sans-serif !important;
}

/* ── 22. GHOST BUTTON — fix blue/purple (high specificity needed) ── */
.btn-ghost,
.hero-text .btn-ghost,
.hero-btns .btn-ghost,
.hero-btns-col .btn-ghost {
    color: #F0C8B8 !important;
    border-color: rgba(240,200,184,0.50) !important;
    background: transparent !important;
}
.btn-ghost:hover,
.hero-text .btn-ghost:hover,
.hero-btns .btn-ghost:hover,
.hero-btns-col .btn-ghost:hover {
    color: #FFFFFF !important;
    border-color: rgba(240,200,184,0.88) !important;
    background: rgba(240,200,184,0.10) !important;
}

/* ── 23. NAVBAR — alignment and spacing ── */
.nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 32px !important;
    min-height: 68px !important;
    height: auto !important;
    gap: 40px !important;
}
.logo {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}
.nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.nav-links a {
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}
.lang-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* ── 24b. NAV SALON LINK — outlined glass button ── */
.nav-salon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-decoration: none;
    font-family: 'Tajawal', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #FFFFFF;
    background: linear-gradient(135deg, #B5564A 0%, #8A3828 100%);
    border: none;
    border-radius: 100px;
    padding: 0 18px;
    min-height: 38px;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(181,86,74,0.35);
    transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease, color 220ms ease;
}
.nav-salon-link:hover,
.nav-salon-link:focus-visible {
    background: linear-gradient(135deg, #C46050 0%, #9A4030 100%);
    box-shadow: 0 8px 24px rgba(181,86,74,0.50);
    transform: translateY(-1px);
    color: #FFFFFF;
}
/* Desktop: hide the in-menu duplicate */
.navbar .nav-links .nav-salon-mobile {
    display: none !important;
}
/* Mobile: hide desktop button; show dropdown version */
@media (max-width: 640px) {
    .nav-salon-desktop {
        display: none !important;
    }
    .navbar .nav-links .nav-salon-mobile {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 44px !important;
        padding: 12px 20px !important;
        margin: 6px 16px 8px !important;
        width: calc(100% - 32px) !important;
        background: linear-gradient(135deg, #B5564A 0%, #8A3828 100%) !important;
        border: none !important;
        border-radius: 8px !important;
        font-weight: 700 !important;
        color: #FFFFFF !important;
        text-align: center !important;
        box-shadow: 0 4px 14px rgba(181,86,74,0.35) !important;
    }
}

/* ── 24. HERO PADDING — minimal ── */
.hero .container {
    padding: 0 2px !important;
    margin-right: 40px !important;
    margin-left: auto !important;
}
.hero-inner {
    padding: 16px 0 12px !important;
}

/* ═══════════════════════════════════════════════════════════
   REALITY CHECK — Professional two-column editorial layout
   ═══════════════════════════════════════════════════════════ */
.reality-check {
    background: #1A0806 !important;
    padding: 120px 0 !important;
    overflow: hidden !important;
}

/* Two-column wrap */
.rc-wrap {
    display: grid !important;
    grid-template-columns: 340px 1fr !important;
    gap: 80px !important;
    align-items: start !important;
}

/* LEFT — sticky heading panel */
.rc-left {
    position: sticky !important;
    top: 88px !important;
}
.rc-eyebrow {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: #B5564A !important;
    margin-bottom: 28px !important;
}
.rc-heading {
    font-size: clamp(36px, 4vw, 52px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: #F5EAE0 !important;
    margin: 0 0 32px !important;
}
.rc-heading em {
    font-style: italic !important;
    color: #B5564A !important;
}
.rc-sub {
    font-size: 14px !important;
    line-height: 1.75 !important;
    color: rgba(240,210,195,0.58) !important;
    margin: 0 0 40px !important;
}
.rc-btn {
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #F0C8B8 !important;
    text-decoration: none !important;
    border-bottom: 1.5px solid rgba(240,200,184,0.38) !important;
    padding-bottom: 3px !important;
    transition: color .2s, border-color .2s !important;
}
.rc-btn:hover {
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,0.55) !important;
}

/* RIGHT — numbered rows */
.rc-right {
    border-top: 1px solid rgba(240,200,184,0.10) !important;
}
.rc-row {
    display: grid !important;
    grid-template-columns: 48px 1fr !important;
    gap: 24px !important;
    align-items: baseline !important;
    padding: 32px 0 !important;
    border-bottom: 1px solid rgba(240,200,184,0.10) !important;
    transition: background .2s !important;
    cursor: default !important;
}
.rc-row:hover {
    background: rgba(181,86,74,0.04) !important;
}
.rc-row:hover .rc-idx {
    color: #B5564A !important;
}
.rc-row:hover .rc-p {
    color: #F5EAE0 !important;
}
.rc-idx {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: rgba(181,86,74,0.38) !important;
    padding-top: 3px !important;
    transition: color .2s !important;
}
.rc-p {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.70 !important;
    color: rgba(240,210,195,0.72) !important;
    margin: 0 !important;
    transition: color .2s !important;
}

/* Responsive */
@media (max-width: 900px) {
    .rc-wrap {
        grid-template-columns: 1fr !important;
        gap: 48px !important;
    }
    .rc-left { position: static !important; }
    .rc-heading { font-size: 36px !important; }
}
@media (max-width: 600px) {
    .reality-check { padding: 72px 0 !important; }
    .rc-row { grid-template-columns: 36px 1fr !important; gap: 16px !important; padding: 24px 0 !important; }
    .rc-p { font-size: 15px !important; }
}

/* ═══════════════════════════════════════════════════════════
   REALITY CHECK — Light beige background + text colors flipped
   ═══════════════════════════════════════════════════════════ */
.reality-check {
    background: #F5EAE0 !important;
}
.rc-eyebrow { color: #B5564A !important; }
.rc-heading { color: #1A0806 !important; }
.rc-heading em { color: #B5564A !important; }
.rc-sub { color: rgba(90,46,34,0.60) !important; }
.rc-btn { color: #B5564A !important; border-bottom-color: rgba(181,86,74,0.38) !important; }
.rc-btn:hover { color: #8A3828 !important; border-bottom-color: rgba(138,56,40,0.70) !important; }
.rc-right { border-top-color: rgba(90,46,34,0.14) !important; }
.rc-row { border-bottom-color: rgba(90,46,34,0.10) !important; }
.rc-row:hover { background: rgba(181,86,74,0.05) !important; }
.rc-row:hover .rc-idx { color: #B5564A !important; }
.rc-row:hover .rc-p { color: #1A0806 !important; }
.rc-idx { color: rgba(181,86,74,0.35) !important; }
.rc-p { color: rgba(58,28,16,0.72) !important; }

/* ═══════════════════════════════════════════════════════════
   HERO ANIMATIONS — staggered cascade entrance
   ═══════════════════════════════════════════════════════════ */
@keyframes h-fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes h-drop-in {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes h-trust-slide {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Each element flows in clearly after the previous one */
.badge {
    animation: h-drop-in 0.55s cubic-bezier(0.22,1,0.36,1) 0.10s both !important;
}
.hero-h1 {
    animation: h-fade-up 0.85s cubic-bezier(0.22,1,0.36,1) 0.40s both !important;
}
.hero-desc {
    animation: h-fade-up 0.70s cubic-bezier(0.22,1,0.36,1) 0.78s both !important;
}
.hero-btns-col {
    animation: h-fade-up 0.65s cubic-bezier(0.22,1,0.36,1) 1.12s both !important;
}
.hero-trust {
    animation: h-trust-slide 0.60s cubic-bezier(0.22,1,0.36,1) 1.48s both !important;
}

/* Trust items انسياب داخلي — كل واحد يدخل بعد الثاني */
.hero-trust .h-trust-item:nth-child(1) {
    display: inline-block !important;
    animation: h-trust-slide 0.50s cubic-bezier(0.22,1,0.36,1) 1.50s both !important;
}
.hero-trust .h-trust-item:nth-child(2) {
    display: inline-block !important;
    animation: h-trust-slide 0.50s cubic-bezier(0.22,1,0.36,1) 1.66s both !important;
}
.hero-trust .h-trust-item:nth-child(3) {
    display: inline-block !important;
    animation: h-trust-slide 0.50s cubic-bezier(0.22,1,0.36,1) 1.82s both !important;
}

/* ═══════════════════════════════════════════════════════════
   REALITY CHECK ANIMATIONS — scroll-triggered via JS .rc-visible
   ═══════════════════════════════════════════════════════════ */

/* Left panel slides in from right */
.rc-left {
    opacity: 0 !important;
    transform: translateX(28px) !important;
    transition: opacity 0.70s ease, transform 0.70s ease !important;
}
.rc-left.rc-visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Each row slides up and fades in */
.rc-row {
    opacity: 0 !important;
    transform: translateY(18px) !important;
    transition: opacity 0.50s ease, transform 0.50s ease, background 0.2s !important;
}
.rc-row.rc-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Navbar glass over light sections */
.navbar.nav-on-light {
    background: rgba(92,52,39,0.68) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

/* ═══════════════════════════════════════════════════════════
   REALITY CHECK — Interactive Split-Screen (Full Redesign)
   ═══════════════════════════════════════════════════════════ */

/* Section */
.reality-check {
    background: #080201 !important;
    padding: 120px 0 100px !important;
    position: relative !important;
    overflow: hidden !important;
}
.reality-check::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 60% at 15% 50%, rgba(181,86,74,0.09) 0%, transparent 65%),
                radial-gradient(ellipse 40% 40% at 85% 20%, rgba(181,86,74,0.05) 0%, transparent 60%);
    pointer-events: none;
}

/* Intro header */
.rc-intro {
    text-align: center !important;
    margin-bottom: 72px !important;
}
.reality-check .rc-eyebrow {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: #B5564A !important;
    background: rgba(181,86,74,0.12) !important;
    border: 1px solid rgba(181,86,74,0.28) !important;
    padding: 6px 18px !important;
    border-radius: 100px !important;
    margin-bottom: 24px !important;
}
.reality-check .rc-heading {
    font-size: 52px !important;
    font-weight: 700 !important;
    color: rgba(255,245,240,0.94) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}
.reality-check .rc-heading em {
    font-style: normal !important;
    background: linear-gradient(135deg, #E07868 0%, #B5564A 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Split grid */
.rc-split {
    display: grid !important;
    grid-template-columns: 1fr 500px !important;
    gap: 72px !important;
    align-items: start !important;
    margin-bottom: 80px !important;
}

/* ─── Problem List (RTL col 1 = right side) ─── */
.rc-list {
    position: relative !important;
    padding: 0 !important;
}
.rc-list-line {
    position: absolute !important;
    right: 34px !important;
    top: 28px !important;
    bottom: 28px !important;
    width: 1px !important;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(181,86,74,0.28) 8%,
        rgba(181,86,74,0.28) 92%,
        transparent 100%
    ) !important;
}

.rc-item {
    display: grid !important;
    grid-template-columns: 68px 1fr !important;
    gap: 0 20px !important;
    padding: 22px 0 !important;
    cursor: pointer !important;
    position: relative !important;
    transition: none !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    outline: none !important;
}
.rc-item::after {
    content: '';
    position: absolute;
    inset: 6px 0;
    border-radius: 12px;
    background: transparent;
    transition: background 0.30s ease;
    z-index: -1;
}
.rc-item:hover::after {
    background: rgba(181,86,74,0.05);
}
.rc-item.rc-active::after {
    background: rgba(181,86,74,0.07);
}

.rc-num-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding-top: 2px !important;
}
.rc-num {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    color: rgba(255,245,240,0.14) !important;
    font-family: 'Readex Pro', monospace !important;
    line-height: 1 !important;
    transition: color 0.30s ease !important;
}
.rc-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(181,86,74,0.30) !important;
    background: transparent !important;
    transition: all 0.30s cubic-bezier(0.22,1,0.36,1) !important;
    flex-shrink: 0 !important;
}

.rc-body {
    padding-right: 4px !important;
}
.rc-title {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: rgba(255,245,240,0.28) !important;
    margin: 0 0 0 !important;
    line-height: 1.45 !important;
    transition: color 0.30s ease, font-weight 0.30s ease !important;
}
.rc-desc {
    font-size: 13.5px !important;
    color: rgba(255,245,240,0.00) !important;
    margin: 0 !important;
    line-height: 1.65 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: color 0.30s ease 0.05s, max-height 0.38s ease, opacity 0.30s ease !important;
    opacity: 0 !important;
    margin-top: 0 !important;
}

/* Active state */
.rc-item.rc-active .rc-num {
    color: #B5564A !important;
}
.rc-item.rc-active .rc-dot {
    background: #B5564A !important;
    border-color: #B5564A !important;
    box-shadow: 0 0 0 4px rgba(181,86,74,0.16), 0 0 14px rgba(181,86,74,0.35) !important;
    transform: scale(1.35) !important;
}
.rc-item.rc-active .rc-title {
    color: rgba(255,245,240,0.92) !important;
    font-weight: 600 !important;
}
.rc-item.rc-active .rc-desc {
    color: rgba(255,245,240,0.45) !important;
    max-height: 56px !important;
    opacity: 1 !important;
    margin-top: 6px !important;
}

/* Hover (non-active) */
.rc-item:not(.rc-active):hover .rc-num {
    color: rgba(181,86,74,0.55) !important;
}
.rc-item:not(.rc-active):hover .rc-title {
    color: rgba(255,245,240,0.55) !important;
}
.rc-item:not(.rc-active):hover .rc-dot {
    background: rgba(181,86,74,0.45) !important;
    border-color: rgba(181,86,74,0.55) !important;
}

/* ─── Dashboard Panels (RTL col 2 = left side) ─── */
.rc-panels-wrap {
    position: sticky !important;
    top: 100px !important;
    height: 460px !important;
}
.rc-panel {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(255,255,255,0.038) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    opacity: 0 !important;
    transform: translateY(14px) scale(0.985) !important;
    transition: opacity 0.42s cubic-bezier(0.22,1,0.36,1),
                transform 0.42s cubic-bezier(0.22,1,0.36,1) !important;
    pointer-events: none !important;
    overflow: hidden !important;
}
.rc-panel.rc-panel-active {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

/* Panel header */
.rc-panel-hd {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.075) !important;
    flex-shrink: 0 !important;
}
.rc-pico {
    font-size: 17px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}
.rc-plbl {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: rgba(255,245,240,0.50) !important;
    flex: 1 !important;
    letter-spacing: 0.2px !important;
}
.rc-pbadge {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 100px !important;
    letter-spacing: 0.3px !important;
    flex-shrink: 0 !important;
}
.rc-pbadge-err {
    background: rgba(239,68,68,0.14) !important;
    color: #FCA5A5 !important;
    border: 1px solid rgba(239,68,68,0.28) !important;
}

/* Mockup container */
.rc-mock {
    flex: 1 !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,255,255,0.055) !important;
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
}

/* Glassmorphism float card */
.rc-float {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(255,255,255,0.07) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.13) !important;
    border-radius: 14px !important;
    padding: 13px 18px !important;
    flex-shrink: 0 !important;
}
.rc-float-ico {
    font-size: 22px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}
.rc-float-val {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: rgba(255,245,240,0.94) !important;
    margin-bottom: 2px !important;
    line-height: 1.3 !important;
}
.rc-float-sub {
    font-size: 11.5px !important;
    color: rgba(255,245,240,0.38) !important;
    line-height: 1.4 !important;
}

/* ── Calendar mockup ── */
.rm-cal { gap: 0 !important; }
.rm-cal-head {
    display: grid !important;
    grid-template-columns: 44px 1fr 1fr 1fr !important;
    gap: 4px !important;
    margin-bottom: 5px !important;
}
.rm-th {
    font-size: 9.5px !important;
    font-weight: 600 !important;
    color: rgba(255,245,240,0.25) !important;
    text-align: center !important;
    padding: 3px 0 !important;
    letter-spacing: 0.4px !important;
}
.rm-cal-row {
    display: grid !important;
    grid-template-columns: 44px 1fr 1fr 1fr !important;
    gap: 4px !important;
    margin-bottom: 4px !important;
}
.rm-t {
    font-size: 9.5px !important;
    color: rgba(255,245,240,0.22) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 0 !important;
}
.rm-sl {
    border-radius: 5px !important;
    padding: 7px 5px !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
    text-align: center !important;
    line-height: 1.2 !important;
}
.rm-sl-x {
    background: rgba(255,255,255,0.025) !important;
    border: 1px dashed rgba(255,255,255,0.07) !important;
}
.rm-sl-ok {
    background: rgba(181,86,74,0.18) !important;
    border: 1px solid rgba(181,86,74,0.32) !important;
    color: #F0C8B8 !important;
}
.rm-sl-clash {
    background: rgba(239,68,68,0.18) !important;
    border: 1px solid rgba(239,68,68,0.38) !important;
    color: #FCA5A5 !important;
    animation: rc-blink 2.2s ease infinite !important;
}
@keyframes rc-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* ── Performance bars ── */
.rm-perf { gap: 0 !important; justify-content: space-between !important; }
.rm-pr {
    display: grid !important;
    grid-template-columns: 40px 1fr 34px !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.038) !important;
}
.rm-pname {
    font-size: 11.5px !important;
    color: rgba(255,245,240,0.42) !important;
    text-align: right !important;
}
.rm-ptrack {
    background: rgba(255,255,255,0.07) !important;
    border-radius: 100px !important;
    height: 5px !important;
    overflow: hidden !important;
}
.rm-pfill {
    height: 100% !important;
    border-radius: 100px !important;
    background: linear-gradient(90deg, rgba(181,86,74,0.55), rgba(181,86,74,0.85)) !important;
    transition: width 0.9s cubic-bezier(0.22,1,0.36,1) !important;
}
.rm-pf-top { background: linear-gradient(90deg, #C4634A, #E07868) !important; }
.rm-pf-low { background: linear-gradient(90deg, rgba(239,68,68,0.45), rgba(239,68,68,0.75)) !important; }
.rm-pval {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: rgba(255,245,240,0.42) !important;
    text-align: left !important;
}
.rm-pv-top { color: #E07868 !important; }
.rm-pv-low { color: #FCA5A5 !important; }

/* ── POS / Cashier ── */
.rm-pos { gap: 0 !important; justify-content: space-between !important; }
.rm-pos-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 7.5px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.045) !important;
}
.rm-pos-svc {
    font-size: 12px !important;
    color: rgba(255,245,240,0.48) !important;
}
.rm-pos-price {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(255,245,240,0.65) !important;
    font-variant-numeric: tabular-nums !important;
}
.rm-pos-sep {
    height: 1px !important;
    background: rgba(255,255,255,0.12) !important;
    margin: 8px 0 !important;
}
.rm-pos-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 5px 0 !important;
}
.rm-pos-total > span:first-child {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: rgba(255,245,240,0.75) !important;
}
.rm-pos-err-val {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #FCA5A5 !important;
}
.rm-pos-note {
    font-size: 10.5px !important;
    color: rgba(239,68,68,0.60) !important;
    padding-top: 3px !important;
    text-align: left !important;
}

/* ── Inventory ── */
.rm-inv { gap: 0 !important; justify-content: space-between !important; }
.rm-invr {
    display: grid !important;
    grid-template-columns: 1fr 100px 40px !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.038) !important;
}
.rm-invname {
    font-size: 11.5px !important;
    color: rgba(255,245,240,0.48) !important;
}
.rm-invtrack {
    background: rgba(255,255,255,0.07) !important;
    border-radius: 100px !important;
    height: 5px !important;
    overflow: hidden !important;
}
.rm-invfill {
    height: 100% !important;
    border-radius: 100px !important;
    background: rgba(181,86,74,0.70) !important;
}
.rm-inv-warn { background: rgba(251,146,60,0.80) !important; }
.rm-inv-out  { background: rgba(239,68,68,0.70) !important; }
.rm-invqty {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(255,245,240,0.45) !important;
    text-align: left !important;
}
.rm-iqty-warn { color: #FDBA74 !important; }
.rm-iqty-out  { color: #FCA5A5 !important; }

/* ── Bar Chart ── */
.rm-chart { gap: 0 !important; justify-content: flex-end !important; }
.rm-chart-grid {
    display: flex !important;
    align-items: flex-end !important;
    gap: 7px !important;
    height: 130px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    position: relative !important;
    flex: 1 !important;
}
.rm-chart-grid::before {
    content: '';
    position: absolute;
    inset: 0 0 0 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.04) 0px,
        rgba(255,255,255,0.04) 1px,
        transparent 1px,
        transparent 33.33%
    );
    pointer-events: none;
}
.rm-bcol {
    flex: 1 !important;
    height: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
}
.rm-bar {
    width: 100% !important;
    border-radius: 4px 4px 0 0 !important;
    transition: height 0.9s cubic-bezier(0.22,1,0.36,1) !important;
}
.rm-bar-mid { background: linear-gradient(to top, rgba(181,86,74,0.55), rgba(181,86,74,0.28)) !important; }
.rm-bar-hi  { background: linear-gradient(to top, rgba(181,86,74,0.95), rgba(181,86,74,0.55)) !important; }
.rm-bar-lo  { background: linear-gradient(to top, rgba(239,68,68,0.75), rgba(239,68,68,0.35)) !important; }
.rm-chart-labels {
    display: flex !important;
    gap: 7px !important;
    margin-top: 7px !important;
    flex-shrink: 0 !important;
}
.rm-chart-labels span {
    flex: 1 !important;
    text-align: center !important;
    font-size: 9px !important;
    color: rgba(255,245,240,0.20) !important;
}

/* ── CRM Tickets ── */
.rm-crm { gap: 0 !important; }
.rm-ticket {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.048) !important;
}
.rm-tdot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}
.rm-td-red { background: #EF4444 !important; box-shadow: 0 0 7px rgba(239,68,68,0.55) !important; }
.rm-td-org { background: #F97316 !important; box-shadow: 0 0 7px rgba(249,115,22,0.45) !important; }
.rm-tbody { flex: 1 !important; min-width: 0 !important; }
.rm-tname {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(255,245,240,0.72) !important;
    margin-bottom: 2px !important;
}
.rm-tissue {
    font-size: 11px !important;
    color: rgba(255,245,240,0.30) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.rm-tage {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: rgba(255,245,240,0.24) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.rm-tage-old { color: #FCA5A5 !important; }

/* ─── Footer CTA ─── */
.rc-footer {
    text-align: center !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    padding-top: 60px !important;
}
.rc-footer-txt {
    font-size: 15.5px !important;
    color: rgba(255,245,240,0.35) !important;
    margin: 0 auto 28px !important;
    max-width: 520px !important;
    line-height: 1.75 !important;
}
.rc-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #B5564A !important;
    color: #fff !important;
    padding: 14px 34px !important;
    border-radius: 100px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    letter-spacing: 0.2px !important;
    transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease !important;
    box-shadow: 0 4px 18px rgba(181,86,74,0.30) !important;
}
.rc-cta-btn:hover {
    background: #8A3828 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(181,86,74,0.40) !important;
}

/* ─── Section entrance animation ─── */
.rc-intro { opacity: 0; transform: translateY(20px); transition: opacity 0.70s ease, transform 0.70s ease; }
.rc-intro.rc-in { opacity: 1 !important; transform: translateY(0) !important; }
.rc-list { opacity: 0; transform: translateX(20px); transition: opacity 0.65s ease 0.15s, transform 0.65s ease 0.15s; }
.rc-list.rc-in { opacity: 1 !important; transform: translateX(0) !important; }
.rc-panels-wrap { opacity: 0; transform: translateX(-20px); transition: opacity 0.65s ease 0.25s, transform 0.65s ease 0.25s; }
.rc-panels-wrap.rc-in { opacity: 1 !important; transform: translateX(0) !important; }

/* ─── OLD RC responsive (legacy, kept for safety) ─── */
@media (max-width: 1000px) {
    .rc-split { grid-template-columns: 1fr !important; gap: 48px !important; }
    .rc-panels-wrap { position: relative !important; top: auto !important; height: 440px !important; }
    .reality-check .rc-heading { font-size: 40px !important; }
}
@media (max-width: 640px) {
    .rc-intro { margin-bottom: 48px !important; }
    .rc-panel { padding: 18px !important; }
    .rc-float { padding: 11px 14px !important; }
}

/* ============================================================
   REALITY CHECK — Scroll Storytelling
   ============================================================ */
.reality-check.rc-story {
    height: 500vh !important;
    padding: 0 !important;
    background: #0a0100 !important;
    position: relative !important;
    touch-action: pan-y !important;
}

/* Sticky viewport */
.rc-sticky-wrap {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    width: 100% !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ambient orbs */
.rc-ambient {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
.rc-orb {
    position: absolute !important;
    border-radius: 50% !important;
    filter: blur(90px) !important;
    opacity: 0 !important;
    animation: rc-orb-pulse 8s ease-in-out infinite !important;
}
.rc-orb-1 {
    width: 520px !important;
    height: 520px !important;
    background: radial-gradient(circle, rgba(181,86,74,0.22) 0%, transparent 70%) !important;
    top: -120px !important;
    right: -80px !important;
    animation-delay: 0s !important;
    opacity: 0.6 !important;
}
.rc-orb-2 {
    width: 400px !important;
    height: 400px !important;
    background: radial-gradient(circle, rgba(120,40,20,0.18) 0%, transparent 70%) !important;
    bottom: -80px !important;
    left: -60px !important;
    animation-delay: 3.5s !important;
    opacity: 0.5 !important;
}
.rc-orb-3 {
    width: 300px !important;
    height: 300px !important;
    background: radial-gradient(circle, rgba(200,90,60,0.12) 0%, transparent 70%) !important;
    top: 50% !important;
    left: 40% !important;
    animation-delay: 6s !important;
    opacity: 0.4 !important;
}
@keyframes rc-orb-pulse {
    0%, 100% { transform: scale(1) translate(0, 0); }
    50%       { transform: scale(1.15) translate(20px, -15px); }
}

/* Fixed headline */
.rc-hl {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    z-index: 2 !important;
    pointer-events: none !important;
    transition: opacity 0.5s ease, transform 0.5s ease !important;
    width: 100% !important;
    padding: 0 20px !important;
}
.rc-eyebrow-pill {
    display: inline-block !important;
    background: rgba(181,86,74,0.18) !important;
    border: 1px solid rgba(181,86,74,0.30) !important;
    color: #E09080 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 6px 18px !important;
    border-radius: 100px !important;
    margin-bottom: 22px !important;
}
.rc-hl-h2 {
    font-size: clamp(32px, 5vw, 64px) !important;
    font-weight: 800 !important;
    color: rgba(255,245,240,0.92) !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    letter-spacing: -0.5px !important;
}
.rc-hl-h2 em {
    font-style: normal !important;
    color: #C4634A !important;
}

/* Card stage */
.rc-stage {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

/* Problem cards */
.rc-scard {
    position: absolute !important;
    opacity: 0;
    transform: translateY(60px) scale(0.92);
    filter: blur(8px);
    will-change: opacity, transform, filter !important;
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    background: rgba(255,255,255,0.055) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 22px !important;
    padding: 28px 34px !important;
    max-width: 560px !important;
    width: calc(100% - 48px) !important;
    direction: rtl !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.45), 0 2px 0 rgba(255,255,255,0.06) inset !important;
    pointer-events: none !important;
}
.rc-scard-ico {
    font-size: 40px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}
.rc-scard-body h3 {
    font-size: clamp(16px, 2.2vw, 21px) !important;
    font-weight: 700 !important;
    color: rgba(255,245,240,0.92) !important;
    margin: 0 0 8px !important;
    line-height: 1.3 !important;
}
.rc-scard-body p {
    font-size: clamp(13px, 1.6vw, 15px) !important;
    color: rgba(255,245,240,0.42) !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

/* Success / win card */
.rc-scard-win {
    flex-direction: column !important;
    text-align: center !important;
    background: linear-gradient(145deg, rgba(181,86,74,0.22) 0%, rgba(120,30,10,0.18) 100%) !important;
    border-color: rgba(181,86,74,0.28) !important;
    max-width: 520px !important;
    padding: 40px 44px !important;
    gap: 0 !important;
    box-shadow: 0 24px 80px rgba(181,86,74,0.22), 0 2px 0 rgba(255,200,180,0.10) inset !important;
}
.rc-win-star {
    font-size: 48px !important;
    margin-bottom: 20px !important;
    display: block !important;
}
.rc-win-h3 {
    font-size: clamp(22px, 3vw, 32px) !important;
    font-weight: 800 !important;
    color: rgba(255,245,240,0.95) !important;
    margin: 0 0 12px !important;
    line-height: 1.25 !important;
}
.rc-win-sub {
    font-size: clamp(13px, 1.5vw, 15px) !important;
    color: rgba(255,245,240,0.48) !important;
    margin: 0 0 28px !important;
    line-height: 1.6 !important;
}
.rc-win-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #B5564A !important;
    color: #fff !important;
    padding: 14px 32px !important;
    border-radius: 100px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    pointer-events: auto !important;
    transition: background 0.22s, transform 0.22s, box-shadow 0.22s !important;
    box-shadow: 0 6px 22px rgba(181,86,74,0.40) !important;
}
.rc-win-btn:hover {
    background: #8A3828 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 32px rgba(181,86,74,0.50) !important;
}

/* Progress dots */
.rc-pdots {
    position: absolute !important;
    left: 32px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    z-index: 10 !important;
}
.rc-pdot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.18) !important;
    transition: background 0.35s ease, transform 0.35s ease !important;
    display: block !important;
}
.rc-pdot.active {
    background: #C4634A !important;
    transform: scale(1.45) !important;
}

/* Scroll hint */
.rc-hint {
    position: absolute !important;
    bottom: 36px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    opacity: 1 !important;
    transition: opacity 0.5s ease !important;
    z-index: 10 !important;
}
.rc-hint.hidden { opacity: 0 !important; pointer-events: none !important; }
.rc-hint-mouse {
    width: 24px !important;
    height: 38px !important;
    border: 2px solid rgba(255,255,255,0.25) !important;
    border-radius: 12px !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    padding-top: 6px !important;
}
.rc-hint-wheel {
    width: 3px !important;
    height: 8px !important;
    background: rgba(255,255,255,0.45) !important;
    border-radius: 2px !important;
    animation: rc-wheel-scroll 1.6s ease-in-out infinite !important;
}
@keyframes rc-wheel-scroll {
    0%   { transform: translateY(0); opacity: 1; }
    70%  { transform: translateY(10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 0; }
}
.rc-hint-txt {
    font-size: 11px !important;
    color: rgba(255,255,255,0.25) !important;
    letter-spacing: 0.8px !important;
    font-weight: 500 !important;
}

/* ── Responsive: old scroll storytelling (unused) ── */
@media (max-width: 640px) {
    .reality-check.rc-story { height: 600vh !important; }
}

/* ============================================================
   RC2 — Cinematic Scroll Storytelling (full redesign)
   ============================================================ */

.rc2 {
    height: 650vh;
    position: relative;
    background: #080201;
    touch-action: pan-y;
}

.rc2-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Background blobs ── */
.rc2-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.rc2-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
}
.rc2-b1 {
    width: 640px; height: 640px;
    background: radial-gradient(circle, rgba(181,86,74,0.22) 0%, transparent 60%);
    top: -160px; right: -120px;
    animation: rc2drift 16s ease-in-out infinite alternate;
}
.rc2-b2 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(100,25,10,0.18) 0%, transparent 60%);
    bottom: -120px; left: -80px;
    animation: rc2drift 20s ease-in-out infinite alternate-reverse;
}
.rc2-b3 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(160,55,30,0.14) 0%, transparent 60%);
    top: 30%; left: 33%;
    animation: rc2drift 24s ease-in-out infinite alternate;
}
@keyframes rc2drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(28px, 18px) scale(1.07); }
}

/* ── Center headline ── */
.rc2-hl {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    pointer-events: none;
    will-change: opacity, transform;
}
.rc2-pill {
    display: inline-block;
    background: rgba(181,86,74,0.16);
    border: 1px solid rgba(181,86,74,0.28);
    color: #E09080;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 100px;
    margin-bottom: 18px;
}
.rc2-h2 {
    font-size: clamp(36px, 5.5vw, 70px);
    font-weight: 800;
    color: rgba(255,245,240,0.92);
    line-height: 1.15;
    margin: 0;
    letter-spacing: -1px;
}
.rc2-h2 em {
    font-style: normal;
    color: #C4634A;
}

/* ── Card field (position layer) ── */
.rc2-field {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

/* Wrapper handles absolute position only — no transform conflict with JS */
.rc2-wrap {
    position: absolute;
}
.rc2-wrap[data-pos="tr"] { top: 7%;           right: 4%; }
.rc2-wrap[data-pos="l"]  { top: 50%;          left: 3%;  transform: translateY(-50%); }
.rc2-wrap[data-pos="br"] { bottom: 8%;        right: 4%; }
.rc2-wrap[data-pos="tl"] { top: 7%;           left: 4%; }
.rc2-wrap[data-pos="bl"] { bottom: 8%;        left: 4%; }
.rc2-wrap[data-pos="r"]  { top: 50%;          right: 3%; transform: translateY(-50%); }

/* Card — JS controls opacity / transform / filter (NO !important on these) */
.rc2-card {
    width: 262px;
    opacity: 0;
    transform: translateY(44px) scale(0.90);
    filter: blur(7px);
    will-change: opacity, transform, filter;
    background: rgba(255,255,255,0.055);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 18px;
    padding: 22px 20px;
    direction: rtl;
    box-shadow: 0 18px 50px rgba(0,0,0,0.38), 0 1px 0 rgba(255,255,255,0.07) inset;
    pointer-events: none;
}
.rc2-cn {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(181,86,74,0.65);
    margin-bottom: 9px;
}
.rc2-ci {
    display: block;
    font-size: 26px;
    line-height: 1;
    margin-bottom: 9px;
}
.rc2-card h3 {
    font-size: 14.5px;
    font-weight: 700;
    color: rgba(255,245,240,0.90);
    margin: 0 0 6px;
    line-height: 1.4;
}
.rc2-card p {
    font-size: 12px;
    color: rgba(255,245,240,0.38);
    margin: 0;
    line-height: 1.7;
}

/* ── Final reveal ── */
.rc2-finale {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    padding: 24px 40px;
}
.rc2-fin-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 52px;
    align-items: center;
    max-width: 860px;
    width: 100%;
    direction: rtl;
}
.rc2-dash {
    background: rgba(255,255,255,0.048);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.rc2-dash-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.065);
}
.rc2-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rc2-r { background: #EF4444; }
.rc2-y { background: #F59E0B; }
.rc2-g { background: #22C55E; }
.rc2-dash-lbl {
    font-size: 10px;
    color: rgba(255,245,240,0.25);
    font-weight: 600;
    letter-spacing: 0.4px;
    margin-right: 6px;
}
.rc2-metrics {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.055);
}
.rc2-met {
    flex: 1;
    padding: 14px 12px;
    border-left: 1px solid rgba(255,255,255,0.055);
    text-align: center;
}
.rc2-met:last-child { border-left: none; }
.rc2-met b {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: #E07868;
    margin-bottom: 3px;
    font-style: normal;
}
.rc2-met span {
    font-size: 9.5px;
    color: rgba(255,245,240,0.28);
    font-weight: 500;
}
.rc2-barchart {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 72px;
    padding: 10px 14px 8px;
}
.rc2-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: rgba(181,86,74,0.28);
}
.rc2-bar-hi {
    background: linear-gradient(to top, #B5564A, #E07868);
    box-shadow: 0 0 10px rgba(181,86,74,0.45);
}
.rc2-fin-copy {
    text-align: right;
    direction: rtl;
}
.rc2-fin-copy h2 {
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 800;
    color: rgba(255,245,240,0.94);
    line-height: 1.22;
    margin: 0 0 14px;
    letter-spacing: -0.4px;
}
.rc2-fin-copy h2 em {
    font-style: normal;
    color: #C4634A;
}
.rc2-fin-copy p {
    font-size: 13.5px;
    color: rgba(255,245,240,0.38);
    margin: 0 0 24px;
    line-height: 1.75;
}
.rc2-fin-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #B5564A;
    color: #fff;
    padding: 13px 28px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    pointer-events: auto;
    transition: background 0.22s, transform 0.22s, box-shadow 0.22s;
    box-shadow: 0 5px 20px rgba(181,86,74,0.36);
    direction: rtl;
}
.rc2-fin-btn:hover {
    background: #8A3828;
    transform: translateY(-2px);
    box-shadow: 0 9px 28px rgba(181,86,74,0.46);
}

/* ── Vertical progress line ── */
.rc2-prog {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 10;
}
.rc2-prog-track {
    width: 2px;
    height: 150px;
    background: rgba(255,255,255,0.09);
    border-radius: 2px;
    overflow: hidden;
}
.rc2-prog-fill {
    width: 100%;
    height: 0%;
    background: linear-gradient(to bottom, #C4634A, #E07868);
    border-radius: 2px;
    will-change: height;
}
.rc2-prog-num {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.28);
    letter-spacing: 1.5px;
    min-height: 14px;
    text-align: center;
}

/* ── Scroll hint ── */
.rc2-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 10;
    transition: opacity 0.5s ease;
}
.rc2-hint.gone {
    opacity: 0;
    pointer-events: none;
}
.rc2-hint-mouse {
    width: 22px; height: 34px;
    border: 1.5px solid rgba(255,255,255,0.20);
    border-radius: 11px;
    display: flex;
    justify-content: center;
    padding-top: 5px;
}
.rc2-hint-whl {
    width: 2px; height: 6px;
    background: rgba(255,255,255,0.36);
    border-radius: 2px;
    animation: rc2wheel 1.8s ease-in-out infinite;
}
@keyframes rc2wheel {
    0%   { transform: translateY(0); opacity: 1; }
    65%  { transform: translateY(9px); opacity: 0; }
    100% { transform: translateY(0); opacity: 0; }
}
.rc2-hint span {
    font-size: 10px;
    color: rgba(255,255,255,0.20);
    letter-spacing: 1px;
    font-weight: 500;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .rc2-card { width: 224px; }
    .rc2-cn { font-size: 9px; }
    .rc2-wrap[data-pos="tr"] { top: 4%; right: 2%; }
    .rc2-wrap[data-pos="tl"] { top: 4%; left: 2%; }
    .rc2-wrap[data-pos="br"] { bottom: 4%; right: 2%; }
    .rc2-wrap[data-pos="bl"] { bottom: 4%; left: 2%; }
    .rc2-fin-inner { grid-template-columns: 1fr; gap: 24px; }
    .rc2-finale { align-items: flex-end; padding-bottom: 80px; }
}
@media (max-width: 600px) {
    .rc2 { height: 700vh; }
    .rc2-prog { left: 14px; }
    .rc2-wrap {
        top: auto !important;
        bottom: 9% !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
    .rc2-card { width: calc(100vw - 56px); max-width: 320px; }
    .rc2-fin-inner { grid-template-columns: 1fr; gap: 18px; }
    .rc2-finale { padding: 16px 16px 72px; align-items: flex-end; }
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║  LUXURY UPGRADE — WOW Women Salon                        ║
   ║  Warm Beige · Brown · Copper · Feminine · Premium        ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* ── Base ── */
body {
    background: #F6F0E8;
    color: #2F241F;
}

/* ── Navbar ── */
.navbar {
    background: linear-gradient(90deg, rgba(104,67,52,0.70), rgba(123,79,59,0.62));
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    border-bottom: 1px solid rgba(255,248,242,0.18);
    box-shadow: 0 8px 30px rgba(54,32,24,0.10);
}
.navbar.scrolled,
.navbar.nav-on-light,
.navbar.nav-on-dark {
    background: linear-gradient(90deg, rgba(104,67,52,0.84), rgba(123,79,59,0.78));
    box-shadow: 0 8px 32px rgba(54,32,24,0.18);
}
.logo-text { color: #FFF8F2; }
.nav-links a {
    color: #FFF8F2;
    position: relative;
}
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255,248,242,0.70);
    transform: scaleX(0);
    transition: transform 0.24s ease;
    transform-origin: right;
    border-radius: 2px;
}
.nav-links a:hover { color: #FFFFFF; }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { font-size: 14px; }
.hamburger span { background: #FFF8F2; }

/* Mobile nav overlay */
@media (max-width: 768px) {
    .nav-links {
        background: rgba(104,67,52,0.97);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-top: 1px solid rgba(255,248,242,0.16);
        box-shadow: 0 8px 32px rgba(54,32,24,0.18);
    }
    .nav-links a { color: #FFF8F2; }
}

/* ── Buttons ── */
.btn-primary {
    background: linear-gradient(135deg, #B86F52 0%, #C4835F 100%);
    color: #FFFDF9;
    border-color: transparent;
    box-shadow: 0 4px 18px rgba(184,111,82,0.30), 0 1px 0 rgba(255,255,255,0.18) inset;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #9A5B42 0%, #B06B4E 100%);
    box-shadow: 0 10px 32px rgba(184,111,82,0.40), 0 1px 0 rgba(255,255,255,0.18) inset;
}
.btn-ghost {
    background: rgba(47,36,31,0.04);
    color: #6A5145;
    border-color: rgba(47,36,31,0.16);
}
.btn-ghost:hover {
    background: rgba(47,36,31,0.08);
    border-color: rgba(184,111,82,0.40);
    color: #B86F52;
}
.btn-outline { color: #B86F52; border-color: #B86F52; }
.btn-outline:hover { background: rgba(184,111,82,0.08); }

/* ── Hero — restored to original (image bg + right-aligned text) ── */

/* ── Hero visual column — floating problem cards ── */
.hero-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px 0;
}
.hv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    max-width: 400px;
}
.hv-card {
    background: rgba(250,247,242,0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(184,111,82,0.14);
    border-radius: 20px;
    padding: 18px 16px;
    text-align: right;
    direction: rtl;
    box-shadow: 0 6px 24px rgba(47,36,31,0.09), 0 1px 0 rgba(255,255,255,0.85) inset;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.hv-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 14px 36px rgba(47,36,31,0.13), 0 1px 0 rgba(255,255,255,0.85) inset;
}
.hv-card-ico {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: rgba(184,111,82,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: #B86F52;
}
.hv-card h4 {
    font-size: 12.5px;
    font-weight: 700;
    color: #2F241F;
    margin: 0 0 4px;
    line-height: 1.4;
}
.hv-card p {
    font-size: 11px;
    color: #9A8070;
    line-height: 1.6;
    margin: 0;
}
/* Stagger float animations */
.hv-card:nth-child(1) { animation: hvfloat-a 5.0s ease-in-out infinite; }
.hv-card:nth-child(2) { animation: hvfloat-b 6.2s ease-in-out infinite 1.0s; }
.hv-card:nth-child(3) { animation: hvfloat-b 5.8s ease-in-out infinite 0.5s; }
.hv-card:nth-child(4) { animation: hvfloat-a 6.5s ease-in-out infinite 1.5s; }
@keyframes hvfloat-a {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-9px); }
}
@keyframes hvfloat-b {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-7px); }
}
/* Hero badge */
.hv-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #B86F52, #C2A477);
    color: #FFFDF9;
    border-radius: 50px;
    padding: 10px 22px;
    box-shadow: 0 8px 24px rgba(184,111,82,0.32);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.hv-badge-num { font-size: 17px; font-weight: 900; }
.hv-badge-txt { opacity: 0.90; }

/* ── Shared section headers ── */
.section-tag {
    display: inline-block;
    background: rgba(184,111,82,0.10);
    color: #B86F52;
    border: 1px solid rgba(184,111,82,0.20);
    padding: 5px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    margin-bottom: 16px;
}
.section-title { color: #2F241F; }
.section-sub { color: #6A5145; }

/* ── Features section ── */
.features-section { background: #EFE4D6; position: relative; overflow: hidden; }
.features-section::before {
    content: '';
    position: absolute;
    top: -80px; left: -80px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(184,111,82,0.10) 0%, transparent 60%);
    pointer-events: none;
}
.feature-card {
    background: #FAF7F2;
    border: 1px solid rgba(184,111,82,0.12);
    color: #2F241F;
    box-shadow: 0 4px 20px rgba(47,36,31,0.07);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(47,36,31,0.12);
    border-color: rgba(184,111,82,0.25);
}
.feature-card h3 { color: #2F241F; }
.feature-card p  { color: #6A5145; }
.feature-icon { border-radius: 14px; }
.feature-icon-pink   { background: rgba(184,111,82,0.12); color: #B86F52; }
.feature-icon-teal   { background: rgba(194,164,119,0.14); color: #9A7A52; }
.feature-icon-purple { background: rgba(106,81,69,0.10); color: #6A5145; }

/* ── How it works ── */
.stair-section { background: #F6F0E8; }
.sc-title { color: #2F241F; }
.sc-desc  { color: #6A5145; }

/* ── Compare section ── */
.pcompare-section { background: linear-gradient(155deg, #EDE3D6 0%, #F4EBE0 50%, #ECE3D4 100%); }
.pctab.active {
    background: linear-gradient(135deg, #B86F52, #A05840);
    box-shadow: 0 4px 18px rgba(184,111,82,0.38);
}
.pca-col.pca-wow {
    border-color: rgba(184,111,82,0.24);
    box-shadow: 0 8px 48px rgba(184,111,82,0.14);
}
.pci-text { color: #2F241F; }
.pca-col-label { color: #2F241F; }

/* ── Gift / Free Report ── */
.gift-section { background: linear-gradient(155deg, #fffaf6 0%, #f5ece0 50%, #fffbf7 100%); }
.gift-primary-cta { background: linear-gradient(135deg, #B86F52, #9E5038); box-shadow: 0 10px 30px rgba(184,111,82,0.30); }
.gift-free-label { background: rgba(184,111,82,0.09); border-color: rgba(184,111,82,0.20); color: #8f4f38; }
.gb-icon { background: rgba(184,111,82,0.11); color: #b86f52; }
.report-free-badge { background: linear-gradient(135deg, #b86f52, #c4835f); }
.gift-benefit { background: rgba(255,253,249,0.92); border-color: rgba(184,111,82,0.12); }

/* ── FAQ ── */
.faq-section { background: #EFE4D6; }
.faq-item { border-color: rgba(184,111,82,0.14); background: transparent; }
.faq-item.open { background: rgba(250,247,242,0.60); border-radius: 16px; }
.faq-q {
    color: #2F241F;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
}
.faq-q:hover { color: #B86F52; }
.faq-arr { color: #B86F52; }
.faq-item.open .faq-q { color: #B86F52; }
.faq-ans p { color: #6A5145; line-height: 1.8; }


/* ── Final CTA ── */
.final-cta {
    background: #2F241F;
    position: relative;
    overflow: hidden;
}
.final-cta::before {
    content: '';
    position: absolute;
    top: -100px; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(184,111,82,0.16) 0%, transparent 60%);
    filter: blur(40px);
    pointer-events: none;
}
.cta-title { color: #FAF7F2; }
.cta-sub   { color: rgba(250,247,242,0.52); }
.cta-form-box {
    background: rgba(250,247,242,0.05);
    border: 1px solid rgba(250,247,242,0.10);
    border-radius: 24px;
}
.form-title { color: #FAF7F2; }
.f-input {
    background: rgba(250,247,242,0.07);
    border: 1px solid rgba(250,247,242,0.14);
    color: #FAF7F2;
}
.f-input::placeholder { color: rgba(250,247,242,0.30); }
.f-input:focus {
    outline: none;
    border-color: rgba(184,111,82,0.60);
    box-shadow: 0 0 0 3px rgba(184,111,82,0.14);
}
.form-note { color: rgba(250,247,242,0.38); }
.wa-section p { color: rgba(250,247,242,0.45); }

/* ── Footer ── */
.footer {
    background: #2F241F;
    border-top: 1px solid rgba(184,111,82,0.14);
}
.footer-brand-name { color: rgba(250,247,242,0.80); }
.footer-nav a { color: rgba(250,247,242,0.45); transition: color 0.2s; }
.footer-nav a:hover { color: #C2A477; }
.footer-copy { color: rgba(250,247,242,0.28); }
.footer-logo { opacity: 0.75; filter: brightness(1.5); }

/* ── Scroll-reveal animation system ── */
.scroll-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1),
                transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.scroll-reveal.in-view { opacity: 1; transform: translateY(0); }
.scroll-reveal.sr-delay-1 { transition-delay: 0.08s; }
.scroll-reveal.sr-delay-2 { transition-delay: 0.16s; }
.scroll-reveal.sr-delay-3 { transition-delay: 0.24s; }
.scroll-reveal.sr-delay-4 { transition-delay: 0.32s; }
.scroll-reveal.sr-delay-5 { transition-delay: 0.40s; }
.scroll-reveal.sr-delay-6 { transition-delay: 0.48s; }

/* ── Section progress indicator ── */
.sec-prog {
    position: fixed;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
.sec-prog.visible { opacity: 1; }
.sp-line {
    width: 2px;
    height: 100px;
    background: rgba(184,111,82,0.15);
    border-radius: 2px;
    overflow: hidden;
}
.sp-fill {
    width: 100%;
    height: 0%;
    background: linear-gradient(to bottom, #B86F52, #C2A477);
    border-radius: 2px;
    transition: height 0.15s linear;
}
.sp-num {
    font-size: 9px;
    font-weight: 800;
    color: rgba(184,111,82,0.55);
    letter-spacing: 1.8px;
    text-align: center;
    min-height: 12px;
}

/* ── Responsive luxury overrides ── */
@media (max-width: 900px) {
    .sec-prog { display: none; }
}

/* ===== PROBLEM STORY SECTION ===================================
   Sticky scroll-driven showcase: six salon problems + solutions
================================================================ */

.problem-story-section {
    position: relative;
    height: 600vh;
    touch-action: pan-y;
}

.problem-story-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Background */
.problem-story-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        #F8EDE3 0%, #F3E4D4 35%, #EDD6C0 65%, #E8CEAF 100%);
    z-index: 0;
}
.problem-story-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 72% 50%,
            rgba(212,180,155,0.38) 0%, transparent 68%),
        radial-gradient(ellipse 40% 40% at 18% 80%,
            rgba(228,200,168,0.22) 0%, transparent 58%);
}

/* Layout */
.problem-story-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 72px;
    direction: rtl;
}

/* Copy column (right in RTL) */
.ps-copy {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    direction: rtl;
    text-align: right;
}

.ps-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(156,90,46,0.10);
    color: #8C4D22;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid rgba(156,90,46,0.18);
    width: fit-content;
}

.ps-heading {
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 900;
    color: #2a1408;
    line-height: 1.25;
    margin: 0;
}
.ps-heading span { color: #9C5A2E; display: block; }

.ps-desc {
    font-size: 14.5px;
    line-height: 1.75;
    color: #6B4A38;
    margin: 0;
}

/* Progress bar */
.ps-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    direction: ltr;
}
.ps-num {
    font-size: 26px;
    font-weight: 900;
    color: #2a1408;
    line-height: 1;
    min-width: 30px;
    transition: opacity 0.25s ease;
    font-variant-numeric: tabular-nums;
}
.ps-line {
    flex: 1;
    height: 2px;
    background: rgba(44,20,8,0.12);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.ps-line-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 16.67%;
    background: linear-gradient(to right, #9C5A2E, #C07842);
    border-radius: 2px;
    transition: width 0.55s cubic-bezier(0.4,0,0.2,1);
}
.ps-total {
    font-size: 13px;
    font-weight: 600;
    color: rgba(44,20,8,0.32);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Nav buttons — hidden; navigation via scroll/swipe/keyboard */
.ps-nav { display: none !important; }
.ps-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(44,20,8,0.18);
    background: rgba(255,252,248,0.80);
    color: #4a2d1c;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}
.ps-nav-btn:hover:not(:disabled) {
    background: #FFFAF5;
    border-color: rgba(44,20,8,0.30);
    box-shadow: 0 2px 8px rgba(44,20,8,0.08);
}
.ps-nav-btn:disabled { opacity: 0.28; cursor: default; }
.ps-nav-btn:focus-visible { outline: 2px solid #9C5A2E; outline-offset: 2px; }

/* Cards stage (left in RTL) */
.ps-stage {
    flex: 1;
    position: relative;
    min-height: 230px;
    align-self: stretch;
    display: flex;
    align-items: center;
}

/* Individual state */
.ps-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    direction: rtl;
    transition:
        opacity 0.45s ease,
        transform 0.45s cubic-bezier(0.4,0,0.2,1),
        visibility 0.45s ease;
    will-change: transform, opacity;
}
.ps-state.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    z-index: 5;
    visibility: visible;
    pointer-events: auto;
}
.ps-state.is-completed {
    opacity: 0.22;
    transform: translateY(-20px) scale(0.93);
    z-index: 2;
    visibility: visible;
    pointer-events: none;
}
.ps-state.is-upcoming {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
    z-index: 1;
    visibility: hidden;
    pointer-events: none;
}

/* Cards */
.ps-card {
    flex: 1;
    border-radius: 24px;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    direction: rtl;
    text-align: right;
    min-width: 0;
}
.ps-before {
    background: #FBF0EB;
    border: 1.5px solid rgba(179,58,58,0.14);
    box-shadow: 0 4px 20px rgba(179,58,58,0.06), 0 1px 4px rgba(44,20,8,0.06);
}
.ps-after {
    background: #FEFAF5;
    border: 1.5px solid rgba(107,140,82,0.18);
    box-shadow: 0 4px 20px rgba(107,140,82,0.07), 0 1px 4px rgba(44,20,8,0.04);
    transition: box-shadow 0.45s ease;
}
.ps-state.is-active .ps-after {
    box-shadow:
        0 8px 40px rgba(107,140,82,0.15),
        0 2px 8px rgba(44,20,8,0.05),
        0 0 0 4px rgba(107,140,82,0.07);
}

.ps-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.ps-tag-before { color: #B33A3A; }
.ps-tag-after  { color: #4E7038; }

.ps-card-title {
    font-size: clamp(14px, 1.4vw, 17px);
    font-weight: 800;
    color: #2a1408;
    line-height: 1.3;
    margin: 0;
}
.ps-card-body {
    font-size: 13px;
    line-height: 1.72;
    color: #6B4A38;
    margin: 0;
}

/* Connector arrow */
.ps-arrow {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    height: 56px;
}
.ps-arrow-line {
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom,
        rgba(179,58,58,0.28) 0%, rgba(107,140,82,0.28) 100%);
    border-radius: 2px;
    position: relative;
    overflow: visible;
}
.ps-arrow-dot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9C5A2E;
    opacity: 0;
}
.ps-state.is-active .ps-arrow-dot {
    animation: ps-dot-fall 1.7s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes ps-dot-fall {
    0%   { top: 0;                opacity: 0; background: rgba(179,58,58,0.8); }
    10%  { opacity: 1; }
    80%  { top: calc(100% - 8px); opacity: 0.6; background: rgba(107,140,82,0.8); }
    100% { top: calc(100% - 8px); opacity: 0; }
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 1280px) {
    .problem-story-wrap { gap: 56px; padding: 0 36px; }
    .ps-copy { flex: 0 0 280px; }
}

@media (max-width: 1024px) {
    .problem-story-wrap { gap: 40px; padding: 0 28px; }
    .ps-copy { flex: 0 0 256px; }
    .ps-card { padding: 22px 18px; }
}

@media (max-width: 768px) {
    .problem-story-section { height: auto; }
    .problem-story-sticky  { position: relative; height: auto; min-height: 0; overflow: visible; }
    .problem-story-wrap {
        flex-direction: column;
        padding: 52px 20px 44px;
        gap: 28px;
        align-items: stretch;
        direction: rtl;
    }
    .ps-copy  { flex: none; }
    .ps-stage { min-height: 0; position: relative; align-self: auto; }
    /* States become stacked; show only the active one */
    .ps-state { position: relative; inset: auto; flex-direction: column; gap: 12px; align-items: stretch; }
    .ps-state.is-completed,
    .ps-state.is-upcoming  { display: none; visibility: hidden; }
    .ps-state.is-active    { display: flex; opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
    /* Horizontal connector */
    .ps-arrow { flex: none; width: 100%; height: 32px; flex-direction: row; }
    .ps-arrow-line {
        width: 100%; height: 2px;
        background: linear-gradient(to right, rgba(179,58,58,0.28), rgba(107,140,82,0.28));
    }
    .ps-arrow-dot { top: 50%; left: 0; transform: translateY(-50%); }
    .ps-state.is-active .ps-arrow-dot { animation: ps-dot-slide 1.7s cubic-bezier(0.4,0,0.6,1) infinite; }
}

@keyframes ps-dot-slide {
    0%   { left: 0;                   opacity: 0; }
    10%  { opacity: 1; }
    80%  { left: calc(100% - 8px);    opacity: 0.6; }
    100% { left: calc(100% - 8px);    opacity: 0; }
}

@media (max-width: 430px) {
    .problem-story-wrap { padding: 40px 16px 32px; }
    .ps-card { padding: 20px 16px; border-radius: 20px; }
    .ps-heading { font-size: clamp(22px, 6vw, 28px); }
}

@media (prefers-reduced-motion: reduce) {
    .ps-state, .ps-after { transition: opacity 0.15s ease; }
    .ps-line-fill         { transition: width 0.15s ease; }
    .ps-arrow-dot         { animation: none !important; }
}