/* ─── VARIABLES  ──────────────────── */
:root {
  --accent:       #6b8caf;
  --accent2:      #b8543f;
  --accent-glow:  rgba(107, 140, 175, 0.18);

  --bg:           #14181d;
  --bg2:          #1c2228;
  --bg3:          #242b33;

  --text:         #e4e1da;
  --muted:        rgba(228, 225, 218, 0.5);

  --border:       rgba(107, 140, 175, 0.16);
  --border-hover: rgba(107, 140, 175, 0.38);

  --ff-display: 'Bebas Neue Cyrillic', sans-serif;
  --ff-body:    'Inter', sans-serif;

  --max-w:      1280px;
  --section-py: 7rem;

  --radius-sm:  4px;
  --radius-md:  8px;
  --transition: 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ─── BASE ───────────────────────────────────────────────────────────────── */
html { font-size: 16px; }

body {
  background:  var(--bg);
  color:       var(--text);
  font-family: var(--ff-body);
  font-weight: 300;
  overflow-x:  hidden;
}

/* ─── CONTAINER ──────────────────────────────────────────────────────────── */
.site-container {
  width:     100%;
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   0 2rem;
}

.section {
  padding:   var(--section-py) 0;
  position:  relative;
  overflow:  hidden;
}

.section__inner {
  position:  relative;
  z-index:   1;
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   0 2rem;
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────────────────────── */
.t-label {
  font-size:      0.65rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  0.75rem;
}

.t-title {
  font-family:    var(--ff-display);
  font-size:      clamp(2.5rem, 4vw, 4.5rem);
  letter-spacing: 0.05em;
  color:          #fff;
  line-height:    1;
  margin-bottom:  1rem;
}

.t-sub {
  font-size:     1rem;
  font-weight:   300;
  color:         var(--muted);
  line-height:   1.75;
  max-width:     520px;
  margin-bottom: 2.5rem;
}

/* ─── SECTION DIVIDER ────────────────────────────────────────────────────── */
.section-divider {
  height:     0.5px;
  background: linear-gradient(
    to right, transparent,
    rgba(107,140,175,0.25),
    rgba(184,84,63,0.18),
    transparent
  );
}

/* ─── BUTTONS ────────────────────────────────────────────────────────────── */
.btn-rk {
  display:        inline-block;
  padding:        0.9rem 2.2rem;
  font-size:      0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition:     var(--transition);
  cursor:         pointer;
  border:         none;
  font-family:    var(--ff-body);
}

.btn-rk--primary {
  background:  var(--accent);
  color:       #14181d;
  clip-path:   polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.btn-rk--primary:hover {
  transform:   translateY(-2px);
  box-shadow:  0 8px 30px rgba(107,140,175,0.35);
}

.btn-rk--ghost {
  background:   transparent;
  color:        var(--muted);
  border:       0.5px solid var(--border);
}
.btn-rk--ghost:hover {
  border-color: var(--accent);
  color:        #fff;
}

/* ─── NAV — fullbleed ────────────────────────────────── */
.nav {
  position:        fixed;
  top: 0; left: 0; right: 0;
  z-index:         100;
  background:      rgba(20,24,29,0.85);
  /*backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);*/
  border-bottom:   0.5px solid var(--border);
  transition:      background var(--transition);
}

.nav__inner {
  max-width:       var(--max-w);
  margin:          0 auto;
  padding:         0.9rem 2rem;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}

.nav__logo {
  display:     flex;
  align-items: center;
  height:      36px;
  flex-shrink: 0;
}
.nav__logo img {
  height:      100%;
  width:       auto;
  display:     block;
  object-fit:  contain;
}

.nav__links {
  display:    flex;
  gap:        2rem;
  list-style: none;
  margin:     0;
  padding:    0;
}

.nav__link {
  font-size:      0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--muted);
  transition:     color var(--transition);
  text-decoration:none;
}
.nav__link:hover,
.nav__link.is-active { color: var(--accent); }

.nav__burger {
  display:         none;
  width:           28px;
  height:          28px;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  cursor:          pointer;
  background:      none;
  border:          none;
  padding:         0;
  z-index:         101;
  flex-shrink:     0;
}
.nav__burger span {
  width:           24px;
  height:          1.5px;
  background:      var(--text);
  display:         block;
  transition:      transform 0.35s cubic-bezier(0.23,1,0.32,1), opacity 0.35s;
  transform-origin:center;
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__overlay { display: none; }

/* ─── MOBILE NAV ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav__inner { padding: 0.75rem 1.25rem; }
  .nav__logo  { height: 30px; }
  .nav__burger { display: flex; }

  .nav__links {
    position:        fixed;
    top:             0;
    right:           0;
    bottom:          0;
    width:           min(80vw, 320px);
    background:      var(--bg2);
    flex-direction:  column;
    align-items:     flex-start;
    justify-content: center;
    gap:             2rem;
    padding:         0 2.5rem;
    margin:          0;
    transform:       translateX(100%);
    transition:      transform 0.4s cubic-bezier(0.23,1,0.32,1);
    z-index:         100;
    border-left:     0.5px solid var(--border);
    overflow-y:      auto;
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__link { font-size: 1.05rem; letter-spacing: 0.12em; }

  .nav__overlay {
    display:    block;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.55);
    opacity:    0;
    pointer-events: none;
    transition: opacity 0.4s;
    z-index:    99;
  }
  .nav__overlay.is-open { opacity: 1; pointer-events: auto; }

    .btn-rk--ghost {     background: #233840d4 !important; }
    .hero__eyebrow, .hero__sub { color: #fff !important; }
    
  .section             { padding: 4rem 0; }
  .section__inner      { padding: 0 1.25rem; }
  .site-container      { padding: 0 1.25rem; }
  
  .hero__bg {
      position: relative;
      opacity: 0.6;
  }
  
  .hero__bg:after {
      /*content: '';
      position: absolute;
      width:100%;
      height: 100%;
      top: 0px; left:0px;
      background: #000;*/
  }
}

@media (max-width: 480px) {
  :root { --max-w: 100%; }
}