:root {
  --paper: #f5eee2; --paper-2: #ece2d1; --ink: #1d1a16; --ink-2: #5b544b; --line: #d9ccb6;
  --fox: #e2672b; --fox-deep: #b9481a; --night: #0f1d18; --night-2: #18302a; --moon: #f6e7c4;
  --card: #fffaf2; --shadow: 0 24px 60px -28px rgba(40, 25, 10, .45);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12110f; --paper-2: #1b1916; --ink: #f2eadc; --ink-2: #b8ad9c; --line: #342f28;
    --card: #1e1b17; --shadow: 0 24px 60px -30px rgba(0, 0, 0, .8); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #12110f; --paper-2: #1b1916; --ink: #f2eadc; --ink-2: #b8ad9c; --line: #342f28;
  --card: #1e1b17; --shadow: 0 24px 60px -30px rgba(0, 0, 0, .8); color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.1; margin: 0; font-optical-sizing: auto; }
h2 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 650; letter-spacing: -.01em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* top bar */
.bar { position: fixed; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px clamp(16px, 4vw, 40px); color: #f6efe3; transition: background .3s, box-shadow .3s; }
.bar.solid { background: rgba(15, 29, 24, .92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 650 1.15rem var(--serif); }
.bar nav { display: flex; align-items: center; gap: clamp(10px, 3vw, 28px); font-size: .95rem; }
.bar nav a { text-decoration: none; opacity: .85; } .bar nav a:hover { opacity: 1; }
.lang select { font: inherit; color: inherit; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px; padding: 6px 10px; min-height: 40px; cursor: pointer; }
.lang option { color: #1d1a16; }
@media (max-width: 560px) { .bar nav a { display: none; } }

/* hero */
.hero { position: relative; overflow: hidden; color: #f6efe3; text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, var(--night-2) 0%, var(--night) 60%, #0a1411 100%);
  padding: clamp(120px, 18vh, 180px) 16px clamp(110px, 16vh, 160px); }
.sky { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(1.5px 1.5px at 12% 22%, #fff9 50%, transparent 51%), radial-gradient(1px 1px at 28% 64%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 12%, #fffa 50%, transparent 51%), radial-gradient(1px 1px at 61% 38%, #fff7 50%, transparent 51%),
    radial-gradient(2px 2px at 73% 18%, #fffb 50%, transparent 51%), radial-gradient(1px 1px at 86% 52%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 28%, #fff9 50%, transparent 51%), radial-gradient(1px 1px at 6% 74%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 80%, #fff5 50%, transparent 51%), radial-gradient(1.5px 1.5px at 35% 40%, #fff7 50%, transparent 51%);
  animation: twinkle 6s ease-in-out infinite alternate; }
.moon { position: absolute; top: 12%; right: clamp(6%, 12vw, 16%); width: clamp(60px, 9vw, 110px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8e6, var(--moon) 60%, #e4cf9f); box-shadow: 0 0 80px 10px rgba(246, 231, 196, .18); }
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }
.hero-in { position: relative; max-width: 860px; margin: 0 auto; }
.hero-fox { width: clamp(110px, 16vw, 168px); height: auto; margin: 0 auto 22px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45));
  animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.kicker { margin: 0 0 14px; letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; color: #e9b98f; }
.kicker span:first-child { font-weight: 700; color: var(--fox); }
.hero h1 { font-size: clamp(2.5rem, 7.4vw, 5.2rem); font-weight: 700; letter-spacing: -.02em; animation: rise .9s .08s cubic-bezier(.2, .8, .2, 1) both; }
.lead { max-width: 640px; margin: 22px auto 34px; font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: #d8d0c2; animation: rise .9s .16s both; }
.hills { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(50px, 8vw, 110px); fill: var(--paper); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px;
  font: 650 1.02rem var(--sans); text-decoration: none; background: var(--accent, var(--fox)); color: var(--on-accent, #fff);
  box-shadow: 0 10px 24px -12px var(--accent, var(--fox)); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-2px); } .btn:active { transform: none; }
.btn:focus-visible, .lang select:focus-visible, .mail:focus-visible { outline: 3px solid #f2b37f; outline-offset: 3px; }
.btn-hero { animation: rise .9s .24s both; }
.btn-off { background: transparent; color: inherit; border: 2px dashed currentColor; box-shadow: none; opacity: .7; }

/* projects */
.projects { max-width: 1160px; margin: 0 auto; padding: clamp(40px, 8vw, 90px) 16px; }
.section-head { text-align: center; margin-bottom: clamp(36px, 6vw, 64px); }
.section-head p { margin: 10px 0 0; color: var(--ink-2); }
.app { --bg: var(--card); --fg: var(--ink); --muted: var(--ink-2);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(24px, 5vw, 64px);
  background: var(--bg); color: var(--fg); border-radius: 32px; padding: clamp(22px, 4vw, 52px); margin-bottom: clamp(22px, 4vw, 40px);
  box-shadow: var(--shadow); overflow: hidden; position: relative; }
.app:nth-of-type(even) .art { order: 2; }
.app .info > p { color: var(--muted); font-size: 1.08rem; margin: 14px 0 22px; max-width: 34em; }
.title { display: flex; align-items: center; gap: 16px; }
.title img, .icon-q { width: 56px; height: 56px; border-radius: 16px; flex: none; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); object-fit: cover; }
.title h3 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 680; }
.tag { margin: 4px 0 0; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.jp { font-size: .7em; color: var(--accent); font-weight: 700; }
.status { display: inline-block; margin-top: 18px; padding: 4px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700;
  letter-spacing: .04em; border: 1.5px solid currentColor; color: var(--accent); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.note { font-size: .88rem; color: var(--muted); margin: 12px 0 0; }
.art img { margin: 0 auto; }
.phone img { width: min(270px, 74%); border-radius: 30px; border: 8px solid #1b1814; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .65); transform: rotate(-2.5deg); }
.app:nth-of-type(even) .phone img { transform: rotate(2.5deg); }
.stage img { border-radius: 24px; width: 100%; }
.card img { width: min(280px, 72%); border-radius: 18px; transform: rotate(-3deg); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); }
.blueprint { color: #7fd3ff; background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(127, 211, 255, .12) 23px 24px),
  repeating-linear-gradient(90deg, transparent 0 23px, rgba(127, 211, 255, .12) 23px 24px), #0e2236; border-radius: 22px; padding: 22px; }
.icon-q { display: grid; place-items: center; background: #0e2236; color: #7fd3ff; font: 700 1.8rem var(--serif); }

/* each project keeps its own look */
.app-receitas { --bg: #f4ede0; --fg: #2e2a1f; --muted: #645c4b; --accent: #c9592a; }
.app-bicharada { --bg: #e9efe4; --fg: #1d2b22; --muted: #4f5e53; --accent: #2f6b47; }
.app-sumo { --bg: #f3e8d4; --fg: #1d1a16; --muted: #5d5244; --accent: #c8102e; }
.app-tricky { --bg: #15120f; --fg: #f1e6cf; --muted: #b9aa8b; --accent: #d4ae63; --on-accent: #15120f;
  background-image: radial-gradient(80% 120% at 0% 0%, rgba(164, 38, 32, .35), transparent 60%); }
.app-tricky::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(212, 174, 99, .35); border-radius: 24px; pointer-events: none; }
.app-engine { --bg: #0b1828; --fg: #e6f4ff; --muted: #9cb7cc; --accent: #7fd3ff; }

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; text-align: left; }
  .app:nth-of-type(even) .art { order: 0; }
  .phone img { width: min(240px, 70%); }
}

/* how */
.how { max-width: 1160px; margin: 0 auto; padding: clamp(30px, 6vw, 70px) 16px; text-align: center; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; text-align: left; }
.how-grid > div { border-top: 2px solid var(--ink); padding-top: 18px; }
.num { font: 700 .9rem var(--sans); color: var(--fox); letter-spacing: .1em; }
.how h3 { font-size: 1.5rem; margin: 8px 0; }
.how p { margin: 0; color: var(--ink-2); }
@media (max-width: 760px) { .how-grid { grid-template-columns: 1fr; } }

/* about */
.about { padding: clamp(30px, 6vw, 70px) 16px; }
.about-in { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 60px); align-items: center; }
.about img { border-radius: 24px; box-shadow: var(--shadow); }
.about p { font-size: clamp(1.1rem, 2.2vw, 1.35rem); color: var(--ink-2); font-family: var(--serif); }
@media (max-width: 760px) { .about-in { grid-template-columns: 1fr; } }

/* contact */
.contact { text-align: center; padding: clamp(50px, 9vw, 110px) 16px; background: var(--night); color: #f6efe3; margin-top: clamp(30px, 6vw, 60px); }
.contact p { color: #cfc6b6; margin: 12px 0 26px; }
.mail { display: inline-block; font: 650 clamp(1.4rem, 5vw, 2.6rem) var(--serif); color: var(--fox); text-decoration: none;
  border-bottom: 3px solid currentColor; padding-bottom: 4px; word-break: break-word; }
.mail:hover { color: #f2925d; }

.foot { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; padding: 22px 16px 30px; font-size: .9rem;
  background: var(--night); color: #a99f8f; border-top: 1px solid rgba(255, 255, 255, .06); }
.foot a { color: #e6dccb; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.reveal.in, .no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* privacy page */
.doc { max-width: 720px; margin: 0 auto; padding: 130px 16px 80px; }
.doc h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); margin-bottom: 24px; }
.doc p { color: var(--ink-2); }
.doc .back { display: inline-block; margin-top: 30px; color: var(--fox); font-weight: 650; }
@media (max-width: 760px) { .about img { max-height: 360px; width: 100%; object-fit: cover; object-position: 50% 0; } }