:root{
  --bg:#f4f6f9;--bg2:#eef2f6;--ink:#17202b;--muted:#748291;--line:rgba(63,82,104,.12);
  --shadow:0 24px 70px rgba(52,72,96,.10)
}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  margin:0;color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-weight:300;letter-spacing:-.018em;
  background:
    radial-gradient(circle at 8% 0%,rgba(255,255,255,.98),transparent 34%),
    radial-gradient(circle at 92% 4%,rgba(193,214,235,.43),transparent 29%),
    linear-gradient(145deg,var(--bg),#fbfcfd 52%,var(--bg2))
}
button,input,textarea,select{font:inherit}
.home-app{height:100dvh;overflow:hidden;position:relative;padding:16px 24px 20px}
.ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ring-left{
  position:absolute;width:520px;height:520px;left:-220px;top:9%;border-radius:50%;
  background:conic-gradient(from 20deg,rgba(120,156,197,.07),rgba(151,190,224,.27),rgba(218,196,234,.15),rgba(120,156,197,.07));
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 61% 64%,transparent 65%);
  mask:radial-gradient(circle,transparent 60%,#000 61% 64%,transparent 65%);
  animation:ringMove 18s ease-in-out infinite alternate
}
.glow{
  position:absolute;width:520px;height:250px;right:3%;top:4%;border-radius:55% 45% 60% 40%;
  background:linear-gradient(120deg,rgba(255,255,255,.04),rgba(155,192,228,.15),rgba(219,200,237,.13));
  filter:blur(20px);opacity:.72;animation:glowMove 15s ease-in-out infinite alternate
}
.arc{
  position:absolute;width:520px;height:520px;right:-170px;bottom:-250px;border:1px solid rgba(117,148,184,.14);border-radius:50%;
  box-shadow:0 0 0 62px rgba(117,148,184,.025),0 0 0 124px rgba(255,255,255,.04)
}
@keyframes ringMove{to{transform:translate3d(28px,-18px,0) rotate(14deg)}}
@keyframes glowMove{to{transform:translate3d(-26px,16px,0) rotate(4deg) scale(1.05)}}
.index-header{
  height:54px;max-width:1320px;margin:0 auto;position:relative;z-index:5;
  display:flex;align-items:center;justify-content:space-between
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:500}
.logo{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,#fff,#ccd9e7);box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(70,96,125,.15);
  font-size:12px;color:#42566f;font-weight:600
}
.page-nav{
  display:flex;gap:5px;padding:5px;border:1px solid rgba(255,255,255,.88);
  background:rgba(255,255,255,.46);backdrop-filter:blur(20px);border-radius:15px
}
.page-nav a{text-decoration:none;color:#687687;font-size:13px;padding:8px 11px;border-radius:10px;transition:.2s}
.page-nav a:hover,.page-nav a.active{background:rgba(255,255,255,.88);color:#223244}
.account-link{
  height:38px;display:inline-flex;align-items:center;padding:0 14px;border-radius:12px;text-decoration:none;
  border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.56);color:#617184;font-size:12px
}
.home-main{
  height:calc(100% - 54px);max-width:1240px;margin:0 auto;position:relative;z-index:2;
  display:grid;grid-template-rows:1fr auto;gap:14px;padding-top:14px
}
.hero{min-height:0;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.home-copy{max-width:680px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.92);color:#66778b;font-size:11px
}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:#8ea7c2}
h1{
  font-size:clamp(66px,6.8vw,94px);line-height:.91;letter-spacing:-.067em;font-weight:230;
  margin:16px 0 18px
}
.lead{font-size:16px;line-height:1.55;color:#657381;max-width:590px;margin:0}
.home-actions{display:flex;gap:9px;margin-top:26px}
.button{
  height:42px;display:inline-flex;align-items:center;padding:0 15px;border-radius:12px;text-decoration:none;
  font-size:12px;transition:.2s
}
.button:hover{transform:translateY(-1px)}
.button.primary{background:#172535;color:#fff;box-shadow:0 8px 20px rgba(23,37,53,.14)}
.button.soft{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);color:#5d6f81}
.visual{height:min(510px,70vh);min-height:390px;position:relative}
.glass-main,.glass-mini{
  position:absolute;border:1px solid rgba(255,255,255,.92);background:rgba(255,255,255,.42);
  backdrop-filter:blur(26px) saturate(135%);box-shadow:var(--shadow)
}
.glass-main{inset:10% 4% 8% 12%;border-radius:34px;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.glass-mini.one{width:142px;height:142px;right:0;top:0;border-radius:30px;transform:rotate(8deg)}
.glass-mini.two{width:112px;height:112px;left:0;bottom:3%;border-radius:27px;transform:rotate(-8deg)}
.sound{
  height:48%;border-radius:23px;background:linear-gradient(145deg,rgba(221,232,243,.88),rgba(255,255,255,.78));
  display:flex;align-items:center;justify-content:center;gap:7px
}
.sound b{display:block;width:5px;border-radius:99px;background:#7891ae;opacity:.72}
.sound b:nth-child(1){height:26%}.sound b:nth-child(2){height:48%}.sound b:nth-child(3){height:72%}.sound b:nth-child(4){height:42%}.sound b:nth-child(5){height:88%}.sound b:nth-child(6){height:58%}.sound b:nth-child(7){height:78%}.sound b:nth-child(8){height:36%}.sound b:nth-child(9){height:62%}.sound b:nth-child(10){height:30%}
.feature-title{font-size:20px;font-weight:400;letter-spacing:-.035em}
.feature-sub{font-size:11px;color:#81909f;margin-top:5px}
.symbol{height:100%;display:grid;place-items:center;font-size:30px;color:#7088a1}
.section-index{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-bottom:2px}
.index-card{
  height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;
  border:1px solid rgba(255,255,255,.9);border-radius:15px;background:rgba(255,255,255,.48);
  backdrop-filter:blur(18px);text-decoration:none;color:#4e6072;transition:.2s
}
.index-card:hover{background:rgba(255,255,255,.75);transform:translateY(-1px)}
.index-card span{display:flex;align-items:center;gap:9px;font-size:12px}
.index-card small{font-size:9px;color:#9aa5af;letter-spacing:.08em}
.index-card b{font-size:13px;font-weight:400;color:#8090a0}
@media(max-height:760px){
  .home-main{padding-top:8px;gap:9px}
  h1{font-size:clamp(58px,6vw,78px);margin:11px 0 14px}
  .lead{font-size:14px}.home-actions{margin-top:18px}
  .visual{height:min(420px,66vh);min-height:330px}
  .section-index{padding-bottom:0}.index-card{height:52px}
}
@media(max-width:900px){
  .page-nav{display:none}.hero{grid-template-columns:1fr}.visual{display:none}.section-index{grid-template-columns:1fr 1fr}
}