/* Public marketing site styles - style.css ke design tokens use karta hai */

.site-header {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky; top: 0; z-index: 50;
}
.site-header-inner {
    max-width: 1140px; margin: 0 auto; padding: 16px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display:flex; align-items:center; gap:8px; font-family: var(--font-display); font-weight:600; font-size:16px; }
.brand .dot { width:9px; height:9px; border-radius:50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); }
.site-nav { display:flex; gap:26px; }
.site-nav a { color: var(--text-dim); font-size:14px; font-weight:500; transition: color var(--transition); }
.site-nav a:hover, .site-nav a.active { color: var(--text); }

.site-main { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

.site-footer { border-top: 1px solid var(--border); margin-top: 80px; }
.site-footer-inner {
    max-width: 1140px; margin: 0 auto; padding: 50px 24px 20px;
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px;
}
.site-footer a { display:block; color: var(--text-dim); font-size: 14px; margin-bottom: 10px; transition: color var(--transition); }
.site-footer a:hover { color: var(--accent); }

/* Hero */
.hero-section { padding: 90px 0 70px; text-align:center; }
.hero-section .eyebrow {
    display:inline-block; padding:5px 14px; border-radius:999px; background: var(--accent-dim);
    color: var(--accent); font-size:13px; font-weight:500; margin-bottom:22px;
}
.hero-section h1 { font-size: 48px; line-height:1.15; margin-bottom:18px; }
.hero-section p.sub { color: var(--text-dim); font-size:17px; max-width:560px; margin:0 auto 32px; }
.hero-actions { display:flex; gap:12px; justify-content:center; }

/* Section headings */
.section-heading { text-align:center; margin: 90px 0 40px; }
.section-heading h2 { font-size:30px; margin-bottom:10px; }
.section-heading p { color: var(--text-dim); font-size:15px; }

/* Product cards (public) */
.product-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:20px; margin-bottom: 40px; }
.product-card {
    background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
    padding:24px; transition: transform var(--transition), border-color var(--transition);
    animation: fadeUp 450ms cubic-bezier(0.16,1,0.3,1) both;
}
.product-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.product-card .kind {
    display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:0.05em;
    color: var(--text-faint); margin-bottom:10px;
}
.product-card h3 { font-size:18px; margin-bottom:8px; }
.product-card p { color: var(--text-dim); font-size:14px; margin-bottom:18px; line-height:1.5; }
.product-card .price-tag { font-family: var(--font-mono); font-size:15px; color: var(--accent); margin-bottom:16px; }

/* Feature strip (why us) */
.feature-strip { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:24px; margin-bottom:90px; }
.feature-item { padding: 4px; }
.feature-item .icon { font-size:22px; margin-bottom:12px; }
.feature-item h4 { font-size:15px; margin-bottom:6px; }
.feature-item p { color: var(--text-dim); font-size:14px; line-height:1.5; }

/* Pricing tier cards (public) */
.tier-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:20px; }
.tier-card { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:28px; animation: fadeUp 500ms cubic-bezier(0.16,1,0.3,1) both; }
.tier-card.popular { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); position:relative; }
.tier-card.popular::before {
    content: 'Popular'; position:absolute; top:-11px; left:24px;
    background: var(--accent); color:#062A26; font-size:11px; font-weight:600;
    padding:3px 10px; border-radius:999px;
}
.tier-card h3 { font-size:17px; margin-bottom:6px; }
.tier-card .price { font-family: var(--font-mono); font-size:28px; margin:10px 0 20px; }
.tier-card .price span { font-size:13px; color:var(--text-dim); }
.tier-card ul { list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:9px; }
.tier-card li { font-size:13px; color:var(--text-dim); }
.tier-card li.off { opacity:0.4; text-decoration:line-through; }

/* Policy tabs */
.policy-tabs { display:flex; gap:8px; margin-bottom:28px; flex-wrap:wrap; }
.policy-tabs a {
    padding:8px 16px; border-radius:999px; border:1px solid var(--border); font-size:13px; color: var(--text-dim);
    transition: all var(--transition);
}
.policy-tabs a.active { background: var(--accent-dim); color: var(--accent); border-color: transparent; }
.policy-content { color: var(--text-dim); font-size:14px; line-height:1.8; max-width: 720px; }
.policy-content h3 { color: var(--text); font-size:16px; margin: 24px 0 8px; }

@media (max-width: 760px) {
    .site-nav { display:none; }
    .hero-section h1 { font-size:32px; }
    .site-footer-inner { grid-template-columns: 1fr; }
}