:root {
  --primary: #0a2540;
  --secondary: #0070f3;
  --accent: #00bfa5;
  --light: #f6f9fc;
  --dark: #0a2540;
  --text: #333;
  --muted: #6b7c93;
  --white: #fff;
  --border: #e3e8ee;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
  --radius: 8px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:var(--text); line-height:1.6; background:var(--white); }
img { max-width:100%; height:auto; display:block; }
a { color:var(--secondary); text-decoration:none; }
a:hover { text-decoration:underline; }

.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* Header */
.site-header { background:var(--primary); color:var(--white); position:sticky; top:0; z-index:1000; box-shadow:var(--shadow); }
.site-header .container { display:flex; align-items:center; justify-content:space-between; height:72px; }
.logo { font-size:1.4rem; font-weight:800; letter-spacing:-0.5px; color:var(--white); }
.logo span { color:var(--accent); }
.logo-img { height:48px; width:auto; display:block; }
.nav-toggle { display:none; background:none; border:none; color:var(--white); font-size:1.5rem; cursor:pointer; }
.main-nav ul { display:flex; list-style:none; gap:32px; }
.main-nav a { color:rgba(255,255,255,0.9); font-weight:500; font-size:0.95rem; }
.main-nav a:hover { color:var(--white); text-decoration:none; }

/* Buttons */
.btn { display:inline-block; padding:12px 28px; border-radius:var(--radius); font-weight:600; font-size:0.95rem; cursor:pointer; border:none; transition:all .2s; }
.btn-primary { background:var(--secondary); color:var(--white); }
.btn-primary:hover { background:#005bb5; text-decoration:none; }
.btn-accent { background:var(--accent); color:var(--white); }
.btn-accent:hover { background:#009e88; text-decoration:none; }
.btn-outline { background:transparent; color:var(--secondary); border:2px solid var(--secondary); }
.btn-outline:hover { background:var(--secondary); color:var(--white); text-decoration:none; }

/* Hero */
.hero { background:linear-gradient(135deg, var(--primary) 0%, #0d3b66 100%); color:var(--white); padding:100px 0 80px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-50%; right:-20%; width:800px; height:800px; background:rgba(255,255,255,0.03); border-radius:50%; }
.hero h1 { font-size:3rem; font-weight:800; line-height:1.15; margin-bottom:20px; max-width:700px; }
.hero p { font-size:1.15rem; color:rgba(255,255,255,0.85); max-width:560px; margin-bottom:32px; }
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; }

/* Sections */
.section { padding:80px 0; }
.section-title { font-size:2rem; font-weight:700; margin-bottom:12px; color:var(--dark); }
.section-subtitle { color:var(--muted); font-size:1.05rem; margin-bottom:48px; max-width:640px; }

.bg-light { background:var(--light); }

/* Cards */
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:32px; }
.grid-4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; }
.card { background:var(--white); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); border:1px solid var(--border); transition:transform .2s; }
.card:hover { transform:translateY(-4px); }
.card-icon { width:56px; height:56px; background:var(--light); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin-bottom:20px; }
.card h3 { font-size:1.15rem; margin-bottom:10px; color:var(--dark); }
.card p { color:var(--muted); font-size:0.95rem; }

/* Brands */
.brand-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:24px; text-align:center; transition:all .2s; }
.brand-card:hover { border-color:var(--secondary); box-shadow:var(--shadow); }
.brand-card h4 { font-size:1rem; margin-top:12px; color:var(--dark); }

/* Parts */
.parts-search { display:flex; gap:12px; margin-bottom:40px; max-width:600px; }
.parts-search input { flex:1; padding:14px 18px; border:1px solid var(--border); border-radius:var(--radius); font-size:1rem; }
.parts-search input:focus { outline:none; border-color:var(--secondary); }
.parts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; }
.part-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:24px; position:relative; }
.part-card .part-brand { font-size:0.8rem; font-weight:600; color:var(--secondary); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
.part-card .part-number { font-size:1.1rem; font-weight:700; color:var(--dark); margin-bottom:6px; }
.part-card .part-desc { color:var(--muted); font-size:0.9rem; margin-bottom:16px; }
.part-card .part-price { font-size:1.25rem; font-weight:700; color:var(--accent); margin-bottom:12px; }
.part-card .part-meta { font-size:0.8rem; color:var(--muted); margin-bottom:16px; }
.part-card .btn { width:100%; text-align:center; }

/* Inquiry Form */
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-weight:500; margin-bottom:6px; font-size:0.9rem; }
.form-group input, .form-group textarea, .form-group select { width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius); font-size:1rem; font-family:inherit; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline:none; border-color:var(--secondary); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* Contact */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.contact-info h3 { font-size:1.2rem; margin-bottom:16px; }
.contact-info p { margin-bottom:12px; color:var(--muted); }
.contact-info .cta { margin-top:24px; }

/* WhatsApp Float */
.whatsapp-float { position:fixed; bottom:24px; right:24px; z-index:999; }
.whatsapp-float a { display:flex; align-items:center; gap:10px; background:#25d366; color:#fff; padding:14px 22px; border-radius:50px; font-weight:600; box-shadow:0 4px 16px rgba(0,0,0,0.2); transition:transform .2s; }
.whatsapp-float a:hover { transform:scale(1.05); text-decoration:none; }

/* Footer */
.site-footer { background:var(--primary); color:rgba(255,255,255,0.75); padding:60px 0 24px; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:40px; margin-bottom:40px; }
.footer-col h4 { color:var(--white); font-size:1rem; margin-bottom:16px; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:8px; }
.footer-col a { color:rgba(255,255,255,0.7); font-size:0.9rem; }
.footer-col a:hover { color:var(--white); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding-top:24px; text-align:center; font-size:0.85rem; color:rgba(255,255,255,0.5); }

/* Blog */
.blog-list { display:grid; gap:32px; }
.blog-card { display:grid; grid-template-columns:240px 1fr; gap:24px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.blog-card .blog-thumb { background:var(--light); display:flex; align-items:center; justify-content:center; font-size:3rem; }
.blog-card .blog-content { padding:24px; }
.blog-card h3 { font-size:1.2rem; margin-bottom:8px; }
.blog-card p { color:var(--muted); font-size:0.95rem; }

/* Article */
.article-header { background:var(--light); padding:60px 0 40px; }
.article-header h1 { font-size:2.2rem; max-width:800px; }
.article-body { max-width:800px; margin:0 auto; padding:48px 24px; }
.article-body h2 { font-size:1.4rem; margin:32px 0 12px; color:var(--dark); }
.article-body p { margin-bottom:16px; color:var(--text); }
.article-body ul { margin-bottom:16px; padding-left:24px; }
.article-body li { margin-bottom:8px; }

/* Utilities */
.text-center { text-align:center; }
.mt-1 { margin-top:8px; }
.mt-2 { margin-top:16px; }
.mt-3 { margin-top:24px; }
.mb-3 { margin-bottom:24px; }

/* Mobile */
@media (max-width:768px) {
  .nav-toggle { display:block; }
  .main-nav { display:none; position:absolute; top:72px; left:0; right:0; background:var(--primary); padding:24px; }
  .main-nav.active { display:block; }
  .main-nav ul { flex-direction:column; gap:16px; }
  .hero h1 { font-size:2rem; }
  .hero { padding:60px 0 50px; }
  .contact-grid, .form-row, .blog-card { grid-template-columns:1fr; }
  .blog-card .blog-thumb { height:160px; }
  .section { padding:48px 0; }
}