@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --accent:       #fc0172;
  --accent-glow:  rgba(252,1,114,0.28);
  --accent-dim:   rgba(252,1,114,0.10);
  --black:        #080808;
  --dark:         #111111;
  --grey-dark:    #2e2e2e;
  --grey-mid:     #666666;
  --grey-light:   #999999;
  --white:        #f5f5f5;
  --white-mid:    rgba(245,245,245,0.45);
  --white-dim:    rgba(245,245,245,0.06);

  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Montserrat', sans-serif;
  --font-mono:    'Space Mono', monospace;

  --ease-out:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  font-size: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  /* Prevents iOS Safari from zooming in on text */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--black);
  color: var(--white);
  min-height: 100svh;
  overflow-x: hidden;
  cursor: none;
  overscroll-behavior: none;
}

a   { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
::selection { background: var(--accent); color: var(--black); }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 2px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--accent); }

/* ── Grain overlay ─────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.03;
  pointer-events: none;
  z-index: 9000;
  will-change: transform;
  animation: grain .7s steps(1) infinite;
}
@keyframes grain {
  0%   { transform: translate(0,0);     }
  14%  { transform: translate(-2%,-3%); }
  28%  { transform: translate(3%,1%);   }
  42%  { transform: translate(-1%,4%);  }
  57%  { transform: translate(4%,-2%);  }
  71%  { transform: translate(-3%,2%);  }
  85%  { transform: translate(2%,-4%);  }
  100% { transform: translate(-1%,1%);  }
}

/* ── Custom Cursor ─────────────────────────────────────────── */
.c-dot {
  position: fixed;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  mix-blend-mode: difference;
}
.c-ring {
  position: fixed;
  width: 34px; height: 34px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  opacity: .55;
  transition:
    width   .35s var(--ease-out),
    height  .35s var(--ease-out),
    opacity .25s;
}
.c-ring.hover { width: 56px; height: 56px; opacity: 1; }
.c-ring.click { width: 22px; height: 22px; }

@media (hover: none) and (pointer: coarse) {
  .c-dot, .c-ring { display: none; }
  body            { cursor: auto; }
  a, button       { cursor: pointer; }
}

/* ── Background ────────────────────────────────────────────── */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bg__lines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,            transparent            3px,
    rgba(245,245,245,.012)  rgba(245,245,245,.012)  4px
  );
}
.bg__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.bg__glow--1 {
  width: 70vmax; height: 70vmax;
  top: -20vmax; left: -20vmax;
  background: radial-gradient(circle, rgba(252,1,114,.07) 0%, transparent 70%);
  animation: driftA 18s ease-in-out infinite alternate;
}
.bg__glow--2 {
  width: 50vmax; height: 50vmax;
  bottom: -15vmax; right: -10vmax;
  background: radial-gradient(circle, rgba(252,1,114,.05) 0%, transparent 70%);
  animation: driftB 22s ease-in-out infinite alternate;
}
@keyframes driftA {
  from { transform: translate(0,0) scale(1);        }
  to   { transform: translate(8vw,5vh) scale(1.12); }
}
@keyframes driftB {
  from { transform: translate(0,0) scale(1);          }
  to   { transform: translate(-6vw,-4vh) scale(1.08); }
}

