:root{
 --bg1:#f6f8fc;
 --bg2:#eef3ff;
 --text:#0f172a;
 --muted:#64748b;
 --line:#e5e7eb;
 --blue:#2b6fff;
 --blue2:#1f56e8;
 --shadow: 0 18px 50px rgba(15, 23, 42, .10);
 --shadow2: 0 10px 30px rgba(15, 23, 42, .08);
 --radius: 18px;
}

*{box-sizing:border-box}
html{
  min-height: 100%;
}

body{
  margin: 0;
  min-height: 100%;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
}

.container{
 width:min(1120px, calc(100% - 32px));
 margin:0 auto;
}

.bg{
 position:fixed;
 inset:-40px;
 pointer-events:none;
 background:
   radial-gradient(900px 500px at 25% 10%, rgba(43,111,255,.22), transparent 60%),
   radial-gradient(700px 450px at 80% 20%, rgba(93,64,255,.14), transparent 55%),
   radial-gradient(800px 500px at 55% 85%, rgba(0, 214, 255,.12), transparent 60%);
 filter: blur(14px);
 opacity:.9;
}

/* =========================
   HEADER: Connect always right (desktop + mobile)
   ========================= */

.header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.65);
  border-bottom: 1px solid rgba(229,231,235,.8);
}

.headerRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: nowrap;           /* ключевое: не переносим на 2 строки */
  padding: 14px 0;
}

/* Left brand block must be allowed to shrink */
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;                /* ключевое: позволяет ужиматься */
}

.brandText{ min-width: 0; }

.brandName{
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42vw;             /* чтобы не сдвигало кнопки на мобиле */
}

.brandSub{
  opacity: .75;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42vw;
}

