@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700;800;900&family=Inter:wght@400;500;600&display=swap');

/* ---------------------------------------------------------------
   Rojo — shared styles
   Brand: yellow #F6CF71 · yellowDark #E0B95D · cream #F5F1E9 · white #F9F8F2
   --------------------------------------------------------------- */

:root {
  --yellow: #F6CF71;
  --yellow-dark: #E0B95D;
  --cream: #F5F1E9;
  --white: #F9F8F2;

  --ink: #2E2A24;
  --ink-soft: #5C554A;
  --ink-faint: #8A8175;
  --line: #E7DFD1;

  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 2px 4px rgba(46, 42, 36, 0.04), 0 12px 28px rgba(46, 42, 36, 0.06);
  --maxw: 1080px;

  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration-color: var(--yellow-dark); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(245, 241, 233, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-mark { width: 36px; height: 36px; }

.site-nav {
  display: flex;
  align-items: center;
}

/* ---------- Hamburger menu ---------- */

.nav-menu { position: relative; }

.nav-menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.nav-menu-trigger::-webkit-details-marker { display: none; }
.nav-menu-trigger::marker { content: ''; }

.nav-menu-trigger:hover,
.nav-menu[open] .nav-menu-trigger { background: rgba(46, 42, 36, 0.07); }

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
}

.hamburger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}

.nav-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 30;
}

.nav-menu-panel a {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
}

.nav-menu-panel a:hover { background: var(--cream); color: var(--ink); }

.nav-menu-panel .nav-menu-contact {
  margin-top: 4px;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  text-align: center;
}

.nav-menu-panel .nav-menu-contact:hover { background: var(--yellow-dark); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 14px 26px;
  border: none;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(224, 185, 93, 0.35);
}

.btn-primary:hover { background: var(--yellow-dark); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 2px solid var(--line);
}

.btn-ghost:hover { border-color: var(--yellow-dark); color: var(--ink); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 8px 0 96px;
  text-align: center;
  background: var(--cream);
}

.hero-logo {
  width: 320px;
  height: 320px;
  object-fit: contain;
  margin: 0 auto 12px;
}

.hero-title {
  font-size: clamp(1.875rem, 5vw, 3.25rem);
  font-weight: 900;
  max-width: 18ch;
  margin: 0 auto;
}

.hero-sub {
  max-width: 54ch;
  margin: 22px auto 0;
  font-size: 1.125rem;
  color: var(--ink-soft);
}

.hero-sub-italic { margin-top: 6px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
}

/* ---------- Hero 3D render ---------- */

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* Soft brand-yellow bloom sitting behind the phone, giving the render
   something to lift off instead of floating on flat cream. Wider than it is
   tall so it reads around the phone's edges rather than hiding behind it. */
.hero-visual::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 165%;
  height: 76%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(246, 207, 113, 0.68),
    rgba(246, 207, 113, 0.30) 46%,
    rgba(246, 207, 113, 0) 72%
  );
  pointer-events: none;
}

/* The render has transparent corners, so drop-shadow follows the phone's
   rounded silhouette where box-shadow would trace its bounding box. */
.hero-3d {
  position: relative;
  z-index: 1;
  width: 270px;
  height: auto;
  transform: rotate(3.5deg);
  filter: drop-shadow(0 26px 44px rgba(46, 42, 36, 0.26));
}

/* ---------- Sections ---------- */

.section { padding: 80px 0; }

.section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}

.section-lede {
  text-align: center;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 14px auto 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow);
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--yellow);
  margin-bottom: 18px;
}

.feature-icon img {
  width: 26px;
  height: 26px;
  display: block;
}

.card h3 { font-size: 1.1875rem; font-weight: 800; }

.card p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 0.9875rem;
}

/* ---------- Screenshot showcase ---------- */

.showcase-section { padding-top: 0; }

/* The rail bleeds past .container so cards can scroll to the screen edge;
   scroll-padding keeps the first item aligned with the container gutter. */
