:root {
  --brand: #ff7a00;
  --accent: #1f2937;
  --bg: #f7fafc;
  --text: #0f172a;
  --muted: #4b5563;
  --card: #ffffff;
  --shadow: 0 18px 40px rgba(0,0,0,.08);
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { opacity: .9; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.btn { display:inline-flex; align-items:center; gap:10px; background: var(--brand); color: #1f2937; border:0; padding:14px 20px; border-radius: 14px; font-weight: 800; box-shadow: var(--shadow); cursor:pointer; transition: transform .15s ease; }
.btn:hover { transform: translateY(-2px); }
.badge { background: rgba(255,122,0,.12); border:1px solid rgba(255,122,0,.35); color:#7c2d12; padding:8px 12px; border-radius:999px; font-weight:700; font-size:13px; }

.nav { position:sticky; top:0; z-index:60; background: rgba(255,255,255,.7); backdrop-filter: blur(10px); border-bottom:1px solid rgba(0,0,0,.06); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
.brand { display:flex; gap:14px; align-items:center; }
.brand img { height:42px; width:auto; }
.brand .name { font-weight:900; letter-spacing:.2px; color: var(--accent); }
.menu { display:flex; gap:18px; flex-wrap:wrap; }
.menu a { color: var(--muted); font-weight:700; padding:10px 12px; border-radius:10px; }
.menu a:hover { background: rgba(0,0,0,.04); color: var(--text); }

.hero { position:relative; padding:0; overflow:hidden; }
.hero::before {
  content:""; position:absolute; inset:-20% -10% auto -10%; height:70%; background:linear-gradient(135deg, #fff, #fff0); transform:skewY(-6deg); box-shadow: var(--shadow);
}
.hero .inner { position:relative; display:grid; grid-template-columns: 1.15fr .85fr; gap:30px; align-items:center; padding: 88px 0 60px; }
.hero h1 { font-size: clamp(36px, 6vw, 64px); line-height:1.05; margin:0 0 10px; }
.hero p { color: var(--muted); font-size: clamp(16px, 2vw, 18px); }
.hero .card { background: rgba(255,255,255,.8); border:1px solid rgba(0,0,0,.06); padding:28px; border-radius:24px; box-shadow: var(--shadow); backdrop-filter: blur(6px); }

.section { padding: 64px 0; }
.section h2 { font-size: clamp(26px, 4.6vw, 38px); margin:0 0 8px; }
.section p.lead { color: var(--muted); max-width: 820px; }

.grid { display:grid; gap:20px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
  .hero .inner { grid-template-columns: 1fr; }
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
}

.card { background: var(--card); border:1px solid rgba(0,0,0,.06); padding:20px; border-radius:20px; box-shadow: var(--shadow); }
.card h3 { margin:8px 0; font-size: 20px; }
.card p { color: var(--muted); font-size: 15px; }

.products .item img { width:100%; height:220px; object-fit:cover; border-radius:16px; border:1px solid rgba(0,0,0,.06); background:#f3f4f6; }
.products .item .meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; }
.price { font-weight:900; color:#1f2937; }

.features .item .icon { width:52px; height:52px; border-radius:12px; background: rgba(255,122,0,.12); border:1px solid rgba(255,122,0,.35); display:grid; place-items:center; font-size:22px; }
.features .item p { margin: 4px 0 0; }

.timeline { border-left:3px solid var(--brand); margin-left:12px; padding-left:18px; display:grid; gap:14px; }
.timeline .t { background:#fff; border:1px solid rgba(0,0,0,.06); padding:14px; border-radius:12px; box-shadow: var(--shadow); }
.timeline .t b { color: var(--accent); }

.cta-mobile { position: fixed; left:0; right:0; bottom:12px; display:none; gap:12px; justify-content:center; z-index:70; }
.cta-mobile .btn { box-shadow: 0 10px 20px rgba(255,122,0,.35); }
@media (max-width: 640px) { .cta-mobile { display:flex; } }

.testimonials .card blockquote { margin:0; font-size:16px; color:#111827; }
.testimonials .card .who { margin-top:10px; color:#6b7280; font-size:14px; }

.contact .row { display:grid; grid-template-columns: 1.1fr .9fr; gap:20px; }
@media (max-width: 980px) { .contact .row { grid-template-columns: 1fr; } }
.form { display:grid; gap:12px; }
.input, textarea { background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:12px 14px; color:var(--text); font-size:15px; }
textarea { min-height: 120px; resize: vertical; }

.footer { padding: 36px 0; color:#6b7280; border-top:1px solid rgba(0,0,0,.06); margin-top:40px; }
.footer .row { display:grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items:center; }
.footer .social a { margin-right: 14px; color:#111827; }
small { color: #6b7280; }