:root {
  /* Surfaces & text */
  --color-bg: #0a0a0c;
  --color-surface: #131418;
  --color-surface-2: #191b20;
  --color-elevated: #1f2127;
  --color-text: #f4f5f7;
  --color-muted: #9ea3ad;
  --color-faint: #6a6e78;

  /* Brand accent */
  --color-accent: #c6ff2b;
  --color-accent-strong: #d6ff5c;
  --color-accent-deep: #a5e400;
  --color-on-accent: #0a0a0c;
  --gradient-accent: linear-gradient(135deg, #d4ff5a 0%, #b6f21f 100%);
  --gradient-sheen: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.35) 50%, transparent 80%);

  /* Borders & glass */
  --color-border: #23252b;
  --color-border-strong: #33363e;
  --glass-bg: rgba(16, 17, 21, 0.72);
  --glass-border: rgba(255, 255, 255, 0.07);

  /* Semantic */
  --color-success: #34d399;
  --color-success-bg: rgba(52, 211, 153, 0.12);
  --color-error: #ff6b6b;
  --color-error-bg: rgba(255, 107, 107, 0.1);

  /* Radius scale */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Elevation (dark-tuned, soft) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 4px 14px -4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 14px 34px -12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 30px 64px -18px rgba(0, 0, 0, 0.62);
  --shadow-accent: 0 14px 34px -10px rgba(198, 255, 43, 0.3);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-fast: 0.16s;
  --dur: 0.26s;
  --dur-slow: 0.5s;

  --max-width: 1080px;
  --font-display: "Bebas Neue", Impact, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --macro-color-protein: #c6ff2b;
  --macro-color-carbs: #38bdf8;
  --macro-color-fats: #fb923c;
}

html[lang="ar"] {
  --font-display: "Tajawal", sans-serif;
  --font-body: "Tajawal", sans-serif;
}

html[lang="ar"] .hero h1,
html[lang="ar"] .page-title,
html[lang="ar"] .section h2,
html[lang="ar"] .brand,
html[lang="ar"] .btn,
html[lang="ar"] .service-card h3,
html[lang="ar"] .product-card h3,
html[lang="ar"] #quick-view-name,
html[lang="ar"] .cart-row-info h3 {
  letter-spacing: 0;
  text-transform: none;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 12px;
}

.navbar {
  border-bottom: 1px solid transparent;
  position: sticky;
  top: 0;
  background: rgba(11, 11, 13, 0.9);
  backdrop-filter: blur(6px);
  z-index: 10;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.navbar.scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  color: var(--color-text);
  text-decoration: none;
}

.brand span {
  color: var(--color-accent);
}

.navbar nav a {
  position: relative;
  color: var(--color-muted);
  text-decoration: none;
  margin-left: 28px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}

.navbar nav a:not(.cart-link):not(.lang-switch)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width 0.25s ease;
}

.navbar nav a:hover {
  color: var(--color-accent);
}

.navbar nav a:not(.cart-link):not(.lang-switch):hover::after {
  width: 100%;
}

.cart-link {
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.cart-link:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.hero {
  position: relative;
  padding: 140px 0 120px;
  text-align: center;
  overflow: hidden;
  background: var(--color-bg);
}

.hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(198, 255, 43, 0.12), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(198, 255, 43, 0.08), transparent 60%),
    radial-gradient(circle at 50% 0%, rgba(198, 255, 43, 0.08), transparent 60%);
  animation: glow-pulse 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.35;
  animation: particle-drift linear infinite;
}

.hero-particle:nth-child(1) { left: 5%; top: 80%; animation-duration: 14s; animation-delay: 0s; }
.hero-particle:nth-child(2) { left: 12%; top: 40%; animation-duration: 11s; animation-delay: 1s; }
.hero-particle:nth-child(3) { left: 20%; top: 65%; animation-duration: 16s; animation-delay: 2s; }
.hero-particle:nth-child(4) { left: 28%; top: 25%; animation-duration: 13s; animation-delay: 0.5s; }
.hero-particle:nth-child(5) { left: 35%; top: 85%; animation-duration: 15s; animation-delay: 3s; }
.hero-particle:nth-child(6) { left: 42%; top: 50%; animation-duration: 12s; animation-delay: 1.5s; }
.hero-particle:nth-child(7) { left: 50%; top: 70%; animation-duration: 17s; animation-delay: 2.5s; }
.hero-particle:nth-child(8) { left: 58%; top: 30%; animation-duration: 10s; animation-delay: 0s; }
.hero-particle:nth-child(9) { left: 65%; top: 60%; animation-duration: 14s; animation-delay: 4s; }
.hero-particle:nth-child(10) { left: 72%; top: 20%; animation-duration: 18s; animation-delay: 1s; }
.hero-particle:nth-child(11) { left: 80%; top: 75%; animation-duration: 11s; animation-delay: 2s; }
.hero-particle:nth-child(12) { left: 88%; top: 45%; animation-duration: 15s; animation-delay: 3.5s; }
.hero-particle:nth-child(13) { left: 15%; top: 10%; animation-duration: 13s; animation-delay: 2.2s; }
.hero-particle:nth-child(14) { left: 45%; top: 12%; animation-duration: 16s; animation-delay: 0.8s; }
.hero-particle:nth-child(15) { left: 68%; top: 8%; animation-duration: 12s; animation-delay: 1.8s; }
.hero-particle:nth-child(16) { left: 92%; top: 15%; animation-duration: 14s; animation-delay: 3.2s; }

@keyframes particle-drift {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    opacity: 0.35;
  }
  90% {
    opacity: 0.35;
  }
  100% {
    transform: translate(12px, -140px);
    opacity: 0;
  }
}

.hero-floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-floater {
  position: absolute;
  color: var(--color-accent);
  opacity: 0.5;
  animation: floater-idle 6s ease-in-out infinite;
  will-change: transform;
}

.hero-floater svg {
  width: 100%;
  height: 100%;
}

.hero-floater-jar {
  width: 56px;
  height: 56px;
  top: 18%;
  left: 12%;
  animation-duration: 7s;
}

.hero-floater-capsule-1 {
  width: 40px;
  height: 40px;
  top: 65%;
  left: 18%;
  animation-duration: 5.5s;
  animation-delay: 0.6s;
  transform: rotate(30deg);
}

.hero-floater-capsule-2 {
  width: 34px;
  height: 34px;
  top: 30%;
  right: 14%;
  animation-duration: 6.5s;
  animation-delay: 1.2s;
  transform: rotate(-20deg);
}

.hero-floater-dumbbell {
  width: 48px;
  height: 48px;
  top: 70%;
  right: 18%;
  animation-duration: 8s;
  animation-delay: 0.3s;
}

@keyframes floater-idle {
  0%, 100% {
    transform: translateY(0) rotate(var(--floater-rotate, 0deg));
  }
  50% {
    transform: translateY(-18px) rotate(var(--floater-rotate, 0deg));
  }
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-anim {
  opacity: 0;
  animation: fade-up 0.8s ease both;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 24px;
}

.hero h1 span {
  color: var(--color-accent);
}

.hero-sub {
  color: var(--color-muted);
  font-size: 1.15rem;
  max-width: 520px;
  margin: 0 auto 40px;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stats-strip {
  padding: 56px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
  text-align: center;
}

.stat-number {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--color-accent);
}

.stat-suffix {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--color-accent);
}

.stat p {
  margin: 4px 0 0;
  color: var(--color-muted);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.stat-bar {
  display: block;
  width: 100%;
  max-width: 160px;
  height: 4px;
  margin: 12px auto 0;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}

.stat-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
}

.page-loader-mark {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.05em;
  color: var(--color-text);
  animation: loader-pulse 1s ease-in-out infinite;
}

.page-loader-mark em {
  color: var(--color-accent);
  font-style: normal;
}

@keyframes loader-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow,
  .hero-particle,
  .hero-floater,
  .page-loader-mark {
    animation: none !important;
  }
}

.btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  background: var(--color-accent);
  color: #0b0b0d;
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(198, 255, 43, 0.3);
}

.btn:active {
  transform: translateY(0) scale(0.97);
}

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: scale(0);
  animation: ripple-effect 0.6s ease-out;
  pointer-events: none;
}

.btn-outline .btn-ripple {
  background: rgba(198, 255, 43, 0.3);
}

