/* ==========================================================================
   index.css — стили только для главной страницы (newindex.php)
   Содержит уникальные раскладки, размеры и эффекты, не обязательные для всех.
   ========================================================================== */

/* ---- HERO ---- */
.hero{position:relative; padding:54px 0 24px}
.hero::before{
  content:""; position:absolute; left:0; right:0; top:0; bottom:300px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 80% 0, rgba(106,92,255,.14), transparent 60%),
    radial-gradient(900px 500px at 0% 0, rgba(255,47,185,.12), transparent 55%);
}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center}
.super{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  border:1px solid var(--stroke); background:var(--glass); color:var(--muted); font-size:14px
}
.super b{color:var(--text)}
.title{font-size:54px; line-height:1.03; margin:12px 0 14px; letter-spacing:.2px}
.title strong{
  background:linear-gradient(135deg, var(--accent1), var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent
}
@supports not (-webkit-background-clip:text){ .title strong{ color:var(--accent2) } }
.sub{color:var(--muted); font-size:20px; line-height:1.5; max-width:60ch}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 0}

.hero-card{
  position:relative; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--stroke); border-radius:var(--radius-xl); padding:22px; box-shadow:var(--shadow);
  display:flex; justify-content:center
}
.orb{
  aspect-ratio:1/1; border-radius:28px; position:relative; overflow:hidden;
  background:
    radial-gradient(480px 320px at 70% 15%, rgba(255,47,185,.42), rgba(255,47,185,.04) 55%),
    radial-gradient(560px 420px at 30% 85%, rgba(106,92,255,.45), rgba(106,92,255,.04) 60%),
    linear-gradient(180deg, #12131a, #0f1116)
}
.orb::after{content:""; position:absolute; inset:12px; border-radius:20px; border:1px dashed rgba(255,255,255,.12)}
.hero-illus{display:grid; gap:12px}
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--stroke); border-radius:999px; color:#ffffff; font-size:13px}
.hero-image{display:block; position:relative; height:100%; aspect-ratio:791/984}

/* ---- TRUST / KPIs (уникальная сетка главной) ---- */
.trust{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:26px 0 0}
.trust .mini{background:var(--glass); border:1px solid var(--stroke); border-radius:14px; padding:12px; color:var(--muted); font-size:14px}
.mini b{color:var(--text)}

/* ---- FEATURE CARDS (раскладка страницы) ---- */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.ic{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent1), var(--accent2)); box-shadow:0 6px 22px rgba(106,92,255,.35)
}
.card h3{margin:10px 0 6px; font-size:20px}
.card p{margin:0; color:var(--muted); line-height:1.5}

/* ---- ECOSYSTEM STRIP (страничная) ---- */
.eco{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.eco .tile{
  display:flex; align-items:center; gap:12px; padding:14px;
  background:var(--glass); border:1px solid var(--stroke); border-radius:16px
}
.eco .tile strong{font-size:18px}

/* ---- TESTIMONIALS (страничная) ---- */
.testis{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.quote{background:var(--glass); border:1px solid var(--stroke); border-radius:16px; padding:16px}
.stars{letter-spacing:2px; font-size:14px}
.who{margin-top:8px; color:var(--muted); font-size:14px}

/* ---- SOCIALS / DEV (страничные блоки) ---- */
.socials{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.social-tile{
  display:flex; align-items:center; gap:12px; padding:18px; background:var(--glass); border:1px solid var(--stroke); border-radius:16px
}
.social-ic{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg, var(--accent1), var(--accent2))}
.social-tile strong{font-size:18px}

.dev-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.dev-card{
  display:flex; align-items:center; gap:12px; padding:18px; background:var(--glass); border:1px solid var(--stroke); border-radius:16px
}
.dev-ic{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg, var(--accent1), var(--accent2))}
.dev-card strong{font-size:18px}

/* ---- RESPONSIVE (только для раскладок этой страницы) ---- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr; gap:22px}
  .title{font-size:44px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .eco{grid-template-columns:repeat(2,1fr)}
  .testis{grid-template-columns:1fr 1fr}
  .socials{grid-template-columns:1fr 1fr}
  .dev-tiles{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .trust{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr} /* если используешь на главной */
  .testis{grid-template-columns:1fr}
  .dev-tiles{grid-template-columns:1fr}
}

/* ==========================================================================
   index.css — MOBILE ADD-ONS (append)
   ========================================================================== */

/* Safe-area для вырезов (iOS/Android) */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Базовые подстраховки переполнений */
.title, .sub, .pill, .cta-row, .card p, .social-tile strong, .dev-card strong{
  word-break: break-word;
}
.cta-row .btn{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* Более плавная типографика на всех ширинах */
.title{ font-size: clamp(28px, 6.5vw, 54px) }    /* перекрывает 54px и 44px ниже по файлу */
.sub{   font-size: clamp(16px, 4.2vw, 20px) }

/* Hero: отступы + safe-area */
.hero{ padding: calc(40px + var(--safe-top)) 0 24px }

/* Картинки в hero и иллюстрациях не тянут высоту контейнеров */
.hero-card{ margin: 0 auto; width: min(880px, 100%) }
.orb{ max-width: 100% } /* не вылезает за карточку */
.pill{ flex-wrap: wrap }

/* KPI/Trust плитки — более читаемо на телефонах */
.trust .mini{ font-size: 13.5px }

/* Узкие брейкпоинты (дополнение к имеющимся 1024/640) */
@media (max-width: 480px){
  .hero{ padding: calc(32px + var(--safe-top)) clamp(12px, 4vw, 20px) 20px }
  .super{ font-size:13px; padding:6px 10px }
  .title{ line-height:1.08; letter-spacing: .1px }
  .cta-row{ gap:10px; margin-top:18px }

  .trust{ grid-template-columns:1fr }          /* остаётся одной колонкой */
  .cards{ grid-template-columns:1fr }          /* уже задано на 640 — дубль-страховка */
  .eco{ grid-template-columns:1fr }            /* было 3→2 на 1024; на 480 → 1 */
  .testis{ grid-template-columns:1fr }         /* компактнее цитаты */
  .socials{ grid-template-columns:1fr }        /* было 2 на 1024/640; на 480 → 1 */
  .dev-tiles{ grid-template-columns:1fr }      /* тоже в одну колонку */

  .ic, .social-ic, .dev-ic{ width:38px; height:38px } /* меньше крупные иконки */
  .card h3{ font-size:18px }
  .quote{ padding:14px }
  .eco .tile, .social-tile, .dev-card{ padding:14px }
}

/* Совсем узкие устройства (старые 360px) */
@media (max-width: 360px){
  .title{ font-size: clamp(26px, 7.2vw, 32px) }
  .super{ padding:5px 8px }
  .pill{ padding:5px 8px; font-size:12.5px }
  .hero{ padding: calc(24px + var(--safe-top)) 10px 16px }
}

/* Безопасная нижняя кромка под системные жесты */
body{ padding-bottom: var(--safe-bottom) }

.social-ic{
  width:42px; height:42px;
  border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent1), var(--accent2));
  line-height:0;            /* убирает лишние отступы, если внутри emoji/текст */
}
.social-ic > img{
  display:block;
  max-width:80%;
  max-height:80%;
  width:auto; height:auto;
  object-fit:contain;       /* влезает без искажений */
}
/* раньше было 30×30 — убираем фикс */
.cardIcon{ width:auto; height:auto; }
@media (max-width:480px){
  .social-ic{ width:38px; height:38px; }
}