/* Liquid Glass da landing (layout exact-*). Vidro fosco com borda de luz sobre um fundo com brilhos suaves. */
#landingScreen{
  --lg-surface:rgba(22,26,20,.52);--lg-surface-strong:rgba(18,22,16,.7);--lg-soft:rgba(255,255,255,.045);
  --lg-border:rgba(255,255,255,.1);--lg-edge:rgba(255,255,255,.16);--lg-shadow:0 26px 80px rgba(0,0,0,.38);
  --lg-blur:blur(26px) saturate(170%);
  --lg-text:#f6f8f1;--lg-muted:#9ca69a;--lg-ink:#b8ff3d;--lg-step:#8db951;
  --lg-header:rgba(14,17,12,.55);--lg-card:rgba(18,22,16,.5);--lg-btn:rgba(22,26,20,.45);--lg-sheen:rgba(255,255,255,.085);
  --lg-glow1:rgba(184,255,61,.13);--lg-glow2:rgba(123,220,255,.09);--lg-glow3:rgba(184,255,61,.07);
  position:relative;isolation:isolate
}
/* Brilhos ambientes fixos: é o que o vidro "desfoca" */
#landingScreen::before{
  content:"";position:fixed;inset:-10vh -10vw;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38vw 32vw at 8% 4%,var(--lg-glow1),transparent 70%),
    radial-gradient(34vw 30vw at 96% 22%,var(--lg-glow2),transparent 70%),
    radial-gradient(40vw 34vw at 70% 96%,var(--lg-glow3),transparent 70%)
}
#landingScreen,#landingScreen .exact-home{background:transparent;color:var(--lg-text)}
html{background:#090a08}

/* Receita do vidro */
#landingScreen .exact-app-card,#landingScreen .exact-below,#landingScreen .feature-card,#landingScreen .landing-plan,
#landingScreen .steps-layout,#landingScreen .landing-bottom,#landingScreen .exact-header.fx-stuck{
  background:linear-gradient(150deg,var(--lg-sheen),rgba(255,255,255,.012) 42%,transparent 70%),var(--lg-surface);
  border:1px solid var(--lg-border);
  box-shadow:inset 0 1px 0 var(--lg-edge),inset 0 -1px 0 rgba(255,255,255,.03),var(--lg-shadow);
  -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)
}

/* Cabeçalho: pílula de vidro flutuante ao rolar */
.fx-on #landingScreen .exact-header.fx-stuck{
  top:max(10px,env(safe-area-inset-top));left:max(12px,calc((100vw - var(--fx-w,1180px))/2 - 14px));right:max(12px,calc((100vw - var(--fx-w,1180px))/2 - 14px));
  padding:10px 14px;border-radius:22px;background-color:var(--lg-header)
}
#landingScreen .exact-header .brand{color:var(--lg-text);font-size:19px;gap:10px;letter-spacing:-.055em}
#landingScreen .exact-header .brand-mark{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 18px rgba(184,255,61,.28)}

/* Botões */
#landingScreen .exact-btn{
  background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.02)),var(--lg-btn);
  border-color:var(--lg-border);box-shadow:inset 0 1px 0 var(--lg-edge);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)
}
#landingScreen .exact-btn.primary,#landingScreen .landing-button{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(0,0,0,.08),0 10px 28px rgba(184,255,61,.22)
}

/* Cartão da demonstração */
#landingScreen .exact-app-card{border-radius:34px;background-color:var(--lg-card)}
#landingScreen .exact-product-main,#landingScreen .exact-mini,#landingScreen .product-tab:not(.active){
  background:linear-gradient(150deg,rgba(255,255,255,.06),transparent 55%),var(--lg-soft);
  border-color:var(--lg-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)
}
#landingScreen .product-tab.active{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 22px rgba(184,255,61,.25)}
#landingScreen .exact-prod-art{background:linear-gradient(150deg,rgba(184,255,61,.16),rgba(184,255,61,.04));border-color:rgba(184,255,61,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
#landingScreen .exact-status{border:1px solid rgba(116,227,158,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#landingScreen .exact-trade{background:linear-gradient(150deg,rgba(184,255,61,.1),rgba(184,255,61,.03));border:1px solid rgba(184,255,61,.14)}
#landingScreen .exact-add{background:rgba(184,255,61,.05);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
#landingScreen .exact-glow{opacity:.16}

/* Faixa "Não é uma loja" e categorias */
#landingScreen .exact-below{border-radius:26px}
#landingScreen .exact-pill{background:var(--lg-soft);border-color:var(--lg-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}

