:root {
  --c: #00d4ff;
  --c2: #0099cc;
  --c-dim: rgba(0, 212, 255, .15);
  --c-glow: rgba(0, 212, 255, .5);
  --c-soft: rgba(0, 212, 255, .07);
  --c-border: rgba(0, 212, 255, .28);

  --glass-bg: rgba(8, 14, 30, .62);
  --text-1: #e8f4ff;
  --text-2: #8aa4c0;
  --text-3: #4a6080;

  --font-d: 'Sora', sans-serif;
  --font-syne: 'Syne', sans-serif;
  --font-sora: 'Sora', sans-serif;
  --font-u: 'Syne', sans-serif;
  font-feature-settings: "lnum" 1;
  --c-red: #e30446;
  --c-new: #02c5ff;
  --cat-bg: #061d38;

  /* SHARP CORNERS — задача 1 */
  --r-lg: 0px;
  --r-md: 0px;
  --r-sm: 0px;
  --dur: .35s;
  --ease: cubic-bezier(.22, .68, 0, 1.2);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  color: var(--text-1);
  background: #001122;
  overflow-x: hidden;
  min-height: 100vh;
  font-feature-settings: 'case' on, 'liga' off, 'lnum' 1 !important;
  font-family: var(--font-sora);

}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  font-family: var(--font-syne);
  border: none;
  background: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-syne);
  text-transform: uppercase;
}

.btn-primary,
.btn-ghost,
.btn-red {
  font-family: var(--font-syne) !important;
}

::-webkit-scrollbar {
  width: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--c);
}



/* ── BG ── */
.bg-root {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-root::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 10% 15%, rgba(0, 40, 80, .95) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 90% 85%, rgba(0, 20, 50, .9) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 55% 5%, rgba(0, 212, 255, .06) 0%, transparent 55%),
    #03080f;
}

.bg-root::after {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: .025;
  animation: noiseDrift 8s steps(4) infinite;
}

@keyframes noiseDrift {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-5%, -5%);
  }

  50% {
    transform: translate(5%, 5%);
  }

  75% {
    transform: translate(-5%, 5%);
  }

  100% {
    transform: translate(0, 0);
  }
}

.orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

.orb-1 {
  width: 800px;
  height: 800px;
  top: -250px;
  left: -200px;
  background: radial-gradient(circle, rgba(0, 150, 220, .14) 0%, transparent 60%);
  filter: blur(80px);
  animation: od1 14s ease-in-out infinite alternate;
}

.orb-2 {
  width: 600px;
  height: 600px;
  bottom: -120px;
  right: -120px;
  background: radial-gradient(circle, rgba(0, 80, 180, .1) 0%, transparent 60%);
  filter: blur(90px);
  animation: od2 18s ease-in-out infinite alternate;
}

.orb-3 {
  width: 350px;
  height: 350px;
  top: 40%;
  left: 52%;
  background: radial-gradient(circle, rgba(0, 212, 255, .07) 0%, transparent 70%);
  filter: blur(60px);
  animation: od3 11s ease-in-out infinite alternate;
}

@keyframes od1 {
  to {
    transform: translate(70px, 90px);
  }
}

@keyframes od2 {
  to {
    transform: translate(-70px, -90px);
  }
}

@keyframes od3 {
  to {
    transform: translate(-40px, 60px);
  }
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0, 212, 255, .012) 3px, rgba(0, 212, 255, .012) 4px);
}

.layout {
  position: relative;
  z-index: 1;
}

/* ── LOADER ── */
#loader {
  position: fixed;
  inset: 0;
  background: #03080f;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transition: opacity .7s ease, visibility .7s;
}

#loader.out {
  opacity: 0;
  visibility: hidden;
}

.loader-wordmark {
  font-family: var(--font-syne);
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: .22em;
}

.loader-wordmark span {
  color: var(--c);
  text-shadow: 0 0 20px var(--c-glow);
}

.loader-track {
  width: 200px;
  height: 2px;
  background: rgba(0, 212, 255, .12);
  overflow: hidden;
}

.loader-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c2), var(--c), #80efff);
  animation: loaderFill 1.3s cubic-bezier(.4, 0, .2, 1) forwards;
  box-shadow: 0 0 12px var(--c-glow);
}

@keyframes loaderFill {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

.loader-pct {
  font-family: var(--font-u);
  font-size: .75rem;
  letter-spacing: .2em;
  color: var(--text-3);
}

/* ── HEADER ── */
header {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  /* max-width: 1320px; */
  z-index: 800;
  padding: 0 8px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(3, 8, 18, .85);
  backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(0, 212, 255, .12);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 212, 255, .04), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: all .4s ease;
  /* SHARP */
  border-radius: 0;
}

/* ── LOGO (задача 6 — updated from макет) ── */
.logo {
  font-family: var(--font-syne);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .12em;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity .2s;
}

.logo:hover {
  opacity: .85;
}

.logo-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.logo-icon svg {
  width: 34px;
  height: 34px;
}

.logo-text {
  display: flex;
  align-items: baseline;
  gap: 0;
}

.logo-text-main {
  color: #fff;
}

.logo-text-accent {
  color: var(--c);
  text-shadow: 0 0 16px rgba(0, 212, 255, .6);
}

nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

nav li {
  list-style: none;
}

nav a {
  font-family: var(--font-u);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 7px 13px;
  transition: color .2s, background .2s;
  position: relative;
  border-radius: 0;
}

nav a:hover {
  color: var(--text-1);
  background: rgba(0, 212, 255, .06);
}

nav a.active {
  color: var(--c);
}

nav a.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  background: var(--c);
  box-shadow: 0 0 8px var(--c-glow);
}

.hdr-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ico-btn {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0, 212, 255, .1);
  background: rgba(0, 212, 255, .04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  transition: all .22s;
  border-radius: 0;
}

.ico-btn:hover {
  border-color: var(--c);
  color: var(--c);
  background: var(--c-dim);
  box-shadow: 0 0 16px rgba(0, 212, 255, .3);
}

.steam-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: linear-gradient(135deg, rgba(0, 180, 220, .9), rgba(0, 90, 160, .9));
  border-radius: 0;
  font-family: var(--font-u);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(0, 212, 255, .35);
  box-shadow: 0 4px 20px rgba(0, 150, 220, .4), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: all .25s;
  position: relative;
  overflow: hidden;
}

.steam-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
  transition: left .5s;
}

.steam-btn:hover::before {
  left: 150%;
}

.steam-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 200, 255, .5);
}

/* ── HERO ── */
.hero-section {
  min-height: 900px;
  height: 900px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: .35;
  pointer-events: none;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3, 8, 15, .5) 0%, transparent 30%, transparent 60%, rgba(3, 8, 15, .85) 100%),
    linear-gradient(90deg, rgba(3, 8, 15, .6) 0%, transparent 60%);
}

/* animated bg if no video */
.hero-video-anim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(0, 60, 120, .8) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(0, 20, 60, .7) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 20%, rgba(0, 212, 255, .06) 0%, transparent 55%),
    #03080f;
  animation: heroBgPulse 8s ease-in-out infinite alternate;
}

@keyframes heroBgPulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: .85;
  }

  100% {
    opacity: 1;
  }
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  width: 100%;
  margin: auto auto 0;
  padding: 0 48px 155px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: flex-end;
}

.hero-left {
  position: relative;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: var(--c-dim);
  border: 1px solid var(--c-border);
  border-radius: 0;
  font-family: var(--font-u);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c);
  margin-bottom: 24px;
  animation: fadeUp .8s .1s ease both;
}

.tag-dot {
  width: 7px;
  height: 7px;
  background: var(--c);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--c-glow);
  animation: tagPulse 2s ease infinite;
}

@keyframes tagPulse {
  50% {
    opacity: .35;
    transform: scale(.65);
  }
}

.hero-title {
  font-family: var(--font-syne);
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  font-weight: 900;
  line-height: .96;
  letter-spacing: .01em;
  margin-bottom: 22px;
  animation: fadeUp .8s .2s ease both;
}

.hero-title em {
  font-style: normal;
  color: var(--c);
  text-shadow: 0 0 40px rgba(0, 212, 255, .5);
  position: relative;
}

.hero-title em::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c), transparent);
  box-shadow: 0 0 10px var(--c-glow);
}

.hero-sub {
  font-size: .95rem;
  color: var(--text-2);
  line-height: 1.72;
  max-width: 440px;
  margin-bottom: 36px;
  animation: fadeUp .8s .3s ease both;
}

.hero-cta {
  display: flex;
  gap: 12px;
  margin-bottom: 48px;
  animation: fadeUp .8s .4s ease both;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 30px;
  background: linear-gradient(135deg, var(--c), var(--c2));
  border-radius: 0;
  font-family: var(--font-u);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #001822;
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 8px 28px rgba(0, 212, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: all var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, transparent 100%);
  opacity: 0;
  transition: opacity .2s;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0, 212, 255, .6);
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  background: rgba(0, 212, 255, .05);
  backdrop-filter: blur(10px);
  border-radius: 0;
  font-family: var(--font-u);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid rgba(0, 212, 255, .15);
  transition: all .25s;
}

.btn-ghost:hover {
  border-color: var(--c-border);
  color: var(--c);
  background: var(--c-dim);
  transform: translateY(-2px);
}

/* Hero stats (mini) */
.hero-stats {
  display: flex;
  gap: 36px;
  animation: fadeUp .8s .5s ease both;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.stat-n {
  font-family: var(--font-syne);
  font-size: 1.55rem;
  font-weight: 700;
}

.stat-n span {
  color: var(--c);
  text-shadow: 0 0 12px rgba(0, 212, 255, .5);
}

.stat-l {
  font-family: var(--font-u);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── LIVE FEED (задача 5) ── */
.live-feed {
  height: 100%;
  max-height: 680px;
  display: flex;
  flex-direction: column;
  background: rgba(3, 8, 20, .72);
  border: 1px solid rgba(0, 212, 255, .16);
  border-radius: 0;
  overflow: hidden;
  animation: fadeUp .9s .4s ease both;
  align-self: center;
}

.live-feed-hdr {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0, 212, 255, .1);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 212, 255, .04);
  flex-shrink: 0;
}

.live-pulse {
  width: 8px;
  height: 8px;
  background: #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 8px #00ff88;
  animation: livePulse 1.5s ease infinite;
}

@keyframes livePulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .5;
    transform: scale(.7);
  }
}

.live-feed-title {
  font-family: var(--font-u);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-1);
}

.live-feed-count {
  margin-left: auto;
  font-family: var(--font-u);
  font-size: .65rem;
  letter-spacing: .1em;
  color: var(--c);
  background: var(--c-dim);
  border: 1px solid var(--c-border);
  padding: 2px 8px;
}

.live-feed-list {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.live-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 212, 255, .06);
  animation: liveSlideIn .4s ease both;
  transition: background .2s;
}

.live-item:hover {
  background: rgba(0, 212, 255, .04);
}

@keyframes liveSlideIn {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.live-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-syne);
  font-size: .65rem;
  font-weight: 700;
  color: #001822;
  border-radius: 0;
}

.live-info {
  flex: 1;
  min-width: 0;
}

.live-name {
  font-family: var(--font-u);
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-skin {
  font-size: .68rem;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-price {
  font-family: var(--font-syne);
  font-size: .8rem;
  font-weight: 700;
  color: var(--c);
  white-space: nowrap;
  flex-shrink: 0;
}

.live-time {
  font-size: .6rem;
  color: var(--text-3);
  white-space: nowrap;
}

/* ── TICKER (задача 10 — уже бегущая строка) ── */
.ticker {
  background: rgba(0, 8, 22, .9);
  border-top: 1px solid rgba(0, 212, 255, .12);
  border-bottom: 1px solid rgba(0, 212, 255, .12);
  padding: 11px 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.ticker::before {
  left: 0;
  background: linear-gradient(90deg, rgba(3, 8, 22, .95), transparent);
}

.ticker::after {
  right: 0;
  background: linear-gradient(270deg, rgba(3, 8, 22, .95), transparent);
}

.ticker-track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: tickerScroll 32s linear infinite;
}

.ticker-track:hover {
  animation-play-state: paused;
}

@keyframes tickerScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
  font-family: var(--font-u);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: .05em;
}

.ticker-item strong {
  color: var(--text-1);
}

.tcol {
  width: 6px;
  height: 6px;
  background: var(--c);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--c);
  flex-shrink: 0;
}

/* ── CONTAINER ── */
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
}

section {
  padding-bottom: 88px;
}

section:first-of-type {
  padding-bottom: 88px;
}

/* ── SECTION HEADS ── */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 36px;
}

.sec-eyebrow {
  font-family: var(--font-u);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sec-eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--c);
  box-shadow: 0 0 6px var(--c-glow);
}

.sec-title {
  font-family: var(--font-syne);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
}

.sec-more {
  font-family: var(--font-u);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color .2s;
}

.sec-more:hover {
  color: var(--c);
}

/* ── REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.vis {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 {
  transition-delay: .1s;
}

.reveal-delay-2 {
  transition-delay: .2s;
}

.reveal-delay-3 {
  transition-delay: .3s;
}

/* ── STATS MINI BLOCK (задача 4) ── */
.stats-block {
}

.stats-block-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(0, 212, 255, .14);
  background: rgba(0, 8, 22, .7);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}

.stats-block-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 212, 255, .06) 0%, transparent 50%);
  pointer-events: none;
}

.stats-block-inner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  box-shadow: 0 0 12px var(--c-glow);
}

.stat-item {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  border-right: 1px solid rgba(0, 212, 255, .08);
  transition: background .3s;
}

.stat-item:last-child {
  border-right: none;
}

.stat-item:hover {
  background: rgba(0, 212, 255, .04);
}

.stat-item-n {
  font-family: var(--font-syne);
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 900;
  color: var(--c);
  text-shadow: 0 0 20px rgba(0, 212, 255, .5);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: .02em;
  white-space: nowrap;
  font-feature-settings: "lnum" 1;
}

.stat-item-n sub {
  font-size: .55em;
  vertical-align: baseline;
  color: var(--text-2);
  text-shadow: none;
}

.stat-item-l {
  font-family: var(--font-sora);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.stat-item-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  opacity: .12;
  color: var(--c);
}

/* ── CATEGORIES (задача 11 — анимации hover) ── */
.cats {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
}

.cat {
  padding: 22px 14px 18px;
  background: rgba(0, 10, 28, .55);
  border: 1px solid rgba(0, 212, 255, .08);
  border-radius: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: all .3s var(--ease);
  position: relative;
  overflow: hidden;
}

.cat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(0, 212, 255, .08) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}

.cat::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  transform: scaleX(0);
  transition: transform .3s ease;
}

.cat:hover {
  border-color: rgba(0, 212, 255, .35);
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 20px rgba(0, 212, 255, .12);
  background: rgba(0, 20, 45, .7);
}

.cat:hover::before {
  opacity: 1;
}

.cat:hover::after {
  transform: scaleX(1);
}

.cat-ico {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 212, 255, .06);
  border: 1px solid rgba(0, 212, 255, .12);
  border-radius: 0;
  transition: all .3s;
}

.cat:hover .cat-ico {
  background: rgba(0, 212, 255, .14);
  border-color: rgba(0, 212, 255, .4);
  box-shadow: 0 0 20px rgba(0, 212, 255, .25);
  transform: scale(1.1);
}

.cat-label {
  font-family: var(--font-u);
  font-weight: 700;
  font-size: .85rem;
  color: var(--text-1);
  transition: color .3s;
}

.cat:hover .cat-label {
  color: var(--c);
}

.cat-n {
  font-size: .65rem;
  color: var(--text-3);
  letter-spacing: .08em;
}

/* ── SKIN CARDS (задача 11 — анимации) ── */
.skins-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.skin-card {
  background: rgba(4, 12, 28, .8);
  border: 1px solid rgba(0, 212, 255, .1);
  border-radius: 0;
  overflow: hidden;
  transition: all .35s var(--ease);
  position: relative;
}

.skin-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .35s ease;
}

.skin-card:hover {
  border-color: rgba(0, 212, 255, .35);
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 30px rgba(0, 212, 255, .12);
}

.skin-card:hover::after {
  transform: scaleX(1);
}

