:root {
  --ink: #1d2733;
  --soft: #5d6b7a;
  --glass: rgba(255, 255, 255, .34);
  --line: rgba(255, 255, 255, .6);
  --sans: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { overflow: hidden; background: #b4c2cf; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
/* frosted vignette + grain over the scene */
.frost { position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 50%, rgba(150, 166, 182, .35) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: normal; opacity: .5; }

/* nav */
.nav { position: fixed; z-index: 10; top: 22px; left: 40px; right: 40px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
.logo svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.links { display: flex; gap: 46px; font-size: 14px; color: #3b4755; }
.links a { position: relative; transition: color .3s; }
.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.links a:hover::after { transform: scaleX(1); transform-origin: left; }
.links sup { font-size: 9px; color: var(--soft); }
.btn-glass { padding: 12px 22px; border-radius: 10px; font-size: 14px; font-weight: 500; background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 10px 30px -12px rgba(40, 60, 90, .35), inset 0 1px 0 rgba(255, 255, 255, .7); transition: background .3s, transform .3s; }
.btn-glass:hover { background: rgba(255, 255, 255, .55); transform: translateY(-1px); }
.back { position: fixed; z-index: 10; top: 76px; left: 40px; font-size: 12px; color: var(--soft); opacity: .8; transition: opacity .3s; }
.back:hover { opacity: 1; color: var(--ink); }

/* copy */
main { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
main > * { pointer-events: auto; }
.pill { position: absolute; left: 40px; bottom: calc(14vh + clamp(150px, 20vw, 290px)); display: inline-block; padding: 8px 14px; font-size: 10.5px; color: #3b4755;
  border-left: 2px solid #8a9aab; background: rgba(255, 255, 255, .28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.title { position: absolute; left: 36px; bottom: 11vh; font-weight: 300; font-size: clamp(56px, 7.6vw, 128px); line-height: 1.02; letter-spacing: -.04em; color: #f7fafc;
  text-shadow: 0 2px 40px rgba(60, 80, 110, .25); }
.title span { display: block; animation: rise 1.4s cubic-bezier(.2, .8, .2, 1) both; }
.title span:nth-child(2) { animation-delay: .15s; }
@keyframes rise { from { opacity: 0; transform: translateY(.4em); filter: blur(14px); } }
.side { position: absolute; right: 40px; top: 30vh; max-width: 330px; font-size: 18px; line-height: 1.45; color: #f4f7fa; text-align: right; font-weight: 400;
  text-shadow: 0 1px 24px rgba(60, 80, 110, .35); animation: rise 1.4s .3s cubic-bezier(.2, .8, .2, 1) both; }
.side b { font-weight: 600; }

/* feature cards */
.cards { position: absolute; right: 40px; bottom: 11vh; width: 380px; height: 128px; border-radius: 14px; overflow: hidden;
  background: rgba(236, 242, 247, .5); border: 1px solid var(--line); backdrop-filter: blur(22px) saturate(1.25); -webkit-backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 30px 60px -30px rgba(40, 60, 90, .45), inset 0 1px 0 rgba(255, 255, 255, .75); animation: rise 1.4s .45s cubic-bezier(.2, .8, .2, 1) both; }
.card { position: absolute; inset: 0; display: flex; gap: 18px; padding: 22px 24px; opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity .7s, transform .8s cubic-bezier(.2, .8, .2, 1), filter .7s; }
.card.on { opacity: 1; transform: none; filter: none; }
.card .n { font-size: 11px; color: var(--soft); padding-top: 4px; }
.card b { display: block; font-size: 17px; font-weight: 500; color: var(--ink); }
.card b i { font-style: normal; font-size: 13px; opacity: .7; }
.card p { margin-top: 8px; font-size: 13px; line-height: 1.5; color: #3e4b59; }
.dots { position: absolute; right: 18px; top: 18px; display: flex; gap: 5px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(60, 80, 100, .25); transition: background .3s, width .3s; }
.dots i.on { width: 14px; border-radius: 4px; background: var(--ink); }

.hint { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; display: flex; align-items: center; gap: 10px; font-size: 10.5px; color: #6b7988; white-space: nowrap; pointer-events: none; }
.hint i { width: 6px; height: 6px; border-radius: 50%; background: #f2b35b; box-shadow: 0 0 10px #f2b35b; animation: blink 2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }

@media (max-width: 860px) {
  .links { display: none; }
  .nav { left: 20px; right: 20px; top: 16px; }
  .back { left: 20px; top: 66px; }
  .pill { left: 20px; bottom: auto; top: 108px; }
  .title { left: 18px; right: 18px; bottom: auto; top: 156px; font-size: 52px; }
  .side { display: none; }
  .cards { left: 16px; right: 16px; width: auto; bottom: 58px; height: 118px; }
  .card { padding: 18px 20px; }
  .hint { bottom: 22px; font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }