/* ===== BASE ===== */
:root{
  --bg:#0d1f1a;            /* dark emerald */
  --bg-2:#132922;
  --gold:#e7c57a;          /* honey gold */
  --ivory:#f6f5f2;         /* soft ivory */
  --muted:#b4b2aa;
  --card:#0f221c;
  --shadow: 0 8px 28px rgba(0,0,0,.25);
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:12px;
  --trans:.24s cubic-bezier(.22,.61,.36,1);
}

/* system stack similar to Manrope/Geist without external links */
*{box-sizing:border-box; scroll-behavior: smooth;}
html,body{height:100%;}
body{
  margin:0; color:var(--ivory); background:var(--bg);
  font:16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI",
       "Inter", "Manrope", "Geist", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%; display:block}
a{color:var(--ivory); text-decoration:none}
.container{width:100%; max-width:1160px; margin:auto; padding:0 20px}



/* ===== HERO ===== */
.hero{position:relative; overflow:hidden; border-radius:var(--radius-lg); margin:24px 20px}
.hero__bg{position:absolute; inset:0}
.hero__gradient{
  position:absolute; inset:-20%;
  background: radial-gradient(1000px 420px at 20% 20%, rgba(231,197,122,.14), transparent 60%),
              radial-gradient(900px 420px at 80% 80%, rgba(246,245,242,.08), transparent 60%);
  filter:contrast(1.02) saturate(1.06);
}
.hero__pattern{width:120%; height:auto; opacity:.65; transform:translateY(0)}
.hero__grid{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:center; padding:64px 0}
.hero__content h1{font-size:clamp(28px,4.2vw,56px); line-height:1.06; margin:0 0 14px; text-transform: uppercase;}
.hero__sub{color:var(--muted); max-width:56ch; margin:0 0 20px}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin:22px 0}

.hero__art{justify-self:end}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:14px; font-weight:700; letter-spacing:.2px;
  transition:var(--trans); box-shadow:0 0 0 rgba(231,197,122,0);
  border:1px solid rgba(231,197,122,.3)
}
.btn--primary{background:var(--gold); color:var(--bg); border-color:transparent}
.btn--primary:hover{transform:translateY(-1px); box-shadow:0 10px 26px rgba(231,197,122,.35)}
.btn--ghost{background:transparent}
.btn--ghost:hover{background:rgba(231,197,122,.14)}
.btn--full{width:100%}

/* ===== SECTIONS ===== */
.section{padding:72px 20px}
.section__head{margin:0 0 22px}
.section__head h2{font-size:clamp(22px,3.2vw,34px); margin:0 0 6px}
.section__sub{color:var(--muted); margin:0}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}

.card{
  background:linear-gradient(180deg, rgba(19,41,34,.82), rgba(13,31,26,.82));
  border:1px solid rgba(231,197,122,.14);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:22px
}
.card--accent{background:linear-gradient(180deg, rgba(19,41,34,.9), rgba(13,31,26,.88))}
.stats{display:flex; gap:22px; margin-top:14px}
.stat__num{font-size:28px; font-weight:800}
.stat__label{display:block; color:var(--muted); font-size:13px}

.list{margin:12px 0 0; padding-left:18px}
.list--tight li{margin:6px 0}
.list--icons{list-style:none; padding:0; display:grid; gap:8px}
.list--icons li{position:relative; padding-left:26px}
.list--icons li::before{content:""; position:absolute; left:0; top:8px; width:12px; height:12px; border-radius:50%; background:var(--gold); box-shadow:0 0 16px rgba(231,197,122,.35)}

/* feature cards */
.feature-card{
  background:linear-gradient(180deg, rgba(19,41,34,.8), rgba(13,31,26,.8));
  border:1px solid rgba(231,197,122,.14);
  border-radius:var(--radius-md);
  padding:18px;
  transition:var(--trans)
}
.feature-card:hover{transform:translateY(-3px); box-shadow:0 14px 36px rgba(0,0,0,.35)}

/* reviews */
.expertReview a {
        color: #E7C57A;
      }
      .expertReview p {
        border-left: 5px solid #E7C57A;
        padding-left: 20px;

        span {
          font-style: italic;
          opacity: 0.6;
        }
      }
/* CTA form */
.form{display:grid; gap:12px}
.field{display:grid; gap:6px}
.field span{font-size:14px; color:var(--muted)}
input, textarea{
  width:100%; color:var(--ivory); background:var(--card);
  border:1px solid rgba(231,197,122,.18);
  border-radius:12px; padding:12px 14px; outline:none; transition:var(--trans)
}
input:focus, textarea:focus{border-color:var(--gold); box-shadow:0 0 0 4px rgba(231,197,122,.15)}
.checkbox{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--muted)}
.form__note{color:var(--muted); font-size:12px; margin:6px 0 0}

/* ===== FOOTER ===== */
.site-footer{border-top:1px solid rgba(231,197,122,.12); padding:32px 20px; margin-top:20px}
.footer__grid{display:grid; grid-template-columns: repeat(2,1fr); gap:20px; align-items:flex-start}
.footer__links{list-style:none; margin:0; padding:0; display: flex; gap: 20px;}
.footer__links a{opacity:.85}
.footer__links a:hover{opacity:1; text-decoration:underline}

/* ===== ANIMATIONS / EFFECTS ===== */
.fade-in{opacity:0; transform:translateY(14px); will-change:transform, opacity}
.fade-in.is-visible{opacity:1; transform:none; transition:opacity .7s var(--trans), transform .7s var(--trans)}
.fade-in-delayed{opacity:0; transform:translateY(18px)}
.fade-in-delayed.is-visible{opacity:1; transform:none; transition:opacity .9s var(--trans), transform .9s var(--trans)}

