:root {
  --bg: #070707;
  --fg: #e4e4e4;
  --fg-bright: #fff;
  --fg-dim: #969696;
  --fg-faint: #aaa;
  --border: #232326;
  --glow-hero: #f15f8f;    /* плазменно-розовый */
  --glow-amber: #e6b35c;   /* янтарный */
  --glow-blue: #6c8cff;    /* электрик-синий */
  --font-display: "Clash Display", "Unbounded", sans-serif;
  --font-body: "Switzer", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.66;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--glow-hero); color: var(--bg); }

.accent { color: var(--glow-hero); }

a { color: inherit; }

/* subtle film grain */
.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* мягкое фоновое свечение вместо сферы */
body::before {
  content: ""; position: fixed; z-index: 0; pointer-events: none;
  width: 60vmax; height: 60vmax; border-radius: 50%;
  top: -20vmax; right: -18vmax;
  background: radial-gradient(circle, rgba(241, 95, 143, .1), rgba(122, 92, 255, .05) 50%, transparent 70%);
  filter: blur(40px);
}

main, .nav, .footer { position: relative; z-index: 1; }

/* NAV */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem clamp(1.2rem, 6.25vw, 10rem);
  background: linear-gradient(to bottom, rgba(7,7,7,.7), transparent);
  backdrop-filter: blur(6px);
}
.nav-logo {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  text-decoration: none; letter-spacing: -.02em; color: var(--fg-bright);
}
.nav-links { display: flex; gap: 1.6rem; align-items: center; }
.nav-links a {
  text-decoration: none; font-size: .85rem; color: var(--fg-faint);
  letter-spacing: .04em;
  transition: color .2s;
}
.nav-links a:hover { color: var(--fg-bright); }
.nav-cta {
  color: var(--bg) !important; background: var(--fg-bright);
  padding: .5rem 1.1rem; border-radius: 999px; font-weight: 600;
  transition: transform .2s, box-shadow .3s !important;
}
.nav-cta:hover { transform: scale(1.05); box-shadow: 0 0 24px rgba(241, 95, 143, .4); }
.lang-switch {
  font-family: var(--font-mono);
  border: 1px solid var(--border); border-radius: 999px;
  padding: .35rem .7rem;
}
.lang-switch:hover { border-color: var(--glow-hero); }

/* ============ HERO ============ */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(1.5rem, 6.25vw, 10rem);
  position: relative;
}
.hero-eyebrow {
  color: var(--fg-faint); letter-spacing: .2em; text-transform: uppercase;
  font-size: .75rem; margin-bottom: 1.5rem;
}
.hero-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 8vw, 6.6rem);
  line-height: 1.02; letter-spacing: -.02em;
  color: var(--fg-bright);
  margin-bottom: 2rem;
}
.hero-sub {
  max-width: 36rem; color: var(--fg-dim); font-weight: 350;
  font-size: clamp(.95rem, 1.2vw, 1.12rem);
  margin-bottom: 2rem;
}
.hero-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.5rem; }
.hero-cta-row { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.scroll-hint-inline {
  color: var(--fg-dim); font-size: .85rem; letter-spacing: .06em;
  text-decoration: none;
}
.scroll-hint-inline:hover { color: var(--fg-bright); }
.hero-title .line { display: block; overflow: hidden; }
.hero-title .char {
  display: inline-block;
  transform: translateY(110%) rotate(6deg);
  animation: char-in .8s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes char-in { to { transform: none; } }
/* SECTIONS */
.section {
  padding: clamp(5rem, 12vw, 10rem) clamp(1.5rem, 6.25vw, 10rem);
  position: relative;
}
.section-label {
  font-size: .68rem; color: #bababa;
  margin-bottom: 3rem; letter-spacing: .3em; text-transform: uppercase;
}
.section-heading {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 3.2rem);
  line-height: 1.1; letter-spacing: -.016em; color: var(--fg-bright);
  margin-bottom: 3rem;
}

/* per-section selection glow */
#services ::selection { background: var(--glow-blue); color: var(--bg); }
#about ::selection, #case ::selection { background: var(--glow-amber); color: var(--bg); }

.chip {
  font-family: var(--font-mono); font-size: .75rem;
  border: 1px solid var(--border); border-radius: 999px;
  padding: .35rem .8rem; color: var(--fg-dim);
  transition: color .3s, border-color .3s, text-shadow .3s;
}
.chip:hover { color: #f8e7bf; border-color: var(--glow-amber); text-shadow: 0 0 14px #c7953a; }

/* ============ STATS ============ */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  padding: 0 clamp(1.5rem, 6.25vw, 10rem) clamp(3rem, 6vw, 5rem);
}
.stat {
  border: 1px solid var(--border); border-radius: 16px;
  padding: 1.4rem 1.5rem;
  background: rgba(255, 255, 255, .015);
  transition: border-color .3s, transform .3s;
}
.stat:hover { border-color: rgba(241, 95, 143, .5); transform: translateY(-4px); }
.stat-num {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1;
  color: var(--fg-bright);
  margin-bottom: .5rem;
}
.stat-num small { font-size: .5em; color: var(--glow-hero); }
.stat-label { color: var(--fg-dim); font-size: .82rem; font-weight: 350; line-height: 1.45; }

/* ============ PROCESS / STEPS ============ */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.step {
  border: 1px solid var(--border); border-radius: 16px;
  padding: 1.8rem 1.6rem;
  background: rgba(255, 255, 255, .015);
  position: relative; overflow: hidden;
  transition: border-color .3s, transform .3s;
}
.step:hover { border-color: rgba(241, 95, 143, .5); transform: translateY(-4px); }
.step-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--glow-hero);
  display: block; margin-bottom: 1rem;
}
.step h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.15rem; color: var(--fg-bright); margin-bottom: .5rem;
}
.step p { color: var(--fg-dim); font-weight: 350; font-size: .92rem; }