@keyframes ripple-effect {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-outline:hover {
  border-color: var(--color-accent);
  box-shadow: none;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.section {
  padding: 96px 0;
  scroll-margin-top: 72px;
}

.section-alt {
  background: var(--color-surface);
}

.section h2 {
  font-family: var(--font-display);
  font-size: 2.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin: 0 0 20px;
}

.section p {
  color: var(--color-muted);
  max-width: 560px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.service-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 28px;
  transition: border-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(198, 255, 43, 0.1);
}

.service-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
}

.service-card p {
  margin: 0 0 16px;
  font-size: 0.95rem;
}

.service-link {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.service-link:hover {
  text-decoration: underline;
}

.products-hero {
  padding-top: 140px;
  text-align: center;
}

.page-title {
  font-family: var(--font-display);
  font-size: 3.5rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 16px;
}

.products-hero .container p {
  margin: 0 auto;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.product-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 24px;
  transition: border-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.product-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(198, 255, 43, 0.1);
}

.product-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: var(--color-accent);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.product-thumb svg {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.service-card:hover .product-thumb svg,
.product-card:hover .product-thumb svg {
  transform: rotate(12deg) scale(1.15);
}

.product-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--color-surface);
}

.product-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-category {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.product-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 4px;
}

.product-card .product-flavor {
  margin: 0 0 4px;
  color: var(--color-text);
  font-size: 0.95rem;
}

.product-card .product-size {
  margin: 0 0 12px;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.product-card .product-price {
  margin: 0;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 1.1rem;
}

.cart-link {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 14px !important;
  margin-left: 28px;
}

.add-to-cart-form {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.add-to-cart-form input[type="number"] {
  width: 56px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  padding: 0 8px;
  font-family: var(--font-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.add-to-cart-form input[type="number"]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(198, 255, 43, 0.15);
}

.btn-small {
  padding: 10px 16px;
  font-size: 0.8rem;
}

.cart-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.cart-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.cart-row-info h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.cart-row-subtotal {
  color: var(--color-accent);
  font-weight: 700;
}

.cart-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.cart-total {
  font-size: 1.3rem;
  margin: 0;
}

.cart-total span {
  color: var(--color-accent);
  font-weight: 700;
}

.checkout-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: start;
}

.checkout-form h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  margin: 24px 0 16px;
}

.checkout-form h2:first-child {
  margin-top: 0;
}

.checkout-form label {
  display: block;
  margin-bottom: 16px;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.checkout-form input[type="text"],
.checkout-form input[type="tel"],
.checkout-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.checkout-form input[type="text"]:focus,
.checkout-form input[type="tel"]:focus,
.checkout-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(198, 255, 43, 0.15);
}

.payment-method {
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.payment-method:hover:not(.payment-method-disabled) {
  transform: translateX(4px);
}

.form-errors {
  border: 1px solid #ff4d4d;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 24px;
  color: #ff8080;
}

.form-errors ul {
  margin: 0;
  padding-left: 20px;
}

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.payment-method {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 14px 16px;
  cursor: pointer;
}

.payment-method:has(input:checked) {
  border-color: var(--color-accent);
}

.payment-method-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.payment-method input {
  grid-row: 1 / 3;
  align-self: center;
}

.payment-method-label {
  font-weight: 700;
}

.payment-method-description {
  color: var(--color-muted);
  font-size: 0.85rem;
}

.order-summary {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 24px;
  background: var(--color-surface);
}

.order-summary h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.order-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-bottom: 10px;
}

.order-summary-total {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--color-border);
  margin-top: 16px;
  padding-top: 16px;
  font-weight: 700;
  color: var(--color-accent);
}

@media (max-width: 700px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .cart-row {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

.quick-view-btn {
  width: 100%;
  margin-top: 16px;
}

.quick-view-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
}

.quick-view-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.quick-view-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.quick-view-panel {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 32px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  gap: 8px;
}

.quick-view-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  color: var(--color-muted);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.quick-view-close:hover {
  color: var(--color-accent);
  transform: rotate(90deg);
}

.quick-view-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.quick-view-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.quick-view-thumb {
  width: 72px;
  height: 72px;
  margin-bottom: 0;
}

.quick-view-thumb svg {
  width: 36px;
  height: 36px;
}

#quick-view-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  margin: 0;
}

body.modal-open {
  overflow: hidden;
}

.pricing-card {
  max-width: 420px;
  margin: 40px auto 0;
  padding: 40px;
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(198, 255, 43, 0.08);
}

.pricing-plan-name {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  font-size: 0.85rem;
  margin: 0 0 8px;
}

.pricing-price {
  margin: 0 0 28px;
}

.pricing-amount {
  font-family: var(--font-display);
  font-size: 3.5rem;
  color: var(--color-accent);
}

.pricing-currency {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-accent);
}

.pricing-period {
  color: var(--color-muted);
  font-size: 0.95rem;
}

.pricing-features {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pricing-features li {
  position: relative;
  padding-left: 28px;
  color: var(--color-text);
  font-size: 0.95rem;
}

.pricing-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.pricing-card .btn {
  width: 100%;
}

.pricing-features-compact {
  margin-bottom: 20px;
}

.pricing-features-compact li {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.footer {
  border-top: 1px solid var(--color-border);
  padding: 28px 0;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.85rem;
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: 3rem;
  }

  .section h2 {
    font-size: 2rem;
  }
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 14px !important;
  margin-left: 16px;
  color: var(--color-muted) !important;
  text-transform: none !important;
  transition: border-color 0.2s ease, transform 0.15s ease, color 0.2s ease;
}

.lang-switch:hover {
  border-color: var(--color-accent);
  color: var(--color-accent) !important;
  transform: translateY(-2px);
}

.lang-switch svg {
  width: 16px;
  height: 16px;
  transition: transform 0.4s ease;
}

.lang-switch:hover svg {
  transform: rotate(180deg);
}

/* RTL layout support for Arabic */
html[dir="rtl"] body {
  text-align: right;
}

html[dir="rtl"] .navbar nav a {
  margin-left: 0;
  margin-right: 28px;
}

html[dir="rtl"] .navbar nav a:first-child {
  margin-right: 0;
}

html[dir="rtl"] .lang-switch {
  margin-left: 0;
  margin-right: 16px;
}

html[dir="rtl"] .service-link,
html[dir="rtl"] .products-hero,
html[dir="rtl"] .hero,
html[dir="rtl"] .stats-grid,
html[dir="rtl"] .pricing-card,
html[dir="rtl"] .contact-links {
  text-align: center;
}

html[dir="rtl"] .cart-row-qty,
html[dir="rtl"] .cart-row-subtotal {
  text-align: right;
}

html[dir="rtl"] .order-summary-row,
html[dir="rtl"] .order-summary-total {
  direction: rtl;
}

html[dir="rtl"] .quick-view-close {
  right: auto;
  left: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .lang-switch svg,
  .lang-switch {
    transition: none;
  }
}

.coach-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: center;
}

.coach-photo {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 20px 50px rgba(198, 255, 43, 0.08);
}

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

.coach-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-accent);
  margin: 0 0 4px;
  max-width: none;
}

html[lang="ar"] .coach-name {
  letter-spacing: 0;
  text-transform: none;
}

.coach-role {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-muted);
  margin: 0 0 16px;
}

.coach-info .btn {
  margin-top: 8px;
}

@media (max-width: 800px) {
  .coach-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .coach-photo {
    max-width: 360px;
    margin: 0 auto;
  }
}

.whatsapp-btn {
  position: fixed;
  bottom: 24px;
  inset-inline-end: 24px;
  width: 60px;
  height: 60px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 150;
  animation: whatsapp-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s both;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
}

@keyframes whatsapp-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 600px) {
  .whatsapp-btn {
    width: 52px;
    height: 52px;
    bottom: 16px;
    inset-inline-end: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-btn {
    animation: none;
  }
}

/* Calculators page */

.calc-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: start;
}

