/*! EjectALL © 2026 Tobias Dotzauer. All rights reserved. */ @font-face{font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/InterVariable.woff2') format('woff2')} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* ====== SKIP LINK ====== */ .skip-link{position:absolute;top:-100%;left:16px;z-index:200;padding:8px 16px;background:var(--accent);color:#fff;font-weight:700;font-size:14px;border-radius:var(--rx);text-decoration:none;transition:top .2s} .skip-link:focus{top:12px} /* ====== FOCUS STYLES ====== */ :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--rx)} :focus:not(:focus-visible){outline:none} :root{ --bg:#ffffff;--bg2:#f7faf8;--bg3:#f0f5f2;--bg4:#e6ece9; --border:#dce5e0;--border2:#b8ccc4; --text:#1a2e28;--muted:#496058;--dim:#506660; --accent:#16a34a;--accent2:#15803d; --glow:rgba(22,163,74,.07); --green:#16a34a;--orange:#ea580c;--red:#dc2626;--teal:#0d9488; --g1:#22c55e;--g2:#0d9488; --r:16px;--rs:10px;--rx:6px; } html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;overflow-x:hidden} html.theme-transition,html.theme-transition *,html.theme-transition *::before,html.theme-transition *::after{transition:background .4s,color .4s,border-color .4s,box-shadow .4s!important} body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden} a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto} .ctn{max-width:1200px;margin:0 auto;padding:0 24px} .grad{background:linear-gradient(135deg,#15803d,#0d9488);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:16px} /* ====== WORD STAGGER REVEAL ====== */ .word{overflow:hidden;display:inline-block} .word-inner{display:inline-block;transform:translateY(105%);opacity:0;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .6s cubic-bezier(.16,1,.3,1)} .revealed .word-inner{transform:translateY(0);opacity:1} .grad .word-inner{background:linear-gradient(135deg,var(--g1),var(--g2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} /* ====== NOISE GRAIN TEXTURE ====== */ body::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.03;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:256px 256px} /* ====== KEYFRAMES ====== */ @property --grad-angle{syntax:"";inherits:false;initial-value:0deg} @keyframes grad-rotate{to{--grad-angle:360deg}} @keyframes bloom1{0%,100%{transform:translate(0,0) scale(1);opacity:.5}33%{transform:translate(30px,20px) scale(1.1);opacity:.65}66%{transform:translate(-20px,30px) scale(.95);opacity:.42}} @keyframes bloom2{0%,100%{transform:translate(0,0) scale(1);opacity:.45}40%{transform:translate(-25px,-30px) scale(1.15);opacity:.6}70%{transform:translate(15px,20px) scale(.9);opacity:.4}} @keyframes bloom3{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.3}50%{transform:translate(-40%,-60%) scale(1.15);opacity:.5}} @keyframes glowring{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} /* marquee/scramble removed — replaced by hero ticker + word cycling */ @keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} /* ====== SCROLL-DRIVEN REVEALS ====== */ /* JS adds .has-io to if IntersectionObserver works — otherwise content is visible by default */ .has-io .r{opacity:0;transform:translateY(50px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)} .has-io .r.v{opacity:1;transform:none} .has-io .r-scale{opacity:0;transform:scale(.92);filter:blur(10px);transition:all 1s cubic-bezier(.16,1,.3,1)} .has-io .r-scale.v{opacity:1;transform:scale(1);filter:blur(0)} .has-io .r-left{opacity:0;transform:translateX(-60px);transition:all .8s cubic-bezier(.16,1,.3,1)} .has-io .r-left.v{opacity:1;transform:none} .has-io .r-right{opacity:0;transform:translateX(60px);transition:all .8s cubic-bezier(.16,1,.3,1)} .has-io .r-right.v{opacity:1;transform:none} .d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}.d5{transition-delay:.5s}.d6{transition-delay:.6s}.d7{transition-delay:.7s}.d8{transition-delay:.8s} /* ====== PARALLAX CONTAINER ====== */ [data-speed]{will-change:transform;transition:transform .1s linear} /* ====== NAV ====== */ nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px 0;background:rgba(255,255,255,.6);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid transparent;transition:border-color .3s,background .3s} nav.scrolled{border-bottom-color:var(--border);background:rgba(255,255,255,.85)} nav .ctn{display:flex;align-items:center;justify-content:space-between} /* Left: brand + version */ .nav-left{display:flex;align-items:center;gap:12px} .nlogo{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;letter-spacing:-.02em} .nlogo img{width:30px;height:30px;border-radius:7px} .nav-ver{font-size:10px;font-weight:600;color:var(--dim);background:rgba(0,0,0,.03);border:1px solid var(--border);border-radius:8px;padding:3px 10px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .25s cubic-bezier(.16,1,.3,1);font-family:inherit;line-height:1.4} .nav-ver:hover{border-color:var(--accent);color:var(--accent);background:var(--glow)} .nav-ver svg{width:10px;height:10px;opacity:.5;transition:opacity .2s} .nav-ver:hover svg{opacity:.8} .nav-ver-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:nav-dot 2s ease-in-out infinite;flex-shrink:0} @keyframes nav-dot{0%,100%{opacity:1}50%{opacity:.3}} /* Center: segmented tabs */ .nav-tabs{display:flex;align-items:stretch;gap:2px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:3px;list-style:none} .nav-tabs li{display:flex} .nav-tabs a{font-size:13px;font-weight:500;color:var(--dim);text-decoration:none;padding:7px 22px;border-radius:11px;transition:all .25s cubic-bezier(.16,1,.3,1);position:relative;white-space:nowrap;letter-spacing:-.01em;line-height:1;display:flex;align-items:center} .nav-tabs a:hover{color:var(--text);background:rgba(0,0,0,.02)} .nav-tabs{position:relative} .nav-pill{position:absolute;top:3px;left:3px;height:calc(100% - 6px);border-radius:11px;background:linear-gradient(135deg,#22c55e,#0d9488,#22c55e);background-size:200% 200%;animation:pill-grad 3s ease infinite;transition:transform .45s cubic-bezier(.4,.0,.2,1),width .35s cubic-bezier(.4,.0,.2,1),opacity .3s;pointer-events:none;z-index:0;opacity:0} @keyframes pill-grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} .nav-tabs a{position:relative;z-index:1} .nav-tabs a.active{color:#fff;font-weight:600;letter-spacing:-.01em;text-shadow:0 1px 3px rgba(0,0,0,.3)} /* Right: lang + CTA */ .nav-right{display:flex;align-items:center;gap:6px} /* Unified nav icon buttons */ nav .nav-right .nav-icon{width:36px!important;height:36px!important;min-width:36px;min-height:36px;border-radius:10px;background:rgba(0,0,0,.03);border:1px solid var(--border);cursor:pointer;display:flex!important;align-items:center;justify-content:center;transition:all .25s cubic-bezier(.16,1,.3,1);padding:0;color:var(--dim);position:relative;flex-shrink:0} .nav-icon:hover{border-color:var(--accent);color:var(--accent);background:var(--glow)} .nav-icon svg{width:17px;height:17px;flex-shrink:0} .nav-sep{flex-shrink:0} /* Lang badge on globe icon */ .nav-icon-badge{position:absolute;bottom:0;right:0;font-size:8px;font-weight:800;letter-spacing:.03em;color:var(--accent);background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:0 3px;line-height:1.4;pointer-events:none} /* Separator between lang and tools */ .nav-sep{width:1px;height:22px;background:var(--border);flex-shrink:0;margin:0 3px} /* Extra gap before CTA */ .nav-right .ncta{margin-left:8px} .ncta{padding:9px 24px;border-radius:11px;background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff!important;font-size:13px;font-weight:700!important;transition:all .25s cubic-bezier(.16,1,.3,1);white-space:nowrap;box-shadow:0 2px 12px rgba(22,163,74,.2);position:relative;overflow:hidden;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:7px} .ncta:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(22,163,74,.3)} .ncta::after{content:'';position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);animation:shimmer 3s ease-in-out infinite} .ncta-icon{width:15px;height:15px;flex-shrink:0;animation:ncta-hop 12s cubic-bezier(.16,1,.3,1) infinite} @keyframes ncta-hop{0%,7%,100%{transform:translateY(0)}2%{transform:translateY(-4px)}4.5%{transform:translateY(0)}5.5%{transform:translateY(-2px)}} /* Changelog bubble */ .changelog-bubble{position:fixed;width:340px;background:var(--bg);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);z-index:1000;opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transition:opacity .25s,transform .25s cubic-bezier(.16,1,.3,1)} .changelog-bubble.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto} .changelog-arrow{position:absolute;top:-6px;width:12px;height:12px;background:var(--bg);border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg);border-radius:2px 0 0 0} .changelog-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--border)} .changelog-title{font-size:14px;font-weight:700;color:var(--text)} .changelog-close{background:none;border:none;color:var(--muted);cursor:pointer;padding:0;line-height:0;display:flex;align-items:center;justify-content:center;transition:color .2s} .changelog-close:hover{color:var(--text)} .changelog-body{padding:14px 16px 16px;max-height:320px;overflow-y:auto} .changelog-ver{display:flex;align-items:center;gap:8px;margin-bottom:10px} .changelog-tag{font-size:12px;font-weight:700;color:var(--accent);background:var(--glow);border:1px solid rgba(22,163,74,.15);border-radius:6px;padding:2px 8px} .changelog-date{font-size:12px;color:var(--muted)} .changelog-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px} .changelog-list li{font-size:13px;color:var(--dim);padding-left:16px;position:relative;line-height:1.5} .changelog-list li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.5} .nlinks{display:none} .nmob{display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:8px;position:relative;z-index:200;width:40px;height:40px;align-items:center;justify-content:center} .nmob-line{display:block;width:20px;height:2px;background:var(--text);border-radius:1px;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s} .nmob-lines{display:flex;flex-direction:column;gap:5px} .nmob.open .nmob-lines .nmob-line:nth-child(1){transform:translateY(7px) rotate(45deg)} .nmob.open .nmob-lines .nmob-line:nth-child(2){opacity:0;transform:scaleX(0)} .nmob.open .nmob-lines .nmob-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ====== FULLSCREEN MOBILE MENU ====== */ .mob-overlay{position:fixed;inset:0;z-index:150;pointer-events:none;opacity:0;visibility:hidden} .mob-overlay.open{pointer-events:auto;opacity:1;visibility:visible} .mob-bg{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);opacity:0;transition:opacity .4s ease} .mob-overlay.open .mob-bg{opacity:1} .mob-panel{position:absolute;top:0;right:0;bottom:0;width:min(340px,85vw);background:var(--bg);border-left:1px solid var(--border);transform:translateX(100%);transition:transform .5s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;padding:100px 32px 40px;overflow-y:auto} .mob-overlay.open .mob-panel{transform:translateX(0)} .mob-links{list-style:none;display:flex;flex-direction:column;gap:0;flex:1} .mob-link{overflow:hidden} .mob-link a{display:flex;align-items:center;gap:14px;padding:20px 0;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--text);text-decoration:none;border-bottom:1px solid var(--border);transform:translateX(40px);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s ease,color .2s} .mob-overlay.open .mob-link a{transform:translateX(0);opacity:1} .mob-link:nth-child(1) a{transition-delay:.05s} .mob-link:nth-child(2) a{transition-delay:.1s} .mob-link:nth-child(3) a{transition-delay:.15s} .mob-link:nth-child(4) a{transition-delay:.2s} .mob-link:nth-child(5) a{transition-delay:.25s} .mob-link a:active{color:var(--accent)} .mob-link-icon{width:36px;height:36px;border-radius:10px;background:var(--glow);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;transition:background .3s,transform .3s} .mob-link a:active .mob-link-icon{background:rgba(74,222,128,.15);transform:scale(1.1)} .mob-link-arrow{margin-left:auto;color:var(--dim);font-size:14px;transition:transform .3s} .mob-link a:active .mob-link-arrow{transform:translateX(4px);color:var(--accent)} .mob-cta{margin-top:auto;padding-top:28px} .mob-cta a{display:block;padding:16px;background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;border-radius:14px;font-size:17px;font-weight:700;text-align:center;text-decoration:none;position:relative;overflow:hidden;transform:translateY(20px);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1) .3s,opacity .4s ease .3s} .mob-cta a::after{content:'';position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);animation:shimmer 3s ease-in-out infinite} .mob-overlay.open .mob-cta a{transform:translateY(0);opacity:1} .mob-lang{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;transform:translateY(20px);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1) .35s,opacity .4s ease .35s} .mob-overlay.open .mob-lang{transform:translateY(0);opacity:1} .mob-lang-btn{padding:8px 18px;border-radius:100px;font-size:14px;font-weight:700;border:1px solid var(--border);background:none;color:var(--muted);cursor:pointer;transition:all .2s} .mob-lang-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)} .mob-glow{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:300px;height:300px;background:radial-gradient(circle,rgba(22,163,74,.08) 0%,transparent 70%);pointer-events:none;filter:blur(60px)} /* ====== BUTTONS ====== */ .btn{display:inline-flex;align-items:center;gap:8px;padding:16px 32px;border-radius:100px;font-size:16px;font-weight:700;cursor:pointer;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;border:none;text-decoration:none;position:relative;overflow:hidden} .btn-p{background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;box-shadow:0 4px 20px rgba(22,163,74,.2)} .btn-p:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(22,163,74,.25)} .btn-p::after{content:'';position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);animation:shimmer 3s ease-in-out infinite} .ls-loading{pointer-events:none;opacity:.65}.ls-loading::after{animation:none} .btn-s{background:#fff;color:var(--text);border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.04)} .btn-s:hover{background:var(--bg3);border-color:var(--border2);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.06)} /* ====== SCROLL-LINKED EFFECTS ====== */ .eject-float{position:absolute;top:50%;right:-5%;width:350px;height:350px;opacity:.04;color:var(--accent);pointer-events:none;z-index:0;will-change:transform} .eject-float svg{width:100%;height:100%} [data-parallax]{will-change:transform} @media(prefers-reduced-motion:reduce){.eject-float{display:none}[data-parallax]{will-change:auto!important;transform:none!important}} /* ====== HERO ====== */ .hero{padding:160px 0 60px;text-align:left;position:relative;overflow:visible} .hero::before,.hero::after{content:'';position:absolute;border-radius:50%;pointer-events:none;filter:blur(120px);opacity:.07;will-change:transform} .hero::before{width:800px;height:800px;top:-300px;left:-10%;background:radial-gradient(circle,#22c55e,transparent 70%);animation:hero-orb1 14s ease-in-out infinite} .hero::after{width:600px;height:600px;top:-100px;right:-5%;background:radial-gradient(circle,#0d9488,transparent 70%);animation:hero-orb2 18s ease-in-out infinite} @keyframes hero-orb1{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,40px)}} @keyframes hero-orb2{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,30px)}} .hero-grid{display:grid;grid-template-columns:2fr 1fr;gap:48px;align-items:start} .hero-left{min-width:0} .badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--glow);border:1px solid rgba(22,163,74,.15);border-radius:100px;font-size:13px;font-weight:600;color:var(--accent)} /* Hero headline */ .hero-l1{font-size:clamp(38px,5vw,60px);font-weight:900;line-height:1.12;letter-spacing:-.045em;margin:32px 0 8px;max-width:800px} .hero-l2{font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:0 0 28px} .hero-l2-grad{background:linear-gradient(135deg,#6b8078 0%,#4ade80 50%,#0d9488 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} /* Typewriter */ .hero-tw-text{white-space:nowrap;background:linear-gradient(var(--grad-angle),#15803d,#0d9488,#16a34a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:grad-rotate 8s linear infinite} .hero-tw-cursor{display:inline-block;width:clamp(2px,.3vw,4px);height:.88em;background:var(--accent);margin-left:2px;vertical-align:text-bottom;border-radius:1px;animation:tw-blink .9s step-end infinite} @keyframes tw-blink{0%,100%{opacity:1}50%{opacity:0}} .hero-sub{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:580px;margin:0 0 40px;line-height:1.7} .hero-btns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px} /* Hero selling points */ .hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:20px;padding:10px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rs)} .hero-trust-item{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap} .hero-trust-item svg{width:14px;height:14px;color:var(--accent);opacity:.7;flex-shrink:0} .hero-trust-item strong{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums} .hero-trust-sep{color:var(--border2);font-size:13px;user-select:none} /* Hero feature ticker */ .hero-ticker{margin-top:28px;padding:10px 0;border-top:1px solid var(--border);overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent)} .hero-ticker-track{display:flex;align-items:center;gap:24px;animation:ticker-scroll 35s linear infinite;width:max-content} .hero-ticker-item{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--dim);white-space:nowrap;flex-shrink:0} .hero-ticker-item svg{width:14px;height:14px;color:var(--accent);opacity:.7;flex-shrink:0} .hero-ticker-dot{width:3px;height:3px;border-radius:50%;background:var(--border2);flex-shrink:0} @keyframes ticker-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} /* ====== HERO RIGHT COLUMN ====== */ .hero-right{display:flex;flex-direction:column;align-items:flex-end;padding-top:0} .hero-mini-bar-wrap{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0%,black 30%);mask-image:linear-gradient(to right,transparent 0%,black 30%)} .hero-mini-bar{background:linear-gradient(180deg,rgba(58,58,60,.92),rgba(44,44,46,.95));backdrop-filter:blur(30px);border-radius:0 10px 10px 0;border:1px solid rgba(255,255,255,.12);border-left:none;box-shadow:0 12px 40px rgba(0,0,0,.18);padding:0 16px 0 24px;height:32px;display:flex;align-items:center;justify-content:flex-end;gap:10px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;font-size:13px;font-weight:500;color:rgba(255,255,255,.9);user-select:none;white-space:nowrap} .hero-mini-bar .mac-tray-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;opacity:.7} .hero-mini-bar .mac-tray-icon svg{width:14px;height:14px} .hero-mini-bar .mac-clock{color:rgba(255,255,255,.8);font-size:13px;font-weight:400;font-variant-numeric:tabular-nums} .hero-ejectall{display:flex;align-items:center;gap:4px;padding:2px 6px;border-radius:6px;position:relative;background:rgba(255,255,255,.08)} .hero-ejectall::before{content:'';position:absolute;inset:-1.5px;border-radius:7.5px;padding:1.5px;background:conic-gradient(from var(--grad-angle),#22c55e,#0d9488,#4ade80,#22c55e);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:grad-rotate 4s linear infinite;opacity:.8} .hero-ejectall svg{width:14px;height:14px;fill:rgba(255,255,255,.85)} .hero-ejectall .hero-badge{font-size:11px;font-weight:600;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums} /* Popup slides in after page load */ .hero-popup{width:100%;max-width:340px;margin-left:auto;margin-top:10px;transform:translateY(-12px);opacity:0;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .5s ease;pointer-events:none;position:relative} .hero-popup.open{transform:translateY(0);opacity:1;pointer-events:auto} /* Hero state slides */ .hero-slides{position:relative;overflow:hidden;border-radius:12px} .hero-slides .screenshot-placeholder{border:none;border-radius:0} .hero-screenshot{width:100%;height:auto;display:block;border-radius:0} .lang-img{display:block;width:100%;height:auto} .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;z-index:0} .hero-slide.active{position:relative;opacity:1;z-index:1} .hero-state-dots{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:12px} .hero-state-dot{display:inline-flex;align-items:center;gap:0;padding:0;background:none;border:none;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);white-space:nowrap;border-radius:100px;overflow:hidden} .hero-state-dot:hover{opacity:.8} .hero-state-dot-icon{width:8px;height:8px;border-radius:50%;font-size:0;line-height:0;transition:all .3s;flex-shrink:0} .hero-state-dot-icon.std{background:var(--dim)} .hero-state-dot-icon.green{background:#16a34a} .hero-state-dot-icon.red{background:#ef4444} .hero-state-dot-icon.orange{background:#fb923c} .hero-state-dot .hero-state-label{max-width:0;opacity:0;font-size:11px;font-weight:600;color:var(--text);overflow:hidden;transition:max-width .35s cubic-bezier(.16,1,.3,1),opacity .25s,padding .3s} .hero-state-dot.active .hero-state-label{max-width:160px;opacity:1;padding-left:6px} .hero-state-dot.active{padding:3px 10px 3px 4px;background:var(--bg2);border:1px solid var(--border)} .hero-state-dot:not(.active){padding:3px} .hero-state-dot-icon.green{color:#16a34a} .hero-state-dot-icon.red{color:#ef4444} .hero-state-dot-icon.orange{color:#fb923c} .hero-state-dot-icon.std{color:var(--dim)} /* ====== SOCIAL PROOF ====== */ .social-proof{padding:64px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg2);position:relative} .social-proof::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(22,163,74,.03) 0%,transparent 50%,rgba(13,148,136,.03) 100%);pointer-events:none} .sp-live{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:20px} .sp-live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);position:relative;flex-shrink:0} .sp-live-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:var(--accent);opacity:.35;animation:sp-pulse 2.4s ease-in-out infinite} @keyframes sp-pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:0;transform:scale(2)}} .sp-tagline{text-align:center;font-size:clamp(16px,2vw,19px);font-weight:400;color:var(--dim);line-height:1.7;max-width:680px;margin:0 auto;letter-spacing:-.01em} .sp-num{font-size:clamp(18px,2.2vw,22px);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;background:linear-gradient(135deg,var(--g1),var(--g2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .sp-ico{display:inline-flex;vertical-align:middle;width:16px;height:16px;margin-right:3px;margin-top:-2px;color:var(--accent);opacity:.55} /* Screenshot placeholders */ .sph{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 40px;text-align:center;gap:14px;min-height:400px;background:radial-gradient(circle at 40% 40%,rgba(74,222,128,.025),transparent 50%),radial-gradient(circle at 65% 65%,rgba(13,148,136,.025),transparent 50%);border:2px dashed var(--border);border-radius:0 0 18px 18px;margin:-1px} .sph-icon{font-size:48px;opacity:.3} .sph-text{font-size:14px;color:var(--dim);max-width:320px;line-height:1.5} .sph-file{font-size:12px;color:var(--accent);opacity:.6;font-family:'SF Mono','Fira Code',monospace;padding:4px 10px;background:rgba(74,222,128,.08);border-radius:4px} .simg{display:block;width:100%;height:auto} /* ====== MENU BAR DEMO ====== */ .menubar-section{padding:120px 0;overflow:hidden;position:relative} .menubar-section .feat-center{margin-bottom:56px} /* Realistic macOS menu bar */ .mac-menubar{ max-width:860px;margin:0 auto; background:linear-gradient(180deg,rgba(58,58,60,.92),rgba(44,44,46,.95)); backdrop-filter:blur(30px); border-radius:10px; border:1px solid rgba(255,255,255,.12); box-shadow:0 20px 60px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.1); padding:0 16px; height:32px; display:flex;align-items:center;justify-content:space-between; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif; font-size:13px;font-weight:500;color:rgba(255,255,255,.9); user-select:none;position:relative;overflow:visible; } .mac-menubar-left{display:flex;align-items:center;gap:16px} .mac-apple{font-size:15px;opacity:.9} .mac-app-name{font-weight:600} .mac-menu-items{display:flex;gap:14px;color:rgba(255,255,255,.7);font-weight:400;font-size:13px} .mac-menubar-right{display:flex;align-items:center;gap:10px} .mac-tray-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;opacity:.7} .mac-tray-icon svg{width:14px;height:14px} .mac-clock{color:rgba(255,255,255,.8);font-size:13px;font-weight:400;font-variant-numeric:tabular-nums} /* EjectALL icon in menu bar */ .mac-ejectall{ display:flex;align-items:center;gap:4px; padding:2px 6px;border-radius:4px; cursor:default;position:relative; transition:background .2s; } .mac-ejectall:hover{background:rgba(255,255,255,.1)} .mac-ejectall-icon{width:14px;height:14px;fill:rgba(255,255,255,.85)} .mac-ejectall-badge{ font-size:11px;font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.01em; position:relative;display:inline-block;overflow:hidden; min-width:1.2em;text-align:center; transition:color .5s ease; } .mac-ejectall-badge.green{color:#4ade80} .mac-ejectall-badge.red{color:#ff6b6b} .mac-ejectall-badge.orange{color:#ffaa44} .mac-ejectall-badge .badge-text{display:block;line-height:1} .mac-ejectall-badge .badge-text.out{position:absolute;left:0;right:0;animation:badge-out .5s ease forwards} .mac-ejectall-badge .badge-text.in{animation:badge-in .5s ease forwards} @keyframes badge-out{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-40%);opacity:0}} @keyframes badge-in{0%{transform:translateY(40%);opacity:0}100%{transform:translateY(0);opacity:1}} /* Popover arrow */ .mac-popover-arrow{ position:absolute;top:100%;left:50%;transform:translateX(-50%); width:0;height:0; border-left:10px solid transparent;border-right:10px solid transparent; border-top:8px solid rgba(58,58,60,.9); filter:drop-shadow(0 2px 3px rgba(0,0,0,.2)); z-index:2; } /* States row below the menu bar */ .menubar-states{ max-width:800px;margin:56px auto 0; display:grid;grid-template-columns:repeat(4,1fr);gap:14px; position:relative; } .menubar-state{ display:flex;flex-direction:column;align-items:center;gap:10px; padding:20px 14px;text-align:center; background:transparent;border:1px solid transparent;border-radius:var(--rs); transition:all .5s ease; cursor:pointer;position:relative;overflow:hidden;z-index:1; } .menubar-state:hover,.menubar-state.active{ border-color:transparent; } /* Sliding Glow — pill + glow layers (Light Mode defaults) */ .mb-glow{position:absolute;top:50%;height:110%;border-radius:16px;background:radial-gradient(ellipse at center,rgba(22,163,74,.12) 0%,rgba(13,148,136,.06) 40%,transparent 70%);filter:blur(20px);transform:translateY(-50%);transition:left .65s cubic-bezier(.4,0,.2,1),width .65s cubic-bezier(.4,0,.2,1),background .5s ease;z-index:0;pointer-events:none} .mb-pill{position:absolute;top:0;left:0;height:100%;border-radius:var(--rs);background:linear-gradient(135deg,rgba(240,245,242,.95),rgba(230,236,233,.98));border:1px solid var(--border2);box-shadow:0 0 30px rgba(22,163,74,.06),0 4px 16px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .65s cubic-bezier(.4,0,.2,1),width .65s cubic-bezier(.4,0,.2,1),box-shadow .5s ease;z-index:0;pointer-events:none} .mb-glow.glow-green{background:radial-gradient(ellipse at center,rgba(22,163,74,.15) 0%,rgba(22,163,74,.06) 40%,transparent 70%)} .mb-glow.glow-red{background:radial-gradient(ellipse at center,rgba(220,38,38,.12) 0%,rgba(239,68,68,.05) 40%,transparent 70%)} .mb-glow.glow-orange{background:radial-gradient(ellipse at center,rgba(234,88,12,.12) 0%,rgba(251,146,60,.05) 40%,transparent 70%)} .mb-pill.pill-green{box-shadow:0 0 30px rgba(22,163,74,.1),0 4px 16px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.6)} .mb-pill.pill-red{box-shadow:0 0 30px rgba(220,38,38,.1),0 4px 16px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.6)} .mb-pill.pill-orange{box-shadow:0 0 30px rgba(234,88,12,.1),0 4px 16px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.6)} .menubar-state-icon{ width:36px;height:36px;border-radius:9px; display:flex;align-items:center;justify-content:center; font-size:15px;font-weight:700;flex-shrink:0; font-family:-apple-system,BlinkMacSystemFont,sans-serif; } .menubar-state-icon.green{background:rgba(22,163,74,.1);color:#16a34a} .menubar-state-icon.red{background:rgba(239,68,68,.12);color:#ef4444} .menubar-state-icon.orange{background:rgba(251,146,60,.12);color:#fb923c} .menubar-state-icon.idle{background:rgba(148,163,184,.08);color:var(--dim)} .menubar-state-icon.std{background:rgba(22,163,74,.06);color:var(--text);font-weight:700} .menubar-state-name{font-size:14px;font-weight:600} .menubar-state-desc{font-size:12px;color:var(--dim)} /* ====== INLINE MOCKUPS (reused across sections) ====== */ .mk{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;-webkit-font-smoothing:antialiased} .mk-pop{width:100%;max-width:320px;background:#2c2c2e;border-radius:12px;border:.5px solid rgba(255,255,255,.18);box-shadow:0 24px 80px rgba(0,0,0,.55);overflow:hidden;font-size:13px} .mk-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 8px} .mk-hdr b{font-size:15px} .mk-hdr-gear{color:rgba(255,255,255,.4);font-size:12px} .mk-ej-all{margin:4px 16px 6px;padding:7px 0;background:#ff453a;border-radius:6px;text-align:center;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:5px} .mk-ej-all svg{width:11px;height:11px;fill:#fff} .mk-div{height:.5px;background:rgba(255,255,255,.08);margin:0 16px} .mk-gh{display:flex;align-items:center;gap:6px;padding:10px 16px 4px;font-size:11px;font-weight:600;color:rgba(255,255,255,.4)} .mk-gd{width:8px;height:8px;border-radius:50%;flex-shrink:0} .mk-gc{font-size:10px;color:rgba(255,255,255,.25)} .mk-gk{font-size:9px;color:rgba(255,255,255,.22);background:rgba(255,255,255,.05);padding:1px 5px;border-radius:3px;margin-left:auto} .mk-ge{font-size:10px;display:flex;align-items:center;gap:2px;margin-left:auto;opacity:.35} .mk-ge svg{width:9px;height:9px;fill:currentColor} .mk-sh{display:flex;align-items:center;gap:6px;padding:10px 16px 4px;font-size:11px;font-weight:600;color:rgba(255,255,255,.35)} .mk-sh svg{width:10px;height:10px;opacity:.45} .mk-v{display:flex;align-items:center;gap:10px;padding:6px 16px} .mk-vi{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .mk-vi svg{width:14px;height:14px} .mk-vn{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mk-vd{font-size:10px;color:rgba(255,255,255,.3);white-space:nowrap;margin-top:1px} .mk-vd .s{margin:0 3px;font-size:7px;opacity:.5} .mk-vdot{width:5px;height:5px;border-radius:50%;flex-shrink:0} .mk-bar{width:32px;height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;flex-shrink:0} .mk-bar-f{height:100%;border-radius:2px} .mk-vej{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.3} .mk-vej svg{width:12px;height:12px;fill:currentColor} .mk-vej.chk{opacity:1} .mk-vej.chk svg{width:14px;height:14px;fill:none;stroke:#32d74b;stroke-width:2} .mk-v.ej{opacity:.45} .mk-remount{margin:2px 16px 4px 58px;padding:5px 0;background:rgba(10,132,255,.15);border-radius:5px;text-align:center;font-size:10px;font-weight:600;color:#0a84ff} .mk-foot{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-top:.5px solid rgba(255,255,255,.06);margin-top:4px;font-size:10px;color:rgba(255,255,255,.2)} .mk-quit{display:flex;align-items:center;gap:3px;font-size:11px;color:rgba(255,255,255,.35)} .mk-quit svg{width:11px;height:11px} /* Inline mockup colors */ .mc-b{color:#0a84ff}.mcb-b{background:rgba(10,132,255,.15)} .mc-g{color:#32d74b}.mcb-g{background:rgba(50,215,75,.15)} .mc-o{color:#ff9f0a}.mcb-o{background:rgba(255,159,10,.15)} .mc-p{color:#bf5af2}.mcb-p{background:rgba(191,90,242,.15)} .mc-c{color:#5ac8fa}.mcb-c{background:rgba(90,200,250,.15)} .mf-b{background:rgba(10,132,255,.45)}.mf-o{background:rgba(255,159,10,.45)} .mf-g{background:rgba(50,215,75,.45)}.mf-r{background:rgba(255,69,58,.6)} .mf-p{background:rgba(191,90,242,.45)}.mf-c{background:rgba(90,200,250,.45)} /* Inline widget mockups */ .mk-w{background:#2c2c2e;border-radius:18px;border:.5px solid rgba(255,255,255,.06);box-shadow:0 8px 32px rgba(0,0,0,.35);padding:14px;font-size:12px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif} .mk-w.sm{width:170px;padding:12px} .mk-w.md{width:300px} .mk-w.lg{width:400px} .mk-wh{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .mk-wh-t{font-size:11px;font-weight:700;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.04em} .mk-wh-c{font-size:11px;font-weight:700;color:#32d74b} .mk-wh-ej{font-size:10px;font-weight:600;color:rgba(255,255,255,.4);display:flex;align-items:center;gap:3px;background:rgba(255,255,255,.06);padding:3px 8px;border-radius:10px} .mk-wh-ej svg{width:9px;height:9px;fill:currentColor} .mk-wr{display:flex;align-items:center;gap:6px;padding:3px 0} .mk-wdot{width:4px;height:4px;border-radius:50%;flex-shrink:0} .mk-wn{font-size:11px;font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mk-ws{font-size:9px;color:rgba(255,255,255,.25)} .mk-wbar{height:3px;border-radius:1.5px;background:rgba(255,255,255,.12);overflow:hidden;margin:2px 0 1px} .mk-wbar-f{height:100%;border-radius:1.5px} .mk-wgrp{padding:10px;background:rgba(255,255,255,.025);border-radius:8px;border:.5px solid rgba(255,255,255,.06)} .mk-wgrp-h{display:flex;align-items:center;gap:5px;margin-bottom:6px;font-size:10px;font-weight:700} .mk-wgrp-bar{width:3px;height:14px;border-radius:1.5px;flex-shrink:0} .mk-wgrp-c{font-size:9px;color:rgba(255,255,255,.2)} .mk-wej-all{margin-top:8px;padding:6px;background:rgba(255,69,58,.12);border-radius:8px;text-align:center;font-size:11px;font-weight:600;color:#ff453a;display:flex;align-items:center;justify-content:center;gap:4px} .mk-wej-all svg{width:10px;height:10px;fill:#ff453a} .mk-wej-sec{margin-top:6px;padding:8px 10px;background:rgba(255,255,255,.02);border-radius:8px} .mk-wej-sec-l{font-size:9px;color:rgba(255,255,255,.2);font-weight:600;margin-bottom:4px} .mk-wej-r{display:flex;align-items:center;gap:6px;padding:2px 0;opacity:.4} .mk-wej-rm{margin-top:3px;padding:4px 0;background:rgba(10,132,255,.12);border-radius:5px;text-align:center;font-size:9px;font-weight:600;color:#0a84ff} /* Popover open animation for menubar section */ @keyframes pop-open{ 0%{opacity:0;transform:translateY(-8px) scale(.95)} 100%{opacity:1;transform:translateY(0) scale(1)} } /* Menubar section: popover positioned dynamically via JS under the icon */ .menubar-popover-wrap{position:relative;max-width:860px;margin:0 auto;min-height:520px} .menubar-popover{ position:absolute;top:8px;width:320px; opacity:0;transform:translateY(-8px) scale(.95); transition:none;z-index:5; } .menubar-popover.open{ animation:pop-open .4s cubic-bezier(.16,1,.3,1) forwards; } .menubar-popover .mk-pop{ box-shadow:0 24px 80px rgba(0,0,0,.7),0 0 0 .5px rgba(255,255,255,.15); } /* Arrow pointing up to menu bar */ .pop-arrow{ width:16px;height:8px;margin:0 auto -1px; position:relative;z-index:2; } .pop-arrow::before{ content:'';display:block;width:0;height:0;margin:0 auto; border-left:8px solid transparent;border-right:8px solid transparent; border-bottom:8px solid #2c2c2e; } /* ====== FEATURE SECTIONS ====== */ .feat{padding:140px 0;position:relative;overflow:hidden} .feat-alt{background:#f5f9f7;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .feat-glow{position:absolute;width:500px;height:500px;border-radius:50%;filter:blur(140px);opacity:.06;pointer-events:none} .feat-split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center} .feat-text h2{font-size:clamp(30px,4.5vw,50px);font-weight:800;line-height:1.08;letter-spacing:-.03em;margin-bottom:20px} .feat-text p{font-size:17px;color:var(--muted);line-height:1.75;max-width:500px} .feat-text .sub{margin-top:16px;font-size:14px;color:var(--dim);line-height:1.6} .feat-center{text-align:center;max-width:720px;margin:0 auto 72px} .feat-center h2{font-size:clamp(30px,4.5vw,50px);font-weight:800;line-height:1.08;letter-spacing:-.03em;margin-bottom:20px} .feat-center p{font-size:17px;color:var(--muted);line-height:1.75} /* Feature screenshot frame */ .fshot{border-radius:14px;overflow:hidden;border:1px solid var(--border);box-shadow:0 24px 64px rgba(0,0,0,.1);background:var(--bg2)} .fshot .sph{min-height:300px;padding:60px 32px;border-radius:0} .bloom-sm{position:relative} .bloom-sm::before{content:'';position:absolute;width:60%;height:60%;top:20%;left:20%;background:radial-gradient(circle,rgba(22,163,74,.06) 0%,transparent 70%);border-radius:50%;filter:blur(45px);z-index:0;pointer-events:none} .bloom-sm>*{position:relative;z-index:1} .app-screenshot{box-shadow:0 24px 80px rgba(0,0,0,.35),0 0 0 .5px rgba(255,255,255,.1);transition:transform .4s cubic-bezier(.22,1,.36,1)} .app-screenshot:hover{transform:scale(1.02)} .screenshot-placeholder{width:100%;border-radius:16px;border:2px dashed var(--border2,#3a4a43);background:var(--bg3,#f0f4f2);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--dim,#6b8078);font-size:13px;padding:24px;box-sizing:border-box;aspect-ratio:auto} /* ====== FEATURE: EJECT ALL ====== */ .eject-demo{display:flex;flex-direction:column;gap:20px} .eject-drives{display:flex;flex-direction:column;gap:8px} .edrive{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rx);font-size:14px;font-weight:500;transition:all .5s cubic-bezier(.16,1,.3,1)} .edrive .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;transition:background .4s} .edrive .type{font-size:11px;color:var(--dim);margin-left:auto} .eject-btn-demo{padding:16px;background:linear-gradient(135deg,var(--g1),var(--g2));border-radius:var(--rs);text-align:center;font-size:16px;font-weight:700;color:#fff;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(22,163,74,.2)} .eject-btn-demo::after{content:'';position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);animation:shimmer 2.5s ease-in-out infinite} /* ====== FEATURE: GROUPS ====== */ .group-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px} .gpill{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:100px;font-size:13px;font-weight:600;transition:all .3s} .gpill:hover{border-color:var(--border2);transform:translateY(-2px)} .gpill .gdot{width:8px;height:8px;border-radius:50%;display:inline-block} /* ====== FEATURE: AUTO-EJECT ====== */ .tgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px} .tcard{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);transition:all .3s} .tcard:hover{border-color:var(--accent);background:var(--bg4);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.06)} .ticon{width:42px;height:42px;border-radius:11px;background:var(--glow);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0} .tname{font-size:14px;font-weight:600} .tdesc{font-size:12px;color:var(--dim)} .remount-box{margin-top:32px;padding:28px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r)} .remount-num{font-size:52px;font-weight:900;letter-spacing:-.04em;line-height:1;text-align:center;transition:opacity .3s ease,transform .3s ease} .remount-num span{font-size:18px;font-weight:500;color:var(--muted)} .rnum{display:inline-block;transition:transform .25s cubic-bezier(.16,1,.3,1),opacity .25s ease;min-width:1.2ch} .rnum.out{transform:scale(.5) translateY(8px);opacity:0} .remount-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-top:16px} .remount-fill{height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--g1),var(--g2));transition:width .9s cubic-bezier(.16,1,.3,1)} .remount-result{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;min-height:36px;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease} .remount-result.show{opacity:1;transform:none} .remount-badge{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;color:var(--accent);background:var(--glow);padding:4px 10px;border-radius:8px;border:1px solid rgba(34,197,94,.2)} .remount-badge-icon{font-size:11px} .remount-drives{display:flex;gap:8px} .remount-drive{font-size:13px;font-weight:600;color:var(--accent);background:rgba(34,197,94,.08);padding:4px 10px;border-radius:6px;border:1px solid rgba(34,197,94,.15);opacity:0;transform:scale(.7);transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1)} .remount-drive.pop{opacity:1;transform:scale(1)} .remount-drive.flash{box-shadow:0 0 12px rgba(34,197,94,.4)} .remount-replay{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--dim);font-size:18px;cursor:pointer;opacity:0;transition:opacity .3s,color .2s;padding:4px} .remount-replay.show{opacity:.5} .remount-replay:hover{opacity:1;color:var(--accent)} .remount-box{position:relative} .remount-done{font-size:22px;font-weight:800;letter-spacing:-.02em;text-align:center;color:var(--accent);opacity:0;transform:scale(.8);transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1);display:none} .remount-done.show{display:block;opacity:1;transform:scale(1)} .remount-num.hide{opacity:0;transform:scale(.6);pointer-events:none} /* ====== FEATURE: WIDGETS ====== */ .wshow{display:flex;gap:24px;justify-content:center;align-items:flex-end;flex-wrap:wrap} .wcard{background:var(--bg3);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.08);will-change:transform,opacity} .wcard:hover{transform:translateY(-8px)!important} .wcard.sm{width:170px}.wcard.md{width:300px}.wcard.lg{width:400px} .wcard .sph{min-height:180px;padding:40px 20px;border:none;border-radius:0} .wcard .sph-icon{font-size:32px} .wcard .sph-text{font-size:12px} /* ====== ALSO INCLUDED ====== */ .also{padding:100px 0} .also-head{text-align:center;margin-bottom:56px} .also-head h2{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.02em;margin-bottom:12px} .also-head p{font-size:16px;color:var(--muted)} .agrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .acard{padding:24px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);transition:all .35s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden} .acard:hover{border-color:var(--border2);background:var(--bg4);transform:translateY(-5px);box-shadow:0 12px 32px rgba(0,0,0,.08)} .acard::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(22,163,74,.04),transparent 60%);opacity:0;transition:opacity .35s} .acard:hover::before{opacity:1} /* Cursor spotlight on cards */ .acard::after,.tcard::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(22,163,74,.06),transparent 40%);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:0} .acard:hover::after,.tcard:hover::after{opacity:1} .acard-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:14px;background:var(--glow)} .acard h3{font-size:15px;font-weight:700;margin-bottom:4px;position:relative} .acard p{font-size:13px;color:var(--muted);line-height:1.5;position:relative} /* ====== HOW IT WORKS ====== */ .how{padding:120px 0;background:#f5f9f7;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .how-head{text-align:center;margin-bottom:72px} .how-head h2{font-size:clamp(30px,4.5vw,48px);font-weight:800;letter-spacing:-.03em;margin-bottom:16px} .how-head p{font-size:17px;color:var(--muted);max-width:480px;margin:0 auto} .steps{display:flex;max-width:900px;margin:0 auto;position:relative} .step{flex:1;text-align:center;position:relative;padding:0 20px;cursor:pointer} .step-n{width:56px;height:56px;border-radius:50%;background:var(--bg3);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;margin:0 auto 20px;position:relative;z-index:2;transition:all .5s cubic-bezier(.16,1,.3,1);color:var(--muted)} .step.active .step-n{background:linear-gradient(135deg,var(--g1),var(--g2));border:none;color:#fff;transform:scale(1.15);box-shadow:0 0 30px rgba(22,163,74,.2)} .step h3{font-size:20px;font-weight:700;margin-bottom:8px;transition:color .4s} .step.active h3{color:var(--accent)} .step p{font-size:14px;color:var(--dim);line-height:1.65;opacity:.5;transition:opacity .4s} .step.active p{color:var(--muted);opacity:1} /* Connecting line */ .steps-line{position:absolute;top:28px;left:calc(100%/6);right:calc(100%/6);height:2px;background:var(--border);z-index:0} .steps-fill{height:100%;background:linear-gradient(90deg,var(--g1),var(--g2));width:0%;transition:width .6s cubic-bezier(.4,0,.2,1);border-radius:1px} /* Step icon glow pulse */ @keyframes step-pulse{0%,100%{box-shadow:0 0 30px rgba(22,163,74,.2)}50%{box-shadow:0 0 40px rgba(22,163,74,.3)}} /* Active step highlight card */ .step::after{content:'';position:absolute;inset:-12px -8px;border-radius:16px;background:radial-gradient(ellipse at 50% 20%,rgba(22,163,74,.08),transparent 70%);opacity:0;transition:opacity .5s;pointer-events:none;z-index:-1} .step.active::after{opacity:1} /* Step SVG icon animations */ .step-n svg{transition:opacity .3s} /* Download bounce — only on current step */ @keyframes dl-bounce{0%,100%{transform:translateY(0)}30%{transform:translateY(5px)}50%{transform:translateY(-3px)}70%{transform:translateY(2px)}} .step.current .step-dl-icon{animation:dl-bounce 1.2s ease-in-out infinite} .step:not(.current) .step-dl-icon{animation:none} /* Gear spin — only on current step */ @keyframes gear-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} .step.current .step-gear-icon{animation:gear-spin 2s linear infinite} .step:not(.current) .step-gear-icon{animation:none} /* Checkmark pop — scale bounce when current */ @keyframes check-pop{0%{transform:scale(1)}30%{transform:scale(1.35)}60%{transform:scale(.9)}100%{transform:scale(1)}} .step.current .step-n svg:last-child{animation:check-pop .5s ease-out} /* ====== PRICING (Terminal Receipt) ====== */ .pricing{padding:120px 0;background:linear-gradient(180deg,transparent 0%,rgba(22,163,74,.03) 30%,rgba(13,148,136,.04) 70%,transparent 100%);position:relative;overflow:hidden} .pricing::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:240px;height:1px;background:linear-gradient(90deg,transparent,var(--g1),var(--g2),transparent)} .pricing-head{text-align:center;margin-bottom:64px} .pricing-head h2{font-size:clamp(30px,4.5vw,48px);font-weight:800;letter-spacing:-.03em;margin-bottom:16px} .pricing-head p{font-size:17px;color:var(--muted);max-width:480px;margin:0 auto} /* Terminal window */ .rc{max-width:480px;margin:0 auto} .rc-window{background:#1a1d1b;border-radius:12px;border:1px solid #333;overflow:hidden;font-family:'SF Mono',Monaco,Consolas,monospace;box-shadow:0 24px 64px rgba(0,0,0,.4);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s} .rc-window:hover{transform:translateY(-4px);box-shadow:0 32px 80px rgba(0,0,0,.5)} .rc-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#252825;border-bottom:1px solid #333} .rc-dot{width:10px;height:10px;border-radius:50%} .rc-dot.r{background:#ff5f57}.rc-dot.y{background:#febc2e}.rc-dot.g{background:#28c840} .rc-bar-title{margin-left:8px;font-size:11px;color:#777;font-weight:500;font-family:'SF Mono',Monaco,Consolas,monospace} .rc-body{padding:20px 24px;font-size:13px;line-height:2;color:#9ca3af} .rc-line{display:flex;justify-content:space-between} .rc-line .val{color:var(--text);font-weight:600} .rc-sep{border:none;border-top:1px dashed #333;margin:8px 0} .rc-total{display:flex;justify-content:space-between;align-items:baseline;font-size:18px;font-weight:800;color:var(--text);padding-top:8px} .rc-total .val{color:var(--accent);font-size:22px} .rc-badge{display:inline-block;padding:2px 8px;border-radius:4px;background:rgba(22,163,74,.15);color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.05em;margin-left:8px;vertical-align:middle} .rc-cta{padding:16px 24px;border-top:1px solid #333} .rc-cta a{display:block;padding:14px;border-radius:10px;background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;font-size:15px;font-weight:700;text-decoration:none;text-align:center;font-family:-apple-system,BlinkMacSystemFont,'Inter',sans-serif;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden} .rc-cta a::after{content:'';position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:shimmer 3s ease-in-out infinite} .rc-cta a:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(22,163,74,.3)} .rc-prompt{color:#555;font-size:13px} .rc-prompt span{color:var(--accent)} .rc-cursor{display:inline-block;width:8px;height:15px;background:var(--accent);margin-left:2px;vertical-align:text-bottom;animation:rc-blink 1s step-end infinite} @keyframes rc-blink{0%,100%{opacity:1}50%{opacity:0}} /* Stagger reveal */ .has-io .rc-line,.has-io .rc-sep,.has-io .rc-total,.has-io .rc-prompt{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s} .has-io .rc-window.v .rc-line,.has-io .rc-window.v .rc-sep,.has-io .rc-window.v .rc-total,.has-io .rc-window.v .rc-prompt{opacity:1;transform:none} .rc-window.v .rc-prompt{transition-delay:.1s} .rc-window.v .rc-line:nth-child(3){transition-delay:.3s} .rc-window.v .rc-line:nth-child(4){transition-delay:.4s} .rc-window.v .rc-line:nth-child(5){transition-delay:.5s} .rc-window.v .rc-line:nth-child(6){transition-delay:.6s} .rc-window.v .rc-line:nth-child(7){transition-delay:.7s} .rc-window.v .rc-sep{transition-delay:.8s} .rc-window.v .rc-total{transition-delay:.9s} .rc-trial{text-align:center;margin-top:16px;font-size:13px} .rc-trial a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-weight:600;transition:color .2s} .rc-trial a:hover{color:var(--accent)} .pguarantee{text-align:center;margin-top:24px;font-size:14px;color:var(--dim);display:flex;align-items:center;justify-content:center;gap:8px} /* ====== FAQ — Spotlight ====== */ .faq{padding:120px 0;background:#f5f9f7;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .faq-head{text-align:center;margin-bottom:56px} .faq-head h2{font-size:clamp(30px,4.5vw,48px);font-weight:800;letter-spacing:-.03em} .faq-head p{font-size:17px;color:var(--muted);margin-top:12px} .faq-spot{max-width:720px;margin:0 auto} /* Search bar */ .faq-bar{display:flex;align-items:center;gap:12px;padding:14px 20px;background:rgba(0,0,0,.03);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:14px;margin-bottom:20px;transition:border-color .3s,box-shadow .3s} .faq-bar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(22,163,74,.1)} .faq-bar-icon{color:var(--dim);flex-shrink:0} .faq-bar input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:16px;font-family:inherit;font-weight:500} .faq-bar input::placeholder{color:var(--dim)} .faq-bar-kbd{display:flex;gap:4px} .faq-bar-kbd span{padding:2px 8px;border-radius:6px;background:rgba(0,0,0,.06);border:1px solid var(--border);font-size:11px;font-weight:600;color:var(--dim);font-family:'SF Mono',Monaco,monospace} .faq-bar-clear{display:none;width:20px;height:20px;border-radius:50%;background:var(--dim);border:none;cursor:pointer;color:#fff;font-size:12px;line-height:20px;text-align:center;flex-shrink:0;transition:background .2s} .faq-bar-clear:hover{background:var(--accent)} .faq-bar.has-query .faq-bar-kbd{display:none} .faq-bar.has-query .faq-bar-clear{display:block} /* Results list */ .faq-results{display:flex;flex-direction:column;gap:2px} .faq-empty{text-align:center;padding:48px 20px;color:var(--dim);font-size:15px;display:none} /* Item */ .fqi{border-radius:14px;overflow:hidden;transition:background .2s,box-shadow .3s} .fqi.open{background:rgba(0,0,0,.02);border:1px solid var(--border);box-shadow:0 4px 24px rgba(0,0,0,.04)} .fqq{width:100%;display:flex;align-items:center;gap:14px;padding:16px 20px;background:none;border:none;color:var(--text);font-size:15px;font-weight:600;text-align:left;cursor:pointer;font-family:inherit;transition:background .2s;border-radius:14px} .fqq:hover{background:rgba(0,0,0,.03)} .fqi.open .fqq{background:rgba(22,163,74,.05);border-radius:14px 14px 0 0} /* Icon circle */ .fqi-icon{width:40px;height:40px;border-radius:12px;background:rgba(0,0,0,.04);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px;transition:background .3s,transform .3s} .fqi.open .fqi-icon{background:rgba(22,163,74,.1);transform:scale(1.05)} /* Text */ .fqi-text{flex:1;min-width:0} .fqi-title{font-size:15px;font-weight:600;color:var(--text);line-height:1.3} .fqi-hint{font-size:12px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Arrow */ .fqi-arrow{color:var(--dim);flex-shrink:0;transition:transform .3s cubic-bezier(.16,1,.3,1),color .3s} .fqi.open .fqi-arrow{transform:rotate(90deg);color:var(--accent)} /* Answer panel */ .fqa{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1)} .fqa-inner{padding:16px 20px 20px 20px;font-size:14.5px;color:var(--text);line-height:1.75;border-top:1px solid rgba(22,163,74,.12);opacity:.85} /* Tags in answers */ .faq-tag{display:inline-block;padding:4px 12px;border-radius:100px;font-size:12px;font-weight:600;margin-right:6px;margin-bottom:6px} .faq-tag.conn{background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.15);color:var(--accent)} .faq-tag.fs{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text);font-family:'SF Mono',Monaco,monospace;font-size:11px;letter-spacing:.03em} .faq-tag-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-bottom:8px} /* No results */ .faq-results:empty + .faq-empty{display:block} /* ====== FINAL CTA — The Goodbye ====== */ .cta-end{padding:120px 0;text-align:center;position:relative;overflow:hidden} .cta-end::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:800px;background:radial-gradient(circle,rgba(22,163,74,.06) 0%,transparent 50%);pointer-events:none} .cta-wave{font-size:64px;display:block;margin-bottom:28px;animation:cta-wave 2s ease-in-out infinite} @keyframes cta-wave{0%,100%{transform:rotate(0deg)}15%{transform:rotate(14deg)}30%{transform:rotate(-8deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-4deg)}75%{transform:rotate(6deg)}} .cta-end h2{font-size:clamp(28px,4.5vw,44px);font-weight:900;line-height:1.2;letter-spacing:-.03em;margin-bottom:24px;max-width:580px;margin-left:auto;margin-right:auto} .cta-end h2 .cta-line{display:block;margin-top:4px} .cta-sub{font-size:17px;color:var(--muted);max-width:440px;margin:0 auto 20px;line-height:1.6} .cta-price{display:inline-flex;align-items:baseline;gap:10px;margin-bottom:36px} .cta-price-val{font-size:52px;font-weight:900;letter-spacing:-.03em;background:linear-gradient(135deg,var(--text) 20%,var(--g1) 60%,var(--g2));-webkit-background-clip:text;-webkit-text-fill-color:transparent} .cta-price-label{font-size:15px;color:var(--dim);font-weight:500} .cta-end .hero-btns{justify-content:center} .cta-checks{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:36px} .cta-check{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)} .cta-check svg{color:var(--accent);flex-shrink:0} /* ====== FOOTER ====== */ footer{padding:56px 0 40px;position:relative} footer::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(80%,600px);height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)} /* Split layout */ .foot-split{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;margin-bottom:32px} .foot-left{display:flex;flex-direction:column} .fbrand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;margin-bottom:6px} .fbrand-tagline{font-size:13px;color:var(--dim);margin-bottom:28px} .foot-nav{display:flex;flex-direction:column;gap:2px;margin-bottom:24px} .foot-nav a{font-size:15px;font-weight:600;color:var(--muted);padding:5px 0;transition:color .2s;display:inline-block;width:fit-content;text-decoration:none} .foot-nav a:hover{color:var(--text)} .fsocials{display:flex;gap:14px;margin-bottom:20px} .fsocial{color:var(--dim);transition:color .2s;text-decoration:none} .fsocial:hover{color:var(--accent)} .foot-bottom-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 0;position:relative} .foot-legal{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .foot-legal a{font-size:12px;color:var(--dim);text-decoration:none;transition:color .2s} .foot-legal a:hover{color:var(--muted)} .foot-legal-sep{color:var(--border2);font-size:10px;user-select:none} .fbadge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:100px;background:rgba(255,255,255,.04);border:1px solid var(--border);font-size:11px;font-weight:600;color:var(--dim);position:absolute;left:50%;transform:translateX(-50%)} .fbadge svg{flex-shrink:0} .fbottom{font-size:12px;color:var(--dim)} /* Ghost action links (right column) */ .foot-right{display:flex;flex-direction:column;gap:0;padding-top:8px} .foot-action{display:flex;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:all .25s;text-decoration:none;color:var(--text);position:relative} .foot-action:first-child{border-top:1px solid var(--border)} .foot-action:hover{padding-left:8px} .foot-action:hover .foot-action-title{color:var(--accent)} .foot-action:hover .foot-action-arrow{opacity:1;transform:translateX(0)} .foot-action-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;background:rgba(255,255,255,.04);transition:background .25s} .foot-action:hover .foot-action-icon{background:var(--glow)} .foot-action-text{flex:1;min-width:0} .foot-action-title{font-size:14px;font-weight:600;transition:color .2s} .foot-action-desc{font-size:12px;color:var(--dim);margin-top:1px} .foot-action-arrow{color:var(--accent);flex-shrink:0;opacity:0;transform:translateX(-6px);transition:all .25s} /* Easter egg */ .feaster{font-size:12px;color:rgba(98,120,114,.4);transition:color .3s;cursor:default;display:flex;align-items:center;justify-content:center;gap:6px;padding-top:24px;border-top:1px solid var(--border)} .feaster:hover{color:var(--dim)} /* Easter egg: Terminal log + forbidden button */ .feaster{font-family:'SF Mono',Monaco,Consolas,monospace;font-size:11px;border-top:none;padding-top:20px;flex-direction:column;gap:0} .feaster-ok{color:rgba(74,222,128,.5)} .feaster-text{color:rgba(122,145,138,.4)} .feaster-sep{color:var(--border);margin:0 4px} .feaster-val{color:rgba(122,145,138,.35)} .feaster-cur{display:inline-block;width:6px;height:12px;background:rgba(74,222,128,.35);margin-left:3px;margin-right:10px;border-radius:1px;vertical-align:text-bottom;animation:feaster-blink .8s step-end infinite} @keyframes feaster-blink{0%,100%{opacity:.35}50%{opacity:0}} .feaster-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;font-size:14px;padding:4px 6px;border-radius:6px;color:var(--dim);font-family:inherit;transition:color .3s,text-shadow .3s,transform .3s;line-height:1;animation:feaster-pulse 3s ease-in-out infinite} @keyframes feaster-pulse{0%,100%{color:var(--dim);text-shadow:none;opacity:.6}50%{color:#f87171;text-shadow:0 0 10px rgba(248,113,113,.4);opacity:1}} .feaster-btn:hover{color:#f87171;text-shadow:0 0 14px rgba(248,113,113,.5);transform:scale(1.15);animation:none} .feaster-btn:active{transform:scale(.9)} .feaster-btn.launched{animation:eject-launch .6s cubic-bezier(.16,1,.3,1)!important} @keyframes eject-launch{0%{transform:scale(1)}15%{transform:scale(.7)}40%{transform:scale(1.6) translateY(-8px)}100%{transform:scale(1)}} /* Easter egg line: fixed center, typewriter overflows right */ .feaster-line{display:inline-flex;align-items:center;gap:0;position:relative} .feaster-warn{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;white-space:nowrap;overflow:visible} .feaster-warn-inner{display:inline;font-size:10px;font-weight:600;color:#f87171;letter-spacing:.03em;text-transform:uppercase} .feaster-warn-inner:empty::after{display:none} .feaster-warn-inner::after{content:'';display:inline-block;width:5px;height:11px;background:#f87171;margin-left:2px;vertical-align:text-bottom;border-radius:1px;animation:feaster-blink .5s step-end infinite} /* Post-confetti message — new line below the command */ .feaster-msg{display:none;margin-top:8px;font-family:'SF Mono',Monaco,Consolas,monospace;font-size:11px;color:#f87171;text-align:center;opacity:0;transition:opacity .4s} .feaster-msg.show{display:block;opacity:1} .feaster-msg.fade-out{opacity:0} .feaster-msg-prompt{margin-right:6px} .feaster-msg-text::after{content:'';display:none;width:5px;height:11px;background:#f87171;margin-left:2px;vertical-align:text-bottom;border-radius:1px;animation:feaster-blink .5s step-end infinite} .feaster-msg-text.typing::after{display:inline-block} /* ====== RESPONSIVE ====== */ @media(max-width:1024px){.agrid{grid-template-columns:repeat(2,1fr)}.wshow{gap:16px}.wcard.lg{width:100%;max-width:400px}} @media(max-width:768px){ .nav-tabs{display:none}.nav-icon{display:none}.nav-sep{display:none}.nav-right .ncta{display:none}.nmob{display:flex} .changelog-bubble{left:16px!important;right:16px;width:auto} .hero{padding:120px 0 40px;text-align:center} .hero-grid{grid-template-columns:1fr} .hero h1{margin:32px auto 24px} .hero-sub{margin:0 auto 40px} .hero-btns{justify-content:center} .hero-right{align-items:center;padding-top:24px} .hero-popup{margin:0 auto} .hero-state-dots{gap:4px} .hero-trust{justify-content:center} .hero-ticker{margin-top:20px} .feat{padding:100px 0} .feat-split{grid-template-columns:1fr;gap:48px} .feat-split.rev .feat-visual{order:-1} .steps{flex-direction:column;gap:24px}.steps-line{display:none} .agrid{grid-template-columns:1fr 1fr} .tgrid{grid-template-columns:1fr} .menubar-states{grid-template-columns:repeat(2,1fr)} .wshow{flex-direction:column;align-items:center} .foot-split{grid-template-columns:1fr;gap:40px} .foot-nav{flex-direction:row;gap:4px 16px;flex-wrap:wrap} .fbottom{flex-direction:column;gap:8px} .hero-bloom::before,.hero-bloom::after{filter:blur(50px)} } @media(max-width:480px){ .hero-btns{flex-direction:column;align-items:stretch}.btn{justify-content:center} .agrid{grid-template-columns:1fr} .hero-ticker-item{font-size:12px;gap:4px} } /* old .nlinks.show replaced by mob-overlay */ /* ====== macOS DESKTOP SCENE ====== */ .wdesk{position:relative;width:100%;max-width:960px;margin:0 auto;aspect-ratio:16/10;border-radius:12px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.18),0 2px 0 rgba(255,255,255,.06) inset;border:1px solid rgba(0,0,0,.12)} .wdesk-bg{position:absolute;inset:0;background:linear-gradient(135deg,#1a1c3a 0%,#2d1b4e 25%,#1e3a5f 50%,#1a3a4a 75%,#1c2951 100%);z-index:0} .wdesk-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 40%,rgba(120,80,220,.2) 0%,transparent 60%),radial-gradient(ellipse at 70% 60%,rgba(40,120,200,.15) 0%,transparent 50%)} .wdesk-bar{position:absolute;top:0;left:0;right:0;height:22px;background:rgba(0,0,0,.45);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:space-between;padding:0 10px;z-index:3;font-size:10px;font-weight:500;color:rgba(255,255,255,.85)} .wdesk-bar-l{display:flex;align-items:center;gap:8px} .wdesk-apple{width:10px;height:12px;background:rgba(255,255,255,.85);-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 17 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.15.5c-1.2.08-2.6.8-3.4 1.73-.73.83-1.37 2.1-1.13 3.33 1.3.1 2.65-.7 3.42-1.6.75-.88 1.3-2.13 1.1-3.46zM16.26 14.57c-.38.87-1.6 3.2-3.26 3.24-1.3.03-1.72-.77-3.2-.77s-1.96.75-3.2.8c-1.68.06-4.35-4.5-4.35-8.27 0-3.5 2.43-5.08 4.37-5.12 1.26-.02 2.45.85 3.2.85.76 0 2.17-1.05 3.66-.9.62.03 2.38.25 3.5 1.9-3.07 1.87-2.56 6.1.28 8.27z'/%3E%3C/svg%3E") no-repeat center;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 17 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.15.5c-1.2.08-2.6.8-3.4 1.73-.73.83-1.37 2.1-1.13 3.33 1.3.1 2.65-.7 3.42-1.6.75-.88 1.3-2.13 1.1-3.46zM16.26 14.57c-.38.87-1.6 3.2-3.26 3.24-1.3.03-1.72-.77-3.2-.77s-1.96.75-3.2.8c-1.68.06-4.35-4.5-4.35-8.27 0-3.5 2.43-5.08 4.37-5.12 1.26-.02 2.45.85 3.2.85.76 0 2.17-1.05 3.66-.9.62.03 2.38.25 3.5 1.9-3.07 1.87-2.56 6.1.28 8.27z'/%3E%3C/svg%3E") no-repeat center} .wdesk-bar-r{display:flex;align-items:center;gap:6px} .wdesk-bar-r svg{color:rgba(255,255,255,.8)} .wdesk-clock{font-variant-numeric:tabular-nums;letter-spacing:.02em} /* Widgets — exact Apple macOS proportions: Small 170×170, Medium 364×170, Large 364×382 */ /* Scale factor: 0.647x → Small 110px, Medium 236×110, Large 236×247. Absolute like real macOS */ .wdesk-grid{position:absolute;inset:0;z-index:2} .wdesk-widget{border-radius:14px;background:rgba(255,255,255,.12);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.15);overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s;position:absolute} .wdesk-widget:hover{transform:scale(1.02);box-shadow:0 8px 32px rgba(0,0,0,.25)} .wdesk-widget img{width:100%;height:100%;object-fit:cover;display:block} .wdesk-widget-label{position:absolute;bottom:6px;right:8px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.35);white-space:nowrap;pointer-events:none;z-index:1} .wdesk-widget-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;gap:4px;font-size:12px;font-weight:600;color:rgba(255,255,255,.5)} .wph-sub{font-size:9px;font-weight:500;opacity:.6} /* Small: 110×110, top-right corner */ .wdesk-sm{width:110px;height:110px;top:32px;right:16px} /* Medium: 236×110, left of Small */ .wdesk-md{width:236px;height:110px;top:32px;right:134px} /* Large: 236×247, below Small+Medium, right-aligned with Small */ .wdesk-lg{width:236px;height:247px;top:150px;right:16px} /* Desktop icons — vertical column, left of Large, under Medium */ .wdesk-icons-cell{position:absolute;top:150px;right:300px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;width:70px} .wdesk-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;cursor:default;border-radius:8px;transition:background .2s} .wdesk-icon:hover{background:rgba(255,255,255,.08)} .wdesk-icon span{font-size:9px;font-weight:500;color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.6);line-height:1.2;max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wdesk-dock{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:3px 6px;background:rgba(255,255,255,.1);backdrop-filter:blur(20px);border-radius:10px;border:1px solid rgba(255,255,255,.12);z-index:3} .wdesk-dock-item{width:28px;height:28px;border-radius:7px;opacity:.8} .wdesk-dock-sep{width:1px;height:20px;background:rgba(255,255,255,.15);margin:0 2px} @media(max-width:768px){.wdesk{aspect-ratio:4/3}.wdesk-sm{width:80px;height:80px;top:24px;right:10px}.wdesk-md{width:171px;height:80px;top:24px;right:96px}.wdesk-lg{width:171px;height:179px;top:110px;right:10px}.wdesk-icons-cell{top:110px;right:190px;gap:4px 8px}.wdesk-dock-item{width:22px;height:22px}.wdesk-icon svg{width:28px!important;height:28px!important}} @media(max-width:480px){.wdesk{aspect-ratio:3/4}.wdesk-sm{width:60px;height:60px;top:22px;right:8px}.wdesk-md{width:129px;height:60px;top:22px;right:72px}.wdesk-lg{width:129px;height:135px;top:86px;right:8px}.wdesk-icons-cell{display:none}.wdesk-dock-item{width:18px;height:18px}.wdesk-dock{gap:3px;padding:2px 4px}} /* ====== DARK MODE ====== */ html.dark{ --bg:#0e1210;--bg2:#151a17;--bg3:#1a201d;--bg4:#232a27; --border:#2a332e;--border2:#3a4a43; --text:#e8f0ec;--muted:#9aada5;--dim:#7a918a; --accent:#4ade80;--accent2:#22c55e; --glow:rgba(74,222,128,.08); --green:#4ade80;--orange:#fb923c;--red:#f87171;--teal:#2dd4bf; --g1:#22c55e;--g2:#0d9488; } html.dark body{background:var(--bg);color:var(--text)} /* Nav */ html.dark nav{background:rgba(14,18,16,.7)} html.dark nav.scrolled{background:rgba(14,18,16,.88);border-bottom-color:var(--border)} html.dark .nav-ver{background:rgba(255,255,255,.04);border-color:var(--border)} html.dark .nav-tabs{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06)} html.dark .nav-tabs a:hover{background:rgba(255,255,255,.04)} html.dark .nav-icon{background:rgba(255,255,255,.04);border-color:var(--border)} html.dark .nav-icon-badge{background:var(--bg);border-color:var(--border)} /* nav-theme dark handled by .nav-icon dark rule */ /* Buttons */ html.dark .btn-s{background:var(--bg3);color:var(--text);border-color:var(--border)} html.dark .btn-s:hover{background:var(--bg4);border-color:var(--border2)} /* Feature sections */ html.dark .feat-alt{background:#141b17;border-color:var(--border)} html.dark .how{background:#141b17;border-color:var(--border)} html.dark .faq{background:#141b17;border-color:var(--border)} /* Feature frames */ html.dark .fshot{border-color:var(--border);background:var(--bg2);box-shadow:0 24px 64px rgba(0,0,0,.3)} /* Pricing terminal */ html.dark .rc-window{background:#1a1d1b;border-color:#333} /* FAQ Spotlight */ html.dark .faq-bar{background:rgba(255,255,255,.04);border-color:var(--border)} html.dark .faq-bar-kbd span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)} html.dark .fqi.open{background:rgba(255,255,255,.03);border-color:var(--border);box-shadow:0 4px 24px rgba(0,0,0,.2)} html.dark .fqq:hover{background:rgba(255,255,255,.03)} html.dark .fqi.open .fqq{background:rgba(22,163,74,.06)} html.dark .fqi-icon{background:rgba(255,255,255,.05)} html.dark .fqi.open .fqi-icon{background:rgba(22,163,74,.12)} html.dark .faq-tag.conn{background:rgba(22,163,74,.1);border-color:rgba(22,163,74,.2)} html.dark .faq-tag.fs{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)} /* Hero glow */ html.dark .hero::before{background:radial-gradient(circle,rgba(74,222,128,.08) 0%,transparent 55%)} html.dark .cta-end::before{background:radial-gradient(circle,rgba(74,222,128,.06) 0%,transparent 55%)} /* Widget cards */ html.dark .wcard{background:var(--bg3);border-color:var(--border);box-shadow:0 16px 48px rgba(0,0,0,.2)} /* Group pills */ html.dark .gpill{background:var(--bg3);border-color:var(--border)} html.dark .gpill:hover{border-color:var(--border2)} /* Trigger & Also cards */ html.dark .tcard{background:var(--bg3);border-color:var(--border)} html.dark .tcard:hover{border-color:var(--accent);background:var(--bg4)} html.dark .acard{background:var(--bg3);border-color:var(--border)} html.dark .acard:hover{border-color:var(--border2);background:var(--bg4)} /* Menubar states */ html.dark .menubar-state{background:transparent;border-color:transparent} html.dark .mb-pill{background:linear-gradient(135deg,rgba(36,53,48,.9),rgba(28,41,35,.95));border-color:var(--border2);box-shadow:0 0 40px rgba(22,163,74,.1),0 8px 32px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04)} html.dark .mb-glow{background:radial-gradient(ellipse at center,rgba(22,163,74,.25) 0%,rgba(13,148,136,.12) 40%,transparent 70%)} html.dark .mb-glow.glow-green{background:radial-gradient(ellipse at center,rgba(74,222,128,.2) 0%,rgba(22,163,74,.1) 40%,transparent 70%)} html.dark .mb-glow.glow-red{background:radial-gradient(ellipse at center,rgba(255,107,107,.18) 0%,rgba(239,68,68,.08) 40%,transparent 70%)} html.dark .mb-glow.glow-orange{background:radial-gradient(ellipse at center,rgba(255,170,68,.18) 0%,rgba(251,146,60,.08) 40%,transparent 70%)} html.dark .mb-pill.pill-green{box-shadow:0 0 40px rgba(74,222,128,.12),0 8px 32px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04)} html.dark .mb-pill.pill-red{box-shadow:0 0 40px rgba(255,107,107,.12),0 8px 32px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04)} html.dark .mb-pill.pill-orange{box-shadow:0 0 40px rgba(255,170,68,.12),0 8px 32px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04)} /* Remount box */ html.dark .remount-box{background:var(--bg3);border-color:var(--border)} html.dark .remount-bar{background:var(--border)} /* Selection highlights */ html.dark body::after{opacity:.045} html.dark ::selection{background:rgba(74,222,128,.25);color:#fff} /* ====== THEME TOGGLE (Nav) ====== */ /* nav-theme sizing now comes from .nav-icon; keep overflow hidden for sun/moon swap */ .nav-theme{overflow:hidden} .nav-theme svg{width:18px;height:18px;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s} .nav-theme .theme-sun{color:#f59e0b;position:absolute} .nav-theme .theme-moon{color:#6366f1;position:absolute} html:not(.dark) .nav-theme .theme-sun{transform:rotate(0) scale(1);opacity:1} html:not(.dark) .nav-theme .theme-moon{transform:rotate(90deg) scale(0);opacity:0} html.dark .nav-theme .theme-sun{transform:rotate(-90deg) scale(0);opacity:0} html.dark .nav-theme .theme-moon{transform:rotate(0) scale(1);opacity:1} /* Feedback nav button */ /* nav-feedback now uses .nav-icon base */ /* ====== SHARED MODAL PRIMITIVES ====== */ /* — Backdrop overlay */ .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .35s} .modal-backdrop.open{opacity:1;pointer-events:auto} /* — Traffic-light dots (macOS window controls) */ .win-dots{display:flex;gap:7px} .win-dots span{--dot-size:9px;width:var(--dot-size);height:var(--dot-size);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:transform .15s} .win-dots span:nth-child(1){background:#ff5f57} .win-dots span:nth-child(2){background:#febc2e} .win-dots span:nth-child(3){background:#28c840} .win-dots span::after{font-weight:900;line-height:1;color:rgba(0,0,0,.65);opacity:0;transition:opacity .15s;font-family:system-ui} .win-dots span:nth-child(1)::after{content:'×';font-size:calc(var(--dot-size) - 1px)} .win-dots span:nth-child(2)::after{content:'−';font-size:calc(var(--dot-size) - 2px)} .win-dots span:nth-child(3)::after{content:'+';font-size:calc(var(--dot-size) - 1px)} .win-dots:hover span::after{opacity:1} .win-dots span:hover{transform:scale(1.15)} /* — Close button (circle with SVG ×) */ .win-close{width:28px;height:28px;min-width:28px;border:1px solid var(--border,#2a332e);background:var(--bg3,#151a17);border-radius:50%;cursor:pointer;color:var(--muted,#9aada5);display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0;line-height:0} .win-close:hover{background:#ff5f57;border-color:#ff5f57;color:#fff} /* ====== THEME PICKER POPUP ====== */ .tp-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .4s;display:flex;align-items:center;justify-content:center} .tp-overlay.open{opacity:1;pointer-events:auto} .tp-modal{width:calc(100% - 32px);max-width:560px;background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:32px 28px 28px;opacity:0;transform:translateY(12px) scale(.97);transition:opacity .4s,transform .4s cubic-bezier(.16,1,.3,1);text-align:center} .tp-overlay.open .tp-modal{opacity:1;transform:none} .tp-logo{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px} .tp-logo img{width:24px;height:24px;border-radius:6px} .tp-logo span{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--text)} .tp-headline{font-size:22px;font-weight:800;letter-spacing:-.03em;margin-bottom:4px;background:linear-gradient(135deg,#22c55e,#0d9488);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .tp-sub{font-size:13px;color:var(--muted);margin-bottom:24px} /* Two cards */ .tp-cards{display:flex;gap:14px;margin-bottom:20px} .tp-card{flex:1;cursor:pointer;border-radius:14px;overflow:hidden;border:2px solid transparent;transition:all .3s cubic-bezier(.16,1,.3,1);position:relative} .tp-card:hover{transform:translateY(-3px)} .tp-card-light{background:#fff;border-color:#e6ece9} .tp-card-dark{background:#1a201d;border-color:#2a332e} .tp-card:hover{border-color:var(--accent);box-shadow:0 8px 32px rgba(22,163,74,.15)} .tp-card.chosen{border-color:var(--accent);box-shadow:0 0 0 3px rgba(22,163,74,.2)} .tp-card.chosen::after{content:'';position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:14px;background-position:center;background-repeat:no-repeat} /* Mini nav */ .hp-nav{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid} .tp-card-light .hp-nav{border-color:#e6ece9} .tp-card-dark .hp-nav{border-color:#2a332e} .hp-logo{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:800} .tp-card-light .hp-logo{color:#1a2e28} .tp-card-dark .hp-logo{color:#e8f0ec} .hp-logo img{width:14px;height:14px;border-radius:3px} .hp-pills{display:flex;gap:2px} .hp-pill{width:20px;height:6px;border-radius:3px} .tp-card-light .hp-pill{background:#f0f5f2} .tp-card-dark .hp-pill{background:#232a27} .hp-pill.active{background:linear-gradient(135deg,#22c55e,#0d9488);width:24px} /* Mini hero */ .hp-hero{padding:12px 12px 10px} .hp-lines{display:flex;flex-direction:column;gap:5px;margin-bottom:10px} .hp-line{height:6px;border-radius:3px} .tp-card-light .hp-line{background:#e6ece9} .tp-card-dark .hp-line{background:#232a27} .hp-line:nth-child(1){width:75%} .hp-line:nth-child(2){width:55%;background:linear-gradient(135deg,#22c55e,#0d9488)!important;opacity:.6} .hp-line:nth-child(3){width:40%} .hp-btns{display:flex;gap:5px} .hp-btn{height:18px;border-radius:5px;font-size:7px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 8px} .hp-btn-p{background:linear-gradient(135deg,#22c55e,#0d9488);color:#fff} .hp-btn-s{border:1px solid} .tp-card-light .hp-btn-s{border-color:#dce5e0;color:#5a7068} .tp-card-dark .hp-btn-s{border-color:#2a332e;color:#9aada5} /* Mini screenshot area */ .hp-screenshot{margin:8px 12px 12px;border-radius:6px;height:52px;overflow:hidden} .tp-card-light .hp-screenshot{background:#f7faf8;border:1px solid #e6ece9} .tp-card-dark .hp-screenshot{background:#151a17;border:1px solid #2a332e} .hp-screenshot-lines{padding:6px;display:flex;flex-direction:column;gap:3px} .hp-screenshot-line{height:4px;border-radius:2px} .tp-card-light .hp-screenshot-line{background:#e6ece9} .tp-card-dark .hp-screenshot-line{background:#232a27} .hp-screenshot-line:nth-child(1){width:60%} .hp-screenshot-line:nth-child(2){width:80%} .hp-screenshot-line:nth-child(3){width:45%} .hp-screenshot-line:nth-child(4){width:70%} /* Card labels */ .tp-card-label{padding:10px 12px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:700;letter-spacing:-.01em} .tp-card-light .tp-card-label{color:#1a2e28} .tp-card-dark .tp-card-label{color:#e8f0ec} .tp-card-label svg{width:16px;height:16px} .tp-card-light .tp-card-label svg{color:#f59e0b} .tp-card-dark .tp-card-label svg{color:#818cf8} /* Footer hint */ .tp-hint{font-size:11px;color:var(--dim);display:flex;align-items:center;justify-content:center;gap:4px} .tp-hint svg{width:12px;height:12px;opacity:.5} @media(max-width:480px){ .tp-cards{flex-direction:column;gap:10px} .tp-modal{padding:24px 20px 20px} } /* ====== CONTACT FORM MODAL ====== */ /* cf-overlay: uses .modal-backdrop base + z-index */ .cf-overlay{z-index:1001} .cf-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);z-index:1002;width:calc(100% - 32px);max-width:560px;max-height:calc(100vh - 48px);background:var(--bg);border:1px solid var(--border);border-radius:var(--r);overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s cubic-bezier(.16,1,.3,1)} .cf-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)} .cf-header{padding:24px 28px 0;margin-bottom:4px} .cf-bar-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .cf-title-row{display:flex;align-items:center;justify-content:space-between} /* cf-dots: uses .win-dots base */ .cf-title{font-size:18px;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,var(--text),var(--muted));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} /* cf-close: uses .win-close base */ .cf-body{padding:0 28px 28px} /* Progress — pill style */ .cf-progress{display:flex;align-items:center;justify-content:center;gap:6px;padding:20px 28px 16px} .cf-step-dot{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted);transition:all .4s cubic-bezier(.16,1,.3,1);flex-shrink:0;position:relative} .cf-step-dot.active{border-color:var(--accent);color:var(--accent);background:var(--glow);transform:scale(1.1);box-shadow:0 0 0 4px var(--glow)} .cf-step-dot.done{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(22,163,74,.25)} .cf-step-line{width:40px;height:2px;background:var(--border);border-radius:1px;transition:all .4s cubic-bezier(.16,1,.3,1)} .cf-step-line.done{background:linear-gradient(90deg,var(--g1),var(--g2))} /* Step 1 — type cards */ .cf-types{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px} .cf-type-card{padding:24px 14px 20px;background:var(--bg2);border:2px solid var(--border);border-radius:var(--r);cursor:pointer;text-align:center;transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;overflow:hidden} .cf-type-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(22,163,74,.04) 0%,transparent 60%);opacity:0;transition:opacity .3s} .cf-type-card:hover{border-color:var(--border2);background:var(--bg3);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06)} .cf-type-card:hover::before{opacity:1} .cf-type-card.selected{border-color:var(--accent);background:var(--glow);transform:translateY(-2px);box-shadow:0 8px 24px rgba(22,163,74,.12)} .cf-type-card.selected::before{opacity:1} .cf-type-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--bg3);border-radius:12px;transition:all .3s} .cf-type-card:hover .cf-type-icon,.cf-type-card.selected .cf-type-icon{background:var(--accent);color:#fff} .cf-type-icon svg{transition:all .3s} .cf-type-card:hover .cf-type-icon svg,.cf-type-card.selected .cf-type-icon svg{stroke:#fff} .cf-type-label{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.01em} .cf-type-desc{font-size:11px;color:var(--muted);line-height:1.4} /* Step 2 — form fields */ .cf-step-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px} .cf-step-title svg{color:var(--accent);flex-shrink:0} .cf-field{margin-bottom:18px} .cf-label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px} .cf-label .req{color:var(--red);margin-left:0;font-size:11px} .cf-label svg{width:14px;height:14px;color:var(--accent);opacity:.6;flex-shrink:0} .cf-input,.cf-textarea,.cf-select{width:100%;padding:11px 14px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--rx);color:var(--text);font-family:inherit;font-size:14px;transition:all .2s} .cf-input:hover,.cf-textarea:hover,.cf-select:hover{border-color:var(--border2)} .cf-input:focus,.cf-textarea:focus,.cf-select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--glow);background:var(--bg)} .cf-input::placeholder,.cf-textarea::placeholder{color:var(--dim);font-weight:400} .cf-textarea{min-height:88px;resize:vertical;line-height:1.6} .cf-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a7068' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px} .cf-fieldset{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rs);padding:14px 16px;margin-bottom:18px} .cf-fieldset-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px} .cf-radios{display:flex;gap:8px;flex-wrap:wrap} .cf-radio{display:flex;align-items:center;gap:7px;padding:9px 16px;background:var(--bg);border:1.5px solid var(--border);border-radius:100px;cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);transition:all .2s} .cf-radio:hover{border-color:var(--border2);color:var(--text)} .cf-radio.selected{border-color:var(--accent);color:var(--accent);background:var(--glow);box-shadow:0 2px 8px rgba(22,163,74,.1)} .cf-radio input{display:none} .cf-radio-dot{width:8px;height:8px;border-radius:50%;border:2px solid var(--border);transition:all .2s;flex-shrink:0} .cf-radio.selected .cf-radio-dot{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 2px var(--glow)} .cf-file-label{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--bg2);border:2px dashed var(--border);border-radius:var(--rs);cursor:pointer;font-size:13px;color:var(--muted);transition:all .2s} .cf-file-label:hover{border-color:var(--accent);color:var(--accent);background:var(--glow)} .cf-file-label input{display:none} .cf-file-name{font-size:12px;color:var(--accent);font-weight:600;margin-top:6px;display:flex;align-items:center;gap:4px} .cf-hint{font-size:11px;color:var(--dim);margin-top:4px} .cf-error{font-size:12px;color:var(--red);margin-top:6px;display:none;padding:8px 12px;background:rgba(220,38,38,.06);border-radius:var(--rx);border:1px solid rgba(220,38,38,.15)} .cf-error.show{display:flex;align-items:center;gap:6px} /* Step 3 — summary */ .cf-summary{font-size:14px;line-height:1.7;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rs);padding:16px 18px} .cf-summary dt{font-weight:700;color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-top:14px;display:flex;align-items:center;gap:4px} .cf-summary dt:first-child{margin-top:0} .cf-summary dd{color:var(--text);white-space:pre-wrap;word-break:break-word;padding:2px 0 0} /* Buttons */ .cf-btns{display:flex;gap:10px;margin-top:22px} .cf-btn{flex:1;padding:13px;border:none;border-radius:var(--rx);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:-.01em} .cf-btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 2px 8px rgba(22,163,74,.2)} .cf-btn-primary:hover{box-shadow:0 4px 16px rgba(22,163,74,.3);transform:translateY(-1px)} .cf-btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} .cf-btn-secondary{background:var(--bg3);color:var(--muted);border:1px solid var(--border)} .cf-btn-secondary:hover{border-color:var(--border2);color:var(--text);background:var(--bg4)} /* Success state */ .cf-result{text-align:center;padding:40px 0} .cf-result-icon{margin-bottom:16px} .cf-result-title{font-size:20px;font-weight:800;margin-bottom:8px;letter-spacing:-.02em} .cf-result-text{font-size:14px;color:var(--muted);line-height:1.6} @media(max-width:480px){.cf-types{grid-template-columns:1fr}.cf-radios{flex-direction:column}.cf-modal{max-height:calc(100vh - 24px)}} /* ====== COOKIE CONSENT (orestbida/cookieconsent v3) — theme overrides ====== */ /* Hide default consent modal — we use custom terminal banner */ #cc-main .cm-wrapper{display:none!important} /* ====== Preferences Modal — Terminal Theme via CSS vars ====== */ #cc-main{ --cc-bg:#0e1210; --cc-primary-color:#e8f0ec; --cc-secondary-color:#9aada5; --cc-font-family:'SF Mono',SFMono-Regular,ui-monospace,'Cascadia Code',Menlo,monospace; --cc-modal-border-radius:14px; --cc-btn-primary-bg:#4ade80; --cc-btn-primary-color:#0e1210; --cc-btn-primary-border-color:#4ade80; --cc-btn-primary-hover-bg:#22c55e; --cc-btn-primary-hover-color:#0e1210; --cc-btn-primary-hover-border-color:#22c55e; --cc-btn-secondary-bg:transparent; --cc-btn-secondary-color:#9aada5; --cc-btn-secondary-border-color:#2a332e; --cc-btn-secondary-hover-bg:transparent; --cc-btn-secondary-hover-color:#e8f0ec; --cc-btn-secondary-hover-border-color:#3a4a43; --cc-separator-border-color:#2a332e; --cc-toggle-on-bg:#4ade80; --cc-toggle-off-bg:#232a27; --cc-toggle-readonly-bg:#1a201d; --cc-toggle-readonly-knob-bg:#4a5c55; --cc-toggle-knob-bg:#e8f0ec; --cc-cookie-category-block-bg:#151a17; --cc-cookie-category-block-border:#2a332e; --cc-cookie-category-block-hover-bg:#1a201d; --cc-cookie-category-block-hover-border:#4ade80; --cc-section-border:#2a332e; --cc-overlay-bg:rgba(0,0,0,.6); --cc-webkit-scrollbar-bg:#1a201d; --cc-scrollbar-bg:#1a201d; } /* Extra terminal styling on preferences modal — ~20% smaller */ .show--preferences #cc-main .pm{ max-width:520px!important;max-height:min(420px,80vh)!important;height:auto!important; border:1px solid rgba(74,222,128,.15)!important; animation:pm-pulse 3s ease-in-out 1s infinite!important; } @keyframes pm-pulse{ 0%,100%{box-shadow:0 0 30px rgba(74,222,128,.10),0 0 60px rgba(74,222,128,.06),0 0 120px rgba(74,222,128,.03),0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04)} 50%{box-shadow:0 0 40px rgba(74,222,128,.18),0 0 80px rgba(74,222,128,.10),0 0 160px rgba(74,222,128,.05),0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04)} } #cc-main .pm-overlay{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} /* Scaled-down typography */ #cc-main .pm__title{font-size:13px!important;letter-spacing:.3px!important} #cc-main .pm__btn{border-radius:8px!important;font-size:11px!important;letter-spacing:.2px!important;padding:8px 16px!important} #cc-main .pm__section-desc{font-size:10.5px!important;line-height:1.6!important} #cc-main .pm__section-title{font-size:12.5px!important} #cc-main .pm__badge{border-radius:5px!important;font-size:9px!important;padding:1px 6px!important} #cc-main .pm__table-th,#cc-main .pm__table-td{font-size:10px!important} /* Close button — SVG centered */ #cc-main .pm__close-btn{ width:28px!important;height:28px!important;min-width:28px!important; border-radius:50%!important;border:1px solid #2a332e!important; background:#151a17!important;transition:all .2s!important; color:#9aada5!important;display:flex!important;align-items:center!important;justify-content:center!important; padding:0!important;line-height:0!important; } #cc-main .pm__close-btn svg{width:10px!important;height:10px!important;transform:none!important} #cc-main .pm__close-btn::after{content:none!important} #cc-main .pm__close-btn:hover{background:#ff5f57!important;border-color:#ff5f57!important;color:#fff!important} /* Traffic-light dots + close on same row */ #cc-main .pm__header{display:grid!important;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center!important;position:relative!important;overflow:hidden!important;gap:0 8px!important} /* pm-dots: uses .win-dots base (added via JS), size override + grid placement */ #cc-main .pm-dots{display:flex!important;gap:6px!important;grid-column:1;grid-row:1} #cc-main .pm-dots span{--dot-size:8px;width:8px!important;height:8px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;position:relative!important;transition:transform .15s!important} #cc-main .pm-dots span:nth-child(1){background:#ff5f57!important} #cc-main .pm-dots span:nth-child(2){background:#febc2e!important} #cc-main .pm-dots span:nth-child(3){background:#28c840!important} #cc-main .pm-dots span::after{font-weight:900!important;line-height:1!important;color:rgba(0,0,0,.65)!important;opacity:0!important;transition:opacity .15s!important;font-family:system-ui!important} #cc-main .pm-dots span:nth-child(1)::after{content:'×'!important;font-size:8px!important} #cc-main .pm-dots span:nth-child(2)::after{content:'−'!important;font-size:7px!important} #cc-main .pm-dots span:nth-child(3)::after{content:'+'!important;font-size:8px!important} #cc-main .pm-dots:hover span::after{opacity:1!important} #cc-main .pm-dots span:hover{transform:scale(1.15)!important} #cc-main .pm__title{grid-column:1/4;grid-row:2;padding-top:6px!important} #cc-main .pm__close-btn{grid-column:3;grid-row:1} /* Ghost cookie in preferences header */ #cc-main .pm-cookie{position:absolute;top:-16px;right:-12px;width:96px;height:96px;opacity:.05;pointer-events:none;z-index:0} /* Button styles: Accept=green, Reject+Save=ghost */ #cc-main .pm__btn-group .pm__btn:nth-child(2){background:transparent!important;color:#9aada5!important;border:1px solid #2a332e!important} #cc-main .pm__btn-group .pm__btn:nth-child(2):hover{background:#1a201d!important;color:#e8f0ec!important;border-color:#3a4a43!important} #cc-main .pm__btn--secondary:hover{background:#1a201d!important;color:#e8f0ec!important;border-color:#3a4a43!important} #cc-main .pm__close-btn:hover{background:#ff5f57!important} #cc-main .pm__section-title:hover{background:#1a201d!important} /* Toggle size down slightly */ #cc-main .pm .section__toggle{transform:scale(.88)!important} /* ====== TERMINAL CONSENT BANNER ====== */ .tc{ position:fixed;bottom:24px;left:50%;z-index:1000; width:580px;max-width:calc(100vw - 40px); transform:translateX(-50%) translateY(20px); padding:20px 24px; background:#0e1210; border-radius:14px; border:1px solid rgba(74,222,128,.15); font-family:'SF Mono',SFMono-Regular,ui-monospace,'Cascadia Code',Menlo,monospace; opacity:0; pointer-events:none; perspective:800px; transition:none; overflow:hidden; } /* Ghost cookie — large, top-right corner, clipped */ .tc-cookie{ position:absolute;top:-30px;right:-25px; width:140px;height:140px; opacity:.06;pointer-events:none; z-index:0; } .tc>*:not(.tc-cookie){position:relative;z-index:1} /* Entrance: slide up + fade in */ .tc.tc-visible{ opacity:1;pointer-events:auto; transform:translateX(-50%) translateY(0); animation:tc-enter .5s cubic-bezier(.16,1,.3,1) forwards; } @keyframes tc-enter{ from{opacity:0;transform:translateX(-50%) translateY(20px)} to{opacity:1;transform:translateX(-50%) translateY(0)} } /* Glow: fades in/out independently via transition, then pulses */ .tc{box-shadow:none;transition:box-shadow .6s ease} .tc.tc-glow{ box-shadow: 0 0 30px rgba(74,222,128,.10), 0 0 60px rgba(74,222,128,.06), 0 0 120px rgba(74,222,128,.03), 0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04); animation:tc-pulse 3s ease-in-out .3s infinite; } @keyframes tc-pulse{ 0%,100%{box-shadow: 0 0 30px rgba(74,222,128,.10), 0 0 60px rgba(74,222,128,.06), 0 0 120px rgba(74,222,128,.03), 0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04)} 50%{box-shadow: 0 0 40px rgba(74,222,128,.18), 0 0 80px rgba(74,222,128,.10), 0 0 160px rgba(74,222,128,.05), 0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04)} } /* Exit: 3D tilt into surface */ .tc.tc-exit{ pointer-events:none; animation:tc-leave .55s cubic-bezier(.4,0,.2,1) forwards; box-shadow:none;transition:box-shadow .3s ease; } @keyframes tc-leave{ 0%{opacity:1;transform:translateX(-50%) translateY(0) perspective(600px) rotateX(0) scale(1)} 40%{opacity:1;transform:translateX(-50%) translateY(12px) perspective(600px) rotateX(8deg) scale(.97)} 100%{opacity:0;transform:translateX(-50%) translateY(100%) perspective(600px) rotateX(22deg) scale(.88);filter:brightness(.6)} } /* Re-enter: reverse of tc-leave — slide up from below with 3D tilt */ .tc.tc-reenter{ opacity:1;pointer-events:auto; animation:tc-reenter .55s cubic-bezier(.16,1,.3,1) forwards; } @keyframes tc-reenter{ 0%{opacity:0;transform:translateX(-50%) translateY(100%) perspective(600px) rotateX(22deg) scale(.88);filter:brightness(.6)} 60%{opacity:1;transform:translateX(-50%) translateY(12px) perspective(600px) rotateX(8deg) scale(.97);filter:brightness(1)} 100%{opacity:1;transform:translateX(-50%) translateY(0) perspective(600px) rotateX(0) scale(1)} } .tc-bar{display:flex;align-items:center;gap:7px;margin-bottom:14px} /* tc-close: uses .win-close base + hardcoded dark theme */ .tc-close{--border:#2a332e;--bg3:#151a17;--muted:#4a5c55;margin-left:auto} /* tc-dot: uses .win-dots base (via HTML class) */ .tc-bar:hover .win-dots span::after{opacity:1} .tc-bar-title{font-size:10px;color:#4a5c55;margin-left:auto;margin-right:auto;letter-spacing:.3px;text-transform:lowercase;flex:1;text-align:center} .tc-line{font-size:13px;line-height:1.7;color:#9aada5} .tc-line .tc-hi{color:#e8f0ec;font-weight:500} .tc-line .tc-green{color:#4ade80} .tc-line .tc-dim{color:#4a5c55} .tc-tw{overflow:hidden;display:inline} .tc-tw .tc-inner{display:inline;border-right:2px solid #4ade80;animation:tc-blink .8s step-end infinite} .tc-tw.tc-done .tc-inner{border-color:transparent;animation:none} @keyframes tc-blink{50%{border-color:transparent}} .tc-btns{display:flex;gap:10px;align-items:center;margin-top:16px} .tc-accept{ padding:9px 24px;border:none;border-radius:8px; background:#4ade80;color:#0e1210;font-family:inherit;font-size:12.5px;font-weight:600; cursor:pointer;letter-spacing:.2px;transition:all .2s; } .tc-accept:hover{background:#22c55e} .tc-reject{ padding:9px 20px;border:1px solid #2a332e;border-radius:8px; background:transparent;color:#9aada5;font-family:inherit;font-size:12.5px;font-weight:500; cursor:pointer;letter-spacing:.2px;transition:all .2s; } .tc-reject:hover{border-color:#3a4a43;color:#e8f0ec} .tc-settings{ font-size:11px;color:#4a5c55;text-decoration:underline;text-underline-offset:2px; cursor:pointer;font-family:inherit;letter-spacing:.2px;transition:color .2s; background:none;border:none;padding:0; } .tc-settings:hover{color:#4ade80} @media(max-width:480px){ .tc{bottom:12px;max-width:calc(100vw - 24px);padding:14px} .tc-line{font-size:11.5px} .tc-btns{flex-wrap:wrap} } /* ====== LEGAL TERMINAL MODAL ====== */ /* lm-overlay: uses .modal-backdrop base + z-index */ .lm-overlay{z-index:3000} .lm-win{--lm-bg:#0e1210;--lm-bar:#161b18;--lm-border:#2a3530;--lm-text:#e8f0ec;--lm-muted:#9aada5;--lm-dim:#5a6e64;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.92);z-index:3001;width:calc(100% - 40px);max-width:740px;max-height:calc(100vh - 60px);display:flex;flex-direction:column;background:var(--lm-bg);border:1px solid var(--lm-border);border-radius:12px;overflow:hidden;font-family:'SF Mono',Monaco,Consolas,'Fira Code',monospace;box-shadow:0 32px 80px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.04) inset;opacity:0;pointer-events:none;transition:opacity .35s,transform .4s cubic-bezier(.16,1,.3,1)} html:not(.dark) .lm-win{--lm-bg:#f7faf8;--lm-bar:#eef3f0;--lm-border:#dce5e0;--lm-text:#1a2e28;--lm-muted:#5a7068;--lm-dim:#8a9e96} .lm-overlay.open .lm-win{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)} .lm-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;background:var(--lm-bar);border-bottom:1px solid var(--lm-border);flex-shrink:0;user-select:none;-webkit-user-select:none} /* lm-dots: uses .win-dots base, size override */ .lm-dots span{--dot-size:10px} .lm-bar-title{margin-left:10px;font-size:11.5px;color:var(--lm-dim);font-weight:500;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1} /* lm-close: uses .win-close base + theme overrides */ .lm-close{--border:var(--lm-border);--bg3:var(--lm-bar);--muted:var(--lm-dim);margin-left:auto} .lm-body{flex:1;overflow-y:auto;padding:20px 24px 32px;scrollbar-width:thin;scrollbar-color:var(--lm-border) transparent;position:relative} .lm-body::-webkit-scrollbar{width:6px} .lm-body::-webkit-scrollbar-track{background:transparent} .lm-body::-webkit-scrollbar-thumb{background:var(--lm-border);border-radius:3px} .lm-body::-webkit-scrollbar-thumb:hover{background:var(--lm-dim)} .lm-prompt{color:var(--lm-dim);font-size:12px;margin-bottom:12px;display:flex;align-items:center;gap:6px} .lm-prompt .accent{color:var(--accent)} .lm-content{font-size:13.5px;color:var(--lm-muted);line-height:1.8} .lm-content h1,.lm-content h2{color:var(--lm-text);font-size:16px;font-weight:700;margin:24px 0 8px;letter-spacing:-.01em} .lm-content h3{color:var(--lm-text);font-size:14px;font-weight:600;margin:18px 0 6px} .lm-content h4{color:var(--lm-text);font-size:13px;font-weight:600;margin:16px 0 4px} .lm-content p{margin-bottom:12px} .lm-content ul,.lm-content ol{margin:0 0 12px 20px} .lm-content li{margin-bottom:3px} .lm-content a{color:var(--accent);text-decoration:none} .lm-content a:hover{text-decoration:underline} .lm-content strong{color:var(--lm-text);font-weight:600} .lm-cursor{display:inline-block;width:7px;height:14px;background:var(--accent);margin-left:2px;vertical-align:text-bottom;animation:lm-blink 1s step-end infinite} @keyframes lm-blink{0%,100%{opacity:1}50%{opacity:0}} /* License preview (app activation window mockup) */ .lm-license-preview{margin:16px 0 20px;border-radius:10px;overflow:hidden;border:1px solid var(--lm-border);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif} .lm-lp-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--lm-bar);border-bottom:1px solid var(--lm-border)} .lm-lp-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.lm-lp-dot:nth-child(1){background:#ff5f57}.lm-lp-dot:nth-child(2){background:#febc2e}.lm-lp-dot:nth-child(3){background:#28c840} .lm-lp-title{margin-left:8px;font-size:11px;color:var(--lm-dim);font-weight:500} .lm-lp-body{padding:24px 20px;text-align:center;background:var(--lm-bg)} .lm-lp-icon{font-size:36px;margin-bottom:12px;filter:drop-shadow(0 2px 8px rgba(74,222,128,.3))} .lm-lp-label{color:var(--lm-text);font-size:13px;font-weight:600;margin-bottom:12px} .lm-lp-input{background:rgba(255,255,255,.06);border:1px solid var(--lm-border);border-radius:6px;padding:10px 14px;font-family:'SF Mono',Monaco,Consolas,monospace;font-size:12px;color:var(--lm-dim);letter-spacing:.5px;margin:0 auto 12px;max-width:340px} html:not(.dark) .lm-lp-input{background:rgba(0,0,0,.04)} .lm-lp-btn{display:inline-block;background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;font-size:13px;font-weight:600;padding:8px 24px;border-radius:6px;margin-bottom:8px} .lm-lp-hint{font-size:11px;color:var(--lm-dim);margin:0} /* License management form */ .lm-license-form{margin:16px 0 20px} .lm-lf-label{display:block;font-size:12px;color:var(--lm-muted);margin-bottom:6px;font-weight:600} .lm-lf-input{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--lm-border);border-radius:6px;padding:12px 14px;font-family:'SF Mono',Monaco,Consolas,monospace;font-size:13px;color:var(--lm-text);letter-spacing:.3px;box-sizing:border-box;outline:none;transition:border-color .2s} .lm-lf-input:focus{border-color:var(--accent)} html:not(.dark) .lm-lf-input{background:rgba(0,0,0,.04);color:var(--lm-text)} .lm-lf-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap} .lm-lf-btn{padding:10px 18px;border-radius:6px;font-size:12.5px;font-weight:600;cursor:pointer;border:none;transition:opacity .2s} .lm-lf-btn:disabled{opacity:.5;cursor:wait} .lm-lf-check{background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff} .lm-lf-deactivate{background:rgba(255,255,255,.08);color:var(--lm-muted);border:1px solid var(--lm-border)} html:not(.dark) .lm-lf-deactivate{background:rgba(0,0,0,.04)} .lm-lf-result{margin-top:16px;font-size:12.5px;line-height:1.6} .lm-lf-ok{color:var(--accent)} .lm-lf-err{color:#f87171} .lm-lf-loading{color:var(--lm-dim);animation:co-pulse 1.5s ease-in-out infinite} @keyframes co-pulse{0%,100%{opacity:.6}50%{opacity:1}} .lm-lf-details{margin-top:8px;padding:10px 14px;background:rgba(255,255,255,.04);border-radius:6px;font-size:12px;color:var(--lm-muted)} .lm-lf-details div{margin-bottom:4px} .lm-lf-instances{margin-top:12px} .lm-lf-instance{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:rgba(255,255,255,.04);border:1px solid var(--lm-border);border-radius:6px;margin-bottom:6px} html:not(.dark) .lm-lf-instance{background:rgba(0,0,0,.03)} .lm-lf-inst-info{display:flex;flex-direction:column;gap:2px;font-size:12.5px} .lm-lf-inst-info strong{color:var(--lm-text);font-weight:600} .lm-lf-inst-date{font-size:11px;color:var(--lm-dim)} .lm-lf-deact-btn{padding:6px 12px!important;font-size:11px!important;background:rgba(248,113,113,.15);color:#f87171;border:1px solid rgba(248,113,113,.25)} .lm-lf-deact-btn:hover{background:rgba(248,113,113,.25)} .lm-lf-deact-all{background:rgba(248,113,113,.1);color:#f87171;border:1px solid rgba(248,113,113,.2)} .lm-lf-deact-all:hover{background:rgba(248,113,113,.2)} /* License terminal animation (inline deactivation feedback) */ .lm-term-box{margin-top:16px;padding:14px 16px;background:rgba(0,0,0,.3);border:1px solid var(--lm-border);border-radius:8px;font-family:'SF Mono',Monaco,Consolas,monospace;font-size:12px;line-height:1.8;overflow:hidden} html:not(.dark) .lm-term-box{background:rgba(0,0,0,.05)} .lm-term-cmd{color:var(--accent);font-weight:600;white-space:nowrap;overflow:hidden} .lm-term-cmd.lm-term-done{opacity:.6} .lm-term-dim{color:var(--lm-dim,#607a70);font-size:11.5px} .lm-term-ok{color:var(--accent);font-weight:600} .lm-term-err{color:#f87171;font-weight:600} .lm-term-anim .lm-term-cmd:last-child::after{content:'▋';animation:term-blink .6s step-end infinite;margin-left:1px;font-weight:400;opacity:.7} @keyframes term-blink{0%,100%{opacity:.7}50%{opacity:0}} /* ====== INLINE STYLE REPLACEMENTS ====== */ /* Scroll progress bar */ #scrollProgress{position:fixed;top:0;left:0;height:2px;width:100%;background:linear-gradient(90deg,var(--g1),var(--g2));z-index:101;transform-origin:left;transform:scaleX(0);pointer-events:none} /* Hero mini bar elements */ .hero-ejectall svg{opacity:.95} .hero-mini-count{font-size:10px;font-weight:700;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums} .hero-mini-clock{font-size:12px;font-weight:500;letter-spacing:.02em} .wdesk-eject-ico{opacity:.8} /* Feature glow positions */ .feat-glow--tl{top:-150px;left:-150px;background:var(--g1)} .feat-glow--br{bottom:-150px;right:-150px;background:var(--teal)} .feat-glow--center{top:40%;left:50%;transform:translate(-50%,-50%);background:var(--g1)} /* Feature images */ .feat-img{margin:0 auto;border-radius:16px} .feat-img--eject{max-width:380px} .feat-img--groups{max-width:360px} /* Group dot colors */ .gdot--green{background:#4ade80} .gdot--orange{background:#f97316} .gdot--purple{background:#a855f7} .gdot--teal{background:#06b6d4} /* Feature 3 layout */ .feat-split--wide{gap:48px} .feat-sub-h3{font-size:17px;font-weight:700;margin-bottom:8px} .feat-sub-p{font-size:14px;color:var(--muted);margin-bottom:16px} .remount-label{font-size:11px;color:var(--dim);margin-bottom:8px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;text-align:center} .remount-range{margin-top:10px;font-size:12px;color:var(--dim);text-align:center} /* Widget placeholders (hidden by default, shown on img error) */ .wdesk-widget-ph--hidden{display:none} /* Dock item colors */ .wdesk-dock-item:nth-child(1){background:#3b82f6} .wdesk-dock-item:nth-child(2){background:#8b5cf6} .wdesk-dock-item:nth-child(3){background:#ef4444} .wdesk-dock-item:nth-child(4){background:#f97316} .wdesk-dock-item:nth-child(5){background:#22c55e} .wdesk-dock-item:nth-child(6){background:#06b6d4} .wdesk-dock-item:nth-child(8){background:#64748b} .wdesk-dock-item:nth-child(9){background:#a855f7} /* Widget sizes text */ .feat-sizes-text{text-align:center;margin-top:24px;font-size:14px;color:var(--dim)} /* Pricing strikethrough */ .rc-strike{text-decoration:line-through;color:#ef4444} /* FAQ tag gap */ .faq-tags-gap{margin-bottom:12px} /* Footer icon */ .fbrand img{border-radius:8px} /* Cookie hint spacing */ .tc-hint-line{margin-top:2px} @media(max-width:600px){ .lm-win{max-width:100%;width:calc(100% - 20px);max-height:calc(100vh - 40px)} .lm-body{padding:16px 16px 24px} .lm-content{font-size:12.5px} .lm-lf-actions{flex-direction:column} } /* ====== REDUCED MOTION ====== */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .hero-tw-cursor{animation:none!important} .has-io .r,.has-io .r-scale,.has-io .r-left,.has-io .r-right{opacity:1;transform:none;filter:none;transition:none} }