.online-tools-page { min-width: 320px; color: #f7f8fb; background: #07080d; }
.online-tools-page main { overflow: hidden; }
.tools-rays { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 74% 18%, rgba(64,206,224,.12), transparent 32%), radial-gradient(circle at 16% 70%, rgba(143,104,255,.1), transparent 36%), #07080d; }
.tools-rays::after { content:"";position:absolute;top:16%;left:-58vw;width:68vw;height:190px;border-radius:999px;opacity:0;background:linear-gradient(90deg,transparent,rgba(91,210,237,.16),rgba(143,104,255,.2),transparent);filter:blur(30px);transform:rotate(-14deg);animation:tools-surface-sweep 16s cubic-bezier(.16,1,.3,1) infinite; }
.tools-rays span { position: absolute; top: -30%; width: 2px; height: 76%; opacity: .32; transform: rotate(32deg); background: linear-gradient(180deg, transparent, rgba(123,224,240,.88), transparent); filter: drop-shadow(0 0 22px rgba(88,218,238,.76)); animation: tools-ray-flow 13s ease-in-out infinite alternate; }
.tools-rays span:nth-child(1) { left: 58%; }.tools-rays span:nth-child(2) { left: 76%; animation-delay: -4s; }.tools-rays span:nth-child(3) { left: 91%; animation-delay: -8s; }
.online-tools-page .site-header { border: 1px solid rgba(255,255,255,.11); background: rgba(8,10,16,.64); box-shadow: 0 20px 55px rgba(0,0,0,.25); backdrop-filter: blur(28px) saturate(165%); }
.online-tools-page .brand, .online-tools-page .main-nav a { color: rgba(255,255,255,.76); }
.online-tools-page .main-nav a[aria-current="page"] { color: #fff; border-color: rgba(84,215,235,.3); background: rgba(69,198,219,.1); }
.online-tools-page .header-download { color: #fff; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.08); }
.tools-preview-shell{position:relative;min-width:0;width:min(100%,920px);justify-self:end}.tools-preview-shell::before{position:absolute;inset:16% 9% 10%;content:"";border-radius:50%;background:radial-gradient(circle,rgba(71,205,226,.18),rgba(111,92,246,.08) 46%,transparent 72%);filter:blur(38px);pointer-events:none}.online-tools-preview{position:relative;z-index:1}.online-tools-preview .program-device-stage{padding-inline:clamp(10px,2.5vw,28px)}.online-tools-preview .program-device-meta{width:calc(100% - clamp(22px,6vw,58px))}.online-tools-preview .program-device-meta strong{text-align:right}.online-tools-preview .program-device-thumbs{margin-top:8px}
.tools-hero { width: min(1380px, calc(100% - 64px)); min-height: 100svh; margin: 0 auto; padding: 156px 0 76px; display: grid; grid-template-columns: minmax(390px,.74fr) minmax(540px,1.26fr); align-items: center; gap: clamp(60px,8vw,128px); }
.tools-overline { display: flex; align-items: center; gap: 10px; color: #81ddec; font-size: 12px; font-weight: 750; }.tools-overline span { width: 30px; height: 1px; background: #66d8ea; box-shadow: 0 0 12px #66d8ea; }
.tools-hero h1 { margin: 26px 0 24px; color: #fff; font-size: clamp(50px,5.2vw,76px); line-height: 1.04; }.tools-hero h1 span,.tools-hero h1 strong { display: block; white-space: nowrap; }.tools-hero h1 strong { color: transparent; background: linear-gradient(100deg,#ddd7ff,#68deed 58%,#fff); -webkit-background-clip:text; background-clip:text; }
.tools-hero-copy > p { max-width: 650px; margin: 0; color: #a4adbe; font-size: 17px; line-height: 1.78; }
.tools-hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }.tools-hero-actions .button { min-height: 48px; }.tools-secondary { color:#edf0f5; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); }
.tools-live-status { min-height: 44px; margin-top: 18px; display:flex; align-items:center; gap:10px; color:#959eaf; font-size:13px; }.tools-live-status i { width:8px;height:8px;border-radius:50%;background:#57dca8;box-shadow:0 0 13px #57dca8; }.tools-live-status b { font-weight:500;color:#dce0e8; }
.tools-browser-stage { position:relative; min-width:0; display:block; }.tools-orbit { position:absolute; z-index:-1; border:1px solid rgba(100,216,235,.2); border-radius:50%; animation:tools-orbit 11s linear infinite; }.tools-orbit-one { inset:-42px 12%; }.tools-orbit-two { inset:4% -48px; animation-duration:15s; animation-direction:reverse; }
.tools-browser-window { position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:8px; background:#0b0e14; box-shadow:0 54px 130px rgba(0,0,0,.55); transform:perspective(1400px) rotateY(-3deg); transition:transform .34s cubic-bezier(.16,1,.3,1),border-color .25s ease; }.tools-browser-stage:hover .tools-browser-window { transform:perspective(1400px) rotateY(0) translateY(-4px);border-color:rgba(94,219,238,.4); }
.tools-browser-bar { height:50px;padding:0 16px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;color:#9aa3b4;background:#11141d; }.tools-browser-bar .mac-window-controls { display:flex;gap:7px; }.tools-browser-bar .mac-window-controls i { width:10px;height:10px;border-radius:50%; }.tools-browser-bar .mac-window-controls i:nth-child(1){background:#ff5f57}.tools-browser-bar .mac-window-controls i:nth-child(2){background:#febc2e}.tools-browser-bar .mac-window-controls i:nth-child(3){background:#28c840}.tools-browser-bar strong{overflow:hidden;font-size:12px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.tools-browser-bar small{display:flex;align-items:center;gap:7px;font-size:11px}.tools-browser-bar small i{width:6px;height:6px;border-radius:50%;background:#55dca9;box-shadow:0 0 10px #55dca9}
.tools-browser-window > img { width:100%;height:auto;aspect-ratio:1801/928;display:block;object-fit:contain;object-position:center;background:#080b12; }.tools-browser-scan { position:absolute;right:0;bottom:0;left:0;height:2px;opacity:.55;background:linear-gradient(90deg,transparent,#5ed9ec,transparent);box-shadow:0 0 20px #5ed9ec;animation:tools-scan 5s ease-in-out infinite; }
.tools-browser-label { position:absolute;right:-20px;bottom:-28px;min-width:164px;min-height:88px;padding:18px;display:grid;align-content:center;border:1px solid rgba(255,255,255,.14);border-radius:8px;color:#a4adbd;background:rgba(9,12,18,.8);backdrop-filter:blur(22px);box-shadow:0 22px 56px rgba(0,0,0,.38); }.tools-browser-label b{color:#fff;font-size:24px;line-height:1}.tools-browser-label span{margin-top:8px;font-size:10px; }
.tools-grid-section,.tools-connection{width:min(1280px,calc(100% - 48px));margin:0 auto}.tools-grid-section{padding:124px 0}.tools-section-heading{max-width:740px}.tools-section-heading>span,.tools-connection-copy>span{color:#68d9eb;font-size:12px;font-weight:750}.tools-section-heading h2,.tools-connection-copy h2{margin:16px 0 14px;color:#fff;font-size:clamp(38px,4.5vw,62px);line-height:1.1}.tools-section-heading p,.tools-connection-copy p{margin:0;color:#9da5b6;font-size:17px;line-height:1.7}
.tools-grid{margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.11);border-left:1px solid rgba(255,255,255,.11)}.tools-entry{position:relative;min-width:0;min-height:210px;padding:34px;display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:24px;overflow:hidden;color:#eff2f7;border-right:1px solid rgba(255,255,255,.11);border-bottom:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.018);transition:background .22s ease}.tools-entry::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;opacity:0;background:var(--entry-accent);box-shadow:0 0 22px var(--entry-accent);transition:opacity .22s ease}.tools-entry:hover{background:color-mix(in srgb,var(--entry-accent) 8%,rgba(255,255,255,.025))}.tools-entry:hover::before{opacity:1}.tools-entry-chat{--entry-accent:#6eddec}.tools-entry-video{--entry-accent:#9b7dff}.tools-entry-canvas{--entry-accent:#5cd8a8}.tools-entry-drama{--entry-accent:#ffae54}.tools-entry-index{position:absolute;top:18px;right:20px;color:var(--entry-accent);font-size:11px;font-weight:800}.tools-entry-icon{width:54px;height:54px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--entry-accent) 38%,transparent);border-radius:8px;color:var(--entry-accent);background:color-mix(in srgb,var(--entry-accent) 10%,transparent)}.tools-entry-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.6}.tools-entry strong{font-size:24px}.tools-entry p{margin:10px 0 0;color:#929bad;font-size:15px;line-height:1.65}
.tools-connection{padding:90px 0 130px;display:grid;grid-template-columns:.72fr 1.28fr;align-items:center;gap:80px;border-top:1px solid rgba(255,255,255,.1)}.tools-connection-flow{display:flex;align-items:center;justify-content:space-between;gap:12px}.tools-connection-flow span{min-height:52px;padding:0 17px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.11);border-radius:8px;color:#dce0e8;background:rgba(255,255,255,.035);font-size:13px;white-space:nowrap}.tools-connection-flow i{height:1px;flex:1;background:linear-gradient(90deg,rgba(104,217,235,.15),rgba(104,217,235,.8),rgba(104,217,235,.15))}
.online-tools-page footer{border-color:rgba(255,255,255,.09);color:#8e96a6;background:#07080d}.online-tools-page footer a,.online-tools-page .footer-brand strong{color:#e4e7ed}
@keyframes tools-ray-flow{from{transform:translate3d(-3vw,-4vh,0) rotate(32deg);opacity:.16}to{transform:translate3d(4vw,9vh,0) rotate(32deg);opacity:.38}}@keyframes tools-surface-sweep{0%,46%,100%{opacity:0;transform:translate3d(0,0,0) rotate(-14deg)}58%{opacity:.14}68%{opacity:.4}84%{opacity:0;transform:translate3d(145vw,18vh,0) rotate(-14deg)}}@keyframes tools-orbit{to{transform:rotate(360deg)}}@keyframes tools-scan{0%,100%{bottom:5%;opacity:0}25%,75%{opacity:.55}50%{bottom:88%}}
@media(max-width:1100px){.tools-hero{grid-template-columns:1fr;padding-top:150px}.tools-hero-copy{max-width:800px}.tools-browser-stage,.tools-preview-shell{width:min(100%,900px);justify-self:center}.tools-connection{grid-template-columns:1fr;gap:42px}}
@media(max-width:760px){.online-tools-page .main-nav.open{background:rgba(8,10,16,.97)}.tools-hero{width:calc(100% - 40px);min-height:auto;padding:124px 0 80px;gap:58px}.tools-hero h1{font-size:clamp(46px,13vw,62px)}.tools-hero-copy>p{font-size:16px}.tools-hero-actions{display:grid}.tools-hero-actions .button{width:100%}.tools-live-status{align-items:flex-start;flex-wrap:wrap}.tools-browser-window,.tools-browser-stage:hover .tools-browser-window{transform:none}.tools-browser-bar{height:46px;padding:0 11px}.tools-browser-label{right:10px;bottom:-28px;min-width:145px}.tools-preview-shell{width:100%}.online-tools-preview .program-device-stage{padding-inline:0}.online-tools-preview .program-device-meta{width:100%;grid-template-columns:auto minmax(0,1fr) auto;gap:8px}.tools-grid-section,.tools-connection{width:calc(100% - 40px)}.tools-grid-section{padding:92px 0}.tools-section-heading h2,.tools-connection-copy h2{font-size:36px}.tools-grid{grid-template-columns:1fr}.tools-entry{min-height:170px;padding:28px 20px;grid-template-columns:48px minmax(0,1fr);gap:17px}.tools-entry-icon{width:48px;height:48px}.tools-entry strong{font-size:20px}.tools-entry p{font-size:14px}.tools-connection{padding:72px 0 96px}.tools-connection-flow{align-items:stretch;flex-direction:column}.tools-connection-flow i{width:1px;height:20px;flex:none;align-self:center;background:linear-gradient(180deg,rgba(104,217,235,.15),rgba(104,217,235,.8),rgba(104,217,235,.15))}}
@media(prefers-reduced-motion:reduce){.tools-rays span,.tools-rays::after,.tools-orbit,.tools-browser-scan{animation:none!important}.tools-browser-window,.tools-browser-stage:hover .tools-browser-window{transform:none;transition:none}}