@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');

:root { --bg:#0a0a0d; --panel:#111116; --panel-2:#17171e; --text:#f2f0f5; --muted:#92909b; --line:#2a2933; --violet:#8b75ff; --pink:#ff4f91; --cyan:#35d0df; --lime:#b9ef68; --serif:Georgia,'Times New Roman',serif; --sans:'Manrope',sans-serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; color:var(--text); background:var(--bg); font-family:var(--sans); }
a { color:inherit; text-decoration:none; }
.noise { position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); }
.site-header { position:fixed; top:0; left:0; right:0; z-index:15; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:76px; padding:0 4.5vw; border-bottom:1px solid transparent; transition:.3s; }
.site-header.scrolled { height:64px; background:rgba(10,10,13,.83); border-color:var(--line); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:11px; width:max-content; font-weight:700; letter-spacing:-.03em; }
.brand img { width:30px; height:30px; }
.site-header nav { display:flex; gap:32px; color:#aaa8b2; font-size:13px; }
.site-header nav a:hover { color:white; }
.nav-download { justify-self:end; padding:10px 15px; color:#ded8ff; border:1px solid #4c456e; border-radius:7px; background:#1c192c; font-size:12px; font-weight:600; }
.nav-download span { color:#9991c5; }
main { overflow:hidden; }
.hero { position:relative; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; min-height:100vh; padding:120px 0 70px 7vw; }
.hero::before { position:absolute; top:-20%; right:-20%; width:70vw; height:70vw; content:""; background:radial-gradient(circle,rgba(109,92,255,.15),rgba(10,10,13,0) 67%); }
.hero-copy { position:relative; z-index:2; max-width:610px; }
.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 22px; color:#aaa6b6; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow span { width:22px; height:1px; background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink)); }
h1,h2,h3,p { margin-top:0; }
.hero h1 { margin-bottom:27px; font-size:clamp(48px,5.8vw,92px); font-weight:500; line-height:.94; letter-spacing:-.065em; }
.hero h1 em,.download h2 em { color:transparent; background:linear-gradient(100deg,var(--cyan),var(--violet) 48%,var(--pink)); -webkit-background-clip:text; background-clip:text; font-family:var(--serif); font-weight:400; }
.hero-lede { max-width:570px; margin-bottom:30px; color:#aaa8b0; font-size:17px; line-height:1.75; }
.hero-lede strong { color:#d7d2df; font-family:var(--mono); font-size:13px; font-weight:400; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:28px; min-height:48px; padding:0 20px; border:1px solid var(--line); border-radius:8px; font-size:12px; font-weight:650; }
.button.primary { color:#fff; background:linear-gradient(110deg,#5545cf,#8e51d5); border-color:#8c76f2; box-shadow:0 14px 36px rgba(96,73,205,.25); }
.button.primary:hover { transform:translateY(-2px); box-shadow:0 18px 42px rgba(96,73,205,.4); }
.button.secondary { color:#bbb8c3; background:#121217; }
.compatibility { margin:15px 0 0; color:#65636c; font-family:var(--mono); font-size:9px; }
.hero-visual { position:relative; z-index:1; min-width:760px; padding:80px 0 90px 55px; perspective:1400px; }
.app-window { position:relative; width:820px; overflow:hidden; background:#111217; border:1px solid #343540; border-radius:12px; box-shadow:-40px 55px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.02); transform:rotateY(-7deg) rotateX(2deg); }
.window-bar { display:flex; align-items:center; justify-content:space-between; height:43px; padding:0 14px; background:#0c0d10; border-bottom:1px solid #292a32; font-size:10px; }
.traffic { display:flex; gap:6px; }.traffic i{width:8px;height:8px;border-radius:50%;background:#ff5f57}.traffic i:nth-child(2){background:#febc2e}.traffic i:nth-child(3){background:#28c840}
.window-brand { display:flex; align-items:center; gap:6px; color:#c2c2c9; font-weight:700; }.window-brand img{width:17px;height:17px}.branch-pill{padding:6px 10px;color:#bcb2ff;background:#211e35;border:1px solid #4b437b;border-radius:5px}
.app-layout { display:grid; grid-template-columns:180px 1fr; height:470px; }
.app-layout aside { position:relative; padding:24px 14px; background:#0d0e12; border-right:1px solid #282930; }
.aside-label { display:block; margin:0 8px 13px; color:#666976; font-size:8px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.project { display:flex; gap:9px; align-items:center; padding:10px; color:#747680; border-radius:6px; }.project.active{color:#e0e0e4;background:#25262d}.project>i{width:15px;height:12px;border:1px solid #696d7d;border-radius:2px}.project span{display:grid;gap:3px}.project strong{font-size:10px}.project small{color:#6f717c;font-size:7px}.private{position:absolute;bottom:18px;left:20px;color:#4f515b;font-size:7px}
.app-main { padding:24px 25px; }
.app-heading { display:flex; justify-content:space-between; align-items:start; padding-bottom:20px; border-bottom:1px solid #2b2c34; }.app-heading span{display:grid;gap:5px}.app-heading strong{font-size:18px}.app-heading small{color:#6f717d;font-size:8px}.app-heading button{padding:7px 10px;color:#aaa2d8;background:#211e35;border:1px solid #454064;border-radius:5px;font-size:8px}
.toolbar { display:flex; align-items:center; gap:8px; margin:16px 0; color:#5e606a; font-size:8px; }.toolbar>span{flex:1;padding:8px 10px;background:#17181e;border:1px solid #30313a;border-radius:5px}.toolbar i{padding:8px 9px;color:#92939b;background:#17181e;border:1px solid #30313a;border-radius:5px;font-style:normal}
.file-row { display:grid; grid-template-columns:74px 1fr auto; gap:14px; align-items:center; padding:15px 6px; border-bottom:1px solid #27282f; }.file-row>span{display:grid;gap:5px}.file-row strong{font-size:10px}.file-row small{color:#6d6f79;font-size:7px}.thumb{position:relative;height:56px;overflow:hidden;border:1px solid #3a3b44;border-radius:4px;background:#ddd}.thumb::before,.thumb::after,.thumb b{position:absolute;content:""}.thumb::before{width:42px;height:42px;left:9px;top:7px;border-radius:50%}.thumb::after{right:7px;bottom:7px;width:35px;height:28px;transform:rotate(36deg)}.thumb.sunset{background:#e7dfd0}.thumb.sunset::before{background:#df5d42}.thumb.sunset::after{background:#252225}.thumb.blue{background:#dfe9ed}.thumb.blue::before{background:#2c88aa}.thumb.blue::after{background:#232526}.thumb.lime{background:#e7e5d3}.thumb.lime::before{background:#b8df4b}.thumb.lime::after{background:#6353d9}.version-dots{display:flex;gap:4px}.version-dots i{width:5px;height:5px;border-radius:50%;background:#4a435f}.version-dots i:last-child{background:#9a85ff;box-shadow:0 0 10px #8b75ff}
.floating-card { position:absolute; right:1%; bottom:20px; display:grid; gap:4px; width:190px; padding:14px 16px; color:#8f8a99; background:rgba(28,28,36,.93); border:1px solid #514a74; border-radius:9px; box-shadow:0 15px 45px rgba(0,0,0,.5); font-size:8px; backdrop-filter:blur(12px); }.floating-card::before{position:absolute;left:-4px;top:17px;width:7px;height:7px;content:"";background:var(--lime);border-radius:50%;box-shadow:0 0 14px var(--lime)}.floating-card strong{color:#e6e3ea;font-size:10px}.orbit{position:absolute;border:1px solid rgba(120,104,235,.18);border-radius:50%}.orbit-one{width:680px;height:680px;left:130px;top:-5px}.orbit-two{width:510px;height:510px;left:210px;top:78px}
.statement { display:grid; grid-template-columns:.6fr 1.4fr; gap:10vw; padding:150px 8vw; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.statement p{color:#66646d;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em}.statement h2{max-width:920px;margin:0;color:#d9d6de;font-size:clamp(28px,4vw,58px);font-weight:450;line-height:1.15;letter-spacing:-.045em}
.steps { padding:140px 8vw; }.section-intro{display:flex;align-items:end;justify-content:space-between;margin-bottom:70px}.section-intro h2{margin:0;font-size:clamp(38px,5vw,70px);font-weight:500;line-height:1;letter-spacing:-.05em}.step-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.step-grid article{position:relative;min-height:390px;padding:30px 36px;border-right:1px solid var(--line)}.step-grid article:last-child{border:0}.step-grid article>span{color:#58565f;font-family:var(--mono);font-size:9px}.step-grid h3{margin:180px 0 12px;font-size:18px}.step-grid p{color:#85838d;font-size:13px;line-height:1.7}.step-icon{position:absolute;top:90px;left:36px;width:75px;height:60px}.step-icon.folder{border:1px solid #675bb4;border-radius:5px;background:#25203e}.step-icon.folder::before{position:absolute;left:9px;top:-8px;width:29px;height:9px;content:"";background:#25203e;border:1px solid #675bb4;border-bottom:0;border-radius:4px 4px 0 0}.step-icon.folder i{position:absolute;inset:15px;background:linear-gradient(125deg,var(--cyan),var(--violet));clip-path:polygon(0 0,100% 0,72% 100%,22% 100%)}.step-icon.pulse i{position:absolute;left:34px;top:0;width:4px;height:60px;background:linear-gradient(var(--cyan),var(--violet),var(--pink));box-shadow:-19px 15px 0 -1px #564aa1,19px 27px 0 -1px #a849b3}.step-icon.rewind{border:1px solid #805b87;border-radius:50%}.step-icon.rewind::before,.step-icon.rewind::after{position:absolute;top:20px;width:0;height:0;content:"";border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:15px solid var(--pink)}.step-icon.rewind::before{left:17px}.step-icon.rewind::after{left:35px}
.feature-stage,.directions { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:center; padding:130px 8vw; background:#0d0d12; border-block:1px solid var(--line); }.feature-copy h2,.directions-copy h2,.privacy h2{font-size:clamp(38px,5vw,68px);font-weight:500;line-height:1;letter-spacing:-.055em}.feature-copy>p:not(.eyebrow),.directions-copy>p:not(.eyebrow){max-width:560px;color:#8c8994;font-size:14px;line-height:1.8}.feature-copy ul{display:grid;gap:14px;margin:30px 0 0;padding:0;list-style:none;color:#bab7c0;font-size:12px}.feature-copy li{display:flex;align-items:center;gap:12px}.feature-copy li i{width:7px;height:7px;background:var(--violet);border-radius:50%;box-shadow:0 0 12px var(--violet)}
.comparison-card { overflow:hidden;background:#15151b;border:1px solid #33333c;border-radius:12px;box-shadow:0 35px 70px rgba(0,0,0,.4)}.compare-head,.compare-foot{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;color:#c5c2cb;font-size:10px}.compare-head div{display:flex;gap:5px}.compare-head i{padding:6px 9px;color:#8b8992;background:#222229;border-radius:4px;font-style:normal;font-size:8px}.canvas{position:relative;height:410px;overflow:hidden;background:#e8e4d8}.poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif)}.poster b{font-size:95px;letter-spacing:-.1em}.poster small{position:absolute;bottom:20px;left:24px;font-family:var(--mono);font-size:8px}.poster.before{color:#183642;background:#d8e3dc}.poster.before::before{position:absolute;width:210px;height:210px;content:"";background:#dd533e;border-radius:50%}.poster.after{left:50%;color:#202031;background:#dbd5ef;clip-path:inset(0)}.poster.after::before{position:absolute;width:0;height:0;content:"";border-left:130px solid transparent;border-right:130px solid transparent;border-bottom:225px solid #6b55df}.poster b,.poster small{z-index:1}.divider{position:absolute;top:0;bottom:0;left:50%;width:1px;background:white;box-shadow:0 0 20px rgba(0,0,0,.4)}.canvas button{position:absolute;left:50%;top:50%;width:38px;height:38px;transform:translate(-50%,-50%);color:#fff;background:#6859ce;border:1px solid #b5acff;border-radius:50%}.compare-foot span:last-child{text-align:right}.compare-foot small{color:#706e78}
.directions{background:var(--bg);border-top:0}.directions-visual{position:relative;min-height:480px}.direction-card{position:absolute;display:grid;gap:10px;width:340px;padding:25px;background:#17171d;border:1px solid #34343e;border-radius:10px;box-shadow:0 25px 55px rgba(0,0,0,.35)}.direction-card span{color:#898692;font-family:var(--mono);font-size:9px;text-transform:uppercase}.direction-card strong{font-size:16px}.direction-card small{color:#65636d;font-size:9px}.direction-card.main{left:0;top:50px}.direction-card.alt{right:0;bottom:55px;border-color:#5d518b;background:#1b1925}.direction-card.alt::before{position:absolute;top:0;left:0;right:0;height:2px;content:"";background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink))}.thread{position:absolute;left:42%;top:167px;width:160px;height:160px;border-left:1px solid #5b4f91;border-bottom:1px solid #5b4f91;border-radius:0 0 0 70px}.thread i{position:absolute;width:7px;height:7px;background:#8a75f3;border-radius:50%;box-shadow:0 0 10px #8a75f3}.thread i:first-child{top:-3px;left:-4px}.thread i:nth-child(2){left:-4px;bottom:34px}.thread i:last-child{right:-4px;bottom:-4px}.plain-note{margin-top:30px;padding-left:16px;border-left:2px solid #554b85;color:#aaa6b2!important;font-family:var(--mono);font-size:10px!important}
.privacy{padding:140px 8vw}.privacy>div:first-child{display:grid;grid-template-columns:.5fr 1.5fr;align-items:start}.privacy h2{margin-bottom:80px}.privacy-grid{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line)}.privacy-grid article{min-height:260px;padding:28px 32px;border-right:1px solid var(--line)}.privacy-grid article:last-child{border:0}.privacy-grid strong{color:#58555f;font-family:var(--mono);font-size:9px}.privacy-grid h3{margin:80px 0 12px;font-size:17px}.privacy-grid p{color:#85828d;font-size:12px;line-height:1.7}
.download{text-align:center;padding:150px 7vw;background:radial-gradient(circle at 50% 70%,rgba(104,77,203,.2),transparent 40%)}.download>img{width:55px}.download .eyebrow{justify-content:center;margin:25px 0}.download h2{font-size:clamp(48px,7vw,105px);font-weight:500;line-height:.95;letter-spacing:-.065em}.download .button{margin-top:25px}.download>p:last-child{margin:18px 0 0;color:#65626c;font-family:var(--mono);font-size:9px}
footer{display:grid;grid-template-columns:1fr 1fr auto;gap:30px;align-items:center;padding:40px 5vw;border-top:1px solid var(--line);color:#77757f;font-size:10px}footer .brand{color:#d9d6df;font-size:13px}footer .brand img{width:23px}footer>div{display:flex;gap:22px}footer small{font-size:8px}
section,article{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s}.hero,.hero article,.visible{opacity:1;transform:none}.step-grid article:nth-child(2){transition-delay:.08s}.step-grid article:nth-child(3){transition-delay:.16s}
.legal-page main{min-height:100vh;padding:150px 7vw 80px}.legal{max-width:760px;margin:auto;opacity:1;transform:none}.legal h1{font-size:clamp(44px,7vw,78px);font-weight:500;line-height:1;letter-spacing:-.055em}.legal h2{margin:50px 0 10px;font-size:22px}.legal>p:not(.eyebrow){color:#9a97a2;font-size:15px;line-height:1.8}.legal .legal-date{margin-top:60px;color:#5f5c66!important;font-family:var(--mono);font-size:9px!important}
@media(max-width:1050px){.site-header nav{display:none}.site-header{grid-template-columns:1fr 1fr}.hero{grid-template-columns:1fr;padding:140px 7vw 80px}.hero-copy{max-width:760px}.hero-visual{min-width:0;padding:80px 0 20px}.app-window{width:850px}.statement{grid-template-columns:1fr;gap:30px}.directions{gap:4vw}.direction-card{width:290px}.feature-stage{grid-template-columns:1fr}.comparison-card{max-width:700px}.directions{grid-template-columns:1fr}.directions-visual{order:2;max-width:680px;width:100%}}
@media(max-width:720px){.site-header{height:64px;padding:0 20px}.nav-download span{display:none}.hero{padding:115px 22px 70px}.hero h1{font-size:52px}.hero-lede{font-size:14px}.hero-visual{margin-right:-470px;padding-left:0;transform:scale(.8);transform-origin:left center}.statement,.steps,.feature-stage,.directions,.privacy{padding:90px 22px}.statement h2{font-size:34px}.section-intro{display:block}.step-grid,.privacy-grid{grid-template-columns:1fr}.step-grid article,.privacy-grid article{min-height:auto;padding:28px 0;border-right:0;border-bottom:1px solid var(--line)}.step-grid h3{margin-top:130px}.feature-stage{gap:55px}.canvas{height:300px}.poster b{font-size:65px}.directions-visual{min-height:420px}.direction-card{width:270px}.privacy>div:first-child{grid-template-columns:1fr}.privacy h2{margin-bottom:45px}.privacy-grid h3{margin-top:45px}.download{padding:110px 22px}.download h2{font-size:54px}footer{grid-template-columns:1fr;justify-items:center;text-align:center}footer>div{justify-content:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
