@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Bebas+Neue&display=swap');

:root {
  --primary: #b8860b;
  --primary-dark: #7a5a00;
  --primary-light: #d9a520;
  --primary-100: #fff0bf;
  --primary-50: #fff9e8;
  --accent: #111111;
  --success: #c69312;
  --warning: #e0ab1a;
  --danger: #ef4444;
  --g50: #faf8f2; --g100: #f1ede3; --g200: #dfd7c6; --g300: #c6baa1;
  --g400: #9b8f78; --g500: #756a56; --g600: #5b523f; --g700: #443d2f;
  --g800: #2e291f; --g900: #1d1913;
  --white: #fff;
  --r: 12px; --r-sm: 8px; --r-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.05);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.08),0 8px 10px -6px rgba(0,0,0,.04);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,.15);
  --tr: .3s cubic-bezier(.4,0,.2,1);
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:linear-gradient(180deg,#fffefc 0%,#fff8f1 100%);color:var(--g800);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
[dir="rtl"] body{font-family:'Tajawal',sans-serif}
[dir="ltr"] body{font-family:'DM Sans',sans-serif}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
img{max-width:100%;display:block}
ul{list-style:none}

.gym-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(184,134,11,.16), transparent 60%),
    radial-gradient(1000px 520px at 90% 15%, rgba(17,17,17,.1), transparent 62%),
    radial-gradient(900px 520px at 50% 95%, rgba(184,134,11,.09), transparent 65%);
}
.gym-bg canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.72;
}
.gym-bg-grain{
  position:absolute;
  inset:-100%;
  background-image:
    radial-gradient(rgba(20,20,20,.14) 1px, transparent 1px),
    radial-gradient(rgba(184,134,11,.08) 1px, transparent 1px);
  background-size:3px 3px, 5px 5px;
  background-position:0 0, 1px 2px;
  opacity:.16;
  animation:grainShift .9s steps(2) infinite;
}
.gym-bg-vignette{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 45%, transparent 35%, rgba(0,0,0,.2) 100%);
  opacity:.55;
}
.gym-bg-illustration{
  position:absolute;
  width:420px;
  height:420px;
  opacity:.22;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.12));
  background-repeat:no-repeat;
  background-size:contain;
}
.gym-bg-illustration-left{
  left:-90px;
  bottom:8%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%237a5a00' stroke-width='10' stroke-linecap='round'%3E%3Crect x='112' y='146' width='96' height='28' rx='10'/%3E%3Cpath d='M106 128v64M214 128v64M80 138v44M240 138v44M58 146v28M262 146v28'/%3E%3C/g%3E%3C/svg%3E");
  animation:illuBobA 14s ease-in-out infinite;
}
.gym-bg-illustration-right{
  right:-120px;
  top:16%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23151515' stroke-width='10' stroke-linecap='round'%3E%3Ccircle cx='160' cy='160' r='92'/%3E%3Ccircle cx='160' cy='160' r='48'/%3E%3Cpath d='M160 68v32M252 160h-32M160 252v-32M68 160h32'/%3E%3C/g%3E%3C/svg%3E");
  animation:illuBobB 16s ease-in-out infinite;
}
.gym-bg-pixels{
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:
    radial-gradient(rgba(184,134,11,.8) 1px, transparent 1px),
    radial-gradient(rgba(17,17,17,.7) 1px, transparent 1px);
  background-size:16px 16px, 22px 22px;
  background-position:0 0, 11px 7px;
  mix-blend-mode:multiply;
  animation:pixelWave 10s linear infinite;
}
.gym-bg-sticker{
  position:absolute;
  width:54px;
  height:54px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,248,219,.9));
  border:1px solid rgba(122,90,0,.28);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
  opacity:.78;
}
.gym-bg-sticker-1{top:14%;left:36%;animation:stickerFloat 8s ease-in-out infinite}
.gym-bg-sticker-2{top:58%;right:30%;animation:stickerFloat 9s ease-in-out infinite 1.3s}
.gym-bg-sticker-3{bottom:14%;left:58%;animation:stickerFloat 7.5s ease-in-out infinite .7s}
.gym-bg::before{
  content:'';
  position:absolute;
  inset:-10%;
  background-image:
    linear-gradient(rgba(184,134,11,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,134,11,.06) 1px, transparent 1px);
  background-size:80px 80px, 80px 80px;
  opacity:.26;
  transform:perspective(700px) rotateX(58deg) translateY(-12%);
  transform-origin:top;
  animation:gridDrift 22s linear infinite;
}
.gym-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 22% 72%, rgba(217,165,32,.2), transparent 18%),
    radial-gradient(circle at 74% 28%, rgba(184,134,11,.17), transparent 16%),
    radial-gradient(circle at 52% 48%, rgba(17,17,17,.08), transparent 22%);
  filter:blur(12px);
  animation:orbShift 18s ease-in-out infinite;
}
.gym-bg-item{
  position:absolute;
  color:rgba(40,32,20,.25);
  text-shadow:0 12px 30px rgba(0,0,0,.12);
  will-change:transform,opacity;
  opacity:.45;
}
.gym-bg-item-1{top:8%;left:4%;font-size:96px;animation:gymDriftA 24s ease-in-out infinite}
.gym-bg-item-2{top:18%;right:6%;font-size:82px;animation:gymDriftB 20s linear infinite}
.gym-bg-item-3{top:42%;left:9%;font-size:110px;animation:gymDriftC 28s ease-in-out infinite}
.gym-bg-item-4{top:62%;right:9%;font-size:86px;animation:gymDriftB 24s linear infinite reverse}
.gym-bg-item-5{top:80%;left:40%;font-size:100px;animation:gymDriftA 26s ease-in-out infinite reverse}

