/* =========================
   EASYCHECK — GLOBAL STYLES
   ========================= */

/* ---------- Design tokens ---------- */
:root{
  /* cores base */
  --bg: #0f1115;              /* fundo escuro neutro */
  --bg-2: #12141a;            /* superfícies */
  --ink: #e9ecf2;             /* texto principal */
  --muted: #aeb6c3;           /* texto secundário */
  --line: rgba(255,255,255,.08);

  /* baby blue / accent */
  --baby: #e9f3ff;            /* chips e realces suaves */
  --accent: #0a84ff;          /* ação principal */
  --accent-ink: #0b1320;      /* texto sobre baby */
  --accent-soft: #cfe4ff;     /* bordas/up highlights */

  /* estados */
  --success: #34c759;
  --warning: #ffd60a;
  --danger:  #ff453a;

  /* tipografia */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --fs-hero: clamp(2.2rem, 3.2vw + 1rem, 3.4rem);
  --fs-h1: clamp(1.8rem, 2.2vw + .6rem, 2.6rem);
  --fs-h2: clamp(1.4rem, 1.6vw + .6rem, 1.8rem);
  --fs-h3: 1.05rem;
  --fs-lead: 1.05rem;
  --radius: 16px;
  --radius-lg: 22px;

  /* efeitos vidro */
  --glass: rgba(255,255,255,.06);
  --backdrop: saturate(140%) blur(10px);
  --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---------- Base reset ---------- */
*,
*::before,
*::after{ box-sizing:border-box }

html, body{
  height:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(10,132,255,.16), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(233,243,255,.08), transparent 60%),
    var(--bg);
  line-height:1.55;
}

/* ---------- Typography ---------- */
h1,h2,h3{
  margin:.2rem 0 .6rem;
  line-height:1.15;
}
h1{ font-size:var(--fs-h1); letter-spacing:-.02em }
h2{ font-size:var(--fs-h2) }
h3{ font-size:var(--fs-h3); text-transform:none; letter-spacing:.2px }
.lead{ font-size:var(--fs-lead) }
.muted{ color:var(--muted) }
.caption{ color:var(--muted); font-size:.92rem }

/* ---------- Layout helpers ---------- */
.container{
  width:min(1200px, 92%);
  margin-inline:auto;
}
.section{
  padding: clamp(2rem, 6vw, 4rem) 0;
}
.grid{
  display:grid;
  gap: clamp(.9rem, 2vw, 1.2rem);
}
.grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)) }

@media (max-width: 980px){
  .grid-2, .grid-3{ grid-template-columns: 1fr }
}

.right{ text-align:right }
.center{ text-align:center }
.stack{ display:grid; gap:.7rem }

/* ---------- Header / Navbar ---------- */
.header{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(to bottom, rgba(10,14,20,.72), rgba(10,14,20,0));
  backdrop-filter: var(--backdrop);
  -webkit-backdrop-filter: var(--backdrop);
  border-bottom:1px solid var(--line);
}
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  min-height:64px;
}
.brand{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:800; text-decoration:none; color:var(--ink);
}
.brand .mark{
  width:24px; height:24px; border-radius:8px;
  background:
    radial-gradient(100% 100% at 30% 30%, #fff 0, #cfe4ff 28%, transparent 60%),
    linear-gradient(180deg, var(--accent) 0%, #68b1ff 100%);
  box-shadow: 0 6px 16px rgba(10,132,255,.45);
  display:inline-block;
}

.nav{
  display:flex; align-items:center; gap:1rem;
}
.nav a{
  color:var(--muted);
  text-decoration:none;
  padding:.55rem .8rem; border-radius:12px;
  font-weight:600;
}
.nav a:hover{ background:var(--glass); color:var(--ink) }
.nav a.active{
  background: var(--glass);
  border:1px solid var(--accent-soft);
  color:var(--ink);
}

/* CTA area (lang + sign in) */
.cta{ display:flex; align-items:center; gap:.6rem }

/* ---------- Language switcher ---------- */
.lang-switcher{
  display:flex; gap:.25rem; padding:.2rem;
  background:var(--glass); border:1px solid var(--line); border-radius:999px;
}
.lang-btn{
  border:0; background:transparent; color:var(--muted);
  padding:.35rem .6rem; border-radius:999px; font-weight:700; cursor:pointer
}
.lang-btn.active, .lang-btn:hover{
  background: var(--baby);
  color: var(--accent-ink);
}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg: var(--accent);
  --btn-ink: #fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-ink);
  padding: .65rem .95rem;
  border-radius: 14px;
  font-weight:800; letter-spacing:.2px;
  box-shadow: 0 8px 18px rgba(10,132,255,.25);
  text-decoration:none; cursor:pointer;
  transition: transform .05s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) scale(.99) }

