/* ===== rezultat.online | style: жёсткий практик (clean system) ===== */

/* -----------------------------
   TOKENS / SYSTEM
------------------------------ */
:root{
  /* colors */
  --bg:#0b0d10;
  --panel:#0f1217;
  --card:#10141b;
  --text:#e8edf3;
  --muted:#a8b3c0;
  --line: rgba(232,237,243,.10);

  /* accent */
  --accent:#7cf7ff;
  --accent2:#b7fff1;

  /* sizing */
  --radius:16px;
  --shadow: 0 18px 60px rgba(0,0,0,.35);

  /* layout */
  --container: 1360px;
  --pad: clamp(16px, 2.2vw, 32px);

  /* safe-area (iPhone notch) */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* unified section titles (except hero) */
  --section-title-size: clamp(24px, 6.6vw, 34px);
  --section-title-lh: 1.10;
  --section-title-ls: -0.03em;
}

/* container scaling on big screens */
@media (min-width: 1600px){ :root{ --container: 1480px; } }
@media (min-width: 1920px){ :root{ --container: 1560px; } }

/* -----------------------------
   BASE / RESET
------------------------------ */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

/* iOS Safari: не даём "самостоятельно" увеличивать текст и ломать типографику */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* защита от горизонтального "уезда" на мобиле */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}

img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color: inherit; }
button,input,textarea{ font: inherit; }
::selection{ background: rgba(124,247,255,.22); }

body{
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.55;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(124,247,255,.16), transparent 55%),
    radial-gradient(700px 420px at 85% 10%, rgba(232,237,243,.08), transparent 60%),
    radial-gradient(1200px 800px at 50% 40%, rgba(0,0,0,.25), rgba(0,0,0,.75)),
    var(--bg);
}

/* accessibility */
:focus-visible{
  outline: 2px solid rgba(124,247,255,.55);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------
   UTILITIES / LAYOUT
------------------------------ */
.container{
  width: min(var(--container), calc(100% - (var(--pad) * 2)));
  margin-inline: auto;
}

.section{
  padding: 56px 0;
  border-top: 1px solid var(--line);
}

.muted{ color: var(--muted); }
.small{ font-size: 14px; }
.section .muted{ max-width: 78ch; }

/* -----------------------------
   TYPOGRAPHY HELPERS
------------------------------ */
.h2{
  margin: 0 0 18px;
  font-size: 28px;
  letter-spacing: -0.02em;
}
.h3{
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

/* unified section titles (except hero) */
.h2,
.why__title,
.works__title,
.process__title{
  font-size: var(--section-title-size);
  line-height: var(--section-title-lh);
  letter-spacing: var(--section-title-ls);
}
.section h2{
  font-size: var(--section-title-size);
  line-height: var(--section-title-lh);
  letter-spacing: var(--section-title-ls);
}

/* -----------------------------
   BUTTONS
------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: .6rem;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(124,247,255,.35);
  background: linear-gradient(180deg, rgba(124,247,255,.22), rgba(124,247,255,.10));
  color: rgba(232,237,243,.92);
  font-weight: 800;
  text-decoration:none;
  cursor:pointer;
  box-shadow:
    0 14px 40px rgba(124,247,255,.10),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.btn:hover{
  border-color: rgba(124,247,255,.55);
  background: linear-gradient(180deg, rgba(124,247,255,.28), rgba(124,247,255,.12));
}

.btn--ghost{
  background: transparent;
  color: var(--text);
  border-color: rgba(232,237,243,.18);
  box-shadow: none;
}
.btn--ghost:hover{
  background: rgba(232,237,243,.06);
  border-color: rgba(232,237,243,.26);
}

/* -----------------------------
   HEADER (single source of truth)
------------------------------ */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11,13,16,.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(232,237,243,.10);
}

.header__inner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
}

/* brand */
.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
}
.brand__logo{
  height: 28px;
  width: auto;
  display:block;
  transition: transform .25s ease, filter .25s ease;
  filter:
    brightness(1.05)
    contrast(1.05)
    drop-shadow(0 0 14px rgba(124,247,255,.22));
}
.brand:hover .brand__logo{
  transform: translateY(-1px);
  filter:
    brightness(1.1)
    contrast(1.08)
    drop-shadow(0 0 18px rgba(124,247,255,.28));
}
@media (min-width: 1400px){
  .brand__logo{ height: 32px; }
}

/* nav (desktop) */
.nav{
  display:flex;
  gap: 18px;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-left: 32px;
}
.nav a{
  text-decoration: none;
  opacity: .82;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .01em;
  padding: 8px 10px;
  border-radius: 12px;
}
.nav a:hover{
  opacity: 1;
  background: rgba(255,255,255,.04);
}