main,.footer,.mobile-menu{position:relative;z-index:1}

.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:100px 0;position:relative}
.section-alt{background:linear-gradient(180deg,#fffaf5 0%,#fff4ea 100%)}
.section-title{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;color:var(--g900);text-align:center;margin-bottom:12px;line-height:1.3}
.section-sub{font-size:clamp(1rem,2vw,1.15rem);color:var(--g500);text-align:center;margin-bottom:60px;max-width:600px;margin-left:auto;margin-right:auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 32px;border-radius:var(--r);font-size:1rem;font-weight:600;transition:all var(--tr);white-space:nowrap}
.btn-primary{background:var(--primary);color:var(--white);box-shadow:0 4px 14px rgba(184,134,11,.35)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(184,134,11,.45)}
.btn-primary:focus-visible{outline:3px solid var(--primary-light);outline-offset:2px}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary)}
.btn-outline:hover{background:var(--primary-50);transform:translateY(-2px)}
.btn-outline:focus-visible{outline:3px solid var(--primary-light);outline-offset:2px}
.btn-white{background:var(--white);color:var(--primary);box-shadow:var(--shadow)}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

.demo-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(184,134,11,.14);color:var(--primary-dark);font-size:.8rem;font-weight:700;padding:6px 14px;border-radius:100px;letter-spacing:.03em;border:1px solid rgba(184,134,11,.3)}

/* ═══ HEADER ═══ */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,251,246,.93);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--g200);transition:all var(--tr)}
.header.scrolled{box-shadow:var(--shadow)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-size:1.35rem;font-weight:800;color:var(--primary);display:flex;align-items:center;gap:10px}
.logo-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:10px;display:flex;align-items:center;justify-content:center;color:white;font-weight:900;font-size:1.1rem}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{padding:8px 16px;border-radius:var(--r-sm);font-size:.9rem;font-weight:500;color:var(--g600);transition:all var(--tr)}
.nav-link:hover{color:var(--primary);background:var(--primary-50)}
.nav-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.lang-toggle{padding:8px 18px;border-radius:100px;font-size:.85rem;font-weight:600;color:var(--primary);border:1.5px solid var(--primary);transition:all var(--tr);background:transparent}
.lang-toggle:hover{background:var(--primary);color:var(--white)}
.mobile-menu-btn{display:none;width:44px;height:44px;border-radius:var(--r-sm);align-items:center;justify-content:center;color:var(--g700)}
.mobile-menu{display:none;position:fixed;top:72px;left:0;right:0;background:var(--white);border-bottom:1px solid var(--g200);padding:16px 24px;box-shadow:var(--shadow-lg);z-index:999}
.mobile-menu.open{display:block}
.mobile-menu .nav-link{display:block;padding:14px 16px;font-size:1rem;border-bottom:1px solid var(--g100)}
@media(max-width:900px){.nav-links{display:none}.mobile-menu-btn{display:flex}}

/* ═══ HERO ═══ */
.hero{padding-top:140px;padding-bottom:100px;background:linear-gradient(135deg,#fff7dd 0%,#fffdf4 52%,#f5efe0 100%);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-100px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(184,134,11,.16) 0%,transparent 70%);border-radius:50%}
.hero::after{content:'';position:absolute;bottom:-150px;left:-150px;width:400px;height:400px;background:radial-gradient(circle,rgba(17,17,17,.08) 0%,transparent 70%);border-radius:50%}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
.hero-content h1{font-size:clamp(2rem,5vw,3.25rem);font-weight:900;color:var(--g900);line-height:1.2;margin:20px 0 24px}
.hero-content p{font-size:clamp(1rem,2vw,1.2rem);color:var(--g500);margin-bottom:36px;line-height:1.8}
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px}
.hero-stat{text-align:center}
.hero-stat-value{font-size:1.6rem;font-weight:800;color:var(--primary)}
.hero-stat-label{font-size:.8rem;color:var(--g500);margin-top:4px}

.hero-visual{position:relative}
.hero-showcase{background:rgba(255,255,255,.78);border:1px solid var(--g200);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-xl)}
.showcase-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.showcase-title{font-size:1rem;font-weight:800;color:var(--g900)}
.showcase-chip{display:inline-flex;align-items:center;padding:6px 12px;border-radius:100px;background:var(--primary-50);border:1px solid var(--g200);font-size:.75rem;font-weight:700;color:var(--primary-dark)}
.showcase-list{display:grid;gap:10px;margin-bottom:16px}
.showcase-item{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-radius:12px;background:var(--g50);border:1px solid var(--g200)}
.showcase-item-label{font-size:.82rem;color:var(--g600);font-weight:600}
.showcase-item strong{font-size:.92rem;color:var(--g900)}
.showcase-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.showcase-card{padding:14px;border-radius:12px;background:linear-gradient(135deg,#fff4cc,#fff9e6);border:1px solid var(--g200)}
.showcase-card-value{font-size:1.15rem;font-weight:800;color:var(--primary-dark);margin-bottom:4px}
.showcase-card-label{font-size:.78rem;color:var(--g600)}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-buttons{justify-content:center}
  .hero-visual{display:none}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
}

/* ═══ SOCIAL PROOF ═══ */
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-bottom:60px}
.testimonial-card{background:var(--white);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow);border:1px solid var(--g100);transition:all var(--tr)}
.testimonial-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.testimonial-header{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.testimonial-avatar{width:48px;height:48px;border-radius:50%;background:var(--primary-100);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;flex-shrink:0}
.testimonial-name{font-weight:700;color:var(--g900);font-size:1rem}
.testimonial-role{font-size:.82rem;color:var(--g500)}
.testimonial-stars{color:var(--warning);font-size:.9rem;margin-bottom:12px;letter-spacing:2px}
.testimonial-text{color:var(--g600);line-height:1.8;font-size:.95rem}
.counters-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.counter-card{text-align:center;padding:32px 16px;background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);border:1px solid var(--g100)}
.counter-value{font-size:clamp(2rem,4vw,2.75rem);font-weight:900;color:var(--primary);line-height:1}
.counter-label{font-size:.9rem;color:var(--g500);margin-top:8px}
@media(max-width:768px){.counters-grid{grid-template-columns:repeat(2,1fr)}}

