/* Draw Pages — main stylesheet
   Dark "blueprint" direction: near-black, brand red #FF0000, white. */

@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #070707;
  --bg-2: #0d0d0e;
  --surface: #121214;
  --surface-2: #18181b;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --grid: rgba(255, 255, 255, 0.045);
  --text: #f4f4f3;
  --muted: #a3a3a8;
  --faint: #8a8a90;
  --red: #ff0000;          /* brand red: logo, dots, small accents */
  --red-ui: #e00707;       /* filled buttons and bands (white text passes AA) */
  --red-deep: #9b0000;
  --red-soft: rgba(255, 0, 0, 0.14);
  --white: #ffffff;
  --ink: #0a0a0a;

  --font: "Urbanist", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --radius: 28px;
  --radius-sm: 16px;
  --header-h: 64px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--red-ui); color: var(--white); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--white); color: var(--ink); font-weight: 700; text-decoration: none; transition: top .2s; }
.skip:focus { top: 16px; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.ico { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em;
  color: var(--muted);
}
.eyebrow__mark { color: var(--red); font-weight: 700; letter-spacing: -0.12em; }
.h-mix strong { font-weight: 800; }
.h-mix .l { font-weight: 300; }
.dot { color: var(--red); }
.h2 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -0.025em; font-weight: 500; text-wrap: balance; }
.lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--muted); max-width: 58ch; text-wrap: pretty; }

/* ---------- Blueprint background (grid + plus marks) ---------- */
.blueprint {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M80 73v14M73 80h14' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 160px 160px, 80px 80px, 80px 80px;
}
.blueprint--soft { background-color: var(--bg-2); }
.blueprint--soft::before { content: none; }

/* ---------- Buttons ---------- */
.btn {
  --h: 54px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 26px;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: 16px; line-height: 1; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: transform .3s var(--ease), background-color .25s, border-color .25s, box-shadow .3s;
}
.btn > * { position: relative; z-index: 2; }
.btn:hover { transform: translateY(-2px) scale(1.03); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn--sm { --h: 44px; padding: 0 18px; font-size: 15px; }
.btn--block { width: 100%; }

.btn--primary {
  overflow: hidden; isolation: isolate;
  color: var(--white);
  background: linear-gradient(180deg, #f51818 0%, #c80000 100%);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 34px -16px rgba(255, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn--primary:hover { box-shadow: 0 18px 40px -16px rgba(255, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
/* Laminated shine (reference: next4.com.br): a skewed light band crossing the button */
.btn--primary::before {
  content: ""; position: absolute; z-index: 1; top: -60%; left: 0;
  width: 45%; height: 220%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.1) 65%, transparent 100%);
  transform: translateX(-180%) skewX(-22deg);
  pointer-events: none;
}
.motion .btn--primary::before { animation: laminate 3.4s ease-in-out infinite; }
.motion .btn--primary:hover::before { animation-duration: 1.4s; }
@keyframes laminate {
  0%, 48% { transform: translateX(-180%) skewX(-22deg); }
  100% { transform: translateX(380%) skewX(-22deg); }
}

.btn--ghost { color: var(--text); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.02); }
.btn--ghost:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.06); }
.btn--light { color: var(--ink); background: #f1f1f1; border-color: #e3e3e3; }
.btn--light:hover { background: #e9e9e9; }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 0, 0, 0.38); background: var(--red-soft);
  font-size: 13px; font-weight: 600; color: #ffd6d6;
}

/* ---------- Header ---------- */
.header { position: fixed; inset: 14px 0 auto; z-index: 50; pointer-events: none; }
.header__bar {
  pointer-events: auto;
  width: min(100% - 2 * var(--gutter) + 16px, var(--container) + 40px); margin-inline: auto;
  height: var(--header-h); padding: 0 10px 0 22px;
  display: flex; align-items: center; gap: 24px;
  border-radius: 999px; border: 1px solid transparent;
  transition: background-color .35s, border-color .35s, backdrop-filter .35s, box-shadow .35s;
}
.header.is-scrolled .header__bar {
  background: rgba(14, 14, 15, 0.72);
  border-color: var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.8);
}
.header__logo img { width: 156px; height: auto; }
.header__nav { margin-left: auto; }
.header__nav ul { display: flex; gap: 4px; }
.header__nav a:not(.btn) {
  display: block; padding: 10px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 600; color: #d6d6d8; text-decoration: none;
  transition: color .2s, background-color .2s;
}
.header__nav a:not(.btn):hover { color: var(--white); background: rgba(255, 255, 255, 0.06); }
.header__cta-mobile { display: none; }
.header__toggle {
  display: none; width: 46px; height: 46px; margin-left: auto;
  align-items: center; justify-content: center;
  border-radius: 50%; border: 0; background: var(--white); color: var(--ink); cursor: pointer;
}
.header__toggle .ico { width: 22px; height: 22px; }
.header__toggle .ico--close { display: none; }
.header-sentinel { position: absolute; top: 40px; height: 1px; width: 1px; }

