/* Private Limited Company page styles (mobile-first) */
:root {
    --primary: #0b2a66;
    /* navy */
    --accent: #0fb96b;
    /* green */
    --accent-2: #ff8a00;
    /* orange */
    --muted: #6b7280;
    --bg: #f7f9fc;
    --card: #ffffff;
    --radius: 10px;
    --shadow: 0 6px 18px rgba(11, 42, 102, 0.08);
    --max-width: 1100px;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Page layout */
body {
    background: var(--bg);
    color: #0b1a2b;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    line-height: 1.45
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem
}

.btn {
    display: inline-block;
    padding: .65rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid transparent;
    font-weight: 600
}

.btn-primary {
    background: var(--primary);
    color: #fff
}

.btn-ghost {
    background: transparent;
    color: var(--primary);
    border-color: rgba(11, 42, 102, 0.08)
}

/* HERO */
.hero {
    position: relative;
    /* try assets/img/bg.jpg first, then assets/images/bg.jpg, then gradient */
    /* use the official hero image path */
    background-image: url("../assets/images/bg.jpg");
    background-size: cover;
    background-position: center;
    padding: 1.25rem 0;
    color: #fff;
    overflow: hidden;
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 10, 40, 0.35), rgba(2, 10, 40, 0.2));
    z-index: 0
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start
}

.hero .kicker {
    color: #fff;
    font-weight: 700;
    margin-bottom: .4rem;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35)
}

.hero h1 {
    font-size: 1.6rem;
    margin: .2rem 0 0.6rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4)
}

.hero .lead {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: .6rem
}

.hero-highlights {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 0;
    margin: 0 0 .8rem 0;
    list-style: none
}

.hero-highlights li {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: rgba(255, 255, 255, 0.95)
}

/* ensure content sits above the overlay */
.hero .container,
.hero-grid {
    position: relative;
    z-index: 1
}

.hero .btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: transparent
}

.hero .btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.15)
}

.hero-form .form-card {
    position: relative;
    z-index: 2
}

.hero-form .form-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem
}

.form-card h2 {
    margin: 0 0 .5rem;
    font-size: 1.1rem
}

.form-card label {
    display: block;
    font-size: .85rem;
    color: var(--muted);
    margin-top: .6rem
}

.form-card input,
.form-card select {
    width: 100%;
    padding: .6rem;
    border-radius: 8px;
    border: 1px solid #e6eef7;
    margin-top: .35rem
}

.form-card .small {
    font-size: .8rem;
    color: var(--muted);
    margin-top: .6rem
}

/* Overview */
.overview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem 0
}

.info-card {
    background: var(--card);
    padding: .9rem;
    border-radius: 10px;
    box-shadow: var(--shadow);
    margin-top: .6rem
}

/* Redesigned overview: two-column layout + quick facts */
.overview-text h2{margin-top:0}
.use-cases{margin:0 0 1rem 0;padding-left:1.1rem}
.use-cases li{margin-bottom:.5rem}
.quick-points{display:grid;grid-template-columns:1fr;gap:.6rem;margin-top:1rem}
.quick-points .point{background:linear-gradient(180deg,rgba(11,42,102,0.04),#fff);padding:.6rem;border-radius:8px;border:1px solid rgba(11,42,102,0.04);color:var(--primary)}

.overview-facts{margin-top:0}
.overview-facts h3{margin-top:0;margin-bottom:.5rem;color:var(--primary)}
.facts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.fact-card{background:var(--card);padding:.8rem;border-radius:10px;box-shadow:var(--shadow);border:1px solid rgba(11,42,102,0.04)}
.fact-card h4{margin:0 0 .35rem;font-size:1rem;color:var(--primary)}
.fact-card p{margin:0;color:var(--muted);font-weight:600}

/* Comparison cards */
.comparison-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
.structure-card{background:var(--card);padding:1rem;border-radius:12px;box-shadow:var(--shadow);border:1px solid rgba(11,42,102,0.04)}
.structure-card .card-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.structure-card .card-head i{width:44px;height:44px;border-radius:8px;background:linear-gradient(180deg,var(--primary),var(--accent));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:18px}
.structure-card h3{margin:0;font-size:1.05rem;color:var(--primary)}
.card-facts{list-style:none;padding:0;margin:0;margin-top:.4rem}
.card-facts li{padding:.28rem 0;border-top:1px dashed rgba(11,42,102,0.03);color:var(--muted);font-weight:600}
.card-facts li:first-child{border-top:none;padding-top:0}

/* responsive: multi-column grid on wider screens */
@media(min-width:780px){
    .comparison-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1100px){
    .comparison-grid{grid-template-columns:repeat(3,1fr)}
}

/* sr-only helper for accessibility */
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Documents */
.doc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: .6rem
}

.doc-card {
    background: var(--card);
    padding: .85rem;
    border-radius: 10px;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    box-shadow: var(--shadow)
}

.doc-icon {
    font-size: 1.25rem;
    color: var(--primary);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center
}

/* Document groups and layout */
.doc-group{background:transparent;padding:0;margin:0}
.doc-group-title{margin:0 0 .6rem;color:var(--primary);font-size:1.05rem}
.doc-items{display:grid;grid-template-columns:1fr;gap:.6rem}

@media(min-width:700px){
    .doc-grid{grid-template-columns:repeat(2,1fr)}
    .doc-items{grid-template-columns:1fr}
}

@media(min-width:1100px){
    .doc-grid{grid-template-columns:repeat(3,1fr)}
}

.doc-title{margin:0;font-size:1rem;color:#0b2a66}
.doc-desc{margin:0;color:var(--muted);font-size:.95rem}

.doc-card:focus{outline:3px solid rgba(11,42,102,0.12)}
.doc-card .doc-icon{width:48px;height:48px;border-radius:8px;background:linear-gradient(180deg,var(--primary),var(--accent));color:#fff;display:inline-flex;align-items:center;justify-content:center}

/* Benefits */
.benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem
}

.benefit-card {
    background: var(--card);
    padding: 1rem;
    border-radius: 10px;
    box-shadow: var(--shadow);
    display: flex;
    gap: .8rem;
    align-items: flex-start
}

.benefit-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center
}

/* Benefits: detailed A-E layout */
.benefit-details{gap:1rem}
.benefit-item{display:flex;gap:1rem;background:var(--card);padding:1rem;border-radius:10px;box-shadow:var(--shadow);align-items:flex-start}
.benefit-icon{width:44px;height:44px;border-radius:8px;background:linear-gradient(180deg,var(--accent-2),var(--primary));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem}
.benefit-body h3{margin:0 0 .35rem;color:var(--primary)}
.benefit-body p{margin:0;color:var(--muted);line-height:1.45}

@media(min-width:800px){
    .benefits-grid{grid-template-columns:1fr 1fr;}
}

/* Pricing */
.pricing-grid {
    display: grid;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1rem 0
}

.plan {
    background: var(--card);
    padding: 1rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(11, 42, 102, 0.03);
    display: flex;
    flex-direction: column;
    gap: .6rem
}

.plan.recommended {
    border: 2px solid var(--accent);
    transform: translateY(-2px)
}

.plan-price {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary);
    margin: .25rem 0 .6rem;
    letter-spacing: .4px
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0
}

