/* Page: chatgpt-alternativen */
:root {
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-card: #1c2333;
--bg-table-header: #1a2332;
--bg-table-row1: #1c2333;
--bg-table-row2: #222b3a;
--text-primary: #e6edf3;
--text-secondary: #b0b8c4;
--text-muted: #8b949e;
--accent-blue: #58a6ff;
--accent-green: #3fb950;
--accent-orange: #d2991d;
--accent-red: #f85149;
--accent-purple: #a371f7;
--accent-cyan: #39c5cf;
--accent-pink: #d269b7;
--border-color: #30363d;
--border-light: #21262d;
--highlight: #1f6feb22;
--shadow: 0 4px 24px rgba(0,0,0,0.4);
}


/* ---- HERO ---- */
.hero {
background: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #1c2333 100%);
border-bottom: 1px solid var(--border-color);
padding: 80px 24px 64px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: radial-gradient(ellipse at 30% 50%, rgba(88,166,255,0.06) 0%, transparent 60%),
radial-gradient(ellipse at 70% 50%, rgba(163,113,247,0.06) 0%, transparent 60%);
animation: heroGlow 12s ease-in-out infinite alternate;
}
@keyframes heroGlow {
0% { transform: translate(0,0); }
100% { transform: translate(2%,1%); }
}
.hero h1 {
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 800;
letter-spacing: -0.03em;
background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 50%, var(--accent-cyan) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
margin-bottom: 16px;
}
.hero .subtitle {
font-size: 1.2rem;
color: var(--text-secondary);
max-width: 720px;
margin: 0 auto;
position: relative;
}
.hero .meta {
margin-top: 24px;
font-size: 0.9rem;
color: var(--text-muted);
position: relative;
}
.hero .meta span {
margin: 0 12px;
}

/* ---- CONTAINER ---- */
.container {
max-width: 1100px;
margin: 0 auto;
padding: 60px 24px;
}

/* ---- SECTION HEADINGS ---- */
h2 {
font-size: 1.8rem;
font-weight: 700;
color: var(--text-primary);
margin: 56px 0 20px;
padding-bottom: 12px;
border-bottom: 2px solid var(--border-color);
letter-spacing: -0.02em;
}
h3 {
font-size: 1.35rem;
font-weight: 600;
color: var(--accent-blue);
margin: 32px 0 12px;
}
h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
margin: 20px 0 8px;
}

p {
margin: 14px 0;
color: var(--text-secondary);
}

/* ---- LINKS ---- */
a {
color: var(--accent-blue);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s;
}
a:hover {
border-bottom-color: var(--accent-blue);
}

