:root {
    /* the overall hero backdrop follows the site's light/dark switch again —
       only the floating UI chips (labels, swatches, pagination) stay a fixed
       dark, opaque style regardless of site theme, since THAT was the actual
       contrast complaint (white-tinted glass over a light background reads
       poorly with light text). --glass-bg is now a real dark backing color,
       not just a translucent tint of whatever's behind it. */
    --bg: var(--anied-surface-0, #0c0a09);
    --brand-blue: var(--anied-brand, #00a2ff);
    --brand-blue-deep: color-mix(in srgb, var(--brand-blue) 35%, var(--bg));
    --text: #f5f3f0;
    --text-dim: #c7cdd1;
    --glass-bg: rgba(12,10,9,0.55);
    --glass-border: rgba(255,255,255,0.14);
    /* unlike the label chips above, swatches/pagination should look native
       in whichever theme is active — so these follow the site tokens */
    --panel-bg: var(--anied-surface-2, rgba(255,255,255,0.08));
    --panel-border: var(--anied-border, rgba(255,255,255,0.14));
  }

  * { box-sizing: border-box; }

  .hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    overflow: hidden;
    direction: rtl; /* self-contained: doesn't rely on the surrounding page's direction */
    font-family: 'Vazirmatn', sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    /* brand glow concentrated at the top, fading to solid --bg well before
       the bottom — a plain vertical gradient (not diagonal) so the bottom
       is ALWAYS a flat surface color regardless of aspect ratio. same
       formula for both themes: dark mode → blue glow over near-black,
       light mode → soft blue glow over off-white. */
    background:
      radial-gradient(ellipse 60% 45% at 74% 6%, color-mix(in srgb, var(--brand-blue) 35%, transparent), transparent 60%),
      linear-gradient(180deg, var(--brand-blue-deep) 0%, var(--bg) 42%, var(--bg) 100%);
  }

  .stage {
    position: relative;
    width: 100%;
    max-width: 1100px;
    height: 640px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* on desktop this is a transparent wrapper (position:static) so hotspot-ring still
     resolves against .stage, exactly like before; it only becomes a sized, positioned
     box on mobile — see the mobile media query below */
  .product-zone {
    z-index: 3;
  }

  /* ===== Floating product image ===== */
  .product-figure {
    position: relative;
    width: min(230px, 24vw);
    filter: drop-shadow(0 30px 45px rgba(0,0,0,0.55)) drop-shadow(0 0 60px color-mix(in srgb, var(--brand-blue) 18%, transparent));
    animation: float 5.5s ease-in-out infinite;
  }
  .product-figure img { width: 100%; display: block; }
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .product-figure { animation: none; }
  }

  /* ===== Hotspots — symmetric hexagon layout ===== */
  .hotspot-ring { position: absolute; top:10% !important; inset: 0; z-index: 4; }
  .hotspot { position: absolute; transform: translate(-50%, -50%); }
  .hotspot .dot {
    position: relative;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--brand-blue);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-blue) 18%, transparent);
    cursor: pointer;
  }
  .hotspot .dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--brand-blue) 55%, transparent);
    animation: pulse 2.6s ease-out infinite;
  }
  @keyframes pulse {
    0% { transform: scale(0.7); opacity: 0.9; }
    100% { transform: scale(2); opacity: 0; }
  }

  /* label hidden by default everywhere; revealed on click/tap (all devices)
     and additionally on hover for devices with a real pointer (desktop) */
  .callout {
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .hotspot.active .callout { opacity: 1; transform: scale(1); pointer-events: auto; }
  @media (hover: hover) and (pointer: fine) {
    .hotspot:hover .callout { opacity: 1; transform: scale(1); pointer-events: auto; }
  }

  .callout { position: absolute; display: flex; align-items: center; }
  .callout .label {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(14px);
    padding: 10px 16px;
    border-radius: 12px;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-dim);
    direction: rtl;
    text-align: center;
    min-width: 200px;
    max-width: 220px;
    white-space: normal;
  }

  /* every callout opens INWARD, toward the product — the dot always stays
     the outermost point, the label tucks in behind it toward center.
     (uses the `translate` property, not `transform`, so it doesn't fight
     with the scale() reveal animation on .callout above) */
  .callout-right { top: 50%; left: 100%; margin-left: 10px; translate: 0 -50%; transform-origin: left center; }
  .callout-left { top: 50%; right: 100%; margin-right: 10px; translate: 0 -50%; transform-origin: right center; }
  .callout-bottom { top: 100%; left: 50%; margin-top: 10px; translate: -50% 0; transform-origin: top center; }

  /* ===== Variant swatches (right, vertical middle) ===== */
  .swatches {
    position: absolute;
    z-index: 5;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .swatch {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--panel-bg);
    border: 1.5px solid var(--panel-border);
    backdrop-filter: blur(12px);
    padding: 8px;
    cursor: pointer;
    transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
  }
  .swatch img { width: 100%; height: 100%; object-fit: contain; }
  .swatch:hover { transform: translateY(-2px); }
  .swatch.active {
    border-color: var(--brand-blue);
    background: color-mix(in srgb, var(--brand-blue) 12%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 15%, transparent);
  }

  /* ===== Pagination (desktop: left, vertical middle) ===== */
  .pagination {
    position: absolute;
    z-index: 5;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .page-dots { display: flex; flex-direction: column; gap: 10px; }
  .page-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--anied-text, var(--text)) 30%, transparent);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: height 0.3s ease, width 0.3s ease, background 0.3s ease;
  }
  .page-dot.active { height: 30px; background: color-mix(in srgb, var(--anied-text, var(--text)) 22%, transparent); }
  .page-dot .fill {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background: var(--brand-blue);
    border-radius: 999px;
  }
  .page-arrow {
    all: unset; /* strips any theme-wide <button> styling before we apply our own */
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--panel-border) !important;
    background: var(--panel-bg) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--anied-text, var(--text)) !important;
    cursor: pointer;
    overflow: hidden !important;
    flex-shrink: 0;
    transform: rotate(-90deg); /* pagination is vertical, so the chevrons read as up/down */
  }
  .page-arrow::before, .page-arrow::after { content: none !important; display: none !important; }
  .page-arrow svg { width: 14px !important; height: 14px !important; display: block; flex-shrink: 0; }

  /* ===== CTA ===== */
  .cta-wrap {
    position: absolute;
    z-index: 5;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 34px;
    border-radius: 999px;
    background: #00A2FF0D;
    color: var(--brand-blue) !important;
    border: 1px solid var(--brand-blue);
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.25s ease, background 0.25s ease;
  }
  .btn-primary:hover { transform: translateY(-2px); }
  .btn-primary svg { width: 13px; height: 13px; transform: scaleX(-1); flex-shrink: 0; }

  /* ===== Mobile ===== */
  @media (max-width: 860px) {
    .hero { padding: 30px 10px; min-height: 80vh; }

    .stage {
      position: relative;
      height: auto;
      min-height: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      padding: 10px 0;
    }

    /* product-zone becomes a sized box (bigger than the image itself) so the
       hexagon hotspots have room to sit outside the image edges, same idea
       as the 1100x640 .stage does on desktop, just scaled down */
    .product-zone {
      position: relative;
      width: min(300px, 74vw);
      height: min(430px, 60vh);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .product-figure { width: min(150px, 38vw); }

    /* hotspots: only dot + pulse visible by default; tap reveals the label */
    .hotspot .dot { width: 15px; height: 15px; }
    .hotspot .dot::after { inset: -8px; }
    .callout .label { min-width: 150px; max-width: 170px; font-size: 11px; padding: 8px 12px; }

    /* swatches: right edge of the screen, roughly level with the product's vertical center */
    .swatches {
      right: 6px;
      top: 225px;
      transform: translateY(-50%);
      gap: 8px;
    }
    .swatch { width: 40px; height: 40px; border-radius: 10px; padding: 6px; }

    /* pagination: left edge of the screen, mirrors the swatches, stays vertical */
    .pagination {
      left: 6px;
      top: 225px;
      transform: translateY(-50%);
      gap: 8px;
    }
    .page-dots { gap: 8px; }
    .page-dot { width: 9px; height: 9px; }
    .page-dot.active { width: 9px; height: 26px; }
    .page-arrow { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; max-width: 24px !important; max-height: 24px !important; }
    .page-arrow svg { width: 12px !important; height: 12px !important; }

    /* CTA: normal flow, centered under everything */
    .cta-wrap { position: static; transform: none; }
    .btn-primary { padding: 13px 30px; font-size: 14px; }
  }

  @media (max-width: 380px) {
    .btn-primary { padding: 11px 20px; font-size: 12.5px; gap: 6px; }
    .btn-primary svg { width: 14px; height: 14px; }
  }