/* v08 · 28/09/2026 — Mọi hiệu ứng :hover chỉ chạy trên desktop ≥1200px có chuột (@media (min-width: 1200px) and (hover: hover)). Mobile/tablet không có hover. */
/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/*
  ===== Scale system (iventions-style) =====
  Design baseline width = 1920px.
  Rule: 1rem = design_px / 10.  (a 40px value in the design = 4rem in CSS)
  At 1920px viewport the root font-size resolves to 10px, and it scales
  proportionally with the viewport so every rem-based value keeps its ratio.
*/
html {
  font-size: 16px;                 /* fallback for < 1200px (mobile/tablet built from their own design) */
  -webkit-text-size-adjust: 100%;
}

/* Lenis smooth-scroll — REQUIRED: native smooth-scroll must be off or it fights Lenis (causes stutter) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@media (min-width: 1200px) {
  html { font-size: calc(100vw / 192); }   /* 100vw / 192 = 10px at 1920px, scales up & down */
}

/*
  Mobile / tablet (< 1200px): baseline 390px, 4-col grid, margin & gutter 16px.
  Same rule (1rem = design_px / 10): 390 / 39 = 10px. Scales down below 390px,
  locks at design size (10px) above so type never balloons on wide tablets.
*/
@media (max-width: 1199px) {
  html { font-size: min(calc(100vw / 39), 10px); }
}

body {
  /* Clip horizontal animation/cursor overflow without creating a scroll container
     (sticky elements and Lenis keep using the document's vertical scroll). */
  overflow-x: clip;
  font-family: var(--font-display);
  font-size: 1.8rem;               /* 18px @1920 */
  line-height: 1.5;
  font-weight: 400;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.5px;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--primary); color: var(--neutral-0); }

/* ===== Base type roles ===== */
.tagline {                          /* section tagline — Google Sans Code */
  font-family: var(--font-mono);
  font-size: 1.4rem;                /* 14px @1920 */
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
}

.btn {                              /* button — Google Sans Code */
  font-family: var(--font-mono);
  font-size: 1.5rem;                /* 15px @1920 */
  font-weight: 500;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.4rem 2.8rem;
  border-radius: 0.4rem;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.btn--primary { background: var(--primary); color: var(--neutral-0); }
@media (min-width: 1200px) and (hover: hover) { .btn--primary:hover { background: var(--primary-hover); } }
.btn--outline { border: 1px solid var(--border); color: var(--fg); }
@media (min-width: 1200px) and (hover: hover) { .btn--outline:hover { border-color: var(--fg); } }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
}