@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@500;600;700;800;900&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

/* Zolgstore BOLD — طبقة تصميم فوق style.css: أسود عميق، برتقالي ناري، طباعة ضخمة. */
:root {
  --z-black: #0b0b0d;
  --z-coal: #141417;
  --z-cream: #f4f1ea;
  --z-fire: #ff5b1f;
  --z-fire-2: #ff8a3d;
  --ink: #0b0b0d;
  --ink-2: #18181b;
  --ink-3: #27272a;
  --gold: #ff5b1f;
  --gold-soft: #ffd2bd;
  --gold-deep: #d9430b;
  --paper: #f4f1ea;
  --white: #ffffff;
  --muted: #5f5f67;
  --line: #e0dbcf;
  --radius: 22px;
  --shadow-sm: 0 10px 30px rgba(11, 11, 13, .06);
  --shadow-lg: 0 30px 70px rgba(11, 11, 13, .18);
  --font-display: 'Alexandria', 'IBM Plex Sans Arabic', sans-serif;
  --z-body: 'IBM Plex Sans Arabic', 'Cairo', sans-serif;
}

html[data-theme="dark"] {
  --ink: #f4f1ea;
  --ink-2: #e4e1da;
  --ink-3: #c9c6bf;
  --paper: #0a0a0c;
  --white: #141417;
  --muted: #a1a1aa;
  --line: #26262b;
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
}

:root body { font-family: var(--z-body); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
:root body ::selection { background: var(--z-fire); color: var(--z-black); }
:root body h1, :root body h2, :root body h3, :root body .section-title { font-family: var(--font-display); }

/* ---------- Header ---------- */
:root body header {
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  box-shadow: none;
}
:root body header .container { min-height: 78px; }
:root body .logo-mark {
  width: 42px; height: 42px; border-radius: 13px;
  background: var(--z-fire); color: var(--z-black);
  box-shadow: 0 8px 22px rgba(255, 91, 31, .45);
  transform: rotate(-6deg);
  transition: transform .4s var(--ease);
}
:root body .logo:hover .logo-mark { transform: rotate(6deg) scale(1.05); }
:root body .logo h1 { font-family: var(--font-display); font-weight: 900; font-size: 1.45rem; letter-spacing: -.03em; color: var(--ink); }
:root body .logo-tagline { color: var(--muted); letter-spacing: .22em; font-weight: 700; }
:root body nav {
  padding: 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
:root body nav a { border-radius: 999px; padding: 9px 17px; color: var(--muted); font-weight: 700; font-size: .86rem; }
:root body nav a i { color: currentColor; opacity: .7; }
:root body nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
:root body nav a.active { background: var(--z-black); color: var(--z-cream); box-shadow: 0 6px 18px rgba(11,11,13,.25); }
html[data-theme="dark"] body nav a.active { background: var(--z-fire); color: var(--z-black); }
:root body nav a.active i { color: var(--z-fire); opacity: 1; }
html[data-theme="dark"] body nav a.active i { color: var(--z-black); }
:root body .site-preference-button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: transparent; color: var(--ink);
}
:root body .site-preference-button:hover { background: var(--z-fire); color: var(--z-black); border-color: var(--z-fire); }

/* ---------- Buttons ---------- */
:root body .btn {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em;
  border-radius: 999px; min-height: 50px; padding: 0 24px;
  background: var(--z-fire); color: var(--z-black);
  box-shadow: 0 10px 26px rgba(255, 91, 31, .32);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
:root body .btn:hover { background: var(--z-fire-2); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(255, 91, 31, .42); }
:root body .btn i { transition: transform .25s var(--ease); }
:root body .btn:hover .fa-arrow-left { transform: translateX(-4px); }
:root body .btn-outline { background: transparent; color: var(--ink); border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); box-shadow: none; }
:root body .btn-outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; }
:root body .btn-small { min-height: 40px; padding: 0 16px; font-size: .8rem; box-shadow: none; }

