/* ============================================================
   Blocktunix Listicles — Frontend Styles
   ============================================================ */
:root {
    --btx-bg:         #0B1437;
    --btx-bg-deep:    #070D24;
    --btx-card:       #FFFFFF;
    --btx-card-soft:  #F5F7FC;
    --btx-blue:       #3461FF;
    --btx-blue-lt:    #5B7FFF;
    --btx-blue-deep:  #1d3bcc;
    --btx-text:       #1A1F36;
    --btx-text-mute:  #4A5072;
    --btx-text-dim:   #6B7280;
    --btx-white:      #FFFFFF;
    --btx-muted:      #B6BDD0;
    --btx-border:     #E6E9F2;
    --btx-border-dk:  rgba(91,127,255,0.25);
    --btx-radius:     16px;
    --btx-radius-sm:  10px;
    --btx-shadow:     0 4px 20px rgba(11,20,55,0.08);
    --btx-shadow-hv:  0 12px 40px rgba(52,97,255,0.15);
    --btx-max:        1280px;
    --btx-font:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ===== Base ===== */
body.btx-listicle-page { background: var(--btx-bg); font-family: var(--btx-font); margin: 0; }
.btx-wrap * { box-sizing: border-box; }
.btx-wrap { font-family: var(--btx-font); color: var(--btx-white); line-height: 1.7; }
.btx-wrap img { max-width: 100%; height: auto; display: block; }
.btx-container { max-width: var(--btx-max); margin: 0 auto; padding: 0 24px; width: 100%; }

/* ===== Section spacing ===== */
.btx-section { padding: 80px 0; }
.btx-section--tight { padding: 40px 0; }
.btx-section--deep { background: var(--btx-bg-deep); }
.btx-section--light { background: var(--btx-card-soft); color: var(--btx-text); }

.btx-section-head { text-align: center; margin-bottom: 48px; }
.btx-section-head h2 {
    color: var(--btx-white); font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700; margin: 0 0 16px; letter-spacing: -0.5px; line-height: 1.2;
}
.btx-section--light .btx-section-head h2 { color: var(--btx-text); }
.btx-section-head p {
    color: var(--btx-muted); font-size: 17px; max-width: 800px;
    margin: 0 auto; line-height: 1.7;
}
.btx-section--light .btx-section-head p { color: var(--btx-text-mute); }

/* ===== Hero / Banner ===== */
.btx-hero {
    padding: 100px 0 80px; position: relative; overflow: hidden;
}
.btx-hero-inner {
    display: grid; grid-template-columns: 3fr 2fr; gap: 60px; align-items: center;
}
.btx-hero-eyebrow {
    display: inline-block; color: var(--btx-blue-lt);
    font-size: 14px; font-weight: 600; letter-spacing: 1px;
    text-transform: uppercase; margin-bottom: 16px;
}
.btx-hero h1 {
    color: var(--btx-white); font-size: clamp(2.25rem, 5.5vw, 4rem);
    font-weight: 800; margin: 0 0 24px; line-height: 1.05; letter-spacing: -1px;
}
.btx-hero .btx-sub {
    color: var(--btx-muted); font-size: 18px; line-height: 1.7; margin: 0 0 32px;
}
.btx-hero-image img {
    border-radius: var(--btx-radius); box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

/* ===== Buttons ===== */
.btx-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border-radius: 8px;
    font-family: var(--btx-font); font-size: 15px; font-weight: 600;
    text-decoration: none; transition: all 0.25s ease; cursor: pointer;
    border: none; line-height: 1;
}
.btx-btn-primary { background: var(--btx-blue); color: var(--btx-white); }
.btx-btn-primary:hover { background: var(--btx-blue-deep); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(52,97,255,0.4); color: var(--btx-white); }
.btx-btn-white { background: var(--btx-white); color: var(--btx-blue); }
.btx-btn-white:hover { background: #f0f0f0; transform: translateY(-2px); color: var(--btx-blue); }
.btx-btn-sm { padding: 10px 20px; font-size: 14px; }

/* ===== Stats grid (Survey) ===== */
.btx-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px; margin-top: 40px;
}
.btx-stat {
    background: rgba(91,127,255,0.08); border: 1px solid var(--btx-border-dk);
    border-radius: var(--btx-radius); padding: 24px; text-align: center;
}
.btx-stat-value {
    font-size: 32px; font-weight: 800; color: var(--btx-blue-lt);
    line-height: 1; margin-bottom: 8px;
}
.btx-stat-label { color: var(--btx-muted); font-size: 14px; }

/* ===== Parameters grid ===== */
.btx-params {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.btx-param-card {
    background: rgba(255,255,255,0.04); border: 1px solid var(--btx-border-dk);
    border-radius: var(--btx-radius); padding: 30px; transition: all 0.3s ease;
}
.btx-param-card:hover { border-color: var(--btx-blue-lt); transform: translateY(-3px); background: rgba(91,127,255,0.06); }
.btx-param-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 50px; height: 50px; border-radius: 50%;
    background: var(--btx-blue); color: var(--btx-white);
    font-weight: 700; font-size: 16px; margin-bottom: 16px;
}
.btx-param-icon {
    color: var(--btx-blue-lt); font-size: 28px; margin-bottom: 14px;
}
.btx-param-card h4 {
    color: var(--btx-white); font-size: 19px; font-weight: 600;
    margin: 0 0 12px; letter-spacing: -0.3px;
}
.btx-param-card p { color: var(--btx-muted); font-size: 14px; line-height: 1.7; margin: 0; }

/* ===== CTA banners ===== */
.btx-cta {
    margin: 40px auto; max-width: calc(var(--btx-max) - 80px);
    padding: 56px 40px; border-radius: var(--btx-radius);
    background: linear-gradient(135deg, var(--btx-blue) 0%, var(--btx-blue-deep) 100%);
    text-align: center; color: var(--btx-white);
}
.btx-cta h2, .btx-cta h3 { color: var(--btx-white); margin: 0 0 12px; font-size: 32px; font-weight: 700; letter-spacing: -0.5px; }
.btx-cta p { color: rgba(255,255,255,0.92); margin: 0 0 28px; font-size: 18px; }

/* ===== Companies cards ===== */
.btx-companies-list {
    display: flex; flex-direction: column; gap: 24px;
    max-width: var(--btx-max); margin: 0 auto;
}
.btx-company {
    background: var(--btx-card); border: 1px solid var(--btx-border);
    border-radius: var(--btx-radius); padding: 32px;
    display: grid; grid-template-columns: 1fr 280px; gap: 32px;
    box-shadow: var(--btx-shadow); transition: all 0.3s ease;
}
.btx-company:hover { transform: translateY(-3px); box-shadow: var(--btx-shadow-hv); border-color: var(--btx-blue-lt); }
.btx-company-head {
    display: flex; align-items: center; gap: 16px; margin-bottom: 18px;
    flex-wrap: wrap;
}
.btx-rank-badge {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--btx-blue); color: var(--btx-white);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.btx-company-logo {
    width: 64px; height: 64px; border-radius: 10px;
    object-fit: contain; background: #fff; padding: 6px;
    border: 1px solid var(--btx-border); flex-shrink: 0;
}
.btx-company h3 {
    color: var(--btx-text); font-size: 26px; font-weight: 700;
    margin: 0; flex: 1; min-width: 200px; letter-spacing: -0.5px;
}
.btx-company-cta-wrap { margin-left: auto; }
.btx-company-desc { color: var(--btx-text-mute); font-size: 15px; line-height: 1.75; margin: 0 0 18px; }
.btx-company-desc p { margin: 0 0 12px; color: var(--btx-text-mute); }
.btx-company-desc p:last-child { margin-bottom: 0; }

.btx-company-meta {
    background: var(--btx-card-soft); border: 1px solid var(--btx-border);
    border-radius: var(--btx-radius-sm); padding: 22px; align-self: start;
}
.btx-meta-row { padding: 12px 0; border-bottom: 1px solid var(--btx-border); display: flex; align-items: flex-start; gap: 12px; }
.btx-meta-row:first-child { padding-top: 0; }
.btx-meta-row:last-child  { border-bottom: 0; padding-bottom: 0; }
.btx-meta-row i { color: var(--btx-blue); font-size: 16px; padding-top: 3px; width: 18px; text-align: center; }
.btx-meta-row strong { display: block; color: var(--btx-text); font-size: 13px; margin-bottom: 2px; }
.btx-meta-row span { color: var(--btx-text-mute); font-size: 14px; }

/* ===== Comparison Table ===== */
.btx-table-wrap {
    background: var(--btx-card); border-radius: var(--btx-radius);
    overflow: hidden; box-shadow: var(--btx-shadow); overflow-x: auto;
}
.btx-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.btx-table thead { background: var(--btx-bg); color: var(--btx-white); }
.btx-table th {
    padding: 16px; text-align: left; font-size: 13px;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
.btx-table th:first-child, .btx-table td:first-child { text-align: center; width: 70px; }
.btx-table th:last-child,  .btx-table td:last-child  { text-align: center; }
.btx-table td {
    padding: 16px; font-size: 14px; color: var(--btx-text-mute);
    border-bottom: 1px solid var(--btx-border);
}
.btx-table tr:nth-child(even) td { background: #f9fafe; }
.btx-table tr:last-child td { border-bottom: 0; }
.btx-table .rank-num { color: var(--btx-blue); font-weight: 700; }
.btx-table .name { color: var(--btx-text); font-weight: 600; }

/* ===== Selection / Leading steps ===== */
.btx-steps {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.btx-step {
    background: rgba(255,255,255,0.04); border: 1px solid var(--btx-border-dk);
    border-radius: var(--btx-radius); padding: 30px; transition: all 0.3s ease;
}
.btx-step:hover { border-color: var(--btx-blue-lt); transform: translateY(-3px); }
.btx-step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.btx-step-num { color: var(--btx-blue-lt); font-weight: 800; font-size: 32px; line-height: 1; }
.btx-step-icon { color: var(--btx-blue-lt); font-size: 22px; }
.btx-step h4 { color: var(--btx-white); font-size: 19px; font-weight: 600; margin: 0 0 12px; letter-spacing: -0.3px; }
.btx-step p { color: var(--btx-muted); font-size: 14px; line-height: 1.7; margin: 0; }

/* ===== Best company section ===== */
.btx-best-grid {
    display: grid; grid-template-columns: 2fr 1fr; gap: 50px; align-items: center;
}
.btx-best-content { color: var(--btx-muted); font-size: 16px; line-height: 1.85; }
.btx-best-content p { color: var(--btx-muted); margin: 0 0 16px; }
.btx-best-content strong { color: var(--btx-white); }
.btx-best-image img { border-radius: var(--btx-radius); }

/* ===== FAQ ===== */
.btx-faqs { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.btx-faq {
    background: rgba(255,255,255,0.04); border: 1px solid var(--btx-border-dk);
    border-radius: var(--btx-radius-sm); padding: 4px 24px; transition: all 0.25s ease;
}
.btx-faq[open] { border-color: var(--btx-blue-lt); background: rgba(91,127,255,0.06); }
.btx-faq summary {
    cursor: pointer; padding: 20px 0; font-weight: 600; font-size: 16px;
    color: var(--btx-white); list-style: none; display: flex;
    justify-content: space-between; align-items: center; gap: 16px;
}
.btx-faq summary::-webkit-details-marker { display: none; }
.btx-faq summary::after {
    content: '+'; color: var(--btx-blue-lt); font-size: 24px;
    font-weight: 400; transition: transform 0.25s ease;
}
.btx-faq[open] summary::after { content: '−'; }
.btx-faq-body { padding: 0 0 20px; color: var(--btx-muted); font-size: 15px; line-height: 1.75; }
.btx-faq-body p { color: var(--btx-muted); margin: 0 0 12px; }

/* ===== Final CTA card ===== */
.btx-final {
    max-width: 980px; margin: 0 auto; padding: 60px 40px;
    background: var(--btx-card); border-radius: var(--btx-radius);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3); text-align: center;
}
.btx-final h2 { color: var(--btx-text); font-size: 32px; margin: 0 0 12px; }
.btx-final p  { color: var(--btx-text-mute); font-size: 17px; margin: 0 0 28px; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .btx-section { padding: 56px 0; }
    .btx-container { padding: 0 16px; }
    .btx-hero { padding: 60px 0 50px; }
    .btx-hero-inner { grid-template-columns: 1fr; gap: 30px; }
    .btx-params, .btx-steps { grid-template-columns: 1fr; }
    .btx-company { grid-template-columns: 1fr; padding: 24px; }
    .btx-company-cta-wrap { margin-left: 0; width: 100%; }
    .btx-company-cta-wrap .btx-btn { width: 100%; justify-content: center; }
    .btx-best-grid { grid-template-columns: 1fr; gap: 30px; }
    .btx-cta { padding: 40px 24px; margin-left: 16px; margin-right: 16px; }
    .btx-cta h2, .btx-cta h3 { font-size: 24px; }
    .btx-final { padding: 40px 24px; margin-left: 16px; margin-right: 16px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
    .btx-params, .btx-steps { grid-template-columns: repeat(2, 1fr); }
}