/* assets/css/base.css */
:root{
  --container: 1400px;
  --gap: 24px;
  --radius: 16px;
  --bg-0: #0a0d12;
  --bg-1: #0e131a;
  --bg-2: #121823;
  --glass: rgba(20, 26, 34, 0.55);
  --stroke: #202733;
  --text: #eaf0f6;
  --muted: #9aa6b2;
  --brand: #f59e66;        /* peach/orange */
  --brand-2: #8fd0ff;      /* light blue accent */
  --btn-grad: linear-gradient(90deg, #ffa668, #ffcc8e);
  --shadow-1: 0 8px 24px rgba(0,0,0,.35);
}
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; background: #060912;  }
a{ color: var(--text); text-decoration: none; }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gap); }
.grid{ display:grid; gap:var(--gap); }
.card{ background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--radius); backdrop-filter: blur(10px); }
.btn{ display:inline-block; padding: 12px 18px; font-weight:700; border-radius: 12px; background: var(--btn-grad); color:#1b1009; box-shadow: var(--shadow-1); }
.btn--ghost{ background: transparent; border:1px solid #343d49; color: var(--text); }
.badge{ display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border:1px solid #2a3140; font-size: 12px; color:var(--muted); }
.muted{ color: var(--muted); }
.center{ text-align:center; }
h1,h2,h3,h4{ margin:0 0 12px; line-height:1.15; }
h1{ font-size: clamp(34px, 6vw, 64px); letter-spacing:.2px; }
h2{ font-size: clamp(24px, 4vw, 36px); }
.round{ border-radius: var(--radius); }
hr.sep{ height:1px; border:0; background: #1e2430; margin: 24px 0; }
.shadow{ box-shadow: var(--shadow-1); }
.visually-hidden{ position:absolute; left:-9999px; }
img{ display:block; max-width:100%; height:auto; }



body{
  color: white;
}
html, body, #page {
    height: unset !important;
    z-index: 99999;
    position: relative;
}
.site{
position: relative;
}
.site::after{

      content: "";
    position: absolute;
    top: 0;
    z-index: -1;
    right:  0;
    width: 1440px;
    height: 1182px;
    background-image: url(../img/a3.webp);
    background-size: contain;
    background-repeat: no-repeat;
}
@media (max-width:768px){
  ::after{
    content:unset !important
  }

}
.btn:hover,a:hover{
opacity: 0.8 ;
}

@media (max-width:768px){
    
}