/* Right actions always on the right */
.headerActions,
.headerActions.premiumActions{
  margin-left: auto;
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Make language select compact */
.langSelect{
  height: 38px;
  padding: 0 10px;
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid rgba(229,231,235,.9);
  background: #fff;
}

/* Mobile tweaks */
@media (max-width: 520px){
  .brandSub{ display:none; }   /* освобождаем место, чтобы Connect не уезжал */
  .brandName{ max-width: 52vw; }
  .headerActions{ gap: 8px; }
}

/* Buttons */
.btn{
 height:42px;
 padding:0 18px;
 border-radius:14px;
 border:1px solid transparent;
 font-weight:800;
 cursor:pointer;
 transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn:active{transform: translateY(1px)}
.btn:disabled{opacity:.55; cursor:not-allowed}

.btnPrimary{
  background: linear-gradient(135deg,#2f6bff,#4f85ff);
  color:#fff;
}
.btnPrimary:hover{box-shadow: 0 18px 40px rgba(43,111,255,.28)}
.btnGhost{
 background: rgba(255,255,255,.75);
 border-color: var(--line);
 color: var(--text);
}
.btnGhost:hover{background:#fff}

.btnBig{
 height:46px;
 padding:0 18px;
 border-radius:14px;
 font-size:14px;
}

/* Main / Hero */
.main{padding: 28px 0 44px}

.hero{
 display:grid;
 grid-template-columns: 1.08fr .92fr;
 gap:18px;
 align-items:flex-start;
 margin-top:8px;
}

.h1{
 margin: 10px 0 8px;
 font-size: 18px;
 font-weight: 700;
 line-height: 1.2;
 letter-spacing: -0.02em;
}
.lead{
 margin:0 0 16px;
 color: var(--muted);
 font-size:14px;
 line-height:1.55;
}
.heroCTA{display:flex; gap:10px; flex-wrap:wrap; margin: 14px 0 16px}

.hint{
 display:flex;
 gap:10px;
 align-items:flex-start;
 background: rgba(255,255,255,.7);
 border:1px solid rgba(229,231,235,.9);
 border-radius: var(--radius);
 padding:12px 12px;
 box-shadow: var(--shadow2);
 margin: 10px 0 12px;
}
.hintIcon{
 width:22px;height:22px;border-radius:7px;
 display:flex;align-items:center;justify-content:center;
 background: rgba(43,111,255,.12);
 color: var(--blue2);
 font-weight:900;
}
.hintText{color:#334155; font-size:14px; line-height:1.35}


.warn{
 display:flex; align-items:center; gap:10px;
 padding: 10px 12px;
 border-radius: 14px;
 background: rgba(255, 248, 215, .8);
 border: 1px solid rgba(245, 158, 11, .25);
 margin-top: 12px;
 color:#92400e;
 font-weight:600;
 font-size:14px;
}

/* Cards */
.card{
 background: rgba(255,255,255,.78);
 border:1px solid rgba(229,231,235,.95);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
}

/* Gauge */
.gaugeCard{padding:16px}
.gaugeTop{
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:14px;
 margin-bottom: 10px;
}
.cardTitle{font-weight:800;font-size:18px;}
.cardSub{color:#111; font-size:14px; margin-top:2px}
.chip{
 font-size:11px;
 font-weight:600;
 padding:7px 10px;
 border-radius:999px;
 background: rgba(43,111,255,.10);
 color: #2563eb;
 border:1px solid rgba(43,111,255,.18);
  white-space: nowrap;
}

/* Sections */
.section{padding: 24px 0}
.sectionHead{margin-bottom: 12px}
.h2{margin:0 0 6px; font-size:18px; letter-spacing:-.02em;font-weight: 700; }
.p{margin:0; color: #111; line-height:1.55}

.grid3{
 display:grid;
 grid-template-columns: repeat(3, 1fr);
 gap:12px;
 margin-top: 12px;
}
.step,.feature{padding:14px}
.stepIcon{
 width:40px;height:40px;border-radius:14px;
 display:flex;align-items:center;justify-content:center;
 background: rgba(43,111,255,.10);
 border:1px solid rgba(43,111,255,.16);
 font-size:20px;
}
.stepTitle{margin-top:13px; font-weight:600}
.stepText{margin-top:6px; color: #111; font-size:14px; line-height:1.45}

.featureTitle{font-weight:600}
.featureText{margin-top:6px; color:#111; font-size:14px; line-height:1.45}

.split{
 display:grid;
 grid-template-columns: 1fr 1fr;
 gap:12px;
}
.info{padding:16px}
.h3{margin:0 0 8px; font-size:20px}
.list{margin:10px 0 0; padding-left: 18px; color:#334155}
.list li{margin: 6px 0}

/* Partners */
.marquee{padding: 12px; overflow:hidden}
.marqueeTrack{
 display:flex;
 gap:12px;
 width:max-content;
 animation: marquee 30s linear infinite;
}
.marqueeRow{display:flex; gap:12px}
.partnerChip{
 padding: 10px 12px;
 border-radius: 999px;
 border:1px solid rgba(229,231,235,.95);
 background: rgba(255,255,255,.78);
 color: #334155;
 font-weight:400;
 font-size:14px;
 white-space:nowrap;
 box-shadow: 0 8px 22px rgba(15,23,42,.06);
 opacity:.92;
}
@keyframes marquee{
 0%{transform: translateX(0)}
 100%{transform: translateX(-50%)}
}
.fine{margin-top:10px; color:var(--muted); font-size:14px}

/* Modal */
.modal{
 position:fixed;
 inset:0;
 background: rgba(15,23,42,.45);
 display:flex;
 align-items:center;
 justify-content:center;
 padding: 18px;
 z-index:50;
}
.hidden{display:none}
.modalCard{
 width:min(420px, 100%);
 background:#fff;
 border-radius: 22px;
 box-shadow: 0 24px 80px rgba(15,23,42,.22);
 border:1px solid rgba(229,231,235,.9);
 overflow:hidden;
}
.modalHead{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding: 14px 16px;
 border-bottom:1px solid rgba(229,231,235,.9);
}
.modalTitle{font-weight:600}
.iconBtn{
 width:36px;height:36px;
 border-radius:13px;
 border:1px solid rgba(229,231,235,.95);
 background: #fff;
 cursor:pointer;
 font-size:20px;
}
.iconBtn:hover{background:#f8fafc}
.modalBody{padding: 18px 16px}
.modalText{margin-top: 12px; color: var(--muted); line-height:1.5}
.modalActions{padding: 14px 16px; border-top:1px solid rgba(229,231,235,.9); display:flex; justify-content:flex-end}

/* =========================
   Responsive + Connect fix
   ========================= */

@media (max-width: 980px){
  .hero{grid-template-columns: 1fr;}
}

@media (max-width: 680px){
  .grid3{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;}
  .headerRow{flex-wrap:nowrap;}
}

/* ============================= */
/*        WALLET DROPDOWN        */
/* ============================= */

.walletWrap{
  position: relative;
}

.walletBtn{
  height: 42px;
  width: 170px;
  padding: 0 16px;
  border-radius: 10px;
  border: none;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, box-shadow .2s ease;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  background: #2563eb;
  color: #fff;
}

.walletBtn:hover{
  background: #1d4ed8;
}

.walletBtn.connected{
  background: #22c55e;
}

.walletBtn.connected:hover{
  background: #16a34a;
}

.walletMenu{
  position: absolute;
  right: 0;
  top: calc(100% + 6px);

  width: 170px;
  padding: 10px 12px;

  border-radius: 12px;

  background: #575757;
  border: 1px solid rgba(255,255,255,.08);

  box-shadow: 0 10px 22px rgba(0,0,0,.15);

  color: #fff;
  display: none;
  z-index: 9999;
}

.walletMenu.open{
  display: block;
}

.wmSection{
  padding: 4px 0;
}

.wmLabel{
  font-size: 14px;
  opacity: .55;
  margin-bottom: 2px;
}

.wmValue{
  font-size: 14px;
  font-weight: 600;
}

.wmMono{
  font-size: 14px;
  font-family: monospace;
  opacity: .85;
  word-break: break-all;
}

.wmDivider{
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 8px 0;
}

.wmAction{
  width: 100%;
  padding: 8px 6px;
  background: transparent;
  border: none;
  color: #fff;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease;
}

.wmAction:hover{
  background: rgba(255,255,255,.08);
}

.wmAction.wmDanger:hover{
  background: rgba(255,70,70,.18);
}
.heroSubTitle{
  margin-top:20px;
  font-size:14px;
  font-weight:600;
  color:#2b3a55;
}

.heroList{
  margin-top:12px;
  padding-left:18px;
  color:#5a6b85;
  line-height:1.6;
  list-style:none;
}

.heroList li{
  margin-bottom:6px;
  color: #111;
}
.heroRight{
  margin-top: auto; /* попробуй 40–80px */
}
.heroLeft{
  position: relative;
  padding: 38px 42px;
  border-radius: 22px;

  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.75),
    rgba(255,255,255,0.55)
  );

  backdrop-filter: blur(10px);

  border: 1px solid rgba(20,30,50,0.08);

  box-shadow:
    0 25px 50px rgba(0,0,0,0.06),
    0 2px 0 rgba(255,255,255,0.8) inset;
}

/* ===== LEGAL ROW ===== */

.legalRow{
  display:flex;
  gap:14px;
  margin-top:20px;
}

.legalBtn{
  flex:1;
  height:48px;
  border-radius:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:700;
  font-size:13px;
  letter-spacing:.3px;

  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.35));
  border: 1px solid rgba(15,23,42,0.12);

  color:#0f172a;
  cursor:pointer;

  box-shadow:
    0 6px 18px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.6);

  transition: all .18s ease;
}

.legalBtn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px rgba(15,23,42,0.12),
    inset 0 1px 0 rgba(255,255,255,0.7);
}

.legalBtn:active{
  transform: translateY(0);
  box-shadow:
    0 4px 12px rgba(15,23,42,0.10);
}

@media (max-width:420px){
  .legalRow{
    gap:10px;
  }
  .legalBtn{
    height:44px;
    font-size:14px;
  }
}
/* ===========================
   LEGAL MODAL BUTTON
=========================== */

#legalModal .modalActions{
  display:flex;
  justify-content:center;   /* центрируем */
  padding-top:20px;
}

.legalCloseBtn{
  -webkit-appearance: none;
  appearance: none;

  min-width:160px;
  height:44px;

  border-radius:14px;

  background:#1c1f26;       /* ЧЁРНАЯ как на ПК */
  color:#ffffff !important;

  font-weight:600;
  font-size:14px;
  letter-spacing:0.3px;

  border:none;
  cursor:pointer;

  transition:all .25s ease;
}

.legalCloseBtn:hover{
  background:#2a2f3a;
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.legalCloseBtn:active{
  transform:scale(0.97);
}

/* ===== PARTNERS ===== */

.marqueeRow{
  display:flex;
  gap:14px;
  align-items:center;
}

.partnerChip{
  display:flex;
  align-items:center;
  gap:10px;

  padding:10px 16px;
  border-radius:999px;

  background: rgba(255,255,255,0.6);
  border:1px solid rgba(0,0,0,0.05);

  text-decoration:none;
  color:#111;
  font-size:14px;
  font-weight:600;
}

/* логотип */
.partnerChip img{
  width:20px;
  height:20px;
  object-fit:contain;
  display:block;
}

/* чтобы не растягивались */
.partnerChip span{
  white-space:nowrap;
}
/* =========================
   OFFICIAL CLEAN FOOTER
========================= */

.footer{
  border-top: 1px solid rgba(15,23,42,0.08);
  background: #f8fafc;
}

.footerRow{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
  padding:22px 0;
}

/* Верхняя строка */
.footerCopy{
  font-size:14px;
  font-weight:600;
  color:#0f172a;
  letter-spacing:0.3px;
}

/* Вторая строка */
.footerTagline{
  font-size:14px;
  font-weight:600;
  color:rgba(15,23,42,0.65);
}

/* =========================
   MOBILE
========================= */

@media (max-width:520px){

  .footerRow{
    padding:18px 12px;
    gap:4px;
  }

  .footerCopy{
    font-size:14px;
  }

  .footerTagline{
    font-size:14px;
  }

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

.logoMain{
  font-weight:700;
  letter-spacing:0.2px;
}

.logoIcon{
  width:34px;
  height:34px;
}
@media (max-width: 520px){
  /* сама карточка слева */
  .heroLeft{
    padding: 22px 18px !important;   /* было больше — станет компактнее */
  }

/* заголовок */
.h1{
  margin: 6px 0 10px !important;
}

  /* подзаголовок */
  .heroSubTitle{
    margin: 0 0 12px !important;
  }

  /* список */
  .heroList{
    margin: 0 0 14px !important;
  }
  .heroList li{
    margin: 6px 0 !important;
  }

  /* подсказка (hint) */
  .hint{
    margin: 10px 0 0 !important;     /* убираем лишний отступ снизу */
    padding: 12px 12px !important;
  }
}
#legalBody{
  max-height: min(60vh, 520px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* =========================
  RISK PROFILE 1v1 (ref #2)
  ========================= */

.riskProfileCard{
 background:#f6f3ea;
 border-radius:16px;
 padding:16px 16px 14px;
 box-shadow:
   0 18px 40px rgba(0,0,0,.08),
   inset 0 0 0 1px rgba(0,0,0,.04);
}

.rpTitle{
 font-size:18px;
 font-weight:800;
 letter-spacing:-.02em;
 margin:4px 0 8px;
 color:#111;
}

.rpGaugeWrap{
 position:relative;
 padding:10px 0 6px;
}

.rpGauge{
 width:100%;
 height:auto;
 display:block;
}

.rpDots{
 fill:none;
 stroke:#9aa7b8;
 stroke-width:4;
 stroke-linecap:round;
 stroke-dasharray:1 14;
 opacity:.6;
}

.rpSeg{
 fill:none;
 stroke-width:30;
 stroke-linecap:butt;
 filter: drop-shadow(0 6px 12px rgba(0,0,0,.10));
}

.rpSegBlue{
  stroke:#2f4662;
  stroke-dasharray:20 6;   /* мельче, плотнее */
}

.rpSegRed{
  stroke:#d44a45;
  stroke-dasharray:20 6;
}

.rpInnerArc{
 fill:none;
 stroke:#d2dae4;
 stroke-width:28;
 stroke-linecap:round;
 opacity:.98;
}

.rpTicks line{
 stroke:#6e7a92;
 stroke-linecap:round;
}

.rpLeftDot{
 fill:#2f4662;
 opacity:.9;
}

.rpNeedleGroup{
 transform-origin:260px 265px;
 transform:rotate(-180deg); /* 0 = слева */
 transition:transform .55s cubic-bezier(.2,.9,.2,1);
}

.rpNeedle{
 stroke:#444;
 stroke-width:8;
 stroke-linecap:round;
}

.rpHub{
 fill:#111;
}

.rpArrow{
 fill:#111;
 opacity:.98;
 filter: drop-shadow(0 3px 4px rgba(0,0,0,.35));
}

#rpNum{
font-size:24px;
font-weight:700;
color:#444;
letter-spacing:-0.5px;
line-height:1;
text-shadow:0 1px 1px rgba(0,0,0,0.15);
-webkit-font-smoothing:antialiased;
}

.rpSlash{
 font-size:30px;
 font-weight:800;
 color:#2a2a2a;
 opacity:.7;
}

.rpBadge{
 position:absolute;
 left:50%;
 top:166px;
 transform:translateX(-50%);
 min-width:250px;
 text-align:center;
 padding:12px 16px;
 border-radius:18px;
 font-size:27px;
 font-weight:800;
 letter-spacing:.02em;
 color:#fff;

 background:linear-gradient(180deg,#d9675d,#c33f3c);
 box-shadow:
   0 16px 28px rgba(195,63,60,.35),
   inset 0 1px 0 rgba(255,255,255,.35);
 position:absolute;
}

.rpBadge::after{
 content:"";
 position:absolute;
 left:50%;
 bottom:-9px;
 width:0;height:0;
 transform:translateX(-50%);
 border-left:12px solid transparent;
 border-right:12px solid transparent;
 border-top:12px solid #c33f3c;
 filter: drop-shadow(0 8px 10px rgba(195,63,60,.25));
}

.rpList{
 list-style:none;
 margin:12px 0 14px;
 padding:0;
}

.rpList li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px !important;
  font-weight:500;  /* чуть легче */
  color:#111;
  margin:10px 0;
}

.rpDot{
 width:12px;height:12px;border-radius:50%;
 background:#e4574d;
 box-shadow:
 0 0 0 1.5px rgba(255,255,255,.75) inset,
 0 0 0 3.5px rgba(241, 8, 8, 0.1);
 flex:0 0 auto;
}

.rpLine{
 flex:1;
 height:2px;
 background:rgba(0,0,0,.18);
 margin-left:10px;
 border-radius:2px;
 opacity:.35;
}

.rpBtn{
 width:100%;
 height:50px;
 border:0;
 border-radius:14px;
 font-size:20px;
 font-weight:800;
 color:#fff;
 background:linear-gradient(180deg,#1d5dff,#0e3fe6);
 box-shadow:0 18px 30px rgba(14,63,230,.30);
 cursor:pointer;
}

.rpBtn:active{ transform:translateY(1px); }
/* ПЕРЕНОСИМ 0/100 ВНИЗ (на место бывшей полосы) */
.rpScore{
  position:absolute;
  left:50%;
  top:225px;                 /* <-- двигай: 140-170 пока не станет 1в1 */
  transform:translateX(-50%);
  display:flex;
  align-items:baseline;
  gap:8px;
  pointer-events:none;
}
@media (max-width: 520px){
  .rpTitle{ font-size: 18px; }
  .rpScore{ top: 155px; }
  .rpNum{ font-size: 50px; }
  .rpScore span{ font-size: 20px; }

  .rpList li{ font-size: 17px; margin: 9px 0; }
  .rpBtn{ height: 30px; font-size: 15px; }
}
/* =========================
   MOBILE FIX (iPhone)
   ========================= */
@media (max-width: 520px){

  .rpBtn{
  font-size: 13px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  height: auto !important;
  min-height: 44px;
  padding: 10px 12px !important;
}

  /* герой в 1 колонку */
  .hero{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 10px !important;
  }

  /* общий контейнер (если у тебя есть .main / .container) */
  .main{ padding: 18px 14px !important; }

  /* левый блок-карта */
  .heroLeft,
  .heroLeft .card,
  .hero .card{
    padding: 16px !important;
    border-radius: 18px !important;
  }

  /* заголовок первого блока */
  .heroLeft h1,
  .heroLeft .h1{
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    margin: 0 0 10px !important;
  }

  /* подзаголовок */
  .heroLeft .lead,
  .heroLeft p{
    font-size: 14px !important;
    line-height: 1.45 !important;
    margin: 0 0 10px !important;
  }

  /* список — делаем компактным и красивым */
  .heroLeft ul{
    margin: 10px 0 12px !important;
    padding-left: 18px !important;
  }
  .heroLeft li{
    font-size: 14px !important;
    line-height: 1.45 !important;
    margin: 6px 0 !important;
  }

  /* инфо-плашка снизу */
  .heroLeft .hint,
  .heroLeft .info,
  .heroLeft .note{
    padding: 12px 12px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  /* если иконка в плашке слишком большая */
  .heroLeft .hint i,
  .heroLeft .info i{
    transform: scale(.9);
  }
}
/* =========================
   WEB3 TECH HEADER (LEFT CARD)
   ========================= */

.techBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.28));
  border: 1px solid rgba(80,120,255,.18);
  box-shadow:
    0 14px 36px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
}

.techLive{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#20314b;
}

.techDot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#20d07a;
  box-shadow: 0 0 0 5px rgba(32,208,122,.18);
}

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

.techTag{
  font-size:14px;
  font-weight:600;
  color:#2a4fd8;
  background: rgba(80,120,255,.12);
  border: 1px solid rgba(80,120,255,.18);
  padding: 6px 10px;
  border-radius: 999px;
}

/* Mobile tweaks */
@media (max-width: 520px){
  .techBar{
    padding: 9px 10px;
    margin-bottom: 10px;
  }
  .techLive{ font-size:11px; }
  .techTag{ font-size:11px; padding:5px 9px; }
}
/* ===== AML WEB3 NODE LIST ===== */

.amlList{
  list-style:none;
  margin:24px 0 0;
  padding:0 0 0 40px;
  position:relative;
}

.amlList li{
  position:relative;
  margin-bottom:28px;
  font-size:14px;
  font-weight:400;
  color:#2a2f3a;
  display:flex;
  align-items:center;
  gap:14px;
}

/* OPTIONAL subtle hover */

.amlList li:hover .amlIcon{
  transform:scale(1.05);
  transition:.2s ease;
}

/* универсально: что угодно с классом is-ok станет “зелёным” */
.is-pending { opacity: .65; }
.is-ok { opacity: 1; }

.is-hidden {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
}

.risk-value.show {
  opacity: 1;
  transform: scale(1);
}

/* пока не активированы */
.rpDot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#dc2626;
  box-shadow:0 0 0 6px rgba(220,38,38,.18);
  animation:pulseRed 1.4s infinite ease-in-out;
  transition:all .35s ease;
}

.rpDot.is-on{
  background:#16a34a;
  box-shadow:0 0 0 4px rgba(22,163,74,.18);
  animation:none;
}

@keyframes pulseRed {
  0%   { box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
  50%  { box-shadow: 0 0 0 6px rgba(220,38,38,.06); }
  100% { box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
}

.scanMsg{
  margin-top: 14px;
  font-size: 14px;
  text-align: center;        /* ← ВАЖНО */
  color: rgba(0,0,0,.65);
  width: 100%;               /* ← чтобы занимал всю ширину */
}

/* Used by app.js while changing scan text */
.scanMsg.is-changing{
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

/* AML LIST CLEAN DOTS */

.amlList{
    list-style: none;
    padding: 0;
    margin: 0;
}

.amlList li{
    position: relative;
    padding-left: 22px;
    margin-bottom: 18px;
    font-size: 15px;
    color: #2a2f3a;
    line-height: 1.6;
}

/* синяя точка */
.amlList li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    background: #5b7cfa;
    border-radius: 50%;
}

.aml-note {
  margin-top: 18px;
}

.aml-divider {
  height: 1px;
  background: #e5e7eb;
  margin-bottom: 12px;
}

.aml-note p {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
}

/* success состояние */
.hint.is-success {
  background: rgba(22,163,74,0.05);
  border: 1px solid rgba(22,163,74,0.18);
}

/* зелёная точка */
.hintIcon.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #16a34a;
}

.rpBtn:disabled,
.rpBtn.is-disabled{
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.2);
  pointer-events: none;   /* 🔥 блокируем клики */
}

.heroLeft {
  background: linear-gradient(
  180deg,
  #eef2f6 0%,
  #e6ebf2 100%
);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 36px;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.06),
    0 4px 10px rgba(0, 0, 0, 0.04);
}

/* ===== MOBILE CLEAN BALANCE ===== */
@media (max-width: 560px){

  /* Заголовок блока */
  .amlIndexTitle{
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
  }

  /* Описание */
  .amlIndexDesc{
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #5f6675 !important;
  }

  /* Названия уровней */
  .amlLabel{
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  /* Проценты справа — главное уменьшить */
  .amlRange{
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
  }

  /* Отступы строк */
  .amlBandRow{
    padding: 12px 0 !important;
  }

  /* Полоски */
  .amlBar{
    height: 10px !important;
  }

}

/* ===== AML INFO LIST — softer glass (closer to your UI) ===== */

.amlInfoList{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}

/* плашка: НЕ белая, а стекло */
.amlInfoList li{
  display:flex;
  align-items:center;
  gap:14px;

  padding:14px 14px;
  border-radius:16px;

  background: rgba(255,255,255,.22);          /* меньше белого */
  border: 1px solid rgba(148,163,184,.18);    /* мягкий бордер */
  box-shadow: 0 10px 22px rgba(15,23,42,.04); /* очень лёгкая тень */

  color: rgba(15,23,42,.78);
  font-size: 15.5px;                          /* чуть меньше */
  font-weight: 560;                           /* не жирнить */
  line-height: 1.25;

  -webkit-tap-highlight-color: transparent;
}

/* иконка меньше и спокойнее */
.amlIcon{
  width:46px;
  height:46px;
  flex:0 0 46px;

  border-radius:999px;
  display:grid;
  place-items:center;

  background: rgba(37,99,235,.07);
  border: 1px solid rgba(37,99,235,.14);
}

.amlIcon svg{
  width:22px;
  height:22px;

  fill:none;
  stroke: rgba(29,78,216,.90);
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* живость на телефоне — но без "прыжков" */
@media (hover:none){
  .amlInfoList li:active{
    background: rgba(255,255,255,.30);
    border-color: rgba(37,99,235,.16);
  }
  .amlInfoList li:active .amlIcon{
    background: rgba(37,99,235,.10);
  }
}

/* переносы текста */
.amlInfoList li{
  align-items:flex-start;
  padding-top: 13px;
}
.amlInfoList li > :not(.amlIcon){
  margin-top: 2px;
}

/* ===== Desktop tuning for AML list (same look as mobile) ===== */

@media (min-width: 768px){

  .amlInfoList{
    gap: 10px;
    max-width: 560px;          /* чтобы не было “пусто” на широких экранах */
  }

  .amlInfoList li{
    padding: 12px 14px;
    border-radius: 16px;
    align-items: center;
    font-size: 15px;
    font-weight: 560;
  }

  .amlIcon{
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .amlIcon svg{
    width: 20px;
    height: 20px;
  }
}

/* Hover эффект на компе (как “живое” на телефоне) */
@media (hover:hover) and (pointer:fine){
  .amlInfoList li{
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }

  .amlInfoList li:hover{
    background: rgba(255,255,255,.30);
    border-color: rgba(37,99,235,.16);
    box-shadow: 0 14px 28px rgba(15,23,42,.06);
    transform: translateY(-1px);
  }

  .amlInfoList li:hover .amlIcon{
    background: rgba(37,99,235,.10);
  }
}

/* =========================
   AML INDEX — SOFT + CLEAN (single source of truth)
   Требования:
   - % справа ВВЕРХУ (над шкалой)
   - цвета мягкие/полупрозрачные
   - "Низкий/Средний/Высокий" и % не жирные
   ========================= */

.amlIndexCard{
  border-radius: 22px;
  padding: 22px 22px 18px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(120,130,160,.16);
  box-shadow:
    0 18px 45px rgba(15,23,42,.07),
    0 2px 8px rgba(15,23,42,.035);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.amlIndexTitle{
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: rgba(15,23,42,.92);
}

.amlIndexDesc{
  margin: 0 0 16px;
  color: rgba(71,85,105,.88);
  line-height: 1.55;
  max-width: 62ch;
}

.amlBands{
  margin-top: 8px;
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

/* ROW: header (left+%) + bar */
.amlBandRow{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "left right"
    "bar  bar";
  row-gap: 10px;
  column-gap: 12px;
  align-items: center;
  padding: 14px 12px;
}

.amlBandRow + .amlBandRow{
  border-top: 1px solid rgba(15,23,42,.08);
}

/* left: dot + label */
.amlLeft{
  grid-area: left;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.amlDot{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  flex: 0 0 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,.85);
  filter: saturate(.95);
  opacity: .88; /* мягче */
}

.amlDot.is-low{  background: rgba(34,197,94,.62); }
.amlDot.is-med{  background: rgba(245,158,11,.62); }
.amlDot.is-high{ background: rgba(239,68,68,.62); }

.amlLabel{
  font-size: 16px;
  font-weight: 600;            /* меньше жирности */
  letter-spacing: -0.01em;
  color: rgba(15,23,42,.86);
  white-space: nowrap;
}

/* right: % */
.amlRight{
  grid-area: right;
  justify-self: end;
  align-self: center;
}

.amlRange{
  font-size: 16px;
  font-weight: 600;            /* меньше жирности */
  letter-spacing: -0.01em;
  color: rgba(15,23,42,.82);
  white-space: nowrap;
}

/* bar */
.amlBar{
  grid-area: bar;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;

  background: rgba(148,163,184,.22);
  border: 1px solid rgba(15,23,42,.07);
  box-shadow:
    inset 0 2px 7px rgba(15,23,42,.05);
}

/* glossy overlay (very light) */
.amlBar::after{
  content:"";
  position:absolute;
  inset: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
  pointer-events:none;
}

/* fills */
.amlBar.is-low::before,
.amlBar.is-med::before,
.amlBar.is-high::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .80; /* мягче */
}

/* более живые, но мягкие */

.amlBar.is-low::before{
  background: linear-gradient(
    90deg,
    rgba(34,197,94,.85) 0%,
    rgba(34,197,94,.70) 45%,
    rgba(245,158,11,.45) 100%
  );
}

.amlBar.is-med::before{
  background: linear-gradient(
    90deg,
    rgba(245,158,11,.90) 0%,
    rgba(245,158,11,.70) 60%,
    rgba(245,158,11,.40) 100%
  );
}

.amlBar.is-high::before{
  background: linear-gradient(
    90deg,
    rgba(239,68,68,.88) 0%,
    rgba(239,68,68,.65) 60%,
    rgba(239,68,68,.38) 100%
  );
}

/* footer divider + note */
.amlIndexCard hr,
.amlIndexDivider{
  border: 0;
  height: 1px;
  margin: 14px 0 12px;
  background: rgba(15,23,42,.10);
}

.amlIndexNote,
.amlIndexFoot,
.amlIndexCard .amlFootText{
  color: rgba(71,85,105,.90);
  line-height: 1.6;
  margin: 0;
  font-size: 14px;
}

/* MOBILE */
@media (max-width: 560px){
  .amlIndexCard{ padding: 18px 16px 14px; border-radius: 20px; }
  .amlBands{ padding: 10px; border-radius: 16px; }
  .amlLabel{ font-size: 16px; }
  .amlRange{ font-size: 18px; font-weight: 700; } /* чуть выделить, но не “жирно” */
  .amlBar{ height: 11px; }
}

.amlIndexHeader .amlIndexTitle{
  font-size: 18px !important;
  font-weight: 800 !important;
}

/* ===== FAQ Premium Clean ===== */

.faq{
  margin-top:40px;
}

/* карточка */
.faqItem{
  background:rgba(255,255,255,.75);
  border:1px solid rgba(120,130,160,.15);
  border-radius:16px;
  margin-bottom:14px;
  overflow:hidden;
  transition:.25s ease;
  backdrop-filter:blur(6px);
}

.faqItem:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.07);
}

/* заголовок */
.faqItem summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
  font-weight:600;
  font-size:16px;
}

.faqItem summary::-webkit-details-marker{
  display:none;
}

/* иконка слева */
.faqIcon{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(79,124,255,.08);
  border-radius:10px;
  font-size:16px;
  flex-shrink:0;
}

.faqText{
  flex:1;
}

/* стрелка справа (идеально по центру) */
.faqItem summary::after{
  content:"";
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(15,23,42,.06);
  flex-shrink:0;
  transition:.25s ease;

  display:flex;
  align-items:center;
  justify-content:center;

  /* SVG стрелка */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='rgba(15,23,42,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
}

/* поворот при открытии */
.faqItem[open] summary::after{
  transform:rotate(180deg);
  background:rgba(79,124,255,.12);
}

/* ответ */
.faqA{
  padding:0 20px 18px 68px;
  font-size:14px;
  line-height:1.6;
  color:rgba(15,23,42,.75);
}

/* ===== ABOUT / О СЕРВИСЕ (строгий, без мусора) ===== */

.aboutBlock{
 padding: 28px 0 10px;
}

.aboutWrap{
 max-width: 1120px;
 margin: 0 auto;
 padding: 0 18px;
}

.aboutHead{
 margin-bottom: 18px;
}

.aboutTitle{
 margin: 0 0 10px;
 font-size: 18px;
 line-height: 1.15;
 font-weight: 800;
 letter-spacing: -0.02em;
 color: #0f172a;
}

.aboutLead{
 margin: 0;
 max-width: 860px;
 font-size: 16px;
 line-height: 1.7;
 color: rgba(15,23,42,.72);
}

/* grid */
.aboutGrid{
 display: grid;
 grid-template-columns: repeat(2, minmax(0,1fr));
 gap: 14px;
 align-items: start;
}

/* card */
.aboutCard{
 background: rgba(255,255,255,.72);
 border: 1px solid rgba(120,130,160,.18);
 border-radius: 18px;
 padding: 20px;
 box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.aboutCardTop{
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 12px;
}

.aboutIco{
 width: 34px;
 height: 34px;
 border-radius: 10px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: rgba(15,23,42,.04);
 color: rgba(15,23,42,.70);
 flex: 0 0 34px;
}

.aboutIco svg{
 width: 20px;
 height: 20px;
}

.aboutCardTitle{
 margin: 0;
 font-size: 16px;
 line-height: 1.35;
 font-weight: 600;
 color: #0f172a;
}

/* list */
.aboutList{
 margin: 0;
 padding: 0;
 list-style: none;
 display: grid;
 gap: 10px;
}

.aboutList li{
 position: relative;
 padding-left: 18px;
 color: rgba(15,23,42,.72);
 font-size: 14.5px;
 line-height: 1.6;
}

.aboutList li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .8em;             /* опорная точка */
  transform: translateY(-50%);  /* <-- центрируем по первой строке */

  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(59,130,246,.28);
  box-shadow: 0 0 0 3px rgba(59,130,246,.10);
}

/* note inside Security card */
.aboutNote{
 margin-top: 12px;
 padding: 12px 12px;
 border-radius: 14px;
 border: 1px solid rgba(120,130,160,.18);
 background: rgba(255,255,255,.62);
 display: grid;
 grid-template-columns: 22px 1fr;
 gap: 6px;
 align-items: start;
}

.aboutNoteIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  background: transparent;   /* убрали фон */
  border-radius: 0;          /* убрали скругление */
  padding: 0;
  color: #2563eb;            /* синий как вверху */
}

.aboutNoteIcon svg {
  width: 22px;
  height: 22px;
}

.aboutNoteText{
 margin: 0;
 color: rgba(15,23,42,.70);
 font-size: 14px;
 line-height: 1.65;
}

.aboutNoteText strong{
 color: #0f172a;
 font-weight: 800;
}

/* responsive */
@media (max-width: 800px){
 .aboutTitle{ font-size: 18px; }
 .aboutGrid{ grid-template-columns: 1fr; }
}

/* ===============================
   AML RESULT MODAL
================================= */

.aml-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.aml-modal.is-open {
  display: flex;
}

.aml-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
}

.aml-modal__dialog {
  position: relative;
  width: 420px;
  background: #ffffff;
  border-radius: 20px;
  padding: 32px 28px 28px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  text-align: center;
  z-index: 2;
  animation: modalFade 0.25s ease;
}

@keyframes modalFade {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.aml-modal__x {
  position: absolute;
  top: 14px;
  right: 16px;
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  color: #94a3b8;
}

.aml-modal__badge {
  width: 82px;
  height: 82px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, #e6f9f0, #d9f4e6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aml-modal__ring {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.aml-modal__check {
  width: 28px;
  height: 28px;
}

.aml-modal__title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 12px;
}

.aml-modal__text {
  font-size: 14px;
  color: #475569;
  margin-bottom: 18px;
}

.aml-modal__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 30px;
  background: #e8f8ee;
  margin-bottom: 22px;
  font-size: 14px;
}

.aml-modal__risk {
  color: #16a34a;
}

.aml-modal__btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 16px;
}