/* ═══ SERVICES ═══ */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.service-card{background:var(--white);border-radius:var(--r-lg);padding:36px;box-shadow:var(--shadow-sm);border:1px solid var(--g200);transition:all var(--tr);position:relative;overflow:hidden}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--accent));transform:scaleX(0);transition:transform var(--tr);transform-origin:left}
[dir="rtl"] .service-card::before{transform-origin:right}
.service-card:hover::before{transform:scaleX(1)}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.service-icon{width:56px;height:56px;border-radius:14px;background:var(--primary-50);display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:1.5rem}
.service-title{font-size:1.15rem;font-weight:700;color:var(--g900);margin-bottom:10px}
.service-desc{color:var(--g500);font-size:.95rem;line-height:1.7}

/* ═══ BOOKING WIDGET ═══ */
.booking-widget{max-width:700px;margin:0 auto;background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--g200);overflow:hidden}
.booking-steps{display:flex;background:var(--g50);border-bottom:1px solid var(--g200);overflow-x:auto}
.booking-step{flex:1;padding:16px 10px;text-align:center;font-size:.78rem;font-weight:600;color:var(--g400);position:relative;transition:all var(--tr);min-width:90px}
.booking-step.active{color:var(--primary);background:var(--white)}
.booking-step.completed{color:var(--success)}
.booking-step-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:2px solid currentColor;font-size:.75rem;margin-bottom:4px}
.booking-step.active .booking-step-num{background:var(--primary);color:var(--white);border-color:var(--primary)}
.booking-step.completed .booking-step-num{background:var(--success);color:var(--white);border-color:var(--success)}
.booking-body{padding:36px;min-height:320px}
.booking-footer{display:flex;justify-content:space-between;padding:20px 36px;border-top:1px solid var(--g100)}

.service-options{display:flex;flex-direction:column;gap:12px}
.service-option{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border:2px solid var(--g200);border-radius:var(--r);cursor:pointer;transition:all var(--tr);background:var(--white);text-align:start;font-family:inherit}
.service-option:hover{border-color:var(--primary-light);background:var(--primary-50)}
.service-option.selected{border-color:var(--primary);background:var(--primary-50);box-shadow:0 0 0 3px rgba(184,134,11,.12)}
.service-option:focus-visible{outline:3px solid var(--primary-light);outline-offset:2px}
.service-option-info h4{font-weight:700;color:var(--g900);margin-bottom:2px}
.service-option-info span{font-size:.85rem;color:var(--g500)}
.service-option-price{font-weight:700;color:var(--primary);font-size:1.1rem}

.trainer-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.trainer-option{padding:24px 16px;border:2px solid var(--g200);border-radius:var(--r);text-align:center;cursor:pointer;transition:all var(--tr);font-family:inherit;background:var(--white)}
.trainer-option:hover{border-color:var(--primary-light)}
.trainer-option.selected{border-color:var(--primary);background:var(--primary-50);box-shadow:0 0 0 3px rgba(184,134,11,.12)}
.trainer-option:focus-visible{outline:3px solid var(--primary-light);outline-offset:2px}
.trainer-avatar{width:56px;height:56px;border-radius:50%;background:var(--primary-100);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.3rem;margin:0 auto 12px}
.trainer-name{font-weight:700;color:var(--g900);margin-bottom:2px}
.trainer-specialty{font-size:.82rem;color:var(--g500);margin-bottom:6px}
.trainer-rating{font-size:.85rem;color:var(--warning)}

.date-picker{margin-bottom:24px}
.date-picker label,.time-label{display:block;font-weight:600;margin-bottom:8px;color:var(--g700)}
.time-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px}
.time-slot{padding:12px;text-align:center;border:2px solid var(--g200);border-radius:var(--r-sm);font-size:.9rem;font-weight:600;cursor:pointer;transition:all var(--tr);background:var(--white);font-family:inherit}
.time-slot:hover{border-color:var(--primary-light)}
.time-slot.selected{background:var(--primary);color:var(--white);border-color:var(--primary)}
.time-slot:focus-visible{outline:3px solid var(--primary-light);outline-offset:2px}