.skin-img {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: linear-gradient(135deg, #050d1a, #0a1628);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rarity-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 3;
}

.r-covert {
  background: linear-gradient(90deg, #eb4b4b, #ff8a80, #eb4b4b);
  box-shadow: 0 0 12px rgba(235, 75, 75, .8);
}

.r-class {
  background: linear-gradient(90deg, #8847ff, #c084fc, #8847ff);
  box-shadow: 0 0 12px rgba(136, 71, 255, .8);
}

.r-restrict {
  background: linear-gradient(90deg, var(--c2), var(--c), var(--c2));
  box-shadow: 0 0 12px rgba(0, 212, 255, .8);
}

.r-gold {
  background: linear-gradient(90deg, #b8860b, #ffd700, #b8860b);
  box-shadow: 0 0 12px rgba(255, 215, 0, .8);
}

.skin-tag-disc {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  padding: 3px 10px;
  background: linear-gradient(135deg, #cc0000, #ff2222);
  font-family: var(--font-u);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #fff;
  border-radius: 0;
  box-shadow: 0 4px 14px rgba(200, 0, 0, .5);
}

.skin-img-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 55% 40%, rgba(0, 212, 255, .12) 0%, transparent 65%);
  animation: glowBreath 3.5s ease-in-out infinite;
}

@keyframes glowBreath {
  50% {
    opacity: .4;
  }
}

.skin-img img {
  width: 85%;
  height: 85%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 24px rgba(0, 212, 255, .3)) drop-shadow(0 0 8px rgba(0, 150, 200, .15));
  transition: transform .4s var(--ease), filter .4s;
}

.skin-card:hover .skin-img img {
  transform: scale(1.1) translateY(-4px);
  filter: drop-shadow(0 12px 40px rgba(0, 212, 255, .55)) drop-shadow(0 0 20px rgba(0, 200, 255, .3));
}

.skin-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(0, 10, 30, .7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
}

.skin-card:hover .skin-overlay {
  opacity: 1;
}

.overlay-btn {
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--c), var(--c2));
  border: none;
  font-family: var(--font-u);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #001822;
  cursor: pointer;
  border-radius: 0;
  box-shadow: 0 6px 20px rgba(0, 212, 255, .5);
  transform: translateY(8px);
  transition: transform .3s var(--ease), box-shadow .3s;
}

.skin-card:hover .overlay-btn {
  transform: translateY(0);
}

.overlay-btn:hover {
  box-shadow: 0 10px 30px rgba(0, 212, 255, .7);
}

.skin-body {
  padding: 14px 16px;
  position: relative;
  z-index: 2;
}

.skin-cat {
  font-family: var(--font-u);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c);
  margin-bottom: 3px;
}

.skin-name {
  font-family: var(--font-u);
  font-weight: 700;
  font-size: .93rem;
  color: var(--text-1);
  margin-bottom: 8px;
}

/* ── FLOAT / WEAR (задача 2) ── */
.float-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.wear-badge {
  font-family: var(--font-u);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 2px 7px;
  border-radius: 0;
  border: 1px solid;
  flex-shrink: 0;
}

.wear-fn {
  background: rgba(0, 212, 255, .12);
  color: #00d4ff;
  border-color: rgba(0, 212, 255, .4);
}

.wear-mw {
  background: rgba(110, 220, 110, .1);
  color: #6ee46e;
  border-color: rgba(110, 220, 110, .35);
}

.wear-ft {
  background: rgba(220, 200, 0, .1);
  color: #ddc800;
  border-color: rgba(220, 200, 0, .35);
}

.wear-ww {
  background: rgba(255, 140, 0, .1);
  color: #ff8c00;
  border-color: rgba(255, 140, 0, .35);
}

.wear-bs {
  background: rgba(220, 50, 50, .1);
  color: #dc3232;
  border-color: rgba(220, 50, 50, .35);
}

.float-bar-wrap {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, .08);
  position: relative;
  overflow: visible;
}

.float-bar-fill {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: width .6s ease;
}

.float-bar-fill.fn {
  background: linear-gradient(90deg, #00d4ff, #80efff);
}

.float-bar-fill.mw {
  background: linear-gradient(90deg, #6ee46e, #aaffaa);
}

.float-bar-fill.ft {
  background: linear-gradient(90deg, #ddc800, #ffee55);
}

.float-bar-fill.ww {
  background: linear-gradient(90deg, #ff8c00, #ffcc44);
}

.float-bar-fill.bs {
  background: linear-gradient(90deg, #dc3232, #ff8888);
}

.float-marker {
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px rgba(255, 255, 255, .8);
}

.float-val {
  font-family: var(--font-u);
  font-size: .65rem;
  color: var(--text-3);
  flex-shrink: 0;
  white-space: nowrap;
}

.skin-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.skin-old {
  font-size: .68rem;
  color: var(--text-3);
  text-decoration: line-through;
  line-height: 1;
}

.skin-price {
  font-family: var(--font-syne);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-1);
}

.skin-price span {
  color: var(--c);
  font-size: .7rem;
}

.cart-btn {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--c), var(--c2));
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #001822;
  box-shadow: 0 4px 14px rgba(0, 212, 255, .4);
  transition: transform .2s var(--ease), box-shadow .2s;
}

.cart-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 22px rgba(0, 212, 255, .65);
}

/* ── PROMO ── */
.promo-wrap {
  padding: 0 0 88px;
}

.promo {
  background: rgba(4, 12, 28, .7);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 212, 255, .12);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .07);
  padding: 56px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  position: relative;
  overflow: hidden;
  border-radius: 0;
}

.promo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(0, 212, 255, .07) 0%, transparent 55%);
  pointer-events: none;
}

.promo-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 212, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, .04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(135deg, black 0%, transparent 70%);
  animation: gridMove 18s linear infinite;
}

@keyframes gridMove {
  to {
    background-position: 40px 40px;
  }
}

.promo-left {
  position: relative;
  z-index: 2;
  flex: 1;
}

.promo-eye {
  font-family: var(--font-u);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.promo-eye::before {
  content: '⚡';
  font-size: .9rem;
}

.promo-title {
  font-family: var(--font-syne);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 14px;
}

.promo-title span {
  color: var(--c);
  text-shadow: 0 0 30px rgba(0, 212, 255, .6);
}

.promo-sub {
  font-size: .88rem;
  color: var(--text-2);
  line-height: 1.65;
  max-width: 400px;
  margin-bottom: 28px;
}

.countdown {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 32px;
}

.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.cd-val {
  width: 58px;
  height: 60px;
  background: rgba(0, 212, 255, .06);
  border: 1px solid rgba(0, 212, 255, .18);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-syne);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--c);
  font-feature-settings: 'case' on, 'liga' off;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .4), 0 0 20px rgba(0, 212, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.cd-lbl {
  font-family: var(--font-u);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.cd-sep {
  font-family: var(--font-syne);
  font-size: 1.3rem;
  color: var(--c);
  opacity: .5;
  animation: cdBlink 1s step-end infinite;
  padding-bottom: 14px;
}

@keyframes cdBlink {
  50% {
    opacity: 0;
  }
}

.promo-right {
  position: relative;
  z-index: 2;
  width: 320px;
  height: 220px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.promo-skin-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 40px rgba(0, 212, 255, .4)) drop-shadow(0 20px 50px rgba(0, 0, 0, .5));
  animation: skinFloat 4.5s ease-in-out infinite;
}

@keyframes skinFloat {

  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }

  50% {
    transform: translateY(-18px) rotate(4deg);
  }
}

/* ── REVIEWS ── */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.review {
  border-radius: 0;
  padding: 26px 24px;
  background: rgba(0, 10, 28, .5);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 212, 255, .08);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  position: relative;
  overflow: hidden;
  transition: all .35s var(--ease);
}

.review::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(0, 212, 255, .07) 0%, transparent 40%);
  pointer-events: none;
}

.review::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--c), transparent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s ease;
}

.review:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 212, 255, .2);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .55), 0 0 20px rgba(0, 212, 255, .08);
}

.review:hover::after {
  transform: scaleY(1);
}

.review-quote {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--c);
  opacity: .18;
  font-family: Georgia, serif;
  margin-bottom: 8px;
}

.review-stars {
  color: #ffd700;
  font-size: .85rem;
  margin-bottom: 14px;
  letter-spacing: 2px;
}

.review-text {
  font-family: var(--font-sora);
  font-size: .84rem;
  color: var(--text-2);
  line-height: 1.72;
  margin-bottom: 20px;
  font-style: italic;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-av {
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: linear-gradient(135deg, var(--c), var(--c2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-syne);
  font-size: .78rem;
  font-weight: 700;
  color: #001822;
  border: 1px solid rgba(0, 212, 255, .3);
}

.review-name {
  font-family: var(--font-u);
  font-weight: 700;
  font-size: .87rem;
}

.review-role {
  font-size: .68rem;
  color: var(--text-3);
}

/* ── FAQ ── */
.faq-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.faq-item {
  border-radius: 0;
  background: rgba(0, 10, 28, .5);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 212, 255, .08);
  overflow: hidden;
  transition: border-color .25s;
}

.faq-item.open {
  border-color: rgba(0, 212, 255, .28);
}

.faq-q {
  padding: 17px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: var(--font-u);
  font-weight: 600;
  font-size: .9rem;
  color: var(--text-1);
  user-select: none;
  transition: background .2s;
}

.faq-q:hover {
  background: rgba(0, 212, 255, .04);
}

.faq-ic {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(0, 212, 255, .12);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .55rem;
  color: var(--text-3);
  flex-shrink: 0;
  transition: all .3s;
}

.faq-item.open .faq-ic {
  background: var(--c-dim);
  border-color: rgba(0, 212, 255, .45);
  color: var(--c);
  transform: rotate(180deg);
  box-shadow: 0 0 10px rgba(0, 212, 255, .25);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s ease, padding .32s;
  font-size: .83rem;
  color: var(--text-2);
  line-height: 1.7;
  padding: 0 20px;
}

.faq-item.open .faq-a {
  max-height: 180px;
  padding: 0 20px 16px;
}

/* ── NEWSLETTER ── */
.nl-section {
  position: relative;
  overflow: visible;
}

.nl-box {
  border-radius: 0;
  padding: 72px 80px 72px calc(30% + 60px);
  background: rgba(0, 10, 28, .55);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 212, 255, .1);
  position: relative;
  overflow: visible;
  max-width: 1120px;
  margin: 0 auto;
}



.nl-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 212, 255, .06) 0%, transparent 60%);
  pointer-events: none;
}

.nl-knife-img {
  position: absolute;
  left: 2%;
  bottom: 0;
  height: 118% !important;
  width: auto;

  object-fit: contain;
  object-position: left bottom;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(-8px 0 24px rgba(0, 212, 255, .1)) drop-shadow(0 20px 40px rgba(0, 0, 0, .6));
}

.nl-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 580px;
  margin: 0 auto;
}

.nl-title {
  font-family: var(--font-syne);
  font-size: 1.9rem;
  font-weight: 700;
  margin: 8px 0 12px;
}

.nl-sub {
  font-size: .87rem;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 28px;
}

.nl-form {
  display: flex;
  gap: 10px;
}

.nl-input {
  flex: 1;
  background: rgba(0, 212, 255, .04);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 212, 255, .12);
  border-radius: 0;
  padding: 12px 18px;
  font-size: .88rem;
  color: var(--text-1);
  font-family: var(--font-b);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.nl-input::placeholder {
  color: var(--text-3);
}

.nl-input:focus {
  border-color: rgba(0, 212, 255, .4);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, .1);
}

/* ── FOOTER (задача 3 — оставляем как есть) ── */
footer {
  position: relative;
  background: rgba(2, 5, 14, .92);
  border-top: 1px solid rgba(0, 212, 255, .07);
  padding: 64px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 52px;
}

.footer-logo {
  font-family: var(--font-syne);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: .15em;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.footer-logo span {
  color: var(--c);
  text-shadow: 0 0 14px rgba(0, 212, 255, .5);
}

.footer-desc {
  font-size: .8rem;
  color: var(--text-3);
  line-height: 1.72;
  max-width: 250px;
  margin-bottom: 22px;
}

.socials {
  display: flex;
  gap: 8px;
}

.soc {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0, 212, 255, .1);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: .82rem;
  background: rgba(0, 212, 255, .03);
  transition: all .22s;
}

.soc:hover {
  border-color: var(--c);
  color: var(--c);
  background: var(--c-dim);
  box-shadow: 0 0 14px rgba(0, 212, 255, .25);
}

.footer-col-t {
  font-family: var(--font-u);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--text-1);
  margin-bottom: 18px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: .8rem;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color .2s, gap .2s;
}

.footer-links a::before {
  content: '→';
  font-size: .65rem;
  opacity: .3;
  transition: opacity .2s;
}

.footer-links a:hover {
  color: var(--c);
  gap: 10px;
}

.footer-links a:hover::before {
  opacity: .8;
}

.footer-bot {
  padding-top: 28px;
  border-top: 1px solid rgba(0, 212, 255, .06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-copy {
  font-size: .75rem;
  color: var(--text-3);
}

.footer-legal {
  display: flex;
  gap: 20px;
}

.footer-legal a {
  font-size: .73rem;
  color: var(--text-3);
  transition: color .2s;
}

.footer-legal a:hover {
  color: var(--c);
}

/* Logo gem for footer */
.logo-gem {
  background: linear-gradient(135deg, var(--c), #0055aa);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  animation: gemPulse 4s ease-in-out infinite;
}

@keyframes gemPulse {

  0%,
  100% {
    filter: brightness(1) drop-shadow(0 0 6px var(--c-glow));
  }

  50% {
    filter: brightness(1.5) drop-shadow(0 0 16px var(--c-glow));
  }
}

/* ── FIGMA: HERO NEW ── */
.hero-title-new {
  font-family: var(--font-syne);
  font-size: clamp(42px, 5.5vw, 82px);
  font-weight: 700;
  letter-spacing: -1.64px;
  text-transform: uppercase;
  line-height: 1.2;
  color: #e8f4ff;
  animation: fadeUp .8s .2s ease both;
}

.hero-right-new {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeUp .8s .3s ease both;
}

.hero-sub-new {
  font-family: var(--font-sora);
  font-size: clamp(16px, 1.8vw, 24px);
  font-weight: 300;
  color: #b4b4ca;
  line-height: 1.4;
}

.btn-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  background: linear-gradient(180deg, #3a1b2c, #6f2b37);
  border: 1px solid #ab4556;
  box-shadow: 0 0 4px #be2d48;
  font-family: var(--font-syne);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: all .25s;
}

.btn-red:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 16px #be2d48;
}

/* ── FIGMA: DROP TICKER ── */
.hero-drop-ticker {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 107px;
  display: flex;
  z-index: 3;
  background: rgba(6, 29, 56, .95);
  border-top: 1px solid rgba(2, 197, 255, .2);
}

.drop-ticker-live {
  width: 60px;
  flex-shrink: 0;
  border-right: 1px solid #02c5ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 0 8px rgba(92, 128, 203, .5);
}

.live-pulse-dot {
  width: 14px;
  height: 14px;
  background: #02c5ff;
  border-radius: 50%;
  box-shadow: 0 0 8px #02c5ff;
  animation: livePulse 1.5s ease infinite;
}

.drop-live-text {
  font-family: var(--font-sora);
  font-size: 12px;
  color: #fff;
}

.drop-ticker-scroll {
  flex: 1;
  display: flex;
  gap: 10px;
  overflow: hidden;
  padding: 0;
}

.drop-ticker-track {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  animation: dropTickerScroll 28s linear infinite;
}

.drop-ticker-track:hover {
  animation-play-state: paused;
}

@keyframes dropTickerScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.drop-card {
  flex-shrink: 0;
  width: 171px;
  height: 107px;
  position: relative;
  overflow: hidden;
  background: #1a0a10;
  box-shadow: 0 0 4px rgba(190, 45, 72, .2);
}

.drop-card-bg {
  position: absolute;
  left: -37px;
  top: -51px;
  width: 246px;
  height: 208px;
}

.drop-card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.drop-card-weapon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 143px;
  height: 73px;
  object-fit: contain;
  image-rendering: auto;
}

.drop-card-wear {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-sora);
  font-size: 12px;
  color: #ff7134;
}

.drop-card-time {
  position: absolute;
  top: 10px;
  right: 8px;
  font-family: var(--font-sora);
  font-size: 9px;
  color: #fff;
  opacity: .5;
}

.drop-card-name {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sora);
  font-size: 12px;
  color: #f6f4f9;
  white-space: nowrap;
  text-align: center;
}

