/* ============================================================
   HYPER · v2 — editorial / brutalist refinements (overrides)
   Layered ON TOP of styles.css. Removing this file = rollback.
   ============================================================ */

/* ---------- 1 · Hero: ghost wordmark + editorial frame ---------- */
.hero { padding-top: 140px; }

/* corner crosshairs around hero shell */
.hero .shell { position: relative; }
.hero .shell::before,
.hero .shell::after {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  pointer-events: none;
  opacity: .55;
  background:
    linear-gradient(to right, var(--red) 0 18px, transparent 18px) top left / 18px 1px no-repeat,
    linear-gradient(to bottom, var(--red) 0 18px, transparent 18px) top left / 1px 18px no-repeat;
}
.hero .shell::before { top: 0; left: 0; }
.hero .shell::after {
  top: 0; right: 0;
  transform: scaleX(-1);
}
/* bottom corner crosshairs via hero-grid */
.hero-grid { position: relative; }
.hero-grid::before,
.hero-grid::after {
  content: '';
  position: absolute;
  bottom: -16px;
  width: 28px; height: 28px;
  pointer-events: none;
  opacity: .55;
  background:
    linear-gradient(to right, var(--red) 0 18px, transparent 18px) bottom left / 18px 1px no-repeat,
    linear-gradient(to bottom, transparent 0 10px, var(--red) 10px 28px) bottom left / 1px 18px no-repeat;
}
.hero-grid::before { left: 0; }
.hero-grid::after  { right: 0; transform: scaleX(-1); }

/* giant ghost wordmark behind hero (editorial backdrop) */
.hero::after {
  content: 'ХАЙПЕР';
  position: absolute;
  left: 50%; bottom: 4%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(120px, 22vw, 320px);
  letter-spacing: -0.06em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.05);
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
  user-select: none;
}

/* tighter meta with vertical divider hairlines */
.hero-meta {
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  margin-top: 12px;
  width: 100%;
  max-width: 720px;
  margin-left: auto; margin-right: auto;
}
.hero-meta > div {
  flex: 1;
  justify-content: center;
  padding: 0 14px;
  border-right: 1px solid var(--line);
}
.hero-meta > div:last-child { border-right: none; }
.hero-meta .num { font-size: 22px; font-weight: 700; }

/* ---------- 2 · Section heads: scultural block-marker ---------- */
.sec-num {
  font-size: 12px;
  letter-spacing: 0.24em;
  font-weight: 600;
  padding: 10px 0 12px;
  border-top: 1px solid var(--red);
  margin-bottom: 32px;
  width: fit-content;
  padding-right: 28px;
  position: relative;
}
.sec-num::before {
  content: '';
  position: absolute;
  top: -1px; right: 0;
  width: 8px; height: 8px;
  background: var(--red);
  transform: translateY(-50%);
}
.sec-num::after { display: none; }

/* ---------- 3 · Logos: marquee + sharper hover ---------- */
.logos { padding: 56px 0 44px; }
.logos-head { margin-bottom: 24px; }
.logos-label {
  color: var(--red);
  position: relative;
  padding-left: 16px;
}
.logos-label::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 8px;
  background: var(--red);
  transform: translateY(-50%);
}
.logo-cell {
  position: relative;
  overflow: visible;   /* tiles slide past their box during the assemble/scatter */
}
.logo-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(var(--red-glow), 0.14), transparent 60%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.logo-cell:hover::before { opacity: 1; }
.logo-cell::after {
  /* tiny crosshair tick in corner on hover */
  content: '';
  position: absolute;
  left: 12px; top: 12px;
  width: 10px; height: 10px;
  background:
    linear-gradient(to right, var(--red) 0 8px, transparent 8px) top left / 8px 1px no-repeat,
    linear-gradient(to bottom, var(--red) 0 8px, transparent 8px) top left / 1px 8px no-repeat;
  opacity: 0;
  transition: opacity .35s ease;
}
.logo-cell:hover::after { opacity: 1; }

/* ---------- 4 · Bento: ghost-number in featured + corner brackets ---------- */
.db-card { transition: background .35s ease, transform .35s ease; }
.db-card:hover { transform: translateY(-2px); }

/* tiny corner brackets on every card (always visible, brighter on hover) */
.db-card > .db-corner { opacity: .28; }
.db-card:hover > .db-corner { opacity: 1; }
.db-card .db-corner::before,
.db-card .db-corner::after { background: var(--ink-3); transition: background .3s; }
.db-card:hover .db-corner::before,
.db-card:hover .db-corner::after { background: var(--red); }

/* ghost-number behind featured card */
.db-card.is-featured { overflow: hidden; }
.db-card.is-featured::after {
  content: '01';
  position: absolute;
  right: -8px; bottom: -38px;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(160px, 18vw, 260px);
  letter-spacing: -0.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--red-glow), 0.18);
  pointer-events: none;
  z-index: 0;
  user-select: none;
  background-image: none;
  background-size: auto;
  opacity: 1;
  transition: -webkit-text-stroke-color .4s;
}
.db-card.is-featured:hover::after {
  -webkit-text-stroke-color: rgba(var(--red-glow), 0.42);
}
.db-card.is-featured .db-feat-mark { display: none; }

/* ---------- 5 · Services: editorial category strip ---------- */
.svc-cat { position: relative; }
.svc-cat-head { position: relative; }
.svc-cat-head::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 3px; height: 22px;
  background: var(--red);
}
.svc-cat-idx { padding-left: 14px; }
.svc-cat-name { padding-left: 14px; }

