/* Cinematic landing layer. All styles are scoped to the marketing document. */
:root{--page:#070911;--ink:#f0f1fa;--muted:#a1a7bd;--accent:#ac95ff;--line:#ffffff16}
html{overflow-x:clip}
body{isolation:isolate;background:var(--page);color:var(--ink)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 0 55%,#25204c26,transparent 45%),radial-gradient(ellipse at 100% 90%,#153f4a20,transparent 45%)}
::selection{background:#9f7aff66;color:#fff}
.wrap{max-width:1240px;padding-inline:40px}
.site-header{position:relative;z-index:5;height:96px;max-width:1400px;padding-inline:56px;border-bottom:1px solid #ffffff0b}
.brand{font-size:20px;letter-spacing:-.8px;color:#f4f3ff}
.brand img{filter:drop-shadow(0 0 12px #9775ff50)}
.brand span{font-family:ui-monospace,monospace;color:#bdadff;background:#aa89ff12;border:1px solid #b297ff30;border-radius:4px;padding:4px 6px}
.site-header nav{color:#b1b5c7;gap:36px;font-size:12px}
.site-header nav a{transition:color .2s}
.site-header nav a:hover,footer a:hover{color:#c7b7ff}
.button{border-radius:8px;padding:17px 24px;gap:30px;transition:transform .25s,box-shadow .25s,background .25s;border:1px solid transparent}
.button.small{background:#ffffff05;border:1px solid #ffffff2b;color:#eceafa;border-radius:7px;padding:12px 17px}
.primary,.hero-actions .primary{color:#10101a;background:linear-gradient(115deg,#e4dcff,#bca6ff 65%,#a7bfff);border:1px solid #d6caff;box-shadow:0 0 28px #9b77ff25,inset 0 1px 0 #fff8}
.primary:hover,.hero-actions .primary:hover{color:#080a12;background:#e1d7ff;box-shadow:0 0 40px #a981ff55}
.quiet,.hero-actions .quiet{color:#c7cadb}
.quiet:hover{background:#ffffff07}
.outline{background:#ffffff05;border-color:#ffffff28;color:#e3e0f3}
.skip{background:#211c39;color:#fff}
.hero{isolation:isolate;padding-top:105px;text-align:center;position:relative}
.hero::before{display:none}
.cosmic-sky{position:absolute;z-index:-3;top:-97px;bottom:0;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden;background:radial-gradient(ellipse at 50% 27%,#19162e 0%,#0b0d18 44%,#070911 74%)}
.cosmic-sky::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#070911 95%)}
.sky-haze{position:absolute;inset:0;background:radial-gradient(ellipse at 25% 28%,#7754e620,transparent 40%),radial-gradient(ellipse at 78% 38%,#3294ac18,transparent 35%);animation:haze-drift 18s ease-in-out infinite alternate}
.star-field{position:absolute;inset:0 0 24%;overflow:hidden}
.sky-star{position:absolute;width:var(--size);height:var(--size);border-radius:50%;background:#d6d6ff;opacity:.4;box-shadow:0 0 7px #b5aaff55;animation:starlight var(--duration) ease-in-out var(--delay) infinite alternate}
.cinema-orbit{position:absolute;z-index:-2;left:50%;top:-27px;width:900px;max-width:100%;height:710px;overflow:clip;transform:translateX(-50%);pointer-events:none;opacity:.85;mask-image:linear-gradient(#000 50%,transparent 98%)}
.orbital-ring{position:absolute;border-radius:50%;border:1px solid #b69bff45}
.ring-outer{inset:0 80px;transform:rotate(-27deg) scaleY(.78);box-shadow:inset 0 0 35px #a27aff0b,0 0 30px #a27aff10}
.ring-outer::before{content:"";position:absolute;inset:-2px;border-radius:50%;border-top:2px solid #bb9cff;border-right:1px solid #a3cbef40;filter:drop-shadow(0 0 9px #9f6fff);animation:orbit-spin 26s linear infinite}
.ring-outer::after{content:"";position:absolute;inset:22px;border-radius:50%;border:1px dashed #b99aff19}
.ring-inner{inset:60px 130px;transform:rotate(27deg) scaleY(.88);border-color:#8dcde81e}
.orbital-core{position:absolute;inset:120px 160px;background:radial-gradient(ellipse,#6841c51b,transparent 67%);border-radius:50%}
.orbital-flare{position:absolute;left:16%;top:28%;width:160px;height:2px;background:linear-gradient(90deg,transparent,#e4d2ff,transparent);box-shadow:0 0 24px 5px #9871ff88;transform:rotate(-52deg);animation:flare-breathe 6s ease-in-out infinite}
.scene-label{position:absolute;top:310px;font:9px/2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1.2px;color:#c5c2d9;text-align:left}
.scene-label>span:not(.scene-cross){color:#6c748d;font-size:8px}
.scene-label-left{left:0;transform:rotate(-90deg);transform-origin:center}
.scene-label-right{right:-8px;text-align:right}
.scene-cross{display:block;font-size:25px;color:#b1a0dc;margin-bottom:10px;font-weight:200}
.eyebrow{position:relative;color:#b8b2cc;border:1px solid #b1a2e72b;background:#1c183066;padding:9px 13px;border-radius:5px;font:9px/1.4 ui-monospace,monospace;letter-spacing:1.8px;backdrop-filter:blur(12px)}
.eyebrow>span:last-child{margin-left:14px;color:#c9b2ff;font-size:14px}
.status-dot{width:5px;height:5px;background:#b8a1ff;box-shadow:0 0 12px #ac7cff,0 0 0 4px #b79aff12}
.hero>h1{position:relative;font-size:clamp(58px,7.7vw,106px);line-height:1.03;letter-spacing:-6.5px;font-weight:600;margin:34px 0 24px;color:#f3f1fc}
.hero>h1>span{background:linear-gradient(105deg,#d8ceff 4%,#b299f3 47%,#8ad9e9 97%);background-clip:text;color:transparent}
.hero>.hero-copy{position:relative;color:#9ea3b9;font-size:15px;line-height:1.9}
.hero-actions{margin-top:30px;gap:12px}
.hero>.micro{display:flex;justify-content:center;align-items:center;gap:7px;color:#747c94;font-size:10px;margin:21px 0 0}
.micro>span{width:4px;height:4px;border-radius:50%;background:#87daca;box-shadow:0 0 8px #87daca55}
.preview-caption{max-width:1000px;margin:96px auto 17px;display:flex;justify-content:space-between;font:8px/1.6 ui-monospace,monospace;letter-spacing:1.7px;color:#7f87a0;text-align:left}
.preview-caption>span:last-child{color:#5d657f}
.preview-caption>span:last-child>span{font-size:16px;color:#afa0d3;margin-left:12px}
.preview-wrap{margin:0 auto;perspective:1200px}
.studio-preview{border:1px solid #8983b23d;border-radius:12px;background:#10131f;box-shadow:0 0 0 5px #ffffff02,0 -12px 80px #8860e612,0 50px 100px #0006}
.studio-preview::after{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,#ccb5ff99,transparent)}
.preview-bar{background:#151823;border-color:#ffffff0b;color:#707993;height:42px;font-family:ui-monospace,monospace}
.window-dots i{background:#504a68}.window-dots i:first-child{background:#9b83cf}.window-dots i:nth-child(2){background:#74758e}.window-dots i:last-child{background:#537779}
.preview-label{color:#8a809f}
.preview-sidebar{background:#0c0f19;border-color:#ffffff0a;color:#80869d;width:174px}
.preview-sidebar>span{color:#59627c}
.preview-sidebar b{background:linear-gradient(90deg,#9580ff21,#9580ff08);color:#c0b0fa;border:1px solid #9880ff17}
.sidebar-note{color:#535d77}
.preview-content{padding:28px 30px}
.kicker{color:#a798c8;font:9px/1.6 ui-monospace,monospace;letter-spacing:1.8px}
.preview-heading h2{color:#e3e3f4;font-size:25px}
.soft-badge{color:#b0a5ce;background:#a68aff0b;border-color:#a68aff26}
.flow-tabs{border-color:#ffffff0c;gap:25px}
.flow-tabs button{color:#838ca6;padding-bottom:14px}
.flow-tabs button[aria-selected=true]{color:#d1bfff;border-color:#b79aff}
.concept-art{min-height:200px;border:1px solid #a78bff20;background:radial-gradient(ellipse at 45% 40%,#513a7c66,transparent 65%),linear-gradient(135deg,#1e1b36,#11252c)}
.concept-art::before{content:"";position:absolute;inset:0;background:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(#000,transparent)}
.frame{border-color:#c9b8ff66;box-shadow:0 12px 40px #0005}
.frame-back{background:linear-gradient(140deg,#8162cd60,#3e2f6255);animation:frame-float-back 8s ease-in-out infinite}
.frame-front{background:linear-gradient(140deg,#dac4ff28,#57b9d32b);color:#d5d4ff;box-shadow:inset 0 0 20px #bd9aff16,0 20px 30px #0005;animation:frame-float 8s ease-in-out infinite}
.art-caption{color:#7c749d;letter-spacing:2px}
.preview-detail h3{color:#e8e6f5;font-size:19px}
.preview-detail>p{color:#979db4;font-size:11px}
.insight{background:#a382ff08;border-color:#a78bff20;color:#b69bfa}
.insight p{color:#8990a9;font-size:9px}
.floating-note{background:#1a1c2cec;border-color:#b39cff32;box-shadow:0 16px 50px #0006;backdrop-filter:blur(20px);padding:17px 21px;right:-25px;bottom:-25px;border-radius:9px}
.floating-note b{color:#e0daee}
.floating-note div>span{color:#898da7}
.spark{color:#b79aff;text-shadow:0 0 15px #bc8fff}
.orbit{display:none}
.capability-strip{margin:76px 0 0;padding:30px 0;border-color:#ffffff10;color:#8990a8}
.capability-strip>span{color:#5e6885;font-family:ui-monospace,monospace}
.capability-strip b{font-size:12px;letter-spacing:.3px}
.capability-strip i{color:#8671b4}
.section{padding-top:130px}
h2{font-size:clamp(34px,4vw,50px);line-height:1.15;font-weight:500;letter-spacing:-2px}
.section-heading>p{color:#939bb2;font-size:13px;max-width:315px}
.workflow-grid{gap:34px;margin-top:48px}
.workflow-grid article{position:relative;border-color:#ffffff18;padding-top:30px}
.workflow-grid article::before{content:"";position:absolute;top:-1px;left:0;width:42px;height:1px;background:#b69aff;box-shadow:0 0 15px #a58bff}
.step{font-family:ui-monospace,monospace;font-size:12px;color:#a995d0}
.workflow-grid h3,.feature h3{color:#e0e2ef;font-size:23px;letter-spacing:-.6px}
.workflow-grid p,.feature p{color:#929ab2;font-size:13px;line-height:1.85}
.workflow-grid a{color:#bdace2;display:inline-flex;align-items:center;gap:18px;margin-top:16px;font-size:11px}
.workflow-grid a:hover{color:#e4d4ff}
.feature-grid{gap:18px}
.feature{background:linear-gradient(130deg,#141724,#0d101a);border:1px solid #ffffff12;border-radius:14px;padding:32px;transition:border-color .3s,transform .3s,box-shadow .3s}
.feature:hover{border-color:#b497ff50;transform:translateY(-4px);box-shadow:0 16px 50px #0004}
.feature-wide{background:radial-gradient(ellipse at 80% 50%,#63458d21,transparent 60%),linear-gradient(130deg,#151726,#0f121e)}
.feature-icon{background:#ae88ff0c;border-color:#c2a4ff20;color:#c5a5ff;border-radius:9px;width:40px;height:40px}
.collection-card{background:linear-gradient(140deg,#46345d,#202a44);border-color:#cdb6ff45;box-shadow:0 25px 40px #0005}
.collection-card span{color:#b4a2c9}.collection-card b{color:#e0d6ee}.collection-card i{color:#cfb9f4}
.mini-card{background:#252438ed;color:#c8bddb;border-color:#a598cb33;box-shadow:0 10px 30px #0006}
.ai-feature{background:radial-gradient(ellipse at 100% 0,#45326644,transparent 70%),#121522}
.pro-tag{color:#c8b0ed}
.chat-example>span{color:#767d97}
.chat-example>p{background:#a184e51c;color:#c7bbdf;border:1px solid #9e84d91a}
.chat-example>div{background:#ffffff04;color:#a1a7bc;border:1px solid #ffffff08}
.center-heading>p:not(.kicker){color:#959cb2}
.pricing-grid{max-width:870px;gap:24px;margin-top:48px}
.price-card{background:linear-gradient(145deg,#151724,#0d111c);border-color:#ffffff17;border-radius:14px;padding:36px}
.pro-card{position:relative;background:radial-gradient(ellipse at 80% 0,#734bb62d,transparent 65%),#131522;border-color:#b296f766;box-shadow:0 0 60px #8c5cff0b}
.pro-card::before{content:"";position:absolute;top:-1px;left:18%;right:18%;height:1px;background:linear-gradient(90deg,transparent,#d3bbff,transparent);box-shadow:0 0 15px #ba96ff}
.plan-label{color:#b4a3d0}.price-card h3{color:#e3e1ed}
.price{color:#f0ecfa;font-size:52px}.price span{color:#8891a9}
.price-card>p,.price-card ul{color:#9ba3ba}.price-card ul{line-height:2.9;font-size:12px}
.price-card li::before{color:#bda1ff}.price-card .plan-note,.pricing-footnote{color:#7a839e}
.faq-section{padding-bottom:20px}
.faqs summary{color:#ccd0e0}.faqs details p{color:#929bb3}
.faqs details[open] summary{color:#ceb9ff}
.final-cta{position:relative;isolation:isolate;margin-top:115px;padding-top:95px;padding-bottom:105px;overflow:hidden;background:radial-gradient(ellipse at 50% 110%,#6d3cd93d,transparent 65%);border-color:#ffffff14}
.final-cta::before{content:"";position:absolute;z-index:-1;inset:55px 10% -250px;border:1px solid #b498ff20;border-radius:50%;box-shadow:0 0 90px #8b5bff0e}
.final-cta h2{font-size:clamp(38px,5vw,64px);color:#e8e1f6}
.final-cta img{filter:drop-shadow(0 0 25px #b29aff77)}
footer{border-color:#ffffff10;min-height:125px;color:#8490ab}
footer .brand{color:#dddaed}footer p{color:#6d7894}
#comet-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}
#motion-toggle{position:fixed;bottom:18px;left:18px;z-index:40;font:10px ui-monospace,monospace;letter-spacing:.4px;padding:10px 13px;color:#b4abc8;background:#10121ee6;border:1px solid #ae97db32;border-radius:6px;cursor:pointer;backdrop-filter:blur(14px)}
#motion-toggle::before{content:"";display:inline-block;width:4px;height:4px;background:#bca3ff;border-radius:50%;margin-right:7px;box-shadow:0 0 8px #b394ff}
#motion-toggle:disabled{opacity:.65;cursor:default}
.hero>.eyebrow,.hero>h1,.hero>.hero-copy,.hero>.hero-actions,.hero>.micro{animation:cinema-enter 1.3s cubic-bezier(.16,1,.3,1) both}
.hero>h1{animation-delay:.12s}.hero>.hero-copy{animation-delay:.25s}.hero>.hero-actions{animation-delay:.38s}.hero>.micro{animation-delay:.48s}
.reveal-pending{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
.reveal-pending.is-visible{opacity:1;transform:translateY(0)}
@keyframes cinema-enter{from{opacity:0;transform:translateY(25px);filter:blur(9px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
@keyframes flare-breathe{50%{opacity:.35;filter:blur(2px)}}
@keyframes haze-drift{to{transform:translate3d(35px,-20px,0) scale(1.06)}}
@keyframes starlight{from{opacity:.2}to{opacity:.65}}
@keyframes frame-float{50%{transform:translate(18px,-10px) rotate(13deg)}}
@keyframes frame-float-back{50%{transform:translate(-25px,-7px) rotate(-19deg)}}
body.motion-paused *,body.motion-paused *::before,body.motion-paused *::after{animation:none!important;transition:none!important}
body.motion-paused .reveal-pending{opacity:1;transform:none}
body.motion-paused #comet-canvas{display:none}
body.motion-paused #motion-toggle::before{background:#666477;box-shadow:none}
html:has(body.motion-paused){scroll-behavior:auto}
@media(min-width:1600px){.hero{padding-top:130px}.cinema-orbit{top:0}}
@media(max-width:1100px){.scene-label{display:none}.cinema-orbit{width:800px;height:660px;top:0}.hero>h1{letter-spacing:-4.5px}.floating-note{right:15px}.site-header{padding-inline:32px}}
@media(max-width:900px){.wrap{padding-inline:28px}.hero{padding-top:85px}.hero>h1{font-size:76px}.feature-wide{grid-column:span 2}.feature-grid{grid-template-columns:1fr 1fr}.preview-sidebar{width:140px}.preview-content{padding:24px}.preview-caption{margin-top:78px}}
@media(max-width:600px){
  .site-header{padding:19px 20px 16px;min-height:106px;height:auto;gap:14px}.brand{font-size:17px}.site-header nav{font-size:11px;gap:30px}.site-header .button.small{padding:10px 12px;font-size:10px}
  .wrap{padding-inline:20px}.hero{padding-top:70px}.cosmic-sky{top:-120px}
  .cinema-orbit{width:560px;height:530px;top:13px;opacity:.65}.ring-outer{inset:0 -45px}.ring-inner{inset:40px -5px}.orbital-flare{width:80px;left:5%;top:25%}
  .eyebrow{font-size:7px;letter-spacing:1.1px;padding:9px 10px}.eyebrow>span:last-child{margin-left:6px}
  .hero>h1{font-size:clamp(42px,10.8vw,64px);letter-spacing:-2.7px;line-height:1.08;margin:27px 0 22px}
  .hero>.hero-copy{font-size:13px;max-width:330px;margin-inline:auto;line-height:1.85}
  .hero-actions{gap:5px;margin-top:25px}.button{padding:14px 16px;gap:12px;font-size:11px}.hero>.micro{font-size:8px;gap:5px}
  .preview-caption{margin-top:65px;font-size:7px;letter-spacing:1px}.preview-caption>span:last-child{display:none}
  .preview-wrap{margin-top:0}.preview-content{padding:21px 17px}.preview-sidebar{display:none}.preview-bar{height:35px}
  .preview-heading h2{font-size:24px}.flow-tabs{gap:12px}.flow-tabs button{font-size:9px}
  .concept-art{min-height:180px}.preview-detail{padding:5px 0 9px}.preview-detail>p{font-size:12px}
  .floating-note{position:relative;right:auto;bottom:auto;margin:12px auto 0;padding:13px 15px;max-width:100%;width:max-content}
  .floating-note b{font-size:10px}.floating-note div>span{font-size:8px}
  .capability-strip{margin-top:38px;padding:25px 0;gap:12px}.capability-strip b{font-size:10px}
  .section{padding-top:80px}h2{font-size:36px;letter-spacing:-1.5px}.workflow-grid{margin-top:30px;gap:12px}
  .workflow-grid h3,.feature h3{font-size:23px}.workflow-grid article{padding:24px 0}
  .feature-grid{grid-template-columns:1fr}.feature-wide{grid-column:auto}.feature{padding:27px}
  .price-card{padding:28px}.pricing-grid{gap:20px}.price-card ul{font-size:11px}
  .final-cta{margin-top:80px;padding-top:65px;padding-bottom:75px}.final-cta h2{font-size:40px}
  footer{padding-bottom:70px}#motion-toggle{bottom:12px;left:12px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal-pending{opacity:1;transform:none}#comet-canvas{display:none}}

/* The shared SVG stays still in favicons and app chrome. Landing marks animate inline. */
.brand img,.brand .fusion-logo{width:42px;height:42px;flex-shrink:0;filter:drop-shadow(0 0 12px #9775ff35)}
.brand{gap:10px}
.fusion-logo{overflow:visible;vertical-align:middle}
.fusion-logo .logo-frame-back{transform-origin:26.5px 27.5px;animation:logo-fuse-back 7s ease-in-out infinite}
.fusion-logo .logo-frame-front{transform-origin:37.5px 37.5px;animation:logo-fuse-front 7s ease-in-out infinite}
.fusion-logo .logo-play{transform-origin:35px 37.5px;animation:logo-play-pulse 7s ease-in-out infinite}
.fusion-logo .logo-trace{animation:logo-trace 5s linear infinite}
.brand:hover .logo-trace{animation-duration:2s}
.brand:hover .fusion-logo{filter:drop-shadow(0 0 16px #a082ff77)}
.preview-sidebar>.fusion-logo,.preview-sidebar>img{width:40px;height:40px}
.final-cta>.fusion-logo,.final-cta>img{width:76px;height:76px;filter:drop-shadow(0 0 28px #ac83ff44)}
footer .brand .fusion-logo,footer .brand img{width:34px;height:34px}
@keyframes logo-fuse-back{0%,15%,85%,100%{transform:translate(0,0) rotate(0)}35%{transform:translate(-2px,-1.5px) rotate(-7deg)}55%,70%{transform:translate(0,0) rotate(0)}}
@keyframes logo-fuse-front{0%,15%,85%,100%{transform:translate(0,0) rotate(0)}35%{transform:translate(2px,1.5px) rotate(7deg)}55%,70%{transform:translate(0,0) rotate(0)}}
@keyframes logo-play-pulse{0%,40%,80%,100%{transform:scale(1);opacity:1}55%{transform:scale(1.12);opacity:.8}65%{transform:scale(1);opacity:1}}
@keyframes logo-trace{to{stroke-dashoffset:-100}}
@media(max-width:600px){.site-header .brand{gap:6px;font-size:16px}.site-header .brand img,.site-header .brand .fusion-logo{width:38px;height:38px}.final-cta>.fusion-logo,.final-cta>img{width:68px;height:68px}}