/* ── FIGMA: CATEGORIES ── */
.cats-new {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cats-row {
  display: flex;
  gap: 24px;
}

/* ── CATEGORY CARD BASE ── */
.cat-new {
  flex: 1;
  height: 90px;
  background: #061d38;
  border-left: 2px solid rgba(2, 197, 255, .4);
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition:
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s cubic-bezier(.22, .68, 0, 1.2);
}

/* ── ENTRY STAGGER (fires once when .cats-new gets .vis) ── */
.cats-new .cat-new {
  opacity: 0;
  transform: translateX(-44px);
  transition:
    opacity .5s ease,
    transform .5s cubic-bezier(.22, .68, 0, 1.2),
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.cats-new.vis .cats-row:nth-child(1) .cat-new:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: .04s;
}

.cats-new.vis .cats-row:nth-child(1) .cat-new:nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: .13s;
}

.cats-new.vis .cats-row:nth-child(1) .cat-new:nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: .22s;
}

.cats-new.vis .cats-row:nth-child(1) .cat-new:nth-child(4) {
  opacity: 1;
  transform: none;
  transition-delay: .31s;
}

.cats-new.vis .cats-row:nth-child(2) .cat-new:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: .17s;
}

.cats-new.vis .cats-row:nth-child(2) .cat-new:nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: .26s;
}

.cats-new.vis .cats-row:nth-child(2) .cat-new:nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: .35s;
}

/* ── SCAN-LINE SWEEP ── */
.cat-new::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(2, 197, 255, .18) 50%, transparent 100%);
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 5;
}

.cat-new:hover::before {
  animation: catScan .6s ease-out forwards;
}

@keyframes catScan {
  to {
    transform: translateX(100%);
  }
}

/* ── CORNER TICK ── */
.cat-new::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 18px 18px 0;
  border-color: transparent #02c5ff transparent transparent;
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 6;
}

.cat-new:hover::after {
  opacity: 1;
}

/* ── HOVER STATE ── */
.cat-new:hover {
  background: linear-gradient(100deg, #0c2f50 0%, #061d38 100%);
  border-color: #02c5ff;
  box-shadow:
    inset 4px 0 18px rgba(2, 197, 255, .12),
    0 0 0 1px rgba(2, 197, 255, .12),
    0 8px 32px rgba(2, 197, 255, .08);
}

/* ── WEAPON IMAGE ── */
.cat-weapon-img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  flex-shrink: 0;
  transition: transform .45s cubic-bezier(.22, .68, 0, 1.4), filter .4s ease;
}

.cat-new:hover .cat-weapon-img {
  transform: scale(1.18) translateX(6px) rotate(-5deg);
  filter: drop-shadow(0 0 12px rgba(2, 197, 255, .55));
}

/* ── TEXT BLOCK ── */
.cat-text {
  padding: 0 16px;
  transition: transform .35s cubic-bezier(.22, .68, 0, 1.2);
}

.cat-new:hover .cat-text {
  transform: translateX(6px);
}

/* ── NAME ── */
.cat-name-new {
  font-family: var(--font-syne);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  display: block;
  margin-bottom: 4px;
  transition: letter-spacing .35s ease, color .3s;
}

.cat-new:hover .cat-name-new {
  letter-spacing: .06em;
  color: #e8f4ff;
}

/* ── COUNT ── */
.cat-count-new {
  font-family: var(--font-sora);
  font-size: 14px;
  color: #02c5ff;
  display: block;
  transition: color .3s, text-shadow .3s;
}

.cat-new:hover .cat-count-new {
  color: #fff;
  text-shadow: 0 0 10px rgba(2, 197, 255, .9);
}

.sec-title-figma {
  font-family: var(--font-syne);
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  color: #e8f4ff;
  margin-bottom: 48px;
}

/* ── FIGMA: SKIN CARDS ── */
.figma-cards-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.figma-card {
  position: relative;
  overflow: hidden;
  background: #1a0a10;
  box-shadow: 0 0 4px rgba(190, 45, 72, .2);
  cursor: pointer;
}

/* Real in-flow element so CSS Grid tracks account for card height */
.figma-card-spacer {
  display: block;
  width: 100%;
  padding-bottom: calc(220 / 171 * 100%);
}

.figma-r-ancient {
  background-image: url('../../img/Card-weapon-anciant.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}

.figma-r-legendary {
  background-image: url('../../img/Card-weapon-legendary.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}

.figma-r-rare {
  background-image: url('../../img/Card-weapon-rare.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}

.figma-r-uncommon {
  background-image: url('../../img/Card-weapon-uncommon.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}

.figma-r-common {
  background-image: url('../../img/Card-weapon-common.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}

.figma-r-exceed {
  background-image: url('../../img/Card-weapon-exceedingly.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}

.figma-card-add {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, #3A1B2C 0%, #6F2B37 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  transform: translateY(100%);
  transition: transform .3s ease;
  z-index: 4;
  cursor: pointer;
}

.figma-card:hover .figma-card-add {
  transform: translateY(0);
}

.figma-card-add span {
  font-family: var(--font-syne);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.figma-card-top {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 3;
}

.figma-disc-tag {
  background: linear-gradient(135deg, #e30446 0%, #ff1a5e 100%);
  padding: 0 10px 0 5px;
  height: 20px;
  font-family: var(--font-sora);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  display: flex;
  align-items: center;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0 0 10px rgba(227, 4, 70, .55), 0 0 20px rgba(227, 4, 70, .25);
  animation: salePulse 2.2s ease-in-out infinite;
}

@keyframes salePulse {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(227, 4, 70, .55), 0 0 20px rgba(227, 4, 70, .25);
  }

  50% {
    box-shadow: 0 0 16px rgba(227, 4, 70, .9), 0 0 32px rgba(227, 4, 70, .45);
  }
}

.figma-wear-tag {
  font-family: var(--font-sora);
  font-size: 12px;
  color: #ff7134;
}

.figma-heart {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 3;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .22s var(--ease);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(5, 12, 28, .6);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .45);
}

.figma-heart:hover {
  color: #ff4d7a;
  background: rgba(227, 4, 70, .18);
  box-shadow: 0 0 10px rgba(227, 4, 70, .4);
  transform: scale(1.12);
}

.figma-heart.fav-active {
  color: #e30446;
  background: rgba(227, 4, 70, .22);
  box-shadow: 0 0 12px rgba(227, 4, 70, .5);
}

.figma-heart.fav-active svg {
  fill: #e30446;
  stroke: #e30446;
}

.figma-card-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 84%;
  max-height: 140px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .5));
  transition: transform .3s;
}

.figma-card:hover .figma-card-img {
  transform: translate(-50%, -65%) scale(1.06);
}

.figma-card-foot {
  position: absolute;
  bottom: 9%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 90%;
}

.figma-card-name {
  font-family: var(--font-sora);
  font-size: 12px;
  color: #f6f4f9;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.figma-price-old {
  display: block;
  font-family: var(--font-sora);
  font-size: 10px;
  color: #f6f4f9;
  opacity: .5;
  text-decoration: line-through;
}

.figma-price {
  display: block;
  font-family: var(--font-sora);
  font-size: 15px;
  font-weight: 600;
  color: #f6f4f9;
}

/* ── FIGMA: FLASH SALE ── */
.promo-new {
  position: relative;
  overflow: hidden;
  border: 1px solid #0679e4;
  padding: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  min-height: 452px;

  border: 1px solid rgba(0, 212, 255, .14);
  background: url(../../img/promo-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  box-shadow: 0 0 32px 0 rgba(8, 9, 28, 0.20);
}

.promo-new::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 212, 255, .06) 0%, transparent 50%);
  pointer-events: none;
}

.promo-new:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  box-shadow: 0 0 12px var(--c-glow);
}

.promo-ak-img {
  position: absolute;
  right: -30px;
  top: 0px;
  width: 58%;
  max-width: 620px;
  transform: rotate(10.46deg);
  z-index: 1;
  pointer-events: none;
  object-fit: contain;
}

.promo-left-new {
  position: relative;
  z-index: 2;
  max-width: 384px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.promo-title-new {
  font-family: var(--font-syne);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  font-feature-settings: "lnum" 1;
}

.promo-red {
  color: #e30446;
}

.promo-sub-new {
  font-family: var(--font-sora);
  font-size: 16px;
  font-weight: 300;
  color: #b4b4ca;
  line-height: 1.5;
}

.promo-right-new {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.countdown-new {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.cd-unit-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.cd-box-new {
  width: 80px;
  height: 80px;
  background: #061d38;
  border: 1px solid rgba(2, 197, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-box-new .cd-val {
  width: auto;
  height: auto;
  background: none;
  border: none;
  box-shadow: none;
  font-family: var(--font-syne);
  font-size: 40px;
  font-weight: 700;
  color: #00d4ff;
  display: block;
  white-space: nowrap;
  font-feature-settings: "lnum" 1;
}

.cd-lbl-new {
  font-family: var(--font-sora);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.cd-colon-new {
  font-family: var(--font-syne);
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  padding-top: 20px;
}

/* ── RESPONSIVE ── */
@media(max-width:1200px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .cats {
    grid-template-columns: repeat(4, 1fr);
  }

  .cats-row {
    flex-wrap: wrap;
  }

  .cat-new {
    min-width: calc(50% - 12px);
  }

  .figma-cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .skins-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nl-box {
    padding: 56px 48px 56px calc(40% + 32px);
  }

  .nl-knife-img {
    width: 50%;
  }

  .stats-block-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-block-inner .stat-item:nth-child(2) {
    border-right: none;
  }

  .stats-block-inner .stat-item:nth-child(3) {
    border-right: 1px solid rgba(0, 212, 255, .08);
  }

  .stats-block-inner .stat-item {
    border-bottom: 1px solid rgba(0, 212, 255, .08);
  }

  .stats-block-inner .stat-item:last-child,
  .stats-block-inner .stat-item:nth-last-child(2) {
    border-bottom: none;
  }
}

@media(max-width:768px) {
  .container {
    padding: 0 20px;
  }

  header {
    width: calc(100% - 24px);
    padding: 0 14px;
  }

  nav {
    display: none;
  }

  .cats {
    grid-template-columns: repeat(3, 1fr);
  }

  .cats-row {
    flex-direction: column;
  }

  .cat-new {
    min-width: 100%;
  }

  .figma-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .faq-wrap {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .promo-new {
    flex-direction: column;
    padding: 36px 28px;
    min-height: auto;
  }

  .promo-ak-img {
    display: none;
  }

  .countdown-new {
    gap: 8px;
  }

  .cd-box-new {
    width: 60px;
    height: 60px;
  }

  .cd-box-new .cd-val {
    font-size: 28px;
  }

  .cd-colon-new {
    font-size: 28px;
    padding-top: 15px;
  }

  .nl-box {
    padding: 36px 24px 36px 24px;
  }

  .nl-knife-img {
    display: none;
  }

  .nl-content {
    text-align: center;
  }

  .nl-form {
    flex-direction: column;
  }

  .hero-inner {
    padding: 0 20px 48px;
  }

  .hero-section {
    height: auto;
    min-height: 900px;
  }

  .hero-drop-ticker {
    position: relative;
    height: auto;
    min-height: 107px;
  }
}

/* ════════════════════════════════════════
       PAGE LIFE ANIMATIONS  (transform/opacity only — GPU safe)
       ════════════════════════════════════════ */

/* ── PROMO AK FLOAT ── */
@keyframes akFloat {

  0%,
  100% {
    transform: rotate(10.46deg) translateY(0);
  }

  50% {
    transform: rotate(10.46deg) translateY(-18px);
  }
}

.promo-ak-img {
  animation: akFloat 5s ease-in-out infinite;
}

/* ── SEC-TITLE UNDERLINE REVEAL ── */
.sec-title-figma {
  position: relative;
  display: inline-block;
}

/* .sec-title-figma::after {
      content: '';
      position: absolute;
      bottom: -6px; left: 0;
      width: 100%; height: 2px;
      background: linear-gradient(90deg, #02c5ff, rgba(2,197,255,0));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .7s cubic-bezier(.22,.68,0,1.2) .55s;
    } */
.sec-title-figma.vis::after {
  transform: scaleX(1);
}

/* ── FEATURED SKINS CARD STAGGER ── */
.figma-cards-grid .figma-card {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, .68, 0, 1.2), box-shadow .25s ease;
}

.figma-cards-grid.vis .figma-card:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: .02s;
}

.figma-cards-grid.vis .figma-card:nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: .06s;
}

.figma-cards-grid.vis .figma-card:nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: .10s;
}

.figma-cards-grid.vis .figma-card:nth-child(4) {
  opacity: 1;
  transform: none;
  transition-delay: .14s;
}

.figma-cards-grid.vis .figma-card:nth-child(5) {
  opacity: 1;
  transform: none;
  transition-delay: .18s;
}

.figma-cards-grid.vis .figma-card:nth-child(6) {
  opacity: 1;
  transform: none;
  transition-delay: .22s;
}

.figma-cards-grid.vis .figma-card:nth-child(7) {
  opacity: 1;
  transform: none;
  transition-delay: .26s;
}

.figma-cards-grid.vis .figma-card:nth-child(8) {
  opacity: 1;
  transform: none;
  transition-delay: .30s;
}

.figma-cards-grid.vis .figma-card:nth-child(9) {
  opacity: 1;
  transform: none;
  transition-delay: .11s;
}

.figma-cards-grid.vis .figma-card:nth-child(10) {
  opacity: 1;
  transform: none;
  transition-delay: .15s;
}

.figma-cards-grid.vis .figma-card:nth-child(11) {
  opacity: 1;
  transform: none;
  transition-delay: .19s;
}

.figma-cards-grid.vis .figma-card:nth-child(12) {
  opacity: 1;
  transform: none;
  transition-delay: .23s;
}

.figma-cards-grid.vis .figma-card:nth-child(13) {
  opacity: 1;
  transform: none;
  transition-delay: .27s;
}

.figma-cards-grid.vis .figma-card:nth-child(14) {
  opacity: 1;
  transform: none;
  transition-delay: .31s;
}

.figma-cards-grid.vis .figma-card:nth-child(15) {
  opacity: 1;
  transform: none;
  transition-delay: .35s;
}

.figma-cards-grid.vis .figma-card:nth-child(16) {
  opacity: 1;
  transform: none;
  transition-delay: .39s;
}

/* ── CARD HOVER LIFT ── */
.figma-cards-grid.vis .figma-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .5);
}

/* ── REVIEWS STAGGER ── */
.reviews-grid .review {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .68, 0, 1.2);
}

.reviews-grid.vis .review:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: .05s;
}

.reviews-grid.vis .review:nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: .18s;
}

.reviews-grid.vis .review:nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: .31s;
}

/* ── FAQ STAGGER ── */
.faq-wrap .faq-item {
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, .68, 0, 1.2);
}

.faq-wrap.vis .faq-item:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: .04s;
}

.faq-wrap.vis .faq-item:nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: .11s;
}

.faq-wrap.vis .faq-item:nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: .18s;
}

.faq-wrap.vis .faq-item:nth-child(4) {
  opacity: 1;
  transform: none;
  transition-delay: .25s;
}

.faq-wrap.vis .faq-item:nth-child(5) {
  opacity: 1;
  transform: none;
  transition-delay: .32s;
}

.faq-wrap.vis .faq-item:nth-child(6) {
  opacity: 1;
  transform: none;
  transition-delay: .39s;
}

/* ── STATS STAGGER ── */
.stats-block-inner .stat-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, .68, 0, 1.2);
}

.stats-block-inner.vis .stat-item:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: .04s;
}

.stats-block-inner.vis .stat-item:nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: .12s;
}

.stats-block-inner.vis .stat-item:nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: .20s;
}

.stats-block-inner.vis .stat-item:nth-child(4) {
  opacity: 1;
  transform: none;
  transition-delay: .28s;
}

/* ── HERO TITLE WORD STAGGER ── */
.hw {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  animation: fadeUp .7s ease both;
}

/* ── BG LINES ── */
.bg-lines {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  margin: auto;
  width: 100%;
  pointer-events: none;
  z-index: 0;
}

.bg-line {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 35%;
  background: rgba(2, 197, 255, 0.07);
  overflow: hidden;
}

