/* Pagina de prezentare Cangurul: alb, tipografie mare, o singură culoare de accent.
   NotoSans-Bold.woff2: subset din assets/fonts/NotoSans-Bold.ttf (SIL Open Font License 1.1). */

@font-face {
  font-family: "Cangurul Display";
  src: url("NotoSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ground: #ffffff;
  --ink: #141414;
  --soft: #555555;
  --tone: #f1f1ef;
  --accent: #e8692a;
  --accent-press: #d45a1d;
  --dark: #141414;
  --dark-tone: #222222;
  --on-dark: #ffffff;
  --on-dark-soft: #c4c4c4;

  --display: "Cangurul Display", "Segoe UI", system-ui, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;

  --margin: clamp(16px, 4vw, 56px);
  --max: 1280px;
  --gap-section: clamp(112px, 14vw, 200px);

  --step-hero: 132px;
  --step-2: clamp(34px, 4.8vw, 68px);
  --step-3: clamp(20px, 1.6vw, 24px);
  --step-body: 18px;
  --step-lead: clamp(19px, 1.6vw, 22px);
  --step-small: 15px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--step-body)/1.55 var(--text);
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
code, kbd, pre { font-family: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace; font-size: 0.9em; }
kbd { padding: 0 0.3em; background: var(--tone); border-radius: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; }
h2 { font-size: var(--step-2); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
h3 { font-size: var(--step-3); line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: #fbd9c4; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--margin)); margin: 0 auto; padding: 0 var(--margin); }

/* Bara de sus */
.top { position: relative; z-index: 2; }
.top-row { display: flex; align-items: center; gap: 32px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 var(--step-body)/1 var(--display); letter-spacing: -0.01em; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a, .langs a { text-decoration: none; font-size: var(--step-small); }
.nav a { color: var(--soft); transition: color 160ms ease; }
.langs { display: flex; gap: 4px; }
.langs a { padding: 6px 8px; border-radius: var(--radius); color: var(--soft); font-weight: 600; font-size: var(--step-small); }
.langs a[aria-current] { color: var(--ink); background: var(--tone); }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover, .langs a:hover { color: var(--ink); }
}

/* Prima vedere */
.hero { padding-top: clamp(40px, 7vw, 104px); }
.hero h1 {
  /* Rândul cel mai lung (--chars, pus de build.py) încape în lățimea paginii. */
  font-size: min(var(--step-hero), calc((min(100vw, var(--max) + 2 * var(--margin)) - 2 * var(--margin)) / (var(--chars) * 0.56)));
  line-height: 0.98;
  letter-spacing: -0.045em;
}
/* overflow ascunde rândul înainte de animație; rezerva (padding compensat de
   margin) lasă loc cozilor (g, у) și semnelor de deasupra (Й, Î, Ă). */
.hero h1 .line { display: block; overflow: hidden; padding: 0.14em 0 0.28em; margin: -0.14em 0 -0.28em; }
.hero h1 .line > span { display: inline-block; }
.hero h1 .roo {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-left: 0.12em;
  vertical-align: -0.12em;
}
.hero-text {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 20px 48px;
  margin-top: clamp(32px, 4vw, 48px);
  align-items: end;
}
.lead { font-size: var(--step-lead); line-height: 1.45; max-width: 36ch; }
.lead code { font-size: 0.85em; font-weight: 700; }
.compat { grid-column: 1; font-weight: 600; max-width: 42ch; }
.compat code { font-size: 0.9em; }
.cta { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; justify-self: end; }
.version { grid-column: 2; justify-self: end; font-size: var(--step-small); color: var(--soft); }

.button {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 28px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--ink);
  font: 700 var(--step-body)/1.1 var(--display);
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.button:active { transform: scale(0.97); background: var(--accent-press); }
.cta-other { font-weight: 600; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--accent-press); }
  .cta-other:hover { color: var(--accent-press); }
}

.shot-band { position: relative; margin-top: clamp(48px, 6vw, 80px); }
.shot-band::before {
  /* Banda de ton sub jumătatea de jos a capturii. */
  content: "";
  position: absolute;
  inset: 42% 0 0;
  background: var(--tone);
}
.shot { position: relative; width: 100%; border-radius: var(--radius); background: var(--tone); }
.shot-band .wrap { position: relative; padding-bottom: clamp(48px, 6vw, 96px); }

/* Ce face programul */
.features { padding-top: var(--gap-section); }
.features h2 { margin-bottom: clamp(48px, 6vw, 88px); }
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: center; }
.feature + .feature { margin-top: clamp(64px, 8vw, 120px); }
.feature h3 { margin-bottom: 12px; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -0.025em; }
.feature-text { max-width: 44ch; }
/* Fragment real din captura programului: --x, --y, --w, --h în pixeli ai capturii de 1280×800. */
.crop {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: var(--w) / var(--h);
  max-height: 560px;
  justify-self: center;
  width: min(100%, calc(560px * var(--w) / var(--h)));
  border-radius: var(--radius);
  background: var(--tone);
}
.crop img {
  position: absolute;
  max-width: none;
  width: calc(1280 / var(--w) * 100%);
  left: calc(var(--x) / var(--w) * -100%);
  top: calc(var(--y) / var(--h) * -100%);
}

