/* ===== INDEX ===== */
.page { min-height:100vh; display:flex; flex-direction:column; }

.hero {
  text-align:center; padding:80px 20px 40px;
  position:relative;
}
.hero::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:500px; height:300px;
  background:radial-gradient(ellipse, rgba(0,212,170,0.05) 0%, transparent 70%);
  pointer-events:none;
}
.hero-title {
  font-size:clamp(2.5rem, 8vw, 5rem); font-weight:700;
  letter-spacing:-2px; line-height:0.95;
  background:linear-gradient(135deg, #fff 0%, var(--accent) 50%, #a855f7 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  position:relative; z-index:1;
}
.hero-sub {
  font-family:var(--font-mono); font-size:0.75rem;
  color:var(--text2); letter-spacing:3px; text-transform:uppercase;
  margin-top:12px; position:relative; z-index:1;
}

.providers-wrap {
  flex:1; max-width:900px; margin:0 auto; width:100%; padding:20px 16px 60px;
  position:relative; z-index:1;
}
.providers {
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
}

/* Provider card */
.provider-card {
  display:flex; align-items:flex-start; gap:10px;
  width:60px; height:60px; border-radius:14px;
  padding:8px; overflow:hidden;
  background:var(--glass); backdrop-filter:blur(12px);
  border:1px solid var(--border);
  cursor:pointer; user-select:none;
  transition:width 0.4s cubic-bezier(0.25,0.46,0.45,0.94),
             height 0.3s ease,
             background 0.25s ease, border-color 0.25s ease,
             box-shadow 0.25s ease;
  position:relative;
}
.provider-card.expanded {
  width:300px; height:auto;
  background:var(--glass2);
  border-color:var(--border2);
  box-shadow:0 12px 40px rgba(0,0,0,0.4);
}
.provider-card:active { transform:scale(0.97); }

.provider-icon-wrap {
  width:44px; height:44px; min-width:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:var(--bg2);
  border:1px solid var(--border);
  overflow:hidden; flex-shrink:0;
}
.provider-icon-wrap img {
  width:24px; height:24px; object-fit:contain;
  transition:transform 0.3s ease;
}
.provider-card.expanded .provider-icon-wrap img { transform:scale(1.1); }

.provider-info-text {
  white-space:nowrap; opacity:0; transform:translateX(6px);
  transition:all 0.25s ease; min-width:0; flex:1;
  overflow:hidden; padding-top:2px;
}
.provider-card.expanded .provider-info-text {
  opacity:1; transform:translateX(0);
}
.provider-name {
  font-size:0.9rem; font-weight:600; color:var(--text);
  line-height:1.2; margin-bottom:2px;
}
.provider-count {
  font-family:var(--font-mono); font-size:0.65rem; color:var(--text2);
  margin-bottom:8px;
}

/* Models inside card */
.provider-models {
  display:flex; flex-direction:column; gap:4px;
  opacity:0; max-height:0; overflow:hidden;
  transition:all 0.25s ease 0.05s;
  border-top:1px solid var(--border);
  padding-top:8px; margin-top:6px;
}
.provider-card.expanded .provider-models {
  opacity:1; max-height:400px;
}
.model-chip {
  display:block; padding:7px 10px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:8px; color:var(--text2);
  font-family:var(--font-mono); font-size:0.7rem;
  text-decoration:none; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:all 0.15s ease;
}
.model-chip:hover {
  background:var(--bg3); color:var(--text);
  border-color:var(--accent);
}
.model-chip:active { transform:scale(0.97); }

/* Entrance */
.provider-card:nth-child(1){animation:fadeUp 0.45s ease 0.05s both;}
.provider-card:nth-child(2){animation:fadeUp 0.45s ease 0.1s both;}
.provider-card:nth-child(3){animation:fadeUp 0.45s ease 0.15s both;}
.provider-card:nth-child(4){animation:fadeUp 0.45s ease 0.2s both;}
.provider-card:nth-child(5){animation:fadeUp 0.45s ease 0.25s both;}
.provider-card:nth-child(6){animation:fadeUp 0.45s ease 0.3s both;}
.provider-card:nth-child(7){animation:fadeUp 0.45s ease 0.35s both;}
@keyframes fadeUp {
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

.footer {
  padding:20px; text-align:center;
  border-top:1px solid var(--border);
  color:var(--text3); font-size:0.7rem;
  font-family:var(--font-mono); letter-spacing:1px;
}

/* ===== RESPONSIVE ===== */
@media(max-width:640px){
  .hero{padding:50px 16px 30px;}
  .hero-title{font-size:2.8rem;}
  .providers-wrap{padding:16px 12px 40px;}
  .providers{gap:10px;}
  .provider-card{width:52px;height:52px;border-radius:12px;padding:6px;}
  .provider-card.expanded{width:calc(100vw - 40px);max-width:320px;}
  .provider-icon-wrap{width:38px;height:38px;min-width:38px;border-radius:8px;}
  .provider-icon-wrap img{width:20px;height:20px;}
  .provider-name{font-size:0.85rem;}
  .model-chip{font-size:0.65rem;padding:6px 8px;}
}

/* Light theme overrides */
[data-theme="light"] .hero::before {
  background: radial-gradient(ellipse, rgba(0,168,132,0.08) 0%, transparent 70%);
}
[data-theme="light"] .provider-card {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .provider-card.expanded {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
[data-theme="light"] .provider-icon-wrap {
  background: #f1f3f5;
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .model-chip {
  background: #f1f3f5;
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .model-chip:hover {
  background: #e9ecef;
}


/* Hero enhancements */
.hero-desc {
  font-size:0.85rem; color:var(--text2); margin-top:8px;
  font-weight:400; position:relative; z-index:1;
}
.hero-badges {
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin-top:14px; position:relative; z-index:1;
}
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 12px; border-radius:99px;
  background:var(--glass2); border:1px solid var(--border);
  color:var(--text2); font-size:0.7rem; font-weight:500;
  font-family:var(--font); transition:all 0.2s ease;
}
.badge:hover { border-color:var(--accent); color:var(--accent); }

/* Contact section */
.contact-section {
  text-align:center; padding:50px 20px 30px;
  border-top:1px solid var(--border);
}
.contact-title {
  font-size:1rem; font-weight:600; color:var(--text);
  margin-bottom:18px; position:relative; z-index:1;
}
.contact-links {
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  position:relative; z-index:1;
}
.contact-link {
  display:flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:10px;
  text-decoration:none; font-size:0.8rem; font-weight:500;
  color:#fff; transition:all 0.2s ease;
  border:1px solid transparent;
}
.contact-link:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.3); }
.contact-link:active { transform:scale(0.97); }

.telegram-channel { background:linear-gradient(135deg, #0088cc, #00a8e8); }
.telegram-user { background:linear-gradient(135deg, #2aabee, #229ed9); }
.facebook { background:linear-gradient(135deg, #1877f2, #0d65d9); }

/* Footer enhancements */
.footer-desc {
  font-size:0.6rem; color:var(--text3); margin-top:6px;
  font-family:var(--font-mono); max-width:600px; margin-left:auto; margin-right:auto;
  line-height:1.5;
}

[data-theme="light"] .contact-link:hover { box-shadow:0 6px 20px rgba(0,0,0,0.15); }

@media(max-width:640px){
  .hero-desc { font-size:0.78rem; }
  .badge { font-size:0.65rem; padding:4px 10px; }
  .contact-links { gap:8px; }
  .contact-link { padding:8px 14px; font-size:0.75rem; }
  .contact-title { font-size:0.9rem; }
}