/* ===== Design tokens (Figma) ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --design-w: 1920;
  --design-h: 5858;
  --white: #ffffff;
  --soft-gray: #e8e8e8;
  --slate-gray: #58595b;
  --gray: #545455;
  --red: #cc2228;
  --green: #03c100;
  --green-dark: #004603;
  --shadow: 0 17px 25px rgba(0, 0, 0, 0.25);
  --font: 'Inter', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--white);
  overflow-x: hidden;
  letter-spacing: -0.04em;
}

img {
  display: block;
  max-width: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.site-canvas {
  --scale: min(1, 100vw / 2933px);
  width: calc(1920px * var(--scale));
  min-height: calc(5858px * var(--scale));
  margin: 0 auto;
  position: relative;
  background: var(--white);
  overflow: visible;
}

.site-canvas__inner {
  width: 1920px;
  min-height: 5858px;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(var(--scale));
  transform-origin: top left;
}

/* Position helpers: px from Figma → absolute on 1920×5858 canvas */
.el {
  position: absolute;
}

.el-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

.site-canvas__inner > *:not(.el-bg) {
  z-index: 1;
}

.shape-green-bar,
.shape-card {
  z-index: 1;
}

.site-canvas__inner img:not(.el-bg),
.site-canvas__inner h1,
.site-canvas__inner h2,
.site-canvas__inner h3,
.site-canvas__inner h4,
.site-canvas__inner p,
.site-canvas__inner nav,
.site-canvas__inner a.shape-btn-green,
.site-canvas__inner a.shape-btn-red,
.site-canvas__inner .feature-ring {
  z-index: 2;
}

/* Typography presets from Figma */
.t-nav {
  font-size: 36.15px;
  line-height: 36.15px;
  font-weight: 400;
  color: var(--gray);
}

.t-hero-title {
  font-size: 86.45px;
  line-height: 0.96;
  font-weight: 700;
  color: var(--gray);
}

.t-hero-sub {
  font-size: 50.59px;
  line-height: 1.08;
  font-weight: 400;
  color: var(--gray);
}

.t-feature-lg {
  font-size: 29.04px;
  line-height: 34.85px;
  font-weight: 400;
  color: var(--gray);
}

.t-feature-sm {
  font-size: 29.04px;
  line-height: 29.04px;
  font-weight: 400;
  color: var(--gray);
}

.t-btn-header {
  font-size: 39.98px;
  line-height: 39.98px;
  font-weight: 400;
  color: var(--white);
}

.t-btn-action {
  font-size: 35.71px;
  line-height: 35.71px;
  font-weight: 400;
  color: var(--white);
}

.t-banner {
  font-size: 61.52px;
  line-height: 61.52px;
  font-weight: 700;
}

.t-section {
  font-size: 61.52px;
  line-height: 61.52px;
  font-weight: 700;
  color: var(--gray);
}

.t-challenge {
  font-size: 29.04px;
  line-height: 34.85px;
  font-weight: 400;
  color: var(--white);
  text-align: center;
}

.t-card-title {
  font-size: 41.14px;
  line-height: 41.14px;
  font-weight: 700;
  color: var(--red);
}

.t-card-body {
  font-size: 41.14px;
  line-height: 49.37px;
  font-weight: 400;
  color: #000000;
  text-align: center;
}

.t-about-body {
  font-size: 41.14px;
  line-height: 49.37px;
  font-weight: 400;
  color: var(--gray);
}

.t-tele-label {
  font-size: 26.18px;
  line-height: 26.18px;
  color: var(--white);
}

.t-tele-title {
  font-size: 50.35px;
  line-height: 50.35px;
  font-weight: 700;
  color: var(--white);
}

.t-tele-desc {
  font-size: 26.18px;
  line-height: 31.42px;
  color: var(--white);
}

.t-tele-item {
  font-size: 26.18px;
  line-height: 26.18px;
  color: var(--white);
}

.t-cta-sub {
  font-size: 51.81px;
  line-height: 62.17px;
  color: var(--white);
}

.t-cta-trust {
  font-size: 41.14px;
  line-height: 41.14px;
  color: var(--white);
}

.t-highlight {
  font-size: 48.59px;
  line-height: 58.31px;
  font-weight: 700;
  color: var(--red);
}

.t-footer-tag {
  font-size: 41.14px;
  line-height: 49.37px;
  color: var(--gray);
}

.t-footer-heading {
  font-size: 41.14px;
  line-height: 41.14px;
  font-weight: 700;
  color: var(--gray);
}

.t-footer-link {
  font-size: 36.15px;
  line-height: 36.15px;
  color: var(--gray);
}

.t-copyright {
  font-size: 35.18px;
  line-height: 35.18px;
  font-weight: 700;
  color: var(--white);
}

.text-red { color: var(--red); }
.text-white { color: var(--white); }

/* Shapes */
.shape-green-bar {
  background: var(--slate-gray);
  box-shadow: var(--shadow);
}

.shape-card {
  background: var(--soft-gray);
  box-shadow: var(--shadow);
  border-radius: 10px;
}

.shape-btn-green {
  background: var(--green);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: filter 0.2s;
}

.shape-btn-red {
  background: var(--slate-gray);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: filter 0.2s;
}

.shape-btn-green:hover,
.shape-btn-red:hover {
  filter: brightness(1.08);
}

.feature-ring {
  width: 55.43px;
  height: 55.43px;
  border: 3px solid var(--red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-ring img {
  max-height: 34px;
  width: auto;
}

/* Interactive */
.nav-link {
  transition: color 0.2s;
}

.nav-link:hover {
  color: var(--red);
}

.btn-hit {
  cursor: pointer;
}