.form-group{margin-bottom:20px}
.form-group label{display:block;font-weight:600;margin-bottom:8px;color:var(--g700);font-size:.9rem}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:2px solid var(--g200);border-radius:var(--r);font-size:1rem;font-family:inherit;color:var(--g800);background:var(--white);transition:border-color var(--tr)}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(184,134,11,.12)}
.form-group input::placeholder{color:var(--g400)}

.confirm-screen{text-align:center;padding:20px 0}
.confirm-icon{width:80px;height:80px;border-radius:50%;background:#fff4cc;color:var(--success);display:flex;align-items:center;justify-content:center;font-size:2.5rem;margin:0 auto 20px;animation:popIn .5s ease-out}
@keyframes popIn{0%{transform:scale(0)}70%{transform:scale(1.1)}100%{transform:scale(1)}}
.confirm-title{font-size:1.5rem;font-weight:800;color:var(--g900);margin-bottom:8px}
.confirm-sub{color:var(--g500);font-size:.9rem;margin-bottom:20px}
.whatsapp-badge{display:inline-flex;align-items:center;gap:8px;background:#fff4cc;color:#7a5a00;padding:10px 20px;border-radius:100px;font-weight:600;font-size:.9rem;margin-bottom:24px;animation:slideUp .5s ease-out .3s both}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.confirm-details{background:var(--g50);border-radius:var(--r);padding:20px;text-align:start;margin-bottom:20px}
.confirm-detail-row{display:flex;justify-content:space-between;padding:8px 0;font-size:.9rem}
.confirm-detail-row:not(:last-child){border-bottom:1px solid var(--g200)}
.confirm-detail-label{color:var(--g500)}
.confirm-detail-value{font-weight:600;color:var(--g800)}

/* ═══ PRICING ═══ */
.pricing-toggle{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:48px}
.pricing-toggle-label{font-size:.95rem;font-weight:600;color:var(--g500)}
.pricing-toggle-label.active{color:var(--primary)}
.pricing-toggle-btn{background:transparent;border:none;cursor:pointer}
.pricing-toggle-btn:hover{color:var(--primary-dark)}
.toggle-switch{width:52px;height:28px;background:var(--g300);border-radius:100px;position:relative;cursor:pointer;transition:background var(--tr)}
.toggle-switch.active{background:var(--primary)}
.toggle-switch::after{content:'';width:22px;height:22px;background:var(--white);border-radius:50%;position:absolute;top:3px;left:3px;transition:transform var(--tr);box-shadow:var(--shadow-sm)}
[dir="ltr"] .toggle-switch.active::after{transform:translateX(24px)}
[dir="rtl"] .toggle-switch::after{left:auto;right:3px}
[dir="rtl"] .toggle-switch.active::after{transform:translateX(-24px)}
.yearly-badge{font-size:.78rem;background:#fff4cc;color:#7a5a00;padding:4px 10px;border-radius:100px;font-weight:600}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px;align-items:start}
.pricing-card{background:var(--white);border-radius:var(--r-lg);padding:36px;box-shadow:var(--shadow);border:2px solid var(--g200);transition:all var(--tr);position:relative}
.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pricing-card.recommended{border-color:var(--primary);box-shadow:var(--shadow-lg),0 0 0 1px var(--primary);transform:scale(1.03)}
.pricing-card.recommended:hover{transform:scale(1.03) translateY(-4px)}
.recommended-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--primary);color:var(--white);padding:6px 20px;border-radius:100px;font-size:.8rem;font-weight:700;white-space:nowrap}
.pricing-name{font-size:1.25rem;font-weight:800;color:var(--g900);margin-bottom:8px}
.pricing-desc{font-size:.9rem;color:var(--g500);margin-bottom:24px;line-height:1.6}
.pricing-price{display:flex;align-items:baseline;gap:4px;margin-bottom:24px}
.pricing-price-stack{display:grid;gap:6px;align-items:start}
.pricing-line{display:flex;align-items:baseline;gap:4px;opacity:.45}
.pricing-line.active{opacity:1}
.pricing-amount{font-size:2.5rem;font-weight:900;color:var(--g900)}
.pricing-currency{font-size:1rem;font-weight:600;color:var(--g500)}
.pricing-period{font-size:.9rem;color:var(--g400)}
.pricing-billing-note{font-size:.8rem;color:var(--g500);margin-top:-12px;margin-bottom:18px}
.pricing-compare{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px}
.pricing-old{font-size:.8rem;color:var(--g500);text-decoration:line-through}
.pricing-new{font-size:.85rem;font-weight:700;color:var(--primary-dark)}
.pricing-save{font-size:.75rem;background:var(--primary-50);color:var(--primary-dark);padding:3px 8px;border-radius:999px;border:1px solid var(--g200)}
.pricing-features{margin-bottom:28px}
.pricing-feature{display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:.9rem;color:var(--g600)}
.pricing-check{color:var(--success);font-weight:700;flex-shrink:0;margin-top:2px}
.pricing-card .btn{width:100%}

/* ═══ TRANSFORMATION ═══ */
.transform-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media(max-width:768px){.transform-grid{grid-template-columns:1fr}}
.transform-col{border-radius:var(--r-lg);padding:36px}
.transform-before{background:linear-gradient(135deg,#fef2f2,#fff1f2);border:1px solid #fecaca}
.transform-after{background:linear-gradient(135deg,#fff8df,#fff3cc);border:1px solid #f3d27a}
.transform-label{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;padding:6px 16px;border-radius:100px;margin-bottom:24px}
.transform-before .transform-label{background:#fee2e2;color:#dc2626}
.transform-after .transform-label{background:#fff1be;color:#7a5a00}
.transform-item{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.06);gap:12px}
.transform-item:last-child{border-bottom:none}
.transform-text{font-size:.95rem;color:var(--g700);font-weight:500}
.transform-metric{font-size:.82rem;font-weight:700;padding:4px 12px;border-radius:100px;white-space:nowrap}
.transform-before .transform-metric{background:#fee2e2;color:#dc2626}
.transform-after .transform-metric{background:#fff1be;color:#7a5a00}

/* ═══ DASHBOARD PREVIEW ═══ */
.dashboard-preview{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--g200);overflow:hidden;max-width:1000px;margin:0 auto}
.dash-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:linear-gradient(135deg,#ffe4d3,#fff5ec);color:var(--g800);border-bottom:1px solid var(--g200)}
.dash-header-title{font-weight:700;font-size:.9rem}
.dash-dots{display:flex;gap:6px}
.dash-dot{width:10px;height:10px;border-radius:50%}
.dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:24px}
@media(max-width:768px){.dash-kpis{grid-template-columns:repeat(2,1fr)}}
.dash-kpi{background:var(--g50);border-radius:var(--r);padding:20px;text-align:center}
.dash-kpi-value{font-size:1.75rem;font-weight:900;color:var(--g900)}
.dash-kpi-label{font-size:.8rem;color:var(--g500);margin-top:4px}
.dash-kpi-change{font-size:.78rem;font-weight:700;margin-top:6px}
.dash-kpi-change.up{color:var(--success)}
.dash-kpi-change.down{color:var(--success)}
.dash-content{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;padding:0 24px 24px}
@media(max-width:768px){.dash-content{grid-template-columns:1fr}}
.dash-table{background:var(--white);border-radius:var(--r);border:1px solid var(--g200);overflow:hidden}
.dash-table-title{padding:16px 20px;font-weight:700;font-size:.9rem;border-bottom:1px solid var(--g200)}
.dash-table table{width:100%;border-collapse:collapse}
.dash-table th{padding:10px 16px;text-align:start;font-size:.75rem;font-weight:600;color:var(--g500);text-transform:uppercase;letter-spacing:.05em;background:var(--g50)}
.dash-table td{padding:12px 16px;font-size:.85rem;border-top:1px solid var(--g100)}
.status-badge{display:inline-flex;padding:3px 10px;border-radius:100px;font-size:.75rem;font-weight:600}
.status-confirmed{background:#fff4cc;color:#7a5a00}
.status-pending{background:#fef9c3;color:#ca8a04}
.dash-chart{background:var(--white);border-radius:var(--r);border:1px solid var(--g200);padding:20px}
.dash-chart-title{font-weight:700;font-size:.9rem;margin-bottom:20px}
.chart-bars{display:flex;align-items:flex-end;gap:8px;height:160px}
.chart-bar-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.chart-bar{width:100%;background:linear-gradient(to top,var(--primary),var(--primary-light));border-radius:4px 4px 0 0;transition:all var(--tr);min-height:4px}
.chart-bar:hover{opacity:.8}
.chart-bar-label{font-size:.7rem;color:var(--g500);font-weight:600}

/* ═══ FAQ ═══ */
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border:1px solid var(--g200);border-radius:var(--r);margin-bottom:12px;overflow:hidden;transition:all var(--tr)}
.faq-item:hover{border-color:var(--g300)}
.faq-question{display:flex;align-items:center;justify-content:space-between;width:100%;padding:20px 24px;font-size:1rem;font-weight:600;color:var(--g800);text-align:start;transition:all var(--tr);background:transparent;font-family:inherit;cursor:pointer;gap:16px}
.faq-question:hover{background:var(--g50)}
.faq-question:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.faq-arrow{flex-shrink:0;transition:transform var(--tr);color:var(--g400);font-size:1.2rem}
.faq-item.open .faq-arrow{transform:rotate(180deg);color:var(--primary)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease}
.faq-item.open .faq-answer{max-height:300px}
.faq-answer-inner{padding:0 24px 20px;color:var(--g600);line-height:1.8;font-size:.95rem}

/* ═══ CTA SECTION ═══ */
.cta-section{background:linear-gradient(135deg,#fff5d6 0%,#fffdf3 55%,#f7f0e2 100%);color:var(--g900);position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:-200px;right:-200px;width:500px;height:500px;background:radial-gradient(circle,rgba(184,134,11,.12) 0%,transparent 70%);border-radius:50%}
.cta-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
@media(max-width:768px){.cta-inner{grid-template-columns:1fr;text-align:center}}
.cta-text h2{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:900;margin-bottom:16px;line-height:1.3}
.cta-text p{font-size:1.1rem;color:var(--g600);line-height:1.7}
.cta-form{background:rgba(255,255,255,.78);backdrop-filter:blur(8px);border-radius:var(--r-lg);padding:36px;border:1px solid var(--g200)}
.cta-form .form-group label{color:var(--g700)}
.cta-form .form-group input,.cta-form .form-group select{background:var(--white);border-color:var(--g200);color:var(--g800)}
.cta-form .form-group input::placeholder{color:var(--g400)}
.cta-form .form-group input:focus,.cta-form .form-group select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(184,134,11,.12)}
.cta-form .form-group select option{color:var(--g800);background:var(--white)}
.cta-form .btn-white{width:100%;font-weight:700;padding:16px}
.cta-consent{font-size:.78rem;color:var(--g500);margin-top:12px;line-height:1.6}
.cta-demo-note{font-size:.78rem;color:var(--g500);margin-top:8px;font-style:italic}
.cta-success{text-align:center;padding:40px 20px}
.cta-success-icon{font-size:3rem;margin-bottom:16px}
.cta-success h3{font-size:1.3rem;font-weight:700;margin-bottom:8px}
.cta-success p{opacity:.8;font-size:.9rem}
.honeypot{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}

/* ═══ FOOTER ═══ */
.footer{background:linear-gradient(180deg,#fffaf4 0%,#fff0e5 100%);color:var(--g600);padding:60px 0 30px;border-top:1px solid var(--g200)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:40px}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr}}
.footer-brand .logo{color:var(--g900);margin-bottom:16px}
.footer-brand p{font-size:.9rem;line-height:1.7;color:var(--g600);max-width:360px}
.footer-demo-badge{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:8px 16px;background:rgba(184,134,11,.12);border:1px solid rgba(184,134,11,.25);border-radius:var(--r-sm);font-size:.82rem;color:var(--primary-dark)}

.hero-visual{position:relative}
.gym-float{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:linear-gradient(135deg,#111,#2a2a2a);
  color:#ffd86b;
  box-shadow:var(--shadow-lg);
  border:2px solid #b8860b;
  z-index:2;
}
.gym-float-dumbbell{top:-18px;left:-18px;animation:gymFloat 3.4s ease-in-out infinite}
.gym-float-plate{bottom:-18px;right:-18px;animation:gymSpin 6s linear infinite}
[dir="rtl"] .gym-float-dumbbell{left:auto;right:-18px}
[dir="rtl"] .gym-float-plate{right:auto;left:-18px}
@keyframes gymFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes gymSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes gymDriftA{0%,100%{transform:translateY(0) rotate(-4deg);opacity:.25}50%{transform:translateY(-18px) rotate(6deg);opacity:.45}}
@keyframes gymDriftB{from{transform:rotate(0) translateY(0)}to{transform:rotate(360deg) translateY(0)}}
@keyframes gymDriftC{0%,100%{transform:translateX(0) translateY(0)}50%{transform:translateX(16px) translateY(-14px)}}
@keyframes gridDrift{from{transform:perspective(700px) rotateX(58deg) translateY(-12%) translateX(0)}to{transform:perspective(700px) rotateX(58deg) translateY(-12%) translateX(-80px)}}
@keyframes orbShift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-10px,8px,0) scale(1.06)}}
@keyframes grainShift{
  0%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(1%, -1%, 0)}
  50%{transform:translate3d(-1%, 1%, 0)}
  75%{transform:translate3d(0.5%, 0.5%, 0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes illuBobA{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}
@keyframes illuBobB{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(12px) rotate(-2deg)}}
@keyframes pixelWave{from{background-position:0 0, 11px 7px}to{background-position:120px 0, -80px 7px}}
@keyframes stickerFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(4deg)}}
.footer-col h4{color:var(--g900);font-weight:700;font-size:.95rem;margin-bottom:16px}
.footer-link{display:block;padding:6px 0;font-size:.9rem;color:var(--g600);transition:color var(--tr)}
.footer-link:hover{color:var(--primary-dark)}
.footer-bottom{border-top:1px solid var(--g200);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer-copyright{font-size:.82rem;color:var(--g600)}

/* ═══ SCROLL ANIMATION ═══ */
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}

::selection{background:var(--primary-100);color:var(--primary-dark)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--g100)}
::-webkit-scrollbar-thumb{background:var(--g300);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--g400)}

/* COMPREHENSIVE GYM REDESIGN OVERRIDES */
:root{
  --primary:#e63946;
  --primary-dark:#b81f2e;
  --primary-light:#ff7b86;
  --primary-100:#ffe0e3;
  --primary-50:#fff3f4;
  --accent:#ff9f1c;
  --success:#16a34a;
  --g50:#f6f8fb;
  --g100:#eceff4;
  --g200:#d9dee8;
  --g300:#c0c8d6;
  --g400:#8a95aa;
  --g500:#65728b;
  --g600:#4a556d;
  --g700:#354057;
  --g800:#222c40;
  --g900:#171e2c;
  --r:14px;
  --r-sm:10px;
  --r-lg:24px;
}

body{
  background:linear-gradient(180deg,#f9fbff 0%,#f4f7fc 100%);
  color:var(--g800);
}
[dir="ltr"] h1,[dir="ltr"] h2,[dir="ltr"] h3,[dir="ltr"] .section-title{
  font-family:'Bebas Neue','DM Sans',sans-serif;
  letter-spacing:.03em;
}
.container{max-width:1240px;padding:0 28px}
.section{padding:96px 0}
.section-alt{background:linear-gradient(180deg,#eef3fb 0%,#f6f9ff 100%)}
.section-title{font-size:clamp(2.05rem,4.8vw,3.05rem);line-height:1.05}
.section-sub{font-size:1.06rem;max-width:720px;color:var(--g600)}

.gym-bg-item,.gym-bg-sticker,.gym-bg-illustration,.gym-bg-pixels,.gym-bg-grain{display:none}
.gym-bg-vignette{
  background:radial-gradient(circle at 50% 45%, transparent 22%, rgba(18,24,37,.08) 100%);
  opacity:.5;
}
.gym-bg canvas{opacity:.26;filter:saturate(1.1) contrast(1.05)}

.header{
  background:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(217,222,232,.7);
}
.header.scrolled{box-shadow:0 12px 30px rgba(19,29,46,.08)}
.logo{font-weight:900;color:var(--g900)}
.logo-icon{
  border-radius:12px;
  box-shadow:0 8px 20px rgba(230,57,70,.26);
}
.nav-link{font-weight:600}
.nav-link:hover{background:var(--primary-50);color:var(--primary-dark)}

.hero{
  background:
    radial-gradient(900px 380px at 10% -5%, rgba(230,57,70,.14), transparent 68%),
    radial-gradient(900px 440px at 100% 10%, rgba(255,159,28,.14), transparent 70%),
    linear-gradient(180deg,#f8fbff 0%,#f3f7ff 100%);
  padding-top:152px;
  padding-bottom:112px;
}
.hero-grid{grid-template-columns:1.08fr .92fr;gap:44px}
.hero-content h1{
  margin:14px 0 18px;
  font-size:clamp(2.6rem,5.4vw,4.4rem);
  color:var(--g900);
  line-height:.94;
}
.hero-content p{color:var(--g600);max-width:680px}
.hero-buttons{margin-top:6px}
.btn{font-weight:700}
.btn-primary{
  background:linear-gradient(135deg,var(--primary),#ff4f5d);
  border:1px solid rgba(184,31,46,.35);
}
.btn-outline{
  color:var(--g800);
  border-color:var(--g300);
  background:#fff;
}
.btn-outline:hover{border-color:var(--primary-light);color:var(--primary-dark)}

.hero-stats{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:36px;
}
.hero-stat{
  background:#fff;
  border:1px solid var(--g200);
  border-radius:14px;
  padding:14px 10px;
  box-shadow:0 8px 24px rgba(22,33,52,.06);
}
.hero-stat-value{font-size:1.35rem;color:var(--primary-dark)}
.hero-stat-label{font-size:.78rem}

.hero-showcase{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid var(--g200);
  border-radius:20px;
  box-shadow:0 20px 50px rgba(21,32,51,.14);
}
.showcase-title{font-size:1.2rem;font-weight:900;color:var(--g900)}
.showcase-chip{
  background:var(--primary-50);
  border-color:rgba(230,57,70,.28);
  color:var(--primary-dark);
}
.showcase-item{background:#fff}
.showcase-item strong{color:var(--primary-dark)}
.showcase-card{
  background:linear-gradient(180deg,#fff8e8 0%,#fff2d8 100%);
  border-color:#ffe0a8;
}

.services-grid{gap:20px}
.service-card{
  border-radius:18px;
  border:1px solid var(--g200);
  padding:30px;
  box-shadow:0 8px 24px rgba(22,33,52,.05);
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 35px rgba(22,33,52,.11);
}
.service-icon{
  border-radius:16px;
  background:linear-gradient(135deg,var(--primary-50),#fff);
  border:1px solid rgba(230,57,70,.22);
}

.booking-widget{
  max-width:780px;
  border-radius:22px;
  border:1px solid var(--g200);
  box-shadow:0 24px 56px rgba(21,33,54,.12);
}
.booking-step{font-weight:700}
.booking-step.active{
  box-shadow:inset 0 -2px 0 var(--primary);
}
.booking-body{padding:34px}
.service-option,.trainer-option,.time-slot{
  border-radius:12px;
}

.pricing-grid{gap:22px}
.pricing-card{
  border-radius:20px;
  border:1px solid var(--g200);
  box-shadow:0 10px 28px rgba(25,35,54,.08);
}
.pricing-card.recommended{
  transform:translateY(-6px);
  border-color:rgba(230,57,70,.45);
  box-shadow:0 18px 38px rgba(230,57,70,.18);
}
.recommended-badge{
  background:linear-gradient(135deg,var(--primary),#ff4f5d);
}
.pricing-new{
  font-size:.92rem;
  color:var(--primary-dark);
  background:var(--primary-50);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(230,57,70,.2);
}

.transform-col{border-radius:20px}
.transform-before{
  background:linear-gradient(180deg,#fff7f8 0%,#fff1f3 100%);
}
.transform-after{
  background:linear-gradient(180deg,#eef7ff 0%,#f5faff 100%);
  border-color:#c8dcf3;
}
.transform-after .transform-label{
  background:#deebff;
  color:#24579c;
}
.transform-after .transform-metric{
  background:#deebff;
  color:#24579c;
}

.dashboard-preview{
  border-radius:22px;
  box-shadow:0 26px 56px rgba(18,28,46,.14);
}
.dash-header{
  background:linear-gradient(135deg,#1f283a,#151b2b);
  color:#fff;
}
.dash-kpi{
  background:#fff;
  border:1px solid var(--g200);
}

.faq-item{
  border-radius:12px;
  border-color:var(--g200);
  background:#fff;
}
.faq-item:hover{
  box-shadow:0 10px 24px rgba(21,32,50,.08);
}

.cta-section{
  background:
    radial-gradient(700px 300px at 12% 10%, rgba(230,57,70,.16), transparent 65%),
    radial-gradient(700px 300px at 88% 90%, rgba(255,159,28,.16), transparent 65%),
    linear-gradient(180deg,#f6f9ff 0%,#eff4ff 100%);
}
.cta-form{
  background:rgba(255,255,255,.92);
  border:1px solid var(--g200);
  box-shadow:0 18px 40px rgba(21,33,54,.1);
}

.footer{
  background:linear-gradient(180deg,#1a2233 0%,#141b2a 100%);
  color:#c3ccde;
  border-top:none;
}
.footer-brand .logo,.footer-col h4{color:#fff}
.footer-link{color:#b4bed2}
.footer-link:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(217,222,232,.18)}
.footer-demo-badge{
  background:rgba(230,57,70,.15);
  border-color:rgba(230,57,70,.35);
  color:#ffbec5;
}

@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{display:none}
}
@media(max-width:760px){
  .container{padding:0 18px}
  .section{padding:78px 0}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pricing-card.recommended{transform:none}
}

.cta-game-wrap{padding:26px}
.cta-game-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.cta-game-head h3{
  margin:0;
  font-size:1.05rem;
  font-weight:900;
  color:var(--g900);
}
.cta-game-start{padding:10px 18px;font-size:.9rem}
.cta-game-hud{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:12px;
}
.cta-game-pill{
  border:1px solid var(--g200);
  border-radius:10px;
  background:#fff;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.cta-game-pill span{font-size:.8rem;color:var(--g500);font-weight:700}
.cta-game-pill strong{font-size:1rem;color:var(--g900)}
.cta-game-arena{
  position:relative;
  height:210px;
  border:1px dashed var(--g300);
  border-radius:14px;
  background:
    linear-gradient(180deg,#ffffff 0%,#f7faff 100%),
    repeating-linear-gradient(90deg,transparent 0 20px, rgba(0,0,0,.02) 20px 21px);
  overflow:hidden;
}
.cta-game-target{
  position:absolute;
  top:0;left:0;
  width:56px;height:56px;
  border-radius:14px;
  border:1px solid rgba(230,57,70,.35);
  background:linear-gradient(135deg,var(--primary),#ff5b68);
  color:#fff;
  font-size:1.4rem;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 18px rgba(230,57,70,.32);
  transition:transform .16s ease;
}
.cta-game-target.hit{transform:scale(.88)}
.cta-game-status{
  margin:12px 0 6px;
  font-size:.88rem;
  color:var(--g700);
  font-weight:700;
  text-align:center;
}

.occupancy-widget{
  max-width:860px;
  margin:0 auto;
  background:linear-gradient(180deg,#ffffff 0%,#f6f9ff 100%);
  border:1px solid var(--g200);
  border-radius:20px;
  padding:28px;
  box-shadow:0 18px 40px rgba(20,30,48,.08);
}
.occ-main{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}
.occ-count{
  font-family:'Bebas Neue','DM Sans',sans-serif;
  font-size:clamp(3.2rem,9vw,5.5rem);
  line-height:.85;
  color:var(--g900);
}
.occ-label{
  font-size:.92rem;
  color:var(--g600);
  font-weight:700;
  margin-bottom:8px;
}
.occ-status{
  display:inline-flex;
  padding:6px 12px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:800;
  border:1px solid transparent;
}
.occ-status.low{background:#eaf8ee;color:#166534;border-color:#b7e4c2}
.occ-status.mid{background:#fff7e8;color:#9a6700;border-color:#fde3ad}
.occ-status.high{background:#ffe9ec;color:#9f1239;border-color:#ffc6cf}
.occ-bar-wrap{margin-bottom:18px}
.occ-bar{
  height:12px;
  width:100%;
  border-radius:999px;
  background:#e7ecf6;
  overflow:hidden;
}
.occ-bar span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#16a34a 0%,#f59e0b 58%,#e63946 100%);
  border-radius:999px;
  transition:width .7s ease;
}
.occ-bar-text{
  margin-top:8px;
  font-size:.85rem;
  color:var(--g600);
  font-weight:700;
}
.occ-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.occ-stat{
  border:1px solid var(--g200);
  border-radius:12px;
  padding:12px;
  background:#fff;
}
.occ-stat strong{
  display:block;
  font-size:1.05rem;
  color:var(--g900);
  margin-bottom:4px;
}
.occ-stat span{
  font-size:.78rem;
  color:var(--g500);
  font-weight:600;
}
.occupancy-app-note{
  margin:16px auto 0;
  max-width:860px;
  font-size:.92rem;
  color:var(--g700);
  text-align:center;
  font-weight:700;
}
@media(max-width:760px){
  .occupancy-widget{padding:20px}
  .occ-main{align-items:center}
  .occ-stats{grid-template-columns:1fr}
}