@import url(/fonts/stylesheet.css);

:root{
  --bg:#0b0f15;
  --card:#0e1622;
  --card2:#121b28;
  --txt:#e7ecf3;
  --text:var(--txt);
  --muted:#8ea2b6;
  --win:#1ecb7b;
  --lose:#ff5f6d;
  --push:#f0b429;
  --line:rgba(255,255,255,.06);
  --glow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --accent:#1ecb7b;
  --accent-2:#4edca0;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --card-2:var(--card2);
}

html, body{
  background: linear-gradient(180deg, #0f1319 0%, #0b0d10 100%);
}

*{ font-family: inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; }

/* helpers */
.muted{ color: var(--muted); }
.fw-800{ font-weight:800; }
.vs{ opacity:.7; margin:0 6px; }

/* effects */
.glass{ backdrop-filter: saturate(120%) blur(8px); background: rgba(255,255,255,.02); border:1px solid var(--line); }
.hero-gradient{ position:relative; overflow:hidden; }
.hero-gradient::after{
  content:""; position:absolute; inset:auto -20% -70% -20%; height:140%;
  background: radial-gradient(60% 60% at 50% 100%, rgba(90,176,255,.18), transparent 70%);
  pointer-events:none;
}
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform: translateY(0); }

/* navbar + footer */
.navbar-blur{ background:rgba(16,20,28,.7); backdrop-filter: blur(8px); border-bottom:1px solid var(--line); }
.footer-border{ border-color: var(--line) !important; }

/* sections */
.section-title{
  text-align:center; color:var(--txt); font-weight:800; letter-spacing:.2px; margin-bottom:18px;
}

