:root {
      --bg: #0f1115;
      --panel: #151923;
      --panel-2: #1b2130;
      --text: #e9eef6;
      --muted: #b7c0ce;
      --brand: #4f8cff; /* altere a cor da marca aqui */
      --accent: #22c55e; /* verde para CTA */
      --radius: 16px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      background: linear-gradient(180deg, #0d1016 0%, #0f1115 100%);
      color: var(--text);
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; border-radius: calc(var(--radius) - 6px); }

    /* ====== Layout ====== */
    .container { width: min(1100px, 92%); margin: 0 auto; }
    .section { padding: 64px 0; }

    /* ====== Header ====== */
    .header {
      position: sticky; top: 0; z-index: 30;
      backdrop-filter: blur(10px);
      background: rgba(15,17,21,.7);
      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: .4px; }
    .brand .logo { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--brand), #7aa8ff); display: grid; place-items: center; box-shadow: var(--shadow); }
    .brand .logo span { font-weight: 800; }
    .nav a { opacity: .9; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      padding: 12px 18px; border-radius: 999px; font-weight: 600; letter-spacing: .2px; cursor: pointer; border: 0;
      transition: transform .1s ease, box-shadow .25s ease, opacity .25s ease;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn-primary { background: var(--accent); color: #07130a; box-shadow: 0 8px 24px rgba(34,197,94,.35); }
    .btn-outline { border: 1px solid rgba(255,255,255,.14); background: transparent; color: var(--text); }

    /* ====== Hero ====== */
    .hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; }
    .hero h1 { font-size: clamp(28px, 4.5vw, 48px); line-height: 1.07; margin: 12px 0 14px; }
    .hero p { color: var(--muted); font-size: 1.05rem; margin: 0 0 24px; }
    .hero .card { background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }

    .badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 22px; }
    .badge { font-size: .84rem; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); opacity: .9; }

    .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

    /* ====== Serviços ====== */
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .tile { background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%); padding: 18px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.06); box-shadow: var(--shadow); }
    .tile h3 { margin: 8px 0 8px; font-size: 1.1rem; }
    .price { font-weight: 700; margin-top: 6px; }
    .muted { color: var(--muted); font-size: .95rem; }

    /* ====== Galeria ====== */
    .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

    /* ====== Local ====== */
    .map { border: 0; width: 100%; height: 320px; border-radius: var(--radius); box-shadow: var(--shadow); }

    /* ====== Rodapé ====== */
    .footer { border-top: 1px solid rgba(255,255,255,.06); color: var(--muted); }

    /* ====== Modal (Agendar) ====== */
    .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; padding: 18px; }
    .modal { width: min(560px, 100%); background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
      border-radius: var(--radius); border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow); padding: 18px; }
    .modal header { display: flex; align-items: center; justify-content: space-between; }
    .slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
    .slot { padding: 12px; text-align: center; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); cursor: pointer; }
    .slot:hover { border-color: var(--accent); }

    /* ====== Flutuante WhatsApp ====== */
    .whats { position: fixed; right: 18px; bottom: 18px; background: #25D366; color: #041d09; padding: 12px 16px; border-radius: 999px; box-shadow: var(--shadow); font-weight: 700; z-index: 40; }

    /* ====== Responsivo ====== */
    @media (max-width: 900px) {
      .hero { grid-template-columns: 1fr; }
      .grid { grid-template-columns: 1fr 1fr; }
      .gallery { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 560px) {
      .grid { grid-template-columns: 1fr; }
      .gallery { grid-template-columns: 1fr; }
    }