.bg__circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(252,1,114,.12);
  top: 50%; left: 50%;
}
.bg__circle--1 {
  width: min(600px,90vmin); height: min(600px,90vmin);
  margin-top:  calc(min(600px,90vmin) / -2);
  margin-left: calc(min(600px,90vmin) / -2);
  animation: spinSlow 60s linear infinite;
}
.bg__circle--2 {
  width: min(380px,60vmin); height: min(380px,60vmin);
  margin-top:  calc(min(380px,60vmin) / -2);
  margin-left: calc(min(380px,60vmin) / -2);
  border-color: rgba(252,1,114,.07);
  animation: spinSlow 40s linear infinite reverse;
}
.bg__circle--3 {
  width: min(180px,30vmin); height: min(180px,30vmin);
  margin-top:  calc(min(180px,30vmin) / -2);
  margin-left: calc(min(180px,30vmin) / -2);
  border-color: rgba(252,1,114,.18);
  animation: spinSlow 25s linear infinite;
}
@keyframes spinSlow {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
.bg__crosshair {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .3;
  animation: chPulse 3s ease-in-out infinite;
}
.bg__crosshair::before,
.bg__crosshair::after {
  content: '';
  position: absolute;
  background: rgba(252,1,114,.2);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.bg__crosshair::before { width: 1px; height: 40px; }
.bg__crosshair::after  { width: 40px; height: 1px; }
@keyframes chPulse {
  0%,100% { opacity:.3; transform:translate(-50%,-50%) scale(1);   }
  50%     { opacity:.7; transform:translate(-50%,-50%) scale(1.4); }
}

/* ── Page shell ─────────────────────────────────────────────── */
.page {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* Clip — nothing overflows viewport */
  overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────── */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(16px,3.5vw,28px) clamp(20px,5vw,60px);
  flex-shrink: 0;
  opacity: 0;
  animation: fadeDown .8s .2s var(--ease-out) forwards;
}
@keyframes fadeDown {
  from { opacity:0; transform:translateY(-14px); }
  to   { opacity:1; transform:translateY(0);     }
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.logo__mark {
  width:  clamp(26px,5.5vw,38px);
  height: clamp(26px,5.5vw,38px);
  flex-shrink: 0;
}
.logo__text {
  font-family: var(--font-display);
  font-size: clamp(1rem,3.8vw,1.55rem);
  letter-spacing: .12em;
  white-space: nowrap;
}
.logo__text em { color: var(--accent); font-style: normal; }

.header__tag {
  font-family: var(--font-mono);
  font-size: clamp(.5rem,.8vw,.62rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey-mid);
  border: 1px solid var(--grey-dark);
  padding: 5px 11px;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(16px,3.5vh,56px) clamp(16px,5vw,72px);
  overflow: hidden;
  max-width: 100%;
}

/* ── Status pill ────────────────────────────────────────────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: clamp(.5rem,.85vw,.62rem);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(252,1,114,.3);
  background: var(--accent-dim);
  padding: 6px 15px 6px 13px;
  border-radius: 100px;
  max-width: calc(100vw - 32px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: clamp(16px,3.5vh,40px);
  opacity: 0;
  animation: fadeUp .7s .5s var(--ease-out) forwards;
}
.status-pill__dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink {
  0%,100% { opacity:1; }
  50%     { opacity:.3; }
}

/* ── Title Typography ───────────────────────────────────────── */
.title {
  font-family: var(--font-display);
  /* Базовый размер привязан к самой длинной строке (3-й) */
  font-size: clamp(24px, 6vw, 100px); 
  line-height: 1; 
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: clamp(16px, 3.5vw, 40px);
}

.title__line {
  display: block;
  white-space: nowrap;
  width: 100%;
}

/* Пропорционально увеличиваем короткие слова */
.title__line:nth-child(1) { font-size: 1.85em; } /* СОЗДАЁМ */
.title__line:nth-child(2) { font-size: 1.85em; } /* ИСТОРИЮ */
.title__line:nth-child(3) { font-size: 1em;    } /* КАДР ЗА КАДРОМ */

.title__line span {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  animation: slideUp .9s var(--ease-snap) forwards;
  max-width: 100%;
}

/* Цвета и анимации строк */
.title__line:nth-child(1) span { animation-delay: .6s; }
.title__line:nth-child(2) span { animation-delay: .75s; color: var(--accent); }
.title__line:nth-child(3) span {
  animation-delay: .9s;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(245,245,245,.25);
}

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

/* ── Tagline ────────────────────────────────────────────────── */
.tagline {
  font-size: clamp(.8rem,1.4vw,1rem);
  color: var(--white-mid);
  line-height: 1.85;
  max-width: min(520px,90vw);
  margin: 0 auto clamp(18px,3.5vw,52px);
  opacity: 0;
  animation: fadeUp .8s 1.1s var(--ease-out) forwards;
}
.tagline strong { color: var(--white); font-weight: 600; }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0);    }
}

/* ── Divider ────────────────────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(420px,88vw);
  margin: 0 auto clamp(16px,3.5vw,44px);
  opacity: 0;
  animation: fadeUp .7s 1.2s var(--ease-out) forwards;
}
.divider__line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg,transparent,rgba(245,245,245,.1));
}
.divider__line:last-child {
  background: linear-gradient(90deg,rgba(245,245,245,.1),transparent);
}
.divider__text {
  font-family: var(--font-mono);
  font-size: clamp(.44rem,.75vw,.56rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey-mid);
  white-space: nowrap;
}

/* ── CTA Buttons ────────────────────────────────────────────── */
.cta-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  width: min(300px,88vw);
  opacity: 0;
  animation: fadeUp .8s 1.35s var(--ease-out) forwards;
}

.cta-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: clamp(.55rem,.9vw,.67rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: 5px;
  overflow: hidden;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform  .22s var(--ease-out),
    box-shadow .22s var(--ease-out);
}
.cta-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  transition: left .5s var(--ease-out);
  pointer-events: none;
}
.cta-btn:hover::before { left: 160%; }
.cta-btn:hover  { transform: translateY(-2px); }
.cta-btn:active { transform: translateY(0) scale(.98); }

.cta-btn__icon { width: 16px; height: 16px; flex-shrink: 0; }

.cta-btn--wa {
  background: var(--accent);
  color: var(--black);
  border: 1px solid var(--accent);
}
.cta-btn--wa:hover { box-shadow: 0 12px 36px var(--accent-glow); }

.cta-btn--ig {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(245,245,245,.18);
}
.cta-btn--ig:hover { border-color: rgba(245,245,245,.38); }