.bg-line::after {
  content: '';
  display: block;
  position: absolute;
  height: 15vh;
  width: 100%;
  top: -50%;
  left: 0;
  background: linear-gradient(to bottom,
      rgba(2, 197, 255, 0) 0%,
      rgba(2, 197, 255, 0.6) 75%,
      #02c5ff 100%);
  animation: bgLineDrop 10s infinite;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}

.bg-line:nth-child(1) {
  margin-left: -30%;
}

.bg-line:nth-child(1)::after {
  animation-delay: 2s;
}

.bg-line:nth-child(2) {}

.bg-line:nth-child(2)::after {
  animation-delay: 0s;
}

.bg-line:nth-child(3) {
  margin-left: 30%;
}

.bg-line:nth-child(3)::after {
  animation-delay: 2.5s;
}

.bg-line:nth-child(4) {
  margin-left: 60%;
}

.bg-line:nth-child(4)::after {
  animation-delay: 1.2s;
}

@keyframes bgLineDrop {
  0% {
    top: -50%;
  }

  100% {
    top: 110%;
  }
}

/* ── FAQ CATEGORY BUTTONS (FAQ page) ── */
.faq-cat-btn {
  padding: 8px 20px;
  background: rgba(0, 212, 255, .04);
  border: 1px solid rgba(0, 212, 255, .12);
  border-radius: 0;
  font-family: var(--font-syne);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  cursor: pointer;
  transition: all .22s;
}

.faq-cat-btn:hover {
  border-color: var(--c-border);
  color: var(--text-2);
}

.faq-cat-btn.active {
  background: var(--c-dim);
  border-color: var(--c);
  color: var(--c);
  box-shadow: 0 0 12px rgba(0, 212, 255, .2);
}

.faq-cat-btn:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

.faq-q:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: -2px;
}

/* ══════════════════════════════════════════════
       NAV: WORDPRESS ACTIVE STATES
       ══════════════════════════════════════════════ */
nav .current-menu-item>a,
nav .current-page-ancestor>a,
nav .current-menu-ancestor>a {
  color: var(--c);
}

nav .current-menu-item>a::after,
nav .current-page-ancestor>a::after,
nav .current-menu-ancestor>a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  background: var(--c);
  box-shadow: 0 0 8px var(--c-glow);
}

/* ══════════════════════════════════════════════
       SHARED INNER-PAGE COMPONENTS
       ══════════════════════════════════════════════ */
.page-main {
  padding-top: 94px;
  padding-bottom: 94px;
}

.page-band {
  padding: 56px 0 52px;
  border-bottom: 1px solid rgba(0, 212, 255, .07);
}

.page-band-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}

.page-band-title {
  font-family: var(--font-syne);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 10px;
  letter-spacing: -.01em;
}

.page-band-sub {
  font-size: .9rem;
  color: var(--text-2);
  line-height: 1.7;
  max-width: 380px;
  text-align: right;
  align-self: flex-end;
}

/* ══════════════════════════════════════════════
       BLOG PAGE
       ══════════════════════════════════════════════ */
.blog-section {
  padding: 56px 0 96px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ── FEATURED (first child spans all 3 cols) ── */
.blog-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 320px;
}

.blog-card {
  background: rgba(0, 10, 28, .55);
  border: 1px solid rgba(0, 212, 255, .08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color .3s, transform .35s var(--ease), box-shadow .35s;
}

.blog-card:hover {
  border-color: rgba(0, 212, 255, .28);
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5), 0 0 20px rgba(0, 212, 255, .07);
}

.blog-card-img-wrap {
  display: block;
  overflow: hidden;
  position: relative;
}

.blog-card--featured .blog-card-img-wrap {
  height: 100%;
}

.blog-card:not(.blog-card--featured) .blog-card-img-wrap {
  height: 180px;
}

/* Только для featured-карточки (первой, самой большой) */
.blog-card--featured .blog-card-img {
  max-height: 500px !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* А если обёртка тоже нуждается в ограничении */
.blog-card--featured .blog-card-img-wrap {
  max-height: 500px !important;
  overflow: hidden !important;
  display: block !important;
}

.blog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 100%;
  max-height: 100%;
}



.blog-card:hover .blog-card-img {
  transform: scale(1.04);
}

.blog-card-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 10, 30, .6);
  position: relative;
  overflow: hidden;
}

.blog-card-img--placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 212, 255, .08) 0%, transparent 60%);
}

.blog-placeholder-label {
  font-family: var(--font-syne);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c);
  opacity: .4;
  position: relative;
  z-index: 1;
}

.blog-card-body {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card--featured .blog-card-body {
  justify-content: center;
  padding: 40px 44px;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.blog-cat-badge {
  font-family: var(--font-syne);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c);
  background: var(--c-dim);
  border: 1px solid var(--c-border);
  padding: 2px 8px;
}

.blog-date,
.blog-read-time {
  font-size: .7rem;
  color: var(--text-3);
  letter-spacing: .04em;
}

.blog-card-title {
  font-family: var(--font-syne);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 12px;
}

.blog-card--featured .blog-card-title {
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  margin-bottom: 16px;
}

.blog-card:not(.blog-card--featured) .blog-card-title {
  font-size: .95rem;
}

.blog-card-title a {
  color: var(--text-1);
  transition: color .2s;
}

.blog-card-title a:hover {
  color: var(--c);
}

.blog-card-excerpt {
  font-size: .82rem;
  color: var(--text-2);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 20px;
}

.blog-card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-syne);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c);
  transition: gap .2s;
}

.blog-card-link:hover {
  gap: 12px;
}

/* ── PAGINATION ── */
.blog-pagination {
  margin-top: 56px;
  display: flex;
  justify-content: center;
}

.blog-pagination ul {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-pagination li a,
.blog-pagination li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(0, 212, 255, .12);
  background: rgba(0, 212, 255, .04);
  font-family: var(--font-syne);
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-3);
  transition: all .2s;
}

.blog-pagination li a:hover {
  border-color: var(--c);
  color: var(--c);
  background: var(--c-dim);
}

.blog-pagination li .current {
  background: var(--c-dim);
  border-color: var(--c);
  color: var(--c);
}

/* ── EMPTY STATE ── */
.blog-empty {
  text-align: center;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.blog-empty-icon {
  width: 72px;
  height: 72px;
  border: 1px solid rgba(0, 212, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  margin-bottom: 8px;
}

.blog-empty-title {
  font-family: var(--font-syne);
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
}

.blog-empty-text {
  font-size: .87rem;
  color: var(--text-2);
  max-width: 340px;
  line-height: 1.7;
}

/* ══════════════════════════════════════════════
       ABOUT PAGE
       ══════════════════════════════════════════════ */
.about-statement {
  padding: 52px 0 80px;
  border-bottom: 1px solid rgba(0, 212, 255, .07);
}

.about-statement-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 80px;
  align-items: center;
}

.about-heading {
  font-family: var(--font-syne);
  font-size: clamp(4rem, 9vw, 8rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.03em;
}

.about-heading em {
  font-style: normal;
  color: var(--c);
  text-shadow: 0 0 60px rgba(0, 212, 255, .35);
}

.about-lead {
  font-size: 1.05rem;
  color: var(--text-1);
  line-height: 1.7;
  margin-bottom: 20px;
}

.about-body {
  font-size: .87rem;
  color: var(--text-2);
  line-height: 1.75;
}

/* ── NUMBERS ── */
.about-numbers {
  padding: 72px 0;
}

.about-numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(0, 212, 255, .08);
  border: 1px solid rgba(0, 212, 255, .08);
}

.about-num-item {
  padding: 40px 36px;
  background: rgba(0, 8, 20, .7);
  transition: background .3s;
}

.about-num-item:hover {
  background: rgba(0, 15, 35, .85);
}

.about-num-val {
  font-family: var(--font-syne);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 900;
  color: var(--c);
  text-shadow: 0 0 30px rgba(0, 212, 255, .3);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -.02em;
}

.about-num-val span {
  color: var(--text-3);
}

.about-num-label {
  font-family: var(--font-syne);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-1);
  margin-bottom: 8px;
}

.about-num-desc {
  font-size: .78rem;
  color: var(--text-3);
  line-height: 1.6;
}

/* ── HISTORY / TIMELINE ── */
.about-history {
  padding: 72px 0;
  border-top: 1px solid rgba(0, 212, 255, .07);
}

.about-history-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.about-history-text {
  padding-top: 8px;
}

.about-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.about-timeline::before {
  content: '';
  position: absolute;
  left: 56px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--c) 0%, rgba(0, 212, 255, .1) 100%);
}

.timeline-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(0, 212, 255, .06);
  position: relative;
}

.timeline-item:last-child {
  border-bottom: none;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: 49px;
  top: 33px;
  width: 15px;
  height: 15px;
  background: rgba(0, 8, 20, 1);
  border: 2px solid var(--c);
  box-shadow: 0 0 10px rgba(0, 212, 255, .5);
  z-index: 1;
}

.timeline-year {
  font-family: var(--font-syne);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c);
  padding-top: 2px;
}

.timeline-title {
  font-family: var(--font-syne);
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-1);
  margin-bottom: 6px;
}

.timeline-desc {
  font-size: .8rem;
  color: var(--text-3);
  line-height: 1.65;
}

/* ── VALUES ── */
.about-values {
  padding: 72px 0;
  border-top: 1px solid rgba(0, 212, 255, .07);
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(0, 212, 255, .07);
}

.about-value-card {
  padding: 40px 36px;
  background: rgba(0, 8, 20, .7);
  position: relative;
  overflow: hidden;
  transition: background .3s;
}

.about-value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}

.about-value-card:hover {
  background: rgba(0, 15, 35, .85);
}

.about-value-card:hover::before {
  transform: scaleX(1);
}

.value-number {
  font-family: var(--font-syne);
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(0, 212, 255, .1);
  line-height: 1;
  margin-bottom: 16px;
  transition: color .3s;
}

.about-value-card:hover .value-number {
  color: rgba(0, 212, 255, .18);
}

.value-name {
  font-family: var(--font-syne);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-1);
  margin-bottom: 14px;
}

.value-desc {
  font-size: .82rem;
  color: var(--text-3);
  line-height: 1.7;
}

/* ── ABOUT CTA ── */
.about-cta {
  background: rgba(0, 10, 28, .55);
  border: 1px solid rgba(0, 212, 255, .1);
  padding: 64px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.about-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 212, 255, .05) 0%, transparent 55%);
  pointer-events: none;
}

.about-cta-title {
  font-family: var(--font-syne);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.about-cta-sub {
  font-size: .9rem;
  color: var(--text-2);
  margin-bottom: 32px;
}

.about-cta-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* ══════════════════════════════════════════════
       CONTACT PAGE
       ══════════════════════════════════════════════ */
.contact-section {
  padding: 64px 0 100px;
}

.contact-split {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 56px;
  align-items: start;
}

/* ── CHANNELS ── */
.contact-channels {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 100px;
}

.contact-channel {
  display: flex;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(0, 212, 255, .07);
}

.contact-channel:first-child {
  padding-top: 0;
}

.contact-channel-icon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0, 212, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c);
  flex-shrink: 0;
  background: rgba(0, 212, 255, .04);
  transition: all .22s;
}

.contact-channel:hover .contact-channel-icon {
  background: var(--c-dim);
  border-color: var(--c);
  box-shadow: 0 0 14px rgba(0, 212, 255, .25);
}

.contact-channel-name {
  font-family: var(--font-syne);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-1);
  margin-bottom: 4px;
}

.contact-channel-value {
  font-size: .78rem;
  color: var(--text-3);
  line-height: 1.5;
  margin-bottom: 8px;
}

.contact-channel-link {
  font-family: var(--font-syne);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c);
  transition: letter-spacing .2s;
}

.contact-channel-link:hover {
  letter-spacing: .14em;
}

.contact-channel-badge {
  display: inline-block;
  font-family: var(--font-syne);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 2px 8px;
}

.contact-meta {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  color: var(--text-3);
}

.contact-meta-row svg {
  flex-shrink: 0;
  color: var(--c);
  opacity: .7;
}

/* ── FORM ── */
.contact-form-wrap {
  background: rgba(0, 8, 22, .5);
  border: 1px solid rgba(0, 212, 255, .1);
  padding: 40px 44px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: grid;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-family: var(--font-syne);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}

.form-required {
  color: var(--c);
}

.form-optional {
  color: var(--text-3);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a6080' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

.contact-textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-sora);
}

.contact-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 4px;
  flex-wrap: wrap;
}

.contact-form-note {
  font-size: .72rem;
  color: var(--text-3);
  line-height: 1.6;
  max-width: 280px;
}

.contact-form-note a {
  color: var(--text-2);
  text-decoration: underline;
  transition: color .2s;
}

.contact-form-note a:hover {
  color: var(--c);
}

.contact-submit {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── SUCCESS / ERRORS ── */
.contact-success {
  text-align: center;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--c);
}

.contact-success-title {
  font-family: var(--font-syne);
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-1);
}

.contact-success-text {
  font-size: .87rem;
  color: var(--text-2);
  line-height: 1.65;
}

.contact-errors {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  background: rgba(220, 50, 50, .07);
  border: 1px solid rgba(220, 50, 50, .25);
  margin-bottom: 4px;
}

.contact-error-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: #dc6060;
}

/* ══════════════════════════════════════════════
       RESPONSIVE — inner pages
       ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-card--featured {
    grid-template-columns: 1fr;
  }

  .blog-card--featured .blog-card-img-wrap {
    height: 260px;
  }

  .about-statement-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-numbers-grid,
  .about-values-grid {
    grid-template-columns: 1fr 1fr;
  }

  .about-history-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .contact-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-channels {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 24px;
  }

  .contact-meta {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 0;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 212, 255, .07);
  }
}

@media (max-width: 768px) {
  .page-band-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .page-band-sub {
    text-align: left;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-card--featured {
    grid-column: auto;
  }

  .about-numbers-grid,
  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .contact-channels {
    grid-template-columns: 1fr;
  }

  .contact-form-wrap {
    padding: 28px 24px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-form-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .about-cta-btns {
    flex-direction: column;
    align-items: center;
  }
}

/* ══════════════════════════════════════════════
   HEADER BADGE
══════════════════════════════════════════════ */
.hdr-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hdr-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--c);
  color: #000;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-sora);
  min-width: 15px;
  height: 15px;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 3px;
  pointer-events: none;
}

/* ══════════════════════════════════════════════
   WISHLIST PAGE
══════════════════════════════════════════════ */
.wl-section {
  padding: 56px 0 100px;
}

.wl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.wl-count {
  color: var(--text-2);
  font-size: .85rem;
}

.wl-clear-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--text-2);
  font-size: .8rem;
  font-family: var(--font-sora);
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}

.wl-clear-btn:hover {
  border-color: var(--c);
  color: var(--c);
}

.wl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 96px 0;
  text-align: center;
  color: var(--text-2);
}

.wl-empty svg {
  opacity: .25;
}

.wl-empty-title {
  font-family: var(--font-syne);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.wl-empty-text {
  font-size: .9rem;
  max-width: 320px;
  margin: 0;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════
   CART PAGE
══════════════════════════════════════════════ */
.cart-section {
  padding: 56px 0 100px;
}

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

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-row {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, .05);
  transition: border-color .2s;
}

.cart-row:hover {
  border-color: rgba(0, 212, 255, .15);
}

.cart-row-img {
  width: 80px;
  height: 56px;
  object-fit: contain;
  display: block;
}

.cart-row-name {
  font-family: var(--font-syne);
  font-weight: 700;
  font-size: .88rem;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-row-meta {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cart-rarity-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  font-family: var(--font-syne);
}

.cart-rarity-label.figma-r-ancient {
  color: #eb4b4b;
}

.cart-rarity-label.figma-r-legendary {
  color: #8847ff;
}

.cart-rarity-label.figma-r-exceed {
  color: #ffd700;
}

.cart-rarity-label.figma-r-rare {
  color: #4b69ff;
}

.cart-rarity-label.figma-r-uncommon {
  color: #5e98d9;
}

.cart-rarity-label.figma-r-common {
  color: rgba(255, 255, 255, .4);
}

.cart-row-price {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.cart-row-remove {
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  transition: color .2s;
}

.cart-row-remove:hover {
  color: #eb4b4b;
}

/* ── Order Summary ── */
.cart-summary {
  position: sticky;
  top: 100px;
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, .07);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cart-summary-title {
  font-family: var(--font-syne);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 6px;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .84rem;
  color: var(--text-2);
  padding-bottom: 14px;
  /*border-bottom: 1px solid rgba(255,255,255,.05);*/
}

.cart-saving {
  color: #00d4aa;
  font-weight: 700;
}

.cart-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-syne);
  font-weight: 700;
  font-size: 1.05rem;
  padding-top: 2px;
}

.cart-checkout-btn {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.cart-clear-btn {
  background: none;
  border: none;
  color: var(--text-2);
  font-size: .78rem;
  font-family: var(--font-sora);
  cursor: pointer;
  text-align: center;
  padding: 4px;
  transition: color .2s;
}

.cart-clear-btn:hover {
  color: #eb4b4b;
}

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

  .cart-row {
    grid-template-columns: 60px 1fr auto;
  }

  .cart-row-price {
    display: none;
  }

  .cart-summary {
    position: static;
  }
}

/* ══════════════════════════════════════════════
   SHOP PAGE
══════════════════════════════════════════════ */

/* Search bar */
.shop-search-wrap {
  padding: 32px 0;
  border-bottom: 1px solid rgba(0, 212, 255, .06);
}

.shop-search-inner {
  position: relative;
  /* max-width: 600px; */
  margin: 0 auto;
}

.shop-search-input {
  width: 100%;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--text);
  font-family: var(--font-sora);
  font-size: .95rem;
  padding: 14px 48px 14px 20px;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s, background .2s;
}