/* ---------- Hero ---------- */
:root body .z-hero {
  min-height: auto; padding: 0; overflow: hidden; position: relative;
  background:
    radial-gradient(900px 520px at 12% 20%, rgba(255, 91, 31, .28), transparent 60%),
    radial-gradient(700px 500px at 95% 110%, rgba(255, 138, 61, .14), transparent 60%),
    var(--z-black);
  color: var(--z-cream);
}
:root body .z-hero::before, :root body .z-hero::after { display: none; }
.z-hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(244, 241, 234, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 241, 234, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
}
.z-hero-layout {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 48px;
  padding: 72px 0 96px;
}
:root body .z-hero .hero-content { max-width: none; padding: 0; }
.z-hero-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 14px; border-radius: 999px; margin-bottom: 26px;
  font-size: .8rem; font-weight: 600; color: var(--z-cream);
  background: rgba(244, 241, 234, .06); border: 1px solid rgba(244, 241, 234, .14);
}
.z-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--z-fire); box-shadow: 0 0 0 0 rgba(255, 91, 31, .7); animation: zPulse 2s infinite; }
@keyframes zPulse { 0% { box-shadow: 0 0 0 0 rgba(255,91,31,.7); } 70% { box-shadow: 0 0 0 12px rgba(255,91,31,0); } 100% { box-shadow: 0 0 0 0 rgba(255,91,31,0); } }

:root body .z-hero h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.7rem, 6.2vw, 5.4rem); line-height: 1.12; letter-spacing: -.035em;
  color: var(--z-cream); margin-bottom: 26px;
}
:root body .z-hero h2 .z-accent, .z-accent { color: var(--z-fire); }
:root body .z-hero h2 .z-outline {
  color: var(--z-cream);
  background: linear-gradient(transparent 68%, rgba(255, 91, 31, .55) 68%, rgba(255, 91, 31, .55) 88%, transparent 88%);
  padding-inline: .08em;
}
:root body .z-hero p { color: rgba(244, 241, 234, .68); font-size: 1.1rem; max-width: 520px; line-height: 1.9; margin-bottom: 34px; }
:root body .z-hero .btn-outline { color: var(--z-cream); border-color: rgba(244, 241, 234, .24); }
:root body .z-hero .btn-outline:hover { background: var(--z-cream); color: var(--z-black); border-color: var(--z-cream); }
:root body .z-hero .z-btn-primary { min-height: 58px; padding: 0 30px; font-size: 1rem; }
:root body .z-hero .z-btn-ghost { min-height: 58px; padding: 0 26px; }
:root body .z-hero .hero-stats { gap: 0; margin-top: 48px; padding-top: 0; border-top: 0; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 520px; border: 1px solid rgba(244, 241, 234, .12); border-radius: 20px; overflow: hidden; }
:root body .z-hero .hero-stat { padding: 18px 20px; border-inline-start: 1px solid rgba(244, 241, 234, .12); }
:root body .z-hero .hero-stat:first-child { border-inline-start: 0; }
:root body .z-hero .hero-stat strong { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--z-cream); text-align: right; }
:root body .z-hero .hero-stat span { color: rgba(244, 241, 234, .55); font-size: .78rem; }

.z-hero-visual { position: relative; }
.z-hero-frame {
  position: relative; aspect-ratio: 1; border-radius: 36px; overflow: hidden;
  border: 1px solid rgba(244, 241, 234, .12);
  box-shadow: 0 40px 120px rgba(255, 91, 31, .22), 0 0 0 10px rgba(244, 241, 234, .03);
  transform: rotate(2.5deg);
  transition: transform .8s var(--ease);
}
.z-hero-visual:hover .z-hero-frame { transform: rotate(0deg) scale(1.01); }
.z-hero-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.z-hero-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11, 11, 13, .55)); }
.z-float {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 14px; border-radius: 18px;
  background: rgba(20, 20, 23, .72); border: 1px solid rgba(244, 241, 234, .14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--z-cream); box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  animation: zFloat 6s ease-in-out infinite;
}
.z-float i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--z-fire); color: var(--z-black); font-size: .95rem; }
.z-float strong { display: block; font-family: var(--font-display); font-size: .9rem; font-weight: 700; line-height: 1.3; }
.z-float small { color: rgba(244, 241, 234, .6); font-size: .72rem; }
.z-float-top { top: 8%; right: -26px; }
.z-float-bottom { bottom: 10%; left: -30px; animation-delay: -3s; }
@keyframes zFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.z-hero-stamp {
  position: absolute; z-index: 3; bottom: -38px; right: 18%;
  width: 118px; height: 118px; border-radius: 50%;
  background: var(--z-fire); color: var(--z-black);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-family: var(--font-display); font-weight: 900; font-size: .68rem; letter-spacing: .14em;
  box-shadow: 0 18px 40px rgba(255, 91, 31, .45);
}
.z-hero-stamp i { font-size: 1.7rem; }
.z-hero-stamp span { direction: ltr; }
.z-hero-stamp::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 1.5px dashed rgba(11, 11, 13, .45); animation: zSpin 14s linear infinite; }
@keyframes zSpin { to { transform: rotate(360deg); } }

