/* ARERA storefront — brand layer (Brand Book v2.0). Loaded AFTER tailwind.css.
   Colour: Electric #00B4FF · Ice #4FC3F7 · Frost #B3E5FC · Night #0F1E2E · Void #070D14 · White #F5F9FF
   Type:   Rajdhani (Latin heads) → Exo 2 (Cyrillic heads/body) · JetBrains Mono (technical labels) */

:root {
  --electric: #00B4FF; --ice: #4FC3F7; --frost: #B3E5FC; --deep: #0277BD;
  --night: #0F1E2E; --mid: #0D1B2A; --void: #070D14; --darker: #040A10;
  --white: #F5F9FF; --white-2: #D0E8F5; --ink: #04121C;
  --font-head: 'Rajdhani', 'Exo 2', system-ui, sans-serif;
  --font-body: 'Exo 2', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-card: 6px; --r-btn: 4px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --bg-primary: #F5F9FF; --bg-secondary: #FFFFFF; --bg-tertiary: #E8F2FA;
  --border-color: #D0E3F0; --border-hover: #A9CBE3;
  --text-primary: #0F1E2E; --text-secondary: #3D566B; --text-muted: #4A6479;
  --accent-color: #0277BD; --accent-hover: #01579B;
}
.dark {
  --bg-primary: #070D14; --bg-secondary: #0D1B2A; --bg-tertiary: #0F1E2E;
  --border-color: rgba(79, 195, 247, 0.18); --border-hover: rgba(79, 195, 247, 0.42);
  --text-primary: #F5F9FF; --text-secondary: #D0E8F5; --text-muted: rgba(179, 229, 252, 0.66);
  --accent-color: #00B4FF; --accent-hover: #4FC3F7;
}

/* ───────── Base ───────── */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.font-inter {
  font-family: var(--font-body); font-weight: 400; line-height: 1.65;
  background-color: var(--bg-primary) !important; color: var(--text-primary) !important;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-head); letter-spacing: 0.02em; line-height: 1.15; }
::selection { background: rgba(0, 180, 255, 0.35); color: #fff; }
:focus-visible { outline: 2px solid var(--electric); outline-offset: 3px; border-radius: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }
.dark ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--electric), var(--deep)); border-radius: 0; }
.mono { font-family: var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }

/* palette remap for legacy utility classes */
.text-ice-blue, .hover\:text-ice-blue:hover { color: var(--ice); }
.dark .text-ice-blue { color: var(--ice); }
i.text-ice-blue { color: var(--electric); }
.text-blue-600 { color: var(--deep); }
.dark .dark\:text-blue-400 { color: var(--ice); }
.bg-accent-blue { background-color: var(--deep); }
.bg-ice-gradient { background-image: linear-gradient(135deg, var(--electric) 0%, var(--ice) 100%); }
.dark .dark\:bg-ice-gradient { background-image: linear-gradient(135deg, var(--electric) 0%, var(--ice) 100%); }
.bg-blue-600 { background-color: var(--electric); }
.hover\:bg-blue-700:hover { background-color: var(--ice); }
.bg-ice-gradient.text-white, .bg-blue-600.text-white { color: var(--ink); }
.nav-link::after, .nav-link.active::after { background: linear-gradient(90deg, var(--electric), var(--ice)); }
.nav-link.active { color: var(--electric); }
.bg-green-500 { background-color: #12B886; }

/* radius language: technical, not bubbly */
.rounded-md, .rounded-lg { border-radius: var(--r-btn); }
.rounded-xl, .rounded-2xl { border-radius: var(--r-card); }
.rounded-3xl { border-radius: 8px; }

/* ───────── Buttons ───────── */
.btn-brand, .quick-add-form button.bg-ice-gradient, form button[type=submit].bg-ice-gradient {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--electric); background-image: none; color: var(--ink);
  border: 1px solid var(--electric); border-radius: var(--r-btn); min-height: 44px; padding: .65rem 1.4rem;
  position: relative; overflow: hidden; cursor: pointer;
  transition: background-color .18s ease-out, transform .18s ease-out, box-shadow .18s ease-out;
}
.btn-brand:hover, .quick-add-form button.bg-ice-gradient:hover, form button[type=submit].bg-ice-gradient:hover {
  background: var(--ice); border-color: var(--ice); opacity: 1; transform: translateY(-1px);
}
.btn-brand::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); opacity: 0; }
.btn-brand:hover::after { animation: scanSweep .9s ease-out 1; opacity: 1; }
@keyframes scanSweep { to { left: 130%; } }
.btn-brand-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ice); background: transparent; border: 1px solid rgba(79,195,247,.45); border-radius: var(--r-btn);
  min-height: 44px; padding: .65rem 1.4rem; transition: border-color .18s ease-out, background-color .18s ease-out, color .18s;
}
.btn-brand-ghost:hover { border-color: var(--electric); background: rgba(0,180,255,.10); color: #fff; }
html:not(.dark) .btn-brand-ghost { color: var(--deep); border-color: rgba(2,119,189,.5); }
html:not(.dark) .btn-brand-ghost:hover { color: #fff; background: var(--deep); border-color: var(--deep); }
.quick-add-form button.bg-ice-gradient { width: 100%; font-size: .95rem; }

/* status: "Под заказ" — no warm colours in brand → ice outline */
a.border-orange-500 { background: transparent; border-color: rgba(79,195,247,.5); color: var(--ice); border-radius: var(--r-btn); font-family: var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
a.border-orange-500:hover { background: rgba(0,180,255,.12); color: #fff; }
.text-orange-500 { color: var(--ice); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }

/* ───────── Header / footer ───────── */
nav.glass.sticky { background: rgba(7, 13, 20, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 0; border-bottom: 1px solid rgba(79,195,247,.16); }
html:not(.dark) nav.glass.sticky { background: rgba(245,249,255,.9); border-bottom-color: #D0E3F0; }
nav.glass.sticky .nav-link { font-family: var(--font-body); font-weight: 500; letter-spacing: .03em; }
nav.glass.sticky a[href^="tel"], nav.glass.sticky a[href*="t.me"] { border-radius: var(--r-btn); }
nav.glass.sticky a[href*="t.me"] { background: var(--electric); color: var(--ink); }
nav.glass.sticky a[href*="t.me"]:hover { background: var(--ice); }
#theme-toggle, nav.glass.sticky a[href$="/cart/"], nav.glass.sticky .group > button { min-height: 40px; min-width: 40px; justify-content: center; }
footer#contacts { background: var(--darker); border: 0; border-top: 1px solid rgba(79,195,247,.16); position: relative; margin-top: 4rem; }
footer#contacts::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--electric), var(--ice), transparent); }
footer#contacts h4 { font-family: var(--font-head); font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ice); }
footer#contacts, footer#contacts a, footer#contacts span, footer#contacts p { color: var(--white-2); }
footer#contacts a:hover { color: var(--electric); }
footer#contacts .text-gray-400 { color: var(--text-muted); }
footer#contacts a.rounded-full { border-radius: var(--r-btn); border-color: rgba(79,195,247,.3); }
footer#contacts a.rounded-full:hover { border-color: var(--electric); background: rgba(0,180,255,.1); }

/* ───────── Section rhythm ───────── */
.brand-section { padding: clamp(3rem, 7vw, 5.5rem) 0; position: relative; }
.brand-section--alt { background: var(--bg-secondary); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.brand-eyebrow { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .3em; color: var(--electric); text-transform: uppercase; display: block; margin-bottom: .6rem; }
.brand-h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.75rem, 3.4vw, 2.75rem); letter-spacing: .06em; text-transform: uppercase; color: var(--text-primary); }
.brand-lead { color: var(--text-secondary); font-size: 1.05rem; max-width: 40rem; margin-inline: auto; }
.brand-rule { width: 96px; height: 2px; margin: 1rem auto 0; background: linear-gradient(90deg, transparent, var(--electric), transparent); }

/* ───────── Hero (dark in both themes) ───────── */
.brand-hero { position: relative; overflow: hidden; background: var(--darker); color: var(--white); isolation: isolate; }
.brand-hero::before { content: ''; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(0,180,255,.16) 0%, transparent 70%), radial-gradient(ellipse 55% 80% at 0% 100%, rgba(79,195,247,.09) 0%, transparent 60%); }
.brand-hero__grid { position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(0,180,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0,180,255,.045) 1px, transparent 1px);
  background-size: 60px 60px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 30%, transparent 100%); }
.brand-hero__inner { display: grid; gap: 2.5rem; align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .brand-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3rem; } }
.brand-hero__copy { text-align: center; }
@media (min-width: 1024px) { .brand-hero__copy { text-align: left; } }
.brand-tag { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .28em; color: var(--electric); text-transform: uppercase; margin-bottom: 1.25rem; opacity: .9; }
.brand-h1 { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; color: #fff; letter-spacing: .04em; line-height: 1.08;
  font-size: clamp(1.9rem, 3.4vw, 3.1rem); overflow-wrap: anywhere; hyphens: auto; text-shadow: 0 0 40px rgba(0,180,255,.25); }
.brand-h1__brand { display: block; font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: .08em; margin-bottom: .35rem; }
.brand-h1__uz { text-transform: none; display: inline-block; background: var(--electric); color: var(--ink); font-size: .32em; padding: .18em .5em; border-radius: 3px; vertical-align: super; margin-left: .3em; letter-spacing: .06em; }
.brand-hero .brand-sub { color: var(--white-2); font-size: 1.08rem; max-width: 36rem; margin: 1.4rem auto 0; opacity: .92; }
@media (min-width: 1024px) { .brand-hero .brand-sub { margin-inline: 0; } }
.brand-cta { display: flex; flex-direction: column; gap: .9rem; margin-top: 2rem; }
@media (min-width: 640px) { .brand-cta { flex-direction: row; justify-content: center; } }
@media (min-width: 1024px) { .brand-cta { justify-content: flex-start; } }

/* Cold Vortex */
.brand-vortex { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin-inline: auto; }
.vortex-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(0,180,255,0); border-top-color: rgba(0,180,255,.55); border-right-color: rgba(79,195,247,.28); }
.vortex-ring.r1 { inset: 0;   animation: vspin 16s linear infinite; }
.vortex-ring.r2 { inset: 9%;  animation: vspin 12s linear infinite reverse; border-top-color: rgba(79,195,247,.5); }
.vortex-ring.r3 { inset: 18%; animation: vspin 20s linear infinite; border-top-color: rgba(179,229,252,.42); }
.vortex-ring.r4 { inset: 27%; animation: vspin 9s linear infinite reverse; border-top-color: rgba(0,180,255,.6); }
@keyframes vspin { to { transform: rotate(360deg); } }
.brand-vortex::before { content: ''; position: absolute; inset: 18%; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,180,255,.34) 0%, rgba(0,180,255,.08) 55%, transparent 72%); animation: corePulse 4s ease-in-out infinite; }
@keyframes corePulse { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
.brand-vortex__product { position: absolute; inset: 9% 6%; display: flex; align-items: center; justify-content: center; }
.brand-vortex__product img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; filter: contrast(1.5) brightness(.92) saturate(1.1);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%); mask-composite: intersect; }
.brand-vortex__label { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .22em; color: var(--electric);
  background: rgba(7,13,20,.78); border: 1px solid rgba(0,180,255,.35); padding: .35rem .8rem; border-radius: 2px; }

