/* =====================================================================
   GROWTOR STORE — DESIGN TOKENS (dark glass + neon azul/lima)
   Mesmos seletores do tema growtor; valores remapeados pra identidade
   visual da Growtor Store: fundo near-black, glass morphism, azul
   primário, lima como acento pontual, Sora + Plus Jakarta Sans +
   Instrument Serif italic.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@1&display=swap");

:root {
  /* ---------- Corpo dark ---------- */
  --base:      #05070F;          /* near-black azulado */
  --base-2:    #080B17;          /* segundo plano */
  --surface:   #0C1122;          /* cards sólidos */
  --ink:       #F3F6FF;          /* texto principal */
  --ink-soft:  #D7DEF0;
  --muted:     #B4C0DA;
  --faint:     #7B86A4;
  --line:      rgba(125, 150, 210, 0.10);
  --line-strong: rgba(125, 150, 210, 0.17);
  --shadow-soft: 0 2px 6px -2px rgba(0, 0, 0, 0.45),
                 0 14px 36px -14px rgba(0, 0, 0, 0.55);
  --shadow-lift: 0 16px 44px -18px rgba(0, 0, 0, 0.65),
                 0 30px 90px -30px rgba(61, 123, 255, 0.18);

  /* ---------- Marca ---------- */
  --blue:      #3D7BFF;          /* azul Growtor primário */
  --blue-2:    #2A5BE6;
  --blue-10:   rgba(61, 123, 255, 0.12);
  --blue-18:   rgba(61, 123, 255, 0.20);
  --blue-30:   rgba(61, 123, 255, 0.34);
  --lime:      #C7E635;          /* lima Growtor (acento pontual) */
  --lime-dim:  #b3d22b;
  --lime-glow: rgba(199, 230, 53, 0.32);
  --lime-10:   rgba(199, 230, 53, 0.10);
  --lime-18:   rgba(199, 230, 53, 0.18);

  /* ---------- Glass ---------- */
  --glass:       rgba(16, 23, 44, 0.62);
  --glass-2:     rgba(24, 33, 60, 0.40);
  --glass-card:  rgba(255, 255, 255, 0.045);
  --glass-line:  rgba(255, 255, 255, 0.10);
  --glass-inner: rgba(255, 255, 255, 0.03);

  /* ---------- Blobs ambient (neon) ---------- */
  --blob-lime:     rgba(199, 230, 53, 0.30);
  --blob-mint:     rgba(61, 123, 255, 0.50);
  --blob-lavender: rgba(42, 91, 230, 0.40);
  --blob-intensity: 0.5;         /* 0..1 — tweakable */

  /* ---------- Hero escuro ---------- */
  --hero-bg:     #05070F;
  --hero-bg-2:   #080B17;
  --hero-text:   #F3F6FF;
  --hero-muted:  rgba(243, 246, 255, 0.66);
  --hero-faint:  rgba(243, 246, 255, 0.38);
  --hero-line:   rgba(255, 255, 255, 0.10);
  --hero-darkness: 1;            /* 0..1 — tweakable */
  --beam-color:  #3D7BFF;

  /* ---------- Tipografia ---------- */
  --font-display: "Sora", "Segoe UI", sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Plus Jakarta Sans", system-ui, sans-serif;
  --font-serif:   "Instrument Serif", Georgia, serif;

  --t-display-xl: clamp(2.5rem, 5.2vw, 4.125rem);   /* 40 → 66px */
  --t-display-l:  clamp(2.125rem, 4.2vw, 3.375rem); /* 34 → 54px */
  --t-display-m:  clamp(1.875rem, 3.9vw, 3.125rem); /* 30 → 50px */
  --t-display-s:  clamp(1.375rem, 2.2vw, 1.875rem); /* 22 → 30px */

  --t-lead:    clamp(1.0625rem, 1.3vw, 1.25rem);
  --t-body:    1rem;
  --t-small:   0.9375rem;
  --t-micro:   0.8125rem;
  --t-tiny:    0.6875rem;

  --lh-display: 1.05;
  --lh-tight:   1.15;
  --lh-body:    1.6;

  --tracking-display: -0.025em;
  --tracking-tight:   -0.01em;
  --tracking-kicker:  0.16em;
  --tracking-button:  0;

  /* ---------- Espaçamento ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --section-y: clamp(96px, 11vw, 176px);
  --container-x: clamp(24px, 5vw, 88px);
  --container-max: 1440px;

  /* ---------- Raios ---------- */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   26px;
  --r-pill: 999px;

  /* ---------- Animação ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:   180ms;
  --d-base:   320ms;
  --d-slow:   600ms;
  --d-elegant: 900ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* scroll-behavior nativo fica fora: o Lenis (store.js) cuida do smooth e os dois juntos conflitam no Firefox */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--base);
  text-wrap: pretty;
}
img, svg, video { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--lime); color: #05070F; }

