:root{
  --bg:#fff;
  --panel:rgba(10,20,40,.04);
  --panel2:rgba(10,20,40,.06);
  --text:rgba(12,16,24,.92);
  --muted:rgba(12,16,24,.62);
  --line:rgba(12,16,24,.10);

  --accent:#C9A24D;   /* теплое золото */
  --accent2:#2EC5FF;  /* холодный акцент */

  --shadow: 0 24px 80px rgba(18,22,32,.14);
  --radius:18px;
  --radius2:28px;
  --max:1180px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(46,197,255,.14), transparent 55%),
    radial-gradient(900px 520px at 85% 15%, rgba(201,162,77,.14), transparent 52%),
    radial-gradient(900px 560px at 55% 95%, rgba(46,197,255,.10), transparent 55%),
    var(--bg);
  line-height:1.35;
  letter-spacing: .2px;
}

a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 22px}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(130%) blur(14px);
  background: linear-gradient(to bottom, rgba(246,247,251,.92), rgba(246,247,251,.70));
  border-bottom:1px solid var(--line);
}

.nav{
  height:74px;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
}

.brand{
  display:flex; align-items:center; gap:12px;
  font-weight:600; letter-spacing:.6px;
}

.logo{
  width:34px; height:34px; border-radius:12px;
  background:
    radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(135deg, rgba(201,162,77,.95), rgba(46,197,255,.55));
  box-shadow: 0 12px 40px rgba(201,162,77,.18);
  border:1px solid rgba(12,16,24,.12);
}

.menu{
  display:flex; gap:18px; align-items:center;
  color:var(--muted);
  font-size:14px;
}

.menu a{
  padding:10px 10px;
  border-radius:12px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  border:1px solid transparent;
}

.menu a:hover{
  background:rgba(12,16,24,.04);
  border-color: rgba(12,16,24,.08);
  color:rgba(12,16,24,.86);
}

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

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(12,16,24,.14);
  background: rgba(255,255,255,.72);
  color: rgba(12,16,24,.88);
  font-size:14px;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
  user-select:none;
  gap:10px;
}

.btn:hover{
  background: rgba(255,255,255,.92);
  border-color: rgba(12,16,24,.22);
}

.btn:active{transform: translateY(1px)}

.btn.primary{
  border-color: rgba(201,162,77,.45);
  background: linear-gradient(135deg, rgba(201,162,77,.22), rgba(46,197,255,.14));
  box-shadow: 0 18px 60px rgba(201,162,77,.18);
}

.btn.primary:hover{border-color: rgba(201,162,77,.60)}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(12,16,24,.10);
  background: rgba(255,255,255,.62);
  color: var(--muted);
  font-size:13px;
}

.dot{
  width:8px; height:8px; border-radius:99px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(201,162,77,.14);
}

/* Hero */
.hero{padding:68px 0 28px}

.hero-grid{
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap:22px;
  align-items:stretch;
}

.h-card{
  border-radius: var(--radius2);
  border:1px solid rgba(12,16,24,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.56));
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}

.h-card::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(600px 240px at 12% 10%, rgba(46,197,255,.16), transparent 60%),
    radial-gradient(520px 240px at 82% 18%, rgba(201,162,77,.16), transparent 60%);
  pointer-events:none;
  opacity:.9;
}

.h-content{position:relative; padding:34px}

h1{
  margin:14px 0 10px;
  font-size: clamp(34px, 4vw, 52px);
  line-height:1.05;
  letter-spacing:-.6px;
}

.sub{
  margin:0;
  color:var(--muted);
  font-size:16px;
  max-width: 52ch;
}

.hero-cta{margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; align-items:center}

.note{
  margin-top:16px;
  color: rgba(12,16,24,.62);
  font-size:13px;
  display:flex; gap:10px; align-items:flex-start;
}

.spark{
  width:18px; height:18px; border-radius:6px;
  background: linear-gradient(135deg, rgba(201,162,77,.95), rgba(46,197,255,.65));
  opacity:.95;
  margin-top:2px;
}

/* Right hero panel */
.hero-panel{padding:18px}

.panel-inner{
  height:100%;
  border-radius: 22px;
  border:1px solid rgba(12,16,24,.10);
  background:
    radial-gradient(520px 240px at 60% 0%, rgba(46,197,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.52));
  padding:22px;
  position:relative;
  overflow:hidden;
}

.panel-inner::after{
  content:"";
  position:absolute; inset:auto -40px -70px -40px; height:220px;
  background: radial-gradient(closest-side, rgba(201,162,77,.18), transparent 70%);
  filter: blur(2px);
  transform: rotate(-6deg);
  pointer-events:none;
  opacity:.95;
}

.kpis{display:grid; gap:10px; margin-top:14px}

.kpi{
  border-radius: 16px;
  border:1px solid rgba(12,16,24,.10);
  background: rgba(255,255,255,.66);
  padding:14px 14px;
  display:flex; align-items:center; justify-content:space-between;
  position:relative;
}

.kpi strong{font-weight:600}
.kpi span{color:var(--muted); font-size:13px}

.kpi .tag{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(12,16,24,.10);
  background: rgba(12,16,24,.03);
  color: rgba(12,16,24,.70);
  white-space:nowrap;
}

