/* Homepage hero: live interface layered over the generated transparent artwork. */
.hero.modern-hero{grid-template-columns:.92fr 1.15fr;gap:0;padding:45px 5% 50px;position:relative;isolation:isolate;overflow:hidden;min-height:730px;background:radial-gradient(ellipse at 76% 42%,#06315b48,transparent 55%)}
.modern-hero .hero-copy{z-index:4;position:relative;padding:15px 0 30px}
.modern-hero h1{font-size:clamp(47px,5.1vw,73px);letter-spacing:-2.8px;line-height:1.06;margin:26px 0 30px}
.modern-hero .intro{max-width:430px;font-size:15px;line-height:1.8}
.modern-hero .actions{gap:24px;flex-wrap:wrap}.modern-hero .hero-tips-link{align-items:center;gap:14px;line-height:1.5}.hero-tips-link>svg{display:block;width:22px;height:22px;flex-shrink:0;color:#19a5ff}.modern-hero .hero-note{margin-top:42px}
.hero-visual.modern-visual{display:block;min-height:640px;width:100%;position:relative;background:none;align-self:center}
.hero-glow{position:absolute;inset:0 -10% 0 0;background:radial-gradient(ellipse at 73% 44%,#087fff30,transparent 63%);z-index:-1}
.compass-art{position:absolute;width:100%;height:auto;left:0;top:0;z-index:0;pointer-events:none}
.hero-artwork{position:absolute;width:123%;height:auto;max-width:none;left:-14%;top:-9%;z-index:1;pointer-events:none;mask-image:linear-gradient(to bottom,#000 85%,transparent 99%)}
.hero-dashboard.dashboard-preview{position:absolute;width:63%;left:27%;top:25%;z-index:3;background:linear-gradient(145deg,#06111cf7,#0a1c2cf5);border:1px solid #77c8ff99;border-radius:18px;transform:perspective(1200px) rotateY(-9deg) rotateZ(-3deg);box-shadow:0 28px 50px #0009}
.hero-dashboard .preview-header{border-bottom:1px solid #28445a;padding:16px 17px}.hero-dashboard .preview-brand{display:flex;gap:8px;align-items:center;font-size:10px}.hero-dashboard .preview-brand img{width:25px;height:25px}.hero-dashboard .preview-label{font-size:6px}
.hero-dashboard .preview-content{padding:19px 17px 10px}.hero-dashboard .preview-heading .preview-title{font-size:20px;letter-spacing:-.5px}.hero-dashboard .balance{gap:17px;margin:25px 0 13px}.hero-dashboard .ring{width:122px;height:122px;padding:9px}.hero-dashboard .ring strong{font-size:37px}.hero-dashboard .ring small{font-size:6px}.hero-dashboard .ring span{font-size:11px}.hero-dashboard .balance-values p{font-size:8px;padding:10px 0}.hero-dashboard .balance-values strong{font-size:11px}.hero-dashboard .balance-values .remaining{padding:10px 7px}
.hero-orbit-badge{position:absolute;width:56px;height:56px;border:1px solid #95d8ffb0;box-shadow:inset 0 0 24px #118bff25;backdrop-filter:blur(6px);border-radius:50%;background:#0c213aa0;display:grid;place-items:center;color:#c7e8ff;z-index:2}.hero-orbit-badge svg{width:27px;height:27px}.leaf-badge{left:2%;top:60%}.chart-badge{right:16%;top:6%}
.hero-paths{position:absolute;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:96%;left:5%;bottom:6%;z-index:4;transform:rotate(2deg)}
.hero-path{position:relative;display:flex;flex-direction:column;gap:8px;border:1px solid #7dc7ff70;border-radius:16px;padding:18px 15px;background:linear-gradient(140deg,#102e45e8,#0b1d2de8);box-shadow:0 18px 35px #0006;backdrop-filter:blur(8px);transition:border-color .15s,background .15s}
.hero-path:hover{border-color:var(--lime);background:#123047}.hero-path strong{font-size:13px}.hero-path>span:not(.path-icon){font-size:9px;line-height:1.6;color:#bbd0e3}.path-icon{display:grid;place-items:center;width:35px;height:35px;border:1px solid #087fff50;background:#087fff22;border-radius:50%;color:#15a4ff;margin-bottom:4px}.path-icon svg{width:20px;height:20px}.hero-path i{position:absolute;right:13px;top:55%;font-size:27px;line-height:1;font-style:normal;color:#a7d8ff}
.modern-hero .example-note{bottom:0;left:30%;font-size:6px;letter-spacing:1px;margin:0;color:#7891aa}
@media(min-width:1500px){.modern-hero h1{font-size:73px}}
@media(max-width:1100px) and (min-width:761px){.hero.modern-hero{padding-inline:4%;min-height:650px;grid-template-columns:.95fr 1.05fr}.modern-hero h1{font-size:54px}.hero-visual.modern-visual{min-height:570px}.hero-dashboard.dashboard-preview{width:72%;left:20%;top:25%}.hero-dashboard .ring{width:95px;height:95px}.hero-dashboard .ring strong{font-size:30px}.hero-dashboard .balance{gap:10px}.hero-dashboard .preview-heading .preview-title{font-size:17px}.hero-dashboard .preview-brand{font-size:8px}.hero-dashboard .preview-label{display:none}.hero-path{padding:14px 10px}.hero-path strong{font-size:11px}.hero-path>span:not(.path-icon){font-size:8px}.hero-path i{right:8px}.modern-hero .intro{font-size:14px}}
@media(max-width:760px){.hero.modern-hero{grid-template-columns:1fr;padding:40px 6% 25px;gap:12px;min-height:0}.modern-hero .hero-copy{padding:0}.modern-hero h1{font-size:clamp(45px,8.4vw,64px);letter-spacing:-2.3px;margin:22px 0}.modern-hero .intro{font-size:14px}.modern-hero .hero-note{margin-top:25px}.hero-visual.modern-visual{min-height:540px;max-width:590px;margin:10px auto 0}.hero-artwork{width:116%;left:-8%;top:-8%}.hero-dashboard.dashboard-preview{width:68%;left:24%;top:23%}.hero-dashboard .preview-header{padding:12px}.hero-dashboard .preview-content{padding:15px 12px 8px}.hero-dashboard .preview-heading .preview-title{font-size:17px}.hero-dashboard .preview-brand{font-size:8px}.hero-dashboard .preview-label{display:none}.hero-dashboard .balance{gap:12px;margin:19px 0 10px}.hero-dashboard .ring{width:100px;height:100px;padding:8px}.hero-dashboard .ring strong{font-size:30px}.hero-dashboard .balance-values p{font-size:7px;padding:8px 0}.hero-dashboard .balance-values strong{font-size:9px}.hero-dashboard .balance-values strong small{font-size:6px}.hero-paths{left:0;width:100%;gap:8px;bottom:7%;transform:none}.hero-path{padding:13px 10px;gap:7px;border-radius:12px}.hero-path strong{font-size:11px}.hero-path>span:not(.path-icon){font-size:8px}.hero-path i{display:none}.path-icon{width:30px;height:30px}.path-icon svg{width:17px;height:17px}.hero-orbit-badge{width:42px;height:42px}.hero-orbit-badge svg{width:22px;height:22px}.leaf-badge{top:56%;left:0}.modern-hero .example-note{left:0;width:100%;text-align:center;bottom:2%;font-size:5.5px}}
@media(max-width:430px){.hero-visual.modern-visual{min-height:420px}.hero-dashboard.dashboard-preview{top:22%;width:73%;left:20%}.hero-dashboard .ring{width:78px;height:78px;padding:6px}.hero-dashboard .ring strong{font-size:25px;margin:5px 0}.hero-dashboard .ring small{font-size:5px}.hero-dashboard .ring span{font-size:8px}.hero-dashboard .balance{gap:9px;margin:14px 0 8px}.hero-dashboard .preview-heading .preview-title{font-size:15px}.hero-dashboard .preview-header{padding:10px}.hero-dashboard .preview-brand img{width:20px;height:20px}.hero-dashboard .balance-values p{font-size:6px;padding:6px 0}.hero-dashboard .balance-values strong{font-size:8px}.hero-dashboard .balance-values .remaining{padding:6px 4px;margin-top:6px}.hero-path strong{font-size:10px}.hero-path{padding:11px 8px}.hero-paths{bottom:7%}.chart-badge{right:9%}}
@media(prefers-reduced-motion:reduce){.hero-path{transition:none}}