/* ---- COMPARISON TABLE ---- */
.table-wrapper {
overflow-x: auto;
margin: 32px 0;
border-radius: 12px;
border: 1px solid var(--border-color);
box-shadow: var(--shadow);
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
min-width: 900px;
}
thead th {
background: var(--bg-table-header);
color: var(--text-primary);
font-weight: 700;
padding: 16px 14px;
text-align: left;
border-bottom: 2px solid var(--border-color);
position: sticky;
top: 0;
z-index: 2;
white-space: nowrap;
}
thead th:first-child {
border-radius: 12px 0 0 0;
}
thead th:last-child {
border-radius: 0 12px 0 0;
}
tbody td {
padding: 14px;
border-bottom: 1px solid var(--border-light);
vertical-align: top;
}
tbody tr:nth-child(odd) td {
background: var(--bg-table-row1);
}
tbody tr:nth-child(even) td {
background: var(--bg-table-row2);
}
tbody tr:hover td {
background: #243044;
}
tbody tr:last-child td:first-child {
border-radius: 0 0 0 12px;
}
tbody tr:last-child td:last-child {
border-radius: 0 0 12px 0;
}
.criteria-col {
font-weight: 600;
color: var(--accent-cyan);
white-space: nowrap;
}
.badge {
display: inline-block;
padding: 3px 10px;
border-radius: 20px;
font-size: 0.82rem;
font-weight: 600;
white-space: nowrap;
}
.badge-free     { background: #3fb95022; color: var(--accent-green); border: 1px solid #3fb95044; }
.badge-paid     { background: #d2991d22; color: var(--accent-orange); border: 1px solid #d2991d44; }
.badge-premium  { background: #a371f722; color: var(--accent-purple); border: 1px solid #a371f744; }
.badge-good     { background: #3fb95022; color: var(--accent-green); border: 1px solid #3fb95044; }
.badge-ok       { background: #d2991d22; color: var(--accent-orange); border: 1px solid #d2991d44; }
.badge-limited  { background: #f8514922; color: var(--accent-red); border: 1px solid #f8514944; }
.badge-great    { background: #39c5cf22; color: var(--accent-cyan); border: 1px solid #39c5cf44; }

/* ---- RATING STARS ---- */
.stars { color: var(--accent-orange); letter-spacing: 2px; }
.stars-dim { color: var(--text-muted); letter-spacing: 2px; }

/* ---- CARDS ---- */
.provider-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 28px 32px;
margin: 28px 0;
box-shadow: var(--shadow);
transition: transform 0.2s, border-color 0.2s;
}
.provider-card:hover {
transform: translateY(-2px);
border-color: var(--accent-blue);
}
.provider-card .provider-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.provider-card .provider-icon {
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
font-weight: 800;
flex-shrink: 0;
}
.provider-card .provider-name {
font-size: 1.4rem;
font-weight: 700;
}
.provider-card .provider-company {
font-size: 0.85rem;
color: var(--text-muted);
}
.icon-deepseek   { background: linear-gradient(135deg, #4F46E5, #7C3AED); }
.icon-claude     { background: linear-gradient(135deg, #D97706, #EA580C); }
.icon-gemini     { background: linear-gradient(135deg, #4285F4, #34A853); }
.icon-perplexity { background: linear-gradient(135deg, #1E1E2E, #3B82F6); }
.icon-grok       { background: linear-gradient(135deg, #111827, #4B5563); }
.icon-copilot    { background: linear-gradient(135deg, #0078D4, #50E6FF); }
.icon-chatgpt    { background: linear-gradient(135deg, #10A37F, #1A7F64); }

/* ---- PROS / CONS ---- */
.pros-cons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 12px 0;
}
@media (max-width: 640px) {
.pros-cons { grid-template-columns: 1fr; }
}
.pros, .cons {
padding: 16px 20px;
border-radius: 10px;
}
.pros { background: #3fb9500d; border: 1px solid #3fb95022; }
.cons { background: #f851490d; border: 1px solid #f8514922; }
.pros h4 { color: var(--accent-green); margin-bottom: 8px; }
.cons h4 { color: var(--accent-red); margin-bottom: 8px; }
.pros ul, .cons ul {
padding-left: 20px;
color: var(--text-secondary);
}
.pros li, .cons li {
margin: 4px 0;
}

/* ---- INFO BOX ---- */
.info-box {
background: #58a6ff0a;
border: 1px solid #58a6ff22;
border-left: 4px solid var(--accent-blue);
border-radius: 0 10px 10px 0;
padding: 18px 24px;
margin: 24px 0;
}
.info-box p { margin: 6px 0; }

/* ---- TOC ---- */
.toc {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 24px 32px;
margin: 32px 0;
}
.toc h3 {
margin: 0 0 16px;
}
.toc ol {
padding-left: 24px;
}
.toc li {
margin: 8px 0;
color: var(--text-secondary);
}
.toc a {
color: var(--accent-blue);
}

/* ---- FAQ ---- */
.faq-item {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 20px 24px;
margin: 14px 0;
}
.faq-item h4 {
color: var(--accent-cyan);
cursor: pointer;
margin: 0;
}
.faq-item p {
margin: 10px 0 0;
}

/* ---- FOOTER ---- */
footer {
text-align: center;
padding: 48px 24px;
border-top: 1px solid var(--border-color);
color: var(--text-muted);
font-size: 0.9rem;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
.container { padding: 40px 16px; }
.provider-card { padding: 20px 18px; }
.hero { padding: 48px 16px 40px; }
}

/* ---- HIGHLIGHT KEYWORDS ---- */
strong { color: var(--text-primary); }
em { color: var(--accent-cyan); font-style: normal; font-weight: 500; }

/* ---- TOOLTIP ---- */
.tooltip {
border-bottom: 1px dotted var(--text-muted);
cursor: help;
}


.nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; padding: .5rem; line-height: 1; min-width: 44px; min-height: 44px; }
@media (max-width: 768px) {
.nav-toggle { display: block !important; }
nav ul, .nav-links, .top-nav ul { display: none !important; flex-direction: column !important; width: 100% !important; gap: 0.5rem !important; padding: 1rem 0 !important; }
nav ul.open, .nav-links.open, .top-nav ul.open { display: flex !important; }
nav, .top-nav { flex-wrap: wrap !important; }
}