@layer reset, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ul, dl, figure { margin: 0; }
  ul { padding: 0; list-style: none; }
  img, svg, canvas { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
}

@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-1);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; }
  h1 { font-size: var(--fs-4); font-weight: 700; }
  h2 { font-size: var(--fs-3); font-weight: 600; margin-bottom: var(--s-6); }
  a { color: var(--accent); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
}

@layer layout {
  /* Background illustration (D-043, replaces the canvas data field D-010).
     Overlay ≥ 0.80 opaque keeps even --muted text at ≥ 4.5:1 over the image's brightest (white) pixels:
     bg = 0.82·#0a0e14 + 0.18·#fff ≈ L 0.045 → #9aa8b8 on it ≈ 4.6:1 (worst case). */
  .backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
  .backdrop__img {
    position: absolute; inset: -4%;
    background-image: url("../../assets/images/bg-laptop-960.jpg");
    background-image: image-set(url("../../assets/images/bg-laptop-960.webp") type("image/webp"), url("../../assets/images/bg-laptop-960.jpg") type("image/jpeg"));
    background-position: 78% 62%; background-size: cover; background-repeat: no-repeat; /* focus on the glowing mesh */
    animation: backdrop-drift 45s ease-in-out infinite alternate;
  }
  @media (min-width: 1024px) {
    .backdrop__img {
      background-image: url("../../assets/images/bg-laptop-1920.jpg");
      background-image: image-set(url("../../assets/images/bg-laptop-1920.webp") type("image/webp"), url("../../assets/images/bg-laptop-1920.jpg") type("image/jpeg"));
    }
  }
  .backdrop::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgb(10 14 20 / 82%) 0%, rgb(10 14 20 / 88%) 45%, rgb(10 14 20 / 95%) 100%);
  }
  .container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
  .section { padding-block: var(--section-pad); position: relative; }
  .hero { min-height: 100svh; display: grid; align-items: center; }
  .hero__grid { display: grid; gap: var(--s-7); align-items: center; }
  @media (min-width: 1024px) { .hero__grid { grid-template-columns: 5fr 7fr; } }
}

@layer components {
  .skip-link { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: var(--s-2) var(--s-4); z-index: 100; }
  .skip-link:focus { left: 8px; }

  .site-header {
    position: fixed; inset: 0 0 auto; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-3) var(--s-4);
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .badge {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-size: var(--fs-0); color: var(--text);
    padding: var(--s-1) var(--s-3); border: 1px solid var(--line); border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface) 60%, transparent);
  }
  .badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .nav__list { display: flex; gap: var(--s-1); }
  .nav__list a {
    display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--s-3);
    color: var(--muted); text-decoration: none; font-size: var(--fs-0);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .nav__list a:hover, .nav__list a:focus-visible { color: var(--text); }
  .lang-toggle {
    min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-pill);
    background: transparent; cursor: pointer; font-family: var(--font-num); font-size: var(--fs-0);
  }
  @media (max-width: 767px) {
    .site-header { flex-wrap: wrap; }
    .nav { order: 3; width: 100%; }
    .nav__list { justify-content: space-between; }
  }

  .hero { padding-top: calc(var(--header-h) + var(--s-6)); }
  .hero__avatar { width: clamp(170px, 30vw, 360px); aspect-ratio: 1; /* reserves the avatar's space before the SVG is injected (I-049) */ margin-inline: auto; touch-action: manipulation; cursor: pointer; }
  .hero__copy { text-align: center; }
  @media (min-width: 1024px) { .hero__copy { text-align: left; } }
  .hero__tag {
    display: inline-block; font-family: var(--font-num); font-size: var(--fs-0); color: var(--muted);
    border: 1px solid var(--line); border-radius: var(--radius-pill); padding: var(--s-1) var(--s-3); margin-bottom: var(--s-4);
  }
  .hero__headline { font-size: var(--fs-2); color: var(--text); margin-top: var(--s-3); }
  .hero__roles { font-family: var(--font-num); font-size: var(--fs-1); color: var(--accent); min-height: 3.2em; margin-top: var(--s-2); }
  .hero__role { display: inline-block; transition: opacity 250ms var(--ease-out), translate 250ms var(--ease-out); }
  .hero__role.is-leaving { opacity: 0; translate: 0 -6px; }
  .hero__roles--static .hero__role { color: var(--muted); }

  .proof {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-4);
    margin-top: var(--s-6); text-align: left;
  }
  .proof__item {
    display: grid; gap: var(--s-1); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
  }
  .proof__value { overflow-wrap: anywhere; font-family: var(--font-num); font-size: var(--fs-num); color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
  .proof__label { font-weight: 500; color: var(--text); }
  .proof__context { font-size: var(--fs-0); color: var(--muted); }

  .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); justify-content: center; }
  @media (min-width: 1024px) { .hero__ctas { justify-content: flex-start; } }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding-inline: var(--s-5);
    border-radius: var(--radius-pill); font-weight: 500; text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .btn--primary { background: var(--accent); color: var(--bg); }
  .btn--primary:hover, .btn--primary:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
  .btn--ghost { border: 1px solid var(--line); color: var(--text); }
  .btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--accent); color: var(--accent); }

  /* Avatar states */
  .avatar { width: 100%; height: auto; overflow: visible; }
  .avatar__lid { transform-box: fill-box; transform-origin: top; scale: 1 0; transition: scale 70ms linear; }
  .avatar.is-blinking .avatar__lid { scale: 1 1; }
  .avatar__mouth { transition: opacity var(--dur-fast) var(--ease-out); }
  .avatar__mouth--smile, .avatar__cheek { opacity: 0; }
  .avatar.is-smiling .avatar__mouth--smile { opacity: 1; }
  .avatar.is-smiling .avatar__mouth--neutral { opacity: 0; }
  .avatar.is-smiling .avatar__cheek { opacity: 0.35; }
  .avatar__brow { transition: translate var(--dur-med) var(--ease-out); }
  .avatar.is-smiling .avatar__brow { translate: 0 -2px; }

  .scroll-hint {
    position: absolute; bottom: var(--s-5); left: 50%; translate: -50% 0;
    width: 44px; height: 44px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    rotate: 45deg; scale: 0.4;
    transition: opacity var(--dur-slow) var(--ease-out);
  }
  .scroll-hint.is-hidden { opacity: 0; pointer-events: none; }

  .modal { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); max-width: min(90vw, 880px); }
  .modal::backdrop { background: rgb(0 0 0 / 70%); }

  .site-footer { border-top: 1px solid var(--line); padding-block: var(--s-7); color: var(--muted); font-size: var(--fs-0); }
}

@layer utilities {
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}