/* ══════════════════════════════════════════════════════════════════════════
   atti.work — living pitch · "o scroll é o voo"
   Forked from attiwork• marketing-site UI kit (globals.css canonical source).
   Dark→light→dark themed by a single JS-driven daylight value.
   Square corners · hairline borders · single teal · lowercase display.
═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&family=Titillium+Web:wght@300;400;600;700;900&display=swap');

:root {
  --teal: #11DDAD;
  --teal-h: #21F5C3;
  --teal-ink: #07916F;            /* darker teal for text/links on light */

  /* Themed tokens — JS overrides these every frame (night defaults here) */
  --bg:  #080A0E;
  --bg2: #0D1117;
  --bg3: #121820;
  --ink: #E8EDF2;
  --mid: #C3CCD6;
  --dim: #6B7A8D;
  --bsoft:   rgba(232,237,242,0.06);
  --bord:    rgba(232,237,242,0.14);
  --bstrong: rgba(232,237,242,0.24);
  --day: 0;                        /* 0 night · 1 day */

  --font: "Titillium Web", ui-sans-serif, system-ui, sans-serif;
  --body: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", monospace;

  --maxw: 1180px;
  --lift: translate(-2px,-2px);
  --lift-sh: 3px 3px 0 0 rgba(17,221,173,0.24);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 18px;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background 0.05s linear;
}
@media (max-width: 640px){ body { font-size: 16px; } }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(17,221,173,0.28); color: #fff; }

