/* ---------- Tokens ---------- */
:root{
  --bg:#000000;
  --bg-soft:#06080b;
  --panel: rgba(22, 22, 22, 0.55);
  --panel-2: rgba(22, 22, 22, 0.75);
  --border: rgba(255, 255, 255, 0.14);
  --border-2: rgba(255, 255, 255, 0.22);
  --text:#ffffff;
  --muted: rgba(255, 255, 255, 0.72);

  --accent: rgb(71, 167, 253);   /* maiestas blue */
  --accent-2:#4098e6;            /* blue (darker) */
  --violet:#835fa8;              /* maiestas purple */

  --shadow: 0 10px 25px rgba(0,0,0,.55);
  --radius: 22px;

  /* optional: set a background image like maiestas sections
     --bg-image: url('./img/bg/1920/top.jpg');
  */
  --bg-image: url('../img/night.jpg');
}

/* ---------- Base ---------- */
html,body{height:100%;}
body{
  margin:0;
  min-width:320px;
  color:var(--text);
  font-family: GothamProLight, GothamProRegular, HelveticaNeueCyr, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:16px;
  line-height:1.65;
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 800px at 10% 0%, rgba(71,167,253,.12), transparent 60%),
    radial-gradient(900px 650px at 95% 15%, rgba(131,95,168,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg-soft) 55%, var(--bg) 100%);
  position:relative;
}

body::before{
  content:"";
  position:fixed; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.70)),
    var(--bg-image) center/cover no-repeat;
  z-index:-2;
  pointer-events:none;
}

/* light grain */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.22;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'>\
  <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/>\
  <feColorMatrix type='saturate' values='0'/>\
  <feComponentTransfer><feFuncA type='table' tableValues='0 0 0 .06 .14 0'/></feComponentTransfer></filter>\
  <rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}


a{color:var(--accent); text-decoration:none; transition:.25s;}
a:hover{text-decoration:underline;}
:focus{outline: none;}


/* Scrollbar (WebKit) */
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background: rgba(22,22,22,.85); box-shadow: inset 0 0 6px rgba(0,0,0,.35);}
::-webkit-scrollbar-thumb{background: var(--accent); border-radius: 10px;}

/* ---------- Layout panels (header/section) ---------- */
header, section{
  max-width:1100px;
  margin:40px auto;
  padding:34px 30px;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
header{
  padding:56px 40px;
}

/* ---------- Typography ---------- */
h1,h2,h3{margin:0 0 .6em; font-weight: normal;}
h1{
  font-family: GothamProBold, GothamProMedium, inherit;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height:1.05;
  letter-spacing: 2px;
  text-transform: uppercase;
}
h2{
  font-family: GothamProBold, GothamProMedium, inherit;
  font-size: clamp(20px, 2.9vw, 32px);
  letter-spacing: 1.5px;
}
h3{
  font-family: GothamProBold, GothamProMedium, inherit;
  font-size: 20px;
  letter-spacing: 1px;
}

p{margin:.7em 0; color: var(--muted);}

ul,ol{margin:.4em 0 1.1em 1.2em;}
li{color: var(--muted);}

/* utility list */
.nomarkers{list-style:none; padding-left:0; margin-left:0;}
.nomarkers>li{margin: 10px 0;}

/* ---------- “Info” links (clickable тезисы) ---------- */
.info{
  cursor:pointer;
  color: rgba(255,255,255,.88);
  border-color: rgba(71,167,253,.0); 
  transition: .4s;
}
.info:hover{
  color:#ffffff;
  border-bottom: thin solid rgba(71,167,253,.35); 
  text-decoration:none;
}

/* Hint icon look */
.info-icon{display:inline-flex; align-items:center; gap:.35rem; margin-left:.4rem; color: rgba(255,255,255,.85);}
.info-icon::after{
  content:"";
  width:18px; height:18px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff 0, rgba(255,255,255,.85) 35%, rgba(71,167,253,.95) 36%, rgba(64,152,230,.65) 78%);
  box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.25);
  opacity:.95;
}

/* Hide inline payloads used by JS modals */
.hidden-info, .hidden-faq{display:none;}
.faq{
  display:inline-block;
  margin-top: 10px;
  font-family: GothamProMedium, inherit;
  letter-spacing:1px;
  text-transform: uppercase;
  font-size: 12px;
}