.shop-search-input::placeholder {
  color: rgba(255, 255, 255, .2);
}

.shop-search-input:focus {
  border-color: var(--c);
  background: rgba(0, 212, 255, .03);
}

.shop-search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .25);
  pointer-events: none;
}

/* Layout */
.shop-section {
  padding: 48px 0 100px;
}

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

/* ── Sidebar ── */
.shop-sidebar {
  position: sticky;
  top: 96px;
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, .07);
}

.filter-block {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.filter-title {
  font-family: var(--font-syne);
  font-weight: 700;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-2);
  margin-bottom: 14px;
}

.filter-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.filter-input {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--text);
  font-family: var(--font-sora);
  font-size: .82rem;
  padding: 8px 10px;
  width: 100%;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s;
  -moz-appearance: textfield;
}

.filter-input::-webkit-inner-spin-button,
.filter-input::-webkit-outer-spin-button {
  display: none;
}

.filter-input::placeholder {
  color: rgba(255, 255, 255, .2);
}

.filter-input:focus {
  border-color: var(--c);
}

.filter-rarity-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-check {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: .84rem;
  color: var(--text-2);
  transition: color .15s;
  user-select: none;
}

.filter-check:hover {
  color: var(--text);
}

.filter-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color .15s, background .15s;
}

.filter-check input[type="checkbox"]:checked {
  background: var(--c);
  border-color: var(--c);
}

.filter-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 8px;
  border: 2px solid #000;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.filter-rarity-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.filter-rarity-dot.figma-r-ancient {
  background: #eb4b4b;
}

.filter-rarity-dot.figma-r-legendary {
  background: #8847ff;
}

.filter-rarity-dot.figma-r-exceed {
  background: #ffd700;
}

.filter-rarity-dot.figma-r-rare {
  background: #4b69ff;
}

.filter-rarity-dot.figma-r-uncommon {
  background: #5e98d9;
}

.filter-rarity-dot.figma-r-common {
  background: rgba(255, 255, 255, .3);
}

/* ========== SHOP FILTERS RESET BUTTON ========== */
.filter-reset-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff !important;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  text-align: center;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.filter-reset-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
}

.filter-reset-btn svg {
  stroke: #fff;
  width: 12px;
  height: 12px;
}

/* ── Toolbar ── */
.shop-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.shop-sort-select {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--text);
  font-family: var(--font-sora);
  font-size: .82rem;
  padding: 9px 30px 9px 12px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,.35)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color .2s;
  flex-shrink: 0;
}

.shop-sort-select:focus {
  border-color: var(--c);
}

.shop-sort-select option {
  background: #0d1117;
  color: var(--text);
}

.shop-cats-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}

.shop-cat-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--text-2);
  font-family: var(--font-syne);
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 7px 13px;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
  white-space: nowrap;
}

.shop-cat-btn:hover,
.shop-cat-btn.active {
  border-color: var(--c);
  color: var(--c);
  background: rgba(0, 212, 255, .06);
}

.shop-count {
  margin-left: auto;
  font-size: .78rem;
  color: var(--text-2);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Shop Grid ── */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.shop-float-val {
  font-size: .68rem;
  color: rgba(0, 212, 255, .55);
  font-family: var(--font-sora);
  display: block;
  margin: 3px 0 4px;
  letter-spacing: .02em;
}

.shop-no-results {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 80px 0;
  text-align: center;
  color: var(--text-2);
}

.shop-no-results svg {
  opacity: .2;
}

.shop-no-results h3 {
  font-family: var(--font-syne);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  margin: 4px 0 0;
}

.shop-no-results p {
  font-size: .85rem;
  margin: 0;
}

/* ── Shop grid empty state (Elementor widget) ── */
.df-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 60px 24px;
  text-align: center;
  color: var(--text-2);
}

.df-empty p {
  font-size: .9rem;
  margin: 0;
  opacity: .7;
}

.df-reset-btn {
  font-family: var(--font-syne);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 24px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.df-reset-btn:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .3);
}

/* ── Pagination ── */
.shop-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 48px;
  flex-wrap: wrap;
}

.shop-page-btn {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--text-2);
  font-family: var(--font-syne);
  font-weight: 700;
  font-size: .82rem;
  min-width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}

.shop-page-btn:hover,
.shop-page-btn.active {
  border-color: var(--c);
  color: var(--c);
  background: rgba(0, 212, 255, .06);
}

.shop-page-btn.active {
  cursor: default;
}

.shop-page-btn.prev-btn,
.shop-page-btn.next-btn {
  padding: 0 16px;
  font-size: .78rem;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .shop-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

  .shop-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .filter-reset-btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .shop-sidebar {
    grid-template-columns: 1fr;
  }

  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .shop-cats-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
}

@media (max-width: 400px) {
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ══════════════════════════════════════════════
   SINGLE ARTICLE / BLOG POST
   All class names are prefixed "single-" or "s-"
   to avoid conflicts with global nav/page CSS.
══════════════════════════════════════════════ */

/* ── Header band ── */
.single-band {
  display: block;
  padding: 94px 0 52px;
  /* top = sticky header height offset */
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: transparent;
}

/* Breadcrumb — plain div, not nav, to avoid global nav a{} styles */
.single-bc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 36px;
  font-family: var(--font-sora);
  font-size: .75rem;
}

.single-bc-link {
  display: inline;
  font-family: var(--font-sora);
  font-size: .75rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-2);
  text-decoration: none;
  background: none;
  padding: 0;
  transition: color .2s;
}

.single-bc-link:hover {
  color: var(--c);
  background: none;
}

.single-bc-sep {
  display: inline;
  color: var(--text-2);
  opacity: .35;
  margin: 0 7px;
  font-size: .75rem;
}

.single-bc-cur {
  display: inline;
  color: var(--text);
  opacity: .6;
  font-family: var(--font-sora);
  font-size: .75rem;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Header content column (centered, narrow) */
.single-hd {
  display: block;
  max-width: 760px;
}

/* Meta row: category · date · read time */
.single-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.single-cat {
  /* inherits blog-cat-badge styles */
  text-decoration: none;
}

.single-dot {
  display: inline-block;
  color: var(--text-2);
  opacity: .35;
  font-size: .75rem;
}

.single-date,
.single-readtime {
  display: inline-block;
  font-family: var(--font-sora);
  font-size: .8rem;
  color: var(--text-2);
}

/* Title */
.single-title {
  display: block;
  font-family: var(--font-syne);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--text);
  margin: 0 0 20px;
}

/* Lead / excerpt */
.single-lead {
  display: block;
  font-family: var(--font-sora);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-2);
  margin: 0 0 26px;
}

/* Author row */
.single-byline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-sora);
  font-size: .82rem;
  color: var(--text-2);
}

.single-byline-by {
  opacity: .5;
}

.single-byline-name {
  font-family: var(--font-syne);
  font-weight: 700;
  font-size: .82rem;
  color: var(--text);
}

.single-byline-upd {
  opacity: .6;
}

/* ── Hero image ── */
.single-hero {
  display: block;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.single-hero-img {
  display: block;
  width: 100%;
  max-height: 520px;
  height: auto;
  object-fit: cover;
}

/* ── Article body ── */
.single-body {
  display: block;
  padding: 60px 0 80px;
}

/* Content typography column */
.single-content {
  display: block;
  max-width: 720px;
  font-family: var(--font-sora);
  font-size: 1rem;
  line-height: 1.82;
  color: rgba(255, 255, 255, .82);
}

.single-content p {
  margin: 0 0 1.4em;
}

.single-content h2 {
  font-family: var(--font-syne);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text);
  margin: 2.2em 0 .7em;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.single-content h3 {
  font-family: var(--font-syne);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text);
  margin: 1.8em 0 .6em;
  line-height: 1.3;
}

.single-content h4 {
  font-family: var(--font-syne);
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
  margin: 1.5em 0 .5em;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.single-content a {
  color: var(--c);
  text-decoration: underline;
  text-decoration-color: rgba(0, 212, 255, .3);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}

.single-content a:hover {
  text-decoration-color: var(--c);
}

.single-content ul,
.single-content ol {
  margin: 0 0 1.4em;
  padding-left: 1.6em;
}

.single-content li {
  margin-bottom: .5em;
}

.single-content blockquote {
  display: block;
  margin: 2em 0;
  padding: 20px 28px;
  border-left: 3px solid var(--c);
  background: rgba(0, 212, 255, .04);
  font-style: italic;
  color: var(--text-2);
}

.single-content blockquote p {
  margin: 0;
}

.single-content code {
  font-family: 'Courier New', monospace;
  font-size: .88em;
  background: rgba(255, 255, 255, .08);
  padding: 2px 7px;
  color: var(--c);
}

.single-content pre {
  display: block;
  background: rgba(0, 0, 0, .5);
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 24px;
  overflow-x: auto;
  margin: 1.6em 0;
}

.single-content pre code {
  background: none;
  padding: 0;
  font-size: .88rem;
  color: rgba(255, 255, 255, .85);
}

.single-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.6em 0;
}

.single-content figure {
  display: block;
  margin: 2em 0;
}

.single-content figcaption {
  font-size: .78rem;
  color: var(--text-2);
  text-align: center;
  margin-top: 8px;
  opacity: .65;
}

.single-content hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin: 2.5em 0;
}

/* ── Footer: tags + share ── */
.single-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 720px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.single-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.s-tag {
  display: inline-block;
  font-family: var(--font-syne);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-2);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 5px 12px;
  text-decoration: none;
  transition: color .2s, border-color .2s;
}

.s-tag:hover {
  color: var(--c);
  border-color: rgba(0, 212, 255, .35);
}

.single-share {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.single-share-lbl {
  display: inline-block;
  font-family: var(--font-syne);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-2);
  opacity: .55;
}

.s-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-syne);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: var(--text-2);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}

.s-share-btn:hover {
  border-color: var(--c);
  color: var(--c);
  background: rgba(0, 212, 255, .06);
}

.s-share-btn.copied {
  border-color: #00bb88;
  color: #00bb88;
  background: rgba(0, 187, 136, .06);
}

/* ── Related posts ── */
.single-related {
  display: block;
  padding: 56px 0 96px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.single-related-title {
  display: block;
  font-family: var(--font-syne);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 0 0 32px;
}

.single-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .single-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
    
  .single-band {
    padding: 80px 0 40px;
  }

  .single-title {
    font-size: 1.8rem;
  }

  .single-content {
    font-size: .95rem;
  }

  .single-foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .single-share {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .single-related-grid {
    grid-template-columns: 1fr;
  }

  .single-lead {
    font-size: .95rem;
  }

  .single-hd {
    max-width: 100%;
  }
}

/* ══════════════════════════════════════════════
   SEARCH OVERLAY
══════════════════════════════════════════════ */
.srch-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(1, 6, 16, .97);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 24px 60px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  overflow-y: auto;
}

.srch-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.srch-close {
  position: fixed;
  top: 22px;
  right: 28px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  cursor: pointer;
  transition: color .2s, background .2s;
  z-index: 1;
}

.srch-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, .1);
}

.srch-inner {
  width: 100%;
  max-width: 1100px;
}

.srch-label {
  font-family: var(--font-syne);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--text-3);
  margin-bottom: 20px;
}

.srch-input-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1.5px solid rgba(255, 255, 255, .1);
  padding-bottom: 6px;
  margin-bottom: 48px;
  transition: border-color .2s;
}

.srch-input-wrap:focus-within {
  border-color: var(--c);
}

.srch-icon {
  flex-shrink: 0;
  color: var(--text-3);
  transition: color .2s;
}

.srch-input-wrap:focus-within .srch-icon {
  color: var(--c);
}

.srch-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-syne);
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  font-weight: 700;
  color: #fff;
  padding: 6px 0;
  -webkit-appearance: none;
  appearance: none;
}

.srch-input::placeholder {
  color: rgba(255, 255, 255, .18);
}

.srch-input::-webkit-search-cancel-button,
.srch-input::-webkit-search-decoration {
  display: none;
}

.srch-hint,
.srch-empty {
  font-family: var(--font-sora);
  font-size: .88rem;
  color: var(--text-3);
  text-align: center;
  padding: 48px 0;
}

.srch-count {
  font-family: var(--font-sora);
  font-size: .75rem;
  color: var(--text-2);
  margin-bottom: 24px;
  letter-spacing: .02em;
}

.srch-results {
  width: 100%;
  margin-top: 32px;
}

.srch-results .figma-cards-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 860px) {
  .srch-results .figma-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .srch-overlay {
    padding: 80px 16px 40px;
  }

  .srch-results .figma-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ══════════════════════════════════════════════
   AUTH MODAL
══════════════════════════════════════════════ */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 5, 15, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

.auth-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.auth-modal {
  background: #030d1f;
  border: 1px solid rgba(255, 255, 255, .07);
  width: 100%;
  max-width: 440px;
  padding: 40px 40px 36px;
  position: relative;
}

.auth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  background: none;
  border: none;
  cursor: pointer;
  transition: color .2s;
}

.auth-close:hover {
  color: #fff;
}

.auth-logo {
  font-family: var(--font-syne);
  font-size: .95rem;
  font-weight: 900;
  color: var(--c);
  letter-spacing: .06em;
  margin-bottom: 28px;
  text-transform: uppercase;
}

.auth-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  margin-bottom: 32px;
}

.auth-tab {
  flex: 1;
  padding: 10px 0 12px;
  font-family: var(--font-syne);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-2);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}

.auth-tab.active {
  color: var(--c);
  border-color: var(--c);
}

.auth-form {
  display: none;
}

.auth-form.active {
  display: block;
}

.auth-field {
  margin-bottom: 18px;
}

.auth-label {
  display: block;
  font-family: var(--font-sora);
  font-size: .68rem;
  color: var(--text-2);
  margin-bottom: 8px;
  letter-spacing: .04em;
  text-transform: none;
}

.auth-input {
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .09);
  padding: 11px 14px;
  font-family: var(--font-sora);
  font-size: .88rem;
  color: #fff;
  outline: none;
  border-radius: 0;
  transition: border-color .2s;
  -webkit-appearance: none;
  appearance: none;
}

.auth-input:focus {
  border-color: rgba(0, 212, 255, .45);
  background: rgba(0, 212, 255, .03);
}

.auth-submit {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 13px 20px;
  background: var(--c);
  color: #000;
  font-family: var(--font-syne);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: opacity .2s;
}

.auth-submit:hover {
  opacity: .85;
}

.auth-footer {
  margin-top: 18px;
  font-family: var(--font-sora);
  font-size: .76rem;
  color: var(--text-2);
  text-align: center;
  text-transform: none;
}

.auth-switch {
  background: none;
  border: none;
  color: var(--c);
  font-family: var(--font-sora);
  font-size: .76rem;
  cursor: pointer;
  padding: 0;
  text-transform: none;
}

.auth-switch:hover {
  text-decoration: underline;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 18px;
  font-family: var(--font-sora);
  font-size: .68rem;
  color: var(--text-3);
  text-transform: none;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .06);
}

.auth-steam {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 20px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--text-1);
  font-family: var(--font-syne);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.auth-steam:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .2);
}

@media (max-width: 480px) {
  .auth-modal {
    padding: 32px 24px 28px;
  }
}

.auth-msg {
  min-height: 0;
  font-size: .8rem;
  text-align: center;
  padding: 0;
  border-radius: 6px;
  transition: padding .2s, min-height .2s;
}

.auth-msg--success,
.auth-msg--error {
  padding: 10px 14px;
  min-height: 1em;
}

.auth-msg--success {
  background: rgba(0, 187, 136, .12);
  color: #00bb88;
}

.auth-msg--error {
  background: rgba(235, 75, 75, .12);
  color: #eb4b4b;
}