.btn-secondary{
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  border-color: var(--line);
  box-shadow: none;
  background: linear-gradient(to bottom right, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.btn-secondary:hover{
  border-color: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}

/* ---------- Hamburger (mobile) ---------- */
.hamburger{
  display:none; background:transparent; border:0; cursor:pointer;
  width:42px; height:38px; border-radius:12px; padding:6px; align-items:center; justify-content:center
}
.hamburger span{
  display:block; height:2px; width:22px; background:#dfe6f1; margin:3px auto; border-radius:1px
}
@media (max-width: 880px){
  .nav{ display:none }
  .hamburger{ display:inline-flex }
}

/* ---------- Hero ---------- */
.hero{
  padding: clamp(1rem, 3vw, 1.6rem) 0 clamp(2rem, 6vw, 3rem);
}
.hero-card{
  display:grid; gap:1.2rem;
  grid-template-columns: 1.2fr .8fr;
  align-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 3.6vw, 2rem);
  box-shadow: var(--shadow);
}
.hero .badge{
  display:inline-block;
  font-weight:800; letter-spacing:.25px;
  background: var(--baby);
  color: var(--accent-ink);
  border:1px solid var(--accent-soft);
  padding:.4rem .7rem; border-radius:999px; margin-bottom:.6rem
}
.hero h1{ font-size: var(--fs-hero) }
.hero .lead{ color: var(--muted); margin:.4rem 0 1rem }

.hero-badges{ display:flex; flex-wrap:wrap; gap:.5rem }
.badge-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  font-weight:700; font-size:.86rem;
  background: rgba(233,243,255,.55);
  border:1px solid var(--accent-soft);
  color:#0b1320; padding:.35rem .6rem; border-radius:999px;
}

.hero-photo{
  overflow:hidden; border-radius: 18px; border:1px solid var(--line);
  background: #0b0f14;
  box-shadow: var(--shadow);
}
.hero-photo img{
  width:100%; height:100%; display:block; object-fit:cover;
}

/* ---------- Pills ---------- */
.pills{ display:flex; flex-wrap:wrap; gap:.5rem }
.pill{
  background: var(--glass);
  border:1px solid var(--line);
  color: var(--ink);
  font-weight:700; padding:.45rem .7rem; border-radius:999px; cursor:pointer;
}
.pill:hover{ border-color: var(--accent-soft) }
.pill.active{
  background: var(--baby);
  border-color: var(--accent-soft);
  color: var(--accent-ink);
}

/* ---------- Cards ---------- */
.card{
  background: linear-gradient(to bottom right, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
}
.card img{ width:100%; height:auto; display:block }
.card.padded{ padding: clamp(1rem, 2.4vw, 1.4rem) }
.elevated{
  box-shadow: var(--shadow);
  backdrop-filter: var(--backdrop);
  -webkit-backdrop-filter: var(--backdrop);
}

/* ---------- Icons ---------- */
.icon-bubble{
  width:40px; height:40px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--baby); color: var(--accent-ink);
  border:1px solid var(--accent-soft); font-size:1.1rem; font-weight:900;
  margin-bottom:.5rem;
}

/* ---------- Pricing ---------- */
.tier .price{
  font-size:2rem; font-weight:900; letter-spacing:-.02em;
  margin:.35rem 0 .6rem;
}
.separator{
  border:0; border-top:1px solid var(--line); margin:1rem 0
}
.toggle{
  display:inline-flex; gap:.4rem; background:var(--glass);
  border:1px solid var(--line); border-radius:999px; padding:.25rem;
}
.toggle-btn{
  border:0; background:transparent; color:var(--muted);
  padding:.45rem .8rem; border-radius:999px; font-weight:800; cursor:pointer;
}
.toggle-btn.active{
  background:var(--baby); color:var(--accent-ink); border:1px solid var(--accent-soft)
}

/* ---------- Forms ---------- */
.form{ display:grid; gap:.8rem }
.input{ display:grid; gap:.35rem }
label{ font-weight:700 }
input, select, textarea{
  width:100%; color:var(--ink); background: var(--bg-2);
  border:1px solid var(--line); border-radius:12px;
  padding:.7rem .8rem; outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
input:focus, select:focus, textarea:focus{
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(10,132,255,.18);
}

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid var(--line);
  background: linear-gradient(to top, rgba(255,255,255,.02), rgba(255,255,255,0));
  padding: clamp(1.6rem, 4vw, 2rem) 0;
}
.footer .cols{
  display:grid; grid-template-columns:2fr repeat(3,1fr); gap:1rem;
}
.footer a{ color:var(--ink); text-decoration:none }
.footer a:hover{ text-decoration:underline }
.footer-bottom{
  margin-top:1.2rem; display:flex; align-items:center; justify-content:space-between
}
.social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:12px; border:1px solid var(--line);
  background: var(--glass); color:var(--ink); text-decoration:none; font-weight:800;
}
.social-link:hover{ border-color: var(--accent-soft) }

@media (max-width: 860px){
  .footer .cols{ grid-template-columns:1fr 1fr }
}
@media (max-width: 560px){
  .footer .cols{ grid-template-columns:1fr }
  .footer-bottom{ flex-direction:column; gap:.8rem; align-items:flex-start }
}

/* ---------- Images ---------- */
img[loading="lazy"]{ opacity:.001; transform:scale(.98); transition:opacity .35s ease, transform .35s ease }
img[loading="lazy"].loaded{ opacity:1; transform:none }

/* JS helper: marca imagens como carregadas */
:root .img-ready{} /* noop - reservado */

/* ---------- Utilities ---------- */
hr{ border:0; border-top:1px solid var(--line) }
.e2{ letter-spacing:.2px }
.hidden{ display:none !important }

/* ---------- Accessibility focus (complementa o script) ---------- */
a:focus, button:focus, .lang-btn:focus, .pill:focus, .toggle-btn:focus, .btn:focus, input:focus, select:focus, textarea:focus{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 10px;
}

/* ---------- App (dashboard) quick tweaks (reforça os do app.html) ---------- */
.kpi .caption{ color:var(--muted); font-weight:700; text-transform:none }
.kpi .value{ color:var(--ink) }

/* ---------- Active helpers ---------- */
.active{}

/* ---------- Small polish ---------- */
.navbar, .hero-card, .card, .footer .cols, .footer-bottom{
  will-change: transform;
}