/* ---------- Buttons ---------- */
.cta-buttons{margin-top: 10px;}
.cta-buttons a{
  display:inline-block;
  margin:10px 12px 0 0;
  padding:12px 22px;
  border-radius: 999px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 13px;
  color:#ffffff;
  border: 2px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 10px 25px rgba(0,0,0,.45);
  transition: .4s;
  font-weight: 500;
  box-sizing: border-box;
}
.cta-buttons a:hover{
  text-decoration:none;
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
  transition: .4s;
  background: rgba(255, 255, 255, 0.2);
}
.cta-buttons a:active{
  transform: translateY(1px);
}

/* ---------- Columns cards ---------- */
.columns{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}
.columns>div{
  flex:1 1 260px;
  padding:18px 18px;
  background: rgba(0,0,0,.18);
  border:1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  transition: .25s;
}
.columns>div:hover{
  border-color: rgba(71,167,253,.35);
  box-shadow: 0 12px 28px rgba(0,0,0,.5);
  transform: translateY(-2px);
}

/* ---------- Timeline items (if present) ---------- */
.timeline-item{
  background: rgba(22,22,22,.45);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:12px 14px;
  transition: background .2s ease, max-height .4s ease;
}
.timeline-item.active{ background: rgba(22,22,22,.7); }

/* ---------- Forms (inline + modal dynamic) ---------- */
form{margin-top: 16px;}
input,textarea,select{
  width:100%;
  margin: 10px 0 0 0;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font: inherit;
}
textarea{min-height: 110px; resize: vertical;}
input::placeholder, textarea::placeholder{color: rgba(255,255,255,.55);}

input:focus, textarea:focus, select:focus{
  border-color: rgba(71,167,253,.75);
  box-shadow: 0 0 0 3px rgba(71,167,253,.18);
}

.submit-button{
  margin: 40px 0 0 0;
  width:100%;
  padding: 20px;
  border:0;
  border-radius: 12px;
  cursor:pointer;
  font-family: GothamProMedium, inherit;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 500;
  color:#ffffff;
  background-image: linear-gradient(0deg, var(--accent-2) 0%, var(--accent) 100%);
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
  transition:.25s;
}
.submit-button:hover{
  filter: saturate(1.05);
}
.submit-button:active{
  transform: translateY(1px);
}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;
  inset:0;
  display:none;               /* shown by JS */
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 2000;
}
.modal-content{
  width: min(920px, 100%);
  max-height: 86vh;
  overflow:auto;
  position:relative;

  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.7);
}

.modal-body .anons{
  color: rgba(255,255,255,.70);
  margin-top: -6px;
}

.modal-close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border-radius: 42px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  color:#ffffff;
  font-size: 28px;
  line-height: 38px;
  cursor:pointer;
  transition:.25s;
}
.modal-close:hover{
  border-color: rgba(71,167,253,.7);
  background: rgba(71,167,253,.18);
}

/* ---------- Footer ---------- */
footer{
  max-width:1100px;
  margin: 18px auto 40px auto;
  padding: 0 30px;
  color: rgba(255,255,255,.55);
}
footer p{color: rgba(255,255,255,.55); font-size: 14px;}

/* ---------- Mobile ---------- */
@media (max-width:720px){
  header,section{margin:20px 14px; padding:24px 18px;}
  header{padding: 34px 18px;}
  h1{letter-spacing: 1px;}
  ul,ol{margin-left: 1.05em;}
  .cta-buttons a{width:100%; text-align:center;}
  section ul, section ol{padding-left: 0;}
  .text ul{padding-left: 0;}      
}

/* ---------- Graceful degradation ---------- */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  header, section, .modal-content{ background: rgba(22,22,22,.85); }
}
#formFields select:focus{border-color: rgba(71, 167, 253, .7);box-shadow: 0 0 0 2px rgba(71, 167, 253,.35);background: rgba(255,255,255,.04);}
#formFields input:focus{outline:none;border-color: rgba(71, 167, 253,.7);box-shadow: 0 0 0 2px rgba(71, 167, 253,.35);}
.text{font-size: 15px;}
#form form input, #form form textarea{box-sizing: border-box;}
#formFields label{font-weight: 500;}
.timeline-item:hover{border-color: rgba(71,167,253,.35);}
.info{ font:inherit; line-height:inherit; }
header p {font-size: 1.12em;}
.columns .info:hover{border-bottom:none;}