:root{--bg:#0a0a0f;--surface:#111118;--text:#f0f0f5;--text-muted:#8888a8;--accent:#c8a0e0;--accent-pink:#b04090;--border:#ffffff14}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);color:var(--text)}body{-webkit-font-smoothing:antialiased;flex-direction:column;align-items:center;min-height:100vh;padding:14px;font-family:Inter,sans-serif;display:flex}html[dir=rtl] body{font-family:Tajawal,Inter,sans-serif}#root{flex-direction:column;align-items:center;width:100%;display:flex}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}.nav{grid-template-columns:1fr auto 1fr;align-items:center;width:100%;max-width:1600px;margin-bottom:14px;padding:12px 24px;display:grid}.nav-logo{letter-spacing:-.01em;font-size:1.05rem;font-weight:700}.nav-menu{display:contents}.nav-links{justify-content:center;gap:32px;list-style:none;display:flex}.nav-links a{color:var(--text-muted);font-size:.85rem;transition:color .2s}.nav-links a:hover{color:var(--text)}.nav-actions{justify-content:flex-end;align-items:center;gap:10px;display:flex}.btn-login,.btn-signup{border-radius:999px;padding:7px 18px;font-size:.82rem;line-height:1.2;transition:background .2s,opacity .2s}.btn-login{border:1px solid var(--border);color:#fff;background:#ffffff0f;font-weight:500}.btn-login:hover{background:#ffffff1f}.btn-signup{color:#0a0a0f;background:#fff;border:1px solid #fff;font-weight:600}.btn-signup:hover{opacity:.88}.btn-lang{color:var(--text-muted);border:1px solid var(--border);border-radius:999px;padding:7px 12px;font-family:Inter,sans-serif;font-size:.78rem;font-weight:600;transition:color .2s}.btn-lang:hover{color:var(--text)}.menu-toggle{display:none}.hero-card{text-align:center;background:#0d0b12;border:1px solid #ffffff12;border-radius:20px;flex-direction:column;align-items:center;width:100%;max-width:1600px;min-height:640px;padding:80px 40px 70px;display:flex;position:relative;overflow:hidden}.hero-card:before{content:"";z-index:0;pointer-events:none;background:radial-gradient(circle at 50% -70%,#0000 60%,#b0308808 63%,#b0308814 65%,#b0308829 67%,#b0308847 69%,#b0308866 71%,#b0308885 73%,#b03088a3 75%,#b03088bd 77%,#b03088d1 79%,#d246afeb 85%,#f06ed2e0 87%,#ffcdfaeb 91%,#fff0fffa 93%,#fff 95%),radial-gradient(circle at 50% 35%,#7828b414 0%,#0000 50%);position:absolute;inset:0}.hero-grid{z-index:0;pointer-events:none;background-image:linear-gradient(#ffffff12 1px,#0000 1px),linear-gradient(90deg,#ffffff12 1px,#0000 1px);background-size:40px 40px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle at 50% -70%,#0000 60%,#000 78%);mask-image:radial-gradient(circle at 50% -70%,#0000 60%,#000 78%)}.icon-pipeline{z-index:1;justify-content:center;align-items:center;max-width:700px;margin-bottom:52px;display:flex;position:relative}.beam-svg{z-index:2;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.beam-svg path{fill:none;stroke:url(#beam-gradient);stroke-linecap:round;stroke-linejoin:round;transition:opacity .15s}.beam-glow{stroke-width:2px;opacity:.6}.beam-core{stroke-width:.8px}.pipeline-line{background:linear-gradient(90deg,#ffffff26,#ffffff12);flex:none;width:160px;height:1px}.pipeline-line.right{background:linear-gradient(90deg,#ffffff12,#ffffff26)}.center-wrap{justify-content:center;align-items:center;display:flex;position:relative}.splash{opacity:0;z-index:2;pointer-events:none;background:radial-gradient(circle,#ff4dc899 0%,#0000 70%);border-radius:50%;width:100px;height:100px;margin:-50px 0 0 -50px;position:absolute;top:50%;left:50%;transform:scale(.4)}.splash.animate{animation:.8s ease-out forwards splash-anim}@keyframes splash-anim{0%{opacity:.8;transform:scale(.4)}40%{opacity:.6}to{opacity:0;transform:scale(1.4)}}.icon-node{cursor:pointer;z-index:3;background:#1a1a24;border-radius:50%;flex:none;justify-content:center;align-items:center;width:46px;height:46px;transition:transform .2s,box-shadow .2s;display:flex;position:relative;box-shadow:6px 6px 12px #0006,-4px -4px 10px #ffffff08,inset 1px 1px 1px #ffffff0d,inset 4px 4px 8px #0006}.icon-node:after{content:"";pointer-events:none;border:1px dotted #1a1a24;border-radius:50%;position:absolute;inset:-7px}.icon-node:hover{transform:translateY(-1px);box-shadow:8px 8px 16px #00000080,-5px -5px 12px #ffffff0a,inset 1px 1px 1px #ffffff0f,inset 4px 4px 8px #0006}.icon-node:active{transform:translateY(0);box-shadow:inset 1px 1px 1px #ffffff0d,inset 6px 6px 12px #00000080}.icon-node svg{stroke:#ffffffb3;stroke-width:1.5px;fill:none;stroke-linecap:round;stroke-linejoin:round;z-index:5;width:20px;height:20px;position:relative}.node-light-right:before,.node-light-left:before{content:"";opacity:0;z-index:4;pointer-events:none;border-radius:50%;width:50%;transition:opacity .3s;position:absolute;top:-10px;bottom:-10px}.node-light-right:before{background:radial-gradient(circle at 100%,#c8c8c873 0%,#0000 70%);right:-14px}.node-light-left:before{background:radial-gradient(circle at 0,#c864ff80 0%,#0000 70%);left:-14px}.node-light-right.active:before,.node-light-left.active:before{opacity:1}.icon-node-center{z-index:3;background:#1e1e2c;border-radius:50%;flex:none;justify-content:center;align-items:center;width:64px;height:64px;display:flex;position:relative;box-shadow:8px 8px 16px #00000080,-6px -6px 14px #ffffff0a,inset 1px 1px 2px #ffffff0f,inset 6px 6px 12px #00000080}.icon-node-center svg{fill:#fff;width:28px;height:28px}.hero-content{z-index:1;max-width:620px;position:relative}.hero-heading{letter-spacing:-.02em;margin-bottom:22px;font-size:clamp(2.4rem,5.5vw,4rem);font-weight:300;line-height:1.1}html[dir=rtl] .hero-heading{letter-spacing:0;font-weight:400}.hero-heading strong{background:linear-gradient(90deg,#fff,#a98597);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-top:4px;font-weight:400;display:block}html[dir=rtl] .hero-heading strong{font-weight:700}.hero-sub{color:#fff6;max-width:440px;margin:0 auto 36px;font-size:.9rem;line-height:1.6}.btn-cta{color:#0a0a0f;background:#fff;border-radius:999px;padding:12px 32px;font-size:.9rem;font-weight:600;transition:opacity .2s,transform .2s;display:inline-block}.btn-cta:hover{opacity:.9;transform:translateY(-1px)}.brands{flex-wrap:wrap;justify-content:center;gap:64px;width:100%;max-width:1600px;padding:32px 24px 10px;display:flex}.brand-item{color:#ffffff59;white-space:nowrap;align-items:center;gap:10px;font-size:1.1rem;font-weight:500;display:flex}.brand-item svg{flex:none;width:22px;height:22px}.hubspot-dot{vertical-align:super;background:currentColor;border-radius:50%;width:6px;height:6px;margin:0 1px;display:inline-block}@media (width<=860px){.icon-pipeline{gap:0;margin-bottom:40px}.pipeline-line{width:80px}}@media (width<=768px){.nav{justify-content:space-between;display:flex}.menu-toggle{z-index:1001;flex-direction:column;justify-content:space-between;width:24px;height:14px;display:flex;position:relative}.menu-toggle span{background:#fff;border-radius:2px;width:100%;height:2px;transition:transform .3s;display:block}.menu-toggle.active span:first-child{transform:translateY(6px)rotate(45deg)}.menu-toggle.active span:nth-child(2){transform:translateY(-6px)rotate(-45deg)}.nav-menu{background:var(--bg);z-index:1000;flex-direction:column;justify-content:center;gap:40px;width:100%;height:100vh;padding:40px 24px;transition:right .4s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;right:-100%}.nav-menu.active{right:0}.nav-links{flex-direction:column;align-items:center;gap:28px}.nav-links a{font-size:1.1rem}.nav-actions{flex-direction:column;justify-content:center}.nav-actions .btn-login,.nav-actions .btn-signup{text-align:center;width:100%;padding:12px 18px;font-size:.95rem}.icon-node{width:38px;height:38px}.icon-node-center{width:52px;height:52px}.hero-card{min-height:auto;padding:60px 20px}.brands{gap:32px}}@media (width<=480px){.hero-card{border-radius:16px}.brands{gap:24px}}@media (prefers-reduced-motion:reduce){.nav-menu,.menu-toggle span,.icon-node,.btn-cta{transition:none}}.variant-switch{color:var(--text-muted);gap:10px;margin-top:28px;font-family:Inter,sans-serif;font-size:.75rem;display:flex}.variant-switch a.on{color:var(--text);font-weight:600}
