:root {
      --ink: #16211f;
      --muted: #5f6f6b;
      --wash: #f5f7f6;
      --surface: #ffffff;
      --surface-alt: #e9efec;
      --line: #d5ded9;
      --teal: #0d625c;
      --teal-dark: #0b3f3b;
      --amber: #c98722;
      --shadow: 0 18px 50px rgba(17, 30, 27, 0.14);
      --max: 1080px;
      --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    body { margin: 0; color: var(--ink); background: var(--wash); font-family: var(--font); line-height: 1.5; }
    a { color: inherit; }
    .site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem clamp(1rem, 4vw, 2.5rem); background: rgba(245, 247, 246, 0.94); border-bottom: 1px solid rgba(213, 222, 217, 0.82); backdrop-filter: blur(14px); }
    .brand { display: inline-flex; align-items: center; gap: 0.8rem; color: var(--ink); font-weight: 780; text-decoration: none; }
    .brand-mark { display: grid; width: 40px; height: 40px; place-items: center; color: var(--surface); background: var(--teal-dark); border: 2px solid var(--amber); font-weight: 820; }
    .brand span:last-child { display: block; max-width: 180px; line-height: 1.05; }
    nav { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.4rem); font-size: 0.94rem; font-weight: 650; }
    nav a { color: #253432; text-decoration: none; }
    .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.05rem; border-radius: 8px; border: 1px solid transparent; font-size: 0.95rem; font-weight: 730; text-decoration: none; white-space: nowrap; }
    .button.primary { color: #121b19; background: var(--amber); box-shadow: 0 10px 24px rgba(201, 135, 34, 0.28); }
    .button.secondary { color: var(--surface); background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.44); }
    .hero { position: relative; min-height: 64svh; display: flex; align-items: flex-end; padding: clamp(5rem, 9vw, 8rem) clamp(1.1rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); color: var(--surface); background: #0e1917; isolation: isolate; }
    .hero::before { position: absolute; inset: 0; z-index: -2; content: ""; background: linear-gradient(90deg, rgba(12, 22, 20, 0.96) 0%, rgba(12, 22, 20, 0.78) 42%, rgba(12, 22, 20, 0.2) 82%), url("../../images/roleshock-primary-screen-concept.png") right center / cover no-repeat; }
    .hero-content { width: min(840px, 100%); }
    h1, h2, h3, p { margin-top: 0; }
    h1 { margin-bottom: 1.1rem; font-size: 4.15rem; line-height: 1.02; font-weight: 840; }
    .hero p { max-width: 690px; color: rgba(255, 255, 255, 0.86); font-size: 1.2rem; }
    .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
    .section { padding: clamp(3.2rem, 7vw, 5.6rem) clamp(1.1rem, 5vw, 4rem); }
    .section-inner { width: min(var(--max), 100%); margin: 0 auto; }
    .section-heading { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.6fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(1.7rem, 4vw, 3rem); }
    .section-heading h2 { margin-bottom: 0; font-size: 3rem; line-height: 1; }
    .section-heading p { margin-bottom: 0; color: var(--muted); font-size: 1.05rem; }
    .detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
    .detail-card { min-height: 230px; padding: 1.2rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 1px 0 rgba(22, 33, 31, 0.03); }
    .detail-card h3 { margin-bottom: 0.55rem; font-size: 1.18rem; line-height: 1.15; }
    .detail-card p, .detail-card li { color: var(--muted); font-size: 0.96rem; }
    .detail-card ul { display: grid; gap: 0.45rem; margin: 0; padding-left: 1.15rem; }
    .cta-band { color: var(--surface); background: #111b19; }
    .cta-panel { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(250px, 0.42fr); gap: 2rem; align-items: center; padding: clamp(1.4rem, 4vw, 2.4rem); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; background: rgba(255, 255, 255, 0.05); }
    .cta-panel p { margin-bottom: 0; color: rgba(255, 255, 255, 0.74); }
    footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.35rem clamp(1.1rem, 5vw, 4rem); color: rgba(255, 255, 255, 0.62); background: #111b19; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.9rem; }
    footer a { color: var(--surface); text-decoration-color: rgba(255, 255, 255, 0.38); text-underline-offset: 0.24em; }
    @media (max-width: 900px) { .site-header { align-items: flex-start; } nav { justify-content: flex-end; flex-wrap: wrap; } .section-heading, .cta-panel { grid-template-columns: 1fr; } .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } h1 { font-size: 3.4rem; } .section-heading h2 { font-size: 2.5rem; } }
    @media (max-width: 640px) { .site-header { position: static; flex-direction: column; align-items: stretch; gap: 0.75rem; } nav { width: 100%; } nav a:not(.button) { display: none; } nav .button { width: 100%; } .detail-grid { grid-template-columns: 1fr; } .detail-card { min-height: 0; } .hero { min-height: 68svh; padding-top: 4.4rem; } h1 { font-size: 2.4rem; } .hero p { font-size: 1.04rem; } .section-heading h2 { font-size: 2.1rem; } .hero::before { background: linear-gradient(0deg, rgba(12, 22, 20, 0.98) 0%, rgba(12, 22, 20, 0.72) 62%, rgba(12, 22, 20, 0.42) 100%), url("../../images/roleshock-primary-screen-concept.png") center top / cover no-repeat; } }