.gender-toggle {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.gender-option {
  flex: 1;
  display: block;
  position: relative;
  text-align: center;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-muted);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.gender-option input {
  position: absolute;
  opacity: 0;
}

.gender-option:has(input:checked) {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.calc-form select {
  display: block;
  width: 100%;
  margin-top: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.calc-form select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(198, 255, 43, 0.15);
}

.calc-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.calc-tab {
  background: none;
  border: none;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 4px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.calc-tab + .calc-tab {
  margin-inline-start: 20px;
}

.calc-tab:hover {
  color: var(--color-text);
}

.calc-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.calc-panel {
  display: none;
}

.calc-panel.active {
  display: block;
  animation: fade-up 0.5s ease both;
}

.calc-empty-state {
  color: var(--color-muted);
  padding: 40px 0;
  text-align: center;
}

.calc-protein-target {
  text-align: center;
  padding: 24px;
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  margin-bottom: 32px;
}

.calc-protein-label {
  color: var(--color-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
}

.calc-protein-value {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--color-accent);
  margin: 0;
}

.calc-subheading {
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.recommendation-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 16px;
}

.recommendation-photo,
.recommendation-thumb {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  margin-bottom: 0;
}

.recommendation-info h4 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.recommendation-timing {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin: 4px 0;
}

.recommendation-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.view-options-link {
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}

.view-options-link:hover {
  text-decoration: underline;
}

.calc-disclaimer {
  color: var(--color-muted);
  font-size: 0.8rem;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.macro-layout {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.macro-donut-wrap {
  flex-shrink: 0;
}

.macro-donut {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: conic-gradient(var(--color-border) 0% 100%);
  position: relative;
}

.macro-donut::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: var(--color-bg);
}

.macro-cards {
  flex: 1;
  min-width: 240px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.macro-card {
  position: relative;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  text-align: center;
}

.macro-card-calories {
  grid-column: 1 / -1;
  border-color: var(--color-accent);
}

.macro-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-bottom: 6px;
}

.macro-dot-protein {
  background: var(--macro-color-protein);
}

.macro-dot-carbs {
  background: var(--macro-color-carbs);
}

.macro-dot-fats {
  background: var(--macro-color-fats);
}

.macro-card-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-text);
}

.macro-card-calories .macro-card-value {
  color: var(--color-accent);
  font-size: 2rem;
}

.macro-card-label {
  display: block;
  color: var(--color-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.calc-cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 800px) {
  .calc-layout {
    grid-template-columns: 1fr;
  }

  .recommendation-card {
    flex-direction: column;
  }

  .macro-layout {
    justify-content: center;
    text-align: center;
  }
}

/* ============================================================
   PREMIUM UI LAYER
   Appended enhancements — later source order wins by cascade.
   Visual/UX only; no markup or logic dependencies changed.
   ============================================================ */

/* ---- Base polish ---------------------------------------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(1100px 560px at 50% -260px, rgba(198, 255, 43, 0.06), transparent 70%),
    var(--color-bg);
  letter-spacing: 0.005em;
}

::selection {
  background: rgba(198, 255, 43, 0.26);
  color: var(--color-text);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-pill);
  border: 3px solid var(--color-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-faint); }

/* ---- Accessible focus system ---------------------------- */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible,
.cart-link:focus-visible,
.lang-switch:focus-visible,
.quick-view-btn:focus-visible { outline-offset: 4px; }

/* ---- Typography rhythm ---------------------------------- */
.eyebrow {
  color: var(--color-accent-deep);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
}
.section h2,
.page-title { letter-spacing: 0.01em; }
.section p { line-height: 1.7; }

/* Premium gradient numerals */
.stat-number,
.stat-suffix,
.pricing-amount,
.pricing-currency,
.calc-protein-value,
.macro-card-calories .macro-card-value {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-accent);
}

/* ---- Buttons: premium ----------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 30px;
  border-radius: var(--radius-pill);
  background: var(--gradient-accent);
  color: var(--color-on-accent);
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-sheen);
  transform: translateX(-130%);
  transition: transform 0.75s var(--ease-out);
  pointer-events: none;
}
.btn:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  filter: brightness(1.03);
}
.btn:hover::before { transform: translateX(130%); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.35);
  transform: none !important;
  box-shadow: var(--shadow-xs) !important;
}
.btn:disabled::before { display: none; }

.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(10, 10, 12, 0.3);
  border-top-color: var(--color-on-accent);
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  box-shadow: none;
}
.btn-outline::before { display: none; }
.btn-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(198, 255, 43, 0.06);
  box-shadow: none;
  filter: none;
}
.btn-small { padding: 10px 20px; }

/* ---- Navbar: glass -------------------------------------- */
.navbar {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid transparent;
}
.navbar.scrolled {
  border-bottom-color: var(--glass-border);
  box-shadow: var(--shadow-md);
}
.navbar-inner { height: 76px; }
.cart-link,
.lang-switch {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--glass-border);
}

/* ---- Cards: unified elevation --------------------------- */
.service-card,
.product-card {
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.service-card:hover,
.product-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(198, 255, 43, 0.1);
}
.product-thumb {
  background: var(--gradient-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-accent);
}
.product-photo,
.quick-view-media {
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.product-photo img { transition: transform 0.55s var(--ease-out); }
.product-card:hover .product-photo img { transform: scale(1.05); }
.product-category {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--glass-border);
}

/* ---- Forms & inputs ------------------------------------- */
.checkout-form input[type="text"],
.checkout-form input[type="tel"],
.checkout-form textarea,
.calc-form select,
.add-to-cart-form input[type="number"] {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur), box-shadow var(--dur), background var(--dur);
}
.checkout-form input[type="text"],
.checkout-form input[type="tel"],
.checkout-form textarea,
.calc-form select { padding: 12px 14px; }
.checkout-form input:focus,
.checkout-form textarea:focus,
.calc-form select:focus,
.add-to-cart-form input[type="number"]:focus {
  border-color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: 0 0 0 4px rgba(198, 255, 43, 0.14);
}
.checkout-form input:user-invalid,
.checkout-form textarea:user-invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 4px var(--color-error-bg);
}
.checkout-form label { color: var(--color-text); font-weight: 600; }

.form-errors {
  background: var(--color-error-bg);
  border: 1px solid rgba(255, 107, 107, 0.4);
  border-radius: var(--radius-md);
  color: #ffb4b4;
}

/* ---- Payment method selectors --------------------------- */
.payment-method {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  transition: border-color var(--dur), background var(--dur), box-shadow var(--dur);
}
.payment-method input { accent-color: var(--color-accent); width: 18px; height: 18px; }
.payment-method:hover:not(.payment-method-disabled) {
  transform: none;
  border-color: var(--color-border-strong);
  background: var(--color-elevated);
}
.payment-method:has(input:checked) {
  border-color: var(--color-accent);
  background: rgba(198, 255, 43, 0.06);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

/* ---- Gender toggle (calculators) ------------------------ */
.gender-option {
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  padding: 13px;
  transition: border-color var(--dur), background var(--dur), color var(--dur);
}
.gender-option:has(input:checked) {
  background: rgba(198, 255, 43, 0.06);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

/* ---- Cards: cart / summary / pricing / calc ------------- */
.cart-row {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.cart-row:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }

.order-summary,
.recommendation-card,
.calc-protein-target,
.macro-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.order-summary {
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  border-color: var(--color-border);
}
@media (min-width: 701px) {
  .order-summary { position: sticky; top: 96px; }
}
.recommendation-card,
.macro-card { background: var(--color-surface-2); }

.pricing-card {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(198, 255, 43, 0.08), transparent 60%),
    linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  border: 1px solid rgba(198, 255, 43, 0.5);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(198, 255, 43, 0.08);
}

/* ---- Quick view modal ----------------------------------- */
.quick-view-backdrop {
  background: rgba(4, 5, 7, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.quick-view-panel {
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 28px;
}
.quick-view-close {
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
}
.quick-view-close:hover { background: var(--color-elevated); }
html[dir="rtl"] .quick-view-close { right: auto; left: 12px; }

/* ---- Coach & footer ------------------------------------- */
.coach-photo {
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-lg);
}
.footer {
  border-top: 1px solid var(--color-border);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.015));
}

/* ---- States: empty / skeleton --------------------------- */
.empty-state {
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.empty-state-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  color: var(--color-faint);
}
.empty-state p { margin: 0 auto 20px; color: var(--color-muted); }

