:root{
  --bg:#f6f8fc; --paper:#ffffff; --text:#152238; --muted:#5f6f86; --line:#e3eaf5;
  --blue:#3A86FF; --violet:#8338EC; --teal:#06D6A0; --orange:#FF6D00;
  --grad-main:linear-gradient(90deg,var(--blue),var(--violet));
  --grad-cta:linear-gradient(90deg,var(--blue),var(--teal));
  --shadow:0 20px 50px rgba(21,34,56,.08); --shadow-strong:0 28px 70px rgba(21,34,56,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--text);background:
radial-gradient(circle at 10% 8%, rgba(58,134,255,.10), transparent 18%),
radial-gradient(circle at 92% 18%, rgba(131,56,236,.10), transparent 22%),
radial-gradient(circle at 50% 100%, rgba(6,214,160,.10), transparent 24%),
linear-gradient(180deg,#fbfcff 0%, #f3f6fb 60%, #eef3fa 100%);line-height:1.68}
a{text-decoration:none;color:inherit}
.container{width:min(1160px, calc(100% - 40px)); margin:auto}
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:blur(16px); background:rgba(255,255,255,.85); border-bottom:1px solid var(--line)}
.nav{display:flex; justify-content:space-between; align-items:center; gap:18px; padding:18px 0}
.brand{font-weight:900; letter-spacing:.08em; font-size:1.06rem; position:relative}
.brand:after{content:""; position:absolute; left:0; bottom:-10px; width:56px; height:3px; border-radius:99px; background:var(--grad-main)}
.nav nav{display:flex; gap:18px; flex-wrap:wrap}
.nav nav a{color:#33465f; font-weight:650}
main{padding:34px 0 70px}
.hero{padding:64px 0 32px}
.kicker{display:inline-block; font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800; color:var(--violet); margin-bottom:14px}
h1{margin:0; font-size:clamp(2.6rem,5vw,4.6rem); line-height:1.02; letter-spacing:-.05em; max-width:920px}
.gradient{background:var(--grad-main); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero p{max-width:840px; font-size:1.12rem; color:var(--muted); margin:18px 0 0}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}
.btn,.btn-secondary,.btn-danger{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 18px; border-radius:14px; font-weight:800; transition:.25s ease; border:none; cursor:pointer}
.btn{background:var(--grad-cta); color:#fff; box-shadow:0 12px 30px rgba(6,214,160,.18)}
.btn-secondary{background:#fff; border:1px solid var(--line); color:#24344d}
.btn-danger{background:#ff4d4d; color:#fff}
.section{padding:40px 0}
.lead{font-size:1.15rem; color:#24344d; max-width:900px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px}
.cards-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px}
.focus{background:rgba(255,255,255,.88); border:1px solid var(--line); border-radius:26px; box-shadow:var(--shadow); padding:32px}
.focus-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:28px}
.meta{color:var(--muted); font-size:.9rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em}
.aside-points{background:linear-gradient(180deg, rgba(58,134,255,.06), rgba(131,56,236,.05)); border:1px solid var(--line); border-radius:20px; padding:20px}
.aside-points ul{margin:0; padding-left:18px}
.split{display:grid; grid-template-columns:1fr 1fr; gap:34px}
.quote{padding:18px 20px; border-left:4px solid var(--violet); background:#fff; border-radius:14px; box-shadow:var(--shadow)}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px}
.kpi{background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--shadow)}
.kpi strong{display:block; font-size:2rem; line-height:1; margin-bottom:8px}
.substance-card{background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--shadow); transition:.25s ease}
.substance-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-strong)}
.card-image{position:relative; height:190px; background:#edf3fb; overflow:hidden}
.card-image img{width:100%; height:100%; object-fit:cover; display:block}
.status-badge{position:absolute; top:12px; right:12px; padding:8px 11px; border-radius:12px; font-size:.75rem; font-weight:800; color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.12)}
.status-badge.available{background:var(--teal)}
.status-badge.rare{background:#ffb703; color:#2b2200}
.status-badge.restricted{background:var(--violet)}
.status-badge.banned{background:#ff4d4d}
.trend-badge{position:absolute; left:12px; top:12px; padding:7px 10px; border-radius:12px; font-size:.75rem; font-weight:800; background:#fff; color:#24344d; border:1px solid var(--line)}
.trend-up{box-shadow:0 6px 18px rgba(255,109,0,.16)}
.trend-down{box-shadow:0 6px 18px rgba(58,134,255,.12)}
.trend-stable{box-shadow:0 6px 18px rgba(131,56,236,.10)}
.card-content{padding:18px}
.card-content h3{margin:0 0 8px; font-size:1.15rem}
.desc{color:var(--muted); margin:0 0 12px}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.tags span{display:inline-flex; padding:5px 9px; background:#f3f7fd; border:1px solid var(--line); border-radius:999px; font-size:.74rem; font-weight:700; color:#33465f}
.stats{display:flex; flex-wrap:wrap; gap:12px; color:#33465f; font-size:.83rem; font-weight:700; margin-top:10px}
.section-title{font-size:1.9rem; margin:0 0 12px}
.section-intro{color:var(--muted); max-width:820px; margin:0 0 18px}
.table-wrap{background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow)}
.table-wrap table{width:100%; border-collapse:collapse}
.table-wrap th,.table-wrap td{padding:12px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.form-box{background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px; box-shadow:var(--shadow)}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.form-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
input,textarea,select{width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--text)}
textarea{min-height:120px; resize:vertical}
.flash{padding:14px 16px; border-radius:14px; margin-bottom:18px; border:1px solid var(--line); background:#fff}
.flash-success{border-left:4px solid var(--teal)}
.flash-error{border-left:4px solid #ff4d4d}
.footer{border-top:1px solid var(--line); padding:28px 0 44px; color:var(--muted)}
.small{font-size:.92rem}
.badge-small{display:inline-flex; padding:6px 10px; border-radius:999px; background:#f5f8fc; border:1px solid var(--line); font-size:.75rem; font-weight:700}
@media (max-width:900px){.focus-grid,.split,.kpis,.form-grid,.form-grid-3{grid-template-columns:1fr}}