/* ---------- Marquee ---------- */
.z-marquee {
  position: relative; z-index: 3; overflow: hidden;
  background: var(--z-fire); color: var(--z-black);
  transform: rotate(-1.4deg); margin: -26px -20px 0;
  border-block: 3px solid var(--z-black);
  box-shadow: 0 20px 40px rgba(255, 91, 31, .25);
}
.z-marquee-track { display: flex; align-items: center; gap: 30px; width: max-content; padding: 16px 0; animation: zMarquee 28s linear infinite; direction: ltr; }
.z-marquee-track span { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.1rem, 2.4vw, 1.7rem); letter-spacing: -.01em; white-space: nowrap; text-transform: uppercase; }
.z-marquee-track i { font-size: .9rem; }
@keyframes zMarquee { to { transform: translateX(-50%); } }

/* ---------- Bento features ---------- */
:root body .z-bento {
  margin: 90px auto 90px; padding: 0; width: min(1240px, calc(100% - 40px));
  background: transparent; box-shadow: none; border-radius: 0;
}
:root body .z-bento .container { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; width: 100%; }
:root body .z-bento .feature {
  position: relative; overflow: hidden; flex-direction: column; gap: 22px;
  min-height: 260px; padding: 28px; border-radius: 28px;
  background: var(--white); border: 1px solid var(--line);
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
:root body .z-bento .feature:hover { transform: translateY(-6px); border-color: var(--z-fire); }
:root body .z-bento .feature i {
  width: 56px; height: 56px; flex: 0 0 56px; border-radius: 18px;
  background: color-mix(in srgb, var(--z-fire) 14%, transparent); color: var(--z-fire); font-size: 1.3rem;
}
:root body .z-bento .feature h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; color: var(--ink); }
:root body .z-bento .feature p { color: var(--muted); font-size: .9rem; line-height: 1.8; }
.z-bento-num {
  position: absolute; top: 18px; left: 24px;
  font-family: var(--font-display); font-weight: 900; font-size: 4.2rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 14%, transparent);
}
:root body .z-bento .z-bento-lead { background: var(--z-black); border-color: var(--z-black); color: var(--z-cream); justify-content: flex-end; }
:root body .z-bento .z-bento-lead h3 { color: var(--z-cream); font-size: 1.7rem; }
:root body .z-bento .z-bento-lead p { color: rgba(244, 241, 234, .65); max-width: 420px; }
:root body .z-bento .z-bento-lead i { background: var(--z-fire); color: var(--z-black); }
:root body .z-bento .z-bento-lead .z-bento-num { -webkit-text-stroke-color: rgba(255, 91, 31, .55); }
html[data-theme="dark"] body .z-bento .z-bento-lead { background: var(--z-fire); border-color: var(--z-fire); }
html[data-theme="dark"] body .z-bento .z-bento-lead h3, html[data-theme="dark"] body .z-bento .z-bento-lead p { color: var(--z-black); }
html[data-theme="dark"] body .z-bento .z-bento-lead i { background: var(--z-black); color: var(--z-fire); }
html[data-theme="dark"] body .z-bento .z-bento-lead .z-bento-num { -webkit-text-stroke-color: rgba(11, 11, 13, .35); }

/* ---------- Section headings ---------- */
:root body .eyebrow, :root body .hero-kicker { color: var(--z-fire) !important; font-family: var(--font-display); font-weight: 700; letter-spacing: .18em; font-size: .72rem; }
:root body .eyebrow::before, :root body .hero-kicker::before { width: 28px; height: 3px; background: var(--z-fire); }
:root body .section-title { font-weight: 900; font-size: clamp(1.9rem, 4.2vw, 3.2rem); letter-spacing: -.035em; line-height: 1.3; color: var(--ink); }
:root body .section-subtitle { color: var(--muted); font-size: .95rem; }
:root body .home-selection-note { background: var(--ink); color: var(--paper); border-radius: 999px; padding: 10px 16px; }
:root body .home-selection-note i { color: var(--z-fire); }