@media (max-width: 960px) {
  .header__cta { display: none; }
  .header__toggle { display: inline-flex; }
  .header__nav {
    position: absolute; top: calc(var(--header-h) + 22px); right: var(--gutter); left: var(--gutter);
    padding: 14px; border-radius: 24px;
    background: rgba(16, 16, 17, 0.96); border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s, transform .3s var(--ease), visibility .25s;
  }
  .header__nav ul { flex-direction: column; gap: 2px; margin-bottom: 12px; }
  .header__nav a:not(.btn) { font-size: 18px; padding: 14px 16px; }
  .header__cta-mobile { display: flex; width: 100%; }
  .header.is-open .header__nav { opacity: 1; visibility: visible; transform: none; }
  .header.is-open .header__bar { background: rgba(14, 14, 15, 0.92); border-color: var(--line); }
  .header.is-open .ico--open { display: none; }
  .header.is-open .ico--close { display: block; }
}

/* =================================================================
   HERO
   ================================================================= */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.hero__bg { position: absolute; inset: 0; z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 62% 42%, #000 35%, transparent 80%);
  mask-image: radial-gradient(ellipse 85% 75% at 62% 42%, #000 35%, transparent 80%);
}
.hero__glow { position: absolute; width: 60vw; height: 60vw; right: -12vw; top: -18vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 0, 0.22) 0%, rgba(255, 0, 0, 0.06) 40%, transparent 70%); }
/* The two strokes of the logo, used as a graphic element */
.hero__slash { position: absolute; width: clamp(60px, 7vw, 110px); height: 140vh; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0.55) 45%, rgba(255, 0, 0, 0) 100%);
  transform: rotate(28deg); filter: blur(1px); opacity: .32; }
.hero__slash--a { right: 22%; top: -20vh; }
.hero__slash--b { right: 12%; top: -6vh; opacity: .2; }

/* no z-index here: the hero film blends (screen) with the grid of .hero__bg, see .film */
.hero__inner {
  position: relative; flex: 1;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 4vw, 56px);
  padding-top: calc(var(--header-h) + 56px); padding-bottom: 24px;
}
.hero__copy { display: grid; gap: 22px; align-content: center; }
.hero__title { font-size: clamp(44px, 5.6vw, 82px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 500; }
.hero__sub { font-size: clamp(17px, 1.35vw, 19px); color: var(--muted); max-width: 46ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.hero__chips li { display: inline-flex; align-items: center; gap: 6px; }
.hero__chips .ico { color: var(--red); width: 15px; height: 15px; }

.hero__stage { position: relative; display: grid; place-items: center; height: min(64vh, 600px); }

.hero__steps { position: relative; z-index: 1; display: flex; align-items: center; gap: 24px; padding-bottom: 26px; font-family: var(--mono); font-size: 12px; color: var(--faint); }
.hero__steps ol { display: flex; gap: 20px; }
.hero__steps li { transition: color .3s; }
.hero__steps li span { color: var(--faint); margin-right: 4px; }
.hero__steps li.is-active { color: var(--text); }
.hero__steps li.is-active span { color: var(--red); }
.hero__progress { flex: 1; height: 1px; background: var(--line); position: relative; max-width: 360px; }
.hero__progress i { position: absolute; inset: 0; background: var(--red); transform-origin: left; transform: scaleX(0); }
.hero__hint { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.no-js .hero__steps, html:not(.motion) .hero__steps { display: none; }

/* ---------- Hero film: AI video frames, scrubbed by the scroll (assets/js/hero.js) ----------
   The frames have a pure black background drawn with mix-blend-mode: screen, so the black melts into
   the grid of .hero__bg. For that, no ancestor up to .hero may create a stacking context (z-index,
   transform, perspective, container-type, opacity, filter, will-change): the blend would stop at it.
   .film__mask (black silhouette of monitor, stand and phone) keeps the devices solid over the grid.
   The CSS default is the finished image (.film__still); hero.js swaps in the canvas. */
.film { position: relative; width: min(100%, calc(min(64vh, 600px) * 960 / 668)); aspect-ratio: 960 / 668; }
.film__part { position: absolute; inset: 0; width: 100%; height: 100%;
  transform: perspective(1800px) rotateY(calc(var(--hx, 0) * 6deg)) rotateX(calc(var(--hy, 0) * -4deg)); }
.film__still, .film__canvas { mix-blend-mode: screen; }
.film__canvas { display: none; }
/* with motion the still waits for hero.js; it only shows up if the script never runs */
.motion .film__still { animation: film-in .6s 3s both; }
.hero.is-film .film__still { display: none; }
.hero.is-film .film__canvas { display: block; animation: film-in 1.2s var(--ease) both; }
@keyframes film-in { from { opacity: 0; } to { opacity: 1; } }
.film__dims { pointer-events: none; }

/* "Computador" under the monitor stand, "Celular" under the phone (positions measured on the image) */
.dim { position: absolute; translate: -50% 0; font-family: var(--mono); font-size: clamp(10.5px, .95vw, 12.5px); color: var(--muted);
  white-space: nowrap; display: flex; align-items: center; gap: .6em; }
.dim::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--red); box-shadow: 0 0 1em rgba(255, 0, 0, 0.8); }
.dim--desktop { left: 40.6%; top: 93%; }
.dim--phone { left: 83.9%; top: 96.4%; }

/* ---------- Hero responsive ---------- */
@media (max-width: 960px) {
  .hero__inner { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding-top: calc(var(--header-h) + 34px); padding-bottom: 8px; }
  .hero__copy { gap: 14px; }
  .hero__title { font-size: clamp(38px, 10.4vw, 60px); }
  .hero__sub { font-size: 16px; }
  .hero__stage { flex: 1 1 auto; height: auto; padding-bottom: 14px; }
  /* the pinned hero must fit the screen: the film takes the height left by the copy (about 415 px on a phone) */
  .film { width: min(100%, calc(clamp(200px, 100svh - 415px, 520px) * 960 / 668)); }
  .hero__chips { display: none; }
  .hero__steps { padding-bottom: 14px; gap: 14px; }
  .hero__steps ol { gap: 12px; }
  .hero__hint { display: none; }
}
@media (max-width: 960px) and (min-height: 820px) {
  .hero__chips { display: flex; }
}
@media (max-width: 600px) {
  .hero__inner { padding-top: calc(var(--header-h) + 22px); }
  .hero__copy { gap: 12px; }
  .hero__stage { padding-bottom: 10px; }
  /* the phone label would pass the screen edge; it ends where the phone ends */
  .dim--phone { left: auto; right: 7%; translate: none; }
}
@media (max-width: 420px) {
  .hero__ctas .btn { flex: 1; padding: 0 14px; font-size: 15px; }
}

/* =================================================================
   SECTIONS
   ================================================================= */
main { overflow-x: clip; }
.section { position: relative; padding-block: clamp(84px, 11vw, 150px); }
.section__head { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 64px); max-width: 760px; }
.section__head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section__head--center .lead { margin-inline: auto; }
.section__head--split { max-width: none; grid-template-columns: 1fr minmax(0, 420px); align-items: end; gap: 24px 48px; }
.section__cta { display: flex; justify-content: center; margin-top: 40px; }
@media (max-width: 760px) { .section__head--split { grid-template-columns: 1fr; } }