/* ─── Sky backdrop (fixed, behind everything) ─────────────────────────── */
.sky { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.sky__night, .sky__day { position: absolute; inset: 0; }
.sky__night {
  background:
    radial-gradient(ellipse 80% 50% at 75% 8%, rgba(17,221,173,0.05), transparent 60%),
    radial-gradient(ellipse 70% 60% at 12% 95%, rgba(17,221,173,0.04), transparent 55%),
    var(--bg);
}
.sky__day {
  opacity: var(--day);
  background: linear-gradient(to bottom, #c9dde9 0%, #e2ecf2 34%, #F5F6F8 68%, #EEF0F2 100%);
}
.sky__sun {
  position: absolute; left: 50%; top: calc(88% - var(--day) * 60%);
  width: 38vmin; height: 38vmin; transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.4) 26%, transparent 62%);
  opacity: calc(var(--day) * 0.9);
  filter: blur(1px);
}
.sky__sun::after {
  content: ""; position: absolute; inset: -45%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,176,92,0.6) 0%, rgba(224,112,31,0.28) 36%, transparent 70%);
  opacity: calc((var(--dawn, 0) + var(--dusk, 0)) * 1.2);
}
.sky__horizon {
  position: absolute; left: 0; right: 0; top: 64%; height: 1px;
  background: linear-gradient(to right, transparent 2%, color-mix(in oklab, var(--ink) 36%, transparent) 22% 78%, transparent 98%);
  opacity: calc(0.3 - var(--day) * 0.16 + (var(--dawn, 0) + var(--dusk, 0)) * 0.5);
}
.sky__dawn {
  position: absolute; inset: 0; opacity: var(--dawn, 0);
  background:
    radial-gradient(90% 38% at 50% 102%, rgba(255,255,255,0.55) 0%, rgba(223,234,246,0.4) 30%, transparent 70%),
    linear-gradient(to top, rgba(28,74,134,0.78) 0%, rgba(60,110,172,0.55) 16%, rgba(111,159,208,0.34) 34%, rgba(190,214,238,0.16) 52%, transparent 72%);
}
.sky__dusk {
  position: absolute; inset: 0; opacity: var(--dusk, 0);
  background:
    radial-gradient(80% 34% at 50% 102%, rgba(255,176,92,0.5) 0%, rgba(224,112,31,0.32) 34%, transparent 72%),
    linear-gradient(to top, rgba(22,10,8,0.92) 0%, rgba(94,29,14,0.78) 10%, rgba(176,64,26,0.55) 24%, rgba(224,112,31,0.36) 40%, rgba(232,160,80,0.18) 55%, transparent 74%);
}
.sky__clouds {
  position: absolute; inset: -12% -30%; opacity: calc(var(--day) * 0.7);
  background:
    radial-gradient(42% 16% at 16% 30%, rgba(255,255,255,0.9), transparent 70%),
    radial-gradient(50% 20% at 84% 22%, rgba(255,255,255,0.75), transparent 72%),
    radial-gradient(36% 14% at 36% 58%, rgba(255,255,255,0.55), transparent 70%);
  filter: blur(22px);
  animation: clouds-a 140s ease-in-out infinite alternate;
}
.sky__clouds2 {
  position: absolute; inset: -12% -30%; opacity: calc(var(--day) * 0.45);
  background:
    radial-gradient(58% 22% at 60% 78%, rgba(255,255,255,0.8), transparent 74%),
    radial-gradient(34% 14% at 24% 86%, rgba(255,255,255,0.6), transparent 70%);
  filter: blur(26px);
  animation: clouds-b 200s ease-in-out infinite alternate;
}
@keyframes clouds-a { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
@keyframes clouds-b { from { transform: translateX(2.5%); } to { transform: translateX(-2.5%); } }
@media (prefers-reduced-motion: reduce){ .sky__clouds, .sky__clouds2 { animation: none; } }
.sky__stars {
  position: absolute; inset: -10% 0 0; opacity: calc(1 - var(--day) * 1.4);
  transform: translateY(calc(var(--py, 0) * -0.018px));
  background-image:
    radial-gradient(circle 1px at 8% 12%, rgba(232,237,242,0.7), transparent 2px),
    radial-gradient(circle 1px at 22% 34%, rgba(232,237,242,0.35), transparent 2px),
    radial-gradient(circle 1px at 31% 8%, rgba(232,237,242,0.5), transparent 2px),
    radial-gradient(circle 1px at 44% 22%, rgba(232,237,242,0.3), transparent 2px),
    radial-gradient(circle 1px at 57% 6%, rgba(232,237,242,0.55), transparent 2px),
    radial-gradient(circle 1px at 64% 30%, rgba(232,237,242,0.3), transparent 2px),
    radial-gradient(circle 1px at 73% 14%, rgba(232,237,242,0.6), transparent 2px),
    radial-gradient(circle 1px at 84% 40%, rgba(232,237,242,0.3), transparent 2px),
    radial-gradient(circle 1px at 92% 10%, rgba(232,237,242,0.5), transparent 2px),
    radial-gradient(circle 1px at 15% 62%, rgba(232,237,242,0.28), transparent 2px),
    radial-gradient(circle 1px at 38% 76%, rgba(232,237,242,0.32), transparent 2px),
    radial-gradient(circle 1px at 52% 58%, rgba(232,237,242,0.24), transparent 2px),
    radial-gradient(circle 1px at 70% 70%, rgba(232,237,242,0.3), transparent 2px),
    radial-gradient(circle 1px at 88% 64%, rgba(232,237,242,0.26), transparent 2px),
    radial-gradient(circle 1.5px at 49% 38%, rgba(17,221,173,0.4), transparent 2.5px);
}
.sky__scan {
  position: absolute; left: 0; right: 0; height: 1px; top: 20%;
  background: linear-gradient(to right, transparent 5%, rgba(17,221,173,0.16), transparent 95%);
  opacity: calc(1 - var(--day) * 0.7);
  animation: sky-scan 13s ease-in-out infinite;
}
@keyframes sky-scan { 0%{top:14%;opacity:0} 10%{opacity:1} 85%{opacity:0.35} 100%{top:84%;opacity:0} }
.grid-overlay {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--bsoft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bsoft) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: calc(0.75 - var(--day) * 0.3);
  transform: translateY(calc(var(--py, 0) * -0.04px));
  mask-image: radial-gradient(120% 100% at 50% 40%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, black 30%, transparent 100%);
}

/* ─── Wordmark ────────────────────────────────────────────────────────── */
.brand { display: inline-flex; align-items: baseline; gap: 1px; font-family: var(--font); font-weight: 700; letter-spacing: -0.05em; text-transform: lowercase; color: var(--ink); }
.brand__dot { display: inline-block; width: 0.24em; height: 0.24em; border-radius: 50%; background: var(--teal); margin-left: 0.05em; margin-bottom: -0.02em; box-shadow: 0 0 10px 0 rgba(17,221,173,0.30); flex-shrink: 0; }

