:root{
      --bg: #0b0614;
      --text: #e8e8ff;
      --muted: #c3c3e8;
      --primary-50:#faf5ff; /* lilás claro */
      --primary-100:#f3e8ff;
      --primary-200:#e9d5ff;
      --primary-300:#d8b4fe;
      --primary-400:#c084fc;
      --primary-500:#a855f7;
      --primary-600:#9333ea;
      --primary-700:#7e22ce;
      --primary-800:#6b21a8;
      --primary-900:#581c87;
      --card:#130a24;
      --card-2:#10081f;
      --border:#2a1c47;
      --success:#22c55e;
      --warning:#f59e0b;
      --danger:#ef4444;
      --shadow: 0 10px 30px rgba(88,28,135,.25);
    }
    @media (prefers-color-scheme: light){
      :root{ --bg:#ffffff; --text:#120e1a; --muted:#4b4b68; --card:#ffffff; --card-2:#faf5ff; --border:#e9d5ff; }
    }
    *{ 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";
      color:var(--text); background: radial-gradient(1200px 600px at 10% -10%, rgba(168,85,247,.25), transparent 60%),
                radial-gradient(1000px 500px at 110% -20%, rgba(124,58,237,.25), transparent 60%), var(--bg);
      line-height:1.6;
    }
    a{ color:inherit; text-decoration:none }
    .container{ width:min(1120px, 92%); margin-inline:auto }
    .btn{ display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.25rem; border-radius:14px; font-weight:600; border:1px solid var(--border); background:linear-gradient(180deg, var(--primary-600), var(--primary-700)); color:white; box-shadow:var(--shadow); transition: transform .2s ease, box-shadow .2s ease, opacity .2s; }
    .btn:hover{ transform: translateY(-2px); box-shadow:0 14px 40px rgba(88,28,135,.35) }
    .btn.ghost{ background:transparent; color:var(--text); border-color:var(--primary-700) }
    .btn.ghost:hover{ background:rgba(124,58,237,.08) }

    /* Header */
    header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background: rgba(16, 8, 31, .55); border-bottom:1px solid var(--border) }
    .nav{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 0 }
    .brand{ display:flex; align-items:center; gap:.7rem; font-weight:700; letter-spacing:.3px }
    .brand-mark{ width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(180deg, var(--primary-600), var(--primary-800)); box-shadow:var(--shadow) }
    .nav ul{ display:flex; list-style:none; gap:1rem; padding:0; margin:0 }
    .nav a{ padding:.6rem .9rem; border-radius:12px; font-weight:500; color:var(--muted) }
    .nav a:hover{ background:rgba(124,58,237,.09); color:var(--text) }
    .menu-toggle{ display:none }

    /* Hero */
    .hero{ padding: 6.5rem 0 4rem; position:relative }
    .hero h1{ font-size: clamp(2rem, 4vw + .8rem, 4rem); line-height:1.12; margin:0 0 1rem }
    .gradient{ background: linear-gradient(90deg, var(--primary-300), var(--primary-600) 40%, var(--primary-400)); -webkit-background-clip:text; background-clip:text; color:transparent }
    .hero p{ font-size: clamp(1rem, 1vw + .8rem, 1.2rem); color:var(--muted); max-width:60ch }
    .hero-cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.2rem }
    .hero .stats{ margin-top:2.2rem; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:1rem; }
    .stat{ padding:1rem 1.2rem; border:1px solid var(--border); border-radius:16px; background:linear-gradient(180deg, rgba(124,58,237,.1), rgba(124,58,237,.04)); }
    .stat b{ font-size:1.4rem }

    /* Services */
    section{ padding: 1.5rem 0 }
    .section-title{ font-size: clamp(1.4rem, 2.4vw + .6rem, 2.2rem); margin:0 0 .6rem }
    .section-sub{ color: var(--muted); margin:0 0 2rem }
    .grid{ display:grid; gap:1.2rem; grid-template-columns: repeat(3, minmax(0,1fr)) }
    .card{ background: var(--card); border:1px solid var(--border); border-radius:18px; padding:1.2rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s }
    .card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--primary-600) }
    .card h3{ margin:.2rem 0 .5rem }
    .chip{ display:inline-block; padding:.25rem .6rem; border-radius:999px; font-size:.78rem; background: rgba(168,85,247,.15); border:1px solid var(--primary-700) }

    /* Showcase */
    .showcase{ grid-template-columns: repeat(12, minmax(0,1fr)); gap:1rem }
    .shot{ grid-column: span 4; border-radius:18px; overflow:hidden; border:1px solid var(--border); background: var(--card-2) }
    .shot img{ width:100%; height:220px; object-fit:cover; display:block; filter:saturate(1.05) }
    .shot .meta{ padding:.9rem 1rem; display:flex; align-items:center; justify-content:space-between }

    /* Testimonials */
    .testimonials{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem }
    .quote{ padding:1.1rem; border:1px solid var(--border); border-radius:18px; background:linear-gradient(180deg, rgba(88,28,135,.12), rgba(88,28,135,.05)); font-size:.98rem }
    .quote strong{ display:block; margin-top:.6rem }

    /* CTA */
    .cta{ display:grid; grid-template-columns: 2fr 1fr; gap:1rem; align-items:center; background:linear-gradient(180deg, rgba(168,85,247,.15), rgba(124,58,237,.08)); border:1px solid var(--border); border-radius:18px; padding:1.4rem }

    /* Footer */
    footer{ padding:2.4rem 0; border-top:1px solid var(--border); color:var(--muted) }
    .foot{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between }

    /* Utilities */
    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

    /* Responsive */
    @media (max-width: 980px){
      .grid{ grid-template-columns: 1fr 1fr }
      .testimonials{ grid-template-columns: 1fr 1fr }
      .cta{ grid-template-columns: 1fr }
      .hero .stats{ grid-template-columns: 1fr 1fr 1fr }
      .showcase .shot{ grid-column: span 6 }
    }
    @media (max-width: 640px){
      .grid{ grid-template-columns: 1fr }
      .testimonials{ grid-template-columns: 1fr }
      .hero{ padding-top: 5.5rem }
      .hero .stats{ grid-template-columns: 1fr 1fr }
      .showcase .shot{ grid-column: span 12 }
      .menu-toggle{ display:inline-flex }
      nav ul{ display:none }
      nav.open ul{ display:flex; flex-direction:column; gap:.4rem; padding:.6rem 0 }
    }