:root{font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#090f27;background:#f8f9ff;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden;background:radial-gradient(ellipse 58% 35% at 78% 16%,#bbc7ffad,transparent 82%),radial-gradient(ellipse 60% 35% at 30% 54%,#e7e9ff,transparent 80%),linear-gradient(130deg,#fff 0%,#f6f7ff 54%,#e5e9ff 100%)}a{color:inherit;text-decoration:none}.wrap{max-width:1380px;margin:auto;padding-left:36px;padding-right:36px}.topbar{height:90px;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:9px;font-size:26px;white-space:nowrap;letter-spacing:-.5px}.brand img{width:55px;height:43px;object-fit:contain}.topbar nav{display:flex;align-items:center;gap:44px;font-size:14px;font-weight:600}.topbar nav a:hover{color:#4b65ec}.login,.primary{background:#080e25;color:white;border-radius:100px;display:inline-flex;align-items:center;justify-content:center;gap:14px;box-shadow:0 8px 20px #171c3930;transition:transform .2s,box-shadow .2s}.login{padding:13px 21px;font-size:14px}.login:hover,.primary:hover{transform:translateY(-3px);box-shadow:0 13px 24px #171c3930}.hero{min-height:450px;display:grid;grid-template-columns:46% 54%;align-items:center;position:relative}.hero-copy{position:relative;z-index:2;padding-bottom:30px}.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 15px;background:#e9edff;border-radius:30px;font-size:13px;font-weight:600}.pill i{width:8px;height:8px;background:#4569ff;border-radius:50%;box-shadow:0 0 0 4px #dce4ff}.hero h1{font-size:clamp(40px,4.5vw,70px);line-height:1.2;letter-spacing:-2px;margin:20px 0 22px;font-weight:850}.hero h1 span{background:linear-gradient(95deg,#367cff,#8e42f9);color:transparent;background-clip:text}.hero-copy>p{font-size:17px;line-height:1.95;color:#384465;margin:0 0 34px}.actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.primary,.secondary{min-height:50px;padding:0 28px;font-size:15px;font-weight:650}.secondary{border:1px solid #cbd2ee;background:#ffffffb5;border-radius:100px;display:inline-flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 6px 18px #8a9ad51c;transition:transform .2s}.secondary:hover{transform:translateY(-3px)}.secondary span{color:#3163ff}.hero-visual{height:455px;position:relative;overflow:visible}.hero-art{position:absolute;width:112%;height:100%;object-fit:cover;object-position:center;left:-4%;top:-3%;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse 66% 61% at 52% 50%,black 57%,transparent 100%)}.hero-mark{position:absolute;left:46%;top:33%;width:135px;height:100px;transform:rotate(-8deg);display:flex;align-items:center;justify-content:center;opacity:.95}.hero-mark img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 6px #1949ae30)}.float-chip{position:absolute;display:flex;flex-direction:column;gap:5px;background:#ffffffa6;border:1px solid #fff9;border-radius:15px;padding:15px 18px;box-shadow:0 12px 30px #8594cc29;backdrop-filter:blur(15px)}.float-chip b{font-size:14px}.float-chip small{font-size:11px;color:#687494}.chip-left{top:16%;left:9%}.chip-right{top:20%;right:0}.features{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;position:relative;z-index:2;margin-top:6px}.feature{min-height:120px;display:flex;align-items:center;gap:15px;padding:22px;background:#ffffffa6;border:1px solid #ffffffd9;border-radius:20px;box-shadow:0 14px 40px #9ca9e222;backdrop-filter:blur(20px);transition:transform .2s,box-shadow .2s}.feature:hover{transform:translateY(-5px);box-shadow:0 20px 40px #8a9bd43d}.symbol{font-size:34px;font-weight:800;color:#5277ff;width:38px}.feature h3{font-size:17px;margin:0 0 9px}.feature p{font-size:12px;line-height:1.6;color:#5e6b89;margin:0}.arrow{margin-left:auto;border-radius:50%;background:#edf0ff;color:#4057b7;width:26px;height:26px;text-align:center;font-size:23px;line-height:23px;flex-shrink:0}.workflow{min-height:440px;display:grid;grid-template-columns:56% 44%;align-items:center;position:relative;padding-top:55px;padding-bottom:50px}.workflow-copy{z-index:2}.kicker{font-size:13px;letter-spacing:1px;color:#4b71ff;font-weight:700}.workflow h2,.bottom h2{font-size:clamp(27px,2.6vw,39px);margin:14px 0 8px;letter-spacing:-.6px}.workflow-copy>p,.bottom p{color:#66728e;margin:0;font-size:15px}.workflow ol{list-style:none;padding:0;margin:46px 0 0;display:flex;gap:32px}.workflow li{display:flex;align-items:center;gap:12px;min-width:0}.workflow li>span{display:grid;place-items:center;background:linear-gradient(145deg,#a8c3ff,#5c7eff);color:#fff;width:38px;height:38px;border:5px solid #dfe7ff;border-radius:50%;font-weight:700;flex-shrink:0}.workflow li div{display:flex;flex-direction:column;gap:7px}.workflow li b{font-size:14px}.workflow li small{font-size:11px;color:#6a7895;line-height:1.5}.dashboard{position:relative;transform:rotate(7deg) translate(35px,35px);filter:drop-shadow(0 15px 30px #9aa9df55)}.dashboard img{width:118%;border-radius:26px;display:block}.dash-label{position:absolute;right:0;top:-24px;font-size:11px;color:#68749a}.bottom{border-radius:28px;background:linear-gradient(110deg,#e6ebff,#f9faff 55%,#dce4ff);padding-top:45px;padding-bottom:45px;display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:50px}.bottom h2{line-height:1.3}footer{display:flex;align-items:center;justify-content:space-between;padding-top:20px;padding-bottom:30px;border-top:1px solid #cdd6f066;color:#69738d;font-size:13px}footer .brand{font-size:17px;color:#111932}footer .brand img{width:35px;height:30px}footer>div{display:flex;gap:24px}@media(max-width:1100px){.topbar nav{gap:18px}.hero{grid-template-columns:48% 52%}.hero h1{font-size:48px}.features{grid-template-columns:repeat(2,1fr)}.workflow ol{gap:12px;flex-wrap:wrap}.workflow li{min-width:28%}}@media(max-width:720px){.wrap{padding-left:20px;padding-right:20px}.topbar{height:75px}.brand{font-size:20px}.brand img{width:43px;height:35px}.topbar nav{display:none}.login{font-size:12px;padding:11px 15px}.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:38px}.hero-copy{padding-bottom:0}.hero h1{font-size:clamp(38px,9vw,58px);letter-spacing:-1.6px}.hero-copy>p{font-size:14px}.hero-copy>p br{display:none}.hero-visual{height:320px;margin:5px -20px 0}.hero-art{width:110%;left:-5%}.hero-mark{width:100px;height:75px}.float-chip{padding:9px 11px}.float-chip b{font-size:11px}.float-chip small{font-size:9px}.features{grid-template-columns:1fr 1fr;gap:9px}.feature{min-height:130px;padding:15px;align-items:flex-start;gap:8px}.symbol{font-size:25px;width:25px}.feature h3{font-size:14px}.feature p{font-size:11px}.arrow{display:none}.workflow{display:flex;flex-direction:column;align-items:stretch;padding-top:65px}.workflow ol{flex-direction:column;gap:22px;margin-top:30px}.workflow li small{font-size:12px}.dashboard{transform:rotate(4deg) translate(0,10px);margin-top:30px}.dashboard img{width:100%}.bottom{margin-left:12px;margin-right:12px;flex-direction:column;align-items:flex-start;padding:30px 22px}.bottom h2{font-size:28px}footer{flex-wrap:wrap;gap:12px}footer>p{order:3;width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* V3: the hero illustration already contains the LS emblem and three cards.
   Never overlay additional HTML on top of those baked-in elements. */
.hero-visual{isolation:isolate;overflow:hidden;height:455px}
.hero-art{
  left:0;top:0;width:100%;height:100%;
  object-fit:contain;object-position:center;
  mix-blend-mode:normal;
  -webkit-mask-image:radial-gradient(ellipse 76% 77% at 50% 49%,#000 56%,transparent 100%);
  mask-image:radial-gradient(ellipse 76% 77% at 50% 49%,#000 56%,transparent 100%);
}
.hero-mark,.float-chip{display:none!important}
.dashboard{transform:rotate(5deg) translate(0,12px);max-width:100%;filter:drop-shadow(0 14px 24px #9aa9df3b)}
.dashboard img{width:100%;height:auto}
@media(max-width:720px){
  .hero-visual{height:clamp(235px,61vw,355px);margin:12px -20px 0}
  .hero-art{width:100%;left:0;top:0;object-fit:contain}
  .dashboard{transform:rotate(2deg) translate(0,8px)}
}

/* Final visual refinement: enlarged art, blended edges, original three numbered steps */
.hero{grid-template-columns:43% 57%;min-height:475px}
.hero-visual{height:485px;overflow:visible;isolation:isolate}
.hero-visual:before{content:"";position:absolute;inset:-6% -8%;z-index:-1;background:radial-gradient(ellipse at 55% 43%,#c4d0ff99,transparent 72%);pointer-events:none}
.hero-art{left:-5%;top:-3%;width:112%;height:106%;object-fit:cover;object-position:center;max-width:none;-webkit-mask-image:radial-gradient(ellipse 73% 75% at 50% 50%,#000 50%,#000 61%,transparent 100%);mask-image:radial-gradient(ellipse 73% 75% at 50% 50%,#000 50%,#000 61%,transparent 100%)}
.section-rule{height:4px;width:38px;background:#356cff;border-radius:5px;margin-bottom:18px}
.workflow{padding-top:65px}
.workflow ol{margin-top:42px}
.capabilities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-top:5px;padding-bottom:42px}
.capabilities>div{display:grid;grid-template-columns:38px 1fr;column-gap:12px;align-items:center;padding:18px 20px;border:1px solid #fff9;background:#ffffff85;border-radius:17px}
.capabilities span{grid-row:span 2;color:#376cff;font-size:27px}
.capabilities strong{font-size:14px}
.capabilities small{font-size:12px;color:#687696;margin-top:4px}
@media(max-width:1100px){.hero{grid-template-columns:46% 54%}.hero-visual{height:420px}}
@media(max-width:720px){.hero{display:flex;min-height:0}.hero-visual{height:clamp(280px,70vw,400px);overflow:visible;margin:10px -20px 0}.hero-art{left:-4%;top:0;width:108%;height:100%;object-fit:contain}.capabilities{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.capabilities>div{padding:14px 11px;grid-template-columns:28px 1fr;column-gap:7px}.capabilities span{font-size:23px}.capabilities strong{font-size:12px}.capabilities small{font-size:10px}}

/* V5: image itself has an alpha channel; never use blend modes or CSS masks. */
.hero{grid-template-columns:44% 56%;min-height:490px}
.hero-visual{height:480px;overflow:visible;isolation:isolate}
.hero-visual:before{content:"";position:absolute;inset:-10% -8%;z-index:-1;background:radial-gradient(ellipse 65% 65% at 52% 49%,#bdcaff99 0%,#d7dcff6b 43%,transparent 83%);pointer-events:none}
.hero-art{position:absolute;display:block;left:-8%;top:-6%;width:119%;height:111%;object-fit:contain;object-position:center;mix-blend-mode:normal!important;-webkit-mask-image:none!important;mask-image:none!important}
.features{margin-top:0}
.dashboard{transform:rotate(4deg) translate(4px,18px);overflow:hidden;border-radius:25px}
.dashboard img{width:100%}
.dash-label{display:none!important}
@media(max-width:1100px){.hero{grid-template-columns:45% 55%}.hero-visual{height:410px}}
@media(max-width:720px){.hero{display:flex;min-height:0}.hero-visual{height:clamp(260px,63vw,390px);margin:0 -20px}.hero-art{left:-4%;top:-2%;width:108%;height:104%;object-fit:contain}.features{margin-top:0}}

/* V5.1 — measured spacing refinements; V5 transparent hero retained */
@media(min-width:1101px){
  .hero{min-height:500px}
  .hero-visual{transform:translateY(16px)}
  .features{margin-top:-2px}
  .workflow{min-height:390px;padding-top:30px;padding-bottom:28px;align-items:start}
  .workflow-copy{padding-top:55px}
  .workflow ol{margin-top:36px}
  .dashboard{transform:rotate(3deg) translate(-10px,0);max-width:100%;margin-top:12px;overflow:visible}
  .dashboard img{width:100%;height:auto}
}
@media(min-width:721px) and (max-width:1100px){
  .hero-visual{transform:translateY(10px)}
  .workflow{min-height:390px;padding-top:35px;padding-bottom:28px}
  .dashboard{transform:rotate(3deg) translate(0,6px);overflow:visible}
}
@media(max-width:720px){
  .hero-visual{transform:none}
  .workflow{min-height:0;padding-top:46px;padding-bottom:28px}
  .dashboard{transform:rotate(2deg) translate(0,5px);overflow:visible;margin-top:24px}
  .dashboard img{width:100%;height:auto}
}

/* V6: layered scene, consistent desktop proportions, no image rectangle */
body{background:#f8f9ff;position:relative}
.page-glow{position:absolute;inset:0 0 auto;height:1180px;pointer-events:none;z-index:0;background:
 radial-gradient(ellipse 47% 42% at 80% 21%,rgba(137,159,255,.38),transparent 100%),
 radial-gradient(ellipse 48% 39% at 56% 37%,rgba(198,207,255,.35),transparent 100%),
 linear-gradient(110deg,#fff 5%,#f8f9ff 48%,#edf0ff 100%)}
header,main,footer{position:relative}
.wrap{max-width:1430px}
.topbar{height:90px}
.hero{grid-template-columns:43% 57%;min-height:475px;align-items:center}
.hero-copy{padding:0 0 16px;z-index:2}
.hero h1{font-size:clamp(44px,4.4vw,69px);letter-spacing:-2.2px}
.hero-visual{height:470px;transform:none!important;overflow:visible;isolation:auto}
.hero-visual:before{content:"";position:absolute;z-index:0;inset:0 -9% -4% -10%;background:radial-gradient(ellipse 66% 56% at 55% 51%,rgba(134,163,255,.19),transparent 95%);pointer-events:none}
.hero-art{position:absolute;z-index:1;left:-8%;top:-3%;width:120%;height:106%;max-width:none;object-fit:contain;object-position:center;mix-blend-mode:normal;mask-image:none;-webkit-mask-image:none;filter:drop-shadow(0 14px 24px rgba(72,109,204,.09))}
.features{margin-top:-5px;gap:12px;z-index:3}
.feature{background:rgba(255,255,255,.73);border:1px solid rgba(255,255,255,.92);box-shadow:0 15px 45px rgba(91,114,203,.09)}
.workflow{min-height:430px;grid-template-columns:55% 45%;padding-top:50px;padding-bottom:35px;align-items:center}
.workflow-copy{padding-top:0}
.workflow ol{margin-top:42px}
.dashboard{margin:0;transform:rotate(4deg) translate(24px,14px);overflow:visible;filter:drop-shadow(0 20px 30px rgba(88,113,197,.2))}
.dashboard img{width:115%;max-width:none;height:auto;border-radius:24px}
@media(max-width:1100px){
.hero{grid-template-columns:46% 54%;min-height:425px}
.hero-visual{height:400px}
.hero-art{left:-6%;width:116%;top:0;height:100%}
.workflow{grid-template-columns:55% 45%}
.dashboard img{width:108%}
}
@media(max-width:720px){
.page-glow{height:1000px;background:radial-gradient(ellipse 80% 34% at 75% 40%,#b9c9ff66,transparent 100%),linear-gradient(135deg,#fff,#f0f2ff)}
.hero{display:flex;min-height:0;padding-top:28px}
.hero-copy{padding:0}
.hero h1{font-size:clamp(37px,9vw,55px);letter-spacing:-1.5px}
.hero-visual{height:clamp(245px,63vw,375px);margin:8px -20px 4px}
.hero-art{left:-3%;top:0;width:106%;height:100%;object-fit:contain}
.features{margin-top:0}
.workflow{display:flex;min-height:0;padding-top:52px;padding-bottom:28px}
.workflow ol{margin-top:28px}
.dashboard{margin-top:25px;transform:rotate(2deg) translate(0,0)}
.dashboard img{width:100%}
}