.parallax{will-change:transform}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px){
  .hero__grid{grid-template-columns:1fr; padding:48px 0}
  .hero__art{justify-self:start}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .reviews{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .nav__toggle{display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--ivory); border:1px solid rgba(231,197,122,.3); padding:8px 12px; border-radius:10px}
  .nav__list{position:fixed; inset:auto 20px 20px 20px; background:rgba(13,31,26,.96); border:1px solid rgba(231,197,122,.2); border-radius:16px; padding:14px; gap:10px; flex-direction:column; transform:translateY(16px); opacity:0; pointer-events:none; transition:var(--trans)}
  .nav__list.is-open{transform:none; opacity:1; pointer-events:auto}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
  .hero{margin:14px 12px}
}



.header{
    /* backdrop-filter:saturate(180%) blur(6px); */
    background:rgba(13,31,26,.6); 
    border-bottom:1px solid rgba(231,197,122,.15);
    position: relative;
    z-index: 1000;
}
.headerWrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.nav{

}
.ham{
    display: none;
}

.nav ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding-left: 0;
    margin: 0;
}

.nav li{
    list-style: none;
}

.nav a{
    color: inherit;
    text-decoration: none;
    color: #E7C57A;
    position: relative;
    
}
.nav a::after{
    position: absolute;
    content: '';
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #E7C57A;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.nav a:hover::after{
    width: 100%;
}

.stopScroll{
    overflow: hidden;
}
.logo{
    position: relative;
    z-index: 1000;
    font-weight: 900;
    font-size: 20px;
    color: #E7C57A;
    
}




/* QUICK START */
.grid-5{display:grid; grid-template-columns:repeat(5,1fr); gap:24px}
.qs__item{position:relative; padding-top:30px}
.qs__badge{
  position:absolute; top:-14px; left:-14px;
  width:40px; height:40px; border-radius:50%;
  background:var(--gold); color:var(--bg); font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(231,197,122,.35)
}

/* TABLE */
.table-wrap{overflow:auto; border:1px solid rgba(231,197,122,.14); border-radius:var(--radius-lg); background:linear-gradient(180deg, rgba(19,41,34,.82), rgba(13,31,26,.82))}
.table{width:100%; border-collapse:separate; border-spacing:0}
.table th,.table td{padding:14px 16px; text-align:left; border-bottom:1px solid rgba(231,197,122,.12)}
.table thead th{position:sticky; top:0; background:rgba(13,31,26,.9); font-weight:700}
.table__note{color:var(--muted); font-size:12px; margin:10px 4px 0}


/* RESPONSIBLE */
.section--responsible .tips{display:flex; gap:22px; margin-top:12px}

/* Responsive tweaks for new sections */
@media (max-width: 1120px){ .grid-5{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 720px){
  .grid-5{grid-template-columns:1fr}
  .qs__badge{top:-10px; left:-10px; width:34px; height:34px}
}


/*   НАСТРОЙКА SCROLL-BAR   */
::-webkit-scrollbar {
    width: 0.5em;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #E7C57A;
}


::-webkit-scrollbar-thumb:active {
    background-color: #E7C57A;
}

.intoLinks {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-align: center;
        span {
          width: 8px;
          height: 8px;
          background-color: #fff;
          border-radius: 50%;
        }
        a {
          transition: 0.3s all linear;
          transform-origin: left;
        }
        a:hover {
          text-decoration: underline;
        }
      }
      @media screen and (max-width: 750px) {
        .intoLinks {
          flex-direction: column;
          span {
            display: none;
          }
        }
      }
.socialLinks{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;

    i{
        font-size: 24px;
        transition: .2s all linear;
        -webkit-transition: .2s all linear;
        -moz-transition: .2s all linear;
        -ms-transition: .2s all linear;
        -o-transition: .2s all linear;
}

}


.socialLinks i:hover{
    color: #E7C57A;
}

.footer__brand{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.copy{
    text-align: center;
    opacity: .3;
    margin: 0;
}

textarea {
  resize: none;
}



@media (max-width: 800px) {
    .hero__bg{
        display: none;
    }
    .headerWrapper{
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .hero__grid{
        padding-bottom: 0;
        padding-top: 24px;
    }
    .myBR{
        display: none;
    }
    .table-wrap{
        overflow-x: scroll;
    }
    .table-wrap::-webkit-scrollbar{
        height: 4px;
    }
    .table tr th:last-child{
        display: none;
    }
    .table tr td:last-child{
        display: none;
    }
    
    .nav{
        position: fixed;
        inset: 0;
        background-color: #111;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        z-index: 999;
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -webkit-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -moz-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -ms-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -o-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
}
    .nav.active{
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
}

    .nav ul{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .ham {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 400ms;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: flex;
        z-index: 1000;
}
.hamRotate.active {
  transform: rotate(45deg);
}
.hamRotate180.active {
  transform: rotate(180deg);
}
.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:#fff;
  stroke-width:5.5;
  stroke-linecap:round;
}
.ham7 .top {
  stroke-dasharray: 40 82;
}
.ham7 .middle {
  stroke-dasharray: 40 111;
}
.ham7 .bottom {
  stroke-dasharray: 40 161;
}
.ham7.active .top {
  stroke-dasharray: 17 82;
  stroke-dashoffset: -62px;
}
.ham7.active .middle {
  stroke-dashoffset: 23px;
}
.ham7.active .bottom {
  stroke-dashoffset: -83px;
}
.ham8 .top {
  stroke-dasharray: 40 160;
}
.illustration{
    display: none;
}
}