/**
 * [RS] Rogue Soldiers - Core Styles
 * Global design tokens, resets, typography, containers and shared section primitives.
 */

:root {

      --bg: #0c0c0c;
      --bg-dark: #080808;
      --panel: #101010;
      --panel-light: #141414;

      --text:
        rgba(255,255,255,.86);

      --red: #bd0000;

      --red-bright: #e00000;

      --red-border:
        rgba(189,0,0,.32);

      --red-soft:
        rgba(189,0,0,.08);

      --muted:
        rgba(255,255,255,.48);

      --faint:
        rgba(255,255,255,.25);

      --border:
        rgba(255,255,255,.08);

      --border-soft:
        rgba(255,255,255,.05);

      --container-max:
        1400px;

    }


    /* =====================================================
       GLOBAL
    ====================================================== */

    * {
      box-sizing: border-box;
    }


    html {
      scroll-behavior: smooth;
    }


    body {

      margin: 0;

      background:
        var(--bg);

      color:
        var(--text);

      font-family:
        "Inter",
        sans-serif;

      overflow-x: hidden;

    }


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


    img {
      max-width: 100%;
    }


    ::selection {

      background:
        rgba(189,0,0,.35);

      color: #fff;

    }


    .site-container {

      width:
        min(
          calc(100% - 32px),
          var(--container-max)
        );

      margin-inline: auto;

    }


    .section {

      position: relative;

      padding:
        120px
        0;

    }


    .section-dark {

      background:
        #090909;

    }


    .section-title {

      margin: 0;

      color: #fff;

      font-size:
        clamp(
          2.7rem,
          6vw,
          5.5rem
        );

      line-height: .94;

      font-weight: 900;

      letter-spacing: -.05em;

      text-transform: uppercase;

    }


    .section-kicker {

      display: flex;

      align-items: center;

      gap: 12px;

      margin-bottom: 24px;

      color:
        var(--red-bright);

      font-size: .70rem;

      font-weight: 800;

      letter-spacing: .28em;

      text-transform: uppercase;

    }


    .section-kicker::before {

      content: "";

      width: 40px;
      height: 1px;

      background:
        linear-gradient(
          to right,
          var(--red-bright),
          transparent
        );

    }


    .lead-copy {

      max-width: 760px;

      color:
        rgba(255,255,255,.54);

      font-size: 1.02rem;

      line-height: 1.85;

    }




    .section-copy {
      max-width: 760px;
      margin-top: 22px;
      color: var(--muted);
      font-size: .94rem;
      line-height: 1.82;
    }

/* =====================================================
   RESPONSIVE CORE
====================================================== */

@media (max-width: 767.98px) {
  .section {
    padding: 85px 0;
  }
}