/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background:#f8f9fc; color:#081C3A; line-height:1.6; }
a { text-decoration:none; color:inherit; }
.container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
img { max-width:100%; display:block; }
:focus-visible { outline:2px solid #D4AF37; outline-offset:2px; }

/* Colors */
:root {
  --navy: #081C3A;
  --gold: #D4AF37;
  --white: #ffffff;
  --glass-bg: rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.2);
}

/* Progress Bar */
.progress-bar { position:fixed; top:0; left:0; height:4px; background:linear-gradient(90deg, #D4AF37, #f5d77b); width:0%; z-index:9999; transition:width 0.15s; }

/* Header */
.header { background:rgba(8,28,58,0.92); backdrop-filter:blur(8px); padding:0.8rem 0; position:sticky; top:0; z-index:1000; border-bottom:1px solid rgba(212,175,55,0.2); }
.header-grid { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.8rem; }
.logo-wrapper { display:flex; align-items:center; }
.logo { height:40px; width:auto; }
.nav-menu ul { display:flex; gap:1.5rem; list-style:none; }
.nav-menu a { color:rgba(255,255,255,0.85); font-weight:500; font-size:0.95rem; transition:0.2s; padding:0.4rem 0; border-bottom:2px solid transparent; }
.nav-menu a:hover, .nav-menu a.active { color:#D4AF37; border-bottom-color:#D4AF37; }
.menu-toggle { display:none; flex-direction:column; gap:5px; background:transparent; border:none; cursor:pointer; padding:4px; }
.menu-toggle span { width:28px; height:3px; background:white; border-radius:4px; transition:0.25s; }

/* Glassmorphism */
.glass-section { background:linear-gradient(135deg, rgba(8,28,58,0.92), rgba(26,47,74,0.92)); backdrop-filter:blur(4px); color:white; padding:3rem 0; }
.glass-card { background:rgba(255,255,255,0.08); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.15); border-radius:20px; padding:1.8rem; box-shadow:0 12px 40px rgba(0,0,0,0.2); transition:transform 0.25s, box-shadow 0.3s; }
.glass-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,0.3); }