/* Sections */
section{padding:46px 0}

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  margin-bottom:18px;
}

.section-head h2{
  margin:0;
  font-size:22px;
  letter-spacing:-.2px;
}

.section-head p{
  margin:0;
  color:var(--muted);
  max-width:64ch;
  font-size:14px;
}

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}

.card{
  border-radius: var(--radius);
  border:1px solid rgba(12,16,24,.10);
  background: rgba(255,255,255,.66);
  padding:18px;
  transition: transform .18s ease, background .2s ease, border-color .2s ease;
  min-height: 138px;
}

.card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.84);
  border-color: rgba(12,16,24,.14);
}

.card h3{margin:10px 0 6px; font-size:16px}
.card p{margin:0; color:var(--muted); font-size:13.5px}

.icon{
  width:38px; height:38px; border-radius:14px;
  border:1px solid rgba(12,16,24,.10);
  background: linear-gradient(135deg, rgba(201,162,77,.18), rgba(46,197,255,.10));
  display:grid; place-items:center;
  color: rgba(12,16,24,.82);
  font-weight:700;
}

/* Ecosystem */
.grid-4{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
}

.service{
  border-radius: 18px;
  border:1px solid rgba(12,16,24,.10);
  background: rgba(255,255,255,.62);
  padding:14px;
  display:flex; flex-direction:column; gap:10px;
  min-height: 132px;
}

.service .top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}

.badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(12,16,24,.10);
  background: rgba(12,16,24,.03);
  color: rgba(12,16,24,.70);
  white-space:nowrap;
}

.service .name{
  display:flex; align-items:center; gap:10px;
  font-weight:600;
}

.service .mark{
  width:28px; height:28px; border-radius:10px;
  border:1px solid rgba(12,16,24,.10);
  background: rgba(12,16,24,.03);
  display:grid; place-items:center;
  color: rgba(12,16,24,.75);
  font-size:12px;
}

.service p{margin:0; color:var(--muted); font-size:13px}

.service a{
  margin-top:auto;
  display:flex; align-items:center; gap:8px;
  color: rgba(12,16,24,.86);
  font-size:13px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(12,16,24,.10);
  background: rgba(255,255,255,.72);
  transition: background .2s ease, border-color .2s ease;
}

.service a:hover{
  background: rgba(255,255,255,.92);
  border-color: rgba(12,16,24,.14);
}

.ext{
  margin-left:auto;
  width:18px; height:18px; border-radius:7px;
  border:1px solid rgba(12,16,24,.12);
  display:grid; place-items:center;
  font-size:12px;
  opacity:.85;
}

/* How it works */
.steps{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
}

.step{
  border-radius: 18px;
  border:1px solid rgba(12,16,24,.10);
  background: rgba(255,255,255,.62);
  padding:16px;
  min-height: 132px;
}

.num{
  width:36px; height:36px; border-radius:14px;
  border:1px solid rgba(12,16,24,.10);
  background: rgba(12,16,24,.03);
  display:grid; place-items:center;
  font-weight:700;
  color: rgba(12,16,24,.78);
}

.step h3{margin:10px 0 6px; font-size:15px}
.step p{margin:0; color:var(--muted); font-size:13px}

/* Dual segments */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}

.bigcard{
  border-radius: var(--radius2);
  border:1px solid rgba(12,16,24,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.56));
  padding:22px;
  overflow:hidden;
  position:relative;
}

.bigcard::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(520px 240px at 12% 15%, rgba(201,162,77,.14), transparent 55%),
    radial-gradient(520px 240px at 88% 20%, rgba(46,197,255,.12), transparent 55%);
  pointer-events:none;
  opacity:.85;
}

.bigcard > *{position:relative}
.bigcard h3{margin:0 0 10px; font-size:18px}
.bigcard ul{margin:0; padding-left:18px; color:var(--muted); font-size:14px}
.bigcard li{margin:8px 0}
.bigcard .row{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap}

/* Footer CTA */
.cta{
  border-radius: var(--radius2);
  border:1px solid rgba(12,16,24,.10);
  background: linear-gradient(135deg, rgba(201,162,77,.14), rgba(255,255,255,.58), rgba(46,197,255,.12));
  padding:26px;
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.cta h2{margin:0; font-size:22px}
.cta p{margin:6px 0 0; color:rgba(12,16,24,.64); font-size:14px}

footer{
  padding:34px 0 40px;
  color: rgba(12,16,24,.60);
  font-size:13px;
  border-top: 1px solid var(--line);
  margin-top: 26px;
}

.foot{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
}

.foot a{color:rgba(12,16,24,.66)}
.foot a:hover{color:rgba(12,16,24,.88)}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .grid-4{grid-template-columns: repeat(2, minmax(0,1fr))}
  .steps{grid-template-columns: repeat(2, minmax(0,1fr))}
  .grid-3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .menu{display:none}
}

@media (max-width: 520px){
  .btn{width:100%}
  .actions{width:100%}
  .actions .btn{flex:1}
  .grid-4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .hero{padding-top:44px}
  .nav{height:auto; padding:14px 0}
}