/* FRAME960 — styles.css
   Contemporary, fashion-forward single page styles (black-first)
*/
:root{
  --bg:#000;
  --paper:#0b0b0b;
  --muted:#9b9b9b;
  --accent:#fff;
  --glass: rgba(255,255,255,0.04);
  --max-width:1200px;
    --page-padding: 24px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--accent);
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, 'Helvetica Neue', Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
.container{  max-width: var(--max-width);margin: 0 auto; padding: 0 24px;}

h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 2px; /* можно чуть поджать, Bebas Neue узкий */
    font-weight: 400;    /* у него всего один вес, не делай bold */
    text-transform: uppercase; /* опционально, если хочешь как в логотипе */
}


/* Хедер на весь экран */
.site-header {
    min-height: 100vh;                 /* занимает весь экран */
    display: flex;
    flex-direction: column;
    justify-content: center;           /* герой по центру */
    align-items: stretch;
    padding-top: 96px;                 /* отступ сверху, чтобы меню не перекрывало hero */
    padding-bottom: 32px;
}

/* Фиксированное меню */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;                       /* чтобы не пряталось за контентом */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px var(--page-padding); /* горизонтальные отступы по сетке */
    background: rgba(0, 0, 0, 0.6);    /* лёгкий полупрозрачный фон */
    backdrop-filter: blur(6px);        /* эффект стекла */
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* логотип */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    color: var(--accent);
}

.nav-logo img {
    display: block;
    max-height: 72px;
    object-fit: contain;
}

/* текст логотипа */
.brand-text {
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 4px;
}

/* ссылки меню */
.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 18px;
}

.nav-links a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: var(--accent);
}


.hero{padding-top:24px}
.hero-title{font-size:clamp(48px,9vw,140px);margin:0;letter-spacing:6px;font-weight:900}
.hero-sub{font-weight:300;color:var(--muted);font-size:18px;margin:18px 0 28px;max-width:720px}
.cta{display:inline-block;padding:14px 22px;border:1px solid var(--accent);color:var(--accent);text-decoration:none;font-weight:600;border-radius:4px}
.cta:hover{background:var(--glass)}

.section {
    padding: clamp(72px, 10vh, 128px) 0; /* немного увеличили отступ сверху */
}
.section--dark {
    background: linear-gradient(0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
.section--center{text-align:left}
.section-title{font-size: clamp(18px, 2vw, 24px);letter-spacing:3px;font-weight:700;margin:0 0 12px}

.lead{color:var(--muted);max-width:920px;margin:8px 0 18px;font-size: clamp(14px, 1.3vw, 18px);}
.features{margin-top:18px;display:grid;gap:12px}
.features li{color:var(--muted)}

.grid{display:grid;gap:18px}
.grid--platforms{grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));align-items:stretch}
.card{flex: 1 1 220px;display:flex;gap:16px;align-items:center;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border-radius:8px;text-decoration:none;color:inherit;border:1px solid rgba(255,255,255,0.04);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,0.6)}
/*.card .icon{width:48px;height:48px;flex:0 0 48px}*/
.icon {
    width: 48px;              /* фиксируем ширину */
    height: auto;             /* сохраняем пропорции */
    aspect-ratio: auto;       /* предотвращает искажение */
    display: block;
    object-fit: contain;      /* вписывает картинку внутрь */
    flex-shrink: 0;           /* не сжимается при флексах */
}
.card-body h3{margin:0;font-size:16px}
.card-body p{margin:6px 0 0;color:var(--muted);font-size:14px}
.note{color:var(--muted);font-size:13px;margin-top:10px}

.grid--artists{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.artist{display:flex;gap:16px;align-items:center;padding:12px;text-decoration:none;color:inherit;border-radius:10px;border:1px solid rgba(255,255,255,0.03);transition:transform .18s ease,background .18s}
.artist:hover{transform:translateY(-6px);background:rgba(255,255,255,0.02)}
.artist-art{width:78px;height:78px;border-radius:6px;background:#111;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:34px;color:var(--accent);border:1px solid rgba(255,255,255,0.03)}
.artist-meta h3{margin:0}
.muted{color:var(--muted)}

.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:28px 0;margin-top:40px}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:16px}
.socials a{color:var(--muted);text-decoration:none;margin-left:12px}
.socials a:hover{color:var(--accent)}

/* Platforms grid (4 per row, responsive) */
.platforms-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:center;justify-items:center;margin-top:12px}
.platform{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:inherit;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-radius:12px;border:1px solid rgba(255,255,255,0.03);transition:transform .18s ease,box-shadow .18s ease}
.platform img{max-width:100%;height: auto;max-height:64px;display:block;object-fit:contain}
.platform-name{margin-top:8px;font-size:12px;color:var(--muted);display:block}
.platform:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,0.6)}

@media (max-width:1000px){
  .platforms-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
  .platforms-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Responsive tweaks */
@media (max-width:720px){
  .nav-links{display:none}
  .container{padding:32px 18px}
  .hero-title{letter-spacing:2px}
  .footer-grid{flex-direction:column;align-items:flex-start}
}

@media (max-width: 1000px) {
    .hero-title { font-size: clamp(36px, 8vw, 80px); }
    .hero-sub { max-width: 480px; }
    .nav-links a { font-size: 14px; }
}

@media (max-width: 480px) {
    .hero-title { font-size: clamp(32px, 10vw, 56px); }
    .hero-sub { font-size: 16px; }
    .cta { padding: 12px 18px; font-size: 14px; }
    .section { padding: 48px 0; }
}

/* Utility */
code{background:rgba(255,255,255,0.03);padding:2px 6px;border-radius:4px;color:var(--accent);font-size:13px}

/* Dark custom scrollbar */
::-webkit-scrollbar {
    width: 10px; /* ширина полосы */
}

::-webkit-scrollbar-track {
    background: #0b0b0b; /* фон трека (тот, что под ползунком) */
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15); /* сам ползунок */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3); /* чуть светлее при наведении */
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) #0b0b0b;
}