.skeleton { position: relative; overflow: hidden; background: var(--color-surface-2); }
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ---- Responsive: navbar --------------------------------- */
@media (max-width: 820px) {
  .navbar-inner {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 0;
    gap: 10px;
    justify-content: center;
  }
  .brand { flex: 1 0 100%; text-align: center; }
  .navbar nav { flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
  .navbar nav a { margin-left: 0 !important; margin-right: 0 !important; }
  html[dir="rtl"] .navbar nav a { margin-right: 0 !important; }
}

/* ---- Reduced motion safety ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .btn::before,
  .product-photo img,
  .skeleton::after,
  .btn.is-loading::after { animation: none !important; transition: none !important; }
  .btn:hover::before { transform: translateX(-130%); }
}

/* ============================================================
   PREMIUM NAV DRAWER (hamburger + slide-in glass menu)
   ============================================================ */

/* Keep the top bar above the overlay so logo, language and the
   animated X stay visible and clickable while the drawer is open. */
.navbar { z-index: 310; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-actions .lang-switch { margin: 0 !important; }

/* Hamburger button */
.nav-toggle {
  position: relative;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text);
  transition: background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.nav-toggle:hover {
  background: rgba(198, 255, 43, 0.08);
  border-color: var(--color-accent);
}
.nav-toggle:active { transform: scale(0.94); }

.nav-toggle-box {
  position: relative;
  width: 22px;
  height: 14px;
}
.nav-toggle-inner,
.nav-toggle-inner::before,
.nav-toggle-inner::after {
  position: absolute;
  left: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.4s var(--ease-spring), background 0.18s ease, top 0.3s ease, width 0.3s ease;
}
.nav-toggle-inner { top: 50%; width: 22px; transform: translateY(-50%); }
.nav-toggle-inner::before { content: ""; top: -7px; width: 22px; }
.nav-toggle-inner::after { content: ""; top: 7px; width: 15px; }
.nav-toggle:hover .nav-toggle-inner::after { width: 22px; }

/* animate into an X */
.nav-toggle.is-active { color: var(--color-accent); }
.nav-toggle.is-active .nav-toggle-inner { background: transparent; }
.nav-toggle.is-active .nav-toggle-inner::before { top: 0; width: 22px; transform: rotate(45deg); }
.nav-toggle.is-active .nav-toggle-inner::after { top: 0; width: 22px; transform: rotate(-45deg); }

/* Dimmed, blurred backdrop */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(4, 5, 7, 0.55);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out);
}
.menu-overlay.is-open { opacity: 1; pointer-events: auto; }

/* Slide-in glass drawer */
.site-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(420px, 88vw);
  z-index: 300;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  border-inline-start: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  transform: translateX(110%);
  transition: transform 0.55s var(--ease-out);
  display: flex;
  align-items: center;
  overflow-y: auto;
}
.site-menu.is-open { transform: translateX(0); }

.site-menu-inner {
  width: 100%;
  padding: 104px 56px 48px;
}
.site-menu-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-faint);
  margin: 0 0 26px;
}

.site-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.site-menu-list li {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.site-menu.is-open .site-menu-list li {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 0.06s + 0.12s);
}

.site-menu-list a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 10px 0;
  transition: color 0.25s ease, letter-spacing 0.25s ease;
}
.site-menu-list a::after {
  content: "";
  position: absolute;
  bottom: 4px;
  inset-inline-start: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-accent);
  border-radius: 2px;
  transition: width 0.35s var(--ease-out);
}
.site-menu-list a:hover,
.site-menu-list a:focus-visible {
  color: var(--color-accent);
  letter-spacing: 0.05em;
}
.site-menu-list a:hover::after,
.site-menu-list a:focus-visible::after { width: 46px; }

.site-menu-cart { margin-top: 8px; }
.menu-cart-count {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--gradient-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius-pill);
  padding: 2px 11px;
  line-height: 1.5;
}

body.nav-open { overflow: hidden; }

/* Arabic: drop Latin uppercase/tracking for joined letterforms */
html[lang="ar"] .site-menu-list a,
html[lang="ar"] .site-menu-eyebrow {
  text-transform: none;
  letter-spacing: 0;
}

/* Neutralise the earlier mobile wrap rule so the bar stays single-row */
@media (max-width: 820px) {
  .navbar-inner {
    flex-wrap: nowrap;
    height: 72px;
    padding: 0;
    gap: 12px;
    justify-content: space-between;
  }
  .brand { flex: 0 0 auto; text-align: start; }
}

@media (max-width: 480px) {
  .site-menu-list a { font-size: 2rem; }
  .site-menu-inner { padding: 96px 34px 40px; }
  .nav-actions .lang-switch span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu,
  .menu-overlay,
  .site-menu-list li,
  .nav-toggle-inner,
  .nav-toggle-inner::before,
  .nav-toggle-inner::after { transition: none !important; }
  .site-menu.is-open .site-menu-list li { transition-delay: 0s; }
}

/* ============================================================
   HEADER BRAND LOGO (image emblem)
   ============================================================ */

.brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  animation: logo-in 0.55s var(--ease-out) both;
}

@keyframes logo-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.brand-logo {
  display: block;
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 9px rgba(198, 255, 43, 0.22))
    drop-shadow(0 5px 12px rgba(0, 0, 0, 0.45));
  transition: transform 0.3s var(--ease-out), filter 0.3s var(--ease-out);
}

.brand:hover .brand-logo,
.brand:focus-visible .brand-logo {
  transform: scale(1.05);
  filter:
    drop-shadow(0 0 15px rgba(198, 255, 43, 0.4))
    drop-shadow(0 7px 16px rgba(0, 0, 0, 0.5));
}

/* Keep the header compact but tall enough for the emblem */
.navbar {
  padding-top: env(safe-area-inset-top, 0px);
}
.navbar .container {
  padding-inline: max(24px, env(safe-area-inset-left, 0px))
    max(24px, env(safe-area-inset-right, 0px));
}
.navbar-inner {
  height: auto;
  min-height: 104px;
  padding: 6px 0;
}

/* Anchor + drawer offsets follow the taller header */
.section { scroll-margin-top: 112px; }
.site-menu-inner { padding-top: 124px; }

@media (max-width: 820px) {
  .brand-logo { width: 80px; height: 80px; }
  .navbar-inner { height: auto; min-height: 92px; }
  .site-menu-inner { padding-top: 110px; }
}

@media (max-width: 480px) {
  .brand-logo { width: 60px; height: 60px; }
  .navbar-inner { min-height: 74px; }
  .site-menu-inner { padding-top: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand { animation: none; }
  .brand-logo { transition: none; }
}

/* ============================================================
   CART: header button + slide-in drawer
   ============================================================ */

.cart-button {
  position: relative;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}
.cart-button svg { width: 22px; height: 22px; }
.cart-button:hover {
  background: rgba(198, 255, 43, 0.08);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.cart-button:active { transform: scale(0.94); }
.cart-button.pulse { animation: cart-pulse 0.5s var(--ease-spring); }
@keyframes cart-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.cart-count-badge {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--gradient-accent);
  color: var(--color-on-accent);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--color-bg);
}
.cart-count-badge[hidden] { display: none; }

.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 315;
  background: rgba(4, 5, 7, 0.55);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out);
}
.cart-overlay.is-open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(400px, 90vw);
  z-index: 320;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  border-inline-start: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  transform: translateX(110%);
  transition: transform 0.5s var(--ease-out);
  display: flex;
  flex-direction: column;
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  padding-top: max(22px, env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--glass-border);
}
.cart-drawer-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
}
html[lang="ar"] .cart-drawer-title { text-transform: none; letter-spacing: 0; }
.cart-drawer-close {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  transition: color var(--dur), background var(--dur), transform var(--dur);
}
.cart-drawer-close svg { width: 20px; height: 20px; }
.cart-drawer-close:hover {
  color: var(--color-accent);
  background: var(--color-elevated);
  transform: rotate(90deg);
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cart-drawer-items {
  list-style: none;
  margin: 0;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.cart-drawer-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  animation: cart-item-in 0.35s var(--ease-out) both;
}
@keyframes cart-item-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.cart-drawer-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cart-drawer-item-name { font-weight: 700; font-size: 0.95rem; }
.cart-drawer-item-meta { color: var(--color-muted); font-size: 0.82rem; }
.cart-drawer-item-price {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}
.cart-remove-form { display: flex; }
.cart-remove-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  cursor: pointer;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.cart-remove-btn svg { width: 15px; height: 15px; }
.cart-remove-btn:hover {
  color: var(--color-error);
  border-color: var(--color-error);
  background: var(--color-error-bg);
}

.cart-drawer-foot {
  padding: 18px 24px;
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(0, 0, 0, 0.16);
}
.cart-drawer-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.05rem;
}
.cart-drawer-total-value {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 1.25rem;
}
.cart-drawer-checkout,
.cart-drawer-continue { width: 100%; }