/* ─── Cursor dot ──────────────────────────────────────────────────────── */
.cursor-dot { position: fixed; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px 2px rgba(17,221,173,0.45); transform: translate(-50%,-50%); pointer-events: none; z-index: 9999; transition: opacity 0.2s ease; mix-blend-mode: normal; }
@media (hover: none) { .cursor-dot { display: none; } }

/* ─── HUD chrome (fixed, functional) ──────────────────────────────────── */
.hud { display: none; }

/* cockpit bar: instrument strip under the header */
.cb { position: relative; border-top: 1px solid var(--bsoft); font-family: var(--mono); }
.cb__in { max-width: 1320px; margin: 0 auto; padding: 0.42rem clamp(1rem,3vw,3rem); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.cb__phase { display: inline-flex; align-items: center; gap: 0.5rem; }
.cb__phase i { font-style: normal; color: var(--teal); font-size: 0.6rem; width: 0.7rem; }
.cb__phase b { font-weight: 600; color: var(--mid); }
.cb__chapter { position: absolute; left: 50%; transform: translateX(-50%); color: var(--dim); white-space: nowrap; display: inline-flex; align-items: center; gap: 0.6rem; }
.cb__chapter::before, .cb__chapter::after { content: ""; width: 1.4rem; height: 1px; background: var(--bsoft); }
.cb__chapter b { font-weight: 600; color: var(--mid); }
.cb__stats { display: inline-flex; gap: 1.5rem; }
.cb__stats b { font-weight: 500; color: var(--mid); font-variant-numeric: tabular-nums; }
.cb__stat--alt b { display: inline-block; min-width: 10.5ch; }
.cb__prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform: scaleX(var(--prog, 0)); transform-origin: left; background: linear-gradient(to right, color-mix(in oklab, var(--teal) 55%, transparent), var(--teal)); box-shadow: 0 0 8px rgba(17,221,173,0.35); pointer-events: none; }
@media (max-width: 760px){
  .cb__in { gap: .7rem; letter-spacing: .12em; }
  .cb__chapter { position: static; transform: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; justify-content: center; }
  .cb__chapter::before, .cb__chapter::after { display: none; }
  .cb__stat--alt { display: none; }
}

/* progress flight-line (removed — tape + readout convey progress) */