/* ---------- Page header (inner pages) ---------- */
:root body .page-header {
  padding: 72px 0 84px; color: var(--z-cream); overflow: hidden;
  background:
    radial-gradient(700px 380px at 10% 0%, rgba(255, 91, 31, .3), transparent 60%),
    var(--z-black);
}
:root body .page-header::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(244,241,234,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(244,241,234,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
}
:root body .page-header::after { display: none; }
:root body .page-header h1 { color: var(--z-cream); font-weight: 900; font-size: clamp(2.2rem, 5.6vw, 4.4rem); letter-spacing: -.035em; line-height: 1.05; }
:root body .page-header h1 i { color: var(--z-fire); }
:root body .page-header p { color: rgba(244, 241, 234, .66); font-size: 1rem; }

/* ---------- Product cards ---------- */
:root body .products-grid { gap: 20px; }
:root body .product-item {
  position: relative; border-radius: 26px; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); box-shadow: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
:root body .product-item:hover { transform: translateY(-8px); border-color: var(--z-fire); box-shadow: 0 30px 60px rgba(255, 91, 31, .16); }
:root body .product-item .product-image {
  margin: 8px; border-radius: 20px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 5%, var(--white));
}
:root body .product-item .product-image img { transition: transform .7s var(--ease); }
:root body .product-item:hover .product-image img { transform: scale(1.08); }
:root body .product-stock-badge {
  border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: .68rem;
  background: var(--z-black); color: var(--z-cream);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
:root body .product-stock-badge.is-out { background: #dd4f3a; color: #fff; }
:root body .product-item .product-info { padding: 12px 18px 20px; }
:root body .product-item h3 { font-family: var(--font-display); font-weight: 700; font-size: .98rem; line-height: 1.5; letter-spacing: -.01em; color: var(--ink); }
:root body .product-card-description { color: var(--muted); }
:root body .product-price .sale-price { font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; letter-spacing: -.02em; color: var(--ink); }
:root body .product-old-price { color: var(--muted); }
:root body .product-card-discount { background: var(--z-fire); color: var(--z-black); border-radius: 999px; font-weight: 800; }
:root body .product-card-actions .btn { box-shadow: none; }
:root body .product-card-actions .btn:not(.btn-cart-add) { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
:root body .product-card-actions .btn:not(.btn-cart-add):hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
:root body .product-card-actions .btn-cart-add { background: var(--z-black); color: var(--z-cream); }
:root body .product-card-actions .btn-cart-add i { color: var(--z-fire); }
:root body .product-card-actions .btn-cart-add:hover { background: var(--z-fire); color: var(--z-black); }
:root body .product-card-actions .btn-cart-add:hover i { color: var(--z-black); }
html[data-theme="dark"] body .product-card-actions .btn-cart-add { background: var(--z-fire); color: var(--z-black); }
html[data-theme="dark"] body .product-card-actions .btn-cart-add i { color: var(--z-black); }

:root body .home-all-products-button {
  min-height: 60px; padding: 0 34px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  border: 0; box-shadow: var(--shadow-lg);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
:root body .home-all-products-button:hover { background: var(--z-fire); color: var(--z-black); transform: translateY(-3px); }

/* ---------- Catalog toolbar ---------- */
:root body .catalog-toolbar, :root body .catalog-categories {
  border-radius: 24px; background: var(--white); border: 1px solid var(--line); box-shadow: none;
}
:root body .catalog-toolbar { margin-top: -40px; position: relative; z-index: 2; box-shadow: var(--shadow-lg); }
:root body .catalog-search input, :root body .catalog-sort select {
  border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink);
}
:root body .catalog-search input:focus, :root body .catalog-sort select:focus { outline: none; border-color: var(--z-fire); box-shadow: 0 0 0 4px color-mix(in srgb, var(--z-fire) 18%, transparent); }
:root body .category-chips button, :root body .category-chips a, :root body .category-chip {
  border-radius: 999px; font-weight: 700;
}
:root body .category-chips .active, :root body .category-chips [aria-pressed="true"], :root body .category-chip.is-active {
  background: var(--z-fire) !important; color: var(--z-black) !important; border-color: var(--z-fire) !important;
}
:root body .pagination a, :root body .pagination button { border-radius: 999px; }

/* ---------- Product details ---------- */
:root body .product-details .main-image { border-radius: 28px; overflow: hidden; border: 1px solid var(--line); }
:root body .product-details .product-info h2 { font-weight: 900; letter-spacing: -.03em; line-height: 1.2; }
:root body .product-details .current-price { font-family: var(--font-display); font-weight: 900; color: var(--z-fire); letter-spacing: -.02em; }
:root body .product-details .discount { background: var(--z-black); color: var(--z-cream); border-radius: 999px; }
:root body .product-order-form { border-radius: 28px; border: 1px solid var(--line); background: var(--white); }
:root body .product-order-form input, :root body .product-order-form select, :root body .product-order-form textarea,
:root body .cart-checkout input, :root body .cart-checkout select, :root body .cart-checkout textarea {
  border-radius: 14px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink);
}
:root body .product-order-form input:focus, :root body .product-order-form select:focus, :root body .product-order-form textarea:focus,
:root body .cart-checkout input:focus, :root body .cart-checkout select:focus, :root body .cart-checkout textarea:focus {
  outline: none; border-color: var(--z-fire); box-shadow: 0 0 0 4px color-mix(in srgb, var(--z-fire) 18%, transparent);
}
:root body .delivery-option span { border-radius: 16px; }
:root body .delivery-option input:checked + span { border-color: var(--z-fire); background: color-mix(in srgb, var(--z-fire) 10%, transparent); }

/* ---------- Cart ---------- */
:root body .zolg-cart-trigger {
  min-height: 58px; padding: 0 22px 0 18px; border-radius: 999px;
  background: var(--z-black); color: var(--z-cream);
  font-family: var(--font-display); font-weight: 700;
  border: 1px solid rgba(244, 241, 234, .12);
  box-shadow: 0 18px 44px rgba(11, 11, 13, .35), 0 0 0 6px color-mix(in srgb, var(--z-fire) 16%, transparent);
  transition: transform .3s var(--ease);
}
:root body .zolg-cart-trigger:hover { transform: translateY(-3px) scale(1.02); }
:root body .zolg-cart-trigger i { color: var(--z-fire); }
:root body .zolg-cart-trigger b { background: var(--z-fire); color: var(--z-black); min-width: 26px; height: 26px; font-size: .75rem; }
:root body .cart-panel { background: var(--paper); border-radius: 28px 0 0 28px; }
:root body .cart-header h2 { font-weight: 900; letter-spacing: -.02em; }
:root body .cart-total-line strong { font-family: var(--font-display); font-weight: 900; color: var(--z-fire); }

/* ---------- CTA ---------- */
.z-cta { padding: 0 0 90px; }
.z-cta-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  padding: 56px; border-radius: 36px;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(255, 91, 31, .4), transparent 60%),
    var(--z-black);
  color: var(--z-cream);
}
.z-cta-card::before {
  content: 'ZOLG'; position: absolute; left: -10px; bottom: -60px; pointer-events: none;
  font-family: var(--font-display); font-weight: 900; font-size: 14rem; line-height: 1; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(244, 241, 234, .07);
}
.z-cta-card > * { position: relative; }
.z-cta-kicker { font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .22em; color: var(--z-fire); margin-bottom: 14px; }
.z-cta-card h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.15; letter-spacing: -.03em; max-width: 620px; margin-bottom: 12px; }
.z-cta-card p { color: rgba(244, 241, 234, .65); }
.z-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
:root body .z-cta .btn-outline { color: var(--z-cream); border-color: rgba(244, 241, 234, .24); }
:root body .z-cta .btn-outline:hover { background: var(--z-cream); color: var(--z-black); }
:root body .z-cta .btn { min-height: 58px; padding: 0 28px; }

