/* =========================
   PULS — Global Design System
   Step 1: base + 3D cards + sections
   ========================= */

:root{
  /* твои цвета */
  --c1: #057757; /* основной зелёный */
  --c2: #014A33; /* для кнопок/текста */
  --c3: #F4F4DA; /* светлый */

  /* нейтральные */
  --white: #ffffff;
  --shadow: 0 18px 40px rgba(0,0,0,0.18);
  --shadow-soft: 0 10px 28px rgba(0,0,0,0.14);
  --stroke: rgba(1,74,51,0.18);

  /* радиусы */
  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 16px;

  /* ширина контента */
  --container: 1120px;

  /* 3D */
  --tilt: 8deg;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
}

body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--c2);
  background: var(--c3);
  line-height: 1.35;
}

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

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 18px;
}

.section{
  position: relative;
  padding: 56px 0;
  overflow: hidden;
}

/* чередование фона как ты просил */
.section--dark{ background: var(--c1); color: var(--c3); }
.section--light{ background: var(--c3); color: var(--c2); }

.section::before{
  display: none;
}

.section--light::before{
  display: none;
}

.bg-slot{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: 0.0; /* пока выключено */
  background-position:center;
  background-size:cover;
}

.h1{
  margin: 0 0 10px 0;
  font-size: 46px;
  letter-spacing: 0.5px;
}

.h2{
  margin: 0 0 16px 0;
  font-size: 34px;
}

.p{
  margin: 0;
  font-size: 16px;
  opacity: 0.95;
}

.muted{
  opacity: 0.85;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);

  font-weight: 700;
  font-size: 14px;

  cursor: pointer;
  user-select: none;

  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  text-decoration: none !important;
}

.btn:active{ transform: translateY(1px); }

.btn--primary{
  background: var(--c2);
  color: var(--c3);
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}
.btn--primary:hover{ filter: brightness(0.98); }

.btn--ghost{
  background: rgba(255,255,255,0.12);
  color: var(--c3);
  border: 1px solid rgba(244,244,218,0.35);
}
.btn--ghost:hover{ filter: brightness(1.02); }

.btn--light{
  background: rgba(244,244,218,0.75);
  color: var(--c2);
  border: 1px solid rgba(1,74,51,0.18);
}
.btn--light:hover{ filter: brightness(0.99); }

/* =========================
   3D Cards
   ========================= */

.card{
  background: var(--white);
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.card--3d{
  transform-style: preserve-3d;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.card--3d:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/* “карточки с намёком на 3D” — внутренний блик */
.card--3d::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(circle at 25% 15%, rgba(255,255,255,0.8), transparent 55%);
  opacity: 0.40;
  pointer-events:none;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 760px){
  .h1{ font-size: 38px; }
  .h2{ font-size: 28px; }
}


/* =========================
   Top Navigation
   ========================= */

.topnav{
  position: sticky;
  top: 0;
  z-index: 50;

  /* “стекло” */
  background: rgba(244,244,218,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid rgba(1,74,51,0.12);
}

.topnav__wrap{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
}

.topnav__brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none !important;
}

.topnav__logo{
  font-weight: 900;
  letter-spacing: 0.6px;
  color: var(--c2);
  font-size: 18px;
}

.topnav__links{
  display:flex;
  gap: 14px;
  align-items:center;
  opacity: 0.9;
}

.topnav__links a{
  font-weight: 700;
  font-size: 14px;
}

.topnav__actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.topnav__logout{
  margin: 0;
}

/* на тёмных секциях хедер тоже ок, он “стеклянный” */

@media (max-width: 900px){
  .topnav__links{ display:none; }
}