/* ===========================================================
   MATKROL — Human Performance System
   Light, minimal, premium. Jewel-tone brand accents.
   =========================================================== */

:root {
  /* Type */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;

  /* Ink (warm near-black) */
  --ink:    #111114;
  --ink-1:  #2a2a30;
  --ink-2:  #5d5d68;
  --ink-3:  #8b8b95;
  --ink-4:  #b6b6bf;

  /* Surfaces */
  --bg:     #ffffff;
  --bg-2:   #f7f6f3;   /* warm off-white */
  --bg-3:   #fbfaf8;
  --bg-ink: #0d0d10;   /* rare dark moments */

  /* Hairlines */
  --line:   rgba(17,17,20,0.09);
  --line-2: rgba(17,17,20,0.06);

  /* Brand jewel accents (from brand book) */
  --green:   #009D34;
  --magenta: #A30052;
  --amber:   #EF8F15;

  --green-ink:   #0a7a2c;
  --magenta-ink: #8a0246;
  --amber-ink:   #b96a06;

  /* Tints */
  --green-50:   #eaf6ee;
  --magenta-50: #f7eaf1;
  --amber-50:   #fdf3e6;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(17,17,20,0.05), 0 1px 1px rgba(17,17,20,0.03);
  --sh-md: 0 2px 6px rgba(17,17,20,0.05), 0 14px 34px -16px rgba(17,17,20,0.18);
  --sh-lg: 0 4px 12px rgba(17,17,20,0.06), 0 34px 70px -24px rgba(17,17,20,0.24);
  --sh-glow: 0 18px 60px -22px rgba(163,0,82,0.28);

  /* Geometry */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* Rhythm */
  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 64px);
  --section-y: clamp(80px, 11vw, 168px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01";
  letter-spacing: -0.011em;
  overflow-x: clip;
}
::selection { background: rgba(163,0,82,0.14); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--bg-2); }

/* ---------- Type scale ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 6.6vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.h2 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: -0.025em; }
.lead {
  font-size: clamp(1.06rem, 1.55vw, 1.32rem);
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 400;
}
.body { font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); }
.small { font-size: 0.9rem; line-height: 1.55; color: var(--ink-3); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(239,143,21,0.12);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .3s, color .3s, border-color .3s;
  white-space: nowrap;
}
.btn svg { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(17,17,20,0.6);
}
.btn--primary:hover { box-shadow: 0 16px 34px -12px rgba(17,17,20,0.55); }
.btn--primary:hover svg { transform: translateX(4px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: rgba(17,17,20,0.22); background: rgba(17,17,20,0.02); }

.btn--sm { height: 44px; padding: 0 20px; font-size: 0.92rem; }
.btn--lg { height: 58px; padding: 0 32px; font-size: 1.04rem; }
.btn--block { width: 100%; }

/* ---------- Cards ---------- */
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.glass {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: var(--sh-md);
}

/* ---------- Pillar color helpers ---------- */
.t-green   { color: var(--green-ink); }
.t-magenta { color: var(--magenta-ink); }
.t-amber   { color: var(--amber-ink); }

/* ---------- Image placeholder ---------- */
.ph {
  position: relative;
  border-radius: var(--r-md);
  background:
    repeating-linear-gradient(135deg, rgba(17,17,20,0.035) 0 11px, rgba(17,17,20,0.012) 11px 22px),
    var(--bg-3);
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  overflow: hidden;
}
.ph__tag {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-4);
  text-transform: uppercase;
  background: rgba(255,255,255,0.7);
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--line-2);
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal[data-delay="1"].in { transition-delay: .08s; }
.reveal[data-delay="2"].in { transition-delay: .16s; }
.reveal[data-delay="3"].in { transition-delay: .24s; }
.reveal[data-delay="4"].in { transition-delay: .32s; }
.reveal[data-delay="5"].in { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Misc ---------- */
.note-illustrative {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.74rem; color: var(--ink-3);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.01em;
}
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Responsive guards — no horizontal overflow, comfortable tap targets */
.nav__inner > *, .compare__col, .prob__item > div, .evo, .wacard, .stat__meta { min-width: 0; }
@media (max-width: 620px) {
  .display { font-size: clamp(2.15rem, 9vw, 3rem); }
  .h2 { font-size: clamp(1.7rem, 7vw, 2.3rem); }
  .btn { height: 50px; }
  .btn--lg { height: 54px; padding: 0 24px; font-size: 1rem; }
  .section { padding-block: clamp(60px, 14vw, 96px); }
}
@media (max-width: 400px) {
  .sec-head__title, .h2 { letter-spacing: -0.025em; }
}

/* Subtle film grain texture (toggle) */
body.has-grain::before {
  content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjAnIGhlaWdodD0nMTIwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMycgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
}

.grad-text {
  background: linear-gradient(100deg, var(--green) 0%, var(--amber) 50%, var(--magenta) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ===========================================================
   Emblem (real geometry — draws line-by-line)
   =========================================================== */
.emblem { position: relative; display: inline-grid; place-items: center; }

/* Gradient ring band (matches the real logo's outer ring) */
.emblem__ring {
  position: absolute; inset: 0; border-radius: 50%; z-index: 1;
  background: conic-gradient(from 198deg,
    var(--green) 0deg, var(--amber) 124deg, var(--magenta) 246deg, var(--green) 360deg);
  -webkit-mask: radial-gradient(closest-side, #0000 0 88.5%, #000 90% 97%, #0000 98.5%);
          mask: radial-gradient(closest-side, #0000 0 88.5%, #000 90% 97%, #0000 98.5%);
  opacity: 0; transform: rotate(-30deg) scale(0.92);
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.emblem--in .emblem__ring { opacity: 1; transform: rotate(0deg) scale(1); }
.emblem__ring--spin { animation: emblem-spin 70s linear infinite; }
@keyframes emblem-spin { to { transform: rotate(360deg); } }
.emblem--in .emblem__ring--spin { animation-delay: 1.1s; }

/* Self-drawing geometry */
.emblem__svg { position: relative; z-index: 2; width: 100%; height: 100%; overflow: visible; }
.emb-line {
  stroke: var(--emb-stroke, var(--ink));
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .8s cubic-bezier(.45,0,.2,1);
}
.emblem--in .emb-line { stroke-dashoffset: 0; }

.emblem__glow {
  position: absolute; inset: -16%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(239,143,21,0.13), rgba(163,0,82,0.09) 42%, transparent 64%);
  filter: blur(16px);
  opacity: 0;
  transition: opacity 1.4s ease .3s;
}
.emblem--in .emblem__glow { opacity: 1; }

.emblem__core {
  position: absolute; z-index: 3; width: 2.6%; height: 2.6%; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fff, var(--amber));
  box-shadow: 0 0 0 0.5em rgba(239,143,21,0.10), 0 0 1.4em 0.2em rgba(239,143,21,0.35);
  opacity: 0; transform: scale(0);
  transition: opacity .6s ease, transform .9s cubic-bezier(.2,1.5,.3,1);
}
.emblem--in .emblem__core { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .emb-line { stroke-dashoffset: 0 !important; transition: none; }
  .emblem__ring { opacity: 1; transform: none; }
}