/* ---------- Red band ---------- */
.band { position: relative; z-index: 2; background: var(--red-ui); color: var(--white); overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, 0.18); }
.marquee { display: flex; width: max-content; }
.marquee__track { display: flex; flex: none; }
.marquee__track li { display: flex; align-items: center; padding: 22px 0; font-size: clamp(18px, 1.8vw, 24px); font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.marquee__track li::after { content: "//"; margin-inline: 34px; font-weight: 300; opacity: .65; letter-spacing: -0.15em; }
.motion .marquee__track { animation: marquee 38s linear infinite; }
.motion .band:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
html:not(.motion) .marquee { width: auto; flex-wrap: wrap; justify-content: center; padding-inline: var(--gutter); }
html:not(.motion) .marquee__track[aria-hidden] { display: none; }
html:not(.motion) .marquee__track { flex-wrap: wrap; justify-content: center; }

/* ---------- Browser frame (shared) ---------- */
.browser { border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.browser__chrome { position: relative; display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 18px; border-bottom: 1px solid var(--line); background: #151517; }
.browser__chrome i { width: 10px; height: 10px; border-radius: 50%; background: #34343a; }
.browser__chrome i:first-child { background: var(--red); }
.browser__chrome span { position: absolute; left: 50%; transform: translateX(-50%); padding: 4px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-family: var(--mono); font-size: 12px; color: var(--faint); white-space: nowrap; }

/* ---------- Compare ---------- */
.compare { max-width: 980px; margin-inline: auto; }
/* Item-by-item comparison (18/10/2026): each problem of a template site sits next to its Draw Pages answer.
   No strike-through (it made the problems hard to read): the x, the arrow and the check say "this becomes that".
   The Draw Pages side uses a soft red on the black, not a full red panel. */
.compare__table { display: grid; gap: 10px; padding: clamp(18px, 3vw, 34px); }
.compare__head, .compare__row { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.08fr); gap: 10px; }
.compare__head { align-items: center; padding: 0 4px 6px; }
.compare__label { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; color: #9a9aa0; }
.compare__label--good { color: var(--white); }
.compare__label--good .ico { color: var(--red); }
.compare__cell { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; font-weight: 600; line-height: 1.35; }
.compare__cell::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background-position: center; background-size: 12px; background-repeat: no-repeat; }
.compare__cell--bad { color: #b9b9be; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); }
.compare__cell--bad::before { background-color: rgba(255, 255, 255, 0.06); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); border: 1px solid rgba(255, 255, 255, 0.18); }
.compare__cell--good { color: var(--white); border: 1px solid rgba(255, 60, 60, 0.42);
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 0, 0, 0.16), transparent 60%), rgba(255, 0, 0, 0.05); }
.compare__cell--good::before { background-color: var(--red-ui); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E"); box-shadow: 0 0 14px rgba(255, 0, 0, 0.45); }
.compare__arrow { display: grid; place-items: center; color: var(--red); }
.compare__arrow .ico { width: 20px; height: 20px; }
.compare__tag { display: none; }
/* The Draw Pages logo in the corner, under the answers (the user liked it there) */
.compare__foot { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.08fr); gap: 10px; padding-top: 8px; }
.compare__mark { grid-column: 3; justify-self: end; width: 112px; height: auto; opacity: .92; }
@media (max-width: 760px) { .compare__foot { grid-template-columns: 1fr; } .compare__mark { grid-column: 1; } }
@media (max-width: 760px) {
  .compare__head { display: none; }
  .compare__row { grid-template-columns: 1fr; gap: 4px; }
  .compare__row + .compare__row { margin-top: 8px; padding-top: 14px; border-top: 1px dashed var(--line); }
  .compare__arrow { height: 20px; }
  .compare__arrow .ico { transform: rotate(90deg); }
  .compare__cell { padding-top: 26px; }
  .compare__tag { display: block; position: absolute; left: 16px; top: 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
  .compare__cell--good .compare__tag { color: #ff8a8a; }
}

/* ---------- Cards / bento ---------- */
.card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: clamp(24px, 2.6vw, 34px); border-radius: var(--radius);
  background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.07), transparent 46%), rgba(20, 20, 22, 0.82);
  border: 1px solid var(--line);
  transition: transform .45s var(--ease), border-color .3s, box-shadow .45s var(--ease);
}
.card:hover { transform: translateY(-6px); border-color: rgba(255, 0, 0, 0.5); box-shadow: 0 30px 60px -36px rgba(255, 0, 0, 0.45); }
.card p { color: var(--muted); }
.card .chips { margin-top: auto; padding-top: 6px; }
.card__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(160deg, #26262a, #151517); border: 1px solid var(--line-strong); color: var(--white); }
.card__icon .ico { width: 26px; height: 26px; }
.card__title { font-size: clamp(22px, 2vw, 28px); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }

.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.bento__a { grid-column: span 3; grid-row: span 2; }
.bento__b { grid-column: span 3; }
.bento__c { grid-column: span 3; }
.bento__d { grid-column: span 3; }
.bento__e { grid-column: span 3; }
.bento__d { order: 4; }
.bento__e { order: 5; }
/* Example of an institutional site in the card: AI image (laptop + phone, the fictional "Lume" studio of the hero),
   18/10/2026. The frame keeps 16:10 and grows with the card; the photo covers it. */
.card__site { position: relative; flex: 1 0 auto; aspect-ratio: 16 / 10; margin-top: 18px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); background: #0b0b0c; }
.card__site img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform .8s var(--ease); }
.motion .card:hover .card__site img { transform: scale(1.03); }
.card__site-tag { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(10, 10, 11, 0.72);
  border: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); }
