/* Layout: graphite stage — copy left, live 3D scene right, three solution tabs with progress below */
.hs1{
 --bg:#26282C; --stage:#2E3136; --panel:#3A3D43; --line:rgba(255,255,255,.10);
 --fg:#F4F5F7; --mut:#AEB2B9; --dim:#7C818A;
 --o:#F37021; --ok:#2BB673;
 --f:"Plus Jakarta Sans",system-ui,"Segoe UI",Arial,sans-serif;
 background:var(--bg);color:var(--fg);font-family:var(--f);
}
.hs1 *{box-sizing:border-box}
.hs1 .xwrap{max-width:1320px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}

.hs1{position:relative;padding-block:clamp(28px,4vw,56px) 28px;overflow:hidden}
.hs1:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
.hs1 .xgrid{position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(24px,4vw,56px);align-items:center}
.hs1 .xcopy{min-width:0;display:grid}
.hs1 .xslide-copy{grid-area:1/1;transition:opacity .6s ease,transform .6s ease}
.hs1 .xslide-copy[aria-hidden="true"]{opacity:0;transform:translateY(12px);pointer-events:none}
.hs1 .xey{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#FFC59E;background:rgba(243,112,33,.14);border:1px solid rgba(243,112,33,.32);padding:6px 14px;border-radius:999px;letter-spacing:.02em}
.hs1 .xey i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(43,182,115,.18)}
.hs1 .xhl{font-size:clamp(34px,4.3vw,58px);line-height:1.04;letter-spacing:-.035em;font-weight:800;margin:18px 0 16px;text-wrap:balance;max-width:16ch}
.hs1 .xhl em{font-style:normal;color:#fff;background:linear-gradient(transparent 64%,rgba(255,255,255,.16) 64%)}
.hs1 .xld{font-size:17.5px;line-height:1.6;color:var(--mut);max-width:50ch;margin:0}
.hs1 .xchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.hs1 .xchips span{font-size:12.5px;font-weight:600;color:#D6D8DC;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:999px;padding:5px 11px}
.hs1 .xbtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hs1 .xbtn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:14px 22px;font-weight:700;font-size:15px;text-decoration:none}
.hs1 .xbtn.xp{background:var(--o);color:#fff}.hs1 .xbtn.xs{border:1px solid rgba(255,255,255,.28);color:var(--fg)}
.hs1 .xbtn:focus-visible,.hs1 .xtab:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* scene */
.hs1 .xscene{position:relative;aspect-ratio:1200/820;max-width:100%;border-radius:20px;overflow:hidden;background:var(--stage);border:1px solid var(--line);box-shadow:0 50px 90px -50px rgba(0,0,0,.9)}
.hs1 .xscene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s ease}
.hs1 .xscene img.xon{opacity:1;animation:hs1drift 7s linear forwards}
@keyframes hs1drift{from{transform:scale(1.06) translate(1.2%,.6%)}to{transform:scale(1.06) translate(-1.2%,-.6%)}}
.hs1 .xsweep{position:absolute;top:0;bottom:0;width:2px;background:var(--ok);box-shadow:0 0 18px 4px rgba(43,182,115,.45);opacity:.0;animation:hs1sw 7s ease-in-out infinite}
@keyframes hs1sw{0%{left:-2%;opacity:0}8%{opacity:.8}45%{left:102%;opacity:.8}50%,100%{left:102%;opacity:0}}
.hs1 .xlive{position:absolute;left:16px;top:16px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;background:rgba(30,32,36,.78);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:#D6D8DC}
.hs1 .xlive i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:hs1bl 1.4s infinite}@keyframes hs1bl{50%{opacity:.25}}
.hs1 .xcard{position:absolute;right:16px;bottom:16px;width:min(300px,62%);background:rgba(255,255,255,.96);color:#1F2226;border-radius:14px;padding:12px 14px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);display:grid}
.hs1 .xcard .xc{grid-area:1/1;transition:opacity .5s}.hs1 .xcard .xc[aria-hidden="true"]{opacity:0}
.hs1 .xcard h3{margin:0 0 8px;font-size:12px;font-weight:700;color:#5C6068;letter-spacing:.03em;display:flex;justify-content:space-between}
.hs1 .xcard h3 b{color:#1E8A55}
.hs1 .xrow{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:4px 0;border-top:1px solid #EEF0F2;font-variant-numeric:tabular-nums}
.hs1 .xrow span{color:#5C6068}.hs1 .xrow strong{font-weight:700;white-space:nowrap}.hs1 .xrow strong.xok{color:#1E8A55}
.hs1 .xrow strong.xok:after{content:" ✓"}
.hs1 .xcnt{font-size:28px;font-weight:800;letter-spacing:-.02em}

/* tabs */
.hs1 .xtabs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(24px,3vw,40px)}
.hs1 .xtab{all:unset;cursor:pointer;display:grid;gap:4px;padding:14px 16px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);position:relative;overflow:hidden;transition:background .3s,border-color .3s}
.hs1 .xtab small{font-size:12px;font-weight:700;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.hs1 .xtab b{font-size:16px;font-weight:700}.hs1 .xtab span{font-size:13px;color:var(--mut)}
.hs1 .xtab[aria-selected="true"]{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22)}
.hs1 .xtab[aria-selected="true"] small{color:#FFC59E}
.hs1 .xtab .xpg{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--o)}
.hs1 .xtab[aria-selected="true"] .xpg{animation:hs1pg var(--dur) linear forwards}
.hs1.xpaused .xtab .xpg{animation-play-state:paused}
@keyframes hs1pg{to{width:100%}}
.hs1 .xtrust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:13px;color:var(--dim)}
.hs1 .xtrust span:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:8px;vertical-align:2px}

@media(max-width:960px){.hs1 .xgrid{grid-template-columns:1fr}.hs1 .xscene{order:-1}.hs1 .xhl{max-width:20ch}}
@media(max-width:560px){.hs1 .xtabs{grid-template-columns:1fr}.hs1 .xtab span{display:none}.hs1 .xcard{display:none}.hs1 .xbtn{padding:12px 18px}}
@media(prefers-reduced-motion:reduce){.hs1 *{animation:none!important;transition:none!important}.hs1 .xsweep{display:none}}