.showcase-rail {
  display: flex;
  gap: 28px;
  margin: 44px 0 0;
  padding: 0 max(24px, calc((100% - var(--maxw)) / 2 + 24px));
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(24px, calc((100% - var(--maxw)) / 2 + 24px));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.showcase-rail::-webkit-scrollbar { display: none; }

.showcase-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  text-align: center;
}

.showcase-item img {
  width: 240px;
  height: auto;
  filter: drop-shadow(0 14px 26px rgba(46, 42, 36, 0.16));
}

.showcase-caption {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* The rail's scrollbar is hidden, so these buttons are the affordance that
   makes the off-screen cards reachable with a mouse. Touch devices can swipe,
   but a wheel doesn't scroll a horizontal container. */
.showcase-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

.showcase-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.showcase-btn svg { width: 22px; height: 22px; }

.showcase-btn:hover:not(:disabled) {
  background: var(--yellow);
  border-color: var(--yellow);
}

.showcase-btn:disabled {
  opacity: 0.34;
  cursor: default;
}

.showcase-rail:focus-visible {
  outline: 3px solid var(--yellow-dark);
  outline-offset: -3px;
}

/* ---------- Legal pages ---------- */

.legal { padding: 64px 0 88px; }

.legal-inner { max-width: 760px; }

.legal-title { font-size: clamp(2rem, 5vw, 2.75rem); }

.legal-updated {
  margin: 12px 0 0;
  color: var(--ink-faint);
  font-size: 0.9375rem;
}

.legal-body {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 36px;
  margin-top: 32px;
  box-shadow: var(--shadow);
}

.legal-body h2 {
  font-size: 1.375rem;
  margin: 40px 0 0;
}

.legal-body h2:first-child { margin-top: 0; }

.legal-body h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  margin: 26px 0 0;
}

.legal-body p,
.legal-body ul,
.legal-body ol { margin: 14px 0 0; color: var(--ink-soft); }

.legal-body ul,
.legal-body ol { padding-left: 22px; }

.legal-body li { margin-top: 8px; }

.legal-body strong { color: var(--ink); font-weight: 600; }

.legal-body a { color: var(--ink); }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 22px 0 16px;
  background: var(--cream);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.footer-logo { height: 88px; width: auto; display: block; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 0.9375rem;
  font-weight: 500;
}

.footer-links a { color: var(--ink-soft); text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }

.footer-legal {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.footer-legal p {
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.875rem;
}

/* ---------- Responsive ---------- */

/* Desktop hero: copy on the left, the 3D render on the right. The render is
   sized past the space it occupies and allowed to bleed below the hero's
   bottom edge (the section clips it), so the phone reads as rising into the
   page rather than sitting in a box. */
@media (min-width: 901px) {
  .hero { padding: 44px 0 64px; }

  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
    align-items: center;
    gap: 48px;
    text-align: left;
  }

  .hero-logo { width: 236px; height: auto; margin: 0 0 6px; }
  .hero-title { max-width: 15ch; margin: 0; }
  .hero-sub { margin: 20px 0 0; max-width: 46ch; }
  .hero-sub-italic { margin-top: 6px; }
  .hero-actions { justify-content: flex-start; }

  .hero-visual { margin-top: 0; }
  .hero-3d { width: 320px; }
}

@media (max-width: 860px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }

  .hero { padding: 4px 0 64px; }
  .hero-logo { width: 200px; height: 200px; margin-bottom: 8px; }
  .hero-actions .btn { width: 100%; text-align: center; }

  .section { padding: 56px 0; }
  .feature-grid { grid-template-columns: 1fr; }
  .legal-body { padding: 28px 22px; }

  .hero-3d { width: 232px; }
  .hero-visual { margin-top: 30px; }
  .showcase-rail { gap: 20px; }
  .showcase-item img { width: 200px; }
  .showcase-caption { margin-top: 16px; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}