/* ---------- Tipo helpers ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: none;
}
.display-xl { font-family: var(--font-display); font-weight: 800; font-size: var(--t-display-xl); line-height: var(--lh-display); letter-spacing: -0.04em; text-transform: none; }
.display-l  { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-l);  line-height: var(--lh-display); letter-spacing: var(--tracking-display); text-transform: none; }
.display-m  { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-m);  line-height: var(--lh-display); letter-spacing: var(--tracking-display); text-transform: none; }
.display-s  { font-family: var(--font-display); font-weight: 600; font-size: var(--t-display-s);  line-height: var(--lh-display); letter-spacing: var(--tracking-display); text-transform: none; }

.kicker {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.kicker::before { content: none; }
.kicker--lime { color: var(--blue); }
.kicker--on-dark { color: var(--blue); }

.lead {
  font-size: var(--t-lead);
  color: var(--muted);
  max-width: 60ch;
  font-weight: 400;
}

.mono {
  font-family: var(--font-body);
  font-size: var(--t-tiny);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--faint);
  text-transform: uppercase;
}

.accent { color: var(--blue); }

/* Tique visual da marca: palavra destacada em serifa italic lima */
.lime {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--lime);
  background: none;
  padding: 0;
  letter-spacing: 0;
}

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-x);
  padding-right: var(--container-x);
}

/* ---------- Botões ---------- */
.btn {
  --bg: linear-gradient(180deg, var(--blue), var(--blue-2));
  --color: #fff;
  --border: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: var(--tracking-button);
  text-transform: none;
  padding: 13px 22px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--color);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: background var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn .arrow { transition: transform var(--d-base) var(--ease-out); display: inline-block; }
.btn:hover .arrow { transform: translateX(4px); }

.btn--primary {
  --bg: linear-gradient(180deg, var(--blue), var(--blue-2));
  --color: #fff;
  box-shadow: 0 10px 30px -10px var(--blue-30), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn--primary:hover {
  box-shadow: 0 18px 44px -12px var(--blue-30), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn--ink {
  --bg: var(--glass);
  --color: var(--ink);
  --border: var(--line-strong);
  backdrop-filter: blur(10px);
}
.btn--ink:hover { --border: var(--lime); }

.btn--outline {
  --bg: var(--glass);
  --color: var(--ink);
  --border: var(--line-strong);
  backdrop-filter: blur(10px);
}
.btn--outline:hover { --border: var(--lime); }

/* on-dark variants (site inteiro é dark — herdam o padrão) */
.btn--on-dark.btn--primary {
  --bg: linear-gradient(180deg, var(--blue), var(--blue-2));
  --color: #fff;
}
.btn--on-dark.btn--primary:hover { --color: #fff; }
.btn--on-dark.btn--outline { --color: var(--ink); --border: var(--line-strong); --bg: var(--glass); }
.btn--on-dark.btn--outline:hover { --border: var(--lime); --color: var(--ink); --bg: var(--glass); }

.btn--sm { padding: 10px 16px; font-size: var(--t-micro); border-radius: 10px; }
.btn--lg { padding: 16px 28px; font-size: 15px; border-radius: 13px; }

/* ---------- Cards (glass) ---------- */
.card {
  background: var(--glass-card);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(26px) saturate(135%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
  box-shadow: var(--shadow-soft);
  transition: transform var(--d-slow) var(--ease-out),
              box-shadow var(--d-slow) var(--ease-out),
              border-color var(--d-slow) var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.card--lime-hover:hover { border-color: var(--lime-18); }

/* ---------- Blobs ambient (neon difuso) ---------- */
.blob-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: var(--blob-intensity);
  will-change: transform;
}
.blob--lime     { background: var(--blob-lime);     }
.blob--mint     { background: var(--blob-mint);     }
.blob--lavender { background: var(--blob-lavender); }

@keyframes gwBlobDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(2vw, -2vw, 0) scale(1.06); }
}
@media (prefers-reduced-motion: no-preference) {
  .blob { animation: gwBlobDrift 18s ease-in-out infinite; }
  .blob:nth-child(2) { animation-duration: 24s; animation-delay: -6s; }
  .blob:nth-child(3) { animation-duration: 30s; animation-delay: -12s; }
}

/* ---------- Background neon global (3 blobs fixos atrás de tudo) ---------- */
.gw-neon {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.gw-neon span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.gw-neon .c1 {
  width: 56vw; height: 56vw;
  left: -18vw; top: -22vw;
  background: radial-gradient(circle at 50% 50%, rgba(61, 123, 255, 0.55), transparent 70%);
}
.gw-neon .c2 {
  width: 44vw; height: 44vw;
  right: -16vw; top: 24vh;
  background: radial-gradient(circle at 50% 50%, rgba(199, 230, 53, 0.30), transparent 70%);
}
.gw-neon .c3 {
  width: 52vw; height: 52vw;
  left: 24vw; bottom: -28vw;
  background: radial-gradient(circle at 50% 50%, rgba(61, 123, 255, 0.34), transparent 70%);
}
@keyframes gwNeonFloat1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(4vw, 3vh, 0) scale(1.08); }
}
@keyframes gwNeonFloat2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-3vw, -4vh, 0) scale(0.94); }
}
@media (prefers-reduced-motion: no-preference) {
  .gw-neon .c1 { animation: gwNeonFloat1 26s ease-in-out infinite; }
  .gw-neon .c2 { animation: gwNeonFloat2 30s ease-in-out infinite; }
  .gw-neon .c3 { animation: gwNeonFloat1 22s ease-in-out infinite reverse; }
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--d-elegant) var(--ease-out),
              transform var(--d-elegant) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Image grayscale → cor ---------- */