/* trust strip */
.brand-trust { display: grid; gap: 1px; background: var(--border-color); border: 1px solid var(--border-color); border-radius: var(--r-card); overflow: hidden; grid-template-columns: 1fr; }
@media (min-width: 768px) { .brand-trust { grid-template-columns: repeat(3, 1fr); } }
.brand-trust__item { background: var(--bg-secondary); padding: 1.6rem 1.5rem; display: flex; gap: 1rem; align-items: flex-start; transition: background-color .2s ease-out; }
.brand-trust__item:hover { background: var(--bg-tertiary); }
.brand-trust__icon { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(0,180,255,.4); border-radius: var(--r-btn); color: var(--electric); font-size: 26px; background: rgba(0,180,255,.07); }
.brand-trust__title { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; letter-spacing: .05em; color: var(--text-primary); margin-bottom: .2rem; }
.brand-trust__text { color: var(--text-secondary); font-size: .95rem; line-height: 1.5; }
.brand-trust__no { margin-left: auto; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .2em; color: var(--electric); opacity: .8; }

/* promo banner strip (admin-managed banners) */
.brand-promo__frame { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-card); border: 1px solid var(--border-color); background: var(--bg-tertiary); }
@media (min-width: 768px) { .brand-promo__frame { aspect-ratio: 21 / 8; } }

/* ───────── Category cards ───────── */
a.brand-cat { border: 1px solid var(--border-color); border-radius: var(--r-card); box-shadow: none; transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s; background: var(--darker); }
a.brand-cat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 20; background: linear-gradient(90deg, var(--electric), var(--ice)); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
a.brand-cat:hover { transform: translateY(-6px); border-color: rgba(0,180,255,.5); box-shadow: 0 14px 40px rgba(0,0,0,.45) !important; }
a.brand-cat:hover::before { transform: scaleX(1); }
a.brand-cat h3 { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1.4rem, 2.4vw, 1.9rem); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
a.brand-cat span.inline-flex { background: rgba(0,180,255,.14); border: 1px solid rgba(0,180,255,.35); color: var(--frost); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; border-radius: 2px; backdrop-filter: none; padding: .3rem .65rem; }