@media (max-width: 600px) { .card__site-tag { left: 8px; top: 8px; padding: 3px 8px; font-size: 9px; } }

.card--red { background: linear-gradient(160deg, #f01414 0%, #a80000 100%); border-color: rgba(255, 255, 255, 0.18); }
.card--red { justify-content: center; gap: 22px; }
.card--red .dot { color: var(--white); }
.bento__a .chips { margin-top: 0; }
.card--red:hover { border-color: rgba(255, 255, 255, 0.5); }
.included { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.included li { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.included .ico { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento__a { grid-column: span 2; grid-row: auto; }
  .bento__b, .bento__c, .bento__d, .bento__e { grid-column: span 1; }
  .bento__e { grid-column: span 2; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .bento > * { grid-column: auto !important; }
  .included { grid-template-columns: 1fr 1fr; }
}

/* ---------- Process: sticky stack ---------- */
.process__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 90px); align-items: start; }
.process__head { position: sticky; top: 130px; margin-bottom: 0; }
.process__head .btn { justify-self: start; }
.stack { display: grid; gap: 22px; }
.stack__card { position: sticky; top: calc(130px + var(--i, 0) * 18px); }
.stack__card:nth-child(1) { --i: 0; }
.stack__card:nth-child(2) { --i: 1; }
.stack__card:nth-child(3) { --i: 2; }
.stack__card:nth-child(4) { --i: 3; }
.stack__inner {
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: start;
  min-height: 250px; padding: clamp(26px, 3vw, 40px); border-radius: var(--radius);
  background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.08), transparent 50%), #141416;
  border: 1px solid var(--line-strong); box-shadow: 0 -20px 50px -30px rgba(0, 0, 0, 0.9);
  transform-origin: 50% 0;
  position: relative; overflow: hidden;
}
.stack__shade { position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: 0; pointer-events: none; }
/* Lights up as the card rises to its place: --lit goes 0 -> 1 on scroll (assets/js/main.js). The text keeps its normal
   colour all the time; only the border, a red light in the corner and the shadow change. Without motion: --lit 0. */
.stack__inner { --lit: 0;
  border-color: color-mix(in srgb, rgba(255, 60, 60, 0.75) calc(var(--lit) * 100%), rgba(255, 255, 255, 0.16));
  box-shadow: 0 -20px 50px -30px rgba(0, 0, 0, 0.9), 0 34px 70px -42px rgba(255, 0, 0, calc(var(--lit) * 0.55)); }
.stack__inner::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--lit);
  background: radial-gradient(85% 75% at 0% 0%, rgba(255, 0, 0, 0.16), transparent 62%); }
.stack__inner > :not(.stack__shade) { position: relative; }
/* Last step: the same dark card with a soft red light on the black (18/10/2026: the full red, bright or deep,
   left the palette and tired the eyes). Border, number and dot behave like the other cards. */