/* ══════════════════════════════════════════════
   PRODUCT PAGE  (PDP)
══════════════════════════════════════════════ */

/* make every skin card with data-id look clickable */
.figma-card[data-id] {
  cursor: pointer;
}

.pdp-page {
  padding-top: 94px;
  min-height: 100vh;
}

/* ── Breadcrumb ── */
.pdp-bc-wrap {
  padding: 22px 0 0;
}

.pdp-bc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-sora);
  font-size: .72rem;
}

.pdp-bc-link {
  color: var(--text-2);
  font-size: .72rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
  background: none;
  text-decoration: none;
  transition: color .18s;
}

.pdp-bc-link:hover {
  color: var(--c);
}

.pdp-bc-sep {
  color: var(--text-3);
  padding: 0 8px;
}

.pdp-bc-cur {
  color: var(--text-1);
  font-size: .72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

/* ── Hero layout ── */
.pdp-hero {
  padding: 28px 0 72px;
}

.pdp-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* ── Image column ── */
.pdp-img-col {
  position: sticky;
  top: 110px;
}

.pdp-img-frame {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 9, 22, .7);
  border: 1px solid rgba(255, 255, 255, .06);
  overflow: hidden;
}

.pdp-img-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 65%,
      var(--rarity-color, rgba(0, 212, 255, .2)) 0%,
      transparent 60%);
  opacity: .28;
  transition: opacity .5s;
}

.pdp-img-frame:hover .pdp-img-glow {
  opacity: .5;
}

.pdp-img {
  position: relative;
  z-index: 1;
  width: 80%;
  height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .7));
  transition: transform .55s cubic-bezier(.22, .68, 0, 1.15);
}

.pdp-img-frame:hover .pdp-img {
  transform: scale(1.05) translateY(-8px);
}

/* Trust strip */
.pdp-trust {
  display: flex;
  margin-top: 16px;
  border: 1px solid rgba(255, 255, 255, .06);
}

.pdp-trust-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 6px;
  font-family: var(--font-sora);
  font-size: .64rem;
  color: var(--text-2);
  border-right: 1px solid rgba(255, 255, 255, .06);
  text-align: center;
  white-space: nowrap;
}

.pdp-trust-item:last-child {
  border-right: none;
}

.pdp-trust-item svg {
  color: var(--c);
  flex-shrink: 0;
}

/* ── Info column ── */
.pdp-info-col {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* Meta row */
.pdp-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pdp-rarity-pill {
  font-family: var(--font-syne);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 3px 10px;
  border: 1px solid currentColor;
  opacity: .8;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .3;
  }
}

/* Product name */
.pdp-name {
  font-family: var(--font-syne);
  font-weight: 800;
  font-size: clamp(1.55rem, 3.2vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--text-1);
  text-transform: none;
  margin: 0;
}

/* Float block */
.pdp-float-block {
  padding: 18px 20px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .07);
}

.pdp-float-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.pdp-float-lbl {
  font-family: var(--font-syne);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-2);
}

.pdp-float-num {
  font-family: var(--font-syne);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c);
}

/* Bar */
.pdp-bar-outer {
  position: relative;
  height: 8px;
  margin-bottom: 10px;
}

.pdp-bar-track {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      #00e5ff 0%, #00e5ff 7%,
      #00cc88 7%, #00cc88 15%,
      #a4cc00 15%, #a4cc00 38%,
      #ff9900 38%, #ff9900 45%,
      #ff3300 45%, #ff3300 100%);
}

.pdp-bar-needle {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, .8);
  transform: translateX(-50%);
  transition: left .55s cubic-bezier(.22, .68, 0, 1.2);
  z-index: 2;
}

.pdp-bar-needle-tip {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #fff;
}

.pdp-bar-zones {
  display: flex;
  width: 100%;
}

.pdp-zone {
  font-family: var(--font-syne);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text-3);
  text-align: center;
  overflow: hidden;
  transition: color .2s;
}

.pdp-zone.active {
  color: var(--text-1);
}

/* Wear section */
.pdp-wear-lbl {
  font-family: var(--font-syne);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-2);
  margin-bottom: 10px;
}

.pdp-wear-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pdp-wear-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--text-2);
  cursor: pointer;
  transition: background .16s, border-color .16s, color .16s;
  min-width: 64px;
}

.pdp-wear-tab:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .22);
  color: var(--text-1);
}

.pdp-wear-tab.active {
  background: rgba(0, 212, 255, .07);
  border-color: var(--c);
  color: var(--c);
}

.pdp-wear-code {
  font-family: var(--font-syne);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}

.pdp-wear-price {
  font-family: var(--font-sora);
  font-size: .62rem;
  opacity: .7;
  line-height: 1;
}

/* Price block */
.pdp-price-block {
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.pdp-price-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.pdp-price {
  font-family: var(--font-sora);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1;
}

.pdp-old-price {
  font-family: var(--font-sora);
  font-size: 1rem;
  color: var(--text-3);
  text-decoration: line-through;
}

.pdp-disc-pill {
  font-family: var(--font-syne);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
  background: var(--c-red, #e30446);
  padding: 3px 9px;
  vertical-align: baseline;
}

.pdp-save-row {
  margin-top: 6px;
  font-family: var(--font-sora);
  font-size: .76rem;
  color: #00cc88;
  font-weight: 600;
}

/* CTA */
.pdp-ctas {
  display: flex;
  gap: 10px;
}

.pdp-buy-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 20px;
  background: var(--c);
  color: #000;
  font-family: var(--font-syne);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: opacity .18s, transform .15s;
}

.pdp-buy-btn:hover {
  opacity: .88;
  transform: translateY(-1px);
}

.pdp-buy-btn:active {
  transform: translateY(0);
}

.pdp-buy-btn.added {
  background: linear-gradient(135deg, #00bb88, #007755);
  color: #fff;
}

.pdp-wish-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .13);
  color: var(--text-2);
  font-family: var(--font-syne);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .18s, color .18s, background .18s;
}

.pdp-wish-btn:hover {
  border-color: rgba(255, 255, 255, .3);
  color: var(--text-1);
}

.pdp-wish-btn.wished {
  background: rgba(235, 75, 75, .08);
  border-color: rgba(235, 75, 75, .4);
  color: #eb4b4b;
}

.pdp-wish-btn.wished svg {
  fill: #eb4b4b;
  stroke: #eb4b4b;
}

/* Stats grid */
.pdp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .06);
}

.pdp-stat {
  background: #030d1f;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pdp-stat-k {
  font-family: var(--font-syne);
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-3);
}

.pdp-stat-v {
  font-family: var(--font-sora);
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-1);
}

.pdp-stat-instant {
  color: var(--c) !important;
}

/* ── Similar items ── */
.pdp-similar-section {
  padding: 48px 0 80px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.pdp-similar-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.pdp-similar-title {
  font-family: var(--font-syne);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
}

.pdp-similar-all {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-syne);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-2);
  text-decoration: none;
  transition: color .18s;
}

.pdp-similar-all:hover {
  color: var(--c);
}

.pdp-similar-grid .figma-cards-grid {
  grid-template-columns: repeat(4, 1fr);
}

.pdp-disc-pill:empty {
  display: none;
}

/* ── Not found ── */
.pdp-notfound {
  padding: 80px 0 120px;
}

.pdp-notfound-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.pdp-nf-title {
  font-family: var(--font-syne);
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pdp-nf-sub {
  font-family: var(--font-sora);
  font-size: .88rem;
  color: var(--text-2);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .pdp-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .pdp-img-col {
    position: static;
  }

  .pdp-img-frame {
    max-width: 480px;
    margin: 0 auto;
  }

  .pdp-similar-grid .figma-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .pdp-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pdp-ctas {
    flex-direction: column;
  }

  .pdp-trust {
    display: none;
  }

  .pdp-similar-grid .figma-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pdp-wear-tab {
    min-width: 56px;
    padding: 9px 10px;
  }
}

/* ══════════════════════════════════════════════
   HOT DEALS SLIDER  (discount page)
══════════════════════════════════════════════ */

.hds-section {
  padding: 32px 0 40px;
}

/* ── Header row ── */
.hds-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.hds-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hds-live-dot {
  width: 7px;
  height: 7px;
  background: #e30446;
  border-radius: 50%;
  flex-shrink: 0;
  animation: hds-pulse 2s ease-in-out infinite;
}

@keyframes hds-pulse {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(227, 4, 70, .6);
  }

  50% {
    opacity: .6;
    box-shadow: 0 0 0 5px rgba(227, 4, 70, 0);
  }
}

.hds-label {
  font-family: var(--font-syne);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--text-2);
}

.hds-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hds-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

.hds-dot {
  height: 4px;
  width: 16px;
  background: rgba(255, 255, 255, .18);
  border: none;
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
  border-radius: 0;
  padding: 0;
}

.hds-dot.active {
  width: 32px;
  background: var(--c);
}

.hds-arrow {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  color: var(--text-2);
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
  flex-shrink: 0;
}

.hds-arrow:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}

/* ── Track ── */
.hds-track-wrap {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  background: #030c1f;
}

.hds-track {
  display: flex;
  transition: transform .54s cubic-bezier(.22, .68, 0, 1.1);
  will-change: transform;
}

/* ── Slide ── */
.hds-slide {
  flex: 0 0 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 380px 1fr;
  min-height: 360px;
  position: relative;
  overflow: hidden;
}

/* big decorative % in background */
.hds-slide-deco {
  position: absolute;
  right: -.02em;
  bottom: -.18em;
  font-family: var(--font-syne);
  font-size: clamp(9rem, 16vw, 16rem);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
  color: #fff;
  opacity: .032;
  pointer-events: none;
  user-select: none;
}

/* ── Image column ── */
.hds-img-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 28px;
  position: relative;
}

.hds-img-col::after {
  content: '';
  position: absolute;
  top: 10%;
  right: 0;
  height: 80%;
  width: 1px;
  background: rgba(255, 255, 255, .06);
}

.hds-img-frame {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hds-img-glow {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  opacity: .18;
  filter: blur(48px);
  transition: opacity .4s;
}

.hds-slide:hover .hds-img-glow {
  opacity: .3;
}

.hds-img {
  position: relative;
  z-index: 1;
  width: 90%;
  height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, .65));
  transition: transform .5s cubic-bezier(.22, .68, 0, 1.15);
}

.hds-slide:hover .hds-img {
  transform: scale(1.07) translateY(-8px);
}

/* ── Info column ── */
.hds-info-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 40px 48px 40px 44px;
  position: relative;
  z-index: 1;
}

.hds-rank {
  font-family: var(--font-syne);
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--text-3);
}

.hds-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hds-disc-badge {
  display: inline-block;
  font-family: var(--font-syne);
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: #fff;
  background: #e30446;
  padding: 4px 14px;
  line-height: 1.6;
}

.hds-rarity-lbl {
  font-family: var(--font-syne);
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 3px 10px;
  border: 1px solid currentColor;
  opacity: .8;
}

.hds-name {
  font-family: var(--font-syne);
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-1);
  text-transform: none;
  margin: 0;
  line-height: 1.1;
}

.hds-wear {
  font-family: var(--font-sora);
  font-size: .76rem;
  color: var(--text-2);
}

.hds-savings {
  font-family: var(--font-syne);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #00cc88;
}

.hds-price-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.hds-old-price {
  font-family: var(--font-sora);
  font-size: .95rem;
  color: var(--text-3);
  text-decoration: line-through;
}

.hds-price {
  font-family: var(--font-sora);
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -.04em;
  line-height: 1;
}

.hds-ctas {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.hds-buy {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: linear-gradient(135deg, rgba(0, 180, 220, .9), rgba(0, 90, 160, .9));
  color: #fff;
  font-family: var(--font-syne);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: opacity .18s, transform .15s;

  /* svg, path {fill: #000; stroke: #000;} */
}

.hds-buy:hover {
  opacity: .88;
  transform: translateY(-1px);
}

.hds-buy:active {
  transform: translateY(0);
}

.hds-buy.added {
  background: linear-gradient(135deg, #00bb88, #007755);
  color: #fff;
}

.hds-wish {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--text-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .18s, border-color .18s, color .18s;
}

.hds-wish:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .25);
  color: var(--text-1);
}

.hds-wish.wished {
  background: rgba(235, 75, 75, .1);
  border-color: rgba(235, 75, 75, .45);
  color: #eb4b4b;
}

.hds-wish.wished svg {
  fill: #eb4b4b;
  stroke: #eb4b4b;
}

.hds-view-link {
  font-family: var(--font-sora);
  font-size: .72rem;
  color: var(--text-3);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color .18s;
  margin-left: 4px;
}

.hds-view-link:hover {
  color: var(--c);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .hds-slide {
    grid-template-columns: 280px 1fr;
  }

  .hds-info-col {
    padding: 32px 32px 32px 28px;
    gap: 10px;
  }
}

@media (max-width: 680px) {
  .hds-slide {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .hds-img-col {
    padding: 28px 28px 20px;
    max-height: 200px;
  }

  .hds-img-col::after {
    display: none;
  }

  .hds-img-frame {
    max-width: 160px;
  }

  .hds-info-col {
    padding: 0 24px 32px;
    gap: 10px;
  }

  .hds-slide-deco {
    font-size: 7rem;
  }

  .hds-buy {
    padding: 12px 20px;
  }
}

/* ══════════════════════════════════════════════
   MOBILE RESPONSIVE — BURGER + DRAWER + SIDEBAR + STICKY
══════════════════════════════════════════════ */

/* ── BURGER BUTTON ── */
.hdr-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  flex-shrink: 0;
}

.hdr-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-1);
  transition: transform .3s ease, opacity .3s ease;
  transform-origin: center;
}

.hdr-burger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hdr-burger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hdr-burger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── MOBILE NAV OVERLAY ── */
.mob-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  z-index: 9990;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.mob-nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ── MOBILE NAV DRAWER ── */
.mob-nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(320px, 85vw);
  height: 100%;
  background: #050e1e;
  border-left: 1px solid rgba(0, 212, 255, .12);
  z-index: 9991;
  display: flex;
  flex-direction: column;
  padding: 72px 28px 40px;
  gap: 0;
  transition: right .35s cubic-bezier(.22, .68, 0, 1.2);
  overflow-y: auto;
}

.mob-nav.open {
  right: 0;
}

.mob-nav-link {
  display: block;
  padding: 15px 0;
  font-family: var(--font-syne);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-2);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  text-decoration: none;
  transition: color .2s;
}

.mob-nav-link:hover,
.mob-nav-link.active {
  color: var(--c);
}

.mob-nav-steam {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #1b2838, #2a475e);
  border: 1px solid #4a90c0;
  font-family: var(--font-syne);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  text-decoration: none;
  transition: border-color .2s;
}

.mob-nav-steam:hover {
  border-color: var(--c);
}

.mob-nav-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: 8px;
  line-height: 0;
  transition: color .2s;
}

.mob-nav-close:hover {
  color: var(--text-1);
}

@media (max-width: 768px) {
  .hdr-burger {
    display: flex;
  }

  .hdr-steam-desk {
    display: none;
  }
}

/* ── SHOP FILTER TOGGLE BUTTON ── */
.shop-filter-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--text-2);
  font-family: var(--font-syne);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  margin-bottom: 20px;
}

.shop-filter-toggle:hover,
.shop-filter-toggle[aria-expanded="true"] {
  border-color: var(--c);
  color: var(--c);
}

@media (max-width: 900px) {
  .shop-filter-toggle {
    display: flex;
  }

  /* Sidebar hidden by default on mobile; shown when .open */
  .shop-sidebar {
    display: none !important;
  }

  .shop-sidebar.open {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .shop-sidebar.open {
    grid-template-columns: 1fr !important;
  }
}

/* ── STICKY BUY BAR (Product page) ── */
.pdp-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: rgba(5, 14, 30, .97);
  border-top: 1px solid rgba(0, 212, 255, .18);
  padding: 12px 20px;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.22, .68, 0, 1.2);
  display: none;
}

.pdp-sticky-cta.visible {
  transform: translateY(0);
}

.pdp-sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 680px;
  margin: 0 auto;
}

.pdp-sticky-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pdp-sticky-name {
  font-family: var(--font-syne);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdp-sticky-price {
  font-family: var(--font-syne);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--c);
}

.pdp-sticky-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #004d6e, #006d99);
  border: 1px solid var(--c-border);
  font-family: var(--font-syne);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
  white-space: nowrap;
}