/* ───────── Product cards ───────── */
.pcard { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--r-card); transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s; position: relative; }
.pcard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 12; background: linear-gradient(90deg, var(--electric), var(--ice)); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.pcard:hover { transform: translateY(-4px); border-color: rgba(0,180,255,.5); box-shadow: 0 14px 40px rgba(0,0,0,.35) !important; }
.pcard:hover::before { transform: scaleX(1); }
.pcard .pcard-media { background: linear-gradient(160deg, #0D1B2A, #070D14); border-color: var(--border-color); }
html:not(.dark) .pcard .pcard-media { background: linear-gradient(160deg, #EEF5FB, #E1ECF5); }
.pcard .pcard-media img { transition: transform .4s var(--ease-out); }
.pcard .pcard-media img.is-fallback { object-fit: cover; opacity: .95; padding: 0; }
.pcard h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: .03em; color: var(--text-primary); }
.pcard:hover h3 { color: var(--electric); }
.pcard .pcard-price { font-family: var(--font-head); font-weight: 700; letter-spacing: .03em; color: var(--electric); background: none; -webkit-text-fill-color: currentColor; }
html:not(.dark) .pcard .pcard-price { color: var(--deep); }
.pcard .pcard-price span { font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); letter-spacing: .04em; }
.pcard .rounded-full { border-radius: 2px; }
.pcard div.bg-green-500 { font-family: var(--font-mono); letter-spacing: .12em; background: rgba(18,184,134,.16); color: #4FE3B6; border: 1px solid rgba(18,184,134,.5); box-shadow: none; }
html:not(.dark) .pcard div.bg-green-500 { color: #0B7A5A; }
.pcard .pcard-media > div.bg-black\/40 { background: rgba(4,10,16,.62); }

/* ───────── Forms ───────── */
form input[type=text], form input[type=tel], form input[type=email], form input[type=number], form textarea, form select {
  background: var(--bg-tertiary); border-radius: var(--r-btn); border: 1px solid var(--border-color); min-height: 46px; font-size: 1rem; transition: border-color .18s, box-shadow .18s;
}
form input:focus, form textarea:focus, form select:focus { border-color: var(--electric) !important; box-shadow: 0 0 0 3px rgba(0,180,255,.22) !important; outline: none; }
form label { font-family: var(--font-mono); font-size: .72rem !important; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary) !important; }
.brand-form { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--r-card); position: relative; overflow: hidden; }
.brand-form::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--electric), var(--ice)); }
.text-red-600 { color: #FF6B6B; }

/* small screens: comfortable touch targets, readable text */
@media (max-width: 640px) {
  .brand-section { padding: 2.75rem 0; }
  a.brand-cat { height: 15rem; }
  .quick-add-form button.bg-ice-gradient { min-height: 46px; }
}

/* motion safety */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ───────── Dark palette: replace legacy slate/grey surfaces with brand surfaces ───────── */
.dark .dark\:bg-deep-black-500 { background-color: var(--mid); }
.dark .dark\:bg-slate-800, .dark .dark\:bg-gray-800, .dark .dark\:bg-deep-black-400 { background-color: var(--night); }
.dark .dark\:bg-slate-900, .dark .dark\:bg-deep-black { background-color: var(--void); }
.dark .dark\:bg-gray-700 { background-color: #13273a; }
.dark .dark\:border-gray-800, .dark .dark\:border-gray-700, .dark .dark\:border-gray-600,
.dark .dark\:border-slate-700, .dark .dark\:border-slate-600 { border-color: var(--border-color); }
.dark .dark\:hover\:bg-gray-600:hover, .dark .dark\:hover\:bg-slate-700:hover { background-color: #1a3550; }

/* page titles (catalog, category): brand H1, accent word in Electric instead of gradient text */
h1.lg\:text-6xl { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .06em; }
h1 > span.bg-clip-text { background: none !important; -webkit-text-fill-color: currentColor; color: var(--electric); }
html:not(.dark) h1 > span.bg-clip-text { color: var(--deep); }


/* ───────── Mobile action dock (Call · Telegram · Catalog) ───────── */
.brand-dock { display: none; }
@media (max-width: 767px) {
  body.font-inter { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .brand-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(7,13,20,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(79,195,247,.22); }
  .brand-dock__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 6px 4px; border-radius: var(--r-btn);
    color: var(--white-2); border: 1px solid rgba(79,195,247,.28); font-family: var(--font-head); font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background-color .18s, border-color .18s; }
  .brand-dock__btn i { font-size: 22px; line-height: 1; }
  .brand-dock__btn:active, .brand-dock__btn:hover { background: rgba(0,180,255,.14); border-color: var(--electric); }
  .brand-dock__btn--main { background: var(--electric); border-color: var(--electric); color: var(--ink); }
  .brand-dock__btn--main:active, .brand-dock__btn--main:hover { background: var(--ice); border-color: var(--ice); }
}

/* Telegram promo banner: keep it on-brand until the artwork is replaced in admin */
.brand-promo__frame img { filter: saturate(.95) brightness(.5) hue-rotate(-4deg); }
.brand-promo__frame::after { content: ''; position: absolute; inset: 0; z-index: 15; pointer-events: none; background: linear-gradient(135deg, rgba(0,120,190,.18), rgba(7,13,20,.5)); }
@media (min-width: 768px) { .brand-promo__frame { aspect-ratio: 21 / 6; } }

/* ═════════ PREMIUM LAYER (release 3) ═════════ */

/* — Hero showcase: six products crossfade inside the Cold Vortex — */
.brand-vortex .vslide { position: absolute; inset: 8% 5%; display: flex; align-items: center; justify-content: center; opacity: 0; mix-blend-mode: screen;
  transform: scale(1.06) translateY(10px); filter: blur(7px); pointer-events: none; will-change: opacity, transform, filter;
  transition: opacity 1.15s var(--ease-out), transform 1.5s var(--ease-out), filter 1.15s var(--ease-out); }
.brand-vortex .vslide.is-active { opacity: 1; transform: none; filter: blur(0); }
.brand-vortex .vslide.is-leaving { opacity: 0; transform: scale(.955) translateY(-8px); filter: blur(5px); }
.brand-vortex .vslide img { width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); mask-composite: intersect; }
.brand-vortex::after { content: ''; position: absolute; inset: 14%; border-radius: 50%; border: 1px solid rgba(0,180,255,.6); opacity: 0; pointer-events: none; }
.brand-vortex.is-switching::after { animation: ringPulse 1.3s ease-out 1; }
@keyframes ringPulse { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.22); opacity: 0; } }
.brand-vortex__label { display: flex; align-items: center; gap: .55rem; bottom: 2%; }
.brand-vortex__label b { color: #fff; font-weight: 500; }
.brand-vortex__label i { font-style: normal; opacity: .6; margin-right: .2rem; }
.brand-vortex__label em { font-style: normal; }
.brand-vortex__dots { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; }
.brand-vortex__dots button { width: 26px; height: 26px; padding: 0; background: none; border: 0; cursor: pointer; position: relative; }
.brand-vortex__dots button::before { content: ''; position: absolute; left: 4px; right: 4px; top: 12px; height: 2px; background: rgba(79,195,247,.35); transition: background-color .3s, left .35s var(--ease-out), right .35s var(--ease-out); }
.brand-vortex__dots button.is-active::before { background: var(--electric); left: 0; right: 0; box-shadow: 0 0 10px rgba(0,180,255,.7); }
.brand-vortex__dots button:hover::before { background: var(--ice); }
.brand-hero__visual { padding-bottom: 34px; }

/* — Snow (brand motif) — */
.brand-snow { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.brand-snow::before, .brand-snow::after { content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 2px; border-radius: 50%; }
.brand-snow::before { box-shadow: 1326px 154px 0 0 rgba(179,229,252,.55),1326px -646px 0 0 rgba(179,229,252,.55),1617px 666px 0 0 rgba(179,229,252,.55),1617px -134px 0 0 rgba(179,229,252,.55),197px 74px 0 0 rgba(179,229,252,.55),197px -726px 0 0 rgba(179,229,252,.55),2194px 96px 0 0 rgba(179,229,252,.55),2194px -704px 0 0 rgba(179,229,252,.55),1497px 596px 0 0 rgba(179,229,252,.55),1497px -204px 0 0 rgba(179,229,252,.55),237px 519px 0 0 rgba(179,229,252,.55),237px -281px 0 0 rgba(179,229,252,.55),879px 38px 0 0 rgba(179,229,252,.55),879px -762px 0 0 rgba(179,229,252,.55),352px 444px 0 0 rgba(179,229,252,.55),352px -356px 0 0 rgba(179,229,252,.55),1712px 71px 0 0 rgba(179,229,252,.55),1712px -729px 0 0 rgba(179,229,252,.55),985px 92px 0 0 rgba(179,229,252,.55),985px -708px 0 0 rgba(179,229,252,.55),2257px 434px 0 0 rgba(179,229,252,.55),2257px -366px 0 0 rgba(179,229,252,.55),242px 579px 0 0 rgba(179,229,252,.55),242px -221px 0 0 rgba(179,229,252,.55),507px 228px 0 0 rgba(179,229,252,.55),507px -572px 0 0 rgba(179,229,252,.55),2387px 63px 0 0 rgba(179,229,252,.55),2387px -737px 0 0 rgba(179,229,252,.55),2363px 599px 0 0 rgba(179,229,252,.55),2363px -201px 0 0 rgba(179,229,252,.55),1624px 50px 0 0 rgba(179,229,252,.55),1624px -750px 0 0 rgba(179,229,252,.55),905px 47px 0 0 rgba(179,229,252,.55),905px -753px 0 0 rgba(179,229,252,.55),2280px 136px 0 0 rgba(179,229,252,.55),2280px -664px 0 0 rgba(179,229,252,.55),1186px 429px 0 0 rgba(179,229,252,.55),1186px -371px 0 0 rgba(179,229,252,.55),590px 553px 0 0 rgba(179,229,252,.55),590px -247px 0 0 rgba(179,229,252,.55),482px 584px 0 0 rgba(179,229,252,.55),482px -216px 0 0 rgba(179,229,252,.55),1263px 573px 0 0 rgba(179,229,252,.55),1263px -227px 0 0 rgba(179,229,252,.55),740px 105px 0 0 rgba(179,229,252,.55),740px -695px 0 0 rgba(179,229,252,.55),2382px 584px 0 0 rgba(179,229,252,.55),2382px -216px 0 0 rgba(179,229,252,.55),769px 381px 0 0 rgba(179,229,252,.55),769px -419px 0 0 rgba(179,229,252,.55),399px 560px 0 0 rgba(179,229,252,.55),399px -240px 0 0 rgba(179,229,252,.55),257px 577px 0 0 rgba(179,229,252,.55),257px -223px 0 0 rgba(179,229,252,.55),244px 633px 0 0 rgba(179,229,252,.55),244px -167px 0 0 rgba(179,229,252,.55),843px 508px 0 0 rgba(179,229,252,.55),843px -292px 0 0 rgba(179,229,252,.55),2177px 437px 0 0 rgba(179,229,252,.55),2177px -363px 0 0 rgba(179,229,252,.55),1286px 476px 0 0 rgba(179,229,252,.55),1286px -324px 0 0 rgba(179,229,252,.55),2398px 464px 0 0 rgba(179,229,252,.55),2398px -336px 0 0 rgba(179,229,252,.55),1481px 306px 0 0 rgba(179,229,252,.55),1481px -494px 0 0 rgba(179,229,252,.55),1017px 184px 0 0 rgba(179,229,252,.55),1017px -616px 0 0 rgba(179,229,252,.55),999px 83px 0 0 rgba(179,229,252,.55),999px -717px 0 0 rgba(179,229,252,.55),2352px 307px 0 0 rgba(179,229,252,.55),2352px -493px 0 0 rgba(179,229,252,.55),2151px 506px 0 0 rgba(179,229,252,.55),2151px -294px 0 0 rgba(179,229,252,.55),1406px 746px 0 0 rgba(179,229,252,.55),1406px -54px 0 0 rgba(179,229,252,.55); animation: snowfall 26s linear infinite; }
.brand-snow::after { width: 3px; height: 3px; box-shadow: 1838px 294px 1px rgba(79,195,247,.42),1838px -506px 1px rgba(79,195,247,.42),299px 120px 1px rgba(79,195,247,.42),299px -680px 1px rgba(79,195,247,.42),2096px 428px 1px rgba(79,195,247,.42),2096px -372px 1px rgba(79,195,247,.42),675px 775px 1px rgba(79,195,247,.42),675px -25px 1px rgba(79,195,247,.42),1401px 155px 1px rgba(79,195,247,.42),1401px -645px 1px rgba(79,195,247,.42),2002px 431px 1px rgba(79,195,247,.42),2002px -369px 1px rgba(79,195,247,.42),160px 684px 1px rgba(79,195,247,.42),160px -116px 1px rgba(79,195,247,.42),317px 782px 1px rgba(79,195,247,.42),317px -18px 1px rgba(79,195,247,.42),2285px 586px 1px rgba(79,195,247,.42),2285px -214px 1px rgba(79,195,247,.42),1285px 348px 1px rgba(79,195,247,.42),1285px -452px 1px rgba(79,195,247,.42),1434px 608px 1px rgba(79,195,247,.42),1434px -192px 1px rgba(79,195,247,.42),2034px 593px 1px rgba(79,195,247,.42),2034px -207px 1px rgba(79,195,247,.42),1868px 70px 1px rgba(79,195,247,.42),1868px -730px 1px rgba(79,195,247,.42),383px 276px 1px rgba(79,195,247,.42),383px -524px 1px rgba(79,195,247,.42),1941px 713px 1px rgba(79,195,247,.42),1941px -87px 1px rgba(79,195,247,.42),266px 62px 1px rgba(79,195,247,.42),266px -738px 1px rgba(79,195,247,.42),1268px 662px 1px rgba(79,195,247,.42),1268px -138px 1px rgba(79,195,247,.42),2367px 697px 1px rgba(79,195,247,.42),2367px -103px 1px rgba(79,195,247,.42),1825px 291px 1px rgba(79,195,247,.42),1825px -509px 1px rgba(79,195,247,.42),1580px 684px 1px rgba(79,195,247,.42),1580px -116px 1px rgba(79,195,247,.42),1421px 23px 1px rgba(79,195,247,.42),1421px -777px 1px rgba(79,195,247,.42),1891px 363px 1px rgba(79,195,247,.42),1891px -437px 1px rgba(79,195,247,.42); animation: snowfall 38s linear infinite; opacity: .8; }
@keyframes snowfall { to { transform: translateY(800px); } }

/* — Category cards — */
.bcat-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .bcat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .bcat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bcat { position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; text-decoration: none; color: inherit; border-radius: var(--r-card);
  background: linear-gradient(170deg, #0D1B2A 0%, #070D14 100%); border: 1px solid rgba(79,195,247,.2);
  transition: transform .4s var(--ease-out), border-color .3s, box-shadow .4s; }
.bcat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 4; background: linear-gradient(90deg, var(--electric), var(--ice)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.bcat::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(0,180,255,.16), transparent 62%); }
.bcat:hover { transform: translateY(-7px); border-color: rgba(0,180,255,.6); box-shadow: 0 20px 55px rgba(0,0,0,.55), 0 0 38px rgba(0,180,255,.15) !important; }
.bcat:hover::before { transform: scaleX(1); }
.bcat:hover::after { opacity: 1; }
.bcat__no { position: absolute; top: 14px; left: 16px; z-index: 3; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .22em; color: var(--electric); opacity: .85; }
.bcat__media { position: relative; height: 230px; display: grid; place-items: center; overflow: hidden; }
.bcat__media > * { grid-area: 1 / 1; }
.bcat__sweep { position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; translate: -50% -50%; background: conic-gradient(from 0deg, transparent 0 58%, rgba(0,180,255,.14) 80%, transparent 92%); animation: vspin 10s linear infinite; }
.bcat__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid transparent; border-top-color: rgba(0,180,255,.55); border-right-color: rgba(79,195,247,.22); translate: -50% -50%; }
.bcat__ring.r1 { width: 190px; height: 190px; animation: vspin 9s linear infinite; }
.bcat__ring.r2 { width: 132px; height: 132px; animation: vspin 6.5s linear infinite reverse; border-top-color: rgba(79,195,247,.55); }
.bcat__ring.r3 { width: 260px; height: 260px; animation: vspin 14s linear infinite; border-top-color: rgba(179,229,252,.35); }
.bcat:hover .bcat__ring.r1 { animation-duration: 3.4s; } .bcat:hover .bcat__ring.r2 { animation-duration: 2.4s; } .bcat:hover .bcat__ring.r3 { animation-duration: 6s; }
.bcat__mist { position: absolute; left: 50%; bottom: 20px; width: 56%; height: 26px; translate: -50% 0; background: radial-gradient(ellipse at center, rgba(0,180,255,.38) 0%, transparent 70%); filter: blur(7px); animation: mistPulse 3.8s ease-in-out infinite; }
@keyframes mistPulse { 0%,100% { opacity: .55; scale: .92 1; } 50% { opacity: 1; scale: 1.08 1; } }
.bcat__icon { position: relative; z-index: 2; max-width: 74%; max-height: 176px; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 0 22px rgba(0,180,255,.32));
  animation: iconLift 5.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.9s); transition: scale .55s var(--ease-out), filter .4s; }
