/* ---------- CSS RESET (мягкий) ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{ margin:0; }
ul[role='list'],ol[role='list']{ list-style:none; }
img,picture{ max-width:100%; display:block; }
input,button,textarea,select{ font:inherit; }

/* ---------- BASE TOKENS ---------- */
:root{
  --bg: #0c0d0f;
  --fg: #e9edf1;
  --muted: #b7c0cc;
  --brand: #7AD1FF;        /* акцент */
  --card: rgba(20,21,24,0.72);
  --card-b: rgba(255,255,255,0.12);
  --ring: rgba(122,209,255,0.55);

  --wrap: clamp(16px, 5vw, 24px);
  --maxw: 1220px;

  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --shadow-1: 0 6px 24px rgba(0,0,0,0.25);
  --shadow-2: 0 10px 36px rgba(0,0,0,0.35);
}

/* авто светлая тема */
@media (prefers-color-scheme: light){
  :root{
    --bg: #f8fafc;
    --fg: #0b0f14;
    --muted: #425160;
    --card: rgba(255,255,255,0.82);
    --card-b: rgba(0,0,0,0.08);
    --shadow-1: 0 6px 20px rgba(0,0,0,0.08);
    --shadow-2: 0 12px 36px rgba(0,0,0,0.12);
  }
}

/* ---------- GLOBAL ---------- */
html{ scroll-behavior:smooth; }
:target{ scroll-margin-top: 96px; }

body{
  font-family: system-ui, -apple-system, "SF Pro Text", Segoe UI, Roboto, Inter, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
}

/* фон-текстура + оверлей */
.bg-layer{
  position: fixed;
  inset: 0;
  z-index: -2;
}
.bg-layer picture, .bg-layer img{
  width: 100%; height: 100%;
  object-fit: cover; filter: saturate(0.9);
}
.bg-overlay{
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 50% 10%, rgba(0,0,0,0.25), transparent 60%),
    rgba(0,0,0,0.36); /* тёмнее на 20% как просили */
  z-index: 1;
}
@media (prefers-color-scheme: light){
  .bg-overlay{
    background:
      radial-gradient(80% 60% at 50% 10%, rgba(255,255,255,0.35), transparent 60%),
      rgba(255,255,255,0.10);
  }
}

/* контейнер */
.wrap{ width:min(100% - 2*var(--wrap), var(--maxw)); margin-inline:auto; }

/* ---------- HEADER ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  backdrop-filter: blur(8px);
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--card-b) 70%, transparent);
}
.brand{
  display:flex; align-items:center; gap:12px;
  padding: 14px var(--wrap);
  width: fit-content; margin-inline:auto; /* по центру */
  text-decoration:none; color:var(--fg); font-weight:800;
  letter-spacing:.3px;
}
.brand__logo{ width:28px; height:28px }
.brand__logo--dark{ display:none; }
@media (prefers-color-scheme: light){
  .brand__logo--light{ display:none; }
  .brand__logo--dark{ display:block; }
}

/* ---------- HERO ---------- */
.hero{ padding: clamp(48px, 10vw, 120px) 0 48px; }
.hero__grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(20px,4vw,40px); align-items:center; }
@media (max-width: 980px){ .hero__grid{ grid-template-columns: 1fr; } }

.h1{
  font-size: clamp(36px, 7vw, 74px);
  line-height: 1.08;
  letter-spacing:-0.02em;
  font-weight: 900;
  margin-bottom: 14px;
}
.accent{ color: var(--brand); }
.lead{ color: var(--muted); font-size: clamp(16px,2.2vw,18px); margin: 14px 0 22px; }

.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 16px; }
.btn{
  --p: 12px 18px;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding: var(--p);
  border-radius: 12px; text-decoration:none; font-weight:800;
  border: 2px solid transparent;
}
.btn--primary{
  background: linear-gradient(135deg,#78c7ff,#7af);
  color:#06131b; box-shadow: var(--shadow-1);
}
.btn--primary:hover{ transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn--ghost{
  background: transparent; color: var(--fg);
  border-color: color-mix(in oklab, var(--brand) 40%, transparent);
}
.btn--lg{ --p: 14px 22px; font-size: 18px; }

.hero__bullets{ display:flex; gap:14px; padding:0; list-style:none; color:var(--muted); flex-wrap:wrap; }
.hero__bullets li::before{ content:"• "; color:var(--brand); }

/* ---------- CARDS (why people love) ---------- */
.section{ padding: clamp(36px, 7vw, 72px) 0; }
.h-underline{
  font-size: clamp(24px,3.8vw,34px);
  margin-bottom: 12px; font-weight:900; letter-spacing:.2px;
  position:relative; width:fit-content;
}
.h-underline::after{
  content:""; display:block; height:4px; width:48px; margin-top:8px;
  background: linear-gradient(90deg, var(--brand), transparent);
  border-radius: 999px;
}
.subtle{ color: var(--muted); margin-bottom: 22px; }

.feature-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,2.2vw,22px);
}
@media (max-width: 980px){ .feature-grid{ grid-template-columns: 1fr; } }

.card{
  background: color-mix(in oklab, var(--card) 96%, transparent);
  border: 1px solid var(--card-b);
  border-radius: var(--radius-lg);
  padding: clamp(16px,2.4vw,20px);
  box-shadow: var(--shadow-1);
}
.card h3{ font-weight:900; margin-bottom:8px; }
.card p{ color: var(--muted); }

