:root { --bg: #080711; --bg-2: #031321; --surface: rgba(255,255,255,.055); --surface-2: rgba(255,255,255,.035); --line: rgba(255,255,255,.10); --line-strong: rgba(0,231,195,.26); --text: #f7f5fb; --muted: #aaa4b8; --muted-2: #0F8FAF; --lavender: #00e7c3; --lavender-2: #7fffea; --violet: #1087b8; --pink: #62F8E4; --green: #75e7b5; --shadow: 0 40px 110px rgba(0,0,0,.45); --radius-xl: 32px; --radius-lg: 22px; --radius-md: 16px; --container: min(1180px, calc(100% - 40px)); } * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, Cairo, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x: hidden; } html[dir="rtl"] body { font-family: Cairo, Inter, system-ui, sans-serif; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; } button { color: inherit; } .container { width: var(--container); margin-inline: auto; } .section { padding: 120px 0; position: relative; } .section-pad { padding: 154px 0 74px; position: relative; } .section-dark { background: linear-gradient(180deg, rgba(0,231,195,.54), rgba(0,231,195,.25)); border-top: 1px solid rgba(255,255,255,.055); border-bottom: 1px solid rgba(255,255,255,.055); } .section-soft { background: radial-gradient(circle at 66% 35%, rgba(0,231,195,.11), transparent 34%), #031321; } .noise { position: fixed; inset: 0; opacity: .018; pointer-events: none; z-index: 50; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); } .ambient { position: fixed; width: 520px; height: 520px; border-radius: 50%; filter: blur(110px); opacity: .13; pointer-events: none; z-index: 0; } .ambient-1 { background: #62F8E4; top: -220px; right: -150px; } .ambient-2 { background: #62F8E4; left: -310px; top: 45%; opacity: .08; } .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: rgba(8,7,17,.58); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid transparent; transition: .25s ease; } .site-header.scrolled { border-bottom-color: rgba(255,255,255,.08); background: rgba(8,7,17,.86); } .nav { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; } .brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.04em; flex: 0 0 auto; } .brand-text { font-size: 23px; } .brand-text span { color: var(--lavender); } .brand-mark { width: 31px; height: 31px; display: inline-block; position: relative; transform: rotate(30deg); } .brand-mark i,.brand-mark b,.brand-mark em { position: absolute; display: block; border: 2px solid var(--lavender); border-radius: 6px; inset: 4px; transform: skew(-12deg); } .brand-mark b { inset: 9px 2px 2px 9px; border-color: rgba(0,231,195,.66); } .brand-mark em { inset: 2px 9px 9px 2px; border-color: rgba(0,231,195,.55); } .brand-mark.large { width: 62px; height: 62px; } .brand-mark.large i,.brand-mark.large b,.brand-mark.large em { border-width: 3px; border-radius: 10px; } .nav-links { display: flex; align-items: center; gap: 28px; color: #c8c2d2; font-size: 14px; } .nav-links a { transition: color .2s ease; } .nav-links a:hover { color: #fff; } .nav-actions { display: flex; align-items: center; gap: 9px; } .language-switch { border: 1px solid var(--line); background: rgba(255,255,255,.03); border-radius: 11px; min-height: 42px; padding: 0 14px; cursor: pointer; color: #d9d3e2; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; padding: 13px 18px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; } .button:hover { transform: translateY(-2px); } .button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; } html[dir="rtl"] .button svg { transform: scaleX(-1); } .button-primary { background: linear-gradient(135deg, #62F8E4, #1087b8); color: #fff; box-shadow: 0 12px 34px rgba(0,231,195,.28); } .button-primary:hover { box-shadow: 0 18px 42px rgba(0,231,195,.38); } .button-secondary, .button-ghost { background: rgba(255,255,255,.04); border-color: var(--line); } .button-secondary:hover, .button-ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); } .button-ghost { padding: 11px 15px; font-size: 13px; } .menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); background: rgba(255,255,255,.03); border-radius: 11px; cursor: pointer; } .menu-toggle span { width: 18px; height: 1px; background: #fff; display: block; margin: 5px auto; transition: .2s; } .hero { min-height: 850px; overflow: hidden; } .hero::before { content: ""; position: absolute; width: 850px; height: 650px; top: 30px; right: -130px; background: radial-gradient(circle, rgba(0,231,195,.17), transparent 61%); pointer-events: none; } html[dir="rtl"] .hero::before { right: auto; left: -130px; } .hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.021) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.021) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.64), transparent 73%); pointer-events: none; } .hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 40px; min-height: 530px; } .hero-copy { max-width: 680px; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid rgba(0,231,195,.22); background: rgba(0,231,195,.055); color: var(--lavender-2); border-radius: 999px; text-transform: uppercase; letter-spacing: .11em; font-weight: 700; font-size: 11px; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(117,231,181,.08), 0 0 16px rgba(117,231,181,.5); } .hero h1 { font-size: clamp(52px, 6vw, 82px); line-height: .99; letter-spacing: -.055em; margin: 28px 0 24px; font-weight: 750; } html[dir="rtl"] .hero h1 { letter-spacing: -.035em; line-height: 1.13; } .hero h1 span, .section h2 span { background: linear-gradient(110deg, #fff 8%, var(--lavender-2) 52%, #19cde8 95%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-lead { color: #b8b2c1; font-size: 18px; line-height: 1.78; max-width: 635px; margin: 0; } html[dir="rtl"] .hero-lead { line-height: 1.95; } .hero-actions { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; } .trust-row { display: flex; align-items: center; gap: 12px; margin-top: 34px; color: #797382; font-size: 12px; } .trust-row i { width: 3px; height: 3px; border-radius: 50%; background: #0F8FAF; } .hero-visual { min-height: 510px; position: relative; display: grid; place-items: center; } .core-glow { position: absolute; width: 330px; height: 330px; border-radius: 50%; background: radial-gradient(circle, rgba(0,231,195,.22), rgba(0,231,195,.08) 40%, transparent 70%); filter: blur(6px); animation: breathe 5s ease-in-out infinite; } .orbit { position: absolute; border: 1px solid rgba(0,231,195,.14); border-radius: 50%; } .orbit-a { width: 390px; height: 390px; animation: spin 25s linear infinite; } .orbit-a::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--lavender); top: 18%; right: 9%; box-shadow: 0 0 18px var(--lavender); } .orbit-b { width: 295px; height: 295px; border-style: dashed; animation: spinReverse 18s linear infinite; } .ai-core { width: 235px; height: 250px; border: 1px solid rgba(0,231,195,.22); border-radius: 31px; background: linear-gradient(145deg, rgba(0,231,195,.9), rgba(0,231,195,.8)); backdrop-filter: blur(14px); position: relative; z-index: 3; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; box-shadow: 0 35px 100px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.07); } .ai-core::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(145deg, rgba(0,231,195,.45), transparent 40%, rgba(0,231,195,.25)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .core-topline { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 9px; letter-spacing: .13em; color: #0F8FAF; } .core-topline b { font-size: 8px; color: var(--green); border: 1px solid rgba(117,231,181,.2); border-radius: 20px; padding: 4px 6px; } .core-symbol { width: 110px; height: 110px; border-radius: 28px; background: radial-gradient(circle at 50% 35%, rgba(0,231,195,.14), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.07); display: grid; place-items: center; box-shadow: inset 0 0 38px rgba(0,231,195,.1); } .ai-core p { margin: 0; font-size: 10px; color: #aaa2b5; letter-spacing: .04em; } .float-card { position: absolute; z-index: 4; padding: 12px 15px; min-width: 155px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,231,195,.77); backdrop-filter: blur(15px); display: flex; align-items: center; gap: 11px; box-shadow: 0 18px 50px rgba(0,0,0,.24); } .float-card small { color: #0F8FAF; font-size: 9px; display: block; margin-bottom: 3px; } .float-card strong { font-size: 11px; font-weight: 650; } .float-icon { width: 29px; height: 29px; border-radius: 9px; display: grid; place-items: center; color: var(--lavender-2); background: rgba(0,231,195,.08); border: 1px solid rgba(0,231,195,.13); } .card-recruit { top: 22%; left: 1%; animation: float 5s ease-in-out infinite; } .card-payroll { right: -3%; top: 37%; animation: float 6.3s ease-in-out infinite .5s; } .card-data { bottom: 17%; left: 4%; animation: float 5.6s ease-in-out infinite 1s; } html[dir="rtl"] .card-recruit { left: auto; right: 1%; } html[dir="rtl"] .card-payroll { right: auto; left: -3%; } html[dir="rtl"] .card-data { left: auto; right: 4%; } .stats-wrap { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 12px; margin-top: 55px; } .stat-card { min-height: 145px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 20px 22px; background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.025)); backdrop-filter: blur(16px); } .stat-card.stat-wide { background: radial-gradient(circle at 85% 10%, rgba(0,231,195,.13), transparent 38%), rgba(255,255,255,.035); } .stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #aaa4b4; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; } .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 999px; background: rgba(117,231,181,.055); color: #8adfba; border: 1px solid rgba(117,231,181,.12); font-size: 8px; letter-spacing: .08em; } .status-badge i { width: 5px; height: 5px; background: var(--green); border-radius: 50%; } .stat-card > strong { display: block; font-size: 42px; margin-top: 12px; letter-spacing: -.05em; } .stat-card > strong.loading { opacity: .55; animation: pulse 1.2s ease-in-out infinite; } .stat-card .stat-word { font-size: 33px; } .stat-card p { margin: 4px 0 0; color: #716b79; font-size: 11px; } .logo-strip { border-top: 1px solid rgba(255,255,255,.055); border-bottom: 1px solid rgba(255,255,255,.055); background: rgba(255,255,255,.012); } .logo-strip-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; color: #716b79; font-size: 11px; text-transform: uppercase; letter-spacing: .11em; } .logo-strip-inner i { color: rgba(0,231,195,.34); font-style: normal; } .section-kicker { color: var(--lavender); font-size: 11px; letter-spacing: .13em; font-weight: 700; text-transform: uppercase; } .split-heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: end; } .section h2 { font-size: clamp(38px, 4.2vw, 59px); letter-spacing: -.045em; line-height: 1.08; margin: 16px 0 0; } html[dir="rtl"] .section h2 { letter-spacing: -.03em; line-height: 1.26; } .split-heading > p, .center-heading > p { color: #918a9b; font-size: 15px; line-height: 1.85; margin: 0 0 5px; max-width: 560px; } .center-heading { text-align: center; max-width: 820px; } .center-heading p { margin: 20px auto 0; } .platform-stage { margin-top: 78px; min-height: 410px; display: grid; grid-template-columns: 1fr .37fr 1.22fr .37fr 1fr; align-items: center; gap: 0; } .flow-column { display: flex; flex-direction: column; gap: 12px; } .flow-label { color: #696370; font-size: 10px; text-transform: uppercase; letter-spacing: .11em; margin-bottom: 3px; } .source-card, .outcome-card { border: 1px solid rgba(255,255,255,.075); background: rgba(255,255,255,.025); border-radius: 14px; padding: 14px; display: flex; gap: 11px; align-items: center; } .source-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(0,231,195,.07); color: #62F8E4; font-size: 9px; border: 1px solid rgba(0,231,195,.12); } .source-card strong,.outcome-card strong { font-size: 11px; display: block; margin-bottom: 3px; } .source-card small,.outcome-card small { font-size: 9px; color: #6f6977; } .outcome-card b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 600; color: var(--green); border: 1px solid rgba(117,231,181,.14); background: rgba(117,231,181,.04); } .connector-lines { height: 250px; display: flex; flex-direction: column; justify-content: space-around; overflow: hidden; } .connector-lines span { height: 1px; width: 100%; background: linear-gradient(90deg, rgba(0,231,195,.12), rgba(0,231,195,.5)); position: relative; } .connector-lines span::after { content: ""; position: absolute; width: 5px; height: 5px; top: -2px; right: 0; border-radius: 50%; background: var(--lavender); box-shadow: 0 0 13px var(--lavender); } .connector-lines-out span { background: linear-gradient(90deg, rgba(117,231,181,.48), rgba(117,231,181,.12)); } .connector-lines-out span::after { right: auto; left: 0; background: var(--green); box-shadow: 0 0 13px var(--green); } html[dir="rtl"] .connector-lines span::after { right: auto; left: 0; } html[dir="rtl"] .connector-lines-out span::after { left: auto; right: 0; } .intelligence-card { min-height: 330px; border-radius: 26px; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 30%, rgba(0,231,195,.12), transparent 48%), rgba(0,231,195,.78); border: 1px solid rgba(0,231,195,.18); box-shadow: 0 25px 75px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.05); padding: 24px; } .mini-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(to bottom, black, transparent); } .intel-header { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; } .intel-header small { display: block; font-size: 10px; color: #a79faf; margin-bottom: 3px; }.intel-header strong { font-size: 12px; } .intel-pulse { width: 190px; height: 105px; position: relative; margin: 42px auto 28px; display: grid; place-items: center; } .intel-pulse i { position: absolute; border: 1px solid rgba(0,231,195,.14); border-radius: 50%; }.intel-pulse i:nth-child(1){width:65px;height:65px}.intel-pulse i:nth-child(2){width:95px;height:95px}.intel-pulse i:nth-child(3){width:125px;height:125px}.intel-pulse i:nth-child(4){width:155px;height:155px;opacity:.5}.intel-pulse span{width:15px;height:15px;border-radius:50%;background:var(--lavender);box-shadow:0 0 0 8px rgba(0,231,195,.08),0 0 36px var(--violet);z-index:2} .intel-tags { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }.intel-tags span{border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:9px 4px;text-align:center;color:#817989;font-size:8px;text-transform:uppercase;letter-spacing:.05em} .capability-grid { margin-top: 66px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .cap-card { min-height: 300px; border-radius: 20px; border: 1px solid rgba(255,255,255,.075); background: rgba(255,255,255,.023); padding: 25px; position: relative; overflow: hidden; transition: transform .24s ease, border-color .24s ease, background .24s ease; } .cap-card::after { content:""; position:absolute; width:180px;height:180px;border-radius:50%;right:-110px;bottom:-110px;background:radial-gradient(circle,rgba(0,231,195,.11),transparent 67%); } html[dir="rtl"] .cap-card::after { right:auto; left:-110px; } .cap-card:hover { transform: translateY(-5px); border-color: rgba(0,231,195,.22); background: rgba(0,231,195,.034); } .cap-card.featured { background: radial-gradient(circle at 85% 0%, rgba(0,231,195,.12), transparent 40%), rgba(255,255,255,.028); } .cap-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(0,231,195,.07); color: var(--lavender-2); border: 1px solid rgba(0,231,195,.12); font-size: 18px; }.cap-number{position:absolute;right:23px;top:27px;color:#496474;font-size:10px;letter-spacing:.08em}html[dir="rtl"] .cap-number{right:auto;left:23px} .cap-card h3 { font-size: 17px; margin: 28px 0 12px; }.cap-card p{color:#8c8594;font-size:12px;line-height:1.8;margin:0;max-width:310px}.chip-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:24px}.chip-row span{font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:#0F8FAF;border:1px solid rgba(255,255,255,.07);padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.018)} .integration-layout { display: grid; grid-template-columns: .88fr 1.12fr; gap: 65px; align-items: center; }.integration-copy h2{margin-top:15px}.integration-copy>p{color:#918a9b;font-size:14px;line-height:1.9;margin:22px 0 0}.check-list{list-style:none;padding:0;margin:35px 0 0;display:flex;flex-direction:column;gap:17px}.check-list li{display:flex;gap:12px;align-items:flex-start}.check-list li>span{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;color:var(--green);background:rgba(117,231,181,.05);border:1px solid rgba(117,231,181,.13);font-size:10px}.check-list strong{display:block;font-size:12px;margin-bottom:4px}.check-list small{color:#0F8FAF;font-size:10px} .integration-cloud { min-height: 520px; position: relative; border-radius: 30px; border: 1px solid rgba(255,255,255,.06); background: radial-gradient(circle at center, rgba(16,135,255,.12), transparent 37%), rgba(255,255,255,.015); overflow: hidden; }.integration-cloud::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) .7px,transparent .7px);background-size:22px 22px;opacity:.32}.integration-node{position:absolute;width:126px;height:74px;border-radius:16px;background:rgba(0,231,195,.91);border:1px solid rgba(255,255,255,.09);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;z-index:2;box-shadow:0 16px 45px rgba(0,0,0,.22)}.integration-node>span:not(.brand-mark){font-size:9px;color:var(--lavender);width:27px;height:27px;border-radius:8px;display:grid;place-items:center;background:rgba(0,231,195,.07)}.integration-node strong{font-size:10px}.node-center{width:150px;height:118px;left:50%;top:50%;transform:translate(-50%,-50%);border-color:rgba(0,231,195,.2);background:linear-gradient(145deg,rgba(4,31,47,.94),rgba(3,15,26,.94));}.node-center strong{font-size:13px}.node-a{left:7%;top:8%}.node-b{right:6%;top:7%}.node-c{left:4%;bottom:8%}.node-d{right:4%;bottom:8%}.node-e{left:50%;top:2%;transform:translateX(-50%)}.integration-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}.integration-svg path{fill:none;stroke:rgba(0,231,195,.18);stroke-width:1;stroke-dasharray:4 6} .steps { margin-top: 72px; display: grid; grid-template-columns: 1fr .25fr 1fr .25fr 1fr; align-items: center; }.step{text-align:center;padding:20px}.step>span{font-size:9px;color:#607888;letter-spacing:.1em}.step-icon{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;margin:18px auto;border:1px solid rgba(0,231,195,.14);background:rgba(0,231,195,.045);color:var(--lavender);font-size:21px}.step h3{font-size:17px;margin:0 0 10px}.step p{margin:0 auto;color:#8299a8;font-size:11px;line-height:1.8;max-width:240px}.step-line{height:1px;background:linear-gradient(90deg,transparent,rgba(0,231,195,.35),transparent)} .cta-section { padding-top: 60px; padding-bottom: 100px; }.cta-panel{min-height:470px;border-radius:var(--radius-xl);border:1px solid rgba(0,231,195,.15);background:linear-gradient(135deg,rgba(0,231,195,.7),rgba(0,231,195,.95));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:55px;overflow:hidden;position:relative;box-shadow:var(--shadow)}.cta-panel>*:not(.cta-orb):not(.cta-grid){position:relative;z-index:2}.cta-orb{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(0,231,195,.19),transparent 67%);top:-220px;left:50%;transform:translateX(-50%)}.cta-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(circle at 50% 35%,black,transparent 68%)}.cta-panel h2{max-width:820px}.cta-panel p{max-width:660px;color:#9992a2;font-size:14px;line-height:1.85;margin:20px auto 0}.cta-actions{justify-content:center}.demo-note{margin-top:14px;font-size:10px;color:#0F8FAF} .footer{border-top:1px solid rgba(255,255,255,.06);background:#07060d}.footer-top{min-height:160px;display:grid;grid-template-columns:.7fr 1fr .7fr;gap:40px;align-items:center}.footer-top p{margin:0;color:#706a77;font-size:11px;line-height:1.7;max-width:390px}.footer-links{display:flex;justify-content:flex-end;gap:20px;color:#8f8898;font-size:11px}.footer-bottom{min-height:63px;border-top:1px solid rgba(255,255,255,.055);display:flex;align-items:center;justify-content:space-between;color:#0F8FAF;font-size:9px;letter-spacing:.04em} .language-gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(2,10,20,.88); backdrop-filter: blur(22px); }.language-gate[hidden]{display:none}.language-card{width:min(520px,100%);border:1px solid rgba(0,231,195,.17);border-radius:28px;background:radial-gradient(circle at 50% 0%,rgba(0,231,195,.11),transparent 37%),#041321;padding:42px;box-shadow:0 45px 120px rgba(0,0,0,.58);text-align:center;position:relative;overflow:hidden}.language-card::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.065) .6px,transparent .6px);background-size:23px 23px;opacity:.25;pointer-events:none}.language-card>*{position:relative;z-index:1}.language-logo{width:84px;height:84px;border-radius:24px;margin:0 auto 18px;border:1px solid rgba(0,231,195,.12);background:rgba(0,231,195,.045);display:grid;place-items:center}.language-overline{font-size:9px;letter-spacing:.22em;color:var(--lavender)}.language-card h2{font-size:31px;line-height:1.3;letter-spacing:-.03em;margin:12px 0 9px}.language-card h2 span{font-family:Cairo,sans-serif;font-size:26px;color:#bfeee8}.language-card p{color:#8297a7;font-size:11px;line-height:1.9;margin:0 0 25px}.language-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.language-options button{border:1px solid rgba(255,255,255,.085);background:rgba(255,255,255,.025);border-radius:15px;padding:16px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"strong arrow" "small arrow";text-align:left;cursor:pointer;transition:.2s}.language-options button:hover{border-color:rgba(0,231,195,.3);background:rgba(0,231,195,.05);transform:translateY(-2px)}.language-options strong{grid-area:strong;font-size:13px}.language-options small{grid-area:small;color:#718897;font-size:9px;margin-top:3px}.language-options span{grid-area:arrow;align-self:center;color:var(--lavender);font-size:18px}.language-options button:first-child{text-align:right;font-family:Cairo,sans-serif} .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }.reveal.revealed{opacity:1;transform:none}.reveal-delay-1{transition-delay:.09s}.reveal-delay-2{transition-delay:.16s} @keyframes spin{to{transform:rotate(360deg)}}@keyframes spinReverse{to{transform:rotate(-360deg)}}@keyframes breathe{50%{transform:scale(1.08);opacity:.75}}@keyframes float{50%{transform:translateY(-9px)}}@keyframes pulse{50%{opacity:.25}} @media (max-width: 1040px){ .nav-links{display:none;position:absolute;top:74px;left:20px;right:20px;flex-direction:column;align-items:stretch;padding:18px;border:1px solid var(--line);background:rgba(0,231,195,.97);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.4)}.nav-links.open{display:flex}.menu-toggle{display:block}.login-link{display:none} .hero-grid{grid-template-columns:1fr;gap:20px}.hero-copy{max-width:800px}.hero-visual{min-height:470px}.hero{min-height:auto}.stats-wrap{grid-template-columns:1fr 1fr}.stat-wide{grid-column:1/-1}.split-heading,.integration-layout{grid-template-columns:1fr}.split-heading{gap:25px}.platform-stage{grid-template-columns:1fr;gap:14px}.connector-lines{display:none}.intelligence-card{order:-1;max-width:620px;width:100%;margin:0 auto}.flow-column{display:grid;grid-template-columns:repeat(3,1fr)}.flow-label{grid-column:1/-1}.capability-grid{grid-template-columns:repeat(2,1fr)}.integration-cloud{min-height:500px}.footer-top{grid-template-columns:1fr;gap:20px;padding:40px 0}.footer-links{justify-content:flex-start} } @media (max-width: 700px){ :root{--container:min(100% - 28px,1180px)}.section{padding:86px 0}.section-pad{padding:120px 0 60px}.nav{height:70px}.brand-text{font-size:20px}.brand-mark{width:28px;height:28px}.language-switch{min-height:38px;padding:0 11px}.hero h1{font-size:48px}.hero-lead{font-size:15px}.hero-visual{min-height:420px;transform:scale(.91);margin-inline:-18px}.orbit-a{width:340px;height:340px}.orbit-b{width:260px;height:260px}.ai-core{width:210px;height:225px}.float-card{min-width:138px;padding:10px 12px}.card-payroll{right:0}.stats-wrap{grid-template-columns:1fr;margin-top:20px}.stat-wide{grid-column:auto}.logo-strip-inner{overflow:auto;gap:22px;justify-content:flex-start;white-space:nowrap}.split-heading{gap:18px}.section h2{font-size:37px}.platform-stage{margin-top:45px}.flow-column{grid-template-columns:1fr}.flow-label{grid-column:auto}.capability-grid{grid-template-columns:1fr;margin-top:42px}.cap-card{min-height:265px}.integration-cloud{min-height:420px;margin-inline:-4px}.integration-node{width:104px;height:66px}.node-center{width:125px;height:102px}.node-e{top:3%}.steps{grid-template-columns:1fr;gap:8px}.step-line{height:38px;width:1px;margin:auto;background:linear-gradient(transparent,rgba(0,231,195,.35),transparent)}.cta-panel{min-height:500px;padding:40px 20px;border-radius:24px}.cta-panel h2{font-size:36px}.cta-actions{width:100%}.cta-actions .button{width:100%}.footer-bottom{gap:15px;align-items:flex-start;flex-direction:column;justify-content:center}.language-card{padding:30px 20px}.language-options{grid-template-columns:1fr}.language-card h2{font-size:26px} } @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.orbit,.core-glow,.float-card{animation:none}.reveal{opacity:1;transform:none;transition:none}} /* SARATECH_LOGO_THEME_V1 */ :root{ --brand-primary:#14e5d0; --brand-primary-strong:#00d9c0; --brand-primary-soft:#7ff7ec; --brand-deep:#03142b; --brand-deep-2:#0a2744; --brand-slate:#5d6f8e; --brand-text:#f7fbff; --brand-muted:rgba(247,251,255,.72); --brand-border:rgba(20,229,208,.18); --brand-glow:rgba(20,229,208,.22); } body{ background: radial-gradient(circle at 84% 14%, rgba(20,229,208,.20), transparent 28%), radial-gradient(circle at 20% 32%, rgba(61,113,255,.10), transparent 30%), linear-gradient(125deg, #020c1d 0%, #071a34 38%, #093951 72%, #0b6a66 100%); color:var(--brand-text); } a, .text-accent{ color:var(--brand-primary); } .btn-primary, .button-primary, .cta-primary{ background:linear-gradient(135deg, var(--brand-primary-strong), var(--brand-primary)); border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 28px rgba(20,229,208,.22); } .btn-primary:hover, .button-primary:hover, .cta-primary:hover{ filter:brightness(1.04); box-shadow:0 12px 32px rgba(20,229,208,.28); } .btn-secondary, .button-secondary, .cta-secondary{ border-color:var(--brand-border); } .card, .glass, .stat-card, .feature-card, .integration-card, .panel, .hero-card{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(141,211,255,.12); box-shadow:0 8px 40px rgba(0,0,0,.26); backdrop-filter:blur(16px); } .live-pill, .badge-live, .status-live, .pill{ border:1px solid rgba(20,229,208,.25); box-shadow:0 0 0 1px rgba(20,229,208,.05) inset; } .brand-logo{ display:block; height:56px; width:auto; object-fit:contain; filter:drop-shadow(0 8px 24px rgba(20,229,208,.18)); } @media (max-width: 768px){ .brand-logo{ height:44px; } } /* ========================================================= SARATECH BRAND THEME V2 Logo palette: Navy + Teal + Cyan + Slate ========================================================= */ :root{ --st-bg:#020b18; --st-bg-2:#041426; --st-bg-3:#06263a; --st-teal:#00e5c3; --st-teal-2:#17f1cf; --st-cyan:#59f7e2; --st-blue:#243d5d; --st-blue-soft:#52718f; --st-white:#f7fbff; --st-text:#dce8f1; --st-muted:#8293a4; --st-border:rgba(86,247,222,.14); --st-border-soft:rgba(133,166,196,.15); --st-glow:rgba(0,229,195,.18); --st-glow-strong:rgba(0,229,195,.28); } /* PAGE */ html, body{ background: radial-gradient(circle at 90% 4%, rgba(0,229,195,.12), transparent 27%), radial-gradient(circle at 18% 22%, rgba(18,80,122,.18), transparent 32%), linear-gradient(135deg,#020916 0%,#041323 48%,#05283a 100%) !important; color:var(--st-text) !important; } /* NAVBAR */ header, .site-header, .navbar, .top-nav{ background:rgba(2,11,24,.90) !important; border-bottom:1px solid rgba(0,229,195,.10) !important; backdrop-filter:blur(18px); } .brand, .site-brand, .navbar-brand, .header-brand{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; } .brand-logo{ width:210px !important; height:auto !important; max-height:66px !important; object-fit:contain !important; background:transparent !important; border:none !important; box-shadow:none !important; filter:drop-shadow(0 0 15px rgba(0,229,195,.12)); } /* NAV LINKS */ nav a, .nav-links a, .header-nav a{ color:#a9bac8 !important; } nav a:hover, .nav-links a:hover, .header-nav a:hover{ color:var(--st-teal) !important; } /* MAIN ACCENTS */ .kicker, .eyebrow, .section-kicker, .section-label{ color:var(--st-teal) !important; } .hero h1 span, .hero-title span, .accent, .text-accent{ color:var(--st-teal) !important; } /* BUTTONS */ .button-primary, .btn-primary, .cta-primary{ color:#001814 !important; background: linear-gradient(135deg,#5ff8e3 0%,#00e5c3 52%,#00bfa5 100%) !important; border:1px solid rgba(113,255,233,.35) !important; box-shadow: 0 12px 34px rgba(0,229,195,.18), inset 0 1px 0 rgba(255,255,255,.32) !important; } .button-primary:hover, .btn-primary:hover, .cta-primary:hover{ transform:translateY(-1px); box-shadow: 0 15px 40px rgba(0,229,195,.27), inset 0 1px 0 rgba(255,255,255,.34) !important; } .button-ghost, .btn-ghost, .button-secondary{ color:var(--st-text) !important; background:rgba(9,28,47,.58) !important; border:1px solid rgba(101,150,178,.22) !important; } .button-ghost:hover, .btn-ghost:hover, .button-secondary:hover{ color:var(--st-teal) !important; border-color:rgba(0,229,195,.32) !important; background:rgba(8,42,54,.72) !important; } /* CARDS */ .stat-card, .feature-card, .capability-card, .integration-card, .workflow-card, .platform-card, .glass-card{ background: linear-gradient(145deg,rgba(10,27,44,.88),rgba(4,18,32,.78)) !important; border:1px solid var(--st-border-soft) !important; box-shadow: 0 20px 55px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.025) !important; } .stat-card:hover, .feature-card:hover, .capability-card:hover, .integration-card:hover{ border-color:rgba(0,229,195,.25) !important; box-shadow: 0 20px 55px rgba(0,0,0,.26), 0 0 32px rgba(0,229,195,.05) !important; } /* LIVE / ACTIVE */ .status-badge, .live-badge, .active-badge{ color:#76ffe8 !important; background:rgba(0,229,195,.07) !important; border:1px solid rgba(0,229,195,.22) !important; } .status-badge i, .live-badge i{ background:var(--st-teal) !important; box-shadow:0 0 10px rgba(0,229,195,.65); } /* TAGS / CHIPS */ .chip-row span, .chip, .tag, .pill{ color:#9ff9ea !important; background:rgba(0,229,195,.055) !important; border:1px solid rgba(0,229,195,.14) !important; } /* TEXT */ h1,h2,h3,h4,strong{ color:var(--st-white); } p, small, .subtitle, .description{ color:var(--st-muted); } /* SECTION DIVIDERS */ section{ border-color:rgba(99,145,171,.10) !important; } /* MARQUEE / STRIP */ .marquee, .ticker, .intelligence-strip{ background:rgba(2,17,30,.72) !important; border-top:1px solid rgba(0,229,195,.08) !important; border-bottom:1px solid rgba(0,229,195,.08) !important; } /* ICONS */ .icon, .card-icon, .feature-icon, .step-icon{ color:var(--st-teal) !important; border-color:rgba(0,229,195,.17) !important; } /* FOOTER */ footer, .site-footer{ background:#020b16 !important; border-top:1px solid rgba(0,229,195,.10) !important; } /* SELECTION */ ::selection{ background:rgba(0,229,195,.28); color:#fff; } @media (max-width:768px){ .brand-logo{ width:165px !important; max-height:52px !important; } } /* ========================================================= END SARATECH BRAND THEME V2 ========================================================= */ /* ========================================================= SARATECH BRAND FINAL - NO PURPLE ========================================================= */ :root { --lavender: #00e7c3 !important; --lavender-2: #7fffea !important; --violet: #1087b8 !important; --st-teal: #00e7c3; --st-mint: #7fffea; --st-cyan: #19cde8; --st-blue: #1087ff; --st-navy: #020b18; --st-navy-2: #041827; --st-slate: #506a89; } /* Hero accent */ .hero h1 span, .section h2 span { background: linear-gradient( 110deg, #7fffea 0%, #00e7c3 48%, #19cde8 100% ) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } /* Eyebrow */ .eyebrow { color: #7fffea !important; border-color: rgba(0,231,195,.25) !important; background: rgba(0,231,195,.055) !important; } /* Floating icons */ .float-icon, .cap-icon, .step-icon { color: #62f8e4 !important; background: rgba(0,231,195,.07) !important; border-color: rgba(0,231,195,.16) !important; } /* Intelligence pulse */ .intel-pulse i { border-color: rgba(0,231,195,.14) !important; } .intel-pulse span { background: #00e7c3 !important; box-shadow: 0 0 0 8px rgba(0,231,195,.08), 0 0 36px rgba(25,205,232,.55) !important; } /* Integration visual */ .integration-cloud { background: radial-gradient( circle at center, rgba(0,231,195,.09), transparent 38% ), rgba(255,255,255,.015) !important; } .integration-node > span:not(.brand-mark) { color: #7fffea !important; background: rgba(0,231,195,.07) !important; } .node-center { border-color: rgba(0,231,195,.22) !important; background: linear-gradient( 145deg, rgba(4,36,49,.96), rgba(3,15,26,.96) ) !important; box-shadow: 0 20px 60px rgba(0,0,0,.30), 0 0 40px rgba(0,231,195,.055) !important; } .integration-svg path { stroke: rgba(0,231,195,.18) !important; } /* Steps */ .step-line { background: linear-gradient( 90deg, transparent, rgba(0,231,195,.34), transparent ) !important; } /* Language popup */ .language-gate { background: rgba(2,10,20,.88) !important; } .language-card { border-color: rgba(0,231,195,.18) !important; background: radial-gradient( circle at 50% 0%, rgba(0,231,195,.10), transparent 38% ), #041321 !important; } .language-logo { border-color: rgba(0,231,195,.15) !important; background: rgba(0,231,195,.045) !important; } .language-overline, .language-options span { color: #00e7c3 !important; } .language-card h2 span { color: #bfeee8 !important; } .language-options button:hover { border-color: rgba(0,231,195,.32) !important; background: rgba(0,231,195,.055) !important; } /* Main page glow */ body { background: radial-gradient( circle at 83% 4%, rgba(0,231,195,.12), transparent 29% ), radial-gradient( circle at 14% 25%, rgba(16,135,255,.08), transparent 29% ), linear-gradient( 135deg, #020914 0%, #031727 53%, #053244 100% ) !important; } /* ========================================================= END SARATECH BRAND FINAL ========================================================= */ /* ========================================================= SARATECH ZERO PURPLE FINAL ========================================================= */ :root { --lavender: #00e7c3 !important; --lavender-2: #62f8e4 !important; --violet: #19cde8 !important; } /* Floating Recruitment / Payroll / Workforce cards */ .float-card, .floating-card, .hero-float, .hero-visual [class*="float"] { background: linear-gradient( 145deg, rgba(5,27,43,.96), rgba(3,15,27,.96) ) !important; border-color: rgba(0,231,195,.16) !important; box-shadow: 0 18px 50px rgba(0,0,0,.30), 0 0 25px rgba(0,231,195,.035) !important; } /* SARA CORE main card */ .core-card, .sara-core, .hero-core, .core-panel, .hero-visual [class*="core"] { background: radial-gradient( circle at 50% 35%, rgba(0,231,195,.08), transparent 45% ), linear-gradient( 155deg, rgba(6,35,51,.98), rgba(3,18,31,.98) ) !important; border-color: rgba(0,231,195,.24) !important; box-shadow: 0 26px 70px rgba(0,0,0,.35), 0 0 38px rgba(0,231,195,.055) !important; } /* Central AI symbol */ .core-icon, .core-symbol, .core-mark, .sara-core-icon, .hero-visual [class*="core"] .brand-mark { background: linear-gradient( 145deg, rgba(0,231,195,.13), rgba(16,135,255,.10) ) !important; border-color: rgba(0,231,195,.22) !important; color: #62f8e4 !important; box-shadow: inset 0 0 28px rgba(0,231,195,.06), 0 0 24px rgba(0,231,195,.08) !important; } /* Any icon inside hero visual */ .hero-visual .float-icon, .hero-visual .cap-icon { color: #62f8e4 !important; background: rgba(0,231,195,.075) !important; border-color: rgba(0,231,195,.20) !important; } /* Hero circles */ .hero-visual circle, .hero-visual .orbit, .hero-visual [class*="orbit"] { border-color: rgba(0,231,195,.12) !important; } /* Dots */ .hero-visual .dot, .hero-visual [class*="pulse"] span { background: #00e7c3 !important; box-shadow: 0 0 18px rgba(0,231,195,.65) !important; } /* Main hero background */ .hero { background: radial-gradient( circle at 72% 32%, rgba(0,231,195,.065), transparent 30% ), radial-gradient( circle at 88% 12%, rgba(16,135,255,.08), transparent 31% ) !important; } /* ========================================================= END SARATECH ZERO PURPLE ========================================================= */ /* ========================================================= SARATECH BRAND BALANCE V1 Navy dominant / Teal as accent only ========================================================= */ /* ---------- General section balance ---------- */ section { background-color: transparent !important; } .section, .section-dark, .section-surface { background: radial-gradient( circle at 82% 15%, rgba(0,231,195,.035), transparent 28% ), linear-gradient( 180deg, rgba(2,11,24,.15), rgba(3,18,31,.38) ) !important; } /* ========================================================= INTELLIGENCE ENGINE SECTION ========================================================= */ .intelligence-engine, .engine-panel, .engine-card, .workflow-engine, .intelligence-core, [class*="intelligence-engine"] { background: radial-gradient( circle at 50% 42%, rgba(0,231,195,.075), transparent 42% ), linear-gradient( 145deg, #062438 0%, #041725 58%, #03111e 100% ) !important; border: 1px solid rgba(0,231,195,.18) !important; box-shadow: 0 25px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.025) !important; } /* Never allow the engine panel to become solid teal */ .intelligence-engine::before, .engine-panel::before, .engine-card::before { opacity: .18 !important; } /* Source / Outcome cards */ .source-card, .outcome-card, .connected-source, .business-outcome, [class*="source-card"], [class*="outcome-card"] { background: linear-gradient( 145deg, rgba(7,36,51,.82), rgba(4,20,33,.90) ) !important; border-color: rgba(69,185,199,.17) !important; color: #f5fbff !important; } .source-card p, .outcome-card p { color: #7991a2 !important; } /* ========================================================= INTEGRATIONS MAP ========================================================= */ .integration-cloud { background: radial-gradient( circle at center, rgba(0,231,195,.055), transparent 38% ), linear-gradient( 145deg, rgba(5,25,40,.94), rgba(3,15,27,.96) ) !important; border-color: rgba(77,171,197,.15) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.018), 0 22px 70px rgba(0,0,0,.22) !important; } /* Outer integration nodes */ .integration-node { background: linear-gradient( 145deg, #08273a, #051927 ) !important; border: 1px solid rgba(0,231,195,.18) !important; box-shadow: 0 14px 34px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.025) !important; } /* Remove the solid bright cyan blocks */ .integration-node:not(.node-center) { background: radial-gradient( circle at 50% 0, rgba(0,231,195,.09), transparent 58% ), linear-gradient( 145deg, #073047, #041b2c ) !important; } /* Center SaraTech node */ .node-center { background: radial-gradient( circle at 50% 35%, rgba(0,231,195,.11), transparent 44% ), linear-gradient( 145deg, #05283a, #031420 ) !important; border-color: rgba(0,231,195,.34) !important; box-shadow: 0 0 0 1px rgba(0,231,195,.04), 0 22px 50px rgba(0,0,0,.30), 0 0 30px rgba(0,231,195,.06) !important; } .integration-node strong { color: #f7fbff !important; } .integration-node > span:not(.brand-mark) { color: #61f5df !important; background: rgba(0,231,195,.055) !important; border: 1px solid rgba(0,231,195,.12) !important; } .integration-svg path { stroke: rgba(0,214,198,.18) !important; } /* ========================================================= FINAL CTA ========================================================= */ .final-cta, .cta-panel, .cta-section, .cta-card, .contact-card, [class*="final-cta"] { background: radial-gradient( circle at 88% 15%, rgba(0,231,195,.10), transparent 32% ), radial-gradient( circle at 15% 85%, rgba(16,135,255,.07), transparent 30% ), linear-gradient( 135deg, #06283b 0%, #041a2b 50%, #031320 100% ) !important; border: 1px solid rgba(0,231,195,.18) !important; box-shadow: 0 28px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.025) !important; } /* CTA headline */ .final-cta h2, .cta-panel h2, .cta-section h2, .cta-card h2, .contact-card h2 { color: #f7fbff !important; } /* Accent words only */ .final-cta h2 span, .cta-panel h2 span, .cta-section h2 span, .cta-card h2 span, .contact-card h2 span { background: linear-gradient( 100deg, #62f8e4, #00e7c3 55%, #19cde8 ) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } .final-cta p, .cta-panel p, .cta-section p, .cta-card p, .contact-card p { color: #8fa5b4 !important; } /* ========================================================= BUTTON BALANCE ========================================================= */ .button-primary, .btn-primary { background: linear-gradient( 135deg, #50f5df 0%, #00e7c3 52%, #16bed7 100% ) !important; color: #001a18 !important; box-shadow: 0 12px 30px rgba(0,231,195,.16) !important; } .button-ghost, .btn-ghost, .button-secondary { background: rgba(5,25,40,.68) !important; color: #f1f8fb !important; border-color: rgba(97,154,178,.24) !important; } /* ========================================================= TEXT CONTRAST ========================================================= */ p { color: #8da2b2; } .section h2 { color: #f7fbff; } /* Accent text only — don't flood whole sections */ .section h2 span { background: linear-gradient( 110deg, #62f8e4, #00e7c3 52%, #19cde8 ) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } /* ========================================================= END SARATECH BRAND BALANCE ========================================================= */ /* ========================================================= SARATECH ENGINE CENTER FIX Only fix the bright center engine box ========================================================= */ .engine-card, .intelligence-engine, .engine-panel, .workflow-engine, .intelligence-core, .ai-engine, [class*="engine-card"], [class*="intelligence-engine"] { background: radial-gradient( circle at 50% 45%, rgba(0,231,195,.10) 0%, rgba(0,231,195,.04) 18%, transparent 42% ), linear-gradient( 145deg, rgba(7,42,58,.96) 0%, rgba(4,24,37,.98) 52%, rgba(3,16,27,.99) 100% ) !important; border: 1px solid rgba(0,231,195,.18) !important; box-shadow: 0 24px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.03), 0 0 30px rgba(0,231,195,.05) !important; } /* text inside the center box */ .engine-card h3, .engine-card strong, .engine-card .title, .intelligence-engine h3, .intelligence-engine strong, .engine-panel h3, .engine-panel strong { color: #f7fbff !important; } .engine-card p, .engine-card small, .intelligence-engine p, .intelligence-engine small, .engine-panel p, .engine-panel small { color: #9bb0be !important; } /* chips/buttons inside center box */ .engine-card .chip, .engine-card .pill, .engine-card .tag, .engine-card button, .intelligence-engine .chip, .intelligence-engine .pill, .intelligence-engine .tag, .engine-panel .chip, .engine-panel .pill, .engine-panel .tag { background: rgba(0,231,195,.05) !important; border: 1px solid rgba(0,231,195,.12) !important; color: #62f8e4 !important; } /* center glowing dot */ .engine-card .dot, .engine-card .pulse-dot, .intelligence-engine .dot, .intelligence-engine .pulse-dot, .engine-panel .dot, .engine-panel .pulse-dot { background: #00e7c3 !important; box-shadow: 0 0 18px rgba(0,231,195,.55) !important; } /* circles inside the panel */ .engine-card .ring, .engine-card .circle, .intelligence-engine .ring, .intelligence-engine .circle, .engine-panel .ring, .engine-panel .circle { border-color: rgba(0,231,195,.08) !important; } /* ========================================================= END ENGINE CENTER FIX ========================================================= */ /* ========================================================= SARATECH ENGINE + AI MARQUEE FINAL ========================================================= */ /* AI Automation ✦ Workforce Intelligence... */ .st-ai-marquee-fix, .st-ai-marquee-fix * { color: #ffffff !important; text-shadow: 0 0 8px rgba(255,255,255,.28), 0 0 18px rgba(98,248,228,.18) !important; } .st-ai-marquee-fix { font-weight: 600 !important; letter-spacing: .04em; } /* Make separators glow slightly more */ .st-ai-marquee-fix .separator, .st-ai-marquee-fix i, .st-ai-marquee-fix span { color: #ffffff !important; } /* ========================================================= SARATECH INTELLIGENCE ENGINE Same visual language as integration map ========================================================= */ .st-engine-panel-fix { position: relative !important; overflow: hidden !important; background: radial-gradient( circle at 50% 42%, rgba(0,231,195,.10) 0%, rgba(0,231,195,.035) 25%, transparent 52% ), linear-gradient( 145deg, #07283b 0%, #051c2c 47%, #03131f 100% ) !important; border: 1px solid rgba(0,231,195,.28) !important; box-shadow: 0 28px 70px rgba(0,0,0,.36), 0 0 0 1px rgba(0,231,195,.025), 0 0 42px rgba(0,231,195,.055), inset 0 1px 0 rgba(255,255,255,.035) !important; } /* subtle grid like attached integration design */ .st-engine-panel-fix::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background-image: linear-gradient(rgba(36,205,208,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(36,205,208,.035) 1px, transparent 1px) !important; background-size: 34px 34px !important; mask-image: radial-gradient(circle at center, black 10%, transparent 78%) !important; opacity: .70 !important; } /* dark teal light at center */ .st-engine-panel-fix::after { content: "" !important; position: absolute !important; width: 240px !important; height: 240px !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; border-radius: 50% !important; background: radial-gradient( circle, rgba(0,231,195,.10), rgba(0,231,195,.025) 40%, transparent 70% ) !important; filter: blur(8px) !important; pointer-events: none !important; } /* keep content above effects */ .st-engine-panel-fix > * { position: relative; z-index: 2; } /* engine main heading */ .st-engine-panel-fix strong, .st-engine-panel-fix h3, .st-engine-panel-fix h4 { color: #f8fcff !important; } /* small SaraTech Intelligence Engine text */ .st-engine-panel-fix small, .st-engine-panel-fix p, .st-engine-panel-fix .label, .st-engine-panel-fix .overline { color: #8da6b5 !important; } /* icon */ .st-engine-panel-fix svg, .st-engine-panel-fix .icon, .st-engine-panel-fix [class*="icon"] { color: #00e7c3 !important; stroke: #00e7c3 !important; filter: drop-shadow(0 0 9px rgba(0,231,195,.25)) !important; } /* center pulse */ .st-engine-panel-fix [class*="pulse"] span, .st-engine-panel-fix [class*="pulse"] i, .st-engine-panel-fix .dot { border-color: rgba(0,231,195,.10) !important; } .st-engine-panel-fix [class*="pulse"] span, .st-engine-panel-fix .dot { background: #00e7c3 !important; box-shadow: 0 0 0 8px rgba(0,231,195,.045), 0 0 26px rgba(0,231,195,.38) !important; } /* Validate / Analyze / Route / Recommend */ .st-engine-panel-fix button, .st-engine-panel-fix .chip, .st-engine-panel-fix .tag, .st-engine-panel-fix .pill { background: rgba(4,34,47,.78) !important; color: #75f9e5 !important; border: 1px solid rgba(0,231,195,.16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important; } /* absolutely prevent solid teal inherited background */ .st-engine-panel-fix { background-color: #041725 !important; } /* ========================================================= END ========================================================= */ /* ========================================================= SARATECH FLOW ANIMATION ========================================================= */ .integration-cloud { position: relative !important; overflow: hidden !important; } .st-flow-dot { position: absolute !important; width: 12px !important; height: 12px !important; border-radius: 50% !important; pointer-events: none !important; z-index: 30 !important; background: #ffffff !important; box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 0 10px rgba(255,255,255,.95), 0 0 22px rgba(98,248,228,.95), 0 0 42px rgba(0,231,195,.75) !important; transform: translate(-50%, -50%); transition: left 1.15s cubic-bezier(.22,.61,.36,1), top 1.15s cubic-bezier(.22,.61,.36,1), opacity .28s ease !important; opacity: 0; } .st-flow-dot.is-visible { opacity: 1; } .st-flow-node-active { border-color: rgba(255,255,255,.22) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 0 24px rgba(98,248,228,.12), 0 0 50px rgba(0,231,195,.10), inset 0 1px 0 rgba(255,255,255,.03) !important; } .node-center.st-flow-core-pulse { animation: stCorePulse 1.8s ease-in-out; } .node-center.st-flow-core-pulse::after { content: "" !important; position: absolute !important; inset: -14px !important; border-radius: 28px !important; border: 1px solid rgba(98,248,228,.22) !important; box-shadow: 0 0 22px rgba(98,248,228,.12), 0 0 50px rgba(0,231,195,.14) !important; animation: stCoreRing 1.8s ease-out; pointer-events: none !important; } @keyframes stCorePulse { 0% { box-shadow: 0 0 0 1px rgba(0,231,195,.02), 0 22px 50px rgba(0,0,0,.30), 0 0 24px rgba(0,231,195,.05); transform: scale(1); } 35% { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 22px 50px rgba(0,0,0,.34), 0 0 34px rgba(98,248,228,.18), 0 0 70px rgba(0,231,195,.18); transform: scale(1.02); } 100% { box-shadow: 0 0 0 1px rgba(0,231,195,.03), 0 22px 50px rgba(0,0,0,.30), 0 0 28px rgba(0,231,195,.08); transform: scale(1); } } @keyframes stCoreRing { 0% { opacity: .0; transform: scale(.88); } 25% { opacity: .95; } 100% { opacity: 0; transform: scale(1.16); } } /* optional slight emphasis on connection lines when animation exists */ .integration-svg path { filter: drop-shadow(0 0 3px rgba(0,231,195,.12)); } /* ========================================================= END SARATECH FLOW ANIMATION ========================================================= */ /* ========================================================= SARATECH PATH FOLLOWING DOT ========================================================= */ /* Hide previous card-to-card dot */ .st-flow-dot { display: none !important; } /* New dot that travels exactly over SVG lines */ .st-line-flow-dot { position: absolute !important; width: 10px !important; height: 10px !important; left: 0; top: 0; border-radius: 50% !important; background: #ffffff !important; pointer-events: none !important; z-index: 50 !important; opacity: 0; transform: translate(-50%, -50%); box-shadow: 0 0 4px #ffffff, 0 0 10px rgba(255,255,255,.95), 0 0 18px rgba(98,248,228,.95), 0 0 32px rgba(0,231,195,.85), 0 0 52px rgba(0,231,195,.40) !important; will-change: transform,left,top; } .st-line-flow-dot.visible { opacity: 1; } /* Make the active line slightly brighter */ .integration-svg path.st-active-path { stroke: rgba(98,248,228,.48) !important; filter: drop-shadow(0 0 3px rgba(98,248,228,.40)) drop-shadow(0 0 7px rgba(0,231,195,.20)) !important; } /* Destination node subtle pulse */ .integration-node.st-arrival-glow { border-color: rgba(98,248,228,.40) !important; box-shadow: 0 0 0 1px rgba(98,248,228,.04), 0 0 20px rgba(98,248,228,.10), 0 0 38px rgba(0,231,195,.08), inset 0 1px 0 rgba(255,255,255,.03) !important; } /* ========================================================= END PATH FOLLOWING DOT ========================================================= */ /* ========================================================= SARATECH FINAL FLOW POLISH ========================================================= */ /* Never animate / scale the SaraTech card itself */ .node-center.st-flow-core-pulse { animation: none !important; transform: translate(-50%, -50%) !important; } /* Remove old pulse pseudo element completely */ .node-center.st-flow-core-pulse::after { display: none !important; content: none !important; } /* Dedicated halo around SaraTech */ .st-core-halo { position: absolute !important; width: 220px; height: 190px; left: 0; top: 0; border-radius: 28px; pointer-events: none !important; z-index: 15 !important; opacity: 0; transform: translate(-50%, -50%) scale(.88); border: 1px solid rgba(98,248,228,.0); box-shadow: 0 0 0 rgba(0,231,195,0); will-change: transform, opacity, box-shadow; } .st-core-halo.run { animation: stProfessionalCoreHalo 1.9s cubic-bezier(.16,.84,.32,1) forwards; } @keyframes stProfessionalCoreHalo { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.86); border-color: rgba(98,248,228,0); box-shadow: 0 0 0 rgba(0,231,195,0); } 18% { opacity: .95; border-color: rgba(98,248,228,.38); box-shadow: 0 0 12px rgba(255,255,255,.08), 0 0 28px rgba(98,248,228,.14), 0 0 55px rgba(0,231,195,.13); } 52% { opacity: .62; transform: translate(-50%, -50%) scale(1.08); border-color: rgba(0,231,195,.22); box-shadow: 0 0 20px rgba(98,248,228,.09), 0 0 48px rgba(0,231,195,.12); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); border-color: rgba(0,231,195,0); box-shadow: 0 0 65px rgba(0,231,195,0); } } /* Moving dot - softer / premium */ .st-line-flow-dot { width: 8px !important; height: 8px !important; background: #ffffff !important; box-shadow: 0 0 5px #ffffff, 0 0 10px rgba(255,255,255,.75), 0 0 18px rgba(98,248,228,.78), 0 0 30px rgba(0,231,195,.52) !important; } /* Active path should glow subtly only */ .integration-svg path.st-active-path { stroke: rgba(98,248,228,.42) !important; filter: drop-shadow( 0 0 2px rgba(98,248,228,.30) ) !important; } /* Destination should not flash aggressively */ .integration-node.st-arrival-glow { border-color: rgba(98,248,228,.30) !important; box-shadow: 0 0 18px rgba(0,231,195,.07), inset 0 1px 0 rgba(255,255,255,.025) !important; } /* ========================================================= END ========================================================= */ /* ========================================================= SARATECH EDGE-TO-EDGE DATA FLOW V3 ========================================================= */ /* old dots */ .st-flow-dot, .st-line-flow-dot { display: none !important; } /* new packet */ .st-edge-flow-dot { position: absolute !important; left: 0 !important; top: 0 !important; width: 9px !important; height: 9px !important; border-radius: 50% !important; background: #ffffff !important; pointer-events: none !important; z-index: 60 !important; opacity: 0; transform: translate3d(-100px,-100px,0); will-change: transform, opacity; box-shadow: 0 0 4px #ffffff, 0 0 9px rgba(255,255,255,.90), 0 0 17px rgba(98,248,228,.82), 0 0 28px rgba(0,231,195,.58) !important; } .st-edge-flow-dot.visible { opacity: 1; } /* active connection */ .integration-svg path.st-edge-active-path { stroke: rgba(98,248,228,.42) !important; filter: drop-shadow( 0 0 3px rgba(0,231,195,.22) ) !important; } /* very subtle destination response */ .integration-node.st-edge-arrival { border-color: rgba(98,248,228,.33) !important; box-shadow: 0 0 18px rgba(0,231,195,.07), inset 0 1px 0 rgba(255,255,255,.03) !important; transition: border-color .25s ease, box-shadow .25s ease !important; } /* ========================================================= END EDGE FLOW V3 ========================================================= */ /* SARATECH FOOTER LOGO FINAL */ .saratech-footer-logo, footer .footer-logo, footer .brand-logo, footer img[src*="saratech-logo"] { width: 220px !important; height: auto !important; max-height: 64px !important; object-fit: contain !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; mix-blend-mode: screen; filter: drop-shadow( 0 0 14px rgba(0,231,195,.10) ) !important; } @media (max-width: 700px) { .saratech-footer-logo, footer img[src*="saratech-logo"] { width: 180px !important; max-height: 54px !important; } } /* SARATECH FOOTER LOGO FINAL */ .footer .footer-logo-link { display: inline-flex !important; align-items: center !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .footer .footer-logo-img { display: block !important; width: 220px !important; height: auto !important; max-height: 64px !important; object-fit: contain !important; object-position: left center !important; background: transparent !important; border: none !important; box-shadow: none !important; filter: drop-shadow( 0 0 14px rgba(0,231,195,.12) ) !important; } html[dir="rtl"] .footer .footer-logo-img { object-position: right center !important; } @media (max-width:700px) { .footer .footer-logo-img { width: 180px !important; max-height: 54px !important; } }