.bcat:hover .bcat__icon { scale: 1.08; filter: drop-shadow(0 0 30px rgba(0,180,255,.55)); }
@keyframes iconLift { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
.bcat__glyph { position: relative; z-index: 2; font-size: 64px; color: var(--electric); }
.bcat__body { position: relative; z-index: 2; padding: 1.1rem 1.4rem 1.4rem; border-top: 1px solid rgba(79,195,247,.14); background: linear-gradient(180deg, rgba(15,30,46,.7), rgba(7,13,20,0)); }
.bcat__title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1.35rem, 2.2vw, 1.7rem); color: #fff; line-height: 1.1; }
.bcat__meta { display: flex; align-items: center; justify-content: space-between; margin-top: .7rem; }
.bcat__count { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--frost); opacity: .85; }
.bcat__go { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(0,180,255,.42); border-radius: 3px; color: var(--electric); font-size: 18px; transition: background-color .25s, color .25s, transform .35s var(--ease-out), border-color .25s; }
.bcat:hover .bcat__go { background: var(--electric); color: var(--ink); border-color: var(--electric); transform: translateX(5px); }
@media (max-width: 640px) { .bcat__media { height: 190px; } .bcat__ring.r3 { display: none; } .bcat__icon { max-height: 150px; } }

/* — Scroll reveal (only active when arera-fx.js is running) — */
.fx-ready [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.fx-ready [data-reveal].is-in { opacity: 1; transform: none; }
.fx-ready [data-reveal-stagger] > * { opacity: 0; transform: translateY(34px) scale(.985); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); transition-delay: calc(var(--n, 0) * 85ms); }
.fx-ready [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
.fx-ready [data-reveal-stagger].is-in > .bcat:hover { transform: translateY(-7px); transition-delay: 0s; }

/* — Header state on scroll — */
nav.glass.sticky { transition: background-color .3s, box-shadow .3s; }
nav.glass.sticky.is-scrolled { background: rgba(4,10,16,.94); box-shadow: 0 10px 30px rgba(0,0,0,.35) !important; }

/* — Product cards: pointer glow + sweep — */
.pcard::after { content: ''; position: absolute; inset: 0; z-index: 11; pointer-events: none; opacity: 0; transition: opacity .35s; border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 30%), rgba(0,180,255,.12), transparent 62%); }
.pcard:hover::after { opacity: 1; }
.pcard .pcard-media { position: relative; }
.pcard .pcard-media::after { content: ''; position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(0,180,255,.13) 82%, transparent 94%); animation: vspin 9s linear infinite; }
.pcard:hover .pcard-media::after { opacity: 1; }
.pcard .pcard-media > img { position: relative; z-index: 1; }

