/* Tookn marketing — page styles. Pairs with /colors_and_type.css */
@import url("../../colors_and_type.css");

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #fff; color: var(--tk-fg); }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ---------- Buttons ---------- */
.tk-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 14px/1 var(--tk-font-body);
  padding: 12px 18px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: background var(--tk-dur-fast) var(--tk-ease-out),
              opacity var(--tk-dur-fast) var(--tk-ease-out),
              transform var(--tk-dur-fast) var(--tk-ease-out);
}
.tk-btn--lg { padding: 16px 24px; font-size: 15px; }
.tk-btn--primary { background: var(--tk-dende); color: #fff; }
.tk-btn--primary:hover { background: var(--tk-primary-600); }
.tk-btn--primary:active { transform: translateY(1px) scale(0.98); }
.tk-btn--ghost { background: transparent; color: var(--tk-fg); box-shadow: inset 0 0 0 1.5px var(--tk-grey-300); }
.tk-btn--ghost:hover { background: var(--tk-grey-50); }
.tk-btn--ghost-light { background: rgba(255,255,255,0.14); color: #fff; backdrop-filter: blur(2px); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.4); }
.tk-btn--ghost-light:hover { background: rgba(255,255,255,0.24); }

.tk-link-quiet { font: 600 14px/1 var(--tk-font-body); color: var(--tk-fg); }
.tk-link-quiet:hover { opacity: 0.7; }

/* ---------- Header ---------- */
.tk-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 64px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--tk-border-faint);
}
.tk-header__brand img { height: 24px; }
.tk-header__nav { display: flex; gap: 28px; }
.tk-header__nav a { font: 600 14px/1 var(--tk-font-body); color: var(--tk-fg-1); }
.tk-header__nav a:hover { color: var(--tk-fg); }
.tk-header__cta { display: flex; align-items: center; gap: 16px; }

/* ---------- Hero ---------- */
.tk-hero {
  position: relative;
  overflow: hidden;
  padding: 96px 64px 120px;
  background: var(--tk-areia);
  isolation: isolate;
}
.tk-hero__blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.tk-blob { position: absolute; mix-blend-mode: multiply; }
.tk-blob--dende    { width: 620px; height: 540px; left: -180px; top: -100px; background: var(--tk-dende);    border-radius: 56% 44% 60% 40% / 50% 60% 40% 50%; }
.tk-blob--cobogo   { width: 480px; height: 460px; left: 200px;  top: -160px; background: var(--tk-cobogo);   border-radius: 50% 50% 60% 40% / 56% 44% 60% 40%; }
.tk-blob--amazonia { width: 560px; height: 480px; right: -120px; top: -60px; background: var(--tk-amazonia); border-radius: 60% 40% 50% 50% / 45% 55% 50% 50%; }
.tk-blob--atlantico{ width: 720px; height: 520px; right: -200px; top: 200px; background: var(--tk-atlantico);border-radius: 55% 45% 60% 40% / 50% 50% 60% 40%; }
.tk-blob--flor     { width: 280px; height: 260px; left: 480px;  top: 280px; background: var(--tk-flor); mix-blend-mode: normal; opacity: 0.85;  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }

.tk-hero__noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: multiply; opacity: 0.18;
  pointer-events: none;
}

.tk-hero__copy {
  position: relative; z-index: 2;
  max-width: 920px;
  display: flex; flex-direction: column; gap: 28px;
}
.tk-eyebrow {
  font: 700 13px/1 var(--tk-font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tk-fg-2);
}
.tk-eyebrow--light {
  color: rgba(14,14,14,0.7);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
  padding: 8px 14px;
  border-radius: 999px;
  align-self: flex-start;
}
.tk-display-hero {
  font-family: var(--tk-font-display);
  font-weight: 700;
  font-size: clamp(56px, 8.5vw, 144px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--tk-fg);
  margin: 0;
}
.tk-hero__lede {
  max-width: 640px;
  font: 400 19px/1.55 var(--tk-font-body);
  color: var(--tk-grey-800);
  margin: 0;
}
.tk-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.tk-hero__actions .tk-btn--ghost-light { background: rgba(14,14,14,0.05); color: var(--tk-fg); box-shadow: inset 0 0 0 1.5px rgba(14,14,14,0.18); }
.tk-hero__actions .tk-btn--ghost-light:hover { background: rgba(14,14,14,0.08); }

.tk-hero__metrics {
  display: flex; gap: 56px;
  margin-top: 32px;
  border-top: 1.5px solid rgba(14,14,14,0.18);
  padding-top: 28px;
}
.tk-hero__metrics > div { display: flex; flex-direction: column; gap: 6px; }
.tk-hero__metrics b { font: 700 32px/1 var(--tk-font-display); letter-spacing: -0.03em; color: var(--tk-fg); }
.tk-hero__metrics span { font: 400 13px/1.3 var(--tk-font-body); color: var(--tk-grey-700); max-width: 140px; }