.pdp-sticky-btn:hover {
  background: linear-gradient(135deg, #005f88, #0088bb);
  border-color: var(--c);
}

@media (max-width: 768px) {
  .pdp-sticky-cta {
    display: block;
  }
}

/* ── PROMO BLOCK MOBILE REORDER ── */
@media (max-width: 768px) {
  .logo img {
    height: 32px;
  }

  .promo-new {
    overflow: visible;
    align-items: flex-start;
  }

  .promo-ak-img {
    display: block !important;
    position: static !important;
    width: auto;
    max-width: 200px;
    height: auto;
    /* margin: -20px auto 8px; */
    order: -1;
    animation: none !important;
    transform: none !important;
  }

  .promo-left-new {
    order: 2;
  }

  .promo-right-new {
    order: 1;
  }
}

/* ── HERO RIGHT VISIBLE ON MOBILE ── */
@media (max-width: 1200px) {
  .hero-right-new {
    display: flex;
  }
}

@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .hero-right-new {
    display: flex;
    gap: 16px;
  }

  .hero-sub-new {
    font-size: clamp(14px, 3.5vw, 18px);
  }
}

/* ── TEXT SIZE FIXES FOR MOBILE ── */
@media (max-width: 768px) {
  .hero-title-new {
    font-size: clamp(36px, 9vw, 60px) !important;
  }

  .page-band-title {
    font-size: clamp(24px, 6vw, 40px);
  }

  .sec-title {
    font-size: clamp(20px, 5vw, 32px);
  }

  .sec-title-figma {
    font-size: clamp(20px, 5vw, 32px);
  }

  .hds-name {
    font-size: clamp(16px, 4vw, 26px);
  }

  .hds-old-price,
  .hds-price {
    font-size: clamp(16px, 4vw, 24px);
  }

  .pdp-name {
    font-size: clamp(18px, 5vw, 32px);
  }

  .shop-toolbar {
    flex-wrap: wrap;
    gap: 10px;
  }

  .shop-cats-row {
    order: 2;
    width: 100%;
  }

  .shop-count {
    order: 3;
  }

  .shop-sort-select {
    order: 1;
  }
}

@media (max-width: 480px) {
  .hero-title-new {
    font-size: clamp(28px, 8vw, 48px) !important;
  }

  .hds-slide {
    min-height: auto;
  }

  .pdp-layout {
    gap: 24px;
  }

  .pdp-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pdp-ctas {
    flex-direction: column;
  }

  .pdp-buy-btn,
  .pdp-wish-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── SHOP-MAIN MIN-WIDTH FIX (prevents grid overflow on mobile) ── */
.shop-main {
  min-width: 0;
  width: 100%;
}

.shop-layout {
  max-width: 100%;
}

/* ── FAQ STAGGER: show items 7+ that had no nth-child rule ── */
.faq-wrap.vis .faq-item {
  opacity: 1;
  transform: none;
  transition-delay: 0.5s;
}

/* ── PREVENT SHOP HORIZONTAL OVERFLOW ON MOBILE ── */
@media (max-width: 900px) {
  .shop-main {
    overflow-x: hidden;
  }

  .shop-grid {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .shop-cats-row {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
}

/* ══════════════════════════════════════════════
   SHOP TOOLBAR: CATS-ROW ALWAYS ON ITS OWN FULL-WIDTH LINE
══════════════════════════════════════════════ */
.shop-sort-select {
  order: 1;
}

.shop-count {
  order: 1;
}

.shop-cats-row {
  order: 2;
  flex-basis: 100%;
  width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.shop-cats-row::-webkit-scrollbar {
  display: none;
}

/* ══════════════════════════════════════════════
   PAGE-BAND H1 — UNIFIED WITH HERO TITLE STYLE
══════════════════════════════════════════════ */
.page-band-title {
  font-size: clamp(44px, 5.5vw, 80px);
  font-weight: 700;
  letter-spacing: -1.64px;
  line-height: 1.1;
  color: #e8f4ff;
  margin-top: 0;
  animation: fadeUp .8s .15s ease both;
}

/* FAQ page H1 — centred hero-style heading */
.faq-hero-title {
  font-family: var(--font-syne);
  font-size: clamp(44px, 5.5vw, 80px);
  font-weight: 700;
  letter-spacing: -1.64px;
  line-height: 1.1;
  text-transform: uppercase;
  color: #e8f4ff;
  margin-bottom: 20px;
  animation: fadeUp .8s .15s ease both;
}

@media (max-width: 768px) {
  .page-band-title {
    font-size: clamp(36px, 9vw, 60px);
  }

  .faq-hero-title {
    font-size: clamp(32px, 8vw, 52px);
  }
}

@media (max-width: 480px) {

  .page-band-title,
  .faq-hero-title {
    font-size: clamp(28px, 8vw, 44px);
    letter-spacing: -1px;
  }
}

/* ══════════════════════════════════════════════
   ABOUT-HEADING — UNIFIED WITH HERO TITLE STYLE
══════════════════════════════════════════════ */
.about-heading {
  font-size: clamp(44px, 5.5vw, 80px);
  font-weight: 700;
  letter-spacing: -1.64px;
  line-height: 1.1;
  color: #e8f4ff;
  animation: fadeUp .8s .15s ease both;
}

@media (max-width: 768px) {
  .about-heading {
    font-size: clamp(36px, 9vw, 60px);
  }
}

@media (max-width: 480px) {
  .about-heading {
    font-size: clamp(28px, 8vw, 44px);
    letter-spacing: -1px;
  }
}

.cart-empty .woocommerce-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 96px 0;
  border-top-color: transparent;
  text-align: center;
  background-color: transparent;
  color: #8aa4c0;
}

/* ══════════════════════════════════════════════
   CONTACT FORM 7 — СТИЛИ КАК У КАСТОМНОГО ВИДЖЕТА
   ══════════════════════════════════════════════ */

/* Обертка формы CF7 */
.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Контейнер формы */
.contact-form-wrap-cf7 {
  background: rgba(0, 8, 22, .5);
  border: 1px solid rgba(0, 212, 255, .1);
  padding: 40px 44px;
}

/* Success/Error сообщения */
.wpcf7-response-output {
  background: rgba(0, 8, 22, .5);
  border: 1px solid rgba(0, 212, 255, .1) !important;
  color: var(--text-2);
  padding: 20px !important;
  margin: 0 0 20px 0 !important;
  text-align: center;
}

.wpcf7-not-valid-tip {
  color: #eb4b4b !important;
  font-family: var(--font-sora);
  font-size: .72rem;
  margin-top: 5px;
}

/* Группы полей */
.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Строки (две колонки) */
.wpcf7-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 0;
}

/* Группа поля */
.wpcf7-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Стилизация лейблов как в кастомном виджете */
.wpcf7-form label {
  font-family: var(--font-syne);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* Обязательная звездочка */
.wpcf7-form .form-required {
  color: var(--c);
}

/* Опциональная метка */
.wpcf7-form .form-optional {
  color: var(--text-3);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Инпуты, селекты, текстэрии */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--text-1);
  font-family: var(--font-sora);
  font-size: .88rem;
  padding: 12px 16px;
  outline: none;
  transition: border-color .2s, background .2s;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  border-color: var(--c);
  background: rgba(0, 212, 255, .03);
}

/* Стилизация селекта */
.wpcf7-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238aa4c0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* Текстэрия */
.wpcf7-form textarea {
  resize: vertical;
  min-height: 120px;
}

/* Футер формы */
.wpcf7-form .contact-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 4px;
  flex-wrap: wrap;
}

/* Текст с политикой */
.wpcf7-form .contact-form-note {
  font-size: .72rem;
  color: var(--text-3);
  line-height: 1.6;
  max-width: 280px;
  margin: 0;
}

.wpcf7-form .contact-form-note a {
  color: var(--text-2);
  text-decoration: underline;
  transition: color .2s;
}

.wpcf7-form .contact-form-note a:hover {
  color: var(--c);
}

/* Кнопка отправки */
.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #eb4b4b, #c73a3a);
  border: none;
  font-family: var(--font-syne);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
}

.wpcf7-submit:hover {
  opacity: .88;
  transform: translateY(-1px);
}

/* Иконка после кнопки (добавляется через псевдоэлемент) */


.wpcf7-submit:hover::after {
  transform: translateX(4px);
}

/* Спиннер при отправке */
.wpcf7-spinner {
  display: inline-block;
  margin: 0 10px;
}

/* Адаптив */
@media (max-width: 768px) {
  .wpcf7-form .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .wpcf7-form .contact-form-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-form-wrap-cf7 {
    padding: 28px 24px;
  }
}

/* Стили для валидации */
.wpcf7-form .wpcf7-not-valid {
  border-color: #eb4b4b !important;
}

.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
  border-color: #eb4b4b;
}

.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #4a6080;
  font-family: var(--font-sora);
  font-size: 0.88rem;
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.wpcf7-submit {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  padding: 14px 30px !important;
  background: linear-gradient(135deg, var(--c), var(--c2)) !important;
  border-radius: 0;
  font-family: var(--font-u) !important;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #001822 !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  box-shadow: 0 8px 28px rgba(0, 212, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
  transition: all var(--dur) var(--ease) !important;
  position: relative;
  overflow: hidden !important;
}

.wpcf7-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, transparent 100%);
  opacity: 0;
  transition: opacity .2s;
}

.contact-form-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Убираем точки у всех списков в футере */
.footer-links {
  list-style: none;
  /* убирает маркеры (точки/цифры) */
  padding-left: 0;
  /* убирает стандартный отступ слева */
  margin: 0;
  /* убирает стандартные отступы */
}

/* Для полной уверенности — убираем и у самих элементов списка */
.footer-links li {
  list-style: none;
}

.woocommerce form .form-row .input-text {
  width: 100%;
  background: var(--bg3);
  border: 1px solid rgba(0, 212, 255, .1);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 13px 44px 13px 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  -webkit-appearance: none;
  border-radius: 0;
}

.woocommerce-account .woocommerce-MyAccount-content{
    width:100% !important;
}
.woo-commerce-subscription-opt-in {
  display: block;
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 6px;
}

.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox,
label[data-automation-id="woo-commerce-subscription-opt-in"] {
  display: flex !important;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 6px;
  cursor: pointer;
  width: fit-content;
}

/* Стилизация самого инпута (делаем меньше и в стиле сайта) */
.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox input[type="checkbox"],
label[data-automation-id="woo-commerce-subscription-opt-in"] input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 0;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

/* Состояние checked */
.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox input[type="checkbox"]:checked,
label[data-automation-id="woo-commerce-subscription-opt-in"] input[type="checkbox"]:checked {
  background: var(--accent, #00d4ff);
  border-color: var(--accent, #00d4ff);
}

/* Галочка */
.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox input[type="checkbox"]:checked::after,
label[data-automation-id="woo-commerce-subscription-opt-in"] input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 8px;
  border: solid #03080f;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Ховер состояние */
.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox input[type="checkbox"]:hover,
label[data-automation-id="woo-commerce-subscription-opt-in"] input[type="checkbox"]:hover {
  border-color: var(--accent, #00d4ff);
}

/* Фокус состояние для доступности */
.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox input[type="checkbox"]:focus-visible,
label[data-automation-id="woo-commerce-subscription-opt-in"] input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent, #00d4ff);
  outline-offset: 2px;
}

/* Текст чекбокса — делаем меньше */
.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox span,
label[data-automation-id="woo-commerce-subscription-opt-in"] span {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text3);
}

.entry-footer {
  display: none;
}

/* ══════════════════════════════════════════════
   STICKY FOOTER — footer is outside .layout, body is the flex container
   Structure: body > .layout (flex:1) + footer (flex-shrink:0)
   ══════════════════════════════════════════════ */

body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  height: auto !important;
}

/* .layout grows to fill all space above footer */
.layout {
  flex: 1 0 auto !important;
  display: block !important;
  min-height: 0 !important;
}

/* footer stays at its natural height at the bottom */
footer {
  flex-shrink: 0 !important;
  margin-top: 0 !important;
}

/* shop grid — 2 columns on mobile (overrides Elementor widget inline responsive CSS) */
@media (max-width: 767px) {
  .shop-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
.nl-knife-img {
    left: -4%;
    }
@media(min-width:2000px){
    .nl-box{
    padding: 72px 80px 72px calc(30% + 60px);
    }
    
}
@media(min-width:768px) {
    #wishlistPage .figma-card{
        min-height: 280px;
    }
}

@media(max-width:960px){
    .wc-block-components-order-summary-item{
        padding:0 !important;
    }
    .wc-block-components-order-summary{
     padding:0 !important;   
    }
}

@media (max-width: 1000px) {
    .wc-block-checkout__main, .wc-block-checkout__sidebar, .wp-block-woocommerce-checkout-fields-block, .wp-block-woocommerce-checkout-totals-block {
        order: 0 !important;
        flex: auto ;
        width: 100%;
    }
}
@media (max-width: 1000px) {
    .wc-block-components-sidebar-layout {
        flex-direction: column;
    }
     .wc-block-components-sidebar-layout .wc-block-components-main{
        width:100% !important;
        padding-right:0 !important;
    }
    .wc-block-components-sidebar {
        width:100% !important;
    }
}
@media (max-width: 749px){
   
}

.wc-block-checkout__sidebar, .wp-block-woocommerce-checkout-totals-block, .wc-block-components-sidebar{
    flex: 0 0 45% !important;
}

/* ══════════════════════════════════════════════
   MY ACCOUNT PAGE
   WooCommerce .woocommerce-MyAccount-*
   ══════════════════════════════════════════════ */

/* ── Page wrapper: add top padding for fixed header ── */
.woocommerce-account .site-main,
.woocommerce-account #primary {
  padding-top: 94px;
  padding-bottom: 96px;
}

/* ── Hide default H1 (we show it inside the band) ── */
.woocommerce-account .entry-header {
  display: none;
}

/* ── Page band (title bar like shop/blog) ── */
.woocommerce-account .entry-content {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
}

@media (max-width: 768px) {
  .woocommerce-account .entry-content {
    padding: 0 20px;
  }
  .woocommerce-account .site-main,
  .woocommerce-account #primary {
    padding-top: 80px;
    padding-bottom: 64px;
  }
}

/* ── WooCommerce wrapper ── */
.woocommerce-account .woocommerce {
  display: grid;
  gap: 40px;
  align-items: start;
  padding-top: 40px;
}

@media (max-width: 900px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ══════════════════════════════════════════════
   SIDEBAR NAV
   ══════════════════════════════════════════════ */
.woocommerce-MyAccount-navigation {
  position: sticky;
  top: 100px;
  background: rgba(0, 8, 22, .55);
  border: 1px solid rgba(0, 212, 255, .1);
}

.woocommerce-account .woocommerce-MyAccount-navigation{
    width:100% !important;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-MyAccount-navigation li {
  list-style: none;
  border-bottom: 1px solid rgba(0, 212, 255, .07);
}

.woocommerce-MyAccount-navigation li:last-child {
  border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  font-family: var(--font-syne);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
  background: none;
  transition: color .2s, background .2s, padding-left .2s;
  position: relative;
}

.woocommerce-MyAccount-navigation li a::before {
  content: '→';
  font-size: .65rem;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  transform: translateX(-4px);
  color: var(--c);
}

.woocommerce-MyAccount-navigation li a:hover {
  color: var(--text-1);
  background: rgba(0, 212, 255, .04);
  padding-left: 24px;
}

.woocommerce-MyAccount-navigation li a:hover::before {
  opacity: .6;
  transform: translateX(0);
}

/* Active state */
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
  color: var(--c);
  background: rgba(0, 212, 255, .06);
  border-left: 2px solid var(--c);
  padding-left: 18px;
}

.woocommerce-MyAccount-navigation li.is-active a::before {
  opacity: 1;
  transform: translateX(0);
}

/* Log out — red tint */
.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: rgba(235, 75, 75, .65) !important;
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  color: #eb4b4b !important;
  background: rgba(235, 75, 75, .06) !important;
}

/* ══════════════════════════════════════════════
   MAIN CONTENT AREA
   ══════════════════════════════════════════════ */
.woocommerce-MyAccount-content {
  background: rgba(0, 8, 22, .45);
  border: 1px solid rgba(0, 212, 255, .08);
  padding: 36px 40px;
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

/* Top accent line */
.woocommerce-MyAccount-content::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c), rgba(0, 212, 255, .1));
  box-shadow: 0 0 12px rgba(0, 212, 255, .4);
}

/* Background glow */
.woocommerce-MyAccount-content::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 212, 255, .04) 0%, transparent 55%);
  pointer-events: none;
}