/* ============ FLOATING CONTACT BUTTONS ============ */
.float-stack {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90;
  display: flex; flex-direction: row; align-items: center; gap: .8rem;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
.float-stack.visible { opacity: 1; transform: none; pointer-events: auto; }
.float-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: transform .25s;
}
.float-btn:hover { transform: scale(1.08); }
/* WhatsApp — вторичная, меньше и спокойнее */
.wa-float {
  width: 44px; height: 44px; border-radius: 50%;
  background: #25d366;
  box-shadow: 0 5px 18px rgba(37, 211, 102, .35);
}
/* Telegram — главная: крупнее, с пульсом и выезжающей подписью */
.tg-float {
  height: 56px; min-width: 56px; border-radius: 999px;
  background: var(--glow-hero);
  box-shadow: 0 6px 24px rgba(241, 95, 143, .45);
  padding: 0 15px;
  gap: 0;
}
.tg-float::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  border: 2px solid var(--glow-hero);
  animation: float-pulse 2.2s ease-out infinite;
}
.float-label {
  max-width: 0; overflow: hidden; white-space: nowrap;
  font-weight: 600; font-size: .9rem;
  transition: max-width .35s ease, margin-left .35s ease;
}
.tg-float:hover .float-label { max-width: 160px; margin-left: .6rem; }
@keyframes float-pulse {
  from { transform: scale(1); opacity: .8; }
  to   { transform: scale(1.35); opacity: 0; }
}