.cart-drawer-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}
.cart-drawer-empty-icon {
  width: 52px;
  height: 52px;
  color: var(--color-faint);
  margin-bottom: 14px;
}
.cart-drawer-empty p { color: var(--color-muted); margin: 0 0 16px; }

body.cart-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .cart-drawer,
  .cart-overlay,
  .cart-drawer-item,
  .cart-button { transition: none !important; animation: none !important; }
}
/* Premium coaching team */
.coaches-section {
  position: relative;
  overflow: hidden;
}

.coaches-section::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  inset: 8% auto auto -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 255, 43, 0.11), transparent 68%);
  pointer-events: none;
}

.coaches-heading {
  max-width: 760px;
  margin-bottom: 42px;
}

.coaches-heading > p:last-child {
  max-width: 680px;
  color: var(--color-muted);
  font-size: 1.05rem;
}

.coaches-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: 1040px;
  margin-inline: auto;
}

.coach-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(27, 29, 34, 0.96), rgba(15, 16, 19, 0.98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.35s ease;
  transition-delay: var(--coach-delay, 0s);
}

.coach-card:hover {
  transform: translateY(-9px);
  border-color: rgba(198, 255, 43, 0.38);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42), 0 0 38px rgba(198, 255, 43, 0.07);
}

.coach-card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #111216;
}

.coach-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
}

.coach-card:hover .coach-card-media img {
  transform: scale(1.035);
  filter: saturate(1.06) contrast(1.03);
}

.coach-card-shade {
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(10, 11, 13, 0.88));
  pointer-events: none;
}

.coach-card-badge {
  position: absolute;
  z-index: 2;
  top: 18px;
  inset-inline-start: 18px;
  padding: 8px 12px;
  border: 1px solid rgba(198, 255, 43, 0.34);
  border-radius: 999px;
  background: rgba(10, 12, 14, 0.72);
  color: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

.coach-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 25px;
}

.coach-card-role {
  min-height: 2.4em;
  margin: 0 0 8px;
  color: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.coach-card h3 {
  margin: 0 0 12px;
  font-size: clamp(1.55rem, 2.3vw, 2rem);
}

.coach-card-bio {
  min-height: 5.4em;
  margin: 0 0 20px;
  color: var(--color-muted);
  line-height: 1.7;
}

.coach-card-features {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.coach-card-features li {
  position: relative;
  padding-inline-start: 24px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.88rem;
}

.coach-card-features li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-accent);
  font-weight: 900;
}

.coach-card-footer {
  display: grid;
  gap: 16px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.coach-card-price {
  margin: 0;
  color: var(--color-accent);
  font-size: 1rem;
  font-weight: 800;
}

.coach-card-price span {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.01em;
}

.coach-card-price small {
  color: var(--color-muted);
  font-size: 0.76rem;
  font-weight: 600;
}

.coach-card-cta {
  width: 100%;
  justify-content: center;
}

html[dir="rtl"] .coach-card-role,
html[dir="rtl"] .coach-card-badge {
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 980px) {
  .coaches-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .coaches-heading {
    margin-bottom: 28px;
  }

  .coaches-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .coach-card-media {
    aspect-ratio: 5 / 5.6;
  }

  .coach-card-body {
    padding: 21px;
  }

  .coach-card-bio,
  .coach-card-role {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coach-card,
  .coach-card-media img {
    transition: none;
  }
}
/* Homepage calculator showcase */
.calculator-showcase-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(198, 255, 43, 0.035), transparent 42%),
    var(--color-surface);
}

.calculator-showcase-section::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  top: 50%;
  inset-inline-end: -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 255, 43, 0.13), transparent 68%);
  transform: translateY(-50%);
  pointer-events: none;
}

.calculator-showcase {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1.1fr);
  gap: clamp(42px, 7vw, 92px);
  align-items: center;
}

.calculator-showcase-copy h2 {
  max-width: 680px;
  margin-bottom: 20px;
}

.calculator-showcase-lead {
  max-width: 620px;
  color: var(--color-muted);
  font-size: 1.06rem;
  line-height: 1.8;
}

.calculator-benefits {
  display: grid;
  gap: 14px;
  margin: 30px 0 32px;
}

.calculator-benefit {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: center;
}

.calculator-benefit-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(198, 255, 43, 0.28);
  border-radius: 12px;
  background: rgba(198, 255, 43, 0.08);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 0.82rem;
}

.calculator-benefit strong,
.calculator-benefit small {
  display: block;
}

.calculator-benefit strong {
  margin-bottom: 3px;
  color: var(--color-text);
  font-size: 0.95rem;
}

.calculator-benefit small {
  color: var(--color-muted);
  font-size: 0.82rem;
}

.calculator-showcase-cta {
  min-width: 230px;
  justify-content: center;
}

.calculator-showcase-note {
  margin: 13px 0 0;
  color: var(--color-muted);
  font-size: 0.76rem;
}

.calculator-preview {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(26, 29, 34, 0.94), rgba(12, 14, 17, 0.98));
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
}

.calculator-preview-glow {
  position: absolute;
  width: 240px;
  height: 240px;
  top: -130px;
  inset-inline-end: -80px;
  border-radius: 50%;
  background: rgba(198, 255, 43, 0.14);
  filter: blur(55px);
  animation: calculator-glow 5s ease-in-out infinite alternate;
  pointer-events: none;
}

.calculator-preview-top,
.calculator-preview-main,
.calculator-preview-footer {
  position: relative;
  z-index: 1;
}

.calculator-preview-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 30px;
}

.calculator-preview-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--color-muted);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.calculator-preview-top h3 {
  margin: 0;
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
}

.calculator-preview-status {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid rgba(198, 255, 43, 0.22);
  border-radius: 999px;
  background: rgba(198, 255, 43, 0.06);
  color: var(--color-accent);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.calculator-preview-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 12px rgba(198, 255, 43, 0.8);
}

.calculator-preview-main {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  align-items: center;
  margin-bottom: 28px;
}

.calculator-preview-ring {
  display: grid;
  width: 180px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--macro-color-protein) 0 29%, var(--macro-color-carbs) 29% 75%, var(--macro-color-fats) 75% 100%);
  box-shadow: 0 0 42px rgba(198, 255, 43, 0.08);
  animation: calculator-ring-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.calculator-preview-ring-inner {
  display: grid;
  width: 142px;
  aspect-ratio: 1;
  place-content: center;
  border-radius: 50%;
  background: #111318;
  text-align: center;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.4);
}

.calculator-preview-ring strong {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
}

.calculator-preview-ring span {
  margin-top: 7px;
  color: var(--color-muted);
  font-size: 0.7rem;
}

.calculator-preview-summary > span,
.calculator-preview-summary > small {
  color: var(--color-muted);
  font-size: 0.76rem;
}

.calculator-preview-summary > strong {
  display: block;
  margin: 5px 0 18px;
  color: var(--color-text);
  font-size: 1.15rem;
}

.calculator-preview-progress {
  height: 7px;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.calculator-preview-progress i {
  display: block;
  width: 84%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-accent), #75e830);
  transform-origin: left;
  animation: calculator-progress 1.25s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html[dir="rtl"] .calculator-preview-progress i {
  transform-origin: right;
}

.calculator-preview-macros {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.calculator-preview-macro {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 7px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.calculator-preview-macro > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.calculator-preview-macro > span {
  color: var(--color-muted);
  font-size: 0.7rem;
}

.calculator-preview-macro > strong {
  grid-column: 2;
  font-size: 1rem;
}

.calculator-preview-macro > small {
  grid-column: 3;
  grid-row: 2;
  color: var(--color-muted);
  font-size: 0.66rem;
}

.macro-protein > i { background: var(--macro-color-protein); }
.macro-carbs > i { background: var(--macro-color-carbs); }
.macro-fats > i { background: var(--macro-color-fats); }

.calculator-preview-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-muted);
  font-size: 0.73rem;
}

.calculator-preview-arrow {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent);
  color: #0a0b0d;
  font-size: 1rem;
}

