:root {
  --teal:#0a6a66;
  --teal-dark:#074743;
  --cream:#fff8b5;
  --paper:#fffce4;
  --ink:#12201f;
  --hot:#ff258e;
  --cyan:#00dce6;
  --lime:#c9ff31;
  --orange:#ff6b45;
  --blue:#1f5cff;
  --line:rgba(255,255,255,.14);
  --shadow:0 28px 70px rgba(0,0,0,.35);
  --font-display:"Bricolage Grotesque", sans-serif;
  --font-body:"Inter", sans-serif;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  min-width:320px;
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
h1,h2,h3,p { margin:0; }

.site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:30;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  padding:26px clamp(18px,5vw,76px);
  color:#ffffff;
  pointer-events:none;
}
.site-header a { pointer-events:auto; }
.logo { display:flex; align-items:center; gap:10px; width:max-content; }
.logo {
  padding:6px 16px 6px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 16px 36px rgba(0,0,0,.2);
  backdrop-filter:blur(16px);
}
.logo-symbol {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:var(--hot);
  color:#ffffff;
  font:800 22px/1 var(--font-display);
  box-shadow:0 8px 18px rgba(255,37,142,.35);
}
.logo-text {
  font:800 clamp(22px,2vw,30px)/.9 var(--font-display);
  color:#ffffff;
}
.nav-links {
  display:flex;
  gap:8px;
  padding:5px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 36px rgba(0,0,0,.15);
  backdrop-filter:blur(18px);
}
.nav-links a,
.nav-cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 22px;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  color:rgba(255,255,255,.9);
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease, color .22s ease;
}
.nav-links a:hover { transform:translateY(-2px); background:rgba(255,255,255,.12); color:#ffffff; }
.nav-cta {
  justify-self:end;
  background:var(--hot);
  border:1px solid rgba(255,255,255,.2);
  color:#ffffff;
  font-weight:700;
  box-shadow:0 12px 26px rgba(255,37,142,.35);
  backdrop-filter:blur(12px);
}
.nav-cta:hover {
  transform:translateY(-3px) rotate(-1deg);
  box-shadow:0 18px 34px rgba(255,37,142,.45);
}

.hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,620px) minmax(0,1fr);
  align-items:center;
  gap:44px;
  min-height:100svh;
  padding:140px clamp(18px,5vw,76px) 90px;
  overflow:hidden;
  background:
    radial-gradient(circle at 75% 35%, rgba(0, 220, 230, 0.22), transparent 45%),
    radial-gradient(circle at 20% 70%, rgba(255, 37, 142, 0.16), transparent 40%),
    linear-gradient(135deg, #073835 0%, #042523 50%, #021716 100%);
  color:#ffffff;
}
.hero::after {
  content:"";
  position:absolute;
  inset:18% 5% 12% 51%;
  z-index:0;
  border-radius:34px;
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 30px 80px rgba(0,0,0,.35);
  backdrop-filter:blur(20px);
  transform:rotate(-2deg);
}
.intro,
.solutions,
.radio,
.whatsapp,
.process,
.final-cta {
  scroll-margin-top:104px;
}
.shape-field {
  position:absolute;
  inset:-10%;
  opacity:.35;
  background:
    linear-gradient(32deg, transparent 0 22%, rgba(255,255,255,.07) 22% 36%, transparent 36% 100%),
    linear-gradient(151deg, transparent 0 48%, rgba(0,0,0,.12) 48% 59%, transparent 59% 100%),
    radial-gradient(circle at 36% 20%, rgba(255,255,255,.08) 0 10%, transparent 10.5%),
    radial-gradient(circle at 75% 75%, rgba(255,248,200,.12) 0 14%, transparent 14.5%);
  transform:rotate(-4deg) scale(1.08);
}
.hero-copy,
.hero-product { position:relative; }
.hero-copy { z-index:2; min-width:0; }
.hero-product { z-index:1; }
.kicker {
  margin-bottom:22px;
  color:var(--cyan);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.section-cream .kicker,
.whatsapp .kicker,
.process .kicker {
  color:var(--teal);
}
h1 {
  max-width:610px;
  font-family:var(--font-display);
  font-size:clamp(52px,5.5vw,84px);
  font-weight:800;
  line-height:.95;
  letter-spacing:0;
  color:#ffffff;
}
.lead {
  max-width:570px;
  margin-top:30px;
  color:rgba(255,255,255,.82);
  font-family:var(--font-body);
  font-size:clamp(18px,1.5vw,22px);
  line-height:1.45;
}
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.button {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:56px;
  padding:0 28px;
  border:2px solid transparent;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:700;
  overflow:hidden;
  transition:transform .24s ease, box-shadow .24s ease, background .24s ease, border-color .24s ease;
}
.button::after {
  content:"";
  width:0;
  height:2px;
  background:currentColor;
  transition:width .24s ease;
}
.button:hover { transform:translateY(-4px) rotate(-1deg); }
.button:hover::after { width:22px; }
.button-hot { background:var(--hot); color:#ffffff; box-shadow:0 16px 30px rgba(255,37,142,.35); }
.button-ghost { border-color:rgba(255,255,255,.25); color:#ffffff; background:rgba(255,255,255,.08); backdrop-filter:blur(12px); }
.button-yellow { background:#ffd326; color:var(--teal-dark); font-weight:800; }
.button::after {
  content:"";
  width:0;
  height:2px;
  background:currentColor;
  transition:width .24s ease;
}
.button:hover { transform:translateY(-4px) rotate(-1deg); }
.button:hover::after { width:22px; }
.button-hot { background:var(--hot); color:#fff8e8; box-shadow:0 16px 30px rgba(255,42,145,.24); }
.button-ghost { border-color:rgba(255,255,255,.42); color:#fff8e8; background:rgba(0,0,0,.12); }
.button-yellow { background:#ffd326; color:var(--teal-dark); }

.hero-product {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:560px;
  transform:rotate(-3deg);
  isolation:isolate;
}
.hero-product::after {
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  width:42%;
  height:38%;
  right:2%;
  bottom:5%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,37,142,.26), transparent 65%);
  filter:blur(8px);
}
.hero-product img {
  display:block;
  width:min(680px,50vw);
  max-width:100%;
  border-radius:28px;
  box-shadow:0 28px 70px rgba(0,0,0,.18);
  transform-origin:center;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 13%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 8%, #000 91%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 13%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 8%, #000 91%, transparent 100%);
  mask-composite:intersect;
  transition:transform .42s cubic-bezier(.2,.8,.2,1), box-shadow .42s ease, filter .42s ease;
  animation:floatProduct 7s ease-in-out infinite;
}
.hero-product:hover img {
  transform:translateY(-18px) rotate(2deg) scale(1.035);
  filter:saturate(1.08) contrast(1.04);
  box-shadow:0 34px 86px rgba(0,0,0,.34);
}
.glass-chip {
  position:absolute;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 15px;
  border:1px solid rgba(255,248,181,.34);
  border-radius:999px;
  background:rgba(8,117,110,.36);
  color:var(--cream);
  box-shadow:0 18px 40px rgba(0,0,0,.16);
  backdrop-filter:blur(16px);
  font-size:15px;
  font-weight:800;
  transform:rotate(4deg);
  transition:transform .28s ease, background .28s ease;
}
.hero-product:hover .glass-chip { background:rgba(255,37,142,.78); }
.chip-api { left:14%; top:18%; }
.chip-wa { right:10%; top:20%; }
.chip-radio { left:19%; bottom:13%; background:rgba(255,248,181,.20); }
@keyframes floatProduct {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-18px); }
}

.ticker {
  overflow:hidden;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  background:var(--ink);
  color:var(--lime);
  white-space:nowrap;
}
.ticker div {
  display:flex;
  width:max-content;
  animation:ticker 24s linear infinite;
}
.ticker span {
  display:block;
  padding:18px 22px;
  font-family:var(--font-display);
  font-size:34px;
  font-weight:800;
  text-transform:lowercase;
}
@keyframes ticker { to { transform:translateX(-50%); } }

.section-cream {
  display:grid;
  grid-template-columns:minmax(280px,520px) minmax(0,1fr);
  gap:64px;
  padding:92px clamp(18px,5vw,76px);
  background:#fffce4;
  background-image:
    radial-gradient(circle at 15% 50%, rgba(255, 37, 142, 0.06), transparent 35%),
    linear-gradient(135deg, #fffce4 0%, #fffbd0 50%, #fff8b5 100%);
}
.operating-board {
  position:relative;
  min-height:620px;
  border-radius:36px;
  background:
    radial-gradient(circle at 20% 16%, rgba(255,37,142,.18), transparent 24%),
    linear-gradient(135deg, rgba(10,106,102,.92), rgba(7,71,67,.98));
  overflow:hidden;
  box-shadow:0 36px 80px rgba(0,0,0,.18);
}
.operating-board::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(130deg, transparent 0 28%, rgba(255,248,181,.14) 28% 42%, transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(32,217,229,.22), transparent 26%);
}
.board-window {
  position:absolute;
  left:8%;
  top:12%;
  width:74%;
  min-height:360px;
  padding:28px;
  border:1px solid rgba(255,248,181,.28);
  border-radius:24px;
  background:rgba(255,252,228,.16);
  box-shadow:0 30px 70px rgba(0,0,0,.22);
  backdrop-filter:blur(22px);
  transform:rotate(-4deg);
  transition:transform .32s ease, background .32s ease;
}
.operating-board:hover .board-window {
  transform:rotate(-1deg) translateY(-10px);
  background:rgba(255,252,228,.22);
}
.dot {
  display:inline-block;
  width:13px;
  height:13px;
  margin-right:8px;
  border-radius:50%;
}
.dot.hot { background:var(--hot); }
.dot.yellow { background:#ffd326; }
.dot.cyan { background:var(--cyan); }
.board-line {
  height:14px;
  width:58%;
  margin-top:34px;
  border-radius:999px;
  background:rgba(255,248,181,.62);
}
.board-line.wide { width:82%; }
.board-metric {
  width:160px;
  height:160px;
  margin-top:38px;
  border-radius:50%;
  background:conic-gradient(var(--hot), var(--lime), var(--cyan), var(--hot));
  box-shadow:inset 0 0 0 38px rgba(7,71,67,.9);
}
.board-bars {
  position:absolute;
  right:28px;
  bottom:34px;
  display:flex;
  align-items:end;
  gap:10px;
}
.board-bars i {
  display:block;
  width:34px;
  border-radius:999px 999px 0 0;
  background:var(--lime);
}
.board-bars i:nth-child(1){height:72px}.board-bars i:nth-child(2){height:118px;background:var(--cyan)}.board-bars i:nth-child(3){height:92px;background:var(--hot)}.board-bars i:nth-child(4){height:150px;background:#ffd326}
.board-card {
  position:absolute;
  display:grid;
  place-items:center;
  width:132px;
  height:132px;
  border:1px solid rgba(255,248,181,.32);
  border-radius:28px;
  background:rgba(255,248,181,.22);
  color:var(--cream);
  box-shadow:0 24px 48px rgba(0,0,0,.20);
  backdrop-filter:blur(18px);
  font-size:36px;
  font-weight:800;
  transition:transform .3s ease, background .3s ease;
}
.operating-board:hover .board-card { background:rgba(255,37,142,.72); }
.card-top { right:5%; top:6%; transform:rotate(9deg); }
.card-mid { right:12%; top:45%; transform:rotate(-8deg); }
.card-low { left:13%; bottom:8%; transform:rotate(7deg); }
.photo-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.tile {
  min-height:220px;
  border-radius:8px;
  display:flex;
  align-items:flex-end;
  padding:18px;
  overflow:hidden;
  color:#fff8e8;
  font-family:var(--font-logo-title);
  font-size:32px;
  font-weight:800;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.36), transparent 14%),
    linear-gradient(135deg, var(--teal), var(--blue));
  transition:transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.tile-b { background:linear-gradient(135deg, var(--hot), #b1004d); transform:translateY(48px); }
.tile-c { background:linear-gradient(135deg, #ffd326, var(--orange)); color:var(--ink); }
.tile-d { background:linear-gradient(135deg, var(--lime), #189313); color:var(--ink); transform:translateY(48px); }
.photo-grid:hover .tile { filter:saturate(.9); }
.photo-grid .tile:hover {
  transform:translateY(-10px) rotate(-2deg) scale(1.03);
  filter:saturate(1.12);
  box-shadow:0 22px 42px rgba(0,0,0,.18);
}
.photo-grid .tile-b:hover,
.photo-grid .tile-d:hover { transform:translateY(34px) rotate(2deg) scale(1.03); }
.intro-copy h2,
.section-head h2,
.radio h2,
.whatsapp h2,
.process h2,
.final-cta h2 {
  font-family:var(--font-logo-title);
  font-size:clamp(44px,5vw,84px);
  font-weight:800;
  line-height:.92;
  letter-spacing:0;
}
.intro-copy p:not(.kicker),
.radio-copy p:not(.kicker),
.whatsapp p {
  max-width:720px;
  margin-top:26px;
  font-size:20px;
  line-height:1.45;
}
.proof-row {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:32px;
}
.proof-row span {
  padding:10px 14px;
  border:1px solid rgba(10,106,102,.18);
  border-radius:999px;
  background:rgba(10,106,102,.05);
  color:var(--teal-dark);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  transition:transform .22s ease, background .22s ease, color .22s ease;
}
.proof-row span:hover {
  transform:translateY(-4px);
  background:var(--teal);
  color:var(--cream);
}

.solutions {
  padding:96px clamp(18px,5vw,76px) 106px;
  background:var(--teal);
  background-image:
    radial-gradient(circle at 85% 30%, rgba(201, 255, 49, 0.12), transparent 35%),
    linear-gradient(135deg, #0a6a66 0%, #085350 100%);
  color:var(--cream);
}
.section-head {
  display:grid;
  grid-template-columns:minmax(180px,340px) minmax(0,1fr);
  gap:50px;
  align-items:start;
}
.solution-stage {
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin-top:64px;
  border-top:1px solid rgba(255,248,181,.28);
}
.solution-card {
  position:relative;
  min-height:176px;
  display:grid;
  grid-template-columns:70px minmax(220px,360px) minmax(0,1fr) 170px;
  gap:28px;
  align-items:center;
  padding:24px 28px;
  border-bottom:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  margin-bottom:12px;
  background:rgba(255,255,255,.03) !important;
  color:var(--cream);
  overflow:hidden;
  backdrop-filter:blur(16px);
  transition:background .24s ease, border-color .24s ease, transform .24s ease, box-shadow .24s ease;
}
.solution-card::before {
  content:"";
  position:absolute;
  left:0;
  top:26px;
  bottom:26px;
  width:5px;
  border-radius:999px;
  background:var(--hot);
  transform:scaleY(.55);
  transform-origin:center;
  transition:transform .24s ease, background .24s ease;
}
.solution-card:nth-child(2)::before { background:var(--lime); }
.solution-card:nth-child(3)::before { background:#ff9bcf; }
.solution-card:nth-child(4)::before { background:var(--orange); }
.solution-card:nth-child(5)::before { background:var(--cream); }
.solution-card:nth-child(6)::before { background:var(--cyan); }
.solution-card:hover {
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(0,220,230,.4);
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(0,0,0,.3);
}
.solution-card:hover::before { transform:scaleY(1); }
.solution-card:nth-child(even):hover { transform:none; }
.solution-card span {
  color:var(--cyan);
  font-weight:800;
  font-size:18px;
}
.solution-card h3 {
  font-family:var(--font-logo-title);
  font-size:clamp(34px,3.4vw,54px);
  line-height:.9;
  position:relative;
  z-index:1;
  color:var(--cream);
}
.solution-card p {
  position:relative;
  z-index:1;
  max-width:620px;
  color:rgba(255,255,255,.76);
  font-size:18px;
  line-height:1.42;
  font-weight:700;
}
.solution-visual {
  display:flex;
  align-items:center;
  justify-content:center;
  width:76px;
  height:76px;
  border-radius:50%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(8px);
  margin-left:auto;
  order:4;
  transition:transform .24s ease, border-color .24s ease;
}
.solution-card:hover .solution-visual {
  transform:scale(1.08) rotate(5deg);
  border-color:rgba(0,220,230,.5);
}
.solution-icon {
  width:20px;
  height:20px;
  stroke-width:2px;
}
.tone-blue .solution-icon { color:#9bd8ff; }
.tone-lime .solution-icon { color:var(--lime); }
.tone-pink .solution-icon { color:#ff9bcf; }
.tone-orange .solution-icon { color:var(--orange); }
.tone-cream .solution-icon { color:var(--cream); }
.tone-cyan .solution-icon { color:var(--cyan); }

.radio {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,520px);
  gap:72px;
  align-items:center;
  min-height:720px;
  padding:92px clamp(18px,5vw,76px);
  background:#d60445;
  background-image:
    radial-gradient(circle at 15% 60%, rgba(255, 255, 255, 0.15), transparent 40%),
    linear-gradient(135deg, #d60445 0%, #a80032 100%);
  color:var(--cream);
  overflow:hidden;
}
.radio h2 { color: #ffffff; }
.radio-copy p:not(.kicker) { color:rgba(255,255,255,.85); }
.radio-copy .button { margin-top:34px; }
.radio-visual {
  position:relative;
  min-height:520px;
  padding:34px;
  border-radius:24px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  color:var(--lime);
  box-shadow:0 30px 70px rgba(0,0,0,.3);
  backdrop-filter:blur(20px);
  transform:rotate(3deg);
  transition:transform .36s cubic-bezier(.2,.8,.2,1), box-shadow .36s ease, filter .36s ease;
}
.radio-visual:hover {
  transform:rotate(1deg) translateY(-10px) scale(1.02);
  filter:saturate(1.08);
  box-shadow:0 38px 86px rgba(0,0,0,.4);
}
.radio-visual span {
  display:inline-flex;
  padding:9px 16px;
  border-radius:999px;
  background:var(--hot);
  color:#ffffff;
  font-weight:800;
  text-transform:uppercase;
  box-shadow:0 8px 20px rgba(255,37,142,.3);
}
.radio-visual strong {
  display:block;
  margin-top:36px;
  font-family:var(--font-display);
  font-size:clamp(48px, 4vw, 64px);
  line-height:1;
  color:var(--lime);
}
.radio-visual small {
  display:block;
  margin-top:20px;
  font-weight:700;
  color:rgba(255,255,255,.85);
  text-transform:uppercase;
}
.equalizer {
  position:absolute;
  left:34px;
  right:34px;
  bottom:34px;
  display:flex;
  align-items:end;
  gap:12px;
}
.equalizer i { display:block; width:18px; background:var(--lime); border-radius:4px 4px 0 0; }
.equalizer i:nth-child(1){height:54px}.equalizer i:nth-child(2){height:92px}.equalizer i:nth-child(3){height:68px}.equalizer i:nth-child(4){height:118px}.equalizer i:nth-child(5){height:82px}.equalizer i:nth-child(6){height:48px}.equalizer i:nth-child(7){height:104px}
.radio-visual:hover .equalizer i { animation:pulseBars .72s ease-in-out infinite alternate; }
.radio-visual:hover .equalizer i:nth-child(2n) { animation-delay:.12s; }
.radio-visual:hover .equalizer i:nth-child(3n) { animation-delay:.24s; }
@keyframes pulseBars {
  to { transform:scaleY(.55); transform-origin:bottom; }
}

.whatsapp {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,470px);
  gap:60px;
  align-items:center;
  padding:96px clamp(18px,5vw,76px);
  background:#ffd326;
  background-image:
    radial-gradient(circle at 85% 50%, rgba(255, 255, 255, 0.2), transparent 45%),
    linear-gradient(135deg, #ffd326 0%, #e6bb10 100%);
  color:var(--ink);
}
.whatsapp h2 { color: var(--ink); }
.whatsapp p { color: rgba(18, 32, 31, 0.8); }
.whatsapp-panel {
  max-width:930px;
}
.phone-flow { position:relative; min-height:560px; }
.phone-shell {
  position:absolute;
  right:6%;
  top:0;
  width:310px;
  height:520px;
  border:2px solid var(--ink);
  border-radius:44px;
  background:
    linear-gradient(180deg, rgba(18,32,31,.9), rgba(18,32,31,.98)),
    radial-gradient(circle at 50% 20%, rgba(32,217,229,.30), transparent 36%);
  box-shadow:18px 18px 0 rgba(10,106,102,.84);
  transform:rotate(4deg);
}
.phone-shell::before {
  content:"";
  position:absolute;
  left:50%;
  top:18px;
  width:96px;
  height:10px;
  border-radius:999px;
  background:rgba(255,248,181,.7);
  transform:translateX(-50%);
}
.phone-shell span {
  display:block;
  height:44px;
  margin:84px 28px 0;
  border-radius:999px;
  background:rgba(255,248,181,.18);
  border:1px solid rgba(255,248,181,.20);
}
.phone-shell span:nth-child(2){width:64%; margin-left:auto; background:rgba(201,255,49,.34)}
.phone-shell span:nth-child(3){width:74%; background:rgba(255,37,142,.36)}
.chat-stack {
  position:absolute;
  left:0;
  top:110px;
  display:grid;
  gap:16px;
  width:min(390px,82%);
}
.chat-stack span {
  display:block;
  padding:20px 24px;
  border:2px solid var(--ink);
  border-radius:16px;
  background:rgba(255, 248, 232, 0.75);
  box-shadow:10px 10px 0 var(--teal);
  backdrop-filter:blur(8px);
  font-family:var(--font-display);
  font-size:26px;
  font-weight:800;
  color:var(--ink);
  transition:transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.chat-stack span:nth-child(2){ transform:translateX(-28px); background:rgba(201, 255, 49, 0.75); border-color:var(--ink); color:var(--ink); box-shadow:10px 10px 0 var(--hot); }
.chat-stack span:nth-child(3){ transform:translateX(16px); background:rgba(155, 216, 255, 0.75); border-color:var(--ink); color:var(--ink); box-shadow:10px 10px 0 var(--orange); }
.chat-stack span:hover {
  transform:translate(-6px,-6px);
  background:rgba(255, 248, 232, 0.95);
  box-shadow:18px 18px 0 var(--teal);
}

.process {
  padding:96px clamp(18px,5vw,76px);
  background:#fffce4;
  background-image:
    radial-gradient(circle at 80% 14%, rgba(255, 37, 142, 0.12), transparent 25%),
    linear-gradient(180deg, #fffce4 0%, #fff6b6 100%);
  color:var(--ink);
}
.process h2 { color: var(--ink); }
.process .kicker { color: var(--teal); }
.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:60px;
}
.steps article {
  min-height:270px;
  padding:28px;
  border:2px solid var(--ink);
  border-radius:24px;
  background:rgba(255, 252, 228, 0.6);
  box-shadow:10px 10px 0 rgba(18,32,31,.16);
  backdrop-filter:blur(16px);
  color:var(--ink);
  transition:background .24s ease, color .24s ease, transform .24s ease;
}
.steps article:hover {
  background:var(--ink);
  color:var(--cream);
  transform:translateY(-10px);
}
.steps article:hover span { color:var(--lime); }
.steps span { font-weight:800; color:var(--hot); font-family:var(--font-display); font-size:20px; }
.steps h3 {
  margin-top:60px;
  font-family:var(--font-display);
  font-size:34px;
  color:var(--ink);
  line-height:.95;
}
.steps article:hover h3 { color: #ffffff; }
.steps p { margin-top:12px; font-family:var(--font-body); font-size:15px; line-height:1.45; color:rgba(18, 32, 31, 0.8); }
.steps article:hover p { color:rgba(255,255,255,.8); }

.final-cta {
  padding:110px clamp(18px,5vw,76px);
  background:var(--teal);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 37, 142, 0.15), transparent 45%),
    linear-gradient(135deg, #0a6a66 0%, #074743 100%);
  color:var(--cream);
  text-align:center;
}
.final-cta h2 {
  max-width:980px;
  margin:auto;
}
.final-cta .button { margin-top:34px; }

.footer {
  display:grid;
  grid-template-columns:1fr auto;
  gap:30px;
  padding:38px clamp(18px,5vw,76px);
  background:var(--ink);
  color:#fff8e8;
}
.footer div,
.footer nav {
  display:flex;
  flex-wrap:wrap;
  gap:12px 20px;
  align-items:center;
}
.footer-legal {
  grid-column:1 / -1;
  padding-top:18px;
  border-top:1px solid rgba(255,248,232,.14);
  color:rgba(255,248,232,.48);
  font-size:11px;
  line-height:1.5;
}
.footer span,
.footer a {
  font-size:12px;
  color:rgba(255,248,232,.72);
}
.footer strong { font-family:var(--font-logo-title); font-size:22px; }
.footer a:hover { color:#fff; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

.legal-page { background:var(--paper); }
.legal-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:84px;
  padding:0 clamp(18px,5vw,76px);
  background:var(--teal);
  color:var(--cream);
}
.legal-header a:first-child { font:800 26px/1 var(--font-logo-title); }
.legal-header a:last-child {
  padding:10px 16px;
  border-radius:999px;
  background:rgba(0,0,0,.18);
  font-weight:800;
}
.legal-main {
  width:min(980px,calc(100% - 36px));
  margin:auto;
  padding:76px 0 110px;
}
.legal-main > h1 {
  max-width:900px;
  color:var(--ink);
  font-family:var(--font-logo-title);
  font-size:clamp(52px,7vw,94px);
  line-height:.9;
}
.legal-date { margin:22px 0 54px; font-weight:800; color:var(--teal); }
.legal-main section {
  display:grid;
  grid-template-columns:260px 1fr;
  gap:36px;
  padding:28px 0;
  border-top:2px solid var(--line);
}
.legal-main h2 {
  font-family:var(--font-logo-title);
  font-size:26px;
}
.legal-main p { line-height:1.7; }
.legal-main a { color:var(--teal); font-weight:800; text-decoration:underline; }

@media (max-width:1100px) {
  .hero,
  .radio,
  .whatsapp,
  .section-cream,
  .section-head { grid-template-columns:1fr; }
  .hero-product { min-height:620px; max-width:650px; }
  .steps { grid-template-columns:repeat(2,1fr); gap:16px; }
  .steps article + article { margin-left:0; }
  .solution-card {
    grid-template-columns:56px 1fr 56px;
    grid-template-rows:auto auto;
    gap:8px 20px;
    padding:24px 20px;
  }
  .solution-card span {
    grid-column:1;
    grid-row:1 / span 2;
  }
  .solution-card h3 {
    grid-column:2;
    grid-row:1;
    font-size:28px;
  }
  .solution-card p {
    grid-column:2;
    grid-row:2;
    font-size:16px;
  }
  .solution-visual {
    grid-column:3;
    grid-row:1 / span 2;
    order:unset;
    width:56px;
    height:56px;
  }
  .solution-icon {
    width:20px;
    height:20px;
  }
  .site-header { grid-template-columns:1fr auto; }
  .nav-links { display:none; }
}

@media (max-width:700px) {
  .site-header { padding:16px; }
  .logo-text { font-size:22px; }
  .logo-symbol { width:36px; height:36px; font-size:20px; }
  .nav-cta { min-height:38px; padding:0 14px; font-size:13px; }
  .hero { grid-template-columns:minmax(0,1fr); min-height:auto; padding:104px 16px 60px; }
  .hero::after {
    inset:58% -6% 4% 12%;
    border-radius:26px;
    transform:rotate(-2deg);
  }
  .hero-copy { width:100%; max-width:100%; }
  h1 { max-width:100%; font-size:48px; line-height:.9; }
  .lead { max-width:100%; font-size:16px; line-height:1.35; }
  .button { width:100%; min-height:54px; font-size:19px; }
  .hero-product { min-height:auto; margin-top:34px; transform:rotate(-2deg); }
  .hero-product img { width:100%; margin-left:0; }
  .hero-product::after { right:-8%; bottom:0; width:62%; height:48%; }
  .glass-chip { min-height:34px; padding:0 12px; font-size:13px; }
  .chip-api { left:7%; top:9%; }
  .chip-wa { right:6%; top:12%; }
  .chip-radio { left:10%; bottom:9%; }
  .ticker span { font-size:26px; padding:14px 16px; }
  .section-cream,
  .solutions,
  .radio,
  .whatsapp,
  .process,
  .final-cta { padding:68px 16px; }
  .photo-grid { grid-template-columns:1fr; }
  .tile,
  .tile-b,
  .tile-c,
  .tile-d { min-height:150px; transform:none; }
  .intro-copy h2,
  .section-head h2,
  .radio h2,
  .whatsapp h2,
  .process h2,
  .final-cta h2 { font-size:46px; }
  .intro-copy p:not(.kicker),
  .radio-copy p:not(.kicker),
  .whatsapp p { font-size:17px; }
  .steps { grid-template-columns:1fr; gap:16px; }
  .steps article + article { margin-left:0; }
  .solution-card {
    grid-template-columns:36px 1fr 44px;
    grid-template-rows:auto auto;
    gap:6px 14px;
    padding:18px 12px;
  }
  .solution-card:hover { padding-left:12px; padding-right:12px; }
  .solution-card span {
    grid-column:1;
    grid-row:1 / span 2;
    font-size:15px;
  }
  .solution-card h3 {
    grid-column:2;
    grid-row:1;
    font-size:22px;
  }
  .solution-card p {
    grid-column:2;
    grid-row:2;
    font-size:14px;
    line-height:1.35;
  }
  .solution-visual {
    grid-column:3;
    grid-row:1 / span 2;
    order:unset;
    width:44px;
    height:44px;
  }
  .solution-icon {
    width:18px;
    height:18px;
  }
  .radio-visual { min-height:360px; transform:rotate(2deg); padding:24px 20px; }
  .radio-visual strong { font-size:clamp(32px, 8vw, 44px); margin-top:24px; }
  .radio-visual .equalizer { gap:6px; bottom:20px; left:20px; right:20px; }
  .radio-visual .equalizer i { width:10px; }
  .radio-visual .equalizer i:nth-child(1){height:24px}
  .radio-visual .equalizer i:nth-child(2){height:44px}
  .radio-visual .equalizer i:nth-child(3){height:32px}
  .radio-visual .equalizer i:nth-child(4){height:56px}
  .radio-visual .equalizer i:nth-child(5){height:40px}
  .radio-visual .equalizer i:nth-child(6){height:22px}
  .radio-visual .equalizer i:nth-child(7){height:48px}
  .chat-stack span { font-size:24px; }
  .chat-stack span:nth-child(2),
  .chat-stack span:nth-child(3) { transform:none; }
  .footer { grid-template-columns:1fr; }
  .legal-main section { grid-template-columns:1fr; gap:10px; }
}