:root {
    --nx-primary: #1a56db;
    --nx-primary-dark: #123b88;
    --nx-navy: #0f172a;
    --nx-cyan: #06b6d4;
    --nx-surface: #f4f7fc;
    --nx-card: #ffffff;
    --nx-border: #dfe7f3;
    --nx-muted: #64748b;
    --nx-success: #10b981;
    --nx-shadow: 0 12px 32px rgba(15, 23, 42, .08);
}

body {
    color: var(--nx-navy);
    background: var(--nx-surface);
}

.page-hero,
.blog-hero,
.reg-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 5% 68px;
    background:
        radial-gradient(circle at 78% 18%, rgba(6, 182, 212, .32), transparent 28%),
        linear-gradient(135deg, #0a2540 0%, #123b88 52%, #1d4ed8 100%);
}

.page-hero::before,
.blog-hero::before,
.reg-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image: radial-gradient(rgba(255, 255, 255, .8) .8px, transparent .8px);
    background-size: 22px 22px;
}

.page-hero > *,
.blog-hero > *,
.reg-hero > * {
    position: relative;
    z-index: 1;
}

.page-hero h1,
.blog-hero h1,
.reg-hero h1 {
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.15;
}

.page-hero p,
.blog-hero p,
.reg-hero p {
    color: #dbeafe;
    font-family: Inter, sans-serif;
    font-size: 15px;
}

.packages-wrap,
.blog-wrap,
.article-wrap {
    max-width: 1200px;
}

.check-wrap {
    max-width: 900px;
    padding-top: 48px;
    padding-bottom: 70px;
}

.check-wrap .search-box {
    padding: 26px;
    margin-bottom: 24px;
}

.check-wrap .area-section {
    padding: 24px;
    margin-bottom: 20px;
}

.check-wrap .area-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.check-wrap .area-item {
    min-width: 0;
    padding: 14px 15px;
}

.reg-wrap {
    max-width: 980px;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 34px;
    padding-top: 44px;
    padding-bottom: 54px;
}

.reg-wrap > div:last-child {
    min-width: 0;
}

.reg-wrap .step-panel {
    padding: 30px;
    border: 1px solid var(--nx-border);
}

.reg-wrap .step-nav {
    top: 96px;
    padding: 8px 0;
}

.reg-wrap .form-row,
.reg-wrap .kebutuhan-grid {
    min-width: 0;
}

.reg-wrap .form-control,
.reg-wrap textarea,
.reg-wrap select {
    max-width: 100%;
}

.reg-bottom {
    position: static !important;
    max-width: 980px;
    margin: 0 auto 34px;
    padding: 16px 22px !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(15, 23, 42, .05);
}

.plan-card,
.search-box,
.area-section,
.result-card,
.blog-card,
.sidebar-card,
.step-panel,
.paket-card,
.kebutuhan-card,
.konfirm-box,
.faq-item,
.compare-wrap,
.related-card {
    border-color: var(--nx-border);
    border-radius: 16px;
    background: var(--nx-card);
    box-shadow: 0 5px 22px rgba(15, 23, 42, .055);
}

.plan-card:hover,
.blog-card:hover,
.paket-card:hover,
.kebutuhan-card:hover,
.related-card:hover {
    border-color: #b9cdf5;
    box-shadow: var(--nx-shadow);
    transform: translateY(-3px);
}

.plan-card.featured,
.paket-card.selected,
.kebutuhan-card.selected {
    border-color: var(--nx-primary);
    box-shadow: 0 16px 36px -10px rgba(26, 86, 219, .28);
}

