/* Первый экран: заголовок, панель бета-тестирования, «ноутбук» с демо-интерфейсом */
.hero {
  position:relative;
  min-height:647px;
  padding:30px 0 49px;
  background:radial-gradient(ellipse at 76% 29%,rgba(0,163,186,.16),transparent 40%),radial-gradient(ellipse at 70% 110%,rgba(0,124,180,.21),transparent 50%);
}
.hero::before {
  content:"";
  position:absolute;
  inset:-90px 0 0;
  background:linear-gradient(90deg,#02090e 2%,transparent 65%),repeating-linear-gradient(0deg,transparent 0px,transparent 47px,rgba(4,118,141,.023) 48px,transparent 49px),repeating-linear-gradient(90deg,transparent 0px,transparent 47px,rgba(4,118,141,.025) 48px,transparent 49px);
  opacity:.8;
  mask-image:linear-gradient(to bottom,transparent 1%,black 25%,black 78%,transparent);
  pointer-events:none;
}
.hero::after {
  content:"";
  height:154px;
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:-75px;
  border:1px solid rgba(0,223,240,.14);
  border-radius:50%;
  box-shadow:0 -15px 50px rgba(0,175,206,.14),inset 0 30px 60px rgba(0,91,113,.1);
  transform:rotate(-3deg);
  pointer-events:none;
}
.ambient {
  position:absolute;
  pointer-events:none;
}
.ambient.a1 {
  width:590px;
  height:440px;
  right:3%;
  top:63px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,198,230,.19) 0%,rgba(18,71,113,.12) 35%,transparent 68%);
  filter:blur(13px);
  animation:pulse 9s ease-in-out infinite;
}
.ambient.a2 {
  width:940px;
  height:170px;
  right:-20%;
  bottom:10px;
  background:radial-gradient(ellipse,rgba(6,154,215,.18),transparent 65%);
  filter:blur(15px);
}
.light-trail {
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.8;
}
.hero-grid {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(400px,520px) minmax(0,1fr);
  gap:32px;
  align-items:center;
}
.hero-copy {
  padding-top:12px;
  position:relative;
  z-index:2;
}
.chip {
  display:inline-flex;
  gap:9px;
  align-items:center;
  border:1px solid rgba(175,108,255,.4);
  border-radius:999px;
  background:linear-gradient(125deg,rgba(97,46,165,.34),rgba(36,24,68,.26));
  color:#d5bbfc;
  padding:6px 13px;
  font-size:12px;
  font-weight:680;
  box-shadow:0 0 32px rgba(136,63,238,.09);
}
.chip .icon {
  width:15px;
  height:15px;
}
.hero h1 {
  font-size:clamp(46px,4.65vw,69px);
  letter-spacing:-.056em;
  line-height:1.045;
  margin:19px 0 18px;
  font-weight:790;
}
.hero h1 em {
  font-style:normal;
  color:#08e0eb;
  text-shadow:0 0 30px rgba(8,224,235,.12);
}
.hero-desc {
  font-size:17px;
  line-height:1.49;
  color:#bdd2dc;
  margin-bottom:24px;
  max-width:495px;
  letter-spacing:-.01em;
}
.beta-panel {
  position:relative;
  max-width:520px;
  padding:19px 20px 17px;
  border:1px solid rgba(7,212,240,.48);
  border-radius:13px;
  background:linear-gradient(120deg,rgba(5,32,46,.88),rgba(7,17,34,.84));
  box-shadow:0 26px 70px rgba(0,0,0,.24),0 0 36px rgba(0,141,195,.045);
  backdrop-filter:blur(16px);
}
.beta-panel:after {
  position:absolute;
  content:"";
  inset:0;
  border-radius:13px;
  background:linear-gradient(150deg,rgba(3,210,236,.055),transparent 52%,rgba(134,53,255,.03));
  pointer-events:none;
}
.beta-title {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:15px;
  font-weight:720;
  letter-spacing:-.02em;
  margin-bottom:15px;
}
.beta-title .icon {
  color:#19e9f7;
}
.beta-panel ul {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:13px;
  row-gap:11px;
}
.beta-panel li {
  display:flex;
  gap:7px;
  color:#b2c8d3;
  font-size:11.5px;
  line-height:1.38;
}
.beta-panel li .icon {
  width:15px;
  height:15px;
  padding:2px;
  border:1px solid #05ddea;
  border-radius:50%;
  color:#0af1f4;
  stroke-width:2.7;
  flex:0 0 15px;
  margin-top:1px;
}
.hero-art {
  align-self:stretch;
  position:relative;
  min-width:0;
  display:flex;
  align-items:center;
}
.device {
  position:relative;
  width:100%;
  transform:perspective(1350px) rotateY(-7deg) rotateX(2deg) rotateZ(1.4deg);
  transform-origin:60% 50%;
  margin-left:-2px;
  animation:device-in 1.2s cubic-bezier(.18,.76,.23,1) both;
}
.device:before {
  position:absolute;
  content:"";
  inset:6% -10% 1%;
  background:radial-gradient(ellipse,rgba(0,229,255,.2),transparent 63%);
  filter:blur(27px);
  z-index:-1;
}
.device-bezel {
  background:linear-gradient(148deg,#184053,#01070d 14%,#02070d 78%,#12384b);
  border:2px solid rgba(42,122,153,.8);
  border-radius:20px 20px 9px 9px;
  padding:12px 10px 10px;
  box-shadow:0 0 0 4px rgba(3,8,13,.98),0 0 0 6px rgba(69,155,190,.19),-8px 25px 50px rgba(0,0,0,.58),0 0 65px rgba(0,232,246,.12);
  position:relative;
}
.device-bezel:before {
  position:absolute;
  content:"";
  width:5px;
  height:5px;
  background:#294b57;
  border-radius:50%;
  top:5px;
  left:50%;
}
.device-base {
  height:23px;
  margin:0 -15px;
  background:linear-gradient(180deg,#7a8e97 0%,#304451 10%,#1b2833 42%,#0c1820 78%,#03090f 100%);
  border-radius:2px 2px 55% 55%/2px 2px 100% 100%;
  box-shadow:0 14px 20px rgba(0,0,0,.67),0 6px 13px rgba(2,196,236,.13);
  position:relative;
}
.device-base:before {
  position:absolute;
  content:"";
  left:36%;
  width:28%;
  top:0;
  height:6px;
  background:linear-gradient(#263c45,#14242d);
  border-radius:0 0 12px 12px;
}
.device-window {
  width:100%;
  height:415px;
  background:#030a0e;
  display:grid;
  grid-template-columns:95px minmax(0,1fr);
  overflow:hidden;
  border:1px solid #046378;
  border-radius:5px;
  box-shadow:inset 0 0 20px rgba(0,209,232,.04);
}
.device-sidebar {
  border-right:1px solid rgba(8,138,157,.31);
  background:#020c12;
  padding:11px 7px;
}
.sidebar-brand {
  display:flex;
  align-items:center;
  gap:3px;
  font-size:11px;
  font-weight:730;
  white-space:nowrap;
  margin:0 1px 18px;
}
.sidebar-brand .whale {
  width:18px;
  height:15px;
}
.side-item {
  display:flex;
  align-items:center;
  gap:5px;
  padding:7px 5px;
  color:#7995a3;
  font-size:9px;
  white-space:nowrap;
}
.side-item .icon {
  width:12px;
  height:12px;
}
.side-item.active {
  color:#02eff6;
  border:1px solid #00cfeb;
  border-radius:4px;
  background:rgba(0,225,240,.11);
}
.device-content {
  padding:8px;
  min-width:0;
}
.device-toolbar {
  height:22px;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:8px;
}
.account-pill {
  padding:3px 6px;
  border:1px solid rgba(5,192,224,.65);
  border-radius:4px;
  color:#bfdde8;
}
.account-pill i {
  font-style:normal;
  color:var(--cyan);
}
.demo {
  border:1px solid rgba(30,186,216,.65);
  border-radius:5px;
  color:#7ce5ef;
  padding:3px 7px;
  font-size:8px;
  white-space:nowrap;
}
.device-cards {
  display:grid;
  grid-template-columns:1.7fr 1.05fr .75fr;
  grid-template-rows:252px 112px;
  gap:8px;
}
.ui-pane {
  min-width:0;
  border:1px solid rgba(9,153,183,.62);
  border-radius:5px;
  background:linear-gradient(130deg,rgba(7,24,32,.68),rgba(3,11,18,.97));
  overflow:hidden;
}
.device-chart {
  grid-column:1/3;
  padding:13px 13px 6px;
}
.device-rates {
  grid-column:3;
  padding:16px 11px;
}
.device-income,.device-split,.device-tickers {
  padding:10px 11px;
}
.ui-label {
  color:#8ca8b8;
  font-size:8.5px;
  display:block;
  letter-spacing:.035em;
}
.chart-head {
  display:flex;
  justify-content:space-between;
}
.ui-big {
  display:block;
  font-size:25px;
  letter-spacing:.015em;
  margin-top:2px;
  font-weight:750;
}
.ui-green {
  display:block;
  color:#18e9ab;
  font-size:17px;
  font-weight:750;
}
small.ui-green {
  font-size:9px;
}
.tool-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#90a7b3;
  font-size:8.2px;
  margin:12px 0 7px;
}
.key {
  display:inline-block;
  width:12px;
  height:2px;
  background:#08e4ed;
  vertical-align:middle;
  margin-right:3px;
}
.key.violet {
  background:#9865f6;
}
.periods {
  font-size:8px;
  white-space:nowrap;
}
.periods b {
  border:1px solid #06eff9;
  padding:4px;
  border-radius:3px;
  color:#08f1fa;
}
.line-graph {
  width:100%;
  height:119px;
  display:block;
  overflow:visible;
}
.chart-grids path {
  stroke:rgba(22,122,145,.3);
  stroke-width:1;
}
.axis {
  display:flex;
  justify-content:space-between;
  font-size:7.4px;
  color:#7d96a7;
  margin-top:3px;
}
.panel-caption {
  font-weight:760;
  color:#dceff2;
  font-size:9px;
  letter-spacing:.01em;
  display:block;
}
.device-rates>div {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding:24px 0 15px;
  border-bottom:1px solid rgba(17,111,128,.38);
  gap:3px;
}
.device-rates>div:last-child {
  border-bottom:0;
}
.device-rates span:not(.panel-caption) {
  font-size:11px;
  font-weight:740;
}
.device-rates strong {
  font-size:17px;
  color:#0de3a8;
}
.income-amount {
  display:block;
  font-size:17px;
  letter-spacing:.02em;
  margin-top:6px;
}
.income-amount small {
  font-size:9px;
  color:#7894a1;
}
.bar-graph {
  display:flex;
  align-items:end;
  gap:5px;
  height:54px;
  padding-top:8px;
}
.bar-graph span {
  height:var(--bar);
  flex:1;
  border-radius:2px 2px 0 0;
  background:linear-gradient(0deg,#007b95,#08f6ed);
}
.split-inner {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:9px;
}
.donut-large {
  width:80px;
  height:80px;
  flex:0 0 80px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:conic-gradient(#378fe7 0 45%,#22d6a3 45% 73%,#8966e9 73% 87%,#ffb23d 87% 95%,#566b78 95%);
  position:relative;
}
.donut-large:after {
  content:"";
  position:absolute;
  inset:18px;
  border-radius:50%;
  background:#071924;
}
.donut-large span {
  z-index:1;
  position:relative;
  text-align:center;
  font-size:9px;
  font-weight:750;
}
.donut-large small {
  display:block;
  font-size:7px;
  color:#819baa;
}
.legend {
  display:grid;
  gap:3px;
  flex:1;
  min-width:0;
  font-size:7.5px;
}
.legend>span {
  display:flex;
  justify-content:space-between;
  white-space:nowrap;
  gap:3px;
}
.legend b {
  margin-left:auto;
}
.sw {
  width:5px;
  height:5px;
  border-radius:50%;
  display:inline-block;
  margin-right:3px;
  vertical-align:middle;
  background:#378fe7;
}
.sw.green {
  background:#22d6a3;
}
.sw.purple {
  background:#8966e9;
}
.sw.orange {
  background:#ffb23d;
}
.sw.gray {
  background:#566b78;
}
.device-tickers>div {
  display:flex;
  justify-content:space-between;
  gap:4px;
  align-items:center;
  border-bottom:1px solid rgba(17,111,128,.27);
  font-size:8px;
  padding:5px 0;
}
.device-tickers b {
  color:#0de3a8;
}
.device-tickers>div:last-child b {
  color:#ff6282;
}
.device-tickers i {
  color:#08ebdd;
  font-size:16px;
}

.hero .light-trail {
  filter:drop-shadow(0 0 15px rgba(0,199,239,.35));
}

.hero .hero-art::before {
  content:"";
  position:absolute;
  inset:8% -10% 8% -4%;
  z-index:-1;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(ellipse at 64% 38%,rgba(3,155,216,.23),transparent 44%),radial-gradient(ellipse at 42% 82%,rgba(19,214,245,.10),transparent 56%);
  filter:blur(18px);
}