@media (max-width: 768px) {
  .woocommerce-MyAccount-content {
    padding: 24px 20px;
  }
}

/* ── Dashboard welcome text ── */
.woocommerce-MyAccount-content > p:first-of-type {
  font-family: var(--font-sora);
  font-size: .9rem;
  color: var(--text-2);
  line-height: 1.75;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.woocommerce-MyAccount-content > p:first-of-type strong {
  color: var(--c);
  font-weight: 700;
}

.woocommerce-MyAccount-content > p:first-of-type a {
  color: rgba(235, 75, 75, .8);
  font-size: .78rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(235, 75, 75, .25);
  transition: color .2s, border-color .2s;
}

.woocommerce-MyAccount-content > p:first-of-type a:hover {
  color: #eb4b4b;
  border-color: rgba(235, 75, 75, .6);
}

.woocommerce-MyAccount-content > p:last-of-type {
  font-family: var(--font-sora);
  font-size: .85rem;
  color: var(--text-2);
  line-height: 1.75;
  position: relative;
  z-index: 1;
}

.woocommerce-MyAccount-content > p:last-of-type a {
  color: var(--c);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 212, 255, .25);
  transition: border-color .2s;
}

.woocommerce-MyAccount-content > p:last-of-type a:hover {
  border-color: var(--c);
}

/* ── Dashboard quick-links grid (replaces plain paragraph links) ── */
.woocommerce-account-quick-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
  position: relative;
  z-index: 1;
}

/* ── Orders table ── */
.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sora);
  font-size: .82rem;
  position: relative;
  z-index: 1;
}

.woocommerce-orders-table thead tr {
  border-bottom: 1px solid rgba(0, 212, 255, .15);
}

.woocommerce-orders-table thead th {
  font-family: var(--font-syne);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c);
  padding: 12px 14px;
  text-align: left;
}

.woocommerce-orders-table tbody tr {
  border-bottom: 1px solid rgba(0, 212, 255, .05);
  transition: background .18s;
}

.woocommerce-orders-table tbody tr:hover {
  background: rgba(0, 212, 255, .03);
}

.woocommerce-orders-table tbody td {
  padding: 14px 14px;
  color: var(--text-2);
  vertical-align: middle;
}

.woocommerce-orders-table .order-number a {
  color: var(--c);
  font-weight: 700;
  font-family: var(--font-syne);
  text-decoration: none;
  letter-spacing: .06em;
}

.woocommerce-orders-table .order-number a:hover {
  text-decoration: underline;
}

/* Order status badges */
.woocommerce-orders-table .woocommerce-order-status-completed,
.woocommerce-orders-table .woocommerce-order-status-processing,
.woocommerce-orders-table .woocommerce-order-status-on-hold,
.woocommerce-orders-table .woocommerce-order-status-cancelled,
.woocommerce-orders-table .woocommerce-order-status-refunded {
  display: inline-block;
  font-family: var(--font-syne);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid;
}

.woocommerce-orders-table .woocommerce-order-status-completed {
  color: #00cc88; border-color: rgba(0, 204, 136, .35); background: rgba(0, 204, 136, .07);
}
.woocommerce-orders-table .woocommerce-order-status-processing {
  color: var(--c); border-color: rgba(0, 212, 255, .35); background: rgba(0, 212, 255, .07);
}
.woocommerce-orders-table .woocommerce-order-status-on-hold {
  color: #ddc800; border-color: rgba(221, 200, 0, .35); background: rgba(221, 200, 0, .07);
}
.woocommerce-orders-table .woocommerce-order-status-cancelled,
.woocommerce-orders-table .woocommerce-order-status-refunded {
  color: #eb4b4b; border-color: rgba(235, 75, 75, .35); background: rgba(235, 75, 75, .07);
}

/* View order button */
.woocommerce-orders-table .woocommerce-button.button.view {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  font-family: var(--font-syne);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c);
  background: rgba(0, 212, 255, .06);
  border: 1px solid rgba(0, 212, 255, .2);
  text-decoration: none;
  transition: background .2s, border-color .2s;
}

.woocommerce-orders-table .woocommerce-button.button.view:hover {
  background: rgba(0, 212, 255, .12);
  border-color: var(--c);
}

/* No orders message */
.woocommerce-MyAccount-content .woocommerce-message {
  font-family: var(--font-sora);
  font-size: .85rem;
  color: var(--text-2);
  padding: 20px 0;
  border-top: 1px solid rgba(0, 212, 255, .07);
  border-bottom: 1px solid rgba(0, 212, 255, .07);
  background: none;
}

.woocommerce-MyAccount-content .woocommerce-message::before {
  display: none;
}

/* ── Edit account / address forms ── */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm,
.woocommerce-MyAccount-content .woocommerce-address-fields {
  position: relative;
  z-index: 1;
}

.woocommerce-MyAccount-content fieldset {
  border: 1px solid rgba(0, 212, 255, .1);
  padding: 24px 28px;
  margin: 0 0 28px;
}

.woocommerce-MyAccount-content fieldset legend {
  font-family: var(--font-syne);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c);
  padding: 0 10px;
}

.woocommerce-MyAccount-content .form-row {
  margin-bottom: 18px;
}

.woocommerce-MyAccount-content .form-row label {
  display: block;
  font-family: var(--font-syne);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 8px;
}

.woocommerce-MyAccount-content .form-row .input-text,
.woocommerce-MyAccount-content .form-row select {
  width: 100%;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .09);
  color: var(--text-1);
  font-family: var(--font-sora);
  font-size: .88rem;
  padding: 12px 14px;
  outline: none;
  transition: border-color .2s, background .2s;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

.woocommerce-MyAccount-content .form-row .input-text:focus,
.woocommerce-MyAccount-content .form-row select:focus {
  border-color: rgba(0, 212, 255, .45);
  background: rgba(0, 212, 255, .03);
}

.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  background: linear-gradient(135deg, var(--c), var(--c2));
  border: none;
  font-family: var(--font-syne);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #001822;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
  border-radius: 0;
  box-shadow: 0 6px 24px rgba(0, 212, 255, .35);
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover {
  opacity: .88;
  transform: translateY(-1px);
}

/* ── Downloads ── */
.woocommerce-MyAccount-content .woocommerce-table--order-downloads {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sora);
  font-size: .82rem;
  position: relative;
  z-index: 1;
}

.woocommerce-MyAccount-content .woocommerce-table--order-downloads th {
  font-family: var(--font-syne);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c);
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 212, 255, .15);
}

.woocommerce-MyAccount-content .woocommerce-table--order-downloads td {
  padding: 12px 14px;
  color: var(--text-2);
  border-bottom: 1px solid rgba(0, 212, 255, .05);
}

.woocommerce-MyAccount-content .woocommerce-table--order-downloads a {
  color: var(--c);
  text-decoration: none;
  transition: opacity .2s;
}

.woocommerce-MyAccount-content .woocommerce-table--order-downloads a:hover {
  opacity: .75;
}

/* ── Address blocks ── */
.woocommerce-MyAccount-content .woocommerce-column__title {
  font-family: var(--font-syne);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c);
  margin-bottom: 14px;
}

.woocommerce-MyAccount-content address {
  font-family: var(--font-sora);
  font-size: .84rem;
  color: var(--text-2);
  line-height: 1.75;
  font-style: normal;
}

.woocommerce-MyAccount-content .woocommerce-Address-title .edit {
  font-family: var(--font-syne);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-left: 12px;
  transition: color .2s;
}

.woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover {
  color: var(--c);
}

/* Addresses grid layout */
.woocommerce-MyAccount-content .col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.woocommerce-MyAccount-content .col2-set .col-1,
.woocommerce-MyAccount-content .col2-set .col-2 {
  background: rgba(0, 8, 22, .4);
  border: 1px solid rgba(0, 212, 255, .07);
  padding: 22px 24px;
}

@media (max-width: 640px) {
  .woocommerce-MyAccount-content .col2-set {
    grid-template-columns: 1fr;
  }
}

/* ── Notices wrapper ── */
.woocommerce-notices-wrapper {
  position: relative;
  z-index: 1;
}

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
  font-family: var(--font-sora);
  font-size: .82rem;
  padding: 12px 16px;
  margin-bottom: 20px;
  list-style: none;
  border-top: none !important;
  border-radius: 0;
}

.woocommerce-notices-wrapper .woocommerce-message {
  background: rgba(0, 204, 136, .07);
  border: 1px solid rgba(0, 204, 136, .25) !important;
  color: #00cc88;
}

.woocommerce-notices-wrapper .woocommerce-info {
  background: rgba(0, 212, 255, .07);
  border: 1px solid rgba(0, 212, 255, .25) !important;
  color: var(--c);
}

.woocommerce-notices-wrapper .woocommerce-error {
  background: rgba(235, 75, 75, .07);
  border: 1px solid rgba(235, 75, 75, .25) !important;
  color: #eb4b4b;
}

.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error li::before {
  display: none;
}

/* ── Account page title band ── */
.woocommerce-account .entry-content::before {
  content: 'MY ACCOUNT';
  display: block;
  font-family: var(--font-syne);
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 700;
  letter-spacing: -1.64px;
  color: #e8f4ff;
  line-height: 1;
  padding: 40px 0 36px;
  border-bottom: 1px solid rgba(0, 212, 255, .07);
  margin-bottom: 0;
  animation: fadeUp .7s .1s ease both;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .woocommerce-MyAccount-navigation {
    position: static;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border: 1px solid rgba(0, 212, 255, .1);
  }

  .woocommerce-MyAccount-navigation::-webkit-scrollbar {
    display: none;
  }

  .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-direction: row;
    min-width: max-content;
  }

  .woocommerce-MyAccount-navigation li {
    border-bottom: none;
    border-right: 1px solid rgba(0, 212, 255, .07);
    flex-shrink: 0;
  }

  .woocommerce-MyAccount-navigation li:last-child {
    border-right: none;
  }

  .woocommerce-MyAccount-navigation li a {
    padding: 12px 16px;
    white-space: nowrap;
  }

  .woocommerce-MyAccount-navigation li a:hover {
    padding-left: 16px;
  }

  .woocommerce-MyAccount-navigation li.is-active a {
    border-left: none;
    border-bottom: 2px solid var(--c);
    padding-left: 16px;
  }
}
@media(max-width:768px) {
.elementor-97 .elementor-element.elementor-element-9ed2868 .reviews-grid{
    display: flex;
    flex-direction: column;
}
}
.cats-new .cat-new{
        min-height: 100px;
}
.elementor-12 .elementor-element.elementor-element-15609e9{
    padding: 10px !important;
}
.wc-block-components-sidebar{
    padding-left:0 !important;
}

/* ── WISHLIST PAGE: карточки без фиксированной высоты ── */
#wishlistPage .figma-card {
    height: auto;
}

#wishlistPage .figma-card-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ══════════════════════════════════════════════
   STATS BLOCK — CUSTOM (Elementor widget variant)
   Mirrors .stats-block-inner visuals + stagger
   ══════════════════════════════════════════════ */

.stats-block-inner-custom {
  border: 1px solid rgba(0, 212, 255, .14);
  background: rgba(0, 8, 22, .7);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}

.stats-block-inner-custom::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 212, 255, .06) 0%, transparent 50%);
  pointer-events: none;
}

.stats-block-inner-custom::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  box-shadow: 0 0 12px var(--c-glow);
}

/* Разделители между ячейками */
.stats-block-inner-custom .stat-item {
  border-right: 1px solid rgba(0, 212, 255, .08);
}

.stats-block-inner-custom .stat-item:last-child {
  border-right: none;
}

/* Адаптив: убираем border-right, добавляем border-bottom */
@media (max-width: 768px) {
  .stats-block-inner-custom .stat-item {
    border-right: none;
    border-bottom: 1px solid rgba(0, 212, 255, .08);
  }

  .stats-block-inner-custom .stat-item:nth-child(odd) {
    border-right: 1px solid rgba(0, 212, 255, .08);
  }

  .stats-block-inner-custom .stat-item:last-child,
  .stats-block-inner-custom .stat-item:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
  }
}

@media (max-width: 480px) {
  .stats-block-inner-custom .stat-item {
    border-right: none;
    border-bottom: 1px solid rgba(0, 212, 255, .08);
  }

  .stats-block-inner-custom .stat-item:last-child {
    border-bottom: none;
  }
}

/* Stagger-анимация (зеркало .stats-block-inner.vis) */
.stats-block-inner-custom .stat-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, .68, 0, 1.2), background .3s;
}

.stats-block-inner-custom.vis .stat-item:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: .04s;
}

.stats-block-inner-custom.vis .stat-item:nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: .12s;
}

.stats-block-inner-custom.vis .stat-item:nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: .20s;
}

.stats-block-inner-custom.vis .stat-item:nth-child(4) {
  opacity: 1;
  transform: none;
  transition-delay: .28s;
}

/* Поддержка > 4 ячеек */
.stats-block-inner-custom.vis .stat-item:nth-child(5) {
  opacity: 1;
  transform: none;
  transition-delay: .36s;
}

.stats-block-inner-custom.vis .stat-item:nth-child(6) {
  opacity: 1;
  transform: none;
  transition-delay: .44s;
}

.stats-block-inner-custom.vis .stat-item:nth-child(7) {
  opacity: 1;
  transform: none;
  transition-delay: .52s;
}

.stats-block-inner-custom.vis .stat-item:nth-child(8) {
  opacity: 1;
  transform: none;
  transition-delay: .60s;
}
/* ══════════════════════════════════════════════
   FIX: Stats widget container height override
   ══════════════════════════════════════════════ */
.elementor-widget-samurai_home_features .elementor-widget-container {
    height: auto !important;
    min-height: 0 !important;
    position: static !important;
}

.elementor-widget-samurai_home_features {
    height: auto !important;
    min-height: 0 !important;
}

/* ══════════════════════════════════════
   FIX: figma-cards-grid на мобиле
   Elementor обрезает контейнер, контент
   вытекает вниз и перекрывает соседние
   секции. Переключаем на 1 колонку.
   ══════════════════════════════════════ */
@media (max-width: 767px) {
  .figma-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Убираем фиксированный aspect-ratio spacer на мобиле —
     пусть карточка сама определяет высоту по контенту */
  .figma-card-spacer {
    padding-bottom: 0 !important;
    height: 160px !important;
  }

  .figma-card-img {
    position: relative !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-height: 160px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .figma-card-foot {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    text-align: center !important;
    padding: 8px !important;
    width: 100% !important;
  }
}

.wc-block-components-totals-wrapper:empty,
.wp-block-woocommerce-checkout-order-summary-discount-block:empty,
.wp-block-woocommerce-checkout-order-summary-fee-block:empty,
.wp-block-woocommerce-checkout-order-summary-shipping-block:empty {
    display: none !important;
}

/* Убираем border у пустых wrapper-ов */
.wp-block-woocommerce-checkout-order-summary-discount-block,
.wp-block-woocommerce-checkout-order-summary-fee-block,
.wp-block-woocommerce-checkout-order-summary-shipping-block {
    display: none !important;
}

/* Footer item — убираем все borders */
.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    border: none !important;
}

/* Убираем padding-bottom у блока totals */
.wp-block-woocommerce-checkout-order-summary-totals-block {
    padding-bottom: 0 !important;
}

.wc-block-components-totals-coupon{
    border: none !important;
}

/* 
   FIX: Stats widget - с минимальным !important только для растяжения
*/

/* Только самое главное свойство с !important */
.stats-block-inner-custom .stat-item {
    width: 100% !important;
    box-sizing: border-box;
}

/* Остальное без !important */
.elementor-widget-samurai_home_features .elementor-widget-container {
    width: 100%;
}

.stats-block-inner-custom {
    width: 100%;
}

/* FIX: Stats widget - ПРАВИЛЬНОЕ РЕШЕНИЕ */
.elementor-element-7ba6925 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.stats-block {
    width: 100% !important;
    margin: 0 !important;
}

.stats-block .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.stats-block-inner-custom {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
}

.stats-block-inner-custom .stat-item {
    width: 100% !important;
    min-width: 0 !important;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .stats-block-inner-custom {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .stats-block-inner-custom {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}


/* Альтернатива без :has() */
.elementor-element-7ba6925 .e-con-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.elementor-element-4ed6695 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}

.elementor-element-4ed6695 .elementor-widget-container {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .figma-card {
        align-items: center !important;
    }
    
    .figma-card-img-wrap {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .figma-card-img {
        margin: 0 auto !important;
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
    }
}