.plan-features li {
    padding: .25rem 0;
    color: var(--muted)
}

.plan .btn {
    margin-top: .6rem
}

/* pricing visuals */
.plan-head{font-weight:800;padding:.6rem 0;font-size:1rem;color:var(--primary)}
.plan.recommended{border:2px solid var(--accent);transform:translateY(-6px);box-shadow:0 18px 40px rgba(11,42,102,0.06)}
.plan-features{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.plan-features li{padding:.35rem 0;color:var(--muted);font-weight:600;display:flex;gap:.6rem;align-items:flex-start}
.plan-features li:before{content:'\f00c';font-family: 'Font Awesome 5 Free';font-weight:900;margin-right:.4rem;color:var(--accent-2);display:inline-block;width:18px;text-align:center}

@media(min-width:800px){
    .pricing-grid{grid-template-columns:repeat(3,1fr)}
}

/* Process timeline */
.process-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .8rem
}

.process-step {
    background: var(--card);
    padding: 1rem;
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    box-shadow: var(--shadow)
}

.step-bubble {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700
}

/* FAQ */
.faq-list details {
    background: var(--card);
    margin: 0.6rem 0;
    padding: .8rem;
    border-radius: 8px
}

.faq-list summary {
    cursor: pointer;
    font-weight: 600
}

.faq-body {
    color: var(--muted);
    margin-top: .5rem
}

/* Testimonials & Blog (basic card rules) */
.testimonial-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem
}

.testimonial-card {
    background: var(--card);
    padding: 1rem;
    border-radius: 10px;
    box-shadow: var(--shadow)
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem
}

.blog-card {
    background: var(--card);
    padding: 1rem;
    border-radius: 10px;
    box-shadow: var(--shadow)
}

/* Responsive: larger layouts */
@media(min-width:700px) {
    .hero-grid {
        grid-template-columns: 1fr 360px;
        gap: 2rem
    }

    .overview-grid {
        grid-template-columns: 1fr 320px
    }

    .doc-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .benefits-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .pricing-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .process-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .testimonial-grid {
        grid-template-columns: 2fr 1fr
    }

    .blog-grid {
        grid-template-columns: 2fr 1fr
    }
}

/* Comparison table - mobile stacked cards */
.comparison-table-wrap { overflow: visible; }
.comparison-table { border-collapse: separate; }
@media (max-width: 720px) {
    .comparison-table thead { display: none; }
    .comparison-table, .comparison-table tbody, .comparison-table tr { display: block; width: 100%; }
    .comparison-table tr { margin-bottom: 0.9rem; border-radius: 10px; background: var(--card); box-shadow: var(--shadow); padding: .6rem; }
    .comparison-table td { display: flex; padding: .5rem 0; border: 0; align-items:flex-start }
    .comparison-table td:before { content: attr(data-label); flex: 0 0 45%; font-weight:700; color:var(--primary); padding-right:.6rem }
    .comparison-table td + td { border-top: 1px dashed rgba(11,42,102,0.04); padding-top:.6rem }
}


@media(min-width:1000px) {
    .hero h1 {
        font-size: 2rem
    }
}

/* Utility */
.muted {
    color: var(--muted)
}

.small {
    font-size: .85rem
}

/* End of private-limited.css */