.plan-badge,
.paket-badge {
    background: linear-gradient(90deg, #f59e0b, #f97316);
    color: #fff;
}

.plan-speed,
.plan-price,
.paket-speed,
.article-cat,
.blog-card-cat {
    color: var(--nx-primary);
}

.plan-btn,
.btn-next,
.result-link,
.pay-btn,
.btn {
    border-radius: 10px;
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(26, 86, 219, .18);
}

.plan-btn:hover,
.btn-next:hover,
.result-link:hover,
.pay-btn:hover,
.btn:hover {
    background: var(--nx-primary-dark);
    border-color: var(--nx-primary-dark);
    transform: translateY(-1px);
}

.plan-btn:not(.primary) {
    background: #fff;
    color: var(--nx-primary);
    box-shadow: none;
}

.form-control,
.search-row input,
.maps-search-wrap input {
    border-color: var(--nx-border);
    border-radius: 10px;
    background: #f8fafc;
}

.form-control:focus,
.search-row input:focus,
.maps-search-wrap input:focus {
    border-color: var(--nx-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(26, 86, 219, .1);
}

.step-num.active,
.step-num.done,
.status-dot.dot-green {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
}

.step-line.active {
    background: var(--nx-primary);
}

.compare-table th.highlight,
.compare-table td.highlight,
.area-item.available,
.info-banner {
    background: #eff6ff;
}

.faq-q,
.panel-title,
.area-section h2,
.sidebar-card h3,
.article-title,
.blog-card-title {
    color: var(--nx-navy);
}

.blog-card-excerpt,
.blog-card-meta,
.article-meta,
.panel-sub,
.form-hint,
.area-desa {
    color: var(--nx-muted);
}

.blog-card-img {
    background: linear-gradient(135deg, #dbeafe, #e0f2fe);
}

.article-content {
    color: #334155;
}

.article-content blockquote {
    border-left-color: var(--nx-primary);
    background: #eff6ff;
}

.share-btn {
    border-color: var(--nx-border);
    background: #fff;
}

.share-btn:hover {
    border-color: var(--nx-primary);
    color: var(--nx-primary);
}

.cta-banner {
    background:
        radial-gradient(circle at 80% 20%, rgba(34, 211, 238, .25), transparent 30%),
        linear-gradient(135deg, #1d4ed8, #1646c7);
    box-shadow: 0 20px 40px rgba(29, 78, 216, .2);
}

.payment-page,
.payment-status-page {
    background:
        radial-gradient(circle at 85% 10%, rgba(6, 182, 212, .16), transparent 28%),
        var(--nx-surface);
}

.payment-page header {
    padding: 19px 20px;
    background: linear-gradient(135deg, #0a2540, #1d4ed8);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
}

.payment-page .wrap {
    max-width: 520px;
    margin-top: 44px;
}

.payment-page .card,
.payment-status-page .card {
    border: 1px solid var(--nx-border);
    border-radius: 20px;
    box-shadow: var(--nx-shadow);
}

.payment-page .inv-amount {
    color: var(--nx-primary);
}

.payment-page .method-badge {
    background: #ecfdf5;
    color: #047857;
}

@media (max-width: 768px) {
    .page-hero,
    .blog-hero,
    .reg-hero {
        padding: 50px 18px 46px;
    }

    .page-hero h1,
    .blog-hero h1,
    .reg-hero h1 {
        font-size: 30px;
    }

    .packages-wrap,
    .blog-wrap,
    .article-wrap {
        padding-left: 16px;
        padding-right: 16px;
    }

    .check-wrap {
        padding: 30px 16px 48px;
    }

    .check-wrap .search-box,
    .check-wrap .area-section {
        padding: 18px 16px;
    }

    .check-wrap .area-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .check-wrap .search-row {
        flex-direction: column;
    }

    .check-wrap .search-row button {
        width: 100%;
    }

    .reg-wrap {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 28px 16px 34px;
    }

    .reg-wrap .step-panel {
        padding: 22px 16px;
    }

    .reg-bottom {
        margin: 0 16px 28px;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }

    .search-box,
    .area-section,
    .step-panel {
        padding: 20px 16px;
    }
}

@media (max-width: 480px) {
    .check-wrap .area-grid {
        grid-template-columns: 1fr;
    }
}