/* header CTA */
.header__cta{
  white-space: nowrap;
}
.header__cta.btn--ghost{
  padding: 12px 20px;
  border-radius: 14px;
  border: 1px solid rgba(232,237,243,.14);
  background: rgba(0,0,0,.18);
  box-shadow:
    0 18px 60px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.header__cta.btn--ghost:hover{
  border-color: rgba(124,247,255,.26);
  background: rgba(124,247,255,.08);
}

/* mobile header: ONLY logo + icons, fixed, compact */
.header__contacts{ display: none; }

@media (max-width: 900px){
  /* fixed */
  .header{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 5000;
    width: 100%;
  }

  /* safe area padding for notch devices */
  body{
    padding-left: var(--safe-l);
    padding-right: var(--safe-r);
    padding-top: 60px; /* компактная шапка */
  }

  .header__inner{
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 10px 0; /* ниже шапка */
  }

  /* hide menu pills + desktop CTA */
  .header .nav{ display: none !important; }
  .header__cta--desktop{ display: none !important; }

  /* logo bigger + aligned */
  .brand__logo{
    height: 26px; /* было 22 — теперь заметнее */
  }

  .header__contacts{
    display: flex;
    align-items: center;
    gap: 14px; /* чуть плотнее */
  }

  .header__icon{
    width: 34px;
    height: 34px;
    display:flex;
    align-items:center;
    justify-content:center;
    color: rgba(232,237,243,.72);
    transition: color .2s ease, transform .2s ease, opacity .2s ease;
  }

  .header__icon svg{
    width: 24px;
    height: 24px;
  }

  .header__icon:active{
    transform: scale(.92);
  }

  .header__icon--tg{
    color: var(--accent);
  }
}

@media (max-width: 560px){
  body{ padding-top: 58px; }
  .brand__logo{ height: 25px; }
}

/* -----------------------------
   HERO (single source of truth)
------------------------------ */
.hero{
  position: relative;
  padding: 96px 0 72px;
  min-height: 82vh;
  display: flex;
  align-items: center;
  text-align: center;
  border-top: 0;
  overflow: hidden;
}

/* grid overlay */
.hero::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    linear-gradient(to right, rgba(232,237,243,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(232,237,243,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(700px 320px at 30% 30%, #000 35%, transparent 70%);
  -webkit-mask-image: radial-gradient(700px 320px at 30% 30%, #000 35%, transparent 70%);
  opacity: .32;
}

.hero__grid{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 16px;
}

.hero__left{
  position: relative;
  width: 100%;
  max-width: var(--container);
}

.hero__bgtext{
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(22px, 3.2vw, 54px);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(232,237,243,.05);
  pointer-events: none;
  user-select: none;
}

.hero__title{
  position: relative;
  width: 100%;
  margin: 28px 0 18px;
  font-size: clamp(44px, 6.2vw, 96px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -0.045em; /* hero unique */
  text-transform: uppercase;
}

.hero__lead{
  margin: 0 auto 26px;
  max-width: 76ch;
  font-size: clamp(16px, 1.25vw, 18px);
  color: var(--muted);
}

.hero__actions{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  justify-content: center;
  margin: 18px 0;
}

/* badges (single source) */
.hero__badges{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content: center;
  margin-top: 14px;
}

.hero__badges span{
  border: 1px solid rgba(124,247,255,.25);
  background: rgba(124,247,255,.06);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: rgba(232,237,243,.85);
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.hero__badges span:hover{
  background: rgba(124,247,255,.10);
  border-color: rgba(124,247,255,.35);
  color: rgba(232,237,243,.92);
  transform: translateY(-1px);
}

@media (max-width: 900px){
  .hero{
    min-height: auto;
    padding: 72px 0 54px;
  }
  .hero__bgtext{
    font-size: clamp(22px, 7vw, 40px);
    letter-spacing: .12em;
  }
  .hero__title{
    font-size: clamp(34px, 9vw, 54px);
    line-height: 1.02;
  }
}

@media (max-width: 560px){
  .hero__actions{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero__actions .btn{
    width: 100%;
    justify-content: center;
    padding: 14px 16px;
    border-radius: 16px;
  }

  .hero__badges{
    gap: 8px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero__badges span{
    font-size: 13px;
    padding: 7px 10px;
  }
}

/* -----------------------------
   CARDS / GRIDS
------------------------------ */
.card{
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16,20,27,.90), rgba(16,20,27,.65));
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

.grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid2{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }

@media (min-width: 1600px){
  .grid3{ gap: 20px; }
  .grid2{ gap: 20px; }
  .card{ padding: 20px; }
  .hero::before{
    background-size: 64px 64px;
    opacity: .36;
  }
}

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

/* lists/steps */
.list{ margin: 12px 0 0; padding-left: 18px; color: var(--muted); }
.steps{ margin: 0; padding-left: 18px; color: var(--muted); }

/* -----------------------------
   FORMS
------------------------------ */
.form{ display:grid; gap: 12px; }

.field{ display:grid; gap: 6px; font-weight: 700; }

.field span{
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
}

input, textarea{
  font: inherit;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  outline: none;
  background: rgba(232,237,243,.03);
  color: var(--text);
}

/* iOS: чтобы Safari не зумил поля */
input, textarea, select{ font-size: 16px; }

input::placeholder, textarea::placeholder{
  color: rgba(168,179,192,.75);
}

input:focus, textarea:focus{
  border-color: rgba(124,247,255,.55);
  box-shadow: 0 0 0 4px rgba(124,247,255,.12);
}

/* -----------------------------
   FOOTER
------------------------------ */
.footer{
  border-top: 1px solid var(--line);
  padding: 28px 0;
}

.footer__inner{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap:wrap;
}

.footer a{ text-decoration:none; }
.footer a:hover{ text-decoration: underline; }

/* -----------------------------
   PACKS (pricing)
------------------------------ */
.pack{
  display:flex;
  flex-direction: column;
  gap: 12px;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.pack__top{
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pack__tag{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: rgba(232,237,243,.72);
  background: rgba(232,237,243,.03);
  white-space: nowrap;
}

.pack__tag--accent{
  border-color: rgba(124,247,255,.45);
  background: rgba(124,247,255,.14);
  color: rgba(232,237,243,.92);
}

.pack__bottom{
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pack__cta{
  width: 100%;
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  justify-content: center;
  opacity: .92;
}

.pack:hover .pack__cta{ opacity: 1; }

.pack:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  border-color: rgba(232,237,243,.18);
}

.pack--main{
  border-color: rgba(124,247,255,.30);
  box-shadow: 0 18px 70px rgba(124,247,255,.10);
}
.pack--main:hover{
  transform: translateY(-8px);
  box-shadow: 0 28px 90px rgba(124,247,255,.18);
}

/* services prices */
.pack__title{
  display:flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.pack__price{
  display:inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(232,237,243,.14);
  background: rgba(0,0,0,.18);
  box-shadow:
    0 18px 60px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
.pack__price--accent{
  border-color: rgba(124,247,255,.28);
  background: rgba(124,247,255,.10);
  box-shadow:
    0 20px 70px rgba(124,247,255,.10),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.pack__from{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
}
.pack__per{
  font-size: 12px;
  font-weight: 800;
  opacity: .72;
}
.pack__plus{
  opacity: .55;
  font-weight: 900;
  margin: 0 2px;
}
.pack__note{ margin-top: 2px; }
.pack__under{ text-align: center; margin-top: 6px; }

@media (max-width: 900px){
  .pack__price{ padding: 7px 10px; font-size: 14px; }

  /* FIX: services overflow on iPhone */
  .services .grid3,
  .services .pack,
  .services .pack__top,
  .services .pack__title{
    min-width: 0;
  }
  .services .pack__top{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .services .pack__tag{
    white-space: normal;
    max-width: 100%;
  }
  .services .pack__price{
    white-space: normal;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .services .pack{
    max-width: 100%;
    overflow: hidden;
  }
}

/* -----------------------------
   STAGE SIDE PANELS (wide screens)
------------------------------ */
.stage{
  min-height: 100vh;
  position: relative;
}

@media (min-width: 1400px){
  .stage::before,
  .stage::after{
    content:"";
    position: fixed;
    top: 0;
    bottom: 0;
    width: 260px;
    pointer-events: none;
    z-index: 0;
    background:
      linear-gradient(to bottom, rgba(232,237,243,.06), rgba(232,237,243,.02)),
      radial-gradient(240px 420px at 50% 18%, rgba(124,247,255,.16), transparent 70%);
    opacity: .50;
    filter: saturate(1.05);
  }

  .stage::before{
    left: 0;
    border-right: 1px solid rgba(232,237,243,.07);
    mask-image: linear-gradient(to right, #000 65%, transparent);
    -webkit-mask-image: linear-gradient(to right, #000 65%, transparent);
  }

  .stage::after{
    right: 0;
    border-left: 1px solid rgba(232,237,243,.07);
    mask-image: linear-gradient(to left, #000 65%, transparent);
    -webkit-mask-image: linear-gradient(to left, #000 65%, transparent);
  }

  .container{ position: relative; z-index: 1; }
  .container::before,
  .container::after{
    content:"";
    position:absolute;
    top:-18px;
    bottom:-18px;
    width: 1px;
    background: rgba(232,237,243,.06);
    pointer-events:none;
  }
  .container::before{ left: -18px; }
  .container::after{ right: -18px; }
}

/* -----------------------------
   SECTION ALTERNATION (soft stripe)
------------------------------ */
.section--soft{
  padding: 72px 0;
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(124,247,255,.05), transparent 70%),
    #11161c;
  border-top: 1px solid rgba(232,237,243,.06);
  border-bottom: 1px solid rgba(232,237,243,.06);
}
.section--soft .card{
  background: #0e1319;
  border-color: rgba(255,255,255,.06);
}
.section--soft .card:hover{
  border-color: rgba(124,247,255,.22);
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
}
@media (max-width: 900px){
  .section--soft{ padding: 52px 0; }
}

/* -----------------------------
   WHY
------------------------------ */
.why{
  padding: 72px 0;
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(124,247,255,.05), transparent 70%),
    #11161c;
  border-top: 1px solid rgba(232,237,243,.06);
  border-bottom: 1px solid rgba(232,237,243,.06);
}

.why .card{
  background: #0e1319;
  border-color: rgba(255,255,255,.06);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.why .card:hover{
  transform: translateY(-3px);
  border-color: rgba(124,247,255,.22);
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
}

.why__head{
  text-align: center;
  margin-bottom: 28px;
}
.why__title{
  margin: 0 0 10px;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.03em;
}
.why__lead{
  margin: 0 auto;
  max-width: 72ch;
}

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

.why__item{ padding: 18px; }
.why__item .h3{ margin-bottom: 8px; }
.why__item .muted{ margin: 0; }

.why__item .h3{
  position: relative;
  padding-left: 30px;
}
.why__item .h3::before{
  content:"";
  position: absolute;
  left: 0;
  top: .22em;
  width: 18px;
  height: 18px;
  background: url("/assets/img/free-icon-check-2107638.png") center / contain no-repeat;
  opacity: .95;
  filter: drop-shadow(0 0 10px rgba(124,247,255,.10)) saturate(1.05);
}

@media (min-width: 1600px){ .why__grid{ gap: 20px; } }
@media (max-width: 900px){
  .why__grid{ grid-template-columns: 1fr; }
  .why{ padding: 52px 0; }
}

/* -----------------------------
   WORKS (carousel)
------------------------------ */
.works{ padding: 72px 0; }

.works__head{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 28px;
}

.works__title{
  margin: 0;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.03em;
}
.works__lead{
  margin: 0;
  max-width: 72ch;
}

.works__wrap{
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 10px;
  align-items: center;
}

.works__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 42px) / 4);
  gap: 14px;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 10px;
  padding: 6px 2px 10px;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.works__track::-webkit-scrollbar{ display:none; }

@media (min-width: 1600px){
  .works__track{
    grid-auto-columns: calc((100% - 64px) / 5);
    gap: 16px;
  }
}

/* IMPORTANT: card is button */
.works__card{
  scroll-snap-align: start;
  border: 1px solid rgba(232,237,243,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  overflow: hidden;
  padding: 0;
  text-align: left;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  color: var(--text);

  display: flex;
  flex-direction: column;
  height: 100%;
}

.works__card:hover{
  transform: translateY(-4px);
  border-color: rgba(124,247,255,.24);
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

.works__thumb{
  height: 420px;
  flex-shrink: 0;
  background: rgba(0,0,0,.2);
  position: relative;
  overflow: hidden;
}

.works__thumb img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  object-position: top center;
  transform: scale(1.001);
}

.works__thumb::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 46%;
  background: linear-gradient(to top, rgba(0,0,0,.58), transparent);
  pointer-events:none;
}

.works__meta{
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-grow: 1;
  gap: 4px;
}

.works__name{
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.works__tag{
  font-size: 13px;
  color: var(--muted);
}

.works__nav{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(232,237,243,.14);
  background: rgba(255,255,255,.04);
  color: rgba(232,237,243,.9);
  cursor: pointer;
  display:grid;
  place-items:center;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}
.works__nav:hover{
  border-color: rgba(124,247,255,.28);
  background: rgba(124,247,255,.08);
}

@media (max-width: 1100px){
  .works__wrap{ grid-template-columns: 1fr; }
  .works__nav{ display:none; }
  .works__track{
    grid-auto-columns: calc((100% - 14px) / 2);
    gap: 14px;
  }
}

@media (max-width: 640px){
  .works__track{
    grid-auto-columns: 78%;
    gap: 12px;
  }
  .works__thumb{ height: 320px; }
}

/* -----------------------------
   LIGHTBOX
------------------------------ */
.lightbox{
  position: fixed;
  inset: 0;
  padding: 20px;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 2000;
  display: grid;
  place-items: center;
}

.lightbox.is-open{
  opacity: 1;
  pointer-events: all;
}

.lightbox__inner{
  position: relative;
  max-width: min(1100px, 92vw);
  max-height: 92vh;
}

.lightbox__img{
  width: 100%;
  height: auto;
  max-height: 92vh;
  border-radius: 14px;
  display:block;
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
}

.lightbox__close{
  position: absolute;
  top: -14px;
  right: -14px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(232,237,243,.18);
  background: rgba(255,255,255,.06);
  color: rgba(232,237,243,.95);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}
.lightbox__close:hover{
  border-color: rgba(124,247,255,.28);
  background: rgba(124,247,255,.08);
}

/* -----------------------------
   SERVICES head helper
------------------------------ */
.services__head{ text-align: center; margin-bottom: 28px; }
.services__lead{ max-width: 72ch; margin: 0 auto; }

/* -----------------------------
   PROCESS (premium steps)
------------------------------ */
.process{ padding: 72px 0; }

.process__head{
  text-align:center;
  margin-bottom: 28px;
}
.process__title{ margin-bottom: 10px; }
.process__lead{
  margin: 0 auto;
  max-width: 72ch;
}

.process__grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.process__step{
  position: relative;
  border: 1px solid rgba(232,237,243,.10);
  background: linear-gradient(180deg, rgba(16,20,27,.88), rgba(16,20,27,.60));
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.process__step::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(420px 140px at 30% 0%, rgba(124,247,255,.12), transparent 60%);
  opacity: .55;
  pointer-events:none;
}
.process__step::after{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(232,237,243,.10);
  opacity: .7;
}
.process__step:hover{
  transform: translateY(-3px);
  border-color: rgba(124,247,255,.22);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}

/* number icons (1.png..4.png) */
.process__num{
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  text-indent: -9999px;
}
.process__step:nth-child(1) .process__num{ background-image: url("/assets/img/1.png"); }
.process__step:nth-child(2) .process__num{ background-image: url("/assets/img/2.png"); }
.process__step:nth-child(3) .process__num{ background-image: url("/assets/img/3.png"); }
.process__step:nth-child(4) .process__num{ background-image: url("/assets/img/4.png"); }

.process__body .h3{
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 16px;
}
.process__body p{ margin: 0 0 12px; }

.process__meta{
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(232,237,243,.10);
  font-size: 13px;
  color: rgba(232,237,243,.70);
}

.process__cta{
  margin-top: 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(232,237,243,.10);
  background: rgba(255,255,255,.03);
}
@media (max-width: 700px){
  .process__cta{ flex-direction: column; text-align:center; }
}

@media (max-width: 1100px){
  .process__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .process{ padding: 52px 0; }
  .process__grid{ grid-template-columns: 1fr; }
}

/* -----------------------------
   RULES
------------------------------ */
.rules__head{ text-align:center; margin-bottom: 28px; }
.rules__lead{ max-width:72ch; margin: 0 auto; }

.rules__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 900px){
  .rules__grid{ grid-template-columns: 1fr; }
}

/* -----------------------------
   AUDIENCE (with icons)
------------------------------ */
.audience__head{ text-align:center; margin-bottom:28px; }
.audience__lead{ max-width:72ch; margin:0 auto; }

.audience__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
@media (max-width:900px){
  .audience__grid{ grid-template-columns:1fr; }
}

.audience__item--soft{
  border-style:dashed;
  opacity:.85;
}

/* desktop/tablet: icon on top */
.audience__item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.audience__icon{
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

/* mobile: icon left, text right */
@media (max-width: 640px){
  .audience__item{
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 12px 14px;
    align-items: start;
  }

  .audience__icon{
    width: 64px;
    height: 64px;
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-top: 2px;
    filter: drop-shadow(0 0 14px rgba(124,247,255,.22));
  }

  .audience__item .h3{
    margin: 0;
    grid-column: 2;
  }
  .audience__item .muted{
    margin: 0;
    grid-column: 2;
  }
}

/* -----------------------------
   ABOUT (fixed width like other sections)
------------------------------ */
.about{ padding: 72px 0; }

.about__wrap{
  display:block; /* важно: не сужаем центрированием */
}

.about__content{
  width: 100%;
  max-width: none;
  text-align: center;
}

.about__content p{
  margin-bottom: 14px;
}

/* limit only text width */
.about__content > p.muted{
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}

.about__stats{
  margin-top: 28px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

.about__stats li{
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(232,237,243,.08);
  background: rgba(255,255,255,.02);
  font-size: 14px;
  color: var(--muted);
}

.about__stats strong{
  display:block;
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 4px;
}

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

/* -----------------------------
   CONTACT
------------------------------ */
.contact{ padding: 72px 0; }

.contact__wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.contact__left{
  display:flex;
  flex-direction: column;
  gap: 18px;
}

.contact__form{
  display:flex;
  flex-direction: column;
  gap: 14px;
  transition: opacity .35s ease, transform .35s ease;
}

.contact__form.is-hidden{
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.contact__form input,
.contact__form textarea{
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(232,237,243,.10);
  background: rgba(255,255,255,.02);
  color: var(--text);
  font-size: 14px;
}

.contact__form textarea{
  min-height: 110px;
  resize: vertical;
}

.contact__form input:focus,
.contact__form textarea:focus{
  border-color: rgba(124,247,255,.40);
  box-shadow: 0 0 0 3px rgba(124,247,255,.08);
}

/* success */
.contact__success{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(124,247,255,.22);
  background: rgba(124,247,255,.06);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  font-size: 14px;
  line-height: 1.35;

  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}

.contact__success.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* when success shown - hide form (your HTML order: success then form) */
#contactSuccess:not([hidden]) + .contact__form{ display: none; }

@media (min-width: 901px){
  .contact__wrap{ align-items: start; }
  #contactSuccess:not([hidden]){
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
}

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

/* -----------------------------
   FAQ
------------------------------ */
.faq{ padding: 72px 0; }

.faq__head{ text-align:center; margin-bottom: 28px; }

.faq__grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.faq .card{
  background: linear-gradient(180deg, rgba(16,20,27,.90), rgba(16,20,27,.65));
  border: 1px solid rgba(232,237,243,.08);
  border-radius: 18px;
  padding: 20px;
}

.faq .h3{ margin-bottom: 10px; }

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

/* -----------------------------
   MOBILE NORMALIZATION / RHYTHM
------------------------------ */
@media (max-width: 560px){
  /* container consistent padding */
  .container{
    width: min(var(--container), calc(100% - (16px * 2)));
  }

  /* section heads centered */
  .why__head,
  .works__head,
  .process__head,
  .services__head,
  .rules__head,
  .audience__head,
  .faq__head,
  .about__content,
  .section{
    text-align: center;
  }

  /* limit lead widths */
  .why__lead,
  .works__lead,
  .process__lead,
  .services__lead,
  .rules__lead,
  .audience__lead,
  .section .muted{
    margin-left: auto;
    margin-right: auto;
    max-width: 38ch;
  }

  .card{ padding: 16px; }

  /* contact button full width */
  .contact__left{ align-items: center; }
  .contact__form{ width: 100%; }
  .contact__form .btn{ width: 100%; justify-content: center; }

  .faq{ padding: 52px 0; }
  .contact{ padding: 52px 0; }
  .about{ padding: 52px 0; }
}

@media (max-width: 640px){
  .section{ padding: 44px 0; }
  .section--soft{ padding: 48px 0; }

  .section .h2{
    font-size: 26px;
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-align: center;
    margin: 0 0 12px;
  }

  .section header p.muted,
  .section .muted{
    text-align: center;
  }

  .card .muted{ text-align: left; }

  .h3{
    font-size: 16px;
    margin: 0 0 8px;
  }
  .muted{ font-size: 14px; }

  /* rules */
  .rules__head{ margin-bottom: 18px; }
  .rules__lead{ max-width: 34ch; margin: 0 auto; }
  .rules__grid{ grid-template-columns: 1fr; gap: 12px; }

  /* faq (your faq section id) */
  #faq.section{ padding: 44px 0; }
  #faq .faq__head{ margin-bottom: 18px; }
  #faq .faq__grid{ grid-template-columns: 1fr; gap: 12px; }
  #faq .card{ padding: 16px; }

  /* contact */
  .contact__wrap{ grid-template-columns: 1fr; gap: 18px; }
  .contact__left{ text-align: center; align-items: center; gap: 12px; }
  .contact__left p.muted{ max-width: 34ch; margin-left: auto; margin-right: auto; }

  .contact__form{ width: 100%; gap: 12px; }
  .contact__form input,
  .contact__form textarea{
    padding: 14px;
    border-radius: 14px;
    font-size: 16px;
  }
  .contact__form button{
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
  }

  .contact__success{
    border-radius: 16px;
    padding: 14px 16px;
    text-align: left;
  }

  .contact__left .small,
  .contact__form .small{
    text-align: center;
  }
}


/* ===== Reviews ===== */

.reviews__head{ text-align:center; margin:0 0 26px; }
.reviews__titleRow{
  display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap; margin-bottom:10px;
}
.reviews__title{ margin:0; }
.reviews__lead{ margin:0 auto; max-width:720px; }

.reviews__badge{
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  letter-spacing:.2px;
  color:#071017;
  background: rgba(124,247,255,.92);
  box-shadow: 0 10px 26px rgba(124,247,255,.18);
}

/* grid */
.reviews__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1080px){ .reviews__grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px){ .reviews__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .reviews__grid{ grid-template-columns: 1fr; } }

/* card */
.reviewCard{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(124,247,255,.16);
  background: rgba(255,255,255,.03);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.reviewCard:hover{
  transform: translateY(-3px);
  border-color: rgba(124,247,255,.42);
  background: rgba(255,255,255,.04);
}

.reviewCard__media{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  line-height:0;
}
.reviewCard__media img{
  width:100%;
  height:auto;
  display:block;
}

.reviewCard__body{ padding: 14px 14px 16px; }
.reviewCard__name{ font-weight:800; font-size:14px; margin:0 0 6px; }
.reviewCard__meta{ font-weight:700; opacity:.78; font-size:12px; }
.reviewCard__desc{ font-size:13px; line-height:1.35; opacity:.78; }

/* reveal */
.js-reveal{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
  will-change: opacity, transform;
}
.js-reveal.is-in{ opacity:1; transform: translateY(0); }

/* lightbox */
html.isLbOpen{ overflow:hidden; }

.reviewLb{
  position: fixed;
  inset:0;
  display:none;
  z-index: 9999;
}
.reviewLb.is-open{ display:block; }
.reviewLb__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.86);
}
.reviewLb__panel{
  position: relative;
  width: min(980px, calc(100% - 28px));
  margin: 40px auto;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,16,22,.96);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
@media (max-width: 560px){ .reviewLb__panel{ margin: 18px auto; } }

.reviewLb__close{
  position:absolute; top:10px; right:12px;
  width:42px; height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.reviewLb__close:hover{ background: rgba(255,255,255,.10); }

.reviewLb__img{
  display:block;
  width:100%;
  height:auto;
}
.reviewLb__cap{ padding: 14px 16px 16px; }
.reviewLb__name{ font-weight:900; font-size:16px; margin:0 0 4px; }
.reviewLb__desc{ opacity:.78; line-height:1.4; }



/* ===== Reviews: mobile polish (iPhone) ===== */

/* делаем для медиа аккуратную рамку 2:1 */
.reviewCard__media{
  background: rgba(255,255,255,.02);
}

/* на новых браузерах так уже будет ровно */
.reviewCard__media img{
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: contain;
  background: #0b1117; /* чтобы белые поля не резали глаз */
}

/* чуть компактнее подписи на мобиле */
@media (max-width: 520px){
  .reviews__grid{ gap: 14px; }

  .reviewCard__body{ padding: 12px 12px 14px; }
  .reviewCard__name{ font-size: 13px; margin-bottom: 4px; }
  .reviewCard__desc{ font-size: 12.5px; line-height: 1.35; }
}


/* ===== SERVICES: 4 / 2 / 1 grid (fix overflow on some widths) ===== */
.services .grid3{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.services .pack,
.services .pack__top,
.services .pack__title,
.services .pack__price{
  min-width: 0;
}

@media (max-width: 1200px){
  .services .grid3{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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


/* ===== FIX: Lead Modal ===== */
.modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;            /* важно: по умолчанию скрыта */
}

.modal.is-open{
  display: block;           /* показываем только при открытии */
}

.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
}

.modal__panel{
  position: relative;
  width: min(720px, calc(100% - 24px));
  margin: 80px auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,16,22,.96);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  padding: 18px;
}

@media (max-width: 560px){
  .modal__panel{ margin: 18px auto; }
}

.modal__close{
  position:absolute;
  top:10px;
  right:12px;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}

html.is-modal-open{
  overflow: hidden;
}



/* ===== Modal: typography polish ===== */
.modal__head{
  padding: 6px 6px 14px;
  text-align: center;              /* центрируем */
}

.modal__title{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .12em;
  text-transform: uppercase;       /* верхний регистр */
  margin: 0;
}

.modal__text{
  margin-top: 10px;
  max-width: 520px;               /* чтобы читалось */
  margin-left: auto;
  margin-right: auto;
}


.modal__head::after{
  content:"";
  display:block;
  width: 84px;
  height: 1px;
  margin: 14px auto 0;
  background: rgba(124,247,255,.28);
}


.works__actions{
  display:flex;
  gap:14px;
  margin-top:16px;
  flex-wrap:wrap;
}

/* Мобильная версия */
@media (max-width: 520px){
  .works__actions{
    flex-direction: column;
  }

  /* Позвонить первой */
  .works__btnCall{
    order: 0;
  }

  .works__btnTg{
    order: 1;
  }
}



/* ===== Sticky Call Bar (mobile, hero style) ===== */

.callbar{
  position: fixed;
  left: calc(14px + var(--safe-l));
  right: calc(14px + var(--safe-r));
  bottom: 14px;
  z-index: 9998;

  display: none;
  align-items: center;
  justify-content: center;
  gap: .6rem;

  padding: 14px 16px;
  border-radius: 16px;

  border: 1px solid rgba(124,247,255,.35);
  background: linear-gradient(
      180deg,
      rgba(124,247,255,.22),
      rgba(124,247,255,.10)
  );

  color: rgba(232,237,243,.92);
  font-weight: 800;
  text-decoration: none;
  box-shadow:
      0 14px 40px rgba(124,247,255,.10),
      inset 0 1px 0 rgba(255,255,255,.12);

  backdrop-filter: blur(6px);
}

/* показываем только на мобиле */
@media (max-width: 820px){
  .callbar{ display: flex; }
  .callbar.is-hidden{ display: none; }
}

.callbar__icon{
  display:flex;
  align-items:center;
  justify-content:center;
}

.callbar__icon svg{
  width:18px;
  height:18px;
}

/* аккуратный микро-пульс */
.callbar.is-pulse{
  animation: callbarPulse 2.6s ease-in-out infinite;
}

@keyframes callbarPulse{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
}

/* ===== Quiz (mobile-first) ===== */
.quiz .quiz__head{max-width:880px;margin:0 auto 18px;text-align:center}
.quiz .quiz__lead{
  margin: 12px auto 0;
  max-width: 520px;
}

.quiz__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

.quiz__card{
  padding:18px;
  position:relative;
  overflow:hidden;
}

.quiz__kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(255,255,255,.72);
}
.quiz__kicker:before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:var(--acc, #7cf7ff);
  box-shadow:0 0 18px rgba(124,247,255,.35);
}

.quiz__steps{
  position:absolute;
  top:18px; right:18px;
  display:flex; gap:8px;
  opacity:.9;
}
.quiz__dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.18);
}
.quiz__dot.is-on{
  background:var(--acc, #7cf7ff);
  box-shadow:0 0 14px rgba(124,247,255,.35);
}

.quiz__q{margin-top:14px}
.quiz__label{
  font-weight:800;
  font-size:14px;
  margin-bottom:10px;
  color:rgba(255,255,255,.9);
}

.quiz__opts{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.quiz__opt{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.quiz__opt:hover{
  border-color:rgba(124,247,255,.22);
  background:rgba(124,247,255,.04);
}
.quiz__opt input{
  appearance:none;
  width:18px;height:18px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.25);
  position:relative;
  flex:0 0 18px;
}
.quiz__opt input:checked{
  border-color:rgba(124,247,255,.8);
  box-shadow:0 0 0 3px rgba(124,247,255,.12);
}
.quiz__opt input:checked:after{
  content:"";
  position:absolute; inset:4px;
  border-radius:50%;
  background:var(--acc, #7cf7ff);
}
.quiz__opt span{
  font-weight:650;
  color:rgba(255,255,255,.86);
  line-height:1.25;
  font-size:14px;
}

.quiz__bottom{margin-top:16px}
.quiz__note{margin-bottom:12px}

.quiz__cta{
  width:100%;
  justify-content:center;
}

.quiz__micro{
  margin-top:10px;
  text-align:center;
}

/* Side card */
.quiz__side{
  padding:18px;
}
.quiz__sideTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.quiz__sideTitle{
  font-weight:850;
  letter-spacing:.02em;
}
.quiz__pill{
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:750;
  color:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
}
.quiz__sideList{margin-top:8px}
.quiz__sideLine{
  height:1px;
  background:rgba(255,255,255,.10);
  margin:14px 0;
}

/* >= 900px */
@media (min-width: 900px){
  .quiz__grid{
    grid-template-columns: 1.35fr .65fr;
    gap:18px;
    align-items:start;
  }
  .quiz__card{padding:22px}
  .quiz__side{position:sticky; top:92px}
}

/* >= 1200px: чуть плотнее варианты в 2 колонки */
@media (min-width: 1200px){
  .quiz__opts{
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== Quiz contact field (bigger & highlighted) ===== */

.quiz__contact{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(124,247,255,.18);
  background:linear-gradient(180deg,rgba(124,247,255,.06),rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.quiz__contactLabel{
  display:block;
  font-weight:700;
  letter-spacing:.2px;
  margin-bottom:10px;
}

.quiz__contactInput{
  width:100%;
  min-height:56px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.20);
  color:#fff;
  font-size:16px;
  outline:none;
}

.quiz__contactInput:focus{
  border-color:rgba(124,247,255,.55);
  box-shadow:0 0 0 3px rgba(124,247,255,.12);
}

.quiz__contactHint{
  margin-top:10px;
}

@media (min-width:900px){
  .quiz__contactInput{
    min-height:60px;
    font-size:17px;
  }
}