.stack__card:last-child .stack__inner {
  background: radial-gradient(120% 100% at 100% 100%, rgba(255, 0, 0, 0.16), transparent 62%),
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.06), transparent 50%), #141416; }
.stack__num { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--red); padding-top: 8px; }
.stack__title { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
.stack__inner p { color: var(--muted); max-width: 44ch; }
.stack__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); }
.stack__icon .ico { width: 24px; height: 24px; }
@media (max-width: 900px) {
  .process__layout { grid-template-columns: 1fr; row-gap: 18px; }
  /* 18/10/2026: the title "Do primeiro traço ao site no ar." stops under the header and the cards group
     right under it (before, they only grouped once the first card reached the top). The head's children
     join the layout grid, so the title can stick for the whole section; its backdrop hides the text that
     scrolls under it. The cards' top comes from --stack-top (measured by assets/js/main.js). */
  .process__head { display: contents; }
  .process__head h2 { position: sticky; top: 88px; z-index: 3; }
  .process__head h2::before { content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; translate: -50% 0;
    top: -88px; bottom: -14px; background: linear-gradient(to bottom, var(--bg) calc(100% - 14px), rgba(7, 7, 7, 0)); }
  .stack { margin-top: 22px; }
  .stack__card { top: calc(var(--stack-top, 176px) + var(--i, 0) * 14px); }
  .stack__inner { grid-template-columns: auto 1fr; min-height: 0; }
  .stack__icon { display: none; }
}

@media (min-width: 561px) and (max-width: 900px) { .process { --stack-top: 146px; } }

/* ---------- Performance features ---------- */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
/* Each cell sits on a translucent dark panel, so the blueprint grid behind the section no longer crosses the text.
   The hover keeps the panel and adds a red tint (plus the cursor glow of .spot--soft). */
.features li { padding: clamp(24px, 3vw, 38px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.035), transparent 55%), rgba(10, 10, 11, 0.5); }
.features li:hover { background: linear-gradient(rgba(255, 0, 0, 0.06), rgba(255, 0, 0, 0.06)),
  radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.035), transparent 55%), rgba(10, 10, 11, 0.5); }
.features .ico { width: 30px; height: 30px; color: var(--red); margin-bottom: 18px; }
.features h3 { font-size: 21px; font-weight: 800; margin-bottom: 8px; }
.features p { color: var(--muted); font-size: 16px; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* ---------- Audience ---------- */
.audience__layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.audience__list { border-top: 1px solid var(--line); }
.audience__list a {
  position: relative; display: grid; grid-template-columns: 56px 1fr 36px; gap: 6px 18px; align-items: center;
  padding: 30px 6px; border-bottom: 1px solid var(--line); text-decoration: none;
  transition: background-color .3s;
}
/* Hover: a red bar grows on the left and the row lights up. Nothing moves sideways, so long titles never wrap. */
.audience__list a::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px;
  background: var(--red); transform: scaleY(0); transition: transform .4s var(--ease); }
.audience__list a:hover::before, .audience__list a:focus-visible::before { transform: scaleY(1); }
.audience__num { font-family: var(--mono); font-size: 13px; color: var(--red); grid-row: span 2; align-self: start; padding-top: 10px; }
.audience__name { font-size: clamp(24px, 2.8vw, 38px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; transition: color .3s; }
.audience__desc { grid-column: 2; color: var(--muted); }
.audience__list .ico { grid-column: 3; grid-row: 1 / span 2; width: 30px; height: 30px; color: var(--faint); transition: transform .4s var(--ease), color .3s; }
.audience__list a:hover { background: linear-gradient(90deg, rgba(255, 0, 0, 0.08), transparent 70%); }
.audience__list a:hover .audience__name { color: var(--white); }
.audience__list a:hover .ico { color: var(--red); transform: translate(4px, -4px); }
@media (max-width: 900px) { .audience__layout { grid-template-columns: 1fr; } .audience__list a { grid-template-columns: 40px 1fr 28px; padding: 24px 0; } }

/* ---------- Projects ---------- */
.projects__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px; }
.project { position: relative; display: flex; flex-direction: column; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: border-color .3s, transform .45s var(--ease); }
.project:hover { border-color: rgba(255, 0, 0, 0.5); transform: translateY(-6px); }
.project__body { display: grid; gap: 12px; padding: clamp(22px, 2.6vw, 32px); }
.project__sector { font-family: var(--mono); font-size: 12.5px; color: var(--faint); letter-spacing: .02em; }

/* Cover: the real site in a browser and a phone, in 3D. Hovering (or, on touch screens, the card being
   well in view) scrolls the long screenshots inside the screens: the site "plays" without loading it.
   --tx/--ty come from assets/js/pointer.js and add a tilt to the resting angle. */