/* ─── Header ──────────────────────────────────────────────────────────── */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 100; backdrop-filter: blur(14px); background: color-mix(in oklab, var(--bg) 62%, transparent); border-bottom: 1px solid transparent; transition: background 0.1s linear, border-color 0.2s ease; }
.hd.scrolled { background: color-mix(in oklab, var(--bg) 90%, transparent); border-bottom-color: var(--bsoft); }
.hd__in { max-width: 1320px; margin: 0 auto; padding: 1rem clamp(1rem,3vw,3rem); display: flex; align-items: center; gap: 1.5rem; max-height: 90px; opacity: 1; overflow: hidden; transition: max-height 0.32s cubic-bezier(0.22,0.61,0.36,1), opacity 0.22s ease, padding 0.32s cubic-bezier(0.22,0.61,0.36,1); }
.hd.scrolled .hd__in { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; }
.hd.scrolled .hd__drawer { display: none; }
.hd__brand { font-size: 1.3rem; }
.hd__nav { display: none; margin-left: auto; gap: 1.7rem; align-items: center; }
@media (min-width: 980px){ .hd__nav { display: inline-flex; } }
.hd__link { position: relative; white-space: nowrap; font-family: var(--font); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); transition: color 0.18s ease; }
.hd__link::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background: var(--teal); transform: scaleX(0); transform-origin:left; transition: transform 0.2s ease; }
.hd__link:hover { color: var(--ink); }
.hd__link:hover::after, .hd__link.active::after { transform: scaleX(1); }
.hd__link.active { color: var(--ink); }
.hd__lang { display: inline-flex; border: 1px solid var(--bord); font-family: var(--mono); }
.hd__lang button { background: transparent; border: none; color: var(--dim); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; padding: 0.35rem 0.55rem; cursor: pointer; text-transform: uppercase; transition: color 0.15s ease, background 0.15s ease; }
.hd__lang button.on { background: var(--teal); color: #06241d; }
.hd__cta { display: none; align-items: center; gap: 0.4rem; padding: 0.6rem 1rem; font-family: var(--font); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); background: transparent; border: 1px solid var(--bord); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease; }
.hd__cta svg { width: 15px; height: 15px; }
@media (min-width: 980px){ .hd__cta { display: inline-flex; } }
.hd__cta:hover { transform: var(--lift); box-shadow: var(--lift-sh); border-color: var(--teal); color: var(--teal); }
.hd__toggle { display: inline-flex; align-items:center; justify-content:center; margin-left: auto; width: 2.6rem; height: 2.6rem; background: transparent; border: 1px solid var(--bord); color: var(--ink); cursor: pointer; }
@media (min-width: 980px){ .hd__toggle { display: none; } }
.hd__toggle span, .hd__toggle span::before, .hd__toggle span::after { content:""; display:block; width:18px; height:1.5px; background: var(--ink); transition: transform 0.2s ease, opacity 0.2s ease; }
.hd__toggle span::before { transform: translateY(-6px); }
.hd__toggle span::after { transform: translateY(4.5px); }
.hd__toggle.open span { background: transparent; }
.hd__toggle.open span::before { transform: rotate(45deg); }
.hd__toggle.open span::after { transform: rotate(-45deg); }
.hd__drawer { overflow: hidden; max-height: 0; background: color-mix(in oklab, var(--bg) 96%, transparent); transition: max-height 0.32s cubic-bezier(0.22,0.61,0.36,1); }
.hd__drawer.open { max-height: 90vh; border-top: 1px solid var(--bsoft); }
.hd__drawer-nav { display: flex; flex-direction: column; padding: 1.25rem clamp(1rem,3vw,3rem); gap: 0; }
.hd__drawer-link { padding: 0.9rem 0; border-bottom: 1px solid var(--bsoft); font-family: var(--font); font-size: 1rem; font-weight: 600; text-transform: lowercase; color: var(--ink); }

/* ─── Section scaffold ────────────────────────────────────────────────── */
.sec { position: relative; padding: clamp(5rem, 11vh, 9rem) clamp(1.25rem, 4vw, 3rem); border-top: 1px solid var(--bsoft); }
.sec__in { position: relative; width: 100%; max-width: var(--maxw); margin: 0 auto; }
.sec__head { margin: 0 0 clamp(2.5rem, 5vw, 4rem); max-width: 60rem; }
.eyebrow { margin: 0 0 1.1rem; display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); }
.eyebrow::before { content:""; width: 1.6rem; height: 1px; background: var(--teal); }
.sec__title { margin: 0; font-family: var(--font); font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; text-transform: lowercase; color: var(--ink); text-wrap: balance; }
.sec__intro { margin: 1.6rem 0 0; max-width: 50rem; font-size: clamp(1.12rem, 1.7vw, 1.4rem); line-height: 1.6; color: var(--mid); text-wrap: pretty; }
.lead-em { color: var(--ink); }

/* generic chip */
.chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.7rem; border: 1px solid var(--bord); border-radius: 2px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); }
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }

/* ─── Hero ────────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100dvh; display: flex; align-items: center; padding: clamp(7rem,13vh,10rem) clamp(1.25rem,4vw,3rem) clamp(6rem,12vh,7rem); overflow: hidden; }
.hero__slab { position: absolute; right: -16vw; top: -10vh; width: 56vw; height: 72vh; z-index: 0; background: linear-gradient(148deg, rgba(17,221,173,0.05), rgba(255,255,255,0.015) 60%, transparent); border: 1px solid rgba(17,221,173,0.08); transform: rotate(-11deg); pointer-events: none; }
.hero__in { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 920px){ .hero__in { grid-template-columns: 1.25fr 0.85fr; gap: 3.5rem; } }
.hero__eyebrow { margin: 0 0 1.5rem; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal); display: inline-flex; align-items: center; gap: 0.6rem; }
.hero__eyebrow::before { content:""; width: 2rem; height: 1px; background: var(--teal); }
.hero__headline { margin: 0 0 1.7rem; max-width: 15ch; font-family: var(--font); font-size: clamp(2.7rem, 5.8vw, 4.9rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; text-transform: lowercase; color: var(--ink); text-wrap: balance; }
.hero__sub { margin: 0 0 2.4rem; max-width: 40rem; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.55; color: var(--mid); text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.hero__meta { margin: 2.2rem 0 0; display: flex; flex-wrap: wrap; gap: 1.4rem; }
.hero__meta-item { display: flex; flex-direction: column; gap: 0.25rem; }
.hero__meta-k { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.hero__meta-v { font-family: var(--font); font-size: 0.92rem; font-weight: 600; text-transform: lowercase; color: var(--mid); }
.hero__instrument { width: 100%; max-width: 380px; margin: 0 auto; justify-self: center; filter: drop-shadow(0 0 24px rgba(17,221,173,0.06)); }
@media (max-width: 920px){ .hero__instrument { max-width: 280px; } }
.hero__scroll { position: absolute; left: clamp(1.25rem,4vw,3rem); bottom: 1.6rem; display: flex; align-items: center; gap: 0.75rem; z-index: 2; }
.hero__scroll-t { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.hero__scroll-l { width: 2.5rem; height: 1px; background: linear-gradient(to right, var(--teal), transparent); }

/* CTA */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 1.5rem; font-family: var(--font); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid var(--bord); white-space: nowrap; cursor: pointer; transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; }
.cta--primary { background: var(--teal); border-color: var(--teal); color: #06241d; }
.cta--primary:hover { transform: var(--lift); box-shadow: var(--lift-sh); background: var(--teal-h); }
.cta--ghost { background: transparent; color: var(--ink); }
.cta--ghost:hover { transform: var(--lift); border-color: var(--teal); color: var(--teal); box-shadow: 3px 3px 0 0 var(--bsoft); }
.cta--link { padding: 0; border: none; background: transparent; color: var(--mid); letter-spacing: 0.06em; text-transform: lowercase; font-size: 0.95rem; position: relative; }
.cta--link::after { content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background: var(--teal); transform: scaleX(0); transform-origin:left; transition: transform 0.2s ease; }
.cta--link:hover { color: var(--ink); }
.cta--link:hover::after { transform: scaleX(1); }

/* attitude indicator — artificial horizon */
.ah-bezel { fill: rgba(17,221,173,0.012); stroke: var(--bord); stroke-width: 1; }
.ah-sky { fill: rgba(76,150,205,0.16); }
.ah-ground { fill: rgba(78,52,30,0.34); }
.ah-horizon { stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.ah-pitch line { fill: none; stroke: var(--mid); stroke-width: 0.85; stroke-linecap: round; opacity: 0.55; }
.ah-bank path { fill: none; stroke: var(--bord); stroke-width: 1; }
.ah-bank line { stroke: var(--mid); stroke-width: 0.9; stroke-linecap: round; opacity: 0.5; }
.ah-pointer { fill: var(--teal); }
.ah-craft line { fill: none; stroke: var(--teal); stroke-width: 1.9; stroke-linecap: round; }
.ah-center { fill: var(--teal); }
.ah-ball { transform-box: fill-box; transform-origin: center; animation: ah-bob 9s ease-in-out infinite; }
@keyframes ah-bob { 0%,100%{ transform: rotate(-1.6deg) translateY(1.4px); } 50%{ transform: rotate(1.6deg) translateY(-1.4px); } }

/* ─── Reveal ──────────────────────────────────────────────────────────── */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.22,0.61,0.36,1), transform 0.7s cubic-bezier(0.22,0.61,0.36,1); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ html.js .reveal { opacity: 1; transform: none; transition: none; } .ah-ball { animation: none; } }

/* mobile: camadas de blur menores e promovidas à GPU (rolagem mais fluida) */
@media (max-width: 760px){
  .sky__clouds { filter: blur(10px); will-change: transform; }
  .sky__clouds2 { filter: blur(12px); will-change: transform; }
  .hd { backdrop-filter: blur(8px); }
}