/* Minimal, responsive, accessible. Не ломает чужие стили. */
:root{
  --bg: #0b0f14;
  --bg-soft:#0f141b;
  --card:#121823;
  --text:#e7ecf3;
  --muted:#9fb0c3;
  --brand:#59d185;
  --brand-2:#7aa7ff;
  --ring: 0 0 0 3px color-mix(in oklab, var(--brand) 25%, transparent);
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f9fc; --bg-soft:#fff; --card:#fff; --text:#0b1220; --muted:#465160;
    --brand:#1a7f4b; --brand-2:#2b63c7;
    --shadow: 0 12px 30px rgba(10,20,40,.08);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Pixelify Sans", Arial, sans-serif;
  background: radial-gradient(1200px 800px at 10% -10%, color-mix(in oklab, var(--brand-2) 10%, transparent), transparent) no-repeat,
              radial-gradient(1000px 700px at 110% 10%, color-mix(in oklab, var(--brand) 12%, transparent), transparent) no-repeat,
              var(--bg);
  color:var(--text);
}

.visually-hidden{position:absolute!important; width:1px; height:1px; margin:-1px; clip:rect(0 0 0 0); overflow:hidden}
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; background:#000; color:#fff; padding:10px 14px; border-radius:8px; z-index:9999}

.container{width:min(1100px, 92vw); margin-inline:auto}

.site-header{
  position:sticky; top:0; z-index:50;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom:1px solid color-mix(in oklab, var(--text) 10%, transparent);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{display:flex; align-items:center; gap:.35rem; text-decoration:none; color:var(--text); font-weight:700}
.logo-mark{font-family: "Press Start 2P", monospace; color:var(--brand-2)}
.logo-text .accent{color:var(--brand)}


.site-main{padding-block: 32px}

.hero{padding-block: 64px}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:36px; align-items:center}
@media (max-width: 900px){
  .hero-inner{grid-template-columns: 1fr}
}
.hero-title{
  font-size: clamp(28px, 3.5vw, 44px);
  line-height:1.1;
  margin: 0 0 12px;
}
.hero-subtitle{color:var(--muted); margin:0 0 18px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 10px}

.btn{
  --bgc: var(--card);
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius: 12px; text-decoration:none; color:var(--text);
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn:focus{outline:none; box-shadow: var(--ring)}
.btn-ghost{background:transparent}

.hero-highlights{display:flex; gap:14px; color:var(--muted); padding:0; margin:14px 0 0; list-style:none; flex-wrap:wrap}
.hero-highlights i{opacity:.9}

.hero-art{display:grid; place-items:center}
.code-card{
  background: var(--card);
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  width:min(520px, 88vw);
}
.code-card__dots{display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid color-mix(in oklab, var(--text) 10%, transparent)}
.code-card__dots span{width:10px; height:10px; border-radius:50%}
.code-card__dots span:nth-child(1){background:#ff5f56}
.code-card__dots span:nth-child(2){background:#ffbd2e}
.code-card__dots span:nth-child(3){background:#27c93f}
.code-card__pre{
  margin:0; padding:18px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: color-mix(in oklab, var(--text) 90%, #a6ffc7);
  background:
    linear-gradient(180deg, transparent 0 60%, color-mix(in oklab, var(--brand) 9%, transparent)) no-repeat;
  min-height:160px; white-space:pre-wrap;
}

.section-title{font-size: clamp(22px, 2.5vw, 30px); margin:0 0 18px}

.languages{padding-block: 34px}
.languages-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 1100px){ .languages-grid{grid-template-columns: repeat(4, 1fr)} }
@media (max-width: 700px){ .languages-grid{grid-template-columns: repeat(2, 1fr)} }

.language-card{
  position:relative; isolation:isolate;
  background: var(--card);
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  border-radius: 16px; padding:18px 16px;
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
  min-height:72px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.language-card.large{min-height:86px}
.language-card i{font-size:28px}
.language-card span{font-weight:600}
.language-card::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(400px 120px at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--brand-2) 18%, transparent), transparent);
  opacity:0; transition:opacity .18s ease;
  border-radius: inherit; z-index:-1;
}
.language-card:hover{transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in oklab, var(--brand) 40%, transparent)}
.language-card:hover::after{opacity:1}
.language-card:focus{outline:none; box-shadow: var(--ring)}

.features{padding-block: 44px}
.features-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px){ .features-grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 640px){ .features-grid{grid-template-columns: 1fr} }
.feature{
  background: var(--card);
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  border-radius: var(--radius);
  padding:18px;
}
.feature i{font-size:22px; color:var(--brand)}
.feature h3{margin:10px 0 8px; font-size:18px}
.feature p{margin:0; color:var(--muted)}

.cta{padding-block: 46px}
.cta-inner{
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 10%, transparent), transparent), var(--card);
  border:1px solid color-mix(in oklab, var(--brand) 35%, transparent);
  border-radius: 18px; padding:28px; text-align:center; box-shadow: var(--shadow);
}
.cta h2{margin:0 0 8px}
.cta p{margin:0 0 16px; color:var(--muted)}
.cta-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

.site-footer{padding:26px 0; border-top:1px solid color-mix(in oklab, var(--text) 10%, transparent)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.footer-links{margin:0; padding:0; list-style:none; display:flex; gap:12px}
.footer-links a{color:var(--muted); text-decoration:none}
.footer-links a:hover{color:var(--text)}
@media (max-width: 700px){
  .footer-inner{flex-direction:column; text-align:center}
}

/* Лёгкая «магия» подсветки под курсором на карточках */
.languages-grid .language-card{
  --mx: 50%;
  --my: 50%;
}
.languages-grid .language-card:hover{will-change: transform}
.languages-grid .language-card:where(:hover, :focus-visible){
  animation: breathe .8s ease;
}
@keyframes breathe{
  from{transform: translateY(0)}
  50%{transform: translateY(-1px)}
  to{transform: translateY(-2px)}
}

/* Снижение анимаций для тех, кому не весело от прыгающего UI */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}




/* ===== Modal Base ===== */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 1000;
}

.modal[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.modal[aria-hidden="false"] .modal-backdrop {
  opacity: 1;
}

.modal-dialog {
  position: relative;
  background: var(--card);
  color: var(--text);
  padding: 2rem;
  border-radius: var(--radius);
  max-width: 380px;
  width: 90%;
  z-index: 1001;
  box-shadow: var(--shadow);
  text-align: center;
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
}

.modal[aria-hidden="false"] .modal-dialog {
  transform: translateY(0);
  opacity: 1;
}

.modal h2 {
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
  color: var(--text);
}

/* ===== Close Button ===== */
.modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: color-mix(in oklab, var(--text) 10%, transparent);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.4rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: color-mix(in oklab, var(--text) 20%, transparent);
  transform: scale(1.1);
}

/* ===== Social Links ===== */
.social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.social-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--text) 10%, transparent);
  font-size: 1.7rem;
  color: var(--text);
  transition: background 0.25s, transform 0.2s;
  text-decoration: none;
}

.social-card:hover {
  transform: translateY(-3px) scale(1.1);
  background: color-mix(in oklab, var(--text) 20%, transparent);
}

/* Сохранение цветов брендов для иконок */
.social-card[href*="t.me"] { color: #0088cc; }
.social-card[href*="wa.me"] { color: #25D366; }
.social-card[href*="github.com"] { color: var(--text); }

/* ===== Focus styles ===== */
.modal-close:focus,
.social-card:focus {
  outline: none;
  box-shadow: var(--ring);
}