*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; color: #222; background: #fff; }
a { text-decoration: none; color: inherit; }

/* Nav */
.navbar { position: sticky; top: 0; z-index: 100; background: white; border-bottom: 1px solid #e5e7eb; }
.nav-inner { max-width: 1100px; margin: 0 auto; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; }
.nav-cta { background: #2980b9; color: white; padding: 8px 18px; border-radius: 6px; font-weight: 600; font-size: 14px; transition: background .2s; }
.nav-cta:hover { background: #1a6fa8; }

/* Hero */
.hero { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); color: white; padding: 80px 20px; text-align: center; min-height: 70vh; display: flex; align-items: center; }
.hero-inner { max-width: 700px; margin: 0 auto; }
.hero h1 { font-size: clamp(28px, 5vw, 52px); font-weight: 800; line-height: 1.15; margin-bottom: 16px; }
.hero-sub { font-size: 18px; color: #a0b4c8; margin-bottom: 32px; line-height: 1.6; }
.btn-primary { display: inline-block; background: #f39c12; color: white; padding: 14px 32px; border-radius: 8px; font-weight: 700; font-size: 16px; border: none; cursor: pointer; transition: background .2s, transform .1s; }
.btn-primary:hover { background: #e67e22; transform: translateY(-1px); }
.btn-lg { padding: 18px 40px; font-size: 18px; }

/* Social proof */
.social-proof-bar { background: #f39c12; color: white; padding: 14px 20px; }
.proof-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 8px; font-weight: 600; font-size: 14px; }

/* Services */
.services-section { padding: 60px 20px; background: #f8f9fa; }
.section-inner { max-width: 1100px; margin: 0 auto; }
.services-section h2, .how-it-works h2, .cta-section h2 { text-align: center; font-size: 32px; font-weight: 800; margin-bottom: 8px; }
.section-sub { text-align: center; color: #666; margin-bottom: 40px; font-size: 16px; }
.service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media(min-width: 768px) { .service-grid { grid-template-columns: repeat(4, 1fr); } }
.service-card { background: white; border-radius: 12px; padding: 28px 20px; text-align: center; transition: transform .2s, box-shadow .2s; border: 2px solid transparent; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.12); border-color: #2980b9; }
.card-icon { font-size: 40px; margin-bottom: 12px; }
.service-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.service-card p { font-size: 13px; color: #666; margin-bottom: 16px; line-height: 1.5; }
.card-cta { color: #2980b9; font-weight: 600; font-size: 13px; }

/* How it works */
.how-it-works { padding: 60px 20px; }
.steps-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
@media(min-width: 600px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }
.step { text-align: center; padding: 20px; }
.step-num { width: 52px; height: 52px; background: #2980b9; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; margin: 0 auto 16px; }
.step h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.step p { color: #666; font-size: 14px; line-height: 1.6; }

/* Service hero */
.service-hero { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, var(--accent, #2980b9) 100%); color: white; padding: 80px 20px; text-align: center; }
.service-icon-lg { font-size: 64px; margin-bottom: 16px; }

/* Trust section */
.trust-section { padding: 40px 20px; background: white; }
.trust-grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 600px; margin: 0 auto; }
@media(min-width: 600px) { .trust-grid { grid-template-columns: repeat(3,1fr); } }
.trust-item { display: flex; align-items: center; gap: 10px; background: #f0f7ff; padding: 16px; border-radius: 8px; font-size: 14px; font-weight: 600; }

/* CTA section */
.cta-section { padding: 60px 20px; background: #1a1a2e; color: white; }
.cta-section p { color: #a0b4c8; margin-bottom: 24px; font-size: 16px; }

/* Footer */
.footer { background: #111; color: #999; padding: 30px 20px; text-align: center; font-size: 13px; }
.footer-links { margin-top: 10px; }
.footer-links a { color: #666; margin: 0 8px; }

/* Chatbot */
#chatbot-btn { position: fixed; bottom: 24px; right: 24px; background: #2980b9; color: white; padding: 14px 20px; border-radius: 50px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; box-shadow: 0 4px 16px rgba(41,128,185,.4); z-index: 1000; transition: transform .2s; }
#chatbot-btn:hover { transform: scale(1.05); }
#chatbot-window { position: fixed; bottom: 90px; right: 24px; width: 360px; max-width: calc(100vw - 48px); height: 480px; background: white; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,.2); display: none; flex-direction: column; z-index: 1000; overflow: hidden; }
#chatbot-window.open { display: flex; }
#chat-header { background: #2980b9; color: white; padding: 14px 16px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
#chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 80%; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.msg.bot { background: #f0f7ff; color: #222; align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.user { background: #2980b9; color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
#chat-input-area { display: flex; border-top: 1px solid #eee; padding: 12px; gap: 8px; }
#chat-input { flex: 1; border: 1px solid #ddd; border-radius: 6px; padding: 8px 12px; font-size: 14px; outline: none; }
#chat-input:focus { border-color: #2980b9; }
#chat-input-area button { background: #2980b9; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.typing { font-size: 12px; color: #999; align-self: flex-start; padding: 4px 14px; }