.cta-btn--email {
  background: var(--white-dim);
  color: var(--grey-light);
  border: 1px solid rgba(245,245,245,.08);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cta-btn--email:hover { color: var(--white); border-color: rgba(245,245,245,.22); }

/* ── Info strip ─────────────────────────────────────────────── */
.info-strip {
  display: grid;
  grid-template-columns: repeat(4,auto);
  align-items: center;
  justify-content: center;
  gap: clamp(12px,2.5vw,44px);
  margin-top: clamp(24px,4vh,64px);
  padding-top: clamp(16px,2.5vh,36px);
  border-top: 1px solid rgba(245,245,245,.06);
  width: min(680px,92vw);
  opacity: 0;
  animation: fadeUp .8s 1.55s var(--ease-out) forwards;
}
.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.info-item__number {
  font-family: var(--font-display);
  font-size: clamp(1.4rem,4.5vw,2.6rem);
  letter-spacing: .04em;
  line-height: 1;
  color: var(--accent);
}
.info-item__label {
  font-family: var(--font-mono);
  font-size: clamp(.42rem,.65vw,.54rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey-mid);
  text-align: center;
  line-height: 1.5;
}
.info-sep {
  width: 1px; height: 28px;
  background: rgba(245,245,245,.08);
  flex-shrink: 0;
}

/* ── Footer ─────────────────────────────────────────────────── */
.footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: clamp(12px,2.5vw,22px) clamp(20px,5vw,60px);
  border-top: 1px solid rgba(245,245,245,.05);
  opacity: 0;
  animation: fadeUp .7s 1.7s var(--ease-out) forwards;
}
.footer__copy,
.footer__city,
.footer__ie {
  font-family: var(--font-mono);
  font-size: clamp(.44rem,.65vw,.58rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #575757;
}

/* ════════════════════════════════════════════════
   АДАПТИВНЫЕ БРЕЙКПОИНТЫ (mobile-first)
   ════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────
   Маленькие телефоны < 400px
   ──────────────────────────────────────────────── */
@media (max-width: 599px) {
  .header__tag { display: none; }

  .title {
    font-size: clamp(18px, 6.5vw, 36px); 
  }

  .title__line:nth-child(1),
  .title__line:nth-child(2) {
    font-size: 1.9em; 
  }

  .title__line:nth-child(3) span {
    -webkit-text-stroke-width: 1px;
  }

  .status-pill {
    font-size: .48rem;
    letter-spacing: .1em;
    padding: 5px 12px;
  }

  .tagline {
    font-size: .78rem;
    line-height: 1.75;
  }

  .info-strip {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .info-sep { display: none; }

  .footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }
  .footer__ie { display: none; }
}

/* ────────────────────────────────────────────────
   Крупные телефоны / мини-планшеты 600–767px
   ──────────────────────────────────────────────── */
@media (min-width: 600px) and (max-width: 767px) {
  .cta-group {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: auto;
    max-width: 560px;
  }
  .cta-btn        { flex: 0 0 auto; width: auto; }
  .cta-btn--email { max-width: 260px; }

  .info-strip { grid-template-columns: repeat(4,auto); }
  .info-sep { display: block; }

  .footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
  }
}

/* ────────────────────────────────────────────────
   Планшеты 768–1023px
   ──────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .title {
    font-size: clamp(3rem, 5vw, 5rem);
  }

  .cta-group {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: auto;
    max-width: 640px;
  }
  .cta-btn        { flex: 0 0 auto; width: auto; }
  .cta-btn--email { max-width: 280px; }
}

/* ────────────────────────────────────────────────
   Десктоп ≥ 1024px
   ──────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .title {
    font-size: clamp(4rem, 6vw, 7rem);
  }

  .title__line:nth-child(3) span {
    -webkit-text-stroke-width: 2px;
  }

  .cta-group {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: auto;
    max-width: 680px;
  }
  .cta-btn        { flex: 0 0 auto; width: auto; }
  .cta-btn--email { max-width: 290px; }
}

/* ────────────────────────────────────────────────
   Широкий десктоп ≥ 1440px
   ──────────────────────────────────────────────── */
@media (min-width: 1440px) {
  .title {
    font-size: clamp(6rem, 7vw, 9rem);
  }
}

/* ────────────────────────────────────────────────
   Landscape на телефоне (высота < 500px)
   ──────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    justify-content: flex-start;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .status-pill { margin-bottom: 8px; }
  .title {
    font-size: clamp(1.2rem, 7vh, 3rem);
    line-height: .88;
  }
  .tagline     { display: none; }
  .divider     { margin-bottom: 8px; }
  .cta-group   {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }
  .info-strip  { margin-top: 12px; padding-top: 10px; }
}

/* ────────────────────────────────────────────────
   Reduced motion
   ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:  .01ms !important;
    transition-duration: .01ms !important;
  }
}