/* ---------- Footer ---------- */
:root body footer { background: var(--z-black); color: rgba(244, 241, 234, .6); padding: 72px 0 24px; border-top: 4px solid var(--z-fire); }
:root body .footer-column h3 { color: var(--z-cream); font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
:root body .footer-column h3 i, :root body .footer-column li i { color: var(--z-fire); }
:root body .footer-column p, :root body .footer-column li { color: rgba(244, 241, 234, .55); font-size: .86rem; }
:root body .footer-column a { color: rgba(244, 241, 234, .7); }
:root body .footer-column a:hover { color: var(--z-fire); }
:root body .social-links a { width: 44px; height: 44px; border-radius: 50%; border-color: rgba(244, 241, 234, .14); color: var(--z-cream); }
:root body .social-links a:hover { background: var(--z-fire); border-color: var(--z-fire); color: var(--z-black); }
:root body .copyright { color: rgba(244, 241, 234, .38); font-size: .76rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .z-hero-layout { grid-template-columns: 1fr; padding: 56px 0 90px; gap: 56px; }
  .z-hero-visual { max-width: 520px; margin-inline: auto; width: 100%; }
  :root body .z-bento .container { grid-template-columns: 1fr 1fr; }
  :root body .z-bento .z-bento-lead { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  :root body nav { padding: 4px; }
  :root body nav a { padding: 8px 12px; font-size: .78rem; }
  .z-hero-layout { padding: 40px 0 80px; }
  :root body .z-hero .hero-stat { padding: 14px 12px; }
  :root body .z-hero .hero-stat strong { font-size: 1.3rem; }
  :root body .z-hero .hero-actions .btn { flex: 1 1 100%; }
  .z-float-top { right: -6px; }
  .z-float-bottom { left: -6px; }
  .z-hero-stamp { width: 92px; height: 92px; bottom: -30px; }
  :root body .z-bento { margin: 64px auto; }
  :root body .z-bento .container { grid-template-columns: 1fr; }
  :root body .z-bento .feature { min-height: 0; }
  .z-cta-card { padding: 36px 24px; border-radius: 28px; }
  .z-cta-actions .btn { flex: 1 1 100%; }
  :root body .product-item { border-radius: 20px; }
  :root body .product-item .product-image { border-radius: 14px; margin: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .z-marquee-track, .z-float, .z-pulse, .z-hero-stamp span { animation: none; }
  .z-hero-frame { transform: none; }
}

/* ---------- Static SEO product pages ---------- */
:root body .seo-product { max-width: 1240px; margin: 48px auto 90px; }
:root body .seo-crumb { color: var(--muted); padding: 12px 20px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); display: inline-flex; gap: 8px; flex-wrap: wrap; }
:root body .seo-crumb a { color: var(--z-fire); font-weight: 700; }
:root body .seo-card { gap: 44px; padding: 28px; border-radius: 32px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
:root body .seo-image { border-radius: 24px; background: color-mix(in srgb, var(--ink) 5%, var(--white)); }
:root body .seo-kicker { color: var(--z-fire); font-family: var(--font-display); letter-spacing: .2em; }
:root body .seo-title { font-family: var(--font-display); font-weight: 900; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); }
:root body .seo-price { font-family: var(--font-display); font-weight: 900; font-size: 2.2rem; color: var(--z-fire); letter-spacing: -.02em; }
:root body .seo-meta { color: var(--muted); }
:root body .seo-meta strong { color: var(--ink); }
:root body .seo-stock { border-radius: 999px; padding: 6px 14px; font-family: var(--font-display); }
:root body .seo-button { border-radius: 999px; padding: 16px 26px; font-family: var(--font-display); font-weight: 700; background: var(--z-black); color: var(--z-cream); transition: transform .25s var(--ease), background .25s var(--ease); }
:root body .seo-button:hover { transform: translateY(-2px); background: var(--z-fire); color: var(--z-black); }
:root body .seo-button.alt { background: var(--z-fire); color: var(--z-black); box-shadow: 0 10px 26px rgba(255, 91, 31, .32); }
:root body .seo-button.alt:hover { background: var(--z-fire-2); }
html[data-theme="dark"] body .seo-button:not(.alt) { background: var(--z-cream); color: var(--z-black); }
@media (max-width: 760px) { :root body .seo-card { padding: 16px; gap: 22px; border-radius: 24px; } :root body .seo-price { font-size: 1.8rem; } }