/* Buttons */
.cta-btn { display:inline-block; padding:0.9rem 2.5rem; border-radius:50px; font-weight:700; font-size:1.1rem; text-align:center; transition:0.25s; cursor:pointer; border:none; }
.cta-btn.primary { background:linear-gradient(135deg, #D4AF37, #b8942e); color:#081C3A; box-shadow:0 8px 24px rgba(212,175,55,0.3); }
.cta-btn.primary:hover { transform:scale(1.03); box-shadow:0 12px 32px rgba(212,175,55,0.45); }
.cta-btn.secondary { background:transparent; border:2px solid #D4AF37; color:#D4AF37; }
.cta-btn.secondary:hover { background:#D4AF37; color:#081C3A; }

/* Hero */
.hero { padding:4rem 0 3rem; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.hero-title { font-size:clamp(2.2rem, 5vw, 3.5rem); font-weight:800; line-height:1.2; margin-bottom:1.2rem; }
.hero-title .typing-cursor { display:inline-block; width:3px; background:#D4AF37; animation:blink 0.8s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.hero-sub { font-size:1.2rem; opacity:0.9; margin-bottom:2rem; }
.hero-image svg { width:100%; max-width:400px; }

/* Features */
.features { padding:4rem 0; background:white; }
.section-title { font-size:clamp(1.8rem, 3vw, 2.6rem); font-weight:700; text-align:center; margin-bottom:2.5rem; color:#081C3A; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:2rem; }
.feature-card { text-align:center; }
.feature-card .icon { font-size:2.5rem; display:block; margin-bottom:0.8rem; }
.feature-card h3 { font-size:1.2rem; margin-bottom:0.4rem; color:#D4AF37; }
.feature-card p { color:rgba(255,255,255,0.8); font-size:0.95rem; }

/* How it works */
.how-it-works { padding:4rem 0; background:#f0f2f5; }
.steps { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:2rem; }
.step { background:white; padding:1.5rem; border-radius:20px; text-align:center; box-shadow:0 4px 16px rgba(0,0,0,0.06); transition:0.2s; }
.step:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.1); }
.step-number { display:inline-block; width:48px; height:48px; line-height:48px; border-radius:50%; background:#D4AF37; color:#081C3A; font-weight:800; font-size:1.3rem; margin-bottom:0.8rem; }

/* Why choose */
.why-choose { padding:4rem 0; background:white; }
.why-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:1.5rem; }
.why-item { text-align:center; padding:1.5rem 1rem; }
.why-item span { font-size:2.8rem; display:block; margin-bottom:0.5rem; }
.why-item h3 { color:#D4AF37; font-size:1.2rem; }

/* Testimonials */
.testimonials { padding:4rem 0; background:#f8f9fc; }
.testimonial-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:2rem; }
.testimonial-grid blockquote { font-style:italic; color:white; padding:1.8rem; border-radius:20px; }
.testimonial-grid cite { display:block; margin-top:0.8rem; font-weight:600; color:#D4AF37; font-style:normal; }

/* FAQ preview */
.faq-preview { padding:4rem 0; background:white; }
.faq-list { max-width:600px; margin:0 auto 2rem; }
.faq-list li { padding:0.8rem 0; border-bottom:1px solid #eaeef3; display:flex; gap:0.5rem; font-weight:500; }
.faq-list li span { color:#D4AF37; font-weight:700; }

/* CTA Section */
.cta-section { padding:4rem 0; text-align:center; }
.cta-content h2 { font-size:clamp(2rem, 3vw, 2.8rem); margin-bottom:1.5rem; }

/* Footer */
.footer { background:#081C3A; color:rgba(255,255,255,0.7); padding:2rem 0; border-top:1px solid rgba(212,175,55,0.2); }
.footer-grid { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; }
.footer-links { display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer-links a { color:rgba(255,255,255,0.7); transition:0.2s; }
.footer-links a:hover { color:#D4AF37; }

/* Back to top */
.back-to-top { position:fixed; bottom:2rem; right:2rem; background:#D4AF37; color:#081C3A; border:none; width:48px; height:48px; border-radius:50%; font-size:1.6rem; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,0.2); transition:0.2s; opacity:0; pointer-events:none; z-index:999; }
.back-to-top.visible { opacity:1; pointer-events:auto; }
.back-to-top:hover { transform:scale(1.08); }

/* Page Hero */
.page-hero { padding:4rem 0 3rem; text-align:center; }
.page-hero h1 { font-size:clamp(2.2rem, 4vw, 3.2rem); }

/* Legal content */
.legal-content { padding:3rem 0; background:white; }
.legal-content h2 { margin:1.8rem 0 0.6rem; color:#081C3A; }
.legal-content p { margin-bottom:0.8rem; max-width:800px; }

/* FAQ Accordion */
.faq-accordion { padding:3rem 0; background:#f8f9fc; }
.accordion-item { background:white; border-radius:14px; margin-bottom:0.8rem; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.accordion-header { width:100%; background:transparent; border:none; padding:1.2rem 1.5rem; font-size:1.05rem; font-weight:600; text-align:left; cursor:pointer; display:flex; justify-content:space-between; align-items:center; color:#081C3A; }
.accordion-header::after { content:"+"; font-size:1.6rem; color:#D4AF37; transition:0.2s; }
.accordion-header[aria-expanded="true"]::after { content:"−"; }
.accordion-body { max-height:0; overflow:hidden; transition:max-height 0.3s ease, padding 0.3s; padding:0 1.5rem; }
.accordion-body p { padding-bottom:1.2rem; color:#2a405a; }

/* Contact Form */
.contact-form-section { padding:3rem 0; background:white; }
.contact-form { max-width:600px; margin:0 auto; padding:2.5rem; }
.contact-form label { display:block; margin-bottom:0.3rem; font-weight:600; color:#081C3A; }
.contact-form input, .contact-form textarea { width:100%; padding:0.8rem 1rem; border:1px solid #dce1e8; border-radius:12px; margin-bottom:1.2rem; font-family:inherit; transition:0.2s; }
.contact-form input:focus, .contact-form textarea:focus { border-color:#D4AF37; outline:none; box-shadow:0 0 0 3px rgba(212,175,55,0.2); }

/* How it works detailed */
.how-steps-detailed { padding:3rem 0; background:white; }
.step-detail { display:flex; gap:1.5rem; align-items:flex-start; margin-bottom:2.5rem; }
.step-number.large { width:64px; height:64px; line-height:64px; font-size:1.8rem; flex-shrink:0; }

/* About page */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.about-text h2 { color:#D4AF37; margin-top:1.8rem; }
.about-text p { color:#2a405a; }
.about-image svg { width:100%; max-width:350px; }

/* Responsive */
@media (max-width: 992px) {
  .hero-grid { grid-template-columns:1fr; text-align:center; }
  .hero-image { order:-1; max-width:400px; margin:0 auto; }
  .about-grid { grid-template-columns:1fr; text-align:center; }
  .about-image { order:-1; }
}
@media (max-width: 768px) {
  .nav-menu { display:none; width:100%; }
  .nav-menu.open { display:block; }
  .nav-menu ul { flex-direction:column; align-items:center; gap:0.5rem; padding:1rem 0; }
  .menu-toggle { display:flex; }
  .footer-grid { flex-direction:column; text-align:center; }
  .step-detail { flex-direction:column; align-items:center; text-align:center; }
}
@media (max-width: 480px) {
  .cta-btn { width:100%; }
  .glass-card { padding:1.2rem; }
}