.project__cover { position: relative; aspect-ratio: 16 / 11; overflow: hidden; border-bottom: 1px solid var(--line);
  background: radial-gradient(70% 80% at 88% 8%, rgba(255, 0, 0, 0.24), transparent 62%),
    radial-gradient(60% 70% at 0% 100%, rgba(255, 0, 0, 0.1), transparent 70%), #0b0b0c; }
.project__cover::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 45%, #000 30%, transparent 85%); mask-image: radial-gradient(80% 80% at 50% 45%, #000 30%, transparent 85%); }
.cover__stage { position: absolute; inset: 0; perspective: 1400px; }
.cover__tilt { position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(calc(7deg - var(--ty, 0) * 6deg)) rotateY(calc(-10deg + var(--tx, 0) * 9deg)); }
.cover__desk { position: absolute; left: 7%; top: 13%; width: 70%; aspect-ratio: 16 / 10.8; display: flex; flex-direction: column;
  border-radius: 12px; overflow: hidden; background: #111113; border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.95); }
.cover__chrome { flex: none; display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; background: #18181b; border-bottom: 1px solid var(--line); }
.cover__chrome i { width: 7px; height: 7px; border-radius: 50%; background: #3a3a40; }
.cover__chrome i:first-child { background: var(--red); }
.cover__chrome span { margin-left: 10px; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-family: var(--mono); font-size: 10px; color: var(--faint); }
.cover__view { position: relative; flex: 1; overflow: hidden; container-type: size; }
.cover__phone { position: absolute; right: 8%; bottom: 7%; width: 19%; aspect-ratio: 9 / 18.6; padding: 4px; border-radius: 20px;
  background: #0c0c0d; border: 2px solid #2e2e33; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.95);
  transform: translateZ(70px); }
.cover__phone .cover__view { height: 100%; border-radius: 15px; }
.cover__shot { display: block; width: 100%; height: auto; transform: translateY(0); transition: transform 1.1s var(--ease); }
.motion .project:hover .cover__shot, .motion .project.is-playing .cover__shot { transform: translateY(calc(100cqh - 100%)); transition: transform 11s cubic-bezier(.45, 0, .55, 1); }
.motion .project:hover .cover__phone .cover__shot, .motion .project.is-playing .cover__phone .cover__shot { transition-duration: 9s; }
.cover__tag { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: rgba(12, 12, 13, 0.88); border: 1px solid var(--line-strong); font-family: var(--mono); font-size: 11.5px; color: var(--text); white-space: nowrap;
  transform: translateZ(110px); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.9); }
.cover__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px rgba(255, 0, 0, 0.8); }
.cover__tag--a { left: 6%; bottom: 13%; }
.cover__tag--b { left: 40%; top: 9%; }
.cover__badge { position: absolute; z-index: 2; right: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; background: var(--red-ui); color: var(--white);
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cover__hint { position: absolute; z-index: 2; left: 14px; top: 14px; display: none; padding: 6px 12px; border-radius: 999px;
  background: rgba(12, 12, 13, 0.8); border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--muted); transition: opacity .3s; }
@media (hover: hover) and (pointer: fine) { .motion .cover__hint { display: block; } .project:hover .cover__hint { opacity: 0; } }
@media (max-width: 600px) {
  .project__cover { aspect-ratio: 4 / 3.4; }
  .cover__desk { left: 5%; width: 74%; }
  .cover__phone { width: 24%; right: 5%; }
  .cover__tag--a { left: 9%; bottom: 9%; }
  .cover__tag--b { display: none; }
  .motion .cover__hint { display: none; } /* narrow window with a mouse: it would sit on the badge */
}
.project__title { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.project__body p { color: var(--muted); }
.project__actions { margin-top: 4px; }
.project__actions[hidden] { display: none; }

/* Gallery (14/11/2026, decision D-20261019-01): showcase on the left, project list on the right,
   "O próximo pode ser o seu" across the bottom. assets/js/portfolio.js swaps the showcase. */
.works { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 18px; }
.works__show .cover__stage, .works__show .cover__badge, .works__show .project__body { transition: opacity .26s ease, transform .4s var(--ease); }
.works__show.is-swapping .cover__stage, .works__show.is-swapping .cover__badge { opacity: 0; transform: scale(.985); }
.works__show.is-swapping .project__body { opacity: 0; transform: translateY(8px); }
.works__pick { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 2vw, 26px);
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.works__head { display: grid; gap: 6px; }
.works__label { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.works__hint { color: var(--faint); font-size: 15px; }
.works__list { flex: 1; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.works__list li { display: flex; scroll-margin-top: 110px; }
.work { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.015); color: inherit; text-decoration: none;
  transition: border-color .3s, background-color .3s; }
.work::before { content: ""; position: absolute; left: -1px; top: 18%; bottom: 18%; width: 3px; border-radius: 0 3px 3px 0; background: var(--red);
  transform: scaleY(0); transition: transform .4s var(--ease); }
.work:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.035); }
.work[aria-current="true"] { border-color: rgba(255, 0, 0, 0.55); background: linear-gradient(100deg, rgba(255, 0, 0, 0.12), rgba(255, 0, 0, 0.02) 70%); }
.work[aria-current="true"]::before { transform: scaleY(1); }
.work__thumb { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #0b0b0c; }
.work__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .8s var(--ease); }
.work:hover .work__thumb img { transform: scale(1.05); }
.work__text { display: grid; gap: 4px; align-content: center; min-width: 0; }
.work__n { font-family: var(--mono); font-size: 12px; color: var(--red); }
.work__name { font-size: clamp(16px, 1.35vw, 19px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--text); }
.work__meta { font-size: 13.5px; color: var(--faint); line-height: 1.35; }
.work__state { justify-self: start; margin-top: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.work[aria-current="true"] .work__state { border-color: transparent; background: var(--red-ui); color: var(--white); }
.works__next { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: clamp(18px, 3vw, 40px); padding: clamp(24px, 3vw, 40px) clamp(24px, 3.4vw, 48px);
  border-radius: var(--radius); border: 1px dashed var(--line-strong); overflow: hidden;
  background: radial-gradient(60% 140% at 100% 0%, rgba(255, 0, 0, 0.14), transparent 70%); }
.works__next-mark { width: 64px; height: auto; }
.works__next-text { display: grid; gap: 8px; }
.works__next-text p { color: var(--muted); }
@media (max-width: 1100px) and (min-width: 901px) {
  .work { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 900px) {
  .works { grid-template-columns: minmax(0, 1fr); }
  .works__show { scroll-margin-top: 90px; }
  /* phone and tablet: the list slides sideways under the showcase */
  .works__list { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin: 0 calc(clamp(20px, 2vw, 26px) * -1); padding: 0 clamp(20px, 2vw, 26px) 4px; scrollbar-width: none; }
  .works__list::-webkit-scrollbar { display: none; }
  .works__list li { flex: 0 0 min(64%, 280px); scroll-snap-align: start; }
  .work__name { font-size: 16px; }
  .work { grid-template-columns: 1fr; align-content: start; gap: 10px; }
  .works__next { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .works__next-mark { width: 52px; }
}

/* ---------- Team ---------- */
.team__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1040px; margin-inline: auto; }
.member { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: border-color .3s, transform .45s var(--ease); }
.member:hover { border-color: rgba(255, 0, 0, 0.5); transform: translateY(-6px); }
.member__photo { position: relative; min-height: 300px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(90% 70% at 50% 100%, rgba(255, 0, 0, 0.35), transparent 70%), linear-gradient(180deg, #19191c, #0c0c0d); }
.member__photo picture { position: absolute; inset: 0; }
.member__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.motion .member:hover .member__photo img { transform: scale(1.04); }
.member__initials { position: relative; z-index: 1; font-size: 84px; font-weight: 800; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.5); }
.member__slash { position: absolute; width: 26px; height: 140%; border-radius: 999px; background: linear-gradient(180deg, transparent, rgba(255, 0, 0, 0.8), transparent); transform: rotate(28deg); }
.member__body { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.6vw, 32px); }
.member__role { font-family: var(--mono); font-size: 12.5px; color: var(--red); }
.member__name { font-size: clamp(22px, 2vw, 27px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.member__body > p:not(.member__role) { color: var(--muted); font-size: 16px; }
@media (max-width: 960px) { .team__grid { grid-template-columns: 1fr; max-width: 620px; } }
@media (max-width: 520px) { .member { grid-template-columns: 1fr; } .member__photo { min-height: 0; aspect-ratio: 4 / 4.4; } }

/* ---------- FAQ ---------- */
.faq__layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq__layout .section__head { position: sticky; top: 130px; }
.faq__list { border-top: 1px solid var(--line); }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 4px; cursor: pointer; list-style: none;
  font-size: clamp(18px, 1.6vw, 21px); font-weight: 700; transition: color .2s; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary:hover { color: var(--white); }
.faq__icon { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color .3s, border-color .3s, transform .4s var(--ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; background: currentColor; transition: transform .4s var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__list details[open] .faq__icon { background: var(--red-ui); border-color: var(--red-ui); transform: rotate(180deg); }
.faq__list details[open] .faq__icon::after { transform: rotate(0deg); }
.faq__list details p { padding: 0 60px 26px 4px; color: var(--muted); max-width: 70ch; }
@media (max-width: 900px) { .faq__layout { grid-template-columns: 1fr; } .faq__layout .section__head { position: static; } .faq__list details p { padding-right: 4px; } }

/* ---------- Contact ---------- */
.contact { overflow: hidden; }
.contact__bg { position: absolute; inset: 0; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 25% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 25% 50%, #000 20%, transparent 75%); }
.contact__bg .hero__slash--a { right: auto; left: 18%; top: -30%; }
.contact__layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(32px, 6vw, 90px); align-items: center; }
.contact__copy { display: grid; gap: 20px; }
.contact__title { font-size: clamp(44px, 6vw, 88px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 500; }
.contact__points { display: grid; gap: 10px; margin-top: 6px; }
.contact__points li { display: flex; align-items: center; gap: 10px; color: #d8d8da; font-weight: 600; }
.contact__points .ico { color: var(--red); }
@media (max-width: 960px) { .contact__layout { grid-template-columns: 1fr; } }

.form { position: relative; padding: clamp(24px, 3vw, 38px); border-radius: var(--radius); background: var(--white); color: var(--ink);
  box-shadow: 0 50px 90px -40px rgba(255, 0, 0, 0.45), 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.form__steps { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.form__steps span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #d9d9dc; font-family: var(--mono); font-size: 13px; font-weight: 700; color: #8b8b90; transition: background-color .3s, border-color .3s, color .3s; }
.form__steps span.is-active { background: var(--red-ui); border-color: var(--red-ui); color: var(--white); }
.form__steps i { flex: 1; height: 1.5px; background: #e2e2e5; }
.form__step { display: none; border: 0; margin: 0; padding: 0; gap: 16px; }
.form__step.is-active { display: grid; }
.no-js .form__step { display: grid; margin-bottom: 18px; }
.form__legend { padding: 0; margin-bottom: 4px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.field { display: grid; gap: 6px; }
.field label, .field__label { font-size: 14px; font-weight: 700; color: #2a2a2e; }
.field__opt { font-weight: 500; color: #8b8b90; }
.field input, .field textarea {
  width: 100%; padding: 14px 18px; border-radius: 14px; border: 1.5px solid #e1e1e4; background: #f7f7f8; color: var(--ink);
  font-size: 16px; transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: #9d9da3; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--red-ui); background: var(--white); box-shadow: 0 0 0 4px rgba(224, 7, 7, 0.12); }
.field.is-invalid input { border-color: var(--red-ui); background: #fff5f5; }
.field__error { display: none; font-size: 13px; font-weight: 600; color: #c00000; }
.field.is-invalid .field__error, .field__error.is-visible { display: block; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices label { cursor: pointer; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1.5px solid #e1e1e4; background: #f7f7f8; font-size: 14px; font-weight: 700; color: #3a3a3f; transition: all .2s; }
.choices input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }
.choices input:focus-visible + span { outline: 2px solid var(--red-ui); outline-offset: 2px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: #4a4a50; cursor: pointer; }
.consent input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--red-ui); }
.consent a { color: var(--red-ui); font-weight: 700; }
.form__row { display: flex; gap: 10px; }
.form__row .btn--primary { flex: 1; }
.form__done { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 30px 10px; }
.form__done[hidden] { display: none; }
.form__done img { width: 56px; filter: brightness(0) saturate(100%); }
.form__done h3 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.form__done p { color: #55555b; max-width: 36ch; }

/* ---------- Footer ---------- */
.footer { position: relative; border-top: 1px solid var(--line); background: var(--bg); padding-top: clamp(56px, 7vw, 90px); }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 32px; padding-bottom: 48px; }
.footer__brand { display: grid; gap: 14px; max-width: 360px; }
.footer__brand img { width: 220px; height: auto; }
.footer__brand p { color: var(--muted); }
.footer__contact { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 13px; color: var(--faint); }
.footer__contact a { color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(255, 0, 0, 0.5); }
.footer__contact a:hover { color: var(--white); border-color: var(--red); }
.form__done [data-done-link][hidden], .form__steps[hidden] { display: none; }
.footer__nav { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 48px; }
.footer__nav a { color: #d6d6d8; text-decoration: none; font-weight: 600; transition: color .2s; }
.footer__nav a:hover { color: var(--red); }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-block: 24px 32px; border-top: 1px solid var(--line); font-size: 14px; color: var(--faint); }
.footer__bottom a { color: var(--muted); }
.footer__top-link { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; }
.footer__top-link .ico { width: 34px; height: 34px; padding: 8px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color .3s, transform .3s var(--ease); }
.footer__top-link:hover .ico { background: var(--red-ui); transform: translateY(-3px); }
/* phones: everything centred, the logo on top (the user's choice, 18/10/2026) */
@media (max-width: 760px) {
  .footer__top { flex-direction: column; align-items: center; text-align: center; }
  .footer__brand { justify-items: center; }
  .footer__contact { justify-items: center; text-align: center; }
  .footer__nav { justify-content: center; justify-items: center; gap: 12px 40px; }
  .footer__bottom { flex-direction: column; text-align: center; gap: 14px; }
  .footer__top-link { margin-left: 0; }
  .footer__legal { justify-content: center; }
}

/* =================================================================
   MOUSE EFFECTS (reference: vixcapta.com.br, rebuilt lighter)
   assets/js/pointer.js writes --hx/--hy on .hero (-1..1) and --mx/--my on the hovered .spot,
   only with a mouse and motion allowed. Without it everything rests at the centre.
   ================================================================= */
/* Hero: the film tilts with the mouse (each .film__part gets the same transform, see .film: a transform
   on a wrapper would stop the screen blend) and the red glow follows. */
.hero__glow { translate: calc(var(--hx, 0) * 3vw) calc(var(--hy, 0) * 2.4vw); }

/* Cursor glow: a soft brand light follows the mouse inside the card and lights the border near it.
   Keyboard focus gets the same light (at the top). */
.spot { --spot: rgba(255, 30, 30, 0.15); --spot-edge: rgba(255, 92, 92, 0.85); position: relative; isolation: isolate; }
.spot::before, .spot::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .35s var(--ease); }
.spot::before { inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--spot), transparent 65%); }
.spot::after { inset: -1px; padding: 1px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), var(--spot-edge), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.spot:hover::before, .spot:hover::after, .spot:focus-within::before, .spot:focus-within::after { opacity: 1; }
.spot--soft::after { content: none; }
/* cards that clip their content (overflow: hidden) draw the light ring just inside the border */
.project.spot::after, .member.spot::after, .works__pick.spot::after, .works__next.spot::after { inset: 0; }
.card--red.spot { --spot: rgba(255, 255, 255, 0.16); --spot-edge: rgba(255, 255, 255, 0.7); }

/* ---------- Reduced motion: everything static ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .btn:hover, .card:hover, .project:hover, .member:hover { transform: none; }
}

/* ---------- Simple text page (privacy) ---------- */
.page { padding-top: calc(var(--header-h) + 90px); padding-bottom: 100px; }
.page__body { max-width: 760px; display: grid; gap: 18px; }
.page__body h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; }
.page__body h2 { font-size: 22px; font-weight: 800; margin-top: 18px; }
.page__body p, .page__body li { color: var(--muted); }
/* Legal pages (privacy, terms), 19/10/2026 */
.page__body h3 { font-size: 17px; font-weight: 700; margin-top: 8px; color: var(--text); }
.page__body ul { display: grid; gap: 8px; padding-left: 1.2em; list-style: disc; }
.page__body li::marker { color: var(--red); }
.page__body strong { color: var(--text); font-weight: 700; }
.page__body a { color: var(--text); text-underline-offset: 3px; }
.page__lead { font-size: 18px; }
/* Urbanist has no ordinal sign: "nº" came out as "no". The sign uses the system font. */
.ord { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.header__back { margin-left: auto; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.page__body ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; }
.page__note { padding: 14px 18px; border-radius: 14px; border: 1px dashed rgba(255, 0, 0, 0.5); background: var(--red-soft); color: #ffd6d6; font-size: 15px; }