html[dir="rtl"] .calculator-preview-kicker,
html[dir="rtl"] .calculator-preview-status {
  letter-spacing: 0;
  text-transform: none;
}

@keyframes calculator-ring-in {
  from { opacity: 0; transform: scale(0.8) rotate(-20deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes calculator-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes calculator-glow {
  from { transform: translate3d(-10px, 0, 0) scale(0.92); }
  to { transform: translate3d(14px, 12px, 0) scale(1.08); }
}

@media (max-width: 980px) {
  .calculator-showcase {
    grid-template-columns: 1fr;
  }

  .calculator-showcase-copy {
    max-width: 720px;
  }

  .calculator-preview {
    max-width: 680px;
  }
}

@media (max-width: 560px) {
  .calculator-preview {
    padding: 20px;
    border-radius: 20px;
  }

  .calculator-preview-main {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .calculator-preview-ring {
    width: 164px;
  }

  .calculator-preview-ring-inner {
    width: 130px;
  }

  .calculator-preview-summary {
    width: 100%;
  }

  .calculator-preview-macros {
    grid-template-columns: 1fr;
  }

  .calculator-preview-top {
    align-items: center;
  }

  .calculator-showcase-cta {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .calculator-preview-glow,
  .calculator-preview-ring,
  .calculator-preview-progress i {
    animation: none;
  }
}

/* AI shopping assistant */
.ai-chat-launcher { position: fixed; right: 24px; bottom: 24px; z-index: 9997; min-height: 58px; padding: 0 20px; border: 1px solid rgba(199,255,0,.42); border-radius: 999px; background: linear-gradient(135deg,#c7ff00,#86d900); color:#080a07; box-shadow:0 14px 40px rgba(0,0,0,.36),0 0 28px rgba(199,255,0,.16); display:flex; align-items:center; gap:10px; font:800 .86rem/1 Inter,Tajawal,sans-serif; cursor:pointer; transition:transform .25s ease,box-shadow .25s ease; }
.ai-chat-launcher:hover { transform:translateY(-3px); box-shadow:0 18px 46px rgba(0,0,0,.42),0 0 35px rgba(199,255,0,.24); }
.ai-chat-launcher svg { width:23px;height:23px; }
.ai-chat-launcher-pulse { position:absolute;inset:-5px;border:1px solid rgba(199,255,0,.45);border-radius:inherit;animation:ai-chat-pulse 2.2s ease-out infinite;pointer-events:none; }
.ai-chat-panel { position:fixed;right:24px;bottom:96px;z-index:9998;width:min(390px,calc(100vw - 32px));height:min(610px,calc(100dvh - 130px));display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:rgba(13,15,17,.96);box-shadow:0 30px 90px rgba(0,0,0,.62),0 0 50px rgba(199,255,0,.08);backdrop-filter:blur(24px);opacity:0;visibility:hidden;transform:translateY(18px) scale(.96);transform-origin:bottom right;transition:opacity .28s ease,transform .38s cubic-bezier(.2,.8,.2,1),visibility .28s; }
.ai-chat-panel.is-open { opacity:1;visibility:visible;transform:none; }
.ai-chat-head { display:flex;align-items:center;justify-content:space-between;padding:16px 17px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(199,255,0,.09),transparent 55%); }
.ai-chat-identity { display:flex;align-items:center;gap:11px; }.ai-chat-identity img{border-radius:50%;object-fit:cover;box-shadow:0 0 18px rgba(199,255,0,.2)}.ai-chat-identity strong,.ai-chat-identity small{display:block}.ai-chat-identity strong{font-size:.96rem}.ai-chat-identity small{margin-top:3px;color:#aeb4ac;font-size:.7rem}.ai-chat-identity small i{display:inline-block;width:7px;height:7px;margin-inline-end:5px;border-radius:50%;background:#c7ff00;box-shadow:0 0 8px #c7ff00}
.ai-chat-close { width:36px;height:36px;border:1px solid rgba(255,255,255,.1);border-radius:50%;background:rgba(255,255,255,.05);color:#fff;font-size:1.45rem;cursor:pointer;transition:.2s ease }.ai-chat-close:hover{background:rgba(255,255,255,.1);transform:scale(1.05)}
.ai-chat-messages { flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:11px;scroll-behavior:smooth; }
.ai-message { max-width:84%;padding:11px 13px;border-radius:16px;font-size:.83rem;line-height:1.65;white-space:pre-wrap;animation:ai-message-in .3s ease both; }
.ai-message-assistant,.ai-message-typing { align-self:flex-start;background:#202427;border:1px solid rgba(255,255,255,.08);border-bottom-left-radius:5px;color:#edf1eb; }.ai-message-user{align-self:flex-end;background:#c7ff00;color:#0a0c09;border-bottom-right-radius:5px;font-weight:650}.ai-message-typing{color:#9da49b;font-style:italic}
.ai-chat-suggestions { display:flex;gap:7px;padding:0 16px 12px;overflow-x:auto }.ai-chat-suggestions button{white-space:nowrap;border:1px solid rgba(199,255,0,.25);border-radius:999px;background:rgba(199,255,0,.06);color:#d7e5c8;padding:8px 11px;font-size:.7rem;cursor:pointer}.ai-chat-suggestions button:hover{background:rgba(199,255,0,.13);border-color:rgba(199,255,0,.48)}
.ai-chat-form { display:flex;align-items:flex-end;gap:8px;margin:0 14px;padding:8px;border:1px solid rgba(255,255,255,.12);border-radius:17px;background:#181b1d;transition:border-color .2s,box-shadow .2s }.ai-chat-form:focus-within{border-color:rgba(199,255,0,.55);box-shadow:0 0 0 3px rgba(199,255,0,.07)}.ai-chat-form textarea{flex:1;resize:none;border:0;outline:0;background:transparent;color:#fff;padding:8px 7px;font:500 .82rem/1.45 Inter,Tajawal,sans-serif}.ai-chat-form textarea::placeholder{color:#7d847a}.ai-chat-form button{flex:0 0 38px;height:38px;border:0;border-radius:12px;background:#c7ff00;color:#090b08;display:grid;place-items:center;cursor:pointer}.ai-chat-form button:hover{transform:scale(1.05)}.ai-chat-form button svg{width:18px;height:18px}
.ai-chat-disclaimer { margin:8px 14px 11px;text-align:center;color:#747b72;font-size:.61rem; }
.ai-chat-products{display:grid;gap:7px}.ai-chat-product{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:9px;padding:8px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.035)}.ai-chat-product img{width:54px;height:54px;object-fit:contain;border-radius:9px;background:#fff}.ai-chat-product strong,.ai-chat-product small{display:block}.ai-chat-product strong{font-size:.72rem}.ai-chat-product small{margin-top:3px;color:#c7ff00;font-size:.68rem}.ai-chat-product button{border:0;border-radius:9px;background:#c7ff00;color:#090b08;padding:8px;font-size:.64rem;font-weight:800;cursor:pointer}.ai-chat-product button:disabled{opacity:.45}
html[dir="rtl"] .ai-chat-launcher,html[dir="rtl"] .ai-chat-panel{right:24px;left:auto}html[dir="rtl"] .ai-chat-panel{transform-origin:bottom right}html[dir="rtl"] .ai-message-assistant{border-bottom-left-radius:16px;border-bottom-right-radius:5px}html[dir="rtl"] .ai-message-user{border-bottom-right-radius:16px;border-bottom-left-radius:5px}html[dir="rtl"] .ai-chat-form button svg{transform:scaleX(-1)}
@keyframes ai-chat-pulse{0%{opacity:.65;transform:scale(.96)}70%,100%{opacity:0;transform:scale(1.16)}}@keyframes ai-message-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:600px){.ai-chat-launcher{right:16px;bottom:16px;min-width:56px;min-height:56px;padding:0 16px}.ai-chat-launcher>span:last-child{display:none}.ai-chat-panel{right:16px;bottom:84px;height:min(610px,calc(100dvh - 104px));border-radius:22px}html[dir="rtl"] .ai-chat-launcher,html[dir="rtl"] .ai-chat-panel{right:auto;left:16px}.whatsapp-btn{bottom:82px}}
@media(prefers-reduced-motion:reduce){.ai-chat-launcher-pulse{animation:none}.ai-chat-panel,.ai-message{transition:none;animation:none}}

/* ELGARGNI BodyScan Pro */
.bodyscan-tab span{display:inline-grid;place-items:center;margin-inline-start:5px;padding:2px 5px;border-radius:4px;background:var(--color-accent);color:#090b08;font:800 .52rem/1 Inter,sans-serif;vertical-align:middle}.bodyscan-shell{position:relative;overflow:hidden;padding:clamp(20px,4vw,38px);border:1px solid rgba(199,255,0,.16);border-radius:28px;background:radial-gradient(circle at 90% 0,rgba(199,255,0,.1),transparent 30%),linear-gradient(145deg,#131719,#0c0f11);box-shadow:inset 0 1px rgba(255,255,255,.06),0 30px 80px rgba(0,0,0,.3)}.bodyscan-shell:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,#000,transparent 55%)}
.bodyscan-brand-row{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.bodyscan-overline{margin:0 0 6px;color:var(--color-accent);font:800 .68rem/1 Inter,sans-serif;letter-spacing:.18em}.bodyscan-brand-row h2{margin:0;font-size:clamp(1.3rem,3vw,2.1rem)}.bodyscan-live{display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(199,255,0,.2);border-radius:999px;background:rgba(199,255,0,.06);color:#b9c7af;font:700 .58rem/1 Inter,sans-serif;letter-spacing:.08em;white-space:nowrap}.bodyscan-live i{width:7px;height:7px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 10px var(--color-accent);animation:bodyscan-dot 1.8s ease infinite}.bodyscan-intro{position:relative;max-width:680px;margin:12px 0 24px;color:var(--color-muted);font-size:.84rem}
.bodyscan-quick-ready{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:12px;padding:15px 17px;border:1px solid rgba(199,255,0,.16);border-radius:16px;background:linear-gradient(135deg,rgba(199,255,0,.07),rgba(255,255,255,.018))}.bodyscan-quick-ready>div{display:flex;align-items:center;gap:11px}.bodyscan-quick-ready i{display:grid;width:32px;height:32px;place-items:center;border-radius:50%;background:var(--color-accent);color:#090b08;font-style:normal;font-weight:900;box-shadow:0 0 18px rgba(199,255,0,.15)}.bodyscan-quick-ready strong,.bodyscan-quick-ready small{display:block}.bodyscan-quick-ready strong{font-size:.78rem}.bodyscan-quick-ready small{margin-top:4px;color:#858d83;font-size:.62rem}.bodyscan-quick-ready button{border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.04);color:#c9cfc6;padding:10px 12px;font:700 .64rem Inter,Tajawal,sans-serif;cursor:pointer;transition:.2s ease}.bodyscan-quick-ready button:hover,.bodyscan-quick-ready button.is-open{border-color:rgba(199,255,0,.35);background:rgba(199,255,0,.08);color:#fff}.bodyscan-quick-ready button span{display:inline-block;margin-inline-start:7px;color:var(--color-accent);font-size:.9rem}
.bodyscan-measurements{position:relative;display:grid;grid-template-columns:repeat(3,1fr) auto;gap:10px;align-items:end;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.025)}.bodyscan-measurements label span{display:flex;justify-content:space-between;margin:0 3px 7px;color:#bcc3ba;font-size:.68rem}.bodyscan-measurements label b{color:#687069;font-size:.57rem}.bodyscan-measurements input{width:100%;height:46px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:#0c0f10;color:#fff;padding:0 12px;font:700 .9rem Inter,sans-serif;outline:none}.bodyscan-measurements input:focus{border-color:rgba(199,255,0,.55);box-shadow:0 0 0 3px rgba(199,255,0,.07)}.bodyscan-run{min-height:46px;white-space:nowrap}.bodyscan-run i{display:inline-block;width:7px;height:7px;margin-inline-start:8px;border-radius:50%;background:#080b07;box-shadow:0 0 0 4px rgba(8,11,7,.12)}
.bodyscan-run{width:100%;margin-top:12px}.bodyscan-measurements[hidden]{display:none}
.bodyscan-progress{position:relative;margin-top:18px;padding:28px;text-align:center;border-radius:18px;background:rgba(199,255,0,.035)}.bodyscan-progress-line{height:3px;margin-bottom:16px;overflow:hidden;border-radius:4px;background:rgba(255,255,255,.07)}.bodyscan-progress-line i{display:block;width:40%;height:100%;background:linear-gradient(90deg,transparent,var(--color-accent),transparent);animation:bodyscan-progress 1.2s ease-in-out infinite}.bodyscan-progress strong{font-size:.75rem;color:#b9c2b5}
.bodyscan-report{position:relative;margin-top:24px;animation:bodyscan-report-in .65s cubic-bezier(.2,.8,.2,1) both}.bodyscan-summary{display:grid;grid-template-columns:minmax(220px,1fr) minmax(200px,.8fr);gap:18px;margin-bottom:18px}.bodyscan-figure,.bodyscan-score-wrap{position:relative;min-height:310px;border:1px solid rgba(255,255,255,.07);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.01));display:grid;place-items:center;overflow:hidden}.bodyscan-figure svg{width:155px;height:280px;fill:rgba(199,255,0,.13);stroke:rgba(199,255,0,.5);stroke-width:2;filter:drop-shadow(0 0 16px rgba(199,255,0,.14))}.body-scan-beam{position:absolute;z-index:2;left:10%;right:10%;height:2px;background:var(--color-accent);box-shadow:0 0 12px var(--color-accent),0 0 35px var(--color-accent);animation:body-beam 2.8s ease-in-out infinite}.body-marker{position:absolute;padding:5px 8px;border:1px solid rgba(199,255,0,.2);border-radius:6px;background:rgba(10,13,14,.8);color:#aeb9aa;font:700 .52rem/1 Inter,sans-serif}.marker-fat{top:27%;left:8%}.marker-muscle{top:49%;right:7%}.marker-water{bottom:20%;left:12%}
.bodyscan-score-wrap{align-content:center;text-align:center}.bodyscan-score-ring{--score:0deg;width:172px;height:172px;padding:10px;border-radius:50%;background:conic-gradient(var(--color-accent) var(--score),rgba(255,255,255,.07) 0);transition:--score 1.2s ease;box-shadow:0 0 35px rgba(199,255,0,.1)}.bodyscan-score-ring>div{width:100%;height:100%;display:grid;place-content:center;border-radius:50%;background:#101416}.bodyscan-score-ring strong{font:800 3rem/1 Inter,sans-serif}.bodyscan-score-ring span{color:#737c72;font-size:.72rem}.bodyscan-score-wrap h3{margin:16px 0 3px;font-size:.82rem}.bodyscan-score-wrap p{margin:0;color:var(--color-accent);font-size:.72rem}
.bodyscan-section{margin-top:14px;padding:18px;border:1px solid rgba(255,255,255,.07);border-radius:20px;background:rgba(255,255,255,.018)}.bodyscan-section-title{display:flex;align-items:center;gap:9px;margin-bottom:15px}.bodyscan-section-title>span{display:grid;width:27px;height:27px;place-items:center;border-radius:7px;background:rgba(199,255,0,.1);color:var(--color-accent);font:800 .6rem Inter,sans-serif}.bodyscan-section-title h3{margin:0;font-size:.82rem}.bodyscan-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.bodyscan-metrics article{padding:14px 11px;border-radius:13px;background:#0d1011}.bodyscan-metrics small,.bodyscan-dials small{display:block;min-height:30px;color:#868e84;font-size:.61rem;line-height:1.35}.bodyscan-metrics strong{font:800 1.25rem/1 Inter,sans-serif}.bodyscan-metrics article>span{margin-inline-start:3px;color:#676e66;font-size:.58rem}.metric-bar{height:3px;margin-top:12px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}.metric-bar i{display:block;width:0;height:100%;background:#fff;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}.metric-fat i{background:#ffb454}.metric-lean i{background:#8de8b3}.metric-muscle i{background:var(--color-accent)}.metric-water i{background:#56c8ff}
.bodyscan-dials{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.bodyscan-dials article{padding:16px;border-inline-start:2px solid rgba(199,255,0,.4);border-radius:5px 12px 12px 5px;background:#0d1011}.bodyscan-dials strong{display:block;margin:5px 0;font:800 1.5rem/1 Inter,sans-serif}.bodyscan-dials strong b{font:inherit}.bodyscan-dials article>span{color:#879086;font-size:.61rem}.bodyscan-balance{margin-top:14px;padding:17px;border-radius:18px;background:rgba(255,255,255,.025)}.bodyscan-balance>div:first-child{display:flex;justify-content:space-between}.bodyscan-balance small{color:#90988e;font-size:.66rem}.bodyscan-balance strong{color:var(--color-accent)}.balance-track{position:relative;height:7px;margin:14px 0 7px;border-radius:999px;background:linear-gradient(90deg,#56c8ff 0 30%,var(--color-accent) 30% 65%,#ff9e56 65%)}.balance-track i{position:absolute;top:50%;left:50%;width:16px;height:16px;border:3px solid #fff;border-radius:50%;background:#111;transform:translate(-50%,-50%);transition:left 1s ease}.balance-labels{display:flex;justify-content:space-between;color:#6f776e;font-size:.55rem}.bodyscan-actions{display:flex;gap:10px;margin-top:18px}.bodyscan-disclaimer{margin:15px 0 0;color:#70786f;font-size:.62rem;line-height:1.65}
@keyframes bodyscan-dot{50%{opacity:.35}}@keyframes bodyscan-progress{from{transform:translateX(-160%)}to{transform:translateX(310%)}}@keyframes body-beam{0%,100%{top:12%;opacity:.3}50%{top:86%;opacity:1}}@keyframes bodyscan-report-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(max-width:900px){.bodyscan-measurements{grid-template-columns:1fr 1fr}.bodyscan-run{grid-column:1/-1}.bodyscan-metrics{grid-template-columns:repeat(2,1fr)}.bodyscan-dials{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.bodyscan-shell{padding:16px;border-radius:20px}.bodyscan-brand-row{display:block}.bodyscan-live{width:max-content;margin-top:12px}.bodyscan-quick-ready{align-items:flex-start;flex-direction:column}.bodyscan-quick-ready button{width:100%}.bodyscan-measurements{grid-template-columns:1fr}.bodyscan-summary{grid-template-columns:1fr}.bodyscan-figure{min-height:280px}.bodyscan-score-wrap{min-height:260px}.bodyscan-metrics,.bodyscan-dials{grid-template-columns:1fr 1fr}.bodyscan-actions{flex-direction:column}.bodyscan-actions .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.bodyscan-live i,.bodyscan-progress-line i,.body-scan-beam,.bodyscan-report{animation:none}.metric-bar i,.balance-track i{transition:none}}

/* K1 Performance coming-soon reveal */
.k1-coming-soon{position:relative;overflow:hidden;background:#080a0d;padding-block:clamp(70px,10vw,140px);isolation:isolate}.k1-coming-soon:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle,#000,transparent 78%)}.k1-ambient{position:absolute;z-index:-1;width:420px;height:420px;border-radius:50%;filter:blur(110px);opacity:.13;pointer-events:none}.k1-ambient-one{top:-180px;left:-130px;background:#2d78ff;animation:k1-float 8s ease-in-out infinite alternate}.k1-ambient-two{right:-180px;bottom:-200px;background:var(--color-accent);animation:k1-float 10s ease-in-out infinite alternate-reverse}.k1-teaser{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);min-height:610px;overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:32px;background:linear-gradient(145deg,rgba(19,23,28,.96),rgba(8,10,12,.98));box-shadow:0 45px 120px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.05)}
.k1-visual{position:relative;min-height:560px;overflow:hidden;background:#050608}.k1-visual img{width:100%;height:100%;object-fit:cover;object-position:center;filter:blur(2px) saturate(.88) brightness(.72);transform:scale(1.025);transition:filter 1s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)}.k1-teaser:hover .k1-visual img{filter:blur(0) saturate(1) brightness(.82);transform:scale(1.01)}.k1-visual:before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,transparent 52%,rgba(8,10,12,.9) 100%),linear-gradient(0deg,rgba(8,10,12,.3),transparent 48%)}.k1-visual-blur{position:absolute;z-index:3;inset:0;background:radial-gradient(circle at 33% 53%,transparent 0 28%,rgba(8,10,12,.04) 52%,rgba(8,10,12,.22) 100%);backdrop-filter:blur(.3px)}.k1-scanline{position:absolute;z-index:4;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(199,255,0,.65),transparent);box-shadow:0 0 12px rgba(199,255,0,.35);animation:k1-scan 5s ease-in-out infinite}.k1-classified{position:absolute;z-index:5;bottom:22px;left:24px;color:rgba(255,255,255,.42);font:700 .57rem/1 Inter,sans-serif;letter-spacing:.18em}
.k1-copy{position:relative;z-index:5;display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,5vw,72px)}.k1-badge{display:flex;width:max-content;align-items:center;gap:9px;margin-bottom:34px;padding:8px 12px;border:1px solid rgba(199,255,0,.24);border-radius:999px;background:rgba(199,255,0,.055);color:#d8e4cf;font:800 .61rem/1 Inter,Tajawal,sans-serif;letter-spacing:.13em}.k1-badge i{width:7px;height:7px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 12px var(--color-accent);animation:k1-pulse 1.8s ease-in-out infinite}.k1-kicker{margin:0 0 10px;color:var(--color-accent);font:800 .68rem/1 Inter,sans-serif;letter-spacing:.22em}.k1-copy h2{max-width:520px;margin:0;font-size:clamp(2.3rem,5vw,4.8rem);line-height:.96;letter-spacing:-.045em}.k1-description{max-width:520px;margin:24px 0 0;color:#a5aca3;font-size:clamp(.86rem,1.25vw,1rem);line-height:1.85}.k1-pill-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:27px}.k1-pill-row span{padding:8px 10px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:rgba(255,255,255,.035);color:#b8beb5;font-size:.64rem}.k1-reveal-line{display:flex;align-items:center;gap:12px;margin-top:32px}.k1-reveal-line span{width:46px;height:1px;background:var(--color-accent);box-shadow:0 0 8px rgba(199,255,0,.5)}.k1-reveal-line p{margin:0;color:#eef2eb;font:800 .72rem/1 Inter,Tajawal,sans-serif;letter-spacing:.09em;text-transform:uppercase}.k1-notify{display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(100%,310px);margin-top:26px;padding:15px 18px;border-radius:12px;background:#fff;color:#090b0d;font:800 .76rem/1 Inter,Tajawal,sans-serif;transition:transform .25s ease,background .25s ease,box-shadow .25s ease}.k1-notify:hover{transform:translateY(-3px);background:var(--color-accent);box-shadow:0 14px 35px rgba(199,255,0,.13)}.k1-notify svg{width:19px;height:19px;transition:transform .25s ease}.k1-notify:hover svg{transform:translateX(4px)}html[dir="rtl"] .k1-notify svg{transform:scaleX(-1)}html[dir="rtl"] .k1-notify:hover svg{transform:scaleX(-1) translateX(4px)}.k1-whisper{margin:13px 0 0;color:#626861;font-size:.6rem}
@keyframes k1-scan{0%,100%{top:12%;opacity:.15}50%{top:88%;opacity:.8}}@keyframes k1-pulse{50%{opacity:.35;transform:scale(.8)}}@keyframes k1-float{to{transform:translate3d(40px,30px,0) scale(1.12)}}
@media(max-width:940px){.k1-teaser{grid-template-columns:1fr;min-height:0}.k1-visual{min-height:420px}.k1-visual:before{background:linear-gradient(0deg,rgba(8,10,12,.98),transparent 55%)}.k1-copy{margin-top:-55px;padding-top:30px}.k1-copy h2{font-size:clamp(2.6rem,9vw,4.4rem)}}
@media(max-width:600px){.k1-coming-soon{padding-block:58px}.k1-teaser{border-radius:22px}.k1-visual{min-height:310px}.k1-copy{padding:28px 21px 34px}.k1-badge{margin-bottom:25px}.k1-description{margin-top:18px}.k1-notify{width:100%}}
@media(prefers-reduced-motion:reduce){.k1-ambient,.k1-scanline,.k1-badge i{animation:none}.k1-visual img{transition:none}}