:root{
      --bg: #f4f4f1;
      --surface: #fafaf8;
      --surface-2: #eeeeea;
      --text: #111111;
      --muted: #6d6d68;
      --line: #ddddda;
      --shadow: 0 18px 45px rgba(0,0,0,.09);
      --shadow-soft: 0 10px 28px rgba(0,0,0,.07);
      --radius: 22px;
      --max: 1180px;
    }

    *{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html{
      scroll-behavior: smooth;
    }

    body{
      font-family: Inter,  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;

      background: var(--bg);
      color: var(--text);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    a{
      color: inherit;
      text-decoration: none;
    }

    img{
      max-width: 100%;
      display: block;
    }

    .container{
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
    }

    /* CABEÇALHO */
    header{
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(244,244,241,.92);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(0,0,0,.05);
    }

    .nav{
      height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
    }

    .brand{
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -.03em;
    }

    .brand-mark{
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      background: #111;
      color: #fff;
      box-shadow: 0 8px 18px rgba(0,0,0,.18);
      font-size: 16px;
      font-weight: 800;
    }

    nav ul{
      display: flex;
      align-items: center;
      gap: 34px;
      list-style: none;
      font-size: 15px;
    }

    nav a{
      color: #222;
      transition: opacity .2s ease;
    }

    nav a:hover{
      opacity: .55;
    }

    .nav-cta{
      background: #111;
      color: #fff;
      padding: 11px 18px;
      border-radius: 999px;
      box-shadow: 0 8px 20px rgba(0,0,0,.12);
    }

    /* HERO */
    .hero{
      min-height: 680px;
      display: grid;
      grid-template-columns: 1.03fr .97fr;
      align-items: center;
      gap: 70px;
      padding: 90px 0 80px;
    }

    .eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--muted);
      font-size: 14px;
      margin-bottom: 26px;
    }

    .dot{
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #111;
      box-shadow: 0 0 0 5px rgba(0,0,0,.07);
    }

    h1{
      max-width: 720px;
      font-size: clamp(52px, 6.8vw, 92px);
      line-height: .96;
      letter-spacing: -.065em;
      font-weight: 450;
    }

    .hero p{
      max-width: 570px;
      margin-top: 30px;
      color: var(--muted);
      font-size: 19px;
      line-height: 1.7;
    }

    .hero-actions{
      display: flex;
      gap: 12px;
      margin-top: 34px;
      flex-wrap: wrap;
    }

    .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 20px;
      border-radius: 999px;
      border: 1px solid var(--line);
      font-size: 14px;
      font-weight: 600;
      transition: .2s ease;
    }

    .btn-dark{
      background: #111;
      color: #fff;
      border-color: #111;
      box-shadow: 0 9px 24px rgba(0,0,0,.15);
    }

    .btn-light{
      background: rgba(255,255,255,.55);
    }

    .btn:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow-soft);
    }

    .hero-visual{
      position: relative;
      min-height: 510px;
      display: grid;
      place-items: center;
    }

    .hero-panel{
      width: min(500px, 100%);
      aspect-ratio: 1/1;
      border-radius: 34px;
      background:
        radial-gradient(circle at 50% 36%, rgba(255,255,255,.85), transparent 36%),
        linear-gradient(145deg, #f8f8f5 0%, #e5e5e1 100%);
      border: 1px solid #e2e2de;
      box-shadow: var(--shadow);
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
    }

    .hero-panel::before,
    .hero-panel::after{
      content:"";
      position:absolute;
      border-radius:50%;
      border:1px solid rgba(0,0,0,.06);
    }

    .hero-panel::before{
      width: 390px;
      height: 390px;
    }

    .hero-panel::after{
      width: 275px;
      height: 275px;
    }

    .device-stack{
      width: 76%;
      height: 62%;
      position: relative;
      z-index: 2;
    }

    .screen{
      position: absolute;
      background: #121212;
      border: 10px solid #202020;
      box-shadow: 0 28px 50px rgba(0,0,0,.20);
      overflow: hidden;
    }

    .desktop{
      width: 86%;
      height: 72%;
      right: 0;
      top: 0;
      border-radius: 18px;
      transform: rotate(2deg);
    }

    .phone{
      width: 27%;
      height: 67%;
      left: 0;
      bottom: 0;
      border-width: 7px;
      border-radius: 23px;
      transform: rotate(-5deg);
      background: #fafafa;
    }

    .code{
      padding: 20px;
      font: 11px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      color: #bdbdbd;
      white-space: pre;
      opacity: .9;
    }

    .code b{ color: #fff; font-weight: 600; }
    .code span{ color: #808080; }

    .phone-ui{
      height:100%;
      padding: 17px 10px;
      background: linear-gradient(#fff,#ececea);
      color:#111;
      font-size: 8px;
    }

    .phone-bar{
      height: 7px;
      width: 36px;
      background:#111;
      border-radius:999px;
      margin:0 auto 17px;
    }

    .ui-card{
      background:#fff;
      border:1px solid #e2e2df;
      border-radius:8px;
      padding:9px;
      margin-bottom:8px;
      box-shadow:0 4px 10px rgba(0,0,0,.05);
    }

    .ui-line{
      height:5px;
      background:#c9c9c6;
      border-radius:999px;
      margin:5px 0;
    }

    .ui-line.short{ width:62%; }
    .ui-line.tiny{ width:42%; }

    .floating-icon{
      position:absolute;
      width:56px;
      height:56px;
      display:grid;
      place-items:center;
      border-radius:16px;
      background:#111;
      color:#fff;
      box-shadow:0 14px 28px rgba(0,0,0,.18);
    }

    .floating-icon svg{
      width:25px;
      height:25px;
      stroke:currentColor;
      fill:none;
      stroke-width:1.8;
    }

    .fi-1{ top:55px; left:40px; transform:rotate(-8deg); }
    .fi-2{ top:82px; right:22px; transform:rotate(7deg); }
    .fi-3{ bottom:48px; right:52px; transform:rotate(-4deg); }

    /* SEÇÕES */
    section{
      padding: 105px 0;
    }

    .section-head{
      max-width: 650px;
      margin-bottom: 55px;
    }

    .kicker{
      color: var(--muted);
      font-size: 14px;
      margin-bottom: 14px;
    }

    h2{
      font-size: clamp(34px, 4vw, 58px);
      line-height: 1.05;
      letter-spacing: -.045em;
      font-weight: 600;
    }

    .section-head p{
      color: var(--muted);
      font-size: 17px;
      margin-top: 18px;
      line-height: 1.7;
    }

    .services{
      background: var(--surface);
      border-top: 1px solid rgba(0,0,0,.04);
      border-bottom: 1px solid rgba(0,0,0,.04);
    }

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

    .card{
      background: #f8f8f6;
      border:1px solid var(--line);
      border-radius: var(--radius);
      padding: 34px;
      min-height: 285px;
      box-shadow: 0 3px 0 rgba(0,0,0,.02);
      transition: .25s ease;
    }

    .card:hover{
      transform: translateY(-5px);
      box-shadow: var(--shadow-soft);
      background:#fff;
    }

    .card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    }
    
    .icon-box{
      width:64px;
      height:64px;
      display:grid;
      place-items:center;
      border-radius:18px;
      background:#111;
      color:#fff;
      margin-bottom:55px;
      box-shadow: 0 12px 25px rgba(0,0,0,.20);
    }

    .icon-box svg{
      width:29px;
      height:29px;
      stroke:currentColor;
      fill:none;
      stroke-width:1.7;
    }

    .card h3{
      font-size:22px;
      letter-spacing:-.025em;
      font-weight:600;
    }

    .card p{
      color:var(--muted);
      margin-top:10px;
      font-size:15px;
      line-height:1.65;
    }

    /* PRODUTOS */
    .products-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:16px;
    }

    .product{
      min-height:220px;
      background: var(--surface-2);
      border:1px solid var(--line);
      border-radius:20px;
      padding:26px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      transition:.25s ease;
    }

    .product:hover{
      background:#fff;
      box-shadow:var(--shadow-soft);
      transform:translateY(-4px);
    }

    .product-badge{
      width:60px;
      height:50px;
      border-radius:13px;
      background:#111;
      color:#fff;
      display:grid;
      place-items:center;
      font-size:15px;
      font-weight:700;
      box-shadow:0 10px 18px rgba(0,0,0,.16);
    }

    .product h3{
      font-size:22px;
      margin-bottom:6px;
      letter-spacing:-.03em;
    }

    .product p{
      color:var(--muted);
      font-size:14px;
    }

    /* CTA */
    .cta-wrap{
      padding-top: 20px;
    }

    .cta{
      border-radius:32px;
      background:#111;
      color:#fff;
      padding:70px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:40px;
      box-shadow:0 28px 55px rgba(0,0,0,.16);
    }

    .cta h2{
      max-width:650px;
    }

    .cta p{
      color:#bdbdb7;
      margin-top:14px;
      font-size:16px;
    }

    .cta .btn{
      background:#fff;
      color:#111;
      border-color:#fff;
      white-space:nowrap;
    }

    /* RODAPÉ */
    footer{
      padding:55px 0 42px;
    }

    .footer{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:30px;
      border-top:1px solid var(--line);
      padding-top:30px;
      color:var(--muted);
      font-size:13px;
    }

    .footer strong{
      color:#111;
      font-size:15px;
    }

    /* RESPONSIVO */
    @media (max-width: 960px){
      nav ul{
        display:none;
      }

      .hero{
        grid-template-columns:1fr;
        gap:55px;
        padding-top:70px;
      }

      .hero-visual{
        min-height:430px;
      }

      .grid-3{
        grid-template-columns:1fr;
      }

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

      .cta{
        padding:50px 34px;
        flex-direction:column;
        align-items:flex-start;
      }
    }

    @media (max-width: 600px){
      .container{
        width:min(100% - 26px, var(--max));
      }

      .nav{
        height:68px;
      }

      h1{
        font-size:50px;
      }

      .hero{
        padding:58px 0 55px;
      }

      .hero-visual{
        min-height:350px;
      }

      .floating-icon{
        width:48px;
        height:48px;
      }

      section{
        padding:75px 0;
      }

      .products-grid{
        grid-template-columns:1fr;
      }

      .cta{
        border-radius:24px;
      }

      .footer{
        align-items:flex-start;
        flex-direction:column;
      }
    }

/* ==========================================================
   NAVEGAÇÃO / LINKS
   ========================================================== */
.brand-logo{
  height: 38px;
  width: auto;
  object-fit: contain;
}

.mobile-menu-button{
  display:none;
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}

.mobile-menu-button svg{
  width:20px;
  height:20px;
  stroke:#111;
  fill:none;
  stroke-width:1.8;
}

.nav-link.active{
  font-weight:700;
}

/* Cards de produto clicáveis */
.product{
  cursor:pointer;
}
.product:focus-visible,
.card:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.footer-link:focus-visible{
  outline:2px solid #111;
  outline-offset:4px;
}

/* ==========================================================
   FOOTER — conteúdo da referência, visual minimalista atual
   ========================================================== */
.site-footer{
  margin-top:80px;
  padding:52px 0 28px;
  background:var(--surface);
  color:var(--text);
  border-top:1px solid var(--line);
}

.footer-top{
  display:grid;
  grid-template-columns:1.1fr 1.9fr;
  gap:64px;
  align-items:start;
}

.footer-brand-block{
  max-width:360px;
}

.footer-brand-link{
  display:inline-flex;
  align-items:center;
  margin-bottom:18px;
}

.footer-logo{
  height:34px;
  width:auto;
  object-fit:contain;
}

.footer-company{
  color:var(--muted);
  font-size:12px;
  line-height:1.8;
}

.footer-links-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:28px;
}

.footer-column{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-column h4{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--text);
  margin-bottom:4px;
}

.footer-column a{
  color:var(--muted);
  font-size:14px;
  transition:color .2s ease, transform .2s ease;
}

.footer-column a:hover{
  color:var(--text);
  transform:translateX(2px);
}

.footer-bottom{
  margin-top:42px;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:12px;
}

/* ==========================================================
   RESPONSIVO
   ========================================================== */
@media (max-width: 960px){
  .mobile-menu-button{
    display:flex;
  }

  nav ul{
    position:absolute;
    top:68px;
    left:13px;
    right:13px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:14px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow-soft);
  }

  nav ul.is-open{
    display:flex;
  }

  nav ul li a{
    display:block;
    padding:12px 14px;
    border-radius:12px;
  }

  nav ul li a:hover{
    background:var(--surface-2);
    opacity:1;
  }

  .footer-top{
    grid-template-columns:1fr;
    gap:38px;
  }

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

@media (max-width: 600px){
  .footer-links-grid{
    grid-template-columns:1fr 1fr;
    gap:26px 20px;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }

  .site-footer{
    padding:42px 0 24px;
  }
}