.gs-image {
  filter: grayscale(1) brightness(0.92);
  opacity: 0.72;
  transition: filter var(--d-elegant) var(--ease-out),
              opacity var(--d-elegant) var(--ease-out),
              transform var(--d-slow) var(--ease-out);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gs-image:hover, *:hover > .gs-image {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}

/* ---------- Cursor dot (opt-in) ---------- */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--lime);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width var(--d-fast), height var(--d-fast);
}
.cursor-dot.is-hover { width: 36px; height: 36px; }
@media (hover: none) { .cursor-dot { display: none; } }

/* ---------- Hairline ---------- */
.hairline { height: 1px; background: var(--line); border: none; width: 100%; }

/* =====================================================================
   RESPONSIVO — telefones pequenos, tablets e grandes displays / TVs
   ===================================================================== */

/* Telefones pequenos: garante respiro e evita estouro horizontal */
@media (max-width: 400px) {
  :root { --container-x: 20px; }
}

/* Botões: no mobile, nunca ultrapassar a largura da tela (hero/CTAs).
   .btn usa white-space:nowrap por padrão — textos longos estouravam a página. */
@media (max-width: 600px) {
  .btn { white-space: normal; max-width: 100%; text-align: center; }
  /* Hero: 2 botões empilhados ficam com a mesma largura (full-width) */
  .gw-hero-ctas, .pg-hero-ctas { flex-direction: column; align-items: stretch; }
  .gw-hero-ctas .btn, .pg-hero-ctas .btn { width: 100%; }

  /* Blog: cards estouravam a tela por "grid blowout" — itens de grid herdam
     min-width:auto e não encolhem, fazendo o track 1fr (minmax(auto,1fr))
     crescer além do container. min-width:0 na cadeia resolve. */
  .blog-layout, .blog-main, .blog-grid, .post-feature { min-width: 0; }
  .blog-main > *, .blog-grid > *, .post-feature > * { min-width: 0; }
  .post-card, .post-feature { max-width: 100%; }
  .post-card h3, .post-feature-body h2 { overflow-wrap: anywhere; }
}

/* TVs / monitores grandes (a partir de ~1080p): preenche melhor a tela
   e aumenta corpo de texto para leitura a distância. */
@media (min-width: 1800px) {
  :root {
    --container-max: 1680px;
    --t-body:  1.0625rem;
    --t-small: 1rem;
    --t-lead:  clamp(1.25rem, 1vw, 1.5rem);
  }
}

/* 1440p / 2K */
@media (min-width: 2400px) {
  :root {
    --container-max: 2100px;
    --t-body:  1.1875rem;
    --t-small: 1.0625rem;
    --t-micro: 0.9375rem;
    --t-tiny:  0.8125rem;
    --section-y: clamp(180px, 8vw, 280px);
    --t-display-xl: 5.5rem;
    --t-display-l:  4.25rem;
    --t-display-m:  3.75rem;
    --t-display-s:  2.25rem;
    --t-lead: 1.5rem;
  }
}

/* 4K / UHD */
@media (min-width: 3200px) {
  :root {
    --container-max: 2720px;
    --t-body:  1.375rem;
    --t-small: 1.1875rem;
    --t-display-xl: 7rem;
    --t-display-l:  5.5rem;
  }
}