/* ===== Global Styles ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: #f9fafb; color: #1f2937; line-height: 1.6; }
a { text-decoration: none; }

/* ===== Navigation ===== */
nav {
    position: fixed; top: 0; left: 0; right: 0;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); z-index: 1000;
}
.nav-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; justify-content: space-between; align-items: center; }
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo-icon {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, #2563eb, #1e3a8a);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 18px;
}
.nav-logo-text { font-weight: 700; font-size: 18px; color: #111827; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { color: #374151; font-weight: 500; font-size: 15px; transition: color 0.2s; position: relative; padding-bottom: 2px; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:#2563eb; transition:width 0.3s ease; }
.nav-links a:hover { color: #2563eb; }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a.active { color:#2563eb; }
.btn-primary {
    background: #2563eb; color: #fff !important; padding: 8px 20px; border-radius: 8px;
    font-weight: 600; transition: background 0.2s !important;
}
.btn-primary:hover { background: #1d4ed8; }
.btn-primary::after { display:none !important; }
.mobile-toggle { display:none; background:none; border:none; font-size:22px; color:#374151; cursor:pointer; }
.mobile-menu { display:none; border-top:1px solid #e5e7eb; padding:12px 24px; background:#fff; }
.mobile-menu.open { display:block; }
.mobile-menu a { display:block; padding:8px 0; color:#374151; font-weight:500; }
.mobile-menu .btn-primary { display:inline-block; margin-top:8px; }

@media (max-width: 768px) {
    .nav-links { display:none; }
    .mobile-toggle { display:block; }
}

/* ===== Hero ===== */
.hero {
    min-height: 100vh; padding-top: 64px;
    background: linear-gradient(135deg, rgba(15,23,42,0.88), rgba(30,58,138,0.78)),
                url('https://images.unsplash.com/photo-1578575437130-527eed3abbec?w=1920&q=80') center/cover;
    display: flex; align-items: center;
}
.hero-inner { max-width: 1280px; margin: 0 auto; padding: 80px 24px; max-width: 768px; }
.hero-tag { color:#93c5fd; font-weight:600; font-size:16px; letter-spacing:0.08em; margin-bottom:16px; }
.hero h1 { color:#fff; font-size: clamp(36px,5vw,60px); font-weight:800; line-height:1.15; margin-bottom:24px; }
.hero h1 span { color:#60a5fa; }
.hero p { color:#d1d5db; font-size:18px; margin-bottom:32px; line-height:1.7; }
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; }
.btn-white-outline {
    border:2px solid #fff; color:#fff; padding:14px 32px; border-radius:8px; font-size:16px; font-weight:600; transition:all 0.2s;
}
.btn-white-outline:hover { background:#fff; color:#111827; }
.btn-hero {
    background:#2563eb; color:#fff; padding:14px 32px; border-radius:8px; font-size:16px; font-weight:600;
    box-shadow:0 10px 25px rgba(37,99,235,0.35); transition:background 0.2s;
}
.btn-hero:hover { background:#1d4ed8; }

/* ===== Sections ===== */
section { padding:80px 0; }
.section-white { background:#fff; }
.section-gray { background:#f9fafb; }
.section-dark { background:#0f172a; color:#fff; }
.container { max-width:1280px; margin:0 auto; padding:0 24px; }
.section-tag { color:#2563eb; font-weight:600; font-size:14px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px; text-align:center; }
.section-dark .section-tag { color:#60a5fa; }
.section-title { font-size:clamp(24px,3.5vw,36px); font-weight:800; color:#111827; margin-bottom:16px; text-align:center; }
.section-dark .section-title { color:#fff; }
.section-desc { color:#6b7280; max-width:640px; margin:0 auto 56px; text-align:center; font-size:16px; }
.section-dark .section-desc { color:#94a3b8; }

/* ===== Cards Grid ===== */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
@media (max-width:1024px){ .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:768px){ .grid-2,.grid-3{grid-template-columns:1fr;} }

/* ===== About ===== */
.about-img img { width:100%; border-radius:16px; box-shadow:0 20px 40px rgba(0,0,0,0.12); }
.about-tag { color:#2563eb; font-weight:600; font-size:14px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px; }
.about h2 { font-size:clamp(24px,3.5vw,36px); font-weight:800; color:#111827; margin-bottom:24px; }
.about p { color:#4b5563; line-height:1.75; margin-bottom:20px; }
.advantages { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.adv-card { display:flex; gap:12px; padding:16px; background:#f9fafb; border-radius:12px; align-items:flex-start; }
.adv-icon { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.adv-icon i { font-size:16px; }
.adv-blue { background:#dbeafe; color:#2563eb; }
.adv-green { background:#dcfce7; color:#16a34a; }
.adv-amber { background:#fef3c7; color:#d97706; }
.adv-purple { background:#f3e8ff; color:#9333ea; }
.adv-card h4 { font-weight:700; color:#111827; margin-bottom:4px; font-size:15px; }
.adv-card p { font-size:13px; color:#6b7280; margin:0; }

/* ===== Product Cards ===== */
.product-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.06); transition:all 0.3s; }
.product-card:hover { transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,0.12); }
.product-img { height:200px; display:flex; align-items:center; justify-content:center; }
.product-img i { font-size:56px; color:#fff; opacity:0.85; }
.product-info { padding:24px; }
.product-info h3 { font-size:18px; font-weight:700; color:#111827; margin-bottom:8px; }
.product-info p { font-size:14px; color:#6b7280; line-height:1.6; margin-bottom:16px; }
.product-info a { color:#2563eb; font-weight:600; font-size:14px; }
.product-info a:hover { color:#1d4ed8; }

/* ===== Services Timeline ===== */
.timeline-wrap { max-width:768px; margin:0 auto; padding-left:64px; position:relative; }
.timeline-line { position:absolute; left:32px; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,#1e40af,#3b82f6); }
.timeline-item { position:relative; margin-bottom:40px; }
.timeline-dot { position:absolute; left:-40px; top:0; width:28px; height:28px; border-radius:50%; background:#1e40af; border:4px solid #dbeafe; z-index:1; }
.timeline-card { background:#f9fafb; border-radius:12px; padding:24px; margin-left:16px; }
.timeline-step { color:#2563eb; font-weight:700; font-size:13px; margin-bottom:4px; }
.timeline-card h3 { font-size:18px; font-weight:700; color:#111827; margin-bottom:8px; }
.timeline-card p { color:#4b5563; font-size:14px; line-height:1.7; }

/* ===== Contact Cards ===== */
.contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; max-width:896px; margin:0 auto; }
@media (max-width:768px){ .contact-grid{grid-template-columns:1fr;} }
.contact-card { text-align:center; padding:32px; background:#f9fafb; border-radius:16px; }
.contact-icon { width:56px; height:56px; border-radius:50%; background:#dbeafe; color:#2563eb; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:20px; }
.contact-card h4 { font-weight:700; color:#111827; margin-bottom:8px; }
.contact-card p { color:#6b7280; font-size:14px; }

/* ===== Form ===== */
.form-box { max-width:800px; margin:0 auto; }
.form-card { background:#fff; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,0.08); padding:32px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.form-row-full { margin-bottom:20px; }
@media (max-width:768px){ .form-row{grid-template-columns:1fr;} }
.form-card label { display:block; font-size:14px; font-weight:600; color:#374151; margin-bottom:8px; }
.form-card input, .form-card select, .form-card textarea {
    width:100%; padding:12px 16px; border:1px solid #d1d5db; border-radius:8px; font-size:15px;
    outline:none; transition:border-color 0.2s,box-shadow 0.2s; font-family:inherit;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,0.1); }
.form-card textarea { resize:none; }
.btn-submit {
    width:100%; background:#2563eb; color:#fff; padding:16px; border-radius:8px; font-size:16px; font-weight:600;
    border:none; cursor:pointer; box-shadow:0 10px 25px rgba(37,99,235,0.25); transition:background 0.2s;
}
.btn-submit:hover { background:#1d4ed8; }
.form-msg { display:none; text-align:center; padding:16px; border-radius:8px; margin-top:16px; font-weight:500; }
.form-msg.success { background:#dcfce7; color:#166534; display:block; }
.form-msg.error { background:#fee2e2; color:#991b1b; display:block; }

.comments-section { margin-top:48px; }
.comments-title { font-size:20px; font-weight:700; color:#111827; margin-bottom:24px; display:flex; align-items:center; gap:8px; }
.comments-title i { color:#2563eb; }
.comment-item { background:#fff; border-radius:12px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,0.05); margin-bottom:16px; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
.comment-header { display:flex; justify-content:space-between; margin-bottom:8px; }
.comment-name { font-weight:700; color:#111827; font-size:15px; }
.comment-meta { font-size:13px; color:#9ca3af; }
.comment-body { color:#4b5563; font-size:14px; line-height:1.6; margin-bottom:8px; }
.comment-info { font-size:12px; color:#6b7280; }
.no-comments { color:#9ca3af; text-align:center; padding:32px; }

/* ===== Footer ===== */
footer { background:#0f172a; color:#cbd5e1; padding:64px 0 32px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:48px; }
@media (max-width:768px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .footer-grid{grid-template-columns:1fr;} }
.footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer-logo-icon {
    width:40px; height:40px; background:linear-gradient(135deg,#2563eb,#1e3a8a);
    border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:18px;
}
.footer-logo-text { font-weight:700; color:#fff; font-size:18px; }
.footer-about { color:#94a3b8; font-size:14px; line-height:1.7; margin-bottom:16px; }
.footer-social a {
    display:inline-flex; width:40px; height:40px; border-radius:8px; background:#1e293b;
    align-items:center; justify-content:center; color:#cbd5e1; margin-right:12px; transition:background 0.2s;
}
.footer-social a:hover { background:#2563eb; color:#fff; }
footer h4 { color:#fff; font-weight:700; margin-bottom:16px; font-size:15px; }
footer ul { list-style:none; }
footer ul li { margin-bottom:8px; }
footer ul li a { color:#94a3b8; font-size:14px; transition:color 0.2s; }
footer ul li a:hover { color:#60a5fa; }
.footer-bottom { border-top:1px solid #1e293b; padding-top:24px; text-align:center; color:#64748b; font-size:13px; }

/* ===== Page Banner ===== */
.page-banner {
    padding-top:120px; padding-bottom:60px;
    background:linear-gradient(135deg, rgba(15,23,42,0.9), rgba(30,58,138,0.8)),
               url('https://images.unsplash.com/photo-1494412651409-8963ce7935a7?w=1920&q=80') center/cover;
    text-align:center; color:#fff;
}
.page-banner h1 { font-size:clamp(28px,4vw,48px); font-weight:800; margin-bottom:12px; }
.page-banner p { color:#93c5fd; font-size:16px; max-width:640px; margin:0 auto; }