/* results */
.results-wrapper{
  background: linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow: var(--glow); padding:14px;
}
.prediction-card{
  display:flex; gap:16px; align-items:stretch;
  border:1px solid var(--line); border-radius:16px;
  padding:14px 16px; background: rgba(255,255,255,.02);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  position:relative; overflow:hidden;
}
.prediction-card + .prediction-card{ margin-top:12px; }
.prediction-card::after{
  content:""; position:absolute; inset:auto -30% -60% -30%; height:140%;
  background: radial-gradient(60% 60% at 50% 100%, rgba(255,255,255,.04), transparent 70%);
  pointer-events:none;
}
.prediction-card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.prediction-left{ flex:1; display:flex; flex-direction:column; gap:8px; }
.row-line{ display:flex; flex-wrap:wrap; gap:10px; }
.cell{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px dashed var(--line); border-radius:12px;
  color:var(--txt); background:rgba(255,255,255,.02); min-height:44px;
}
.cell .cell-label{ font-size:.8rem; color:var(--muted); }
.cell strong{ font-weight:700; letter-spacing:.2px; }
.cell-wide{ flex:1; }
.icon{ width:22px; height:22px; color:var(--muted); flex:0 0 auto; }
.prediction-right{ display:flex; align-items:center; justify-content:center; min-width:140px; }
.badge{
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px;
  font-size:.95rem; color:#08110d; background:var(--muted);
  font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.25);
}
.badge .icon{ width:20px; height:20px; color:#09130f; }
.is-win .badge{ background: var(--win); }
.is-lose .badge{ background: var(--lose); }
.is-push .badge{ background: var(--push); }

/* pagination */
.pagination{ --bs-pagination-color:var(--txt); }
.pagination .page-link{ background:transparent; border-color:var(--line); color:var(--txt); }
.pagination .page-link:hover{ background:rgba(255,255,255,.06); }
.pagination .active>.page-link{ background:var(--win); border-color:transparent; color:#08110d; }

/* pricing */
#pricing{ padding: clamp(28px,4vw,48px) 0; }
#pricing .pricing-head{ text-align:center; margin-bottom: clamp(16px,2.8vw,24px); }
#pricing h2{ color:var(--text); font-weight:800; letter-spacing:.2px; margin:0 0 6px; font-size: clamp(22px,3vw,30px); }

.pricing-grid{
  display:grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px,2vw,18px); max-width: 1100px; margin: 0 auto;
}
.plan-card{
  grid-column: span 4; position:relative;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(14px,2.4vw,18px);
  display:flex; flex-direction:column; gap:14px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
@media (max-width: 1199.98px){ .plan-card{ grid-column: span 6; } }
@media (max-width: 767.98px){ .plan-card{ grid-column: span 12; } }
.plan-card::after{
  /* content:""; position:absolute; inset:auto -30% -60% -30%; height:140%; */
  background: radial-gradient(60% 60% at 50% 100%, rgba(255,255,255,.05), transparent 70%);
  pointer-events:none;
}
.plan-card:hover{ transform: translateY(-3px); border-color: rgba(255,255,255,.16); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.plan-card.is-popular{ border-color: rgba(90,176,255,.4); box-shadow: 0 12px 36px rgba(90,176,255,.18), var(--shadow); }
.plan-card .plan-ribbon{
  position:absolute; top:12px; right:12px;
  background: linear-gradient(90deg, var(--accent-2), #7ac7ff); color:#061321;
  font-weight:800; font-size:.8rem; padding:6px 12px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(90,176,255,.35);
}
.plan-top{ display:flex; flex-direction:column; gap:10px; }
.plan-tag{
  display:inline-block; align-self:flex-start; padding:6px 10px; border-radius:999px;
  font-weight:700; letter-spacing:.2px; color:#061321; background: #9fd9ff;
}
.plan-card.is-popular .plan-tag{ background: #b9f7d7; }
.plan-title{ display:flex; align-items:center; gap:10px; color:var(--text); font-size: clamp(18px,2.6vw,22px); margin:0; }
.plan-title .icon{ width:22px; height:22px; color:var(--muted); }
.plan-price{ display:flex; align-items:baseline; gap:6px; color:var(--text); }
.plan-price .currency{ opacity:.85; font-weight:700; }
.plan-price .value{ font-weight:900; font-size: clamp(26px,4.4vw,34px); letter-spacing:.4px; }
.plan-price .note{ color:var(--muted); font-size:.9rem; }
.plan-features{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.plan-features li{
  display:flex; align-items:center; gap:10px; color:var(--text);
  padding:10px 12px; background: rgba(255,255,255,.02);
  border:1px dashed var(--line); border-radius:12px; min-height:44px;
}
.plan-features .icon{ width:20px; height:20px; color:var(--muted); flex:0 0 auto; }
.plan-cta{ margin-top:auto; }
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:12px 16px; border-radius: 14px; text-decoration:none;
  background: linear-gradient(180deg, var(--accent), #0fb968); color:#04120b;
  font-weight:900; letter-spacing:.3px; text-transform:uppercase;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 10px 24px rgba(30,203,123,.25);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.btn-ghost{ border:1px solid var(--line); background:transparent; color:var(--txt); }
.btn-ghost:hover{ background:rgba(255,255,255,.06); }

/* faq tweaks */
.accordion .accordion-button{
  background: transparent; color: var(--text); border: none;
}
.accordion .accordion-button:not(.collapsed){ color: var(--text); background: rgba(255,255,255,.03); }
.accordion .accordion-body{ color: var(--muted); }

/* light scheme fallback */
/* @media (prefers-color-scheme: light){
  :root{
    --bg:#f7f9fc; --card:#ffffff; --card2:#f3f6fb; --txt:#0b1220; --text:#0b1220;
    --muted:#52607a; --line:rgba(0,0,0,.08);
  }
  .badge .icon{ color:#ffffff; }
} */
/* подчёркиваем исход цветом результата */
.cell-outcome .outcome { font-weight: 900; letter-spacing: .3px; }
.is-win  .cell-outcome .outcome { color: var(--win); }
.is-push .cell-outcome .outcome { color: var(--push); }
.is-lose .cell-outcome .outcome { color: var(--lose); }
.is-wait .cell-outcome .outcome { color: var(--muted); }

.glow-logo { filter: drop-shadow(0 0 6px rgba(30,203,123,.6)); transition: filter .3s; }
.glow-logo:hover { filter: drop-shadow(0 0 10px rgba(30,203,123,.9)); }

.text-gradient {
  background: linear-gradient(90deg, #1ecb7b, #4edca0, #9fe6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  letter-spacing: .4px;
}
.navbar-brand .text-success {
    color: rgb(47 247 155) !important;
}




#contact .form-control,
#contact .form-select {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: all .2s ease;
}
#contact .form-control:focus,
#contact .form-select:focus {
  background: rgba(255,255,255,.06);
  border-color: var(--accent);
  box-shadow: 0 0 0 0.25rem rgba(30,203,123,.25);
}
#contact label { color: var(--muted); font-weight: 500; }


/* inputs */
.input-glass .form-control {
  border:1px solid var(--line);
  color: var(--text);
  border-radius: 14px;
  box-shadow: none;
}
.input-glass .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .25rem rgba(30,203,123,.25);
}
.input-glass label { color: var(--muted); }

/* tariff cards */
.tariff-grid .tariff-card {
  position: relative;
  display:block;
  cursor: pointer;
  border-radius: 18px;
  overflow: hidden;
}
.tariff-grid .tariff-card input {
  position:absolute; inset:0; opacity:0; pointer-events:none;
}
.tariff-grid .tariff-card .card-inner{
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px 16px 14px;
  background: linear-gradient(180deg, var(--card), var(--card2));
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  min-height: 100%;
}
.tariff-grid .tariff-card .icon { color: var(--muted); font-size: 1.1rem; }
.tariff-grid .tariff-card .tariff-top { display:flex; align-items:center; gap:10px; }
.tariff-grid .tariff-card .tariff-tag { color: var(--text); font-weight: 700; }
.tariff-grid .tariff-card .tariff-title { color: var(--text); font-weight:800; font-size:1.1rem; margin-top:8px; }
.tariff-grid .tariff-card .tariff-price { color: var(--text); font-weight:900; font-size:1.4rem; margin-top:4px; }
.tariff-grid .tariff-card .tariff-list { list-style: none; margin:10px 0 0; padding:0; }
.tariff-grid .tariff-card .tariff-list li { color: var(--muted); font-size:.95rem; }
.tariff-grid .tariff-card:hover .card-inner{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.tariff-grid .tariff-card.is-popular .card-inner {
  border-color: rgba(90,176,255,.35);
  box-shadow: 0 10px 28px rgba(90,176,255,.18);
}
.tariff-grid .tariff-card .ribbon{
  position:absolute; top:10px; right:10px; z-index:2;
  background: linear-gradient(90deg, var(--accent-2), #7ac7ff);
  color:#061321; font-weight:800; font-size:.75rem;
  padding:5px 10px; border-radius:999px;
}

/* selected state */
.tariff-grid .tariff-card input:checked + .card-inner{
  border-color: var(--accent);
  box-shadow: 0 0 0 .25rem rgba(30,203,123,.25), 0 16px 40px rgba(0,0,0,.45);
}

/* submit button spinner */
#submitBtn[disabled] .btn-text { opacity:.7; }

/* модалка под тёмную тему */
.modal-content.glass { background: rgba(19,24,32,.9); }
.btn-close-white { filter: invert(1); }

/* лёгкая тряска при ошибке */
.shake {
  animation: shake .35s ease;
}
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}


/* hero widget */
.hero-widget{ box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.hero-tabs .nav-link{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 12px;
  font-weight: 700;
}
.hero-tabs .nav-link.active{
  background: linear-gradient(180deg, var(--accent), #0fb968);
  color: #04120b;
  border-color: transparent;
}

/* stats */
.stats-grid{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:12px;
}
@media (min-width: 992px){ .stats-grid{ grid-template-columns: repeat(2,1fr);} }
.stat{
  border:1px dashed rgba(255,255,255,.08);
  background: rgba(12,18,27,.6);
  border-radius:12px;
  padding:12px;
}
.stat-top{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.95rem;}
.stat-top i{ color: var(--muted); }
.stat-val{ font-weight:900; font-size:1.4rem; letter-spacing:.2px; }

/* calculator */
.calc-form .form-control{
  background: rgba(255,255,255,.03)!important;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
}
.calc-result .result-exp,
.calc-result .result-profit{ font-weight:800; }


/* === PRELOADER =========================================================== */
.preloader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: radial-gradient(1200px 800px at 50% -10%, #151c26 0%, #0b0d10 70%);
  color: #e7ecf3;
  transition: opacity .45s ease, visibility .45s ease;
}
.preloader .preloader-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(0);
  transition: transform .45s ease, opacity .45s ease;
}
.preloader .logo{
  filter: drop-shadow(0 0 16px rgba(30,203,123,.25));
}
.preloader .spinner-border{
  border-width: .2rem;
  color: #1ecb7b;          /* акцент Win-Hunter */
  width: 2.25rem;
  height: 2.25rem;
}
.preloader.hide{
  opacity: 0;
  visibility: hidden;
}
.preloader.hide .preloader-inner{
  transform: translateY(6px);
  opacity: .0;
}

/* уважение системной настройки "меньше анимации" */
@media (prefers-reduced-motion: reduce){
  .preloader, .preloader .preloader-inner{ transition: none !important; }
}

/* На случай «белой вспышки» до загрузки CSS */
html, body{ background:#0b0d10; }