/* =========================================
   GYB360° Homepage — "Digital Swaraj" Styles
   ========================================= */

/* ---- Animations ---- */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes pulseGlow { 0%,100%{box-shadow:0 0 20px rgba(0,83,91,0.2)} 50%{box-shadow:0 0 40px rgba(0,83,91,0.4)} }
@keyframes slideUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes countUp { from{opacity:0;transform:scale(0.5)} to{opacity:1;transform:scale(1)} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes borderGlow { 0%,100%{border-color:rgba(0,83,91,0.2)} 50%{border-color:rgba(0,83,91,0.6)} }

.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ============ 1. HERO ============ */
.hero-swaraj {
    position:relative; min-height:100vh; display:flex; align-items:center;
    padding:140px 0 80px; overflow:hidden;
    background: linear-gradient(135deg, #f7fafa 0%, #e8f4f5 40%, #f0f7f7 100%);
}
.hero-swaraj::before {
    content:''; position:absolute; inset:0; opacity:0.04;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%2300535b'/%3E%3Cline x1='30' y1='0' x2='30' y2='60' stroke='%2300535b' stroke-width='0.3'/%3E%3Cline x1='0' y1='30' x2='60' y2='30' stroke='%2300535b' stroke-width='0.3'/%3E%3C/svg%3E");
}
.hero-swaraj .container { position:relative; z-index:2; display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; }
.hero-content h1 { font-size:3.2rem; line-height:1.15; margin-bottom:24px; }
.hero-content h1 .highlight { color:var(--primary); position:relative; }
.hero-content h1 .highlight::after {
    content:''; position:absolute; bottom:-4px; left:0; width:100%; height:4px;
    background:linear-gradient(90deg, var(--secondary-container), #FF7F50); border-radius:2px;
}
.hero-sub-text { font-size:1.15rem; color:var(--text-secondary); line-height:1.7; margin-bottom:32px; max-width:560px; }
.hero-buttons { display:flex; gap:16px; margin-bottom:40px; flex-wrap:wrap; }
.trust-badges-row { display:flex; gap:20px; flex-wrap:wrap; }
.trust-badge-item {
    display:flex; align-items:center; gap:8px; padding:10px 18px;
    background:rgba(255,255,255,0.8); border:1px solid var(--outline-variant);
    border-radius:50px; font-weight:600; font-size:0.9rem; backdrop-filter:blur(10px);
}
.trust-badge-item .material-symbols-outlined { color:var(--primary); font-size:20px; }
.hero-visual { position:relative; }
.hero-visual img {
    width:100%; border-radius:20px; box-shadow:0 30px 80px rgba(0,83,91,0.15);
    animation: float 6s ease-in-out infinite;
}
.hero-visual::after {
    content:''; position:absolute; inset:-20px; border:2px dashed rgba(0,83,91,0.15);
    border-radius:28px; animation: borderGlow 3s ease-in-out infinite;
}

/* ============ 2. REALITY CHECK ============ */
.reality-check { background:var(--bg-secondary); position:relative; }
.reality-check .section-header { text-align:center; margin-bottom:60px; }
.reality-check .section-header h2 { font-size:2.5rem; max-width:800px; margin:0 auto 16px; }
.reality-check .section-header p { max-width:700px; margin:0 auto; font-size:1.1rem; }
.comparison-visual { display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:20px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.1); }
.compare-side { padding:40px; position:relative; }
.compare-side.template-side { background:#f0f0f0; filter:saturate(0.3); }
.compare-side.template-side::after {
    content:'❌ TEMPLATE'; position:absolute; top:20px; left:20px;
    background:#ba1a1a; color:#fff; padding:6px 16px; border-radius:20px;
    font-weight:800; font-size:0.85rem; letter-spacing:1px;
}
.compare-side.custom-side { background:linear-gradient(135deg, #0a2a2e, #00535b); color:#fff; }
.compare-side.custom-side::after {
    content:'✅ GYB360° CUSTOM'; position:absolute; top:20px; right:20px;
    background:var(--secondary-container); color:#fff; padding:6px 16px; border-radius:20px;
    font-weight:800; font-size:0.85rem; letter-spacing:1px;
}
.comparison-img-wrap { border-radius:16px; overflow:hidden; }
.comparison-img-wrap img { width:100%; display:block; }

/* ============ 3. FOUR PILLARS ============ */
.pillars-section { position:relative; }
.pillars-section .section-header { text-align:center; margin-bottom:60px; }
.pillars-section .section-header h2 { font-size:2.5rem; }
.pillars-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.pillar-card-new {
    background:var(--bg-card); border-radius:16px; padding:36px 28px;
    border:1px solid var(--outline-variant); box-shadow:var(--shadow-soft);
    transition:all 0.4s ease; position:relative; overflow:hidden; text-align:center;
}
.pillar-card-new::before {
    content:''; position:absolute; top:0; left:0; right:0; height:4px;
    background:linear-gradient(90deg, var(--primary), var(--primary-fixed-dim));
    transform:scaleX(0); transition:transform 0.4s ease; transform-origin:left;
}
.pillar-card-new:hover { transform:translateY(-10px) scale(1.02); border-color:var(--primary); box-shadow:0 20px 50px rgba(0,83,91,0.12); }
.pillar-card-new:hover::before { transform:scaleX(1); }
.pillar-icon-wrap {
    width:72px; height:72px; margin:0 auto 20px;
    background:linear-gradient(135deg, rgba(0,83,91,0.08), rgba(0,83,91,0.15));
    border-radius:20px; display:flex; align-items:center; justify-content:center;
    transform:perspective(500px) rotateY(-5deg); transition:transform 0.4s ease;
}
.pillar-card-new:hover .pillar-icon-wrap { transform:perspective(500px) rotateY(5deg) scale(1.1); }
.pillar-icon-wrap .material-symbols-outlined { font-size:36px; color:var(--primary); }
.pillar-card-new h3 { font-size:1.3rem; margin-bottom:6px; }
.pillar-card-new .pillar-hindi { color:var(--secondary-container); font-weight:700; font-size:0.95rem; margin-bottom:12px; }
.pillar-card-new p { font-size:0.95rem; line-height:1.6; }

/* ============ 4. ATMANIRBHAR ============ */
.atmanirbhar {
    background:linear-gradient(135deg, #f7fafa, #e8f4f5);
    position:relative; overflow:hidden;
}
.atmanirbhar::before {
    content:''; position:absolute; right:-100px; top:50%; transform:translateY(-50%);
    width:500px; height:500px; opacity:0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='80' fill='none' stroke='%2300535b' stroke-width='0.5'/%3E%3Ccircle cx='100' cy='100' r='60' fill='none' stroke='%2300535b' stroke-width='0.5'/%3E%3Ccircle cx='100' cy='100' r='40' fill='none' stroke='%2300535b' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size:contain; background-repeat:no-repeat;
}
.atmanirbhar-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.atmanirbhar-content h2 { font-size:2.5rem; margin-bottom:24px; }
.atmanirbhar-content p { font-size:1.1rem; line-height:1.8; }
.founder-badge {
    display:inline-flex; align-items:center; gap:10px; margin-top:24px;
    padding:12px 24px; background:rgba(0,83,91,0.06); border:1px solid rgba(0,83,91,0.15);
    border-radius:50px; font-weight:600;
}
.founder-badge .material-symbols-outlined { color:var(--secondary-container); }
.atmanirbhar-visual img { width:100%; border-radius:20px; box-shadow:0 20px 60px rgba(0,83,91,0.12); }

/* ============ 5. WAR ROOM ============ */
.war-room {
    background:linear-gradient(135deg, #0a1e22, #0d2f34); color:#fff;
    padding:100px 0; position:relative; overflow:hidden;
}
.war-room::before {
    content:''; position:absolute; inset:0; opacity:0.03;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' x='20' y='20' fill='%239becf7'/%3E%3C/svg%3E");
}
.war-room .container { position:relative; z-index:2; text-align:center; }
.war-room h2 { color:#fff; font-size:2.8rem; margin-bottom:16px; }
.war-room .section-sub { color:#82d3de; font-size:1.15rem; max-width:700px; margin:0 auto 40px; }
.war-features { display:flex; justify-content:center; gap:40px; margin-bottom:50px; flex-wrap:wrap; }
.war-feature {
    display:flex; align-items:center; gap:10px; padding:14px 28px;
    background:rgba(155,236,247,0.08); border:1px solid rgba(155,236,247,0.15);
    border-radius:12px; color:#9becf7; font-weight:600;
}
.war-feature .material-symbols-outlined { color:var(--secondary-container); font-size:24px; }
.mockup-frame {
    max-width:900px; margin:0 auto;
    background:rgba(255,255,255,0.03); border:1px solid rgba(155,236,247,0.15);
    border-radius:20px; padding:20px; animation:pulseGlow 4s ease-in-out infinite;
    transform:perspective(1000px) rotateX(5deg);
}
.mockup-screen {
    aspect-ratio:16/9; background:linear-gradient(135deg, #0d1f22, #132d32);
    border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); color:var(--primary-fixed-dim); font-size:1.5rem;
    position:relative; overflow:hidden;
}
.mockup-screen::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, rgba(155,236,247,0.03), transparent);
    background-size:200% 100%; animation:shimmer 3s linear infinite;
}

/* ============ 6. PRICING ============ */
.pricing-swaraj { background:var(--bg-secondary); }
.pricing-swaraj .section-header { text-align:center; margin-bottom:50px; }
.pricing-swaraj .section-header h2 { font-size:2.5rem; }
.pricing-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.price-card {
    background:var(--bg-card); border-radius:16px; padding:36px 28px;
    border:2px solid var(--outline-variant); display:flex; flex-direction:column;
    transition:all 0.4s ease; position:relative; overflow:hidden;
}
.price-card:hover { transform:translateY(-8px); border-color:var(--primary); box-shadow:0 20px 50px rgba(0,83,91,0.1); }
.price-card.popular {
    border-color:var(--primary); transform:scale(1.03);
    box-shadow:0 25px 60px rgba(0,83,91,0.12);
}
.price-card.popular:hover { transform:scale(1.05); }
.popular-tag {
    background:linear-gradient(135deg, var(--secondary-container), #FF7F50);
    color:#fff; text-align:center; padding:8px; font-weight:800; text-transform:uppercase;
    letter-spacing:1px; font-size:0.85rem; margin:-36px -28px 24px; border-radius:14px 14px 0 0;
}
.price-card .card-hindi { color:var(--secondary-container); font-weight:700; font-size:1rem; margin-bottom:4px; }
.price-card h3 { font-size:1.5rem; margin-bottom:8px; }
.price-card .price-tag { font-size:2.5rem; font-weight:800; margin:16px 0; }
.price-card .price-tag span { font-size:0.9rem; color:var(--text-secondary); font-weight:400; }
.price-card ul { list-style:none; padding:0; margin:20px 0; flex-grow:1; }
.price-card ul li { display:flex; align-items:flex-start; gap:8px; margin-bottom:12px; font-size:0.95rem; }
.price-card ul li .material-symbols-outlined { color:var(--primary); font-size:20px; flex-shrink:0; margin-top:2px; }

/* ============ 7. PARTNER ============ */
.partner-section {
    background:linear-gradient(135deg, #fe9832, #FF7F50);
    color:#fff; position:relative; overflow:hidden;
}
.partner-section::before {
    content:''; position:absolute; inset:0; opacity:0.06;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='2' fill='%23fff'/%3E%3C/svg%3E");
}
.partner-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:2; }
.partner-content h2 { color:#fff; font-size:2.5rem; margin-bottom:20px; }
.partner-content p { color:rgba(255,255,255,0.9); font-size:1.15rem; line-height:1.7; margin-bottom:30px; }
.btn-partner {
    display:inline-block; background:#fff; color:#8f4e00; padding:16px 36px;
    border-radius:12px; font-weight:700; font-size:1.1rem; transition:all 0.3s;
    box-shadow:0 4px 20px rgba(0,0,0,0.15);
}
.btn-partner:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(0,0,0,0.25); }
.partner-visual img { width:100%; border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,0.2); }

/* ============ 8. FAQ ============ */
.faq-section { background:var(--bg-primary); }
.faq-section .section-header { text-align:center; margin-bottom:50px; }
.faq-section .section-header h2 { font-size:2.5rem; }
.faq-list { max-width:800px; margin:0 auto; }
.faq-item {
    background:var(--bg-card); border:1px solid var(--outline-variant);
    border-radius:12px; margin-bottom:16px; overflow:hidden; transition:all 0.3s;
}
.faq-item:hover { border-color:var(--primary); }
.faq-question {
    padding:24px 28px; cursor:pointer; display:flex; justify-content:space-between;
    align-items:center; font-weight:700; font-size:1.1rem; user-select:none;
}
.faq-question .material-symbols-outlined { transition:transform 0.3s; color:var(--primary); }
.faq-item.open .faq-question .material-symbols-outlined { transform:rotate(180deg); }
.faq-answer {
    max-height:0; overflow:hidden; transition:max-height 0.4s ease, padding 0.4s ease;
    padding:0 28px; color:var(--text-secondary); line-height:1.7;
}
.faq-item.open .faq-answer { max-height:200px; padding:0 28px 24px; }

/* ============ RESPONSIVE ============ */
@media(max-width:1024px) {
    .hero-swaraj .container { grid-template-columns:1fr; text-align:center; }
    .hero-content h1 { font-size:2.6rem; }
    .hero-buttons, .trust-badges-row { justify-content:center; }
    .hero-visual { max-width:500px; margin:0 auto; }
    .pillars-grid, .pricing-cards { grid-template-columns:repeat(2,1fr); }
    .price-card.popular { transform:none; }
    .atmanirbhar-grid, .partner-grid { grid-template-columns:1fr; }
    .comparison-visual { grid-template-columns:1fr; }
}
@media(max-width:768px) {
    .hero-content h1 { font-size:2rem; }
    .pillars-grid, .pricing-cards { grid-template-columns:1fr; }
    .war-features { flex-direction:column; align-items:center; }
    .hero-sub-text { font-size:1rem; }
    .war-room h2 { font-size:2rem; }
    .mockup-frame { transform:none; }
}