/* ============ CASE ============ */
.case {
  border: 1px solid var(--border); border-radius: 20px;
  background: rgba(255, 255, 255, .015);
  padding: clamp(1.5rem, 4vw, 3rem);
  position: relative; overflow: hidden;
}
.case::before {
  content: ""; position: absolute; top: -30%; right: -15%;
  width: 60%; height: 80%; pointer-events: none;
  background: radial-gradient(circle, rgba(230, 179, 92, .1), transparent 65%);
}
.case-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem; }
.case-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.8rem);
  letter-spacing: -.02em; color: var(--fg-bright);
}
.case-link {
  font-family: var(--font-mono); font-size: .85rem; color: var(--glow-amber);
  text-decoration: none;
}
.case-role {
  font-size: .76rem; color: var(--fg-faint); letter-spacing: .08em;
  text-transform: uppercase; margin: .5rem 0 1.5rem;
}
.case-desc { max-width: 58ch; color: var(--fg); font-weight: 350; margin-bottom: 1.6rem; }
.store-badges { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2rem; }
.store-badge {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none;
  background: var(--fg-bright); color: var(--bg);
  border: 1px solid var(--fg-bright); border-radius: 14px;
  padding: .55rem 1.3rem;
  transition: transform .2s, box-shadow .3s;
}
.store-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(230, 179, 92, .35);
}
.store-icon { font-size: 1.5rem; line-height: 1; }
.store-text {
  display: flex; flex-direction: column; line-height: 1.15;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
}
.store-text small {
  font-family: var(--font-body); font-weight: 400; font-size: .68rem;
  opacity: .7;
}
.case-points { list-style: none; display: grid; gap: 1rem; margin-bottom: 2rem; }
.case-points li {
  color: var(--fg-dim); font-weight: 350; font-size: .96rem;
  padding-left: 1.1rem; position: relative;
  transition: color .32s, transform .32s, text-shadow .32s;
}
.case-points li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .35rem; height: 1px; background: var(--fg-dim);
  transition: background .32s, box-shadow .32s;
}
.case-points li:hover {
  color: #f8e7bf; text-shadow: 0 0 14px rgba(199, 149, 58, .6);
  transform: translateX(.3rem);
}
.case-points li:hover::before { background: var(--glow-amber); box-shadow: 0 0 8px var(--glow-amber); }
.case-points strong { color: var(--fg-bright); font-weight: 600; }
.case-points li:hover strong { color: #f8e7bf; }
.case-stack { display: flex; flex-wrap: wrap; gap: .5rem; }

/* SKILLS / SERVICES */
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.skill-card {
  border: 1px solid var(--border); border-radius: 16px; padding: 1.6rem;
  background: rgba(255, 255, 255, .015);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.skill-card:hover {
  border-color: rgba(108, 140, 255, .5);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(108, 140, 255, .12);
}
.skill-card h3 {
  font-family: var(--font-display); font-weight: 600; margin-bottom: .6rem;
  font-size: 1.15rem; color: var(--fg-bright);
}
.skill-card p { color: var(--fg-dim); font-weight: 350; font-size: .92rem; }

/* ============ ABOUT: текст слева, сфера справа ============ */
.about-grid, .contact-grid { max-width: 62rem; }
.about-left { display: flex; flex-direction: column; gap: clamp(.95rem, 1.8vh, 1.35rem); }
.about-location {
  color: var(--fg-faint); letter-spacing: .08em;
  font-size: clamp(.76rem, .95vw, .9rem);
}
.about-lead {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.1; letter-spacing: -.016em; color: var(--fg-bright);
}
.about-line {
  color: var(--fg); font-weight: 350;
  font-size: clamp(.92rem, 1.16vw, 1.12rem);
  max-width: 58ch;
}
.about-divider {
  width: 80%; height: 1px; margin: .5rem 0 .35rem;
  background: linear-gradient(90deg, transparent 0%, #7a7a7a 18%, #7a7a7a 82%, transparent 100%);
}
.currently-label {
  color: #bababa; letter-spacing: .2rem; text-transform: uppercase;
  font-size: .68rem; margin-bottom: .2rem;
}
.currently-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.currently-item {
  color: var(--fg-dim); letter-spacing: .016em; cursor: default;
  font-size: clamp(.98rem, 1.34vw, 1.34rem); font-weight: 430; line-height: 1.48;
  transition: color .32s, transform .32s, text-shadow .32s;
}
.currently-item.is-active {
  color: #f8e7bf; text-shadow: 0 0 14px #c7953a;
  transform: translateX(.3rem);
}
.c-key { font-weight: 600; }
.c-dash { color: var(--fg-faint); }
.c-val { color: var(--fg-bright); }
.currently-item.is-active .c-val { color: #fff6e2; }

/* ============ CONTACT ============ */
.contact { display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 901px) { .contact { min-height: 85vh; } }
.contact-left { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.contact-avail {
  color: #bababa; letter-spacing: .25em; text-transform: uppercase;
  font-size: .68rem;
}
.contact-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  line-height: 1.02; letter-spacing: -.02em; color: var(--fg-bright);
}
.contact-sub { color: var(--fg-dim); max-width: 34rem; font-weight: 350; }
.contact-btn {
  text-decoration: none; font-weight: 600; font-size: .95rem;
  background: var(--fg-bright); color: var(--bg);
  padding: .9rem 1.6rem; border-radius: 999px;
  transition: transform .2s, box-shadow .3s;
}
.contact-btn:hover { transform: scale(1.04); box-shadow: 0 0 32px rgba(241, 95, 143, .45); }
.contact-email a {
  color: var(--fg); text-decoration: none; font-size: 1.05rem;
  border-bottom: 1px solid var(--border);
  transition: border-color .3s, color .3s;
}
.contact-email a:hover { color: var(--fg-bright); border-color: var(--glow-hero); }
.contact-minor { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.contact-minor a {
  text-decoration: none; color: var(--fg-faint);
  font-size: .7rem; letter-spacing: .25em; text-transform: uppercase;
  transition: color .3s, text-shadow .3s;
}
.contact-minor a:hover { color: var(--fg-bright); text-shadow: 0 0 12px rgba(241, 95, 143, .8); }

/* OUTLINE TEXT with hover fill */
.outline-fill {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--glow-hero);
  background: linear-gradient(var(--glow-hero), var(--glow-hero)) no-repeat 0 100% / 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-size .5s ease;
}
.contact-title:hover .outline-fill { background-size: 100% 100%; }

/* link hover underline sweep */
.nav-links a:not(.nav-cta), .case-link { position: relative; }
.nav-links a:not(.nav-cta)::after, .case-link::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s ease;
}
.nav-links a:not(.nav-cta):hover::after, .case-link:hover::after {
  transform: scaleX(1); transform-origin: left;
}

/* FOOTER */
.footer {
  display: flex; justify-content: center;
  /* справа запас под плавающие кнопки связи */
  padding: 1.5rem 190px 1.5rem clamp(1.5rem, 6.25vw, 10rem);
  font-size: .72rem; color: var(--fg-dim); letter-spacing: .08em;
}
@media (max-width: 720px) {
  .footer { padding: 1.5rem 1.5rem 6.5rem; }
}

/* SCROLL REVEAL */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .nav-links a:not(.nav-cta):not(.lang-switch) { display: none; }
  .section { padding-top: 4rem; padding-bottom: 4rem; }
  /* hero не на весь экран: снизу выглядывает статистика — сигнал листать */
  .hero { min-height: 0; padding-top: 7.5rem; padding-bottom: 2.5rem; }
  .stats { padding-bottom: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-title .char { transform: none; animation: none; }
  .tg-float::after { animation: none; }
  .float-stack { opacity: 1; transform: none; pointer-events: auto; }
  html { scroll-behavior: auto; }
}