/* Shared product landing system (111Cloud, Kiuu). White, precise, in motion.
   Each page sets its accent on the body class; every animation is decorative and stops under reduced motion. */
.lx-body {
  --lx-ink:#0a1216;
  --lx-muted:#56666d;
  --lx-soft:#8a9aa1;
  --lx-line:rgba(12,44,60,.1);
  --lx-surface:#f5f8fa;
  --lx-rgb:11,108,255;
  --lx-accent:#0b6cff;
  --lx-accent-2:#00a6c7;
  --lx-grad:linear-gradient(100deg,#0b6cff 0%,#00a6c7 100%);
  --lx-dark:#070d12;
  --lx-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --lx-ease:cubic-bezier(.16,1,.3,1);
  background:#fff;
}
@property --lx-angle {syntax:"<angle>";inherits:false;initial-value:0deg}
.lx-body .site-footer {background:#fff}
.lx-page {overflow:clip;background:#fff;color:var(--lx-ink)}
.lx-wrap {width:min(100%,1320px);margin-inline:auto;padding-inline:var(--gutter)}
.lx-page h1,.lx-page h2,.lx-page h3 {font-weight:600;letter-spacing:-.045em}
.lx-page h2 {font-size:clamp(2.6rem,5.2vw,5.2rem);line-height:1.02}
.lx-page h2 span:not(.lx-grad-text) {color:#a3b0b6}
.lx-grad-text {background:var(--lx-grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lx-shimmer 8s ease-in-out infinite}
.lx-index {display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.6rem;font-family:var(--lx-mono);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--lx-muted)}
.lx-index span {display:inline-grid;place-items:center;min-width:2.1rem;height:1.5rem;padding-inline:.45rem;border:1px solid var(--lx-line);border-radius:1rem;color:var(--lx-accent);background:#fff}
.lx-index b {font-weight:600}
.lx-tag {font-family:var(--lx-mono);font-size:.66rem;font-weight:600;letter-spacing:.16em;color:var(--lx-accent)}
.lx-progress {position:fixed;z-index:60;inset:0 0 auto;height:2px;background:var(--lx-grad);transform-origin:0 50%;transform:scaleX(var(--lx-progress,0));pointer-events:none}

/* Buttons */
.lx-btn {position:relative;display:inline-flex;align-items:center;justify-content:center;gap:1rem;min-height:3.4rem;padding:.8rem .8rem .8rem 1.6rem;border:1px solid transparent;border-radius:3rem;font-size:.95rem;font-weight:600;white-space:nowrap;overflow:hidden;isolation:isolate;transition:transform .5s var(--lx-ease),box-shadow .4s,background .3s,border-color .3s;transform:translate(var(--mx,0),var(--my,0))}
.lx-btn__icon {display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;font-size:.95rem;transition:transform .45s var(--lx-ease)}
.lx-btn:hover .lx-btn__icon {transform:rotate(45deg)}
.lx-btn--primary {background:var(--lx-ink);color:#fff;box-shadow:0 10px 30px rgba(var(--lx-rgb),.2),0 2px 6px rgba(10,18,22,.2)}
.lx-btn--primary .lx-btn__icon {background:#fff;color:var(--lx-ink)}
.lx-btn--primary:before {content:"";position:absolute;z-index:-1;inset:0;background:var(--lx-grad);opacity:0;transition:opacity .4s}
.lx-btn--primary:after {content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:lx-sheen 4.5s var(--lx-ease) infinite}
.lx-btn--primary:hover:before {opacity:1}
.lx-btn--primary:hover {box-shadow:0 16px 40px rgba(var(--lx-rgb),.34)}
.lx-btn--ghost {background:rgba(255,255,255,.7);color:var(--lx-ink);border-color:var(--lx-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.lx-btn--ghost .lx-btn__icon {background:var(--lx-surface)}
.lx-btn--ghost:hover {border-color:rgba(var(--lx-rgb),.35);box-shadow:0 10px 30px rgba(var(--lx-rgb),.12)}
.lx-btn--light {background:#fff;color:var(--lx-ink);box-shadow:0 14px 34px rgba(0,0,0,.25)}
.lx-btn--light .lx-btn__icon {background:var(--lx-ink);color:#fff}
.lx-btn--outline {color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04)}
.lx-btn--outline .lx-btn__icon {background:rgba(255,255,255,.12)}
.lx-btn--outline:hover {border-color:rgba(255,255,255,.6)}
.lx-btn:focus-visible {outline:3px solid var(--lx-accent);outline-offset:4px}
.lx-actions {display:flex;flex-wrap:wrap;gap:.8rem}

/* Badge */
.lx-badge {display:inline-flex;align-items:center;gap:.55rem;min-height:2.5rem;padding:.35rem 1rem .35rem .8rem;border:1px solid var(--lx-line);border-radius:3rem;background:rgba(255,255,255,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-family:var(--lx-mono);font-size:.68rem;font-weight:600;letter-spacing:.12em;color:var(--lx-muted);box-shadow:0 6px 24px rgba(12,44,60,.06);transition:border-color .3s,box-shadow .3s}
a.lx-badge:hover {border-color:rgba(var(--lx-rgb),.3);box-shadow:0 8px 30px rgba(var(--lx-rgb),.14)}
.lx-badge strong {color:var(--lx-ink);font-weight:700}
.lx-badge__dot {position:relative;flex:none;width:.5rem;height:.5rem;border-radius:50%;background:#12c28a}
.lx-badge__dot:after {content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid #12c28a;animation:lx-ping 2.2s var(--lx-ease) infinite}
.lx-badge__sep {width:1px;height:1rem;margin-inline:.35rem;background:var(--lx-line)}

/* Ambient light */
.lx-orb {position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;will-change:transform}
.lx-orb--a {width:38rem;height:38rem;left:-12rem;top:-10rem;animation:lx-float-a 18s ease-in-out infinite}
.lx-orb--b {width:32rem;height:32rem;right:-10rem;top:6rem;animation:lx-float-b 22s ease-in-out infinite}
.lx-orb--c {width:26rem;height:26rem;left:35%;bottom:-8rem;opacity:.4;animation:lx-float-a 26s ease-in-out infinite reverse}
.lx-dots {position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(12,60,90,.15) 1px,transparent 1.3px);background-size:26px 26px;mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 20%,transparent 75%)}
.lx-spot {position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px circle at var(--sx,50%) var(--sy,30%),rgba(var(--lx-rgb),.08),transparent 60%)}

/* Headline words rise one by one */
.lx-line {display:block}
.lx-line>span {display:inline-block}
.lx-line--grad>span {padding-bottom:.08em;background:var(--lx-grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lx-shimmer 8s ease-in-out infinite}

/* Section heads */
.lx-head {display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:end;column-gap:4rem;margin-bottom:clamp(3rem,6vw,5rem)}
.lx-head .lx-index {grid-column:1/-1}
.lx-head>p:last-child {font-size:1.1rem;line-height:1.7;color:var(--lx-muted)}
.lx-head--center {display:flex;flex-direction:column;align-items:center;max-width:56rem;margin-inline:auto;text-align:center}
.lx-head--center>p:last-child {max-width:40rem;margin-top:1.4rem}

/* Marquee */
.lx-marquee {position:relative;padding-block:1.4rem;border-block:1px solid var(--lx-line);overflow:hidden;background:#fff;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.lx-marquee__track {display:flex;width:max-content;animation:lx-marquee 40s linear infinite}
.lx-marquee:hover .lx-marquee__track {animation-play-state:paused}
.lx-marquee__group {display:flex;align-items:center;gap:2.2rem;padding-right:2.2rem}
.lx-marquee span {font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:600;letter-spacing:-.03em;color:#b4c0c5;white-space:nowrap;transition:color .3s}
.lx-marquee span:hover {color:var(--lx-ink)}
.lx-marquee i {font-style:normal;color:var(--lx-accent);font-size:.9rem}

/* Statement that lights up while reading */
.lx-statement {font-size:clamp(1.5rem,3vw,2.6rem);font-weight:500;line-height:1.3;letter-spacing:-.03em;color:var(--lx-ink)}
.lx-statement .lx-word {transition:color .35s}
.lx-words-ready .lx-word {color:#c3ced3}
.lx-words-ready .lx-word.is-lit {color:var(--lx-ink)}

/* Cards with pointer light */
.lx-card {position:relative;padding:1.8rem;border-radius:1.6rem;background:var(--lx-surface);border:1px solid transparent;overflow:hidden;transform:rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .5s var(--lx-ease),border-color .4s,box-shadow .4s,background .4s}
.lx-card:before {content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--px,50%) var(--py,50%),rgba(var(--lx-rgb),.12),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.lx-card:hover {background:#fff;border-color:rgba(var(--lx-rgb),.2);box-shadow:0 30px 60px -25px rgba(12,60,100,.28)}
.lx-card:hover:before {opacity:1}
.lx-card h3 {margin:.8rem 0 .6rem;font-size:clamp(1.3rem,1.9vw,1.65rem);line-height:1.15}
.lx-card p {color:var(--lx-muted);line-height:1.65}
.lx-icon {display:grid;place-items:center;width:3rem;height:3rem;border-radius:1rem;background:#fff;border:1px solid var(--lx-line);box-shadow:0 8px 20px rgba(12,44,60,.06);color:var(--lx-accent);transition:transform .5s var(--lx-ease),background .4s,color .4s}
.lx-icon svg {width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lx-card:hover .lx-icon {transform:translateY(-3px) rotate(-6deg);background:var(--lx-accent);color:#fff}

/* Scroll-filled timeline */
.lx-timeline {position:relative;margin:0;padding:0;list-style:none}
.lx-timeline:before,.lx-timeline:after {content:"";position:absolute;left:1.5rem;top:1.5rem;bottom:1.5rem;width:2px;margin-left:-1px;border-radius:2px;background:var(--lx-line)}
.lx-timeline:after {background:var(--lx-grad);transform-origin:50% 0;transform:scaleY(var(--lx-fill,1));box-shadow:0 0 12px rgba(var(--lx-rgb),.4)}
.lx-timeline__step {position:relative;z-index:1;display:grid;grid-template-columns:3rem 1fr;gap:1.6rem;padding-bottom:3rem}
.lx-timeline__step:last-child {padding-bottom:0}
.lx-timeline__node {display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:#fff;border:1px solid var(--lx-line);font-family:var(--lx-mono);font-size:.72rem;font-weight:600;color:var(--lx-soft);transition:border-color .5s,color .5s,box-shadow .5s,background .5s}
.lx-timeline__step.is-active .lx-timeline__node {border-color:var(--lx-accent);color:#fff;background:var(--lx-accent);box-shadow:0 0 0 6px rgba(var(--lx-rgb),.12),0 10px 25px rgba(var(--lx-rgb),.35)}
.lx-timeline__step>div {padding:1.5rem 1.7rem;border-radius:1.3rem;border:1px solid var(--lx-line);background:#fff;transition:border-color .5s,box-shadow .5s}
.lx-timeline__step.is-active>div {border-color:rgba(var(--lx-rgb),.25);box-shadow:0 24px 50px -28px rgba(var(--lx-rgb),.45)}
.lx-timeline h3 {font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.15}
.lx-timeline p {margin-top:.6rem;color:var(--lx-muted);line-height:1.65}

/* FAQ */
.lx-faq {display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(3rem,8vw,8rem);padding-block:clamp(5rem,9vw,8rem)}
.lx-faq__list {display:grid;gap:.7rem;align-self:start}
.lx-faq details {border:1px solid var(--lx-line);border-radius:1.2rem;background:#fff;overflow:hidden;transition:border-color .3s,background .3s}
.lx-faq details:hover {border-color:rgba(var(--lx-rgb),.25)}
.lx-faq details[open] {background:var(--lx-surface);border-color:transparent}
.lx-faq summary {display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:4rem;padding:1.1rem 1.4rem;list-style:none;cursor:pointer;font-size:1.05rem;font-weight:600}
.lx-faq summary::-webkit-details-marker {display:none}
.lx-faq summary:focus-visible {outline:3px solid var(--lx-accent);outline-offset:-3px;border-radius:1.2rem}
.lx-faq__icon {position:relative;flex:none;width:2rem;height:2rem;border-radius:50%;background:var(--lx-surface);transition:background .3s,transform .5s var(--lx-ease)}
.lx-faq__icon:before,.lx-faq__icon:after {content:"";position:absolute;left:50%;top:50%;width:.8rem;height:1.5px;margin:-.75px 0 0 -.4rem;background:var(--lx-ink);transition:transform .5s var(--lx-ease),background .3s}
.lx-faq__icon:after {transform:rotate(90deg)}
.lx-faq details[open] .lx-faq__icon {background:var(--lx-accent);transform:rotate(180deg)}
.lx-faq details[open] .lx-faq__icon:before,.lx-faq details[open] .lx-faq__icon:after {background:#fff}
.lx-faq details[open] .lx-faq__icon:after {transform:rotate(0)}
.lx-faq__body p {max-width:34rem;padding:0 1.4rem 1.4rem;color:var(--lx-muted);line-height:1.7}
.lx-faq__body a {color:var(--lx-accent);text-decoration:underline;text-underline-offset:3px}
.lx-faq__cta {margin-top:2.2rem}

/* Closing band */
.lx-cta {position:relative;margin:0 1rem 1rem;padding:clamp(4rem,9vw,7.5rem) 0;border-radius:2.5rem;overflow:hidden;isolation:isolate;color:#fff;background:var(--lx-dark)}
.lx-cta:before {content:"";position:absolute;z-index:-1;inset:-40%;background:conic-gradient(from var(--lx-angle),transparent 0 60%,rgba(var(--lx-rgb),.55),transparent 80%);filter:blur(60px);opacity:.55;animation:lx-rotate 14s linear infinite}
.lx-cta:after {content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 50% 100%,#000,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 50% 100%,#000,transparent 70%)}
.lx-cta__inner {display:flex;flex-direction:column;align-items:center;text-align:center}
.lx-cta .lx-index {color:rgba(255,255,255,.7)}
.lx-cta .lx-index span {background:transparent;border-color:rgba(255,255,255,.2);color:#fff}
.lx-cta h2 {max-width:18ch;font-size:clamp(2.8rem,6vw,6rem)}
.lx-page .lx-cta h2 span:not(.lx-grad-text) {color:rgba(255,255,255,.45)}
.lx-cta p {max-width:36rem;margin:1.6rem 0 2.4rem;font-size:1.1rem;line-height:1.7;color:rgba(255,255,255,.72)}
.lx-cta .lx-actions {justify-content:center}
.lx-fineprint {max-width:60rem;margin:2rem auto 0;padding-inline:var(--gutter);font-size:.8rem;line-height:1.6;color:var(--lx-soft);text-align:center}

/* Reveal (only while landing.js is running and motion is allowed) */
@media(prefers-reduced-motion:no-preference) {
  .lx-js [data-lx-reveal] {opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .9s var(--lx-ease),transform 1s var(--lx-ease),filter .9s var(--lx-ease);transition-delay:calc(var(--d,0)*90ms)}
  .lx-js [data-lx-reveal].is-in {opacity:1;transform:none;filter:none}
  .lx-js .lx-title .lx-line>span {opacity:0;transform:translateY(.6em) rotateX(-40deg);filter:blur(8px);animation:lx-word 1.1s var(--lx-ease) calc(200ms + var(--w)*85ms) forwards}
  .lx-js .lx-title .lx-line--grad>span {animation:lx-word 1.1s var(--lx-ease) calc(200ms + var(--w)*85ms) forwards,lx-shimmer 8s ease-in-out 1.5s infinite}
  .lx-js .lx-timeline__step[data-lx-reveal] {transform:translateX(30px)}
  .lx-js .lx-timeline__step[data-lx-reveal].is-in {transform:none}
}

@keyframes lx-shimmer {0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes lx-sheen {0%,60%{left:-60%}100%{left:130%}}
@keyframes lx-float-a {0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4rem,3rem) scale(1.08)}}
@keyframes lx-float-b {0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-3rem,4rem) scale(.94)}}
@keyframes lx-ping {0%{transform:scale(.6);opacity:1}80%,100%{transform:scale(2.2);opacity:0}}
@keyframes lx-word {to{opacity:1;transform:none;filter:none}}
@keyframes lx-marquee {to{transform:translateX(-50%)}}
@keyframes lx-rotate {to{--lx-angle:360deg}}
@keyframes lx-spin {to{transform:rotate(360deg)}}
@keyframes lx-blink {50%{opacity:.2}}
@keyframes lx-bob {0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes lx-pulse {0%{transform:scale(.8);opacity:.9}100%{transform:scale(2.4);opacity:0}}

@media(max-width:1050px) {
  .lx-head {grid-template-columns:1fr;row-gap:1.5rem}
  .lx-faq {grid-template-columns:1fr}
}
@media(max-width:760px) {
  .lx-badge {flex-wrap:wrap;justify-content:center;font-size:.6rem}
  .lx-badge__sep,.lx-badge__extra {display:none}
  .lx-cta {margin:0 .75rem .75rem;border-radius:1.75rem}
  .lx-timeline__step {grid-template-columns:2.6rem 1fr;gap:1rem;padding-bottom:1.6rem}
  .lx-timeline:before,.lx-timeline:after {left:1.3rem}
  .lx-timeline__node {width:2.6rem;height:2.6rem}
  .lx-timeline__step>div {padding:1.25rem}
}
@media(max-width:480px) {
  .lx-page h2 {font-size:clamp(2.3rem,10vw,3.4rem)}
  .lx-actions {flex-direction:column;align-items:stretch;width:100%}
  .lx-actions .lx-btn {justify-content:space-between}
}
@media(prefers-reduced-motion:reduce) {
  .lx-page *,.lx-page *:before,.lx-page *:after {animation:none!important;transition:none!important}
  .lx-btn {transform:none}
}