/* ---------- TOOLS GRID (с иконками) ---------- */
.tools-grid{
  display:grid; gap: clamp(16px,2.4vw,22px);
  grid-template-columns: repeat(2,1fr);
}
@media (max-width: 980px){ .tools-grid{ grid-template-columns: 1fr; } }

.tool{
  background: color-mix(in oklab, var(--card) 96%, transparent);
  border: 1px solid var(--card-b);
  border-radius: var(--radius-lg);
  padding: clamp(18px,2.6vw,24px);
  box-shadow: var(--shadow-1);
  display:grid; grid-template-columns: 80px 1fr; gap: 14px; align-items:center;
}
.tool__icon{
  width:64px; height:64px; justify-self:center; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
}
.tool h3{ font-weight:900; margin-bottom:6px; }
.tool p{ color: var(--muted); }

/* ---------- HOW ---------- */
.steps{
  counter-reset: s; display:grid; gap:10px; padding:0; margin:0;
}
.steps li{
  list-style:none; padding-left:40px; position:relative; color:var(--muted);
}
.steps li strong{ color:var(--fg); }
.steps li::before{
  counter-increment:s; content: counter(s);
  position:absolute; left:0; top:.1em;
  width:28px; height:28px; display:grid; place-items:center;
  border-radius:999px; font-weight:900; color:#06131b;
  background: linear-gradient(135deg,#78c7ff,#7af);
}

/* ---------- WAITLIST ---------- */
.waitlist-form{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-top: 10px;
}
.waitlist-form input{
  min-width: min(100%, 420px);
  background: color-mix(in oklab, var(--card) 94%, transparent);
  color: var(--fg);
  border: 3px solid color-mix(in oklab, var(--brand) 30%, transparent); /* толще */
  border-radius: 12px; padding: 12px 14px;
  outline: none;
}
.waitlist-form input:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring);
}
.form-note{ color: var(--muted); width:100%; }

/* ---------- FAQ ---------- */
#faq{
  position: relative;
  background: color-mix(in oklab, var(--bg) 32%, transparent);
  backdrop-filter: blur(4px);
  border-radius: 16px;
  padding: clamp(20px, 3vw, 32px);
}
details.faq{
  padding: 18px 0;
  border-top: 3px solid color-mix(in oklab, var(--card-b) 70%, transparent);
}
details.faq:first-of-type{ border-top: none; }
details.faq[open]{
  background: color-mix(in oklab, var(--card) 92%, transparent);
  border-radius: 12px;
  padding: 18px 16px;
}
details.faq summary{
  list-style: none;
  cursor: pointer;
  font-weight: 900;
  color: var(--fg);
}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq p{ margin: 10px 0 0; color: var(--muted); line-height:1.6; }

@media (prefers-color-scheme: dark){
  #faq{
    background: color-mix(in oklab, #000 36%, transparent);
  }
  details.faq[open]{
    background: color-mix(in oklab, #000 24%, transparent);
  }
}

/* ---------- FOOTER ---------- */
.site-footer{
  padding: 28px 0 48px;
  color: var(--muted);
  text-align: center;
}

/* утилити */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.bg-layer picture,
.bg-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45); /* затемнение для dark */
  z-index: 1;
}

@media (prefers-color-scheme: light) {
  .bg-overlay {
    background: rgba(255,255,255,0.90); /* подсветка для light */
  }
}

.feature-card {
  background: rgba(255, 255, 255, 0.85); /* светлая подложка */
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;                /* выравнивание текста */
  display: flex;
  flex-direction: column;            /* иконка сверху, текст ниже */
  align-items: center;               /* центр по горизонтали */
  justify-content: center;           /* центр по вертикали */
  gap: 1rem;                         /* расстояние между иконкой, заголовком и текстом */
  min-height: 240px;                 /* фиксированная высота для равномерности */
}

.feature-card img {
  width: 48px;
  height: 48px;
  margin-bottom: 0.5rem;
}

.feature-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.feature-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* =========================
   FIX: center features cards
   ========================= */
#features .feature-grid > .card,
#features .feature-grid > article,
.tools-grid > .card,
.tools-grid > article,
.section .feature-grid > .card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;   /* по центру горизонтально */
  justify-content: center !important;/* по центру вертикально */
  text-align: center !important;
  gap: 1rem !important;
  min-height: 260px;                 /* одинаковая высота карточек */
  padding: 1.75rem 1.25rem !important;
}

/* Иконка сверху — одна высота */
#features .card .icon,
.feature-grid .card .icon,
#features .card > img:first-child,
#features .card svg:first-child {
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* Убираем серую «плашку» под иконкой (если есть) */
#features .card .icon-chip {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Заголовок и текст без лишних отступов + читабельная ширина */
#features .card h3,
.feature-grid .card h3 {
  margin: 0 !important;
  font-weight: 700;
}

#features .card p,
.feature-grid .card p {
  margin: 0 !important;
  max-width: 42ch;
}

.hero__visual {
  display: grid;
  place-items: center;
}

.app-mock img,
.app-mock source {
  /* просто чтобы родитель не ужимался */
}

.app-mock img {
  width: min(520px, 85vw);
  height: auto;
  border-radius: 18px;          /* если картинка без рамки телефона — можно 0 */
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.35));
  display: block;
}