/* — Page title bands (catalog / category): brand grid + glow — */
section:has(> .container h1.lg\:text-6xl) { position: relative; overflow: hidden; }
section:has(> .container h1.lg\:text-6xl)::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 90% at 50% 0%, rgba(0,180,255,.13), transparent 70%), linear-gradient(rgba(0,180,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,180,255,.04) 1px, transparent 1px); background-size: auto, 56px 56px, 56px 56px; }
section:has(> .container h1.lg\:text-6xl) > .container { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .fx-ready [data-reveal], .fx-ready [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .brand-snow, .bcat__sweep { display: none; }
}


/* ═════════ Snowflakes (hero) ═════════ */
.brand-snow { container-type: size; }
.brand-snow .flake { position: absolute; top: -44px; left: var(--x, 50%); width: var(--s, 16px); height: var(--s, 16px); opacity: var(--o, .6); pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23DDF3FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M32 32L32.0 3.0M32.0 13.0L24.9 7.5M32.0 13.0L39.1 7.5M32 32L57.1 17.5M48.5 22.5L49.7 13.6M48.5 22.5L56.8 25.9M32 32L57.1 46.5M48.5 41.5L56.8 38.1M48.5 41.5L49.7 50.4M32 32L32.0 61.0M32.0 51.0L39.1 56.5M32.0 51.0L24.9 56.5M32 32L6.9 46.5M15.5 41.5L14.3 50.4M15.5 41.5L7.2 38.1M32 32L6.9 17.5M15.5 22.5L7.2 25.9M15.5 22.5L14.3 13.6'/></svg>") center / contain no-repeat;
  filter: blur(var(--bl, 0px)) drop-shadow(0 0 5px rgba(100,205,255,.6));
  animation: flakeFall var(--t, 14s) linear infinite var(--d, 0s), flakeTwirl var(--r, 10s) linear infinite var(--d, 0s); will-change: translate, rotate; }
.brand-snow .flake--b { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23DDF3FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M32 32L32.0 3.0M32.0 19.0L27.3 15.3M32.0 19.0L36.7 15.3M32.0 10.0L24.9 4.5M32.0 10.0L39.1 4.5M32 32L57.1 17.5M43.3 25.5L44.1 19.6M43.3 25.5L48.8 27.7M51.1 21.0L52.3 12.1M51.1 21.0L59.4 24.4M32 32L57.1 46.5M43.3 38.5L48.8 36.3M43.3 38.5L44.1 44.4M51.1 43.0L59.4 39.6M51.1 43.0L52.3 51.9M32 32L32.0 61.0M32.0 45.0L36.7 48.7M32.0 45.0L27.3 48.7M32.0 54.0L39.1 59.5M32.0 54.0L24.9 59.5M32 32L6.9 46.5M20.7 38.5L19.9 44.4M20.7 38.5L15.2 36.3M12.9 43.0L11.7 51.9M12.9 43.0L4.6 39.6M32 32L6.9 17.5M20.7 25.5L15.2 27.7M20.7 25.5L19.9 19.6M12.9 21.0L4.6 24.4M12.9 21.0L11.7 12.1'/><circle cx='32' cy='32' r='3.2' fill='%23DDF3FF' stroke='none'/></svg>"); }
@keyframes flakeFall { from { translate: 0 0; } to { translate: var(--dx, 0px) 900px; } }
@supports (height: 1cqh) { @keyframes flakeFall { from { translate: 0 0; } to { translate: var(--dx, 0px) calc(100cqh + 90px); } } }
@keyframes flakeTwirl { to { rotate: 360deg; } }
.brand-snow.is-paused .flake { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .brand-snow .flake { display: none; } }

/* ═════════ Larger header panel on big screens (scales with viewport; never wider than it fits) ═════════ */
@media (min-width: 1100px) { nav.glass.sticky > .container { zoom: 1.08; } }
@media (min-width: 1280px) { nav.glass.sticky > .container { zoom: 1.24; } }
@media (min-width: 1440px) { nav.glass.sticky > .container { zoom: 1.38; } }
@media (min-width: 1680px) { nav.glass.sticky > .container { zoom: 1.58; } }
@media (min-width: 1920px) { nav.glass.sticky > .container { zoom: 1.82; } }
@media (min-width: 2200px) { nav.glass.sticky > .container { zoom: 2; } }

/* headline: never split words with hyphens */
.brand-h1 { hyphens: none; -webkit-hyphens: none; overflow-wrap: break-word; }


/* ═════════ Product page ═════════ */
.spec-wrap { white-space: normal !important; padding: 0 !important; overflow: hidden; }
.spec-grid { display: block; }
.spec-sec { display: grid; grid-template-columns: minmax(130px, 260px) minmax(0, 1fr); margin: 0; }
.spec-sec + .spec-sec { border-top: 2px solid rgba(0,180,255,.28); }
.spec-sec dt, .spec-sec dd, .spec-note { padding: .8rem 1.25rem; border-bottom: 1px solid var(--border-color); margin: 0; }
.spec-sec dt { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--electric); display: flex; align-items: center; background: rgba(0,180,255,.04); }
.spec-sec dd { color: var(--text-primary); font-size: .95rem; }
.spec-note { grid-column: 1 / -1; font-family: var(--font-head); font-weight: 700; letter-spacing: .05em; font-size: 1.05rem; color: var(--text-primary); border-left: 3px solid var(--electric); background: rgba(0,180,255,.06); }
.spec-sec > :last-child { border-bottom: 0; }
@media (max-width: 560px) { .spec-sec { grid-template-columns: minmax(110px, 40%) minmax(0, 1fr); } .spec-sec dt, .spec-sec dd, .spec-note { padding: .7rem .9rem; } }
div:has(> #mainProductImage) { position: relative; background: linear-gradient(160deg, #0D1B2A, #070D14) !important; border-color: var(--border-color) !important; }
div:has(> #mainProductImage)::before { content: ''; position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(0,180,255,.12) 82%, transparent 94%); animation: vspin 12s linear infinite; }
div:has(> #mainProductImage) > img { position: relative; z-index: 1; }