/* Главная страница index.html */

/* ============================================================
   BODY LAYOUT
   ============================================================ */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   CANVAS
   ============================================================ */
#canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ============================================================
   ORB AMBIENT LIGHTS  — mobile-first (viewport-relative sizes)
   ============================================================ */
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  pointer-events: none;
  animation: drift 18s ease-in-out infinite alternate;
}
.orb-1 {
  width:  clamp(15rem, 60vw, 37.5rem);   /* 240px → 600px */
  height: clamp(15rem, 60vw, 37.5rem);
  background: radial-gradient(circle, rgba(99,102,241,.18) 0%, transparent 70%);
  top: -20%; left: -15%;
  animation-delay: 0s;
}
.orb-2 {
  width:  clamp(12.5rem, 50vw, 31.25rem); /* 200px → 500px */
  height: clamp(12.5rem, 50vw, 31.25rem);
  background: radial-gradient(circle, rgba(6,182,212,.14) 0%, transparent 70%);
  bottom: -15%; right: -10%;
  animation-delay: -8s;
}
.orb-3 {
  width:  clamp(10rem, 40vw, 25rem);      /* 160px → 400px */
  height: clamp(10rem, 40vw, 25rem);
  background: radial-gradient(circle, rgba(139,92,246,.12) 0%, transparent 70%);
  top: 40%; left: 50%;
  transform: translateX(-50%);
  animation-delay: -4s;
}

@keyframes drift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(40px,-30px) scale(1.05); }
  100% { transform: translate(-20px,40px) scale(.97); }
}

/* ============================================================
   LANGUAGE TOGGLE  — fixed-position override for index page
   ============================================================ */
.lang-switch {
  position: fixed;
  top: 0.875rem;    /* 14px — mobile */
  right: 0.875rem;
  z-index: 100;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: fadeDown 0.55s cubic-bezier(.16,1,.3,1) 0.1s both;
}

/* ============================================================
   PAGE CONTAINER  — mobile-first
   ============================================================ */
.page {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 47.5rem;   /* 760px */
  padding: 3.75rem 1rem 2.5rem;  /* 60px 16px 40px — mobile */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;          /* 24px — mobile */
  text-align: center;
  animation: fadeUp .7s cubic-bezier(.16,1,.3,1) both;
}

/* Eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: rgba(59,130,246,0.1);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: var(--r-full);
  font-size: 0.625rem;  /* 10px — mobile */
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-blue);
  animation: fadeUp .6s cubic-bezier(.16,1,.3,1) .05s both;
}
.eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-blue);
  box-shadow: 0 0 8px var(--accent-blue);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .6; transform: scale(.75); }
}