/* ---------- Sections ---------- */
.tk-section { padding: 120px 64px; }
.tk-section--areia { background: var(--tk-areia); }
.tk-section__head { margin-bottom: 48px; max-width: 880px; display: flex; flex-direction: column; gap: 12px; }
.tk-section__head--row { flex-direction: row; align-items: flex-end; justify-content: space-between; max-width: none; gap: 32px; }
.tk-section__head--row > div { flex: 1; max-width: 720px; }
.tk-h2 {
  font: 700 64px/0.96 var(--tk-font-display);
  letter-spacing: -0.035em;
  color: var(--tk-fg);
  margin: 0;
}

/* ---------- Steps ---------- */
.tk-steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.tk-step { background: #fff; border-radius: 20px; padding: 32px; border: 2px solid var(--tk-grey-100); display: flex; flex-direction: column; gap: 12px; }
.tk-step__num {
  font: 700 14px/1 var(--tk-font-mono);
  color: var(--tk-dende);
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.tk-step__t { font: 700 24px/1.2 var(--tk-font-body); margin: 0; color: var(--tk-fg); letter-spacing: -0.01em; }
.tk-step__p { font: 400 15px/1.55 var(--tk-font-body); color: var(--tk-grey-700); margin: 0; }

/* ---------- Insights cards ---------- */
.tk-insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tk-insight {
  position: relative;
  border-radius: 20px;
  padding: 32px;
  min-height: 360px;
  display: flex; flex-direction: column; gap: 16px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.tk-insight--green  { background: var(--tk-amazonia); }
.tk-insight--orange { background: var(--tk-dende); }
.tk-insight--blue   { background: var(--tk-atlantico); }

.tk-insight__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tk-insight__art .tk-blob--art-1 { width: 220px; height: 200px; right: -60px; top: -50px; background: var(--tk-cobogo); border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
.tk-insight__art .tk-blob--art-2 { width: 180px; height: 160px; left: -40px; bottom: -20px; background: var(--tk-atlantico); border-radius: 50% 50% 60% 40% / 55% 45% 55% 45%; }
.tk-insight--blue .tk-blob--art-2 { background: var(--tk-amazonia); }
.tk-insight__art .tk-blob--art-3 { width: 140px; height: 130px; right: 40px; bottom: 60px; background: var(--tk-dende); border-radius: 55% 45% 50% 50% / 45% 55% 50% 50%; }
.tk-insight--orange .tk-blob--art-3 { background: var(--tk-flor); }

.tk-insight__tag {
  position: relative; z-index: 1;
  align-self: flex-start;
  font: 600 12px/1 var(--tk-font-body);
  background: rgba(255,255,255,0.2);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.tk-insight__title {
  position: relative; z-index: 1;
  font: 700 30px/1.1 var(--tk-font-display);
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0; margin-top: auto;
}
.tk-insight__foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.tk-insight__author { font: 400 13px/1.4 var(--tk-font-body); color: rgba(255,255,255,0.85); }
.tk-insight__cta {
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(255,255,255,0.95);
  color: var(--tk-fg);
  display: grid; place-items: center;
  font-size: 18px;
  transition: background var(--tk-dur-fast) var(--tk-ease-out);
}
.tk-insight__cta:hover { background: #fff; }

/* ---------- Pull quote ---------- */
.tk-quote {
  position: relative;
  background: var(--tk-amazonia);
  color: #fff;
  padding: 120px 64px;
  isolation: isolate;
  overflow: hidden;
}
.tk-quote__inner { max-width: 1100px; position: relative; z-index: 2; }
.tk-quote__text {
  font: 700 56px/1.1 var(--tk-font-display);
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 40px;
}
.tk-quote__attr { display: flex; align-items: center; gap: 16px; }
.tk-quote__avatar {
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--tk-areia); color: var(--tk-amazonia);
  display: grid; place-items: center;
  font: 700 18px/1 var(--tk-font-body);
}
.tk-quote__attr b { display: block; font: 700 16px/1.2 var(--tk-font-body); }
.tk-quote__attr span { display: block; font: 400 14px/1.4 var(--tk-font-body); color: rgba(255,255,255,0.7); margin-top: 2px; }
.tk-quote__blob {
  position: absolute; right: -120px; bottom: -120px; z-index: 1;
  width: 520px; height: 460px;
  background: var(--tk-dende);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  mix-blend-mode: multiply; opacity: 0.7;
}

/* ---------- Footer ---------- */
.tk-footer { background: var(--tk-areia); padding: 80px 64px 32px; }
.tk-footer__top { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; padding-bottom: 56px; border-bottom: 1.5px solid rgba(14,14,14,0.12); }
.tk-footer__brand img { height: 28px; margin-bottom: 16px; }
.tk-footer__brand p { font: 400 16px/1.5 var(--tk-font-body); color: var(--tk-grey-800); max-width: 320px; margin: 0; }
.tk-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.tk-footer__cols h4 { font: 700 13px/1 var(--tk-font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tk-fg-2); margin: 0 0 14px; }
.tk-footer__cols a { display: block; font: 400 14px/1.6 var(--tk-font-body); color: var(--tk-fg); padding: 4px 0; }
.tk-footer__cols a:hover { color: var(--tk-dende); }
.tk-footer__bottom { display: flex; justify-content: space-between; padding-top: 28px; font: 400 13px/1.4 var(--tk-font-body); color: var(--tk-grey-700); }
.tk-footer__bottom a:hover { color: var(--tk-dende); }