/* Față de Cangurul 2 */
.compare { padding-top: var(--gap-section); }
.compare-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.section-lead { margin-top: 20px; font-size: var(--step-lead); max-width: 32ch; }
.roo-tired { width: 120px; height: 120px; margin-top: 40px; }
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--step-body); }
.compare-table thead th { font: 700 var(--step-small)/1.2 var(--display); text-align: center; padding: 0 12px 16px; width: 22%; }
.compare-table tbody th { text-align: left; font-weight: 400; padding: 16px 16px 16px 0; hyphens: auto; overflow-wrap: break-word; }
.compare-table td { text-align: center; padding: 16px 12px; white-space: nowrap; }
.compare-table tbody tr { border-top: 1px solid #e6e0d8; }
.compare-table tr.same { background: var(--tone); border-top: 0; }
.compare-table tr.same th { padding-left: 16px; font-weight: 600; }
.yes { display: inline-block; width: 22px; height: 22px; color: var(--accent-press); vertical-align: -5px; }
.no { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: #cfc7bd; vertical-align: middle; }
.same-note { font-size: var(--step-small); color: var(--soft); white-space: normal; }

/* Noutăți */
.news { padding-top: var(--gap-section); }
.releases { margin-top: 56px; }
.release { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 64px; }
.release + .release { margin-top: 80px; }
.release h3 { font-size: var(--step-2); letter-spacing: -0.035em; line-height: 1; }
.release time { display: block; margin-top: 12px; font-size: var(--step-small); color: var(--soft); }
.release h4 { margin: 24px 0 8px; font: 700 var(--step-body)/1.3 var(--display); }
.release h4:first-child { margin-top: 0; }
.release ul { margin: 0; padding-left: 1.1em; }
.release li + li { margin-top: 8px; }
.release li::marker { color: var(--accent); }
.release code { overflow-wrap: anywhere; }
.more-row { margin-top: 56px; }
.more { font-weight: 600; text-underline-offset: 4px; }

/* Descarcă + subsol: câmpul inversat */
.download { margin-top: var(--gap-section); padding: var(--gap-section) 0 96px; background: var(--dark); color: var(--on-dark); }
.download h2 { font-size: clamp(48px, 9vw, 132px); letter-spacing: -0.045em; line-height: 0.95; }
.download .section-lead { color: var(--on-dark-soft); max-width: none; }
.platforms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 40px; margin-top: 72px; }
.platform h3 { margin-bottom: 16px; }
.file-group { font-weight: 600; margin-top: 16px; }
.files { list-style: none; margin: 8px 0 0; padding: 0; }
.files li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.files li + li { margin-top: 4px; }
.files a {
  display: inline-block;
  padding: 6px 0;
  font-weight: 600;
  color: var(--on-dark);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.size { font-size: var(--step-small); color: var(--on-dark-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.note { margin-top: 12px; font-size: var(--step-small); line-height: 1.5; color: var(--on-dark-soft); }
.lab { margin-top: 80px; padding: clamp(24px, 3vw, 40px); background: var(--dark-tone); border-radius: var(--radius); }
.lab p { margin-top: 10px; }
.lab pre { margin: 16px 0 0; padding: 16px; overflow-x: auto; background: var(--dark); border-radius: var(--radius); color: var(--on-dark); font-size: 15px; }
.lab code { color: inherit; }
.extra { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 40px; }
.extra a { color: var(--on-dark-soft); text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .files a:hover, .extra a:hover { color: #ffffff; text-decoration-color: #ffffff; }
}

.foot { background: var(--dark); color: var(--on-dark-soft); overflow: hidden; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px; padding-top: 40px; font-size: var(--step-small); position: relative; z-index: 1; }
.foot a { color: var(--on-dark); text-underline-offset: 4px; }
.author { display: flex; align-items: center; gap: 16px; color: var(--on-dark); }
.author-photo-link { display: block; flex: none; border-radius: 50%; }
.author-photo { display: block; width: 72px; height: 72px; border-radius: 50%; background: #ffffff; flex: none; }
.author-name { font: 700 var(--step-body)/1.3 var(--display); }
.author-links { margin-top: 4px; color: var(--on-dark-soft); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.wordmark {
  margin: 24px 0 0;
  font: 700 27vw/0.8 var(--display);
  letter-spacing: -0.06em;
  color: var(--accent);
  white-space: nowrap;
  transform: translate(-0.04em, 18%);
  user-select: none;
  pointer-events: none;
}

/* Mișcarea: titlul urcă din spatele rândului, cangurul sare în locul lui, captura apare. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .line > span { animation: rise 900ms var(--ease-out) both; }
  .hero h1 .line:nth-child(2) > span { animation-delay: 110ms; }
  .hero h1 .roo { animation: hop 700ms var(--ease-out) 650ms both; }
  .hero-text { animation: fade-up 600ms var(--ease-out) 350ms both; }
  .shot-hero { animation: fade-up 900ms var(--ease-out) 450ms both; }

  .reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  .reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
  .reveal-ready .platform:nth-child(2) { transition-delay: 70ms; }
  .reveal-ready .platform:nth-child(3) { transition-delay: 140ms; }
  .reveal-ready .platform:nth-child(4) { transition-delay: 210ms; }
  .reveal-ready .feature:nth-of-type(1) { transition-delay: 60ms; }
  .reveal-ready .feature:nth-of-type(2) { transition-delay: 120ms; }
  .reveal-ready .feature:nth-of-type(3) { transition-delay: 180ms; }
}
@keyframes rise { from { transform: translateY(140%); } to { transform: none; } }
@keyframes hop {
  0% { opacity: 0; transform: translate(-0.6em, 0) rotate(-8deg); }
  45% { opacity: 1; transform: translate(-0.25em, -0.35em) rotate(-4deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Tabletă */
@media (max-width: 1024px) {
  .nav { display: none; }
  .langs { margin-left: auto; }
  .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature, .compare-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .roo-tired { display: none; }
}

/* Telefon */
@media (max-width: 680px) {
  .hero-text { grid-template-columns: minmax(0, 1fr); }
  .cta, .version { grid-column: 1; grid-row: auto; justify-self: start; }
  .cta { width: 100%; }
  .button { width: 100%; justify-content: center; }
  .shot-band::before { inset: 30% 0 0; }
  .release { grid-template-columns: minmax(0, 1fr); }
  .platforms { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 48px; }
  .compare-table { font-size: var(--step-small); }
  .compare-table thead th { width: auto; padding: 0 6px 12px; }
  .compare-table td { padding: 14px 6px; }
  .same-note { display: block; }
  .foot-row { flex-direction: column; }
}