/* Seções */
#landingScreen .feature-card{border-radius:24px}
#landingScreen .feature-icon{background:var(--lg-soft);border-color:var(--lg-border)}
#landingScreen .landing-plan{border-radius:26px}
#landingScreen .landing-plan.featured{
  background:linear-gradient(150deg,rgba(184,255,61,.14),rgba(123,220,255,.04) 55%,transparent),var(--lg-surface);
  border-color:rgba(184,255,61,.3)
}
#landingScreen .landing-steps{background:transparent;color:var(--lg-text)}
#landingScreen .steps-layout{padding:clamp(24px,4vw,44px);border-radius:32px}
#landingScreen .landing-steps .landing-section-tag{color:var(--lg-ink)}
#landingScreen .steps-lead>p,#landingScreen .steps-list p{color:var(--lg-muted)}
#landingScreen .steps-list,#landingScreen .steps-list>div{border-color:var(--lg-border)}
#landingScreen .steps-list span{color:var(--lg-step)}
#landingScreen .landing-bottom{border-radius:30px;padding:clamp(26px,4vw,48px)}
#landingScreen .landing-footer{border-color:var(--lg-border)}

/* Navegadores sem backdrop-filter: vidro vira superfície sólida */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  #landingScreen{--lg-surface:rgba(22,26,20,.94)}
}
@media(max-width:760px){
  #landingScreen .exact-app-card{border-radius:26px}
  #landingScreen .steps-layout{border-radius:26px}
  .fx-on #landingScreen .exact-header.fx-stuck{left:8px;right:8px;top:max(8px,env(safe-area-inset-top));border-radius:18px}
}

/* Botão de instalar o app (PWA) */
#landingScreen .exact-install{gap:9px;cursor:pointer;font:inherit;font-weight:750}
#landingScreen .exact-install[hidden]{display:none}
#landingScreen .exact-install-mark{width:22px;height:22px;border-radius:7px;background:#b8ff3d;color:#11190a;display:grid;place-items:center;font-size:14px;font-weight:800;line-height:1}

/* O responsive.css esconde ".brand span" no topo do app; na landing e no login o logo oficial fica sempre completo */
:is(#landingScreen,#authScreen) .brand>span{display:inline}
:is(#landingScreen,#authScreen) .brand .brand-accent{display:inline}
:is(#landingScreen,#authScreen) .brand .brand-mark{display:grid}
@media(max-width:420px){#landingScreen .exact-header .brand{font-size:17px}#landingScreen .exact-header .brand small{display:none}}

/* Logo oficial: "minha" em branco, "compra" em verde-limão */
#landingScreen .landing-footer .brand{color:var(--lg-text)}

/* Textos verde-limão ganham um verde legível no tema claro */
#landingScreen .brand-accent,#landingScreen .landing-section-tag,#landingScreen .exact-kicker,#landingScreen .landing-plan>span,
#landingScreen .landing-hero h1 em,#landingScreen .landing-section-intro h2 em,#landingScreen .landing-bottom h2 em,
#landingScreen .landing-plan ul li::before,#landingScreen .feature-icon,#landingScreen .exact-trade b,#landingScreen .demo-reveal,
#landingScreen .exact-micro span::before,#landingScreen .landing-footer a:hover{color:var(--lg-ink)}
#landingScreen .brand small{color:var(--lg-muted)}
#landingScreen .exact-micro span{color:var(--lg-muted)}
#landingScreen .feature-card h3,#landingScreen .landing-plan h3,#landingScreen .landing-plan strong,#landingScreen .landing-section-intro h2,#landingScreen .landing-bottom h2,#landingScreen .steps-list h3,#landingScreen .steps-lead h2{color:var(--lg-text)}
#landingScreen .feature-card p,#landingScreen .landing-plan p,#landingScreen .landing-plan li,#landingScreen .landing-section-intro p,#landingScreen .landing-bottom p,#landingScreen .landing-footer{color:var(--lg-muted)}
#landingScreen .landing-footer>a:last-child{color:var(--lg-text)}
#landingScreen .exact-below p{color:var(--lg-muted)}#landingScreen .exact-below strong{color:var(--lg-text)}
#landingScreen .exact-pill{color:var(--lg-muted)}
.fx-on #landingScreen section h2 em{background-image:linear-gradient(var(--lg-ink),var(--lg-ink))}
#landingScreen .fx-steps-line i{background:var(--lg-ink)}
.fx-on #landingScreen .steps-list>div.fx-active span{color:var(--lg-ink)}
.fx-progress{background:var(--lg-ink,#b8ff3d)}