.aml-modal__foot {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.aml-modal__progress {
  margin-top: 14px;
  height: 4px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.aml-modal__progress span {
  display: block;
  height: 100%;
  width: 70%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 4px;
}

.footerMail a{
color:#2563eb;
font-weight:500;
text-decoration:none;
}

.footerMail a:hover{
  text-decoration:underline;
}

.mailBox{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:10px;
  background:#eef4ff;
  color:#2563eb;
  font-size:16px;
  text-decoration:none;
  font-weight:500;
}

.mailBox:hover{
  background:#e0ebff;
}

/* ===== Language Modal ===== */

.lang-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.lang-modal__card {
  background: #ffffff;
  padding: 40px 50px;
  border-radius: 18px;
  width: 520px;
  max-width: 92%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.lang-modal__icon {
  font-size: 56px;
  margin-bottom: 10px;
}

.lang-modal__title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 28px;
}

.lang-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;

  background: #f6f6f6;
  border: none;
  border-radius: 12px;

  padding: 14px 16px;
  font-size: 16px;
  font-weight: 600;

  cursor: pointer;
  transition: all .2s ease;
}

.lang-option:hover {
  background: #ececec;
  transform: translateY(-2px);
}

.lang-option__flag {
  font-size: 18px;
}

.heroList li{
  margin-bottom:6px;
  color:#111;
  position:relative;
  padding-left:14px;
}

.heroList li::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:8px;
  height:8px;
  background:#4c6fff;
  border-radius:50%;
  box-shadow:0 0 4px rgba(76,111,255,0.35);
}