/* subtle category bg tint based on idx */
.tariff.is-accent {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--red-glow),0.08), transparent 55%),
    linear-gradient(180deg, rgba(var(--red-glow),0.04), rgba(var(--red-glow),0));
}
.tariff.is-accent .tariff-name { color: var(--ink); }

/* ---------- 6 · Channels: spotlight + bold first column ---------- */
.channels-table { position: relative; }
.ch-col {
  position: relative;
  overflow: hidden;
  transition: background .35s ease;
}
.ch-col::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(var(--red-glow), 0.10), transparent 55%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.ch-col:hover::before { opacity: 1; }
.ch-col:hover .ch-name { color: var(--ink); }
.ch-col:hover .ch-idx { letter-spacing: 0.28em; transition: letter-spacing .35s ease; }
.ch-name { transition: color .3s ease; }

.ch-col-head {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent);
}
.ch-col-head::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px; width: 0;
  background: var(--red);
  transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.ch-col:hover .ch-col-head::after { width: 100%; }

/* row hover: pull dt to left, brighten dd */
.ch-row { transition: padding-left .35s ease; }
.ch-col:hover .ch-row:hover { padding-left: 24px; background: rgba(var(--red-glow), 0.03); }

/* ---------- 7 · Cases: editorial corner brackets on media ---------- */
.cp-media { position: relative; }
.cp-media::before,
.cp-media::after {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  pointer-events: none;
  z-index: 3;
}
.cp-media::before {
  top: 18px; left: 18px;
  background:
    linear-gradient(to right, var(--red) 0 18px, transparent 18px) top left / 18px 1px no-repeat,
    linear-gradient(to bottom, var(--red) 0 18px, transparent 18px) top left / 1px 18px no-repeat;
}
.cp-media::after {
  bottom: 18px; right: 18px;
  background:
    linear-gradient(to right, transparent 0 10px, var(--red) 10px 28px) bottom right / 28px 1px no-repeat,
    linear-gradient(to bottom, transparent 0 10px, var(--red) 10px 28px) bottom right / 1px 28px no-repeat;
}

/* brand text — pull-it-out scale */
.cp-brand {
  font-weight: 800;
  letter-spacing: -0.045em;
  background: linear-gradient(180deg, var(--ink) 30%, rgba(244,244,244,0.55));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: letter-spacing .4s ease;
}
.case-preview:hover .cp-brand { letter-spacing: -0.04em; }

/* slightly more dramatic phone tilt depth */
.cp-phone {
  box-shadow:
    0 30px 70px -20px rgba(0,0,0,.7),
    0 10px 28px -10px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,0.04) inset;
}

/* ---------- 8 · Ticker: dual-row counter-rotating ---------- */
.ticker { padding: 14px 0; }
.ticker + .ticker-v2 { margin-top: 0; }
.ticker-v2 {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  overflow: hidden;
  background: var(--bg);
  position: relative; z-index: 2;
}
.ticker-v2 .ticker-track {
  display: flex; gap: 48px; white-space: nowrap;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  animation: ticker 70s linear infinite reverse;
  color: var(--ink-3);
}
.ticker-v2 .ticker-track .ti-w { color: var(--ink-2); font-weight: 500; }
.ticker-v2 .ticker-track .sep { color: var(--red); opacity: .8; }

/* ---------- 9 · Footer: giant vertical wordmark ---------- */
.foot {
  position: relative;
  padding: 80px 0 40px;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.foot::before {
  content: 'ХАЙПЕР · ХАЙПЕР · ХАЙПЕР · ХАЙПЕР';
  position: absolute;
  left: 0; right: 0; top: 0;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(80px, 14vw, 200px);
  letter-spacing: -0.05em;
  line-height: 0.9;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.05);
  pointer-events: none;
  user-select: none;
  transform: translateY(-22%);
  z-index: 0;
}
.foot .shell { position: relative; z-index: 2; }
.foot .row { padding-top: 60px; border-top: 1px solid var(--line); }

/* ---------- 10 · NAV refinements ---------- */
.nav-links a {
  position: relative;
  padding-left: 14px;
}
.nav-links a::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 4px; height: 4px;
  background: var(--ink-3);
  transform: translate(-2px, -50%);
  transition: background .25s, transform .25s;
}
.nav-links a:hover::before,
.nav-links a.is-active::before {
  background: var(--red);
  transform: translate(0, -50%);
}

/* ---------- 11 · Sticky CTA: tighter editorial chip ---------- */
.sticky-cta {
  border-radius: 0;
  border-width: 1px;
  background: var(--bg-2);
  box-shadow:
    0 6px 24px rgba(0,0,0,0.5),
    0 0 0 1px var(--red);
}
.sticky-cta::before {
  content: '01';
  font-family: var(--mono);
  font-size: 10px;
  color: var(--red);
  letter-spacing: 0.18em;
  padding-right: 10px;
  border-right: 1px solid var(--line);
  margin-right: 4px;
}

/* ---------- 12 · Section dividers: thin label line ---------- */
.sec { padding-top: 140px; padding-bottom: 140px; }

/* ---------- 13 · Eyebrow pulse — softer color ---------- */
.hero-eyebrow .eyebrow { color: var(--ink); letter-spacing: 0.22em; }

/* ---------- 14 · Reduced motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
  .ticker-track, .ticker-v2 .ticker-track { animation-duration: 300s; }
}

/* ---------- 15 · Mobile guards ---------- */
@media (max-width: 720px) {
  .hero::after { font-size: 100px; bottom: 2%; }
  .foot::before { font-size: 64px; }
  .hero-meta { flex-direction: column; gap: 12px; padding: 16px 0; }
  .hero-meta > div { border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
  .hero-meta > div:last-child { border-bottom: none; padding-bottom: 0; }
}