:root {
      --bg: #0b0e13;
      --card: #11151b;
      --muted: #78818f;
      --text: #eaf0ff;
      --accent: #ffd166; /* warm highlight */
      --primary: #38bdf8; /* sky */
      --success: #22c55e;
      --danger: #ef4444;
      --shadow: 0 10px 30px rgba(0,0,0,.25);
      --radius: 16px;
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      background: linear-gradient(180deg, #0b0e13 0%, #0f141c 100%);
      color: var(--text);
    }
    a { color: inherit; text-decoration: none; }
    .container { width: min(1120px, 92%); margin: 0 auto; }
    header {
      position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(150%) blur(10px);
      background: rgba(11,14,19,0.6); border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .nav { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
    .brand { display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.3px; }
    .brand img { width:34px; height:34px; border-radius:8px; }
    .btn { display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.12); padding:12px 18px; border-radius:12px; font-weight:600; transition:.2s ease; }
    .btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.24); }
    .btn-primary { background: var(--primary); color:#081017; border-color: transparent; }
    .btn-primary:hover { filter: brightness(1.05); }
    .btn-whatsapp { background:#25D366; color:#081017; border-color: transparent; }

    /* Hero */
    .hero { padding: 64px 0 32px; }
    .hero-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center; }
    .headline { font-size: clamp(28px, 4.0vw, 48px); line-height: 1.08; margin: 0 0 12px; }
    .sub { color: var(--muted); font-size: clamp(15px, 1.7vw, 18px); }
    .cta-row { display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
    .badges { display:flex; gap:16px; flex-wrap:wrap; margin-top:20px; color:#cbd5e1; }
    .badge { background: rgba(255,255,255,.06); padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.08); font-size:12px; }
    .card { background: var(--card); border:1px solid rgba(255,255,255,.06); box-shadow: var(--shadow); border-radius: var(--radius); }
    .hero-media { aspect-ratio: 4/3; overflow:hidden; position:relative; }
    .hero-media img { width:100%; height:100%; object-fit:cover; display:block; filter: saturate(105%); }
    .tag { color: var(--accent); font-weight:700; letter-spacing:.25px; font-size:12px; text-transform: uppercase; }

    /* Sections */
    section { padding: 56px 0; }
    h2 { font-size: clamp(24px, 3vw, 36px); margin:0 0 12px; }
    p.lead { color: var(--muted); margin: 0 0 24px; }

    .grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
    .grid-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap:18px; }

    .feature { padding:18px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }
    .feature h3 { margin:8px 0 6px; font-size:18px; }
    .feature p { margin:0; color:#b8c2d3; font-size:14px; }

    .showcase { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
    .showcase figure { margin:0; position:relative; overflow:hidden; border-radius:14px; border:1px solid rgba(255,255,255,.08); }
    .showcase img { width:100%; height:220px; object-fit:cover; display:block; transition: transform .3s ease; }
    .showcase figure:hover img { transform: scale(1.04); }
    .showcase figcaption { position:absolute; inset:auto 0 0 0; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.75)); padding:10px 12px; font-size:14px; }

    .steps { counter-reset: step; display:grid; grid-template-columns: repeat(5, 1fr); gap:12px; }
    .step { padding:16px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
    .step h4 { margin:0 0 8px; font-size:16px; }
    .step h4::before { counter-increment: step; content: "Step " counter(step) ". "; color: var(--accent); }

    .testimonials { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
    .quote { padding:18px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); font-size:14px; }
    .quote footer { margin-top:10px; color:#cbd5e1; font-weight:600; }

    .contact { display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; }
    form { display:grid; gap:12px; }
    .input { background:#0e131a; border:1px solid rgba(255,255,255,.08); color:var(--text); padding:12px 14px; border-radius:12px; width:100%; }
    .input:focus { outline:2px solid var(--primary); border-color: transparent; }
    textarea.input { min-height: 120px; resize: vertical; }

    .cities { display:flex; gap:8px; flex-wrap:wrap; }
    .pill { padding:8px 12px; border-radius:999px; background: rgba(56,189,248,.08); border:1px solid rgba(56,189,248,.25); font-size:12px; }

    footer { padding: 28px 0 48px; color:#93a3b8; font-size:13px; border-top:1px solid rgba(255,255,255,.08); }

    /* Responsive */
    /* ================= Tablet view (≤1024px) ================= */
@media (max-width: 1024px) {
  .hero-grid,
  .contact {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials {
    grid-template-columns: repeat(2, 1fr);
  }

  .showcase img {
    height: 180px; /* smaller images */
  }
}

/* ================= Mobile view (≤720px) ================= */
@media (max-width: 720px) {
  /* Collapse all grids */
  .grid-3,
  .grid-2,
  .steps,
  .testimonials,
  .showcase {
    grid-template-columns: 1fr;
  }

  /* Hero section */
  .hero {
    padding: 28px 16px;
    text-align: center;
  }

  .headline {
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.3;
  }

  .sub {
    font-size: 14px;
  }

  /* Buttons full width */
  .cta-row {
    flex-direction: column;
    gap: 12px;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  /* Showcase images smaller */
  .showcase img {
    height: 160px;
    max-width: 100%;
    border-radius: 12px;
  }

  /* Inputs full width */
  .input {
    font-size: 14px;
    padding: 10px 12px;
  }
}

/* ================= Extra small phones (≤480px) ================= */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  h2 {
    font-size: 20px;
  }

  .headline {
    font-size: 20px;
  }

  .sub {
    font-size: 13px;
  }

  .btn,
  .input {
    padding: 10px 12px;
    font-size: 14px;
  }

  .hero {
    padding: 20px 12px;
  }
}

    @media (max-width: 720px) {
  nav {
    flex-direction: column;   /* stack buttons vertically */
    align-items: stretch;     /* full width buttons */
    gap: 10px;                /* spacing between */
  }
  nav .btn {
    justify-content: center;  /* center text inside button */
    width: 100%;              /* button full width */
  }
}