/* Homepage product motion: self-contained and respectful of reduced motion. */
.hero{background:#0a1121;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;inset:-25%;background:radial-gradient(ellipse at 72% 48%,#18408080,transparent 38%),radial-gradient(ellipse at 35% 90%,#12476060,transparent 40%);animation:hero-light 18s ease-in-out infinite alternate;pointer-events:none}
.hero::after{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(#b8d7ff05 1px,transparent 1px),linear-gradient(90deg,#b8d7ff05 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(90deg,transparent 28%,#000);pointer-events:none}
.hero-inner{max-width:1280px;padding:76px 32px 38px}
.hero-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:58px;align-items:center}
.hero-copy{padding:12px 0}
.hero .hero-eyebrow{border:0;padding:0;background:none;color:#91b9e5;font-size:12px;letter-spacing:1.5px}
.hero .hero-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:#71c8fa;box-shadow:0 0 15px #6dcfff}
.hero h1{font-size:58px;line-height:1.16;font-weight:650;letter-spacing:-2px;margin:25px 0 24px}
.hero h1 em{background:linear-gradient(100deg,#b2ddff,#66aaff 80%);background-clip:text;-webkit-background-clip:text}
.hero p.lead{font-size:15px;line-height:1.95;max-width:450px;color:#a9b8ce;margin-bottom:28px}
.hero .hero-cta{gap:12px}
.hero .hero-cta .btn{padding:12px 20px;font-size:13px}
.hero .hero-cta .btn-primary{background:#f0f6ff;color:#122641;box-shadow:0 5px 28px #669de526}
.hero-proof{margin:24px 0 0;font-size:11px;letter-spacing:.3px;color:#7287a3}
.hero-proof strong{font-weight:600;color:#aec0d8}
.hero .hero-stats{margin-top:58px;background:none;border:0;border-top:1px solid #c1d8ff1a;border-radius:0;grid-template-columns:repeat(4,1fr)}
.hero .stat{padding:22px 0 0;border:0}
.hero .stat .num{font-size:14px;font-weight:500;color:#b4c3d8;letter-spacing:.3px}
.hero .stat .num em{color:#70aaf2;background:none;margin-right:5px}
.hero .stat .lbl{font-size:11px;color:#687e9b;margin-top:5px}
.hero-demo{position:relative;min-width:0}
.hero-demo::before{content:"";position:absolute;inset:-42px;border:1px solid #90bbff0b;border-radius:50%;transform:rotate(-20deg);pointer-events:none}
.demo-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;font-size:11px;color:#92a8c6;letter-spacing:1px}
.demo-heading-label{display:flex;align-items:center;gap:8px}
.demo-heading-label::before{content:"";width:6px;height:6px;background:#63d4bc;border-radius:50%;box-shadow:0 0 10px #63d4bc40}
.demo-toggle{border:1px solid #9cbbdd38;border-radius:20px;padding:5px 11px;font:inherit;color:#a9bdd9;background:#ffffff04;cursor:pointer;letter-spacing:0}
.demo-toggle:hover{color:#fff;border-color:#9cbbdd88}
.demo-toggle:focus-visible,.demo-role:focus-visible{outline:2px solid #6baafa;outline-offset:4px}
.demo-window{position:relative;overflow:hidden;border-radius:17px;border:1px solid #c5d7ef80;background:#f9fbfe;color:#23324b;box-shadow:0 30px 95px #0006,0 0 80px #5594e512;transform:perspective(1600px) rotateY(-3deg) rotateX(1deg)}
.demo-titlebar{display:flex;align-items:center;height:42px;padding:0 17px;gap:14px;border-bottom:1px solid #e5ebf3;background:#f1f5fa;font-size:11px;color:#718198}
.demo-lights{display:flex;gap:5px}.demo-lights i{display:block;width:7px;height:7px;border-radius:50%;background:#c9d4e2}.demo-lights i:first-child{background:#97b3d9}
.demo-titlebar strong{font-size:11px;font-weight:600;color:#3d5270}.demo-titlebar>span:last-child{margin-left:auto;font-size:10px;color:#8999ad}
.demo-body{display:grid;grid-template-columns:124px minmax(0,1fr);min-height:393px}
.demo-sidebar{background:#f3f6fa;border-right:1px solid #e3e9f1;padding:22px 10px}
.demo-sidebar-label{font-size:10px;color:#8b99ae;margin:0 9px 15px;letter-spacing:1px}
.demo-role{display:flex;align-items:center;gap:9px;border:1px solid transparent;width:100%;padding:11px 8px;margin:0 0 8px;border-radius:9px;background:transparent;color:#6a7990;font-family:inherit;font-size:11px;cursor:pointer;text-align:left;white-space:nowrap;transition:background .3s,color .3s,border .3s}
.demo-role[aria-pressed="true"]{background:#fff;border-color:#dce6f3;color:#243855;box-shadow:0 3px 9px #172e5110}
.bot-dot{display:inline-block;position:relative;flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--bot,#6470e9)}
.bot-dot::before,.bot-dot::after{content:"";position:absolute;top:7px;width:3px;height:7px;background:#fff;border-radius:3px;transform:rotate(-30deg)}
.bot-dot::before{left:7px}.bot-dot::after{left:12px;top:5px}
.demo-role[aria-pressed="true"] .bot-dot{animation:bot-breathe 3s ease-in-out infinite}
.demo-main{padding:22px 22px 20px;min-width:0}
.demo-message{background:#e9f0fc;border:1px solid #dbe6f7;border-radius:10px 10px 2px 10px;padding:13px 15px;font-size:12px;color:#405c83;line-height:1.8;min-height:70px}
.demo-message small{display:block;font-size:9px;color:#8aa0bc;letter-spacing:1px;margin-bottom:3px}
.demo-flow{display:flex;align-items:center;justify-content:space-between;margin:21px 0;font-size:10px;color:#9aa6b8;gap:5px}
.demo-flow span{display:flex;align-items:center;gap:5px;white-space:nowrap;transition:color .4s}
.demo-flow i{font-style:normal;display:inline-grid;place-items:center;border:1px solid currentColor;width:16px;height:16px;border-radius:50%;font-size:8px}
.demo-flow b{height:1px;background:#dfe6ef;flex:1;max-width:29px;position:relative;overflow:hidden}
.demo-flow b::after{content:"";position:absolute;inset:0;background:#6aa9f7;transform:translateX(-100%);transition:transform .8s}
.hero-demo[data-phase="0"] .demo-flow span:nth-of-type(1),.hero-demo[data-phase="1"] .demo-flow span:nth-of-type(-n+2),.hero-demo[data-phase="2"] .demo-flow span{color:#377fd6}
.hero-demo[data-phase="1"] .demo-flow b:first-of-type::after,.hero-demo[data-phase="2"] .demo-flow b::after{transform:translateX(0)}
.demo-result{background:#fff;border:1px solid #dde6f1;border-radius:10px;padding:15px;box-shadow:0 7px 20px #203b6506;transition:opacity .6s,transform .6s;min-height:197px;position:relative}
.hero-demo:not([data-phase="2"]) .demo-result-content{opacity:.15;filter:blur(2px)}
.demo-result-content{transition:opacity .6s,filter .6s}
.demo-result-title{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:13px}
.demo-result-title strong{font-weight:650}.demo-result-title span{font-size:9px;color:#389580;background:#eef8f4;padding:3px 7px;border-radius:4px;white-space:nowrap}
.demo-result-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #f0f3f8;font-size:10px;color:#7b8ca3}
.demo-result-row:last-child{border:0}.demo-result-row strong{font-weight:500;color:#3b506d;text-align:right}
.demo-loading{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:8px;font-size:11px;color:#607b9d;transition:opacity .3s}
.demo-loading::before{content:"";height:12px;width:12px;border:1.5px solid #d2dff1;border-top-color:#3a86df;border-radius:50%;animation:demo-spin 1s linear infinite}
.hero-demo[data-phase="2"] .demo-loading{opacity:0;pointer-events:none}
.demo-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 3px 0;font-size:10px;color:#7790b1}
.demo-dots{display:flex;gap:5px}.demo-dots i{width:5px;height:5px;border-radius:4px;background:#47607f;transition:width .4s,background .4s}.demo-dots i.active{width:20px;background:#8cbeff}
.hero.motion-paused *, .hero.motion-paused::before{animation-play-state:paused!important}
@keyframes hero-light{from{transform:translate3d(-2%,-2%,0) scale(.96)}to{transform:translate3d(3%,3%,0) scale(1.04)}}
@keyframes bot-breathe{50%{transform:translateY(-2px)}}
@keyframes demo-spin{to{transform:rotate(360deg)}}
@media(min-width:1440px){.hero-inner{padding-top:92px;padding-bottom:40px}.hero-layout{gap:70px}.hero h1{font-size:64px}}
@media(max-width:1100px){.hero-layout{gap:30px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.hero h1{font-size:48px}.demo-body{grid-template-columns:104px minmax(0,1fr)}.demo-role{font-size:10px;gap:6px;padding:10px 5px}.demo-main{padding:18px 14px}}
@media(max-width:820px){.hero-inner{padding:46px 24px 28px}.hero-layout{grid-template-columns:1fr;gap:40px}.hero-copy{text-align:center}.hero h1{font-size:50px;line-height:1.2;letter-spacing:-1.5px}.hero h1 br{display:block}.hero p.lead{margin:0 auto 24px;max-width:510px}.hero-cta{justify-content:center}.hero-proof{margin-top:18px}.hero-demo{width:100%;max-width:600px;margin:auto}.demo-window{transform:none}.hero .hero-stats{margin-top:34px;gap:15px}.hero .stat .num{font-size:12px}.hero .stat .lbl{font-size:10px}}
@media(max-width:480px){.hero-inner{padding:36px 18px 26px}.hero h1{font-size:40px;margin:20px 0}.hero .hero-eyebrow{font-size:10px;letter-spacing:1px}.hero p.lead{font-size:13px;line-height:1.9}.hero-proof{font-size:10px}.hero-layout{gap:32px}.hero .hero-cta .btn{font-size:12px;padding:11px 16px}.demo-body{grid-template-columns:1fr;min-height:0}.demo-sidebar{display:flex;padding:10px 9px 0;border:0;gap:4px}.demo-sidebar-label{display:none}.demo-role{flex:1;flex-direction:column;font-size:9px;gap:5px;padding:8px 2px;margin:0}.demo-role .bot-dot{width:20px;height:20px}.demo-main{padding:15px}.demo-message{min-height:66px;font-size:11px}.demo-flow{margin:16px 0}.demo-result{min-height:182px}.demo-caption{font-size:9px}.demo-titlebar{height:37px;padding:0 12px}.hero .hero-stats{grid-template-columns:repeat(2,1fr);gap:0}.hero .stat{padding-top:19px}.hero-demo::before{display:none}}
@media(prefers-reduced-motion:reduce){.hero::before,.hero *{animation:none!important;transition:none!important}.demo-window{transform:none}}

/* Keep the original brand story; give the product demonstration a visible rhythm. */
.hero::before{inset:-35%;background:radial-gradient(ellipse at 70% 40%,#235bcc99,transparent 36%),radial-gradient(ellipse at 35% 80%,#117eaa66,transparent 34%);animation:hero-aurora 10s ease-in-out infinite alternate}
.hero::after{background-size:60px 60px;animation:hero-grid 16s linear infinite}
.hero h1{font-size:50px;line-height:1.2;letter-spacing:-1.8px}
.hero .hero-eyebrow::before{display:none}
.hero .hero-eyebrow svg{color:#83c9ff;filter:drop-shadow(0 0 6px #70b6ff)}
.hero-search-link{flex-basis:100%;width:fit-content;color:#a9c9ed;font-size:12px;margin-top:4px}
.hero-search-link span{display:inline-block;margin-left:5px;transition:transform .2s}
.hero-search-link:hover{color:#fff}.hero-search-link:hover span{transform:translateX(4px)}
.hero-proof{font-size:11px;line-height:1.9;max-width:460px}
.hero .hero-stats{border:1px solid #80b3ff30;border-radius:14px;background:linear-gradient(110deg,#2b68b21c,#1c417a0d);margin-top:46px;overflow:hidden}
.hero .stat{padding:22px 26px;border-right:1px solid #80b3ff24}
.hero .stat:last-child{border-right:0}
.hero .stat .num{font-size:23px;font-weight:650;color:#e5edfc}
.hero .stat .lbl{font-size:12px;color:#92a9c6;margin-top:4px}
.hero-demo::before{inset:-26px -33px;border-radius:40%;border-color:#7fbbff25;animation:demo-orbit 12s ease-in-out infinite alternate;box-shadow:0 0 70px #4e8cff14,inset 0 0 60px #4e8cff0c}
.demo-window{animation:demo-float 7s ease-in-out infinite;box-shadow:0 30px 95px #0006,0 0 65px #5594e52e}
.demo-message{position:relative;min-height:92px}
.demo-message [data-demo-prompt]::after{content:"";display:inline-block;vertical-align:-2px;width:2px;height:13px;margin-left:3px;background:#3c86e5;opacity:0}
.is-typing .demo-message [data-demo-prompt]::after{opacity:1}
.demo-main{position:relative;overflow:hidden}
.demo-result{overflow:hidden;min-height:204px}
.demo-result::after{content:"";position:absolute;left:0;right:0;top:0;height:45%;background:linear-gradient(transparent,#65a6f32b,transparent);animation:demo-scan 2s ease-in-out infinite;pointer-events:none}
.hero-demo[data-phase="2"] .demo-result::after{display:none}
.hero-demo:not([data-phase="2"]) .demo-result-content{opacity:.12;filter:blur(3px);transform:translateY(9px)}
.demo-result-content{transition:opacity .4s,filter .4s,transform .4s}
.demo-result-row{opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s}
.demo-result-row.is-revealed{opacity:1;transform:translateY(0)}
.demo-flow span{font-weight:600}
.hero-demo[data-phase="0"] .demo-flow span:nth-of-type(1) i,.hero-demo[data-phase="1"] .demo-flow span:nth-of-type(2) i{box-shadow:0 0 0 5px #4a97ff20;background:#3b82ed;color:#fff;border-color:#3b82ed;animation:step-pulse 1.4s ease-in-out infinite}
.hero-demo[data-phase="2"] .demo-flow i{background:#3782df;color:white;border-color:#3782df}
.demo-role[aria-pressed="true"]{border-color:#aacbf6;background:#eef5ff;box-shadow:inset 3px 0 #4c91ed,0 3px 9px #172e5110}
.demo-playback{height:3px;margin:18px 3px 0;border-radius:3px;overflow:hidden;background:#a9cfff26}
.demo-playback span{display:block;height:100%;background:linear-gradient(90deg,#4295f2,#95e8ff);transform-origin:left;transform:scaleX(var(--demo-progress,0));transition:transform .08s linear;box-shadow:0 0 12px #80c4ff}
.demo-caption{margin-top:10px}.demo-caption b{font-weight:500;color:#b8d4f3;font-variant-numeric:tabular-nums}
.hero.motion-paused *::before,.hero.motion-paused *::after,.hero.motion-paused::after{animation-play-state:paused!important}
@keyframes hero-aurora{from{transform:translate3d(-8%,-5%,0) rotate(-8deg) scale(.95)}to{transform:translate3d(7%,6%,0) rotate(8deg) scale(1.12)}}
@keyframes hero-grid{to{background-position:60px 60px}}
@keyframes demo-orbit{from{transform:rotate(-12deg) scale(.98)}to{transform:rotate(8deg) scale(1.06)}}
@keyframes demo-float{0%,100%{transform:perspective(1600px) rotateY(-3deg) translateY(0)}50%{transform:perspective(1600px) rotateY(0) translateY(-9px)}}
@keyframes demo-scan{from{transform:translateY(-100%)}to{transform:translateY(230%)}}
@keyframes step-pulse{50%{box-shadow:0 0 0 8px #4a97ff09}}
@media(min-width:1440px){.hero h1{font-size:54px}}
@media(max-width:1100px){.hero h1{font-size:40px}.hero .stat{padding:20px}.hero .stat .num{font-size:20px}}
@media(max-width:820px){.hero h1{font-size:50px}.hero-proof{margin-left:auto;margin-right:auto}.hero .hero-stats{gap:0}.hero .stat{padding:18px 12px}.hero .stat .num{font-size:18px}.hero .stat .lbl{font-size:10px}.hero-demo{margin-top:4px}}
@media(max-width:480px){.hero h1{font-size:35px;letter-spacing:-1px}.hero .hero-stats{margin-top:28px}.hero .stat{padding:18px}.hero .stat:nth-child(2){border-right:0}.hero .stat:nth-child(-n+2){border-bottom:1px solid #80b3ff24}.hero .stat .num{font-size:20px}.hero .stat .lbl{font-size:11px}.hero-proof{font-size:10px}.demo-message{min-height:85px}.demo-result{min-height:195px}.demo-window{animation:none;transform:none}}
/* Reduced motion keeps the automatic workflow, without decorative movement. */
@media(prefers-reduced-motion:reduce){.hero::before,.hero::after,.hero *,.hero *::before,.hero *::after{animation:none!important;transition:none!important}.demo-window,.hero-demo::before,.demo-result-row,.demo-result-content{transform:none!important}.demo-result::after{display:none}}

/* Actual AI Niudao screenshots, edited into a silent looping walkthrough. */
.real-demo::before{inset:6px -28px 32px;opacity:.7}
.real-demo .demo-heading{margin-bottom:12px}
.real-demo-question{font-size:24px;line-height:1.4;color:#edf5ff;font-weight:600;letter-spacing:-.3px;margin:0 0 22px}
.real-demo-screen{position:relative;border:1px solid #c0d5f180;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 22px 70px #0005,0 0 55px #5496eb20}
.real-demo-video{display:block;width:100%;aspect-ratio:80/41;object-fit:contain;background:#f7f9fc}
.real-demo-story{display:flex;align-items:center;gap:10px;margin:18px 1px 0;color:#c8dbf5;min-height:30px}
.real-demo-story strong{font-size:13px;font-weight:500;flex:1}
.real-demo-step{font-size:10px;letter-spacing:1px;color:#72b5fc;font-variant-numeric:tabular-nums}
.real-demo-story a{color:#9bc5f9;font-size:11px;white-space:nowrap}
.real-demo-story a:hover{color:#fff}
.real-demo .demo-playback{margin-top:10px}
.real-demo-note{font-size:10px;color:#839bbd;margin:12px 0 0;letter-spacing:.2px}
@media(min-width:1101px){.hero-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:50px}.hero-inner{max-width:1380px}}
@media(max-width:820px){.real-demo{max-width:680px}.real-demo-question{text-align:center;font-size:23px}.real-demo-note{text-align:center}}
@media(max-width:480px){.real-demo-question{font-size:20px;margin-bottom:16px}.real-demo-story{gap:7px;flex-wrap:wrap;margin-top:13px}.real-demo-story strong{font-size:11px}.real-demo-story a{font-size:10px}.real-demo-step{font-size:9px}.real-demo-note{font-size:9px;line-height:1.7}.real-demo-screen{border-radius:10px}}