/* Home hero background: soft colour fields, a faint hexagonal lattice, drifting particles and orbit rings */
.hshell{position:relative;isolation:isolate;overflow:hidden}
.hbg{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#F7F9FC 0%,#FFFFFF 70%)}
.hbg .bl{position:absolute;border-radius:50%;filter:blur(70px);opacity:.7;animation:hdrift 26s ease-in-out infinite alternate}
.hbg .b1{width:620px;height:620px;left:-160px;top:-220px;background:radial-gradient(circle,#CFDDF3,transparent 70%)}
.hbg .b2{width:560px;height:560px;right:-120px;top:40px;background:radial-gradient(circle,#F6E5B9,transparent 70%);animation-duration:32s}
.hbg .b3{width:700px;height:500px;left:30%;bottom:-300px;background:radial-gradient(circle,#DCE6F5,transparent 70%);animation-duration:38s}
@keyframes hdrift{to{transform:translate(60px,40px) scale(1.08)}}
.hbg .lat{position:absolute;inset:0;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 L56 16.2 L56 48.5 L28 64.7 L0 48.5 L0 16.2 Z M28 64.7 L28 97' fill='none' stroke='%232B4E8F' stroke-opacity='.10' stroke-width='1'/%3E%3Ccircle cx='28' cy='0' r='1.6' fill='%23D9A520' fill-opacity='.35'/%3E%3Ccircle cx='56' cy='48.5' r='1.6' fill='%232B4E8F' fill-opacity='.25'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 72% 45%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 72% 45%,#000 10%,transparent 75%)}
.hbg canvas.flow{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.stage .orb{position:absolute;left:50%;top:47%;width:0;height:0;pointer-events:none}
.stage .orb i{position:absolute;left:0;top:0;border:1px solid rgba(43,78,143,.14);border-radius:50%;transform:translate(-50%,-50%) rotateX(68deg) rotateZ(0);animation:orb 30s linear infinite}
.stage .orb i:nth-child(1){width:440px;height:440px}
.stage .orb i:nth-child(2){width:540px;height:540px;border-color:rgba(217,165,32,.22);animation-duration:44s;animation-direction:reverse}
.stage .orb i:nth-child(3){width:340px;height:340px;border-style:dashed;animation-duration:22s}
.stage .orb i:after{content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;border-radius:50%;background:#D9A520;box-shadow:0 0 12px rgba(217,165,32,.8)}
.stage .orb i:nth-child(1):after{background:#5B86C8;box-shadow:0 0 12px rgba(91,134,200,.8)}
@keyframes orb{to{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(360deg)}}
.stage{perspective:900px}
.stage .rx{position:absolute;left:0;bottom:44px;font:500 11px/1 var(--mono,ui-monospace),monospace;letter-spacing:.14em;text-transform:uppercase;color:#2B4E8F;display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8);box-shadow:0 6px 20px -10px rgba(11,30,58,.3)}
.stage .rx:before{content:"";width:7px;height:7px;border-radius:50%;background:#1E7B46;box-shadow:0 0 0 3px rgba(30,123,70,.15)}
.stage .rx[data-k=cleave]:before{background:#C25A2E;box-shadow:0 0 0 3px rgba(194,90,46,.15)}.stage .rx[data-k=form]:before{background:#D9A520;box-shadow:0 0 0 3px rgba(217,165,32,.2)}
.hfacts{display:flex;gap:10px;margin-top:34px;max-width:560px}
.hfacts div{padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.55);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.85);box-shadow:0 10px 30px -14px rgba(11,30,58,.25),inset 0 1px 0 #fff;flex:1;min-width:0}
.hfacts b{display:block;font-size:20px;letter-spacing:-.02em;color:var(--ink)}.hfacts span{font-size:12px;line-height:1.35;display:block;color:var(--mut)}
.hero .txt>*{animation:hup .9s cubic-bezier(.2,.8,.2,1) both}.hero .txt>*:nth-child(2){animation-delay:.08s}.hero .txt>*:nth-child(3){animation-delay:.16s}.hero .txt>*:nth-child(4){animation-delay:.24s}.hero .txt>*:nth-child(5){animation-delay:.32s}
@keyframes hup{from{opacity:0;transform:translateY(14px)}}
@media(max-width:900px){.stage .orb i:nth-child(1){width:280px;height:280px}.stage .orb i:nth-child(2){width:340px;height:340px}.stage .orb i:nth-child(3){width:220px;height:220px}.hfacts div{min-width:0;flex:1}.stage .rx{bottom:30px}}
@media (prefers-reduced-motion:reduce){.hbg .bl,.stage .orb i,.hero .txt>*{animation:none}}

.stage .hsteps{position:absolute;left:0;right:0;top:6px;display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap;pointer-events:none}
.stage .hsteps span{position:relative;overflow:hidden;font:500 10.5px/1 var(--m,ui-monospace),monospace;letter-spacing:.06em;color:#5B6675;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:color .3s,background .3s}
.stage .hsteps span.on{color:#0B1E3A;background:rgba(255,255,255,.9);box-shadow:0 4px 14px -8px rgba(11,30,58,.35)}
.stage .hsteps i{position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,#D9A520,#2B4E8F);transform-origin:left;transform:scaleX(0)}
@media(max-width:900px){.stage .hsteps{justify-content:center}}

/* ---- design variants (preview switcher) ---- */
.hshell.v-a .stage .orb{display:none}
.hshell.v-a .hbg .lat{opacity:.85}
/* B: night lab, a deep navy stage with glowing atoms */
.stage.night{border-radius:28px;background:radial-gradient(120% 90% at 50% 40%,#18305A 0%,#0B1E3A 55%,#071427 100%);box-shadow:0 40px 80px -30px rgba(11,30,58,.55),inset 0 1px 0 rgba(255,255,255,.08);margin:28px 0;overflow:hidden}
.stage.night:before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 L56 16.2 L56 48.5 L28 64.7 L0 48.5 L0 16.2 Z M28 64.7 L28 97' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E");-webkit-mask-image:radial-gradient(circle at 50% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(circle at 50% 45%,#000 20%,transparent 75%)}
.stage.night .orb{display:none}
.stage.night .cap{color:rgba(225,233,248,.7);right:22px;left:22px;bottom:16px}.stage.night .cap b{color:#fff}
.stage.night .rx{left:22px;bottom:52px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#F0C14B}
.stage.night .hsteps{top:18px;right:18px;left:18px}.stage.night .hsteps span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:rgba(225,233,248,.65)}.stage.night .hsteps span.on{background:rgba(255,255,255,.14);color:#fff}
/* C: full bleed, the structure fills the hero and the text sits on frosted glass */
.hshell.v-c .hero{grid-template-columns:minmax(0,640px) 1fr}
.hshell.v-c .stage{position:absolute;inset:0 -12vw 0 28%;height:auto}
.hshell.v-c .hero .txt{background:rgba(255,255,255,.55);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.85);border-radius:26px;padding:40px 40px 36px;margin:48px 0;box-shadow:0 30px 60px -30px rgba(11,30,58,.3)}
.hshell.v-c .stage .cap{right:14vw;bottom:24px}.hshell.v-c .stage .rx{left:auto;right:14vw;bottom:56px}.hshell.v-c .stage .hsteps{right:14vw;left:auto;top:24px}
@media(max-width:900px){.hshell.v-c .stage{position:relative;inset:auto;height:360px}.hshell.v-c .hero .txt{padding:24px;margin:0 0 40px}.stage.night{margin:12px 0}}

.phero .stage.night{height:420px;margin:0}
@media(max-width:900px){.phero .stage.night{height:340px}}