/* Headline */
.headline {
  font-size: clamp(2rem, 8vw, 4rem); /* 32px → 64px */
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  animation: fadeUp .7s cubic-bezier(.16,1,.3,1) .1s both;
}
.headline-gradient {
  background: linear-gradient(135deg, #a5b4fc 0%, #60a5fa 40%, #22d3ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtitle */
.subtitle {
  font-size: clamp(0.875rem, 2.5vw, 1.125rem); /* 14px → 18px */
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.6;
  max-width: 30rem;     /* 480px */
  animation: fadeUp .7s cubic-bezier(.16,1,.3,1) .18s both;
}

/* ============================================================
   TYPING LINE
   ============================================================ */
.typing-line {
  font-size: clamp(0.875rem, 2.5vw, 1.25rem); /* 14px → 20px */
  font-weight: 500;
  color: rgba(200,200,240,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  animation: fadeUp .7s cubic-bezier(.16,1,.3,1) .22s both;
  flex-wrap: wrap;
  text-align: center;
}
.typing-word {
  background: linear-gradient(135deg, #a5b4fc 0%, #60a5fa 45%, #22d3ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 500;
  min-width: 2px;
}
.typing-cursor {
  display: inline-block;
  color: var(--accent-blue);
  font-weight: 300;
  opacity: 1;
  margin-left: 1px;
  animation: cursor-blink 0.75s step-end infinite;
  -webkit-text-fill-color: var(--accent-blue);
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
html[lang="ru"] #typingPrefix { padding-right: 5px; }

/* ============================================================
   AI BADGES
   ============================================================ */
.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;          /* 8px — mobile */
  max-width: 40rem;     /* 640px */
  animation: fadeUp .7s cubic-bezier(.16,1,.3,1) .26s both;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;    /* tighter on mobile */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 0.75rem;   /* 12px — mobile */
  font-weight: 500;
  color: rgba(220,220,255,.85);
  cursor: default;
  transition: all .22s cubic-bezier(.16,1,.3,1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  user-select: none;
}
.badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .22s;
}
.badge:hover { border-color: rgba(255,255,255,.22); color: #fff; transform: translateY(-2px); }
.badge:hover::before { opacity: 1; }

.badge-icon {
  width: 18px; height: 18px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
}
.badge-icon img { width: 14px; height: 14px; display: block; object-fit: contain; }
.b-chatgpt .badge-icon img,
.b-grok    .badge-icon img  { filter: brightness(0) invert(1); }

.b-chatgpt:hover  { box-shadow: 0 0 20px rgba(16,185,129,.35);  border-color: rgba(16,185,129,.4); }
.b-claude:hover   { box-shadow: 0 0 20px rgba(251,146,60,.35);   border-color: rgba(251,146,60,.4); }
.b-deepseek:hover { box-shadow: 0 0 20px rgba(99,102,241,.4);    border-color: rgba(99,102,241,.45); }
.b-nano:hover     { box-shadow: 0 0 20px rgba(234,179,8,.35);    border-color: rgba(234,179,8,.4); }
.b-grok:hover     { box-shadow: 0 0 20px rgba(236,72,153,.35);   border-color: rgba(236,72,153,.4); }
.b-dalle:hover    { box-shadow: 0 0 20px rgba(239,68,68,.35);    border-color: rgba(239,68,68,.4); }
.b-gemini:hover   { box-shadow: 0 0 20px rgba(59,130,246,.4);    border-color: rgba(59,130,246,.45); }

/* ============================================================
   DIVIDER
   ============================================================ */
.divider {
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.12), transparent);
  margin: 2rem 0;       /* 32px — mobile */
  animation: fadeUp .5s cubic-bezier(.16,1,.3,1) .35s both;
}

/* ============================================================
   CTA BLOCK
   ============================================================ */
.cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;          /* 24px */
  width: 100%;
  position: relative;
  animation: fadeUp .7s cubic-bezier(.16,1,.3,1) .4s both;
}
.cta-label {
  font-size: 0.6875rem; /* 11px */
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.btn-row {
  display: flex;
  flex-direction: column;   /* stack on mobile */
  align-items: stretch;     /* full-width buttons (cross-axis stretch) */
  gap: 0.75rem;             /* 12px */
  width: 85%;
}

/* CTA glow — constrained on mobile */
.cta-glow {
  position: absolute;
  width: min(31.25rem, 90vw); /* 500px capped to 90vw */
  height: 12.5rem;            /* 200px */
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(99,102,241,.12) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  animation: cta-pulse 3s ease-in-out infinite;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
}
@keyframes cta-pulse {
  0%, 100% { opacity: .6; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;  transform: translateX(-50%) scale(1.08); }
}

/* ============================================================
   FOOTER NOTE
   ============================================================ */
.footer-note {
  margin-top: 2.5rem;   /* 40px — mobile */
  font-size: 0.6875rem; /* 11px */
  color: rgba(150,150,180,.35);
  letter-spacing: .06em;
  text-align: center;
  animation: fadeUp .6s cubic-bezier(.16,1,.3,1) .55s both;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS  (mobile-first, min-width)
   ============================================================ */

/* ── 375px — Standard phones ── */
@media (min-width: 23.4375rem) {
  .lang-switch { top: 0.875rem; right: 0.875rem; }
  .eyebrow { font-size: 0.6875rem; /* 11px */ padding: 6px 16px; }
  .hero { gap: 1.75rem; }
  .badge  { font-size: 0.875rem; /* 14px */ }
}

/* ── 480px — Large phones / small foldables ── */
@media (min-width: 30rem) {
  .page   { padding: 3.75rem 1.25rem 2.5rem; }
  .hero   { gap: 2rem; }
  .badge  { padding: 8px 15px;}
  .badges { gap: 0.625rem; }
}

/* ── 768px — Tablets portrait ── */
@media (min-width: 48rem) {
  .page { padding: 3rem 1.5rem 4rem; }
  .lang-switch { top: 1.375rem; right: 1.625rem; }
  .btn-row {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .divider    { margin: 1.8rem 0; }
  .footer-note { margin-top: 3.5rem; }
}

/* ── 1024px — Tablets landscape / small laptops ── */
@media (min-width: 64rem) {
  .page { max-width: 50rem; /* ~800px */ }
  .hero { gap: 2rem; }
}

/* ── 1280px — Standard laptops ── */
@media (min-width: 80rem) {
  .page { max-width: 52.5rem; /* ~840px */ }
}

/* ── 1440px — Large desktops ── */
@media (min-width: 90rem) {
  .page { max-width: 56.25rem; /* ~900px */ }
  .divider { margin: 2.5rem 0; }
  .footer-note { margin-top: 3.5rem; }
}

/* ── 1920px — Full HD ── */
@media (min-width: 120rem) {
  .page { max-width: 62.5rem; /* 1000px */ padding: 6rem 2rem 5rem; }
  .hero { gap: 2.5rem; }
  .divider { height: 4rem; margin: 3rem 0; }
  .footer-note { margin-top: 4rem; font-size: 0.75rem; }
  .eyebrow { font-size: 0.75rem; padding: 7px 18px; }
}

/* ── 2560px — 2K / 4K ── */
@media (min-width: 160rem) {
  .page { max-width: 75rem; /* 1200px */ padding: 7rem 2rem 6rem; }
  .hero { gap: 3rem; }
  .eyebrow { font-size: 0.8125rem; padding: 8px 20px; }
  .badges { gap: 0.75rem; }
  .badge  { padding: 10px 18px; font-size: 0.9375rem; }
  .divider { margin: 4rem 0; height: 4.5rem; }
  .footer-note { margin-top: 5rem; font-size: 0.8125rem; }
  .cta-label { font-size: 0.8125rem; }
}