.panel-title { margin: 0; color: #fff; font-size: clamp(1.25rem, 2.4vw, 1.8rem); font-weight: 750; letter-spacing: -.04em; }
    .panel-rule { height: 1px; margin: 1.2rem 0; background: rgba(255,255,255,.12); }
    .module-list { display: grid; gap: .7rem; }
    .module {
      display: flex; align-items: center; gap: .8rem; padding: .75rem;
      border: 1px solid rgba(255,255,255,.08); border-radius: .65rem; background: rgba(255,255,255,.045);
    }
    .module-icon { display: grid; place-items: center; flex: 0 0 2.3rem; width: 2.3rem; height: 2.3rem; border-radius: .65rem; background: rgba(255,104,37,.15); color: #ff9b70; font-size: 1rem; font-weight: 850; }
    .module:nth-child(2) .module-icon { background: rgba(255,186,5,.15); color: var(--yellow); }
    .module:nth-child(3) .module-icon { background: rgba(113,167,224,.16); color: #a8cefa; }
    .module-text { min-width: 0; flex: 1; }
    .module-text b { display: block; color: #fff; font-size: .88rem; }
    .module-text small { display: block; margin-top: .2rem; color: #aeb9ce; font-size: .7rem; line-height: 1.45; }
    .module-arrow { color: #7f8ba5; font-size: 1.2rem; }
    .float-tag {
      position: absolute; display: flex; align-items: center; gap: .65rem; padding: .8rem 1rem;
      border: 1px solid rgba(30,35,64,.07); border-radius: .8rem; background: #fff;
      box-shadow: 0 .8rem 2rem rgba(30,35,64,.12); color: var(--navy); font-size: .76rem; font-weight: 750;
    }
    .float-tag::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--orange); }
    .float-top { top: 11%; left: -2%; }
    .float-bottom { right: -1%; bottom: 10%; }
    .float-bottom::before { background: var(--yellow); }

    .footer {
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted);
      font-size: .75rem; line-height: 1.6;
    }
    .footer p { margin: 0; }
    .footer strong { color: var(--navy); font-weight: 750; }

    @keyframes settle { from { opacity: 0; transform: translateY(12px) rotate(-5deg); } to { opacity: 1; transform: translateY(0) rotate(-3deg); } }
    @media (max-width: 850px) {
      .hero { grid-template-columns: minmax(0, 1fr) minmax(17rem, .85fr); gap: 1.5rem; }
      h1 { font-size: clamp(3rem, 6.5vw, 4.8rem); }
      .float-top { left: -1%; }
      .float-bottom { right: -1%; }
    }
    @media (max-width: 680px) {
      .page { padding-top: max(1rem, env(safe-area-inset-top)); padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
      .header-note { font-size: .7rem; }
      .hero { grid-template-columns: 1fr; gap: 2rem; padding-block: clamp(3.5rem, 8vh, 5rem) 2.5rem; }
      .copy { margin-inline: auto; text-align: center; }
      .eyebrow { justify-content: center; margin-bottom: 1.15rem; }
      h1 { max-width: 12ch; margin-inline: auto; font-size: clamp(3.15rem, 12.8vw, 5rem); }
      .intro { margin-inline: auto; font-size: 1rem; }
      .pill-row { justify-content: center; margin-top: 1.4rem; }
      .visual { width: min(100%, 27rem); min-height: clamp(19rem, 78vw, 25rem); margin-inline: auto; }
      .product-card { width: min(88%, 25rem); }
      .float-tag { padding: .65rem .75rem; font-size: .7rem; }
      .float-top { top: 5%; left: 0; }
      .float-bottom { right: 0; bottom: 4%; }
      .footer { justify-content: center; text-align: center; }
    }
    @media (max-width: 380px) {
      .header-note { max-width: 8.5rem; text-align: right; line-height: 1.35; }
      .visual { min-height: 18rem; }
      .product-card { width: 91%; padding: .55rem; }
      .panel { padding: .9rem; }
      .float-tag { gap: .45rem; padding: .55rem .6rem; font-size: .66rem; }
      .float-top { top: 2%; }
      .float-bottom { bottom: 1%; }
    }
    @media (max-height: 650px) and (min-width: 681px) {
      .hero { padding-block: 2rem; }
      .visual { min-height: 20rem; }
      .product-card { max-width: 24rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }
  </style>
</head>
<body>
  <a class="skip-link" href="#main">Saltar para o conteúdo</a>
  <div class="page">
    <header class="header">
      <a class="brand" href="#main" aria-label="Sakura — página inicial">
        <img src="" alt="Sakura" onerror="this.hidden=true;this.nextElementSibling.hidden=false">
        <span class="brand-fallback" hidden></span>
      </a>
      <span class="header-note">Estamos a preparar algo novo</span>
    </header>

    <main class="hero" id="main">
      <section class="copy" aria-labelledby="page-title">
        <p class="eyebrow"><span class="eyebrow-mark" aria-hidden="true"></span>Em breve · Sakura</p>
        <h1 id="page-title">O seu negócio merece <span class="accent">florescer.</span></h1>
        <p class="intro">Estamos a preparar uma forma mais simples de acompanhar vendas, stock e operações — para que tenha mais clareza na gestão do seu negócio.</p>
        <div class="pill-row" aria-label="Áreas do Sakura">
          <span class="pill">Ponto de venda</span>
          <span class="pill">Gestão de stock</span>
          <span class="pill">Operações</span>
        </div>
      </section>

      <div class="visual" aria-hidden="true">
        <span class="ring"></span>
        <span class="ring ring-two"></span>
        <div class="float-tag float-top">Feito para o dia a dia</div>
        <div class="product-card">
          <div class="window-bar"><span></span><span></span><span></span><i class="window-title"></i></div>
          <div class="panel">
            <p class="panel-kicker">Uma visão mais clara</p>
            <h2 class="panel-title">O essencial, num só lugar.</h2>
            <div class="panel-rule"></div>
            <div class="module-list">
              <div class="module"><span class="module-icon">V</span><span class="module-text"><b>Vendas</b><small>Acompanhe o movimento do negócio</small></span><span class="module-arrow">↗</span></div>
              <div class="module"><span class="module-icon">S</span><span class="module-text"><b>Stock</b><small>Mantenha os produtos sob controlo</small></span><span class="module-arrow">↗</span></div>
              <div class="module"><span class="module-icon">G</span><span class="module-text"><b>Gestão</b><small>Tenha informação para decidir</small></span><span class="module-arrow">↗</span></div>
            </div>
          </div>
        </div>
        <div class="float-tag float-bottom">Pensado para Angola</div>
      </div>
    </main>

    <footer class="footer">
      <p><strong>Sakura</strong> — ponto de venda e gestão para Angola.</p>
      <p>©  Sakura</p>
    </footer>
  </div>
</body>
</html>