/* Original Setlerz presentation, layered over the CMS templates. */ .modern-site { --ink:#141230; --accent:#6C5CE0; --soft:#ECE8FC; } /* Solid edge: a translucent rule let headings ghost through the header boundary. */ .modern-site .site-header { border-bottom-color:#E2DEF2; } .modern-site .site-header > .wrap { min-height:88px; } .modern-site .button { border-radius:12px; box-shadow:0 8px 24px #6c5ce02b; transition:transform .25s,background .25s; } .modern-site .button:hover { transform:translateY(-3px); } .modern-site .section-heading { font-weight:500; letter-spacing:-.045em; line-height:1.12; } .home-hero { background:radial-gradient(ellipse at 82% 36%,#d1c5ed 0,transparent 55%),#e4def2; } .home-hero > .wrap { padding-top:100px; padding-bottom:110px; grid-template-columns:1.15fr 1fr; align-items:center; gap:30px; } .home-hero h1 { font-size:clamp(44px,4.75vw,70px); max-width:710px; line-height:1.08; font-weight:500; color:#141230; } /* 12px floor for readable copy. The hero badge is DB-authored, so the floor is applied here rather than by editing content. Illustration internals are deliberately exempt — see the note at the foot of this file. */ .home-hero [class~="border-white/20"] { position:relative; overflow:hidden; font-size:12px; color:#6c5ce0 !important; border-color:rgba(108,92,224,0.3) !important; background:rgba(108,92,224,0.08) !important; transition:transform .3s ease,box-shadow .3s ease; } .home-hero [class~="border-white/20"]:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(108,92,224,0.22); } .home-hero [class~="border-white/20"] > span { position:relative; display:inline-block; } .home-hero [class~="border-white/20"] > span::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid #6c5ce0; animation:dot-ping 2s cubic-bezier(0,0,.2,1) infinite; } .home-hero [class~="border-white/30"] { color:#6c5ce0 !important; border-color:rgba(108,92,224,0.3) !important; transition:all .25s cubic-bezier(.22,1,.36,1) !important; } .home-hero [class~="border-white/30"]:hover { background:rgba(108,92,224,0.08) !important; transform:translateY(-2px); border-color:#6c5ce0 !important; box-shadow:0 8px 24px rgba(108,92,224,0.15); } .home-hero a span[aria-hidden="true"], .button span[aria-hidden="true"] { display:inline-block; transition:transform .25s cubic-bezier(.22,1,.36,1); } .home-hero a:hover span[aria-hidden="true"], .button:hover span[aria-hidden="true"] { transform:translate(3px,-3px); } .home-hero h1 span { background:linear-gradient(110deg,#6c5ce0 0%,#9987f2 35%,#d8cefc 50%,#9987f2 65%,#6c5ce0 100%); background-size:200% auto; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:hero-gradient-shimmer 8s linear infinite; } .home-hero p { font-size:16px; line-height:1.9; color:#5a5570; } .home-hero > .border-t { position:relative; z-index:1; background:rgba(108,92,224,0.04); border-color:#e4e1f5 !important; } .home-hero > .border-t, .home-hero > .border-t * { color:#5a5570 !important; } /* AppExchange trust link — inherits trust bar sizing/colour, adds subtle star gold accent */ a.trust-appex-link { color:#5a5570 !important; text-decoration:none; display:inline-flex; align-items:center; gap:4px; border-radius:4px; padding:1px 3px; transition:color .2s ease, background .2s ease; } a.trust-appex-link:hover { color:#6C5CE0 !important; background:rgba(108,92,224,0.08); } /* About page AppExchange verification inline link */ a.appex-verify-link { color:#6C5CE0; font-weight:600; text-decoration:underline; text-decoration-color:rgba(108,92,224,0.35); text-underline-offset:3px; transition:text-decoration-color .2s ease, color .2s ease; } a.appex-verify-link:hover { color:#5341C4; text-decoration-color:#5341C4; } .platform-scene { position:relative; height:475px; width:100%; min-width:0; perspective:1000px; } .platform-scene::before { content:''; position:absolute; top:12%; left:8%; width:84%; height:76%; border-radius:50%; background:radial-gradient(circle,rgba(108,92,224,0.22) 0%,rgba(181,160,251,0.08) 50%,transparent 70%); filter:blur(45px); z-index:0; pointer-events:none; animation:ambient-pulse 7s ease-in-out infinite alternate; } .platform-orbit { position:absolute; border:1px solid #c4b8f040; border-radius:50%; left:4%; top:3%; width:96%; aspect-ratio:1; } .platform-orbit-one { animation:orbit-spin 55s linear infinite; } .platform-orbit-two { inset:13% auto auto 14%; width:76%; border-style:dashed; animation:orbit-spin 90s linear infinite reverse; } .platform-orbit-one::before { content:''; position:absolute; top:20%; left:9%; width:9px; height:9px; background:#6c5ce0; border-radius:50%; box-shadow:0 0 25px #6c5ce080,0 0 10px #c4b8f0; } .platform-console { position:absolute; top:90px; left:4%; width:91%; border:1px solid #d6d0ef; background:linear-gradient(130deg,#ffffff,#f7f4ff); border-radius:18px; transform:rotateY(calc(-12deg + var(--mouse-rot-y,0deg))) rotateX(calc(7deg + var(--mouse-rot-x,0deg))) rotateZ(-5deg); box-shadow:22px 40px 70px rgba(20,18,48,0.12),inset 0 1px 0 #ffffff; overflow:hidden; animation:console-float 8s ease-in-out infinite; will-change:transform; } .console-top { display:flex; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid #e4e1f5; font-size:9px; letter-spacing:.15em; color:#8a7cb0; } .console-brand { font-size:25px; font-weight:800; letter-spacing:-2px; color:#141230; } .console-brand span { color:#6c5ce0; } .console-top i { margin-left:auto; width:8px; height:8px; background:#10b981; border-radius:50%; position:relative; box-shadow:0 0 10px #10b981aa; } .console-top i::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid #10b981; animation:beacon-ping 2s cubic-bezier(0,0,.2,1) infinite; } .console-layout { display:flex; } .console-rail { width:50px; padding:20px 12px; display:grid; align-content:start; gap:22px; text-align:center; border-right:1px solid #e4e1f5; color:#8a7cb0; } .console-rail b { color:#6c5ce0; } .console-main { flex:1; min-width:0; padding:24px; } .console-label { display:flex; justify-content:space-between; color:#8a7cb0; font-size:11px; } .console-label span { color:#6c5ce0; } .console-cloud { font-size:24px; color:#141230; margin:12px 0 4px; letter-spacing:-.04em; } .console-cloud > span { display:block; font-size:10px; letter-spacing:0; color:#8a7cb0; margin-top:4px; } .console-chart { display:flex; align-items:end; gap:10px; height:92px; padding-top:8px; border-bottom:1px solid #e4e1f5; background:repeating-linear-gradient(to top,transparent,transparent 27px,#6c5ce008 28px); } .console-chart > span { flex:1; height:30%; background:linear-gradient(#6c5ce0,#c4b8f0); border-radius:4px 4px 0 0; transform-origin:bottom; animation:chart-grow 1.4s cubic-bezier(.2,.7,.2,1) both,chart-wave 4s ease-in-out infinite 1.4s alternate; } .console-chart span:nth-child(2n) { height:47%; animation-delay:.15s,1.6s; } .console-chart span:nth-child(3n) { height:65%; animation-delay:.25s,1.9s; } .console-chart span:nth-child(4n) { height:80%; animation-delay:.35s,2.2s; } .console-chart span:last-child { height:96%; animation-delay:.5s,2.5s; } .console-bottom { display:flex; gap:12px; margin-top:18px; font-size:8px; color:#5a5570; } .console-bottom span { padding:7px 9px; border:1px solid #e4e1f5; border-radius:6px; transition:border-color .2s,background .2s; } .console-bottom span:hover { border-color:#6c5ce0; background:#f7f4ff; } .platform-chip { position:absolute; z-index:2; display:flex; align-items:center; gap:12px; background:#f7f6fc; color:#141230; padding:16px 20px; border:1px solid white; border-radius:14px; box-shadow:0 15px 50px rgba(20,18,48,0.12); font-size:12px; font-weight:600; overflow:hidden; transition:transform .3s ease,box-shadow .3s ease; } .platform-chip::after { content:''; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.65),transparent); transform:skewX(-20deg); animation:chip-shimmer 6s ease-in-out infinite; pointer-events:none; } .platform-chip small { display:block; font-size:12px; font-weight:400; color:#5a5570; margin-top:4px; } .chip-ai { right:-2%; top:40px; animation:float-chip-one 6s ease-in-out infinite; } .chip-delivery { left:0; bottom:25px; animation:float-chip-two 7s ease-in-out infinite -2.5s; } .chip-symbol { display:grid; place-items:center; border-radius:10px; background:#ECE8FC; color:#6C5CE0; width:36px; height:36px; font-size:23px; transition:transform .3s ease; } .chip-ai .chip-symbol { animation:sparkle-rotate 6s ease-in-out infinite; } .chip-arrow { color:#6c5ce0; margin-left:12px; font-size:22px; transition:transform .25s ease; } .platform-chip:hover { transform:translateY(-4px); box-shadow:0 22px 60px rgba(108,92,224,0.2); } .platform-chip:hover .chip-arrow { transform:translate(3px,-3px); } .platform-caption { position:absolute; right:6%; bottom:14px; color:#c3b6e1; font-size:8px; letter-spacing:.2em; display:flex; gap:8px; align-items:center; } .platform-caption > span { width:5px; height:5px; background:#a893fc; border-radius:50%; animation:beacon-ping 3s infinite; } @keyframes chart-grow { from{transform:scaleY(.05);opacity:.1;} to{transform:scaleY(1);opacity:1;} } .home-proof { position:relative;z-index:3;max-width:1160px;margin:-22px auto 0;padding:40px 30px;background:white;border:1px solid #E2DEF2;border-radius:18px;box-shadow:0 15px 60px #14123008;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease; } .home-proof::after { content:'';position:absolute;bottom:0;left:0;right:0;height:2.5px;background:linear-gradient(90deg,transparent,#6c5ce0,#c4b8f0,#6c5ce0,transparent);background-size:200% 100%;animation:border-beam 4s linear infinite; } .home-proof>div:first-child{border:0;} .home-proof>div:not(.home-ecosystem-strip){transition:transform .3s cubic-bezier(.22,1,.36,1),background .3s ease;border-radius:12px;padding:8px 12px;} .home-proof>div:not(.home-ecosystem-strip):hover{transform:translateY(-3px);background:rgba(108,92,224,0.04);} .home-proof p:first-child{font-size:42px;color:#6C5CE0;display:inline-block;transition:transform .3s ease;} .home-proof>div:not(.home-ecosystem-strip):hover p:first-child{transform:scale(1.06);} .home-proof p:last-child{font-size:12px;} .home-audiences { background:#fff; padding-top:115px; padding-bottom:100px; } .home-audiences .grid>a{border-radius:22px;padding:40px;position:relative;background:#F7F6FC;overflow:hidden;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1),border-color .4s ease !important;} .home-audiences .grid>a::before{content:'';position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent);transform:skewX(-20deg);transition:left .75s ease;pointer-events:none;z-index:2;} .home-audiences .grid>a:hover::before{left:160%;} .home-audiences .grid>a::after{content:'';position:absolute;width:200px;height:200px;right:-100px;top:-100px;border:1px solid #6C5CE020;border-radius:50%;box-shadow:0 0 0 32px #6c5ce005,0 0 0 64px #6c5ce005;pointer-events:none;animation:ring-pulse 6s ease-in-out infinite alternate;} .home-audiences .grid>a:hover{transform:translateY(-8px) scale(1.01) !important;box-shadow:0 24px 48px rgba(108,92,224,0.12) !important;} .home-audiences .grid>a:last-child{background:linear-gradient(135deg,#e4def2,#d1c5ed);border-color:#d6d0ef;} .home-audiences .grid>a:last-child h3{color:#141230;} .home-audiences .grid>a:last-child p{color:#5a5570;} .home-audiences .grid>a:last-child>span:last-child{color:#6c5ce0;} .home-services { background:#F7F6FC;border-radius:32px;padding-top:65px;padding-bottom:65px;margin-bottom:100px; } .home-services .grid>a{background:white;border-radius:18px;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1),border-color .4s ease !important;} .home-services .grid>a h3{font-size:27px;font-weight:500;} .home-services .grid>a>div{margin-bottom:36px;} .home-services .grid>a:hover{border-color:#6c5ce0;transform:translateY(-6px) !important;box-shadow:0 16px 36px rgba(108,92,224,0.08) !important;} .home-industries{background:radial-gradient(ellipse at right,#d1c5ed,transparent 60%),#e4def2;position:relative;padding-top:85px;padding-bottom:85px;overflow:hidden;} .home-industries::before{content:'';position:absolute;inset:0;background-image:linear-gradient(#6c5ce008 1px,transparent 1px),linear-gradient(90deg,#6c5ce008 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 80% at 80% 30%,black,transparent 75%);mask-image:radial-gradient(70% 80% at 80% 30%,black,transparent 75%);pointer-events:none;} .home-industries::after{content:'';position:absolute;right:-120px;bottom:-190px;width:440px;height:440px;border:1px solid #6c5ce015;border-radius:50%;box-shadow:0 0 0 44px #6c5ce008,0 0 0 90px #6c5ce005;pointer-events:none;animation:ring-pulse 8s ease-in-out infinite alternate;} .home-industries h2{font-size:clamp(34px,4vw,52px);letter-spacing:-.04em;position:relative;z-index:1;color:#141230;} .home-industries .wrap{position:relative;z-index:1;} .home-industries .wrap>p{position:relative;z-index:1;color:#5a5570;} .industry-grid{display:grid!important;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:40px;} .industry-card{--accent:#6c5ce0;display:grid!important;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:20px;position:relative;height:100%;min-height:132px;border-radius:18px!important;background:#fff;border:1px solid #e4e1f5;padding:26px 28px;overflow:hidden;transition:transform .4s cubic-bezier(.22,1,.36,1),background .4s,border-color .4s,box-shadow .4s;} .industry-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;background:linear-gradient(90deg,transparent,var(--accent),#fff,var(--accent),transparent);background-size:200% 100%;transform:scaleX(0);transform-origin:left;transition:transform .45s ease;} .industry-card:hover{background:#f7f4ff;border-color:#c4b8f0;transform:translateY(-6px) scale(1.008);box-shadow:0 16px 36px rgba(108,92,224,0.14);} .industry-card:hover::before{transform:scaleX(1);animation:border-beam 2s linear infinite;} .industry-card:hover .industry-num{color:#6c5ce0;font-weight:700;} .industry-card:nth-child(2){--accent:#9b8cf0;} .industry-card:nth-child(3){--accent:#b8a5ff;} .industry-card:nth-child(4){--accent:#7b6be8;} .industry-num{font-size:12px;color:#c4b8f0;font-variant-numeric:tabular-nums;align-self:start;transition:color .3s ease;} .industry-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#ece8fc;border:1px solid #e4e1f5;color:#6c5ce0;transition:transform .4s cubic-bezier(.22,1,.36,1),background .4s,color .4s,box-shadow .4s;} .industry-card:hover .industry-icon{background:#6c5ce0;color:#fff;border-color:transparent;transform:scale(1.1) rotate(-4deg);box-shadow:0 8px 22px rgba(108,92,224,0.28);} .industry-name{font-size:17px;font-weight:600;color:#141230;letter-spacing:-.01em;} .industry-chip{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6c5ce0;border:1px solid #d6d0ef;background:#ece8fc;border-radius:99px;padding:5px 11px;justify-self:end;} .industry-arrow{font-size:18px;color:#6c5ce0;justify-self:end;transition:transform .4s cubic-bezier(.22,1,.36,1);} .industry-card:hover .industry-arrow{transform:translate(4px,-4px);color:#4a3cb0;} .industry-card:has(.industry-chip) .industry-arrow{grid-column:5;} @media(max-width:767px){.home-industries{padding-top:60px;padding-bottom:60px;}.industry-grid{grid-template-columns:1fr;gap:14px;}.industry-card{grid-template-columns:auto 1fr auto;gap:14px;padding:20px;border-radius:16px!important;min-height:0;}.industry-icon{width:44px;height:44px;}.industry-num{display:none;}.industry-chip{display:none;}.industry-card:has(.industry-chip) .industry-arrow{grid-column:auto;}} .home-geography { padding-top:80px;padding-bottom:80px; } .geo-flex{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:32px;}.geo-copy{min-width:0;}.geo-copy .section-heading{font-size:clamp(32px,3.6vw,50px);margin-top:20px;margin-bottom:30px;}.geo-item>span:first-child:not(.geo-code){display:none;}.geo-country-label{fill:#141230;font-size:12px;font-weight:700;letter-spacing:.08em;} @media(min-width:768px) and (max-width:1100px){.geo-flex{gap:20px;}.geo-list{grid-template-columns:1fr!important;}} .home-geography .section-heading{max-width:700px;} .geo-list{grid-template-columns:repeat(2,1fr);gap:0 34px;} .geo-item{position:relative;display:flex;align-items:center;gap:14px;border:0!important;padding:20px 0 20px 26px!important;font-size:16px;color:#141230;font-weight:500;transition:transform .28s cubic-bezier(.22,1,.36,1);cursor:pointer;} .geo-item:hover{transform:translateX(8px);color:#6c5ce0;} .geo-item::before{content:'';position:absolute;left:0;top:calc(50% - 7px);width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b5a5ff,#6C5CE0);box-shadow:0 0 0 5px #6c5ce021;animation:geo-dot-breathe 2.8s ease-in-out infinite;} .geo-item::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,#E2DEF2,transparent);} .geo-code{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.12em;color:#6C5CE0;background:#ECE8FC;border-radius:99px;padding:5px 10px;white-space:nowrap;transition:all .28s ease;} .geo-item:hover .geo-code{background:#6c5ce0;color:#fff;transform:scale(1.08);box-shadow:0 4px 14px rgba(108,92,224,0.35);} .geo-globe{position:relative;display:grid;place-items:center;min-height:420px;} .geo-globe::before{content:'';position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(108,92,224,0.18) 0%,rgba(108,92,224,0.04) 55%,transparent 70%);filter:blur(35px);z-index:0;pointer-events:none;animation:ambient-pulse 6s ease-in-out infinite alternate;} .globe-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 20px 35px #14123018);transform:translateZ(0);will-change:transform;} .geo-orbit{transform-origin:100px 100px;animation:orbit-spin 60s linear infinite;} .geo-marker .marker-dot{fill:#cabdff;} .geo-marker .marker-pulse{fill:#8f7bff;opacity:.28;transform-box:fill-box;transform-origin:center;animation:marker-ping 2.6s ease-out infinite;} .geo-marker rect{transition:fill .3s,stroke .3s,transform .3s;cursor:pointer;} .geo-marker:hover rect{fill:#6c5ce0 !important;stroke:#6c5ce0 !important;} .geo-marker:hover text{fill:#ffffff !important;} .geo-label{font-size:10px;font-weight:700;letter-spacing:.08em;fill:#d9d0ff;} .geo-hq rect{fill:#6C5CE0;} .geo-hq text{font-size:8px;font-weight:700;fill:white;text-anchor:middle;letter-spacing:.06em;} @keyframes marker-ping{0%{transform:scale(.5);opacity:.45;}70%{transform:scale(1.9);opacity:0;}100%{transform:scale(1.9);opacity:0;}} /* ── Portfolio Section ── */ .home-portfolio { background:#F7F6FC; padding-top:100px; padding-bottom:100px; } .home-portfolio > .wrap { display:grid !important; grid-template-columns:repeat(3,1fr); gap:28px; } /* Make heading/subheading span all 3 columns */ .home-portfolio > .wrap > p, .home-portfolio > .wrap > h2 { grid-column:1 / -1; } /* Each card: vertical layout (art on top, text below) */ .home-portfolio .project-card { display:flex !important; flex-direction:column; grid-template-columns:1fr !important; border-radius:20px; margin-top:0; border:1px solid #e4e1f5; overflow:hidden; box-shadow:0 4px 20px rgba(20,18,48,0.05); transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1); position:relative; } /* Hover animation */ .home-portfolio .project-card:hover { transform:translateY(-8px); box-shadow:0 20px 50px rgba(108,92,224,0.15), 0 8px 24px rgba(20,18,48,0.08); } /* Art panel on top — lighter modern look */ .project-card .project-art { isolation:isolate; min-height:220px !important; order:-1; background:linear-gradient(135deg,#ece8fc 0%,#d8d0f8 40%,#c4b8f0 100%) !important; } .project-card .project-art > span:first-child { z-index:2; color:#6c5ce0 !important; } .project-card .project-art > span:nth-child(2) { font-size:120px !important; top:auto; bottom:-15px; right:8px; z-index:1; color:rgba(108,92,224,0.12) !important; opacity:1 !important; transition:transform .5s cubic-bezier(.22,1,.36,1),color .5s; } .project-card:hover .project-art > span:nth-child(2) { transform:translateY(-8px) scale(1.08); color:rgba(108,92,224,0.22) !important; } .project-card .project-art > div.relative { z-index:2; max-width:240px; } .project-card .project-art > div.relative p { font-size:20px; color:#2d2554 !important; } .project-card .project-art > div.relative .h-px, .project-card .project-art > div.relative div[class*="h-px"] { background:#6c5ce0 !important; } /* Sculpture shapes lighter with continuous floating layers */ .project-sculpture { position:absolute; top:30px; left:22%; width:65%; height:160px; transform:rotate(-18deg); z-index:-1; } .project-sculpture i { position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid rgba(108,92,224,0.2); background:linear-gradient(120deg,rgba(181,160,251,0.14),rgba(108,92,224,0.03)); border-radius:18px; transform:translate(0,0) rotateX(45deg); transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .5s,box-shadow .5s; } .project-sculpture i:nth-child(1) { animation:sculpture-drift-1 7s ease-in-out infinite alternate; } .project-sculpture i:nth-child(2) { transform:translate(6px,14px) rotateX(45deg); animation:sculpture-drift-2 7s ease-in-out infinite alternate -1.4s; } .project-sculpture i:nth-child(3) { transform:translate(12px,28px) rotateX(45deg); animation:sculpture-drift-3 7s ease-in-out infinite alternate -2.8s; } .project-sculpture i:nth-child(4) { transform:translate(18px,42px) rotateX(45deg); animation:sculpture-drift-4 7s ease-in-out infinite alternate -4.2s; } .project-sculpture i:nth-child(5) { transform:translate(24px,56px) rotateX(45deg); animation:sculpture-drift-5 7s ease-in-out infinite alternate -5.6s; } .project-card:hover .project-sculpture i:nth-child(1) { transform:translate(-8px,-12px) rotateX(48deg) !important; border-color:rgba(108,92,224,0.5); box-shadow:0 8px 25px rgba(108,92,224,0.2); } .project-card:hover .project-sculpture i:nth-child(2) { transform:translate(2px,6px) rotateX(48deg) !important; border-color:rgba(108,92,224,0.4); } .project-card:hover .project-sculpture i:nth-child(3) { transform:translate(12px,24px) rotateX(48deg) !important; border-color:rgba(108,92,224,0.35); } .project-card:hover .project-sculpture i:nth-child(4) { transform:translate(22px,42px) rotateX(48deg) !important; border-color:rgba(108,92,224,0.3); } .project-card:hover .project-sculpture i:nth-child(5) { transform:translate(32px,60px) rotateX(48deg) !important; border-color:rgba(108,92,224,0.25); } .project-1 .project-sculpture i { border-radius:50%; } .project-2 .project-sculpture { transform:rotate(25deg) scale(.8); } .project-2 .project-sculpture i { border-radius:4px; } /* Text panel */ .project-card > div:first-child { padding:28px 28px 32px !important; display:flex; flex-direction:column; flex:1; } .project-card h3 { font-size:22px !important; line-height:1.25; margin-bottom:14px !important; } .project-card > div:first-child > p.text-sm { font-size:13.5px !important; line-height:1.65; } /* Stats row compact */ .project-card > div:first-child > div[class*="border-y"] { font-size:12px !important; padding:12px 0 !important; margin-bottom:16px !important; gap:8px !important; } /* "Read the case study" as a styled button */ .project-card > div:first-child > a { display:inline-flex; align-items:center; gap:6px; align-self:flex-start; padding:10px 22px; border-radius:999px; font-size:13px !important; font-weight:600; background:linear-gradient(135deg,#6c5ce0,#7b6be8); color:#fff !important; text-decoration:none !important; margin-top:auto; transition:transform .2s ease, box-shadow .2s ease; box-shadow:0 4px 14px rgba(108,92,224,0.25); } .project-card > div:first-child > a:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(108,92,224,0.35); } /* Numbered badge on each card */ .project-card::before { content:attr(data-card-num); display:flex; align-items:center; justify-content:center; position:absolute; top:16px; left:16px; z-index:10; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px); font-size:14px; font-weight:700; color:#6c5ce0; box-shadow:0 2px 8px rgba(20,18,48,0.1); } /* Responsive: 2 cols on tablet, 1 on mobile */ @media(max-width:1023px) { .home-portfolio > .wrap { grid-template-columns:repeat(2,1fr); gap:22px; } .project-card .project-art { min-height:200px !important; } } @media(max-width:767px) { .home-portfolio > .wrap { grid-template-columns:1fr; gap:20px; } .home-portfolio { padding-top:65px; padding-bottom:65px; } .project-card > div:first-child { padding:22px 20px 26px !important; } } .home-why {padding-top:100px;padding-bottom:100px;}.home-why blockquote{border-radius:24px;border:1px solid #e2def2;}.home-testimonial{background:#F7F6FC;padding:40px 0 70px;} .home-testimonial .testimonial-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;} .home-testimonial .testimonial-intro h2{font-size:clamp(30px,3.2vw,44px);margin:20px 0 16px;max-width:none;} .home-why{padding-top:100px;padding-bottom:100px;} .home-why blockquote{border-radius:24px;border:1px solid #e2def2;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;} .home-why blockquote:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(108,92,224,0.12);} .home-testimonial{background:#F7F6FC;padding:40px 0 70px;} .home-testimonial .testimonial-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;} .home-testimonial .testimonial-intro h2{font-size:clamp(30px,3.2vw,44px);margin:20px 0 16px;max-width:none;} .home-testimonial .testimonial-intro>p:last-child{color:#5a5570;font-size:15px;} .home-testimonial .testimonial-slider{min-width:0;border:1px solid #e2def2;border-radius:24px;background:radial-gradient(ellipse at 100% 0,#e8e1ff,transparent 70%),#f7f6fc;padding:32px 36px;box-shadow:0 18px 48px #14123007;} .home-testimonial .testimonial-slide+.testimonial-slide{margin-top:28px;padding-top:24px;border-top:1px solid #e2def2;} .home-testimonial .has-slider .testimonial-slide{margin:0;padding:0;border:0;} .home-testimonial .testimonial-slide[hidden]{display:none;} .home-testimonial .testimonial-mark{display:block;color:#6c5ce0;font-family:Georgia,serif;font-size:76px;height:54px;line-height:1;animation:mark-float 6s ease-in-out infinite alternate;} .home-testimonial blockquote>p{font-size:clamp(19px,1.8vw,24px);font-weight:400;line-height:1.65;letter-spacing:-.025em;color:#141230;} .home-testimonial blockquote>footer{margin-top:24px;font-size:14px;font-weight:600;color:#5949c4;} .home-testimonial .testimonial-controls{display:flex;align-items:center;gap:10px;border-top:1px solid #dfd8ef;padding-top:18px;margin-top:26px;} .home-testimonial .testimonial-count{font-size:12px;color:#5a5570;font-variant-numeric:tabular-nums;margin-right:auto;} .home-testimonial .testimonial-dots{display:flex;margin-right:8px;} .home-testimonial .testimonial-dot{display:grid;place-items:center;width:28px;height:44px;} .home-testimonial .testimonial-dot::before{content:'';width:7px;height:7px;background:#c7bfdc;border-radius:20px;transition:width .2s,background .2s;} .home-testimonial .testimonial-dot[aria-pressed=true]::before{width:20px;background:#6c5ce0;} .home-testimonial .testimonial-arrow{width:44px;height:44px;border:1px solid #d8d0eb;border-radius:50%;background:white;color:#141230;font-size:21px;transition:transform .25s cubic-bezier(.22,1,.36,1),background .2s,border-color .2s,color .2s,box-shadow .2s;} .home-testimonial .testimonial-arrow:hover{background:#6c5ce0;border-color:#6c5ce0;color:white;transform:scale(1.1);box-shadow:0 6px 18px rgba(108,92,224,0.3);} .home-testimonial .testimonial-source{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:28px;padding-top:22px;border-top:1px solid #e2def2;} .home-testimonial .testimonial-avatar{flex:0 0 auto;width:60px;height:60px;border-radius:50%;overflow:hidden;background:#ece8fc;box-shadow:0 0 0 1px #e2def2;transition:transform .3s ease;} .home-testimonial .testimonial-slider:hover .testimonial-avatar{transform:scale(1.05);} .home-testimonial .testimonial-avatar img{display:block;width:100%;height:100%;object-fit:cover;} .home-testimonial .testimonial-person{flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:2px;} .home-testimonial .testimonial-name{font-size:15px;font-weight:700;color:#141230;} .home-testimonial .testimonial-role{font-size:13px;color:#5a5570;} .home-testimonial .is-placeholder{color:#6b6680;font-weight:500;text-decoration:underline dashed #b5a9e0;text-underline-offset:4px;} .home-testimonial .testimonial-company{flex:0 0 auto;display:flex;align-items:center;gap:10px;margin-left:auto;} .home-testimonial .testimonial-logo{display:block;width:104px;height:32px;object-fit:contain;} .home-testimonial .testimonial-company-name{font-size:13px;font-weight:700;letter-spacing:.02em;color:#4a4460;} @media(max-width:767px){.home-testimonial{padding:20px 0 50px;}.home-testimonial .testimonial-shell{grid-template-columns:1fr;gap:26px;}.home-testimonial .testimonial-intro h2{max-width:none;}.home-testimonial .testimonial-slider{padding:26px 22px;border-radius:20px;}.home-testimonial .testimonial-source{gap:14px;}.home-testimonial .testimonial-company{margin-left:0;width:100%;}} .home-cta{padding-top:30px;padding-bottom:90px;} .home-cta>div {background:radial-gradient(ellipse at 100% 0,#d1c5ed,transparent 65%),linear-gradient(135deg,#e4def2,#e8e1f5)!important;border:1px solid #e4e1f5;position:relative;overflow:hidden;} .home-cta h2{color:#141230;font-size:clamp(40px,6vw,74px);} .home-cta p{color:#5a5570;} .home-cta>div::after{content:'';position:absolute;right:-140px;top:-180px;width:450px;height:450px;border:1px solid #6c5ce015;border-radius:50%;box-shadow:0 0 0 40px #6c5ce008,0 0 0 80px #6c5ce005;pointer-events:none;animation:ring-pulse 8s ease-in-out infinite alternate;} .home-cta .button{animation:cta-glow-pulse 3.5s ease-in-out infinite;} .is-inner .hero {padding:0;}.is-inner .hero>.wrap{position:relative;z-index:1;padding-top:90px;padding-bottom:90px;}.is-inner .hero h1{font-size:clamp(40px,4.8vw,68px);max-width:950px;line-height:1.1;letter-spacing:-.045em;}.is-inner main>.grid>div[class*="border"]{border-radius:22px;box-shadow:0 12px 40px #14123004;border-top:3px solid #6c5ce0;}.is-inner main .grid>div[class*="border"]:hover{box-shadow:0 18px 40px #1412300b;}.is-inner main>section.bg-mist{background:linear-gradient(130deg,#F7F6FC,#ECE8FC);} .service-controls {display:flex;gap:10px;flex-wrap:wrap;margin:30px 0;}.service-controls button{border:1px solid #d7d0ec;border-radius:99px;padding:12px 20px;color:#5a5570;font-size:13px;background:white;}.service-controls button[aria-pressed=true]{background:#6c5ce0;color:white;border-color:#6c5ce0;}.home-services.has-switcher .grid{display:block;}.home-services.has-switcher .grid>a{position:relative;display:block;padding:36px 45% 36px 36px;min-height:270px;}.home-services.has-switcher .grid>a[hidden]{display:none;}.home-services.has-switcher .grid>a::after{content:'↗';position:absolute;right:9%;top:38px;font-size:130px;line-height:1;color:#6c5ce0;display:grid;place-items:center;width:180px;height:180px;border-radius:50%;background:repeating-radial-gradient(circle,#ece8fc 0,#ece8fc 16px,#f7f6fc 17px,#f7f6fc 34px);}.home-services.has-switcher .grid>a>div{margin-bottom:18px;} .motion-toggle{position:fixed;bottom:18px;right:18px;z-index:40;background:#fff;color:#141230;border:1px solid #d9d1ee;box-shadow:0 4px 20px #14123016;padding:9px 13px;font-size:12px;border-radius:99px;} .motion-paused *, .motion-paused *::before, .motion-paused *::after{animation-play-state:paused!important;}.motion-paused .reveal{opacity:1;transform:none;} [id]{scroll-margin-top:110px;} @media(max-width:1023px){.home-hero>.wrap{grid-template-columns:1fr 1fr;padding-top:65px;padding-bottom:70px;}.home-hero h1{font-size:44px;}.platform-scene{height:400px;}.console-main{padding:16px;}.platform-console{top:90px;}.chip-ai{right:0;top:45px;}.platform-chip{padding:12px;}.chip-delivery{bottom:0;}.platform-caption{display:none;}.home-proof{margin:0;border-radius:0;}.home-portfolio .project-art{min-height:330px;}.home-services{border-radius:0;}} @media(max-width:767px){.modern-site .site-header>.wrap{min-height:80px;}.home-hero>.wrap{grid-template-columns:1fr;padding-top:48px;padding-bottom:30px;}.home-hero h1{font-size:46px;}.home-hero>.wrap>div:first-child{z-index:2;}.platform-scene{height:360px;max-width:450px;margin:auto;}.platform-console{top:60px;left:8%;width:82%;}.console-main{padding:18px;}.console-cloud{font-size:22px;}.chip-ai{top:10px;right:0;}.chip-delivery{bottom:0;left:2%;}.platform-orbit-one{top:-4%;width:86%;left:7%;}.platform-orbit-two{top:6%;width:68%;left:16%;}.home-hero> .border-t .wrap{font-size:12px;gap:14px;}.home-proof{gap:25px;padding:35px 24px;}.home-proof>div{padding-left:16px;}.home-proof p:first-child{font-size:34px;}.home-audiences,.home-portfolio{padding-top:65px;padding-bottom:65px;}.home-audiences .grid>a{padding:28px;}.home-services{margin-bottom:0;padding-top:50px;padding-bottom:50px;}.home-services.has-switcher .grid>a{padding:28px;min-height:0;}.home-services.has-switcher .grid>a::after{display:none;}.service-controls{gap:7px;}.service-controls button{padding:10px 13px;font-size:12px;}.home-industries{padding-top:60px;padding-bottom:60px;}.home-industries a{padding:13px 17px;font-size:12px;}.home-geography{padding-top:65px;padding-bottom:65px;}.geo-flex{grid-template-columns:1fr;gap:40px;}.geo-globe{min-height:0;order:-1;}.globe-svg{width:min(300px,80%);}.geo-list{grid-template-columns:1fr;}.geo-item{font-size:14px;}.home-why{padding-top:60px;padding-bottom:60px;}.home-why blockquote{padding:28px;}.home-cta{padding-bottom:55px;}.is-inner .hero>.wrap{padding-top:55px;padding-bottom:55px;}.is-inner .hero h1{font-size:39px;}} /* Service showcase: compact copy paired with cloud-specific illustrations. */ .home-services.services-showcase{padding-top:48px;padding-bottom:48px;background:radial-gradient(ellipse at 100% 0,#e9e3fc,transparent 55%),#F7F6FC;border:1px solid #E2DEF280;} .services-showcase>.section-heading{max-width:850px;font-size:clamp(32px,3.7vw,52px);margin-top:0;} .services-showcase>p:not(.eyebrow){max-width:760px;margin-bottom:24px;line-height:1.8;} .services-showcase .service-controls{margin:26px 0 22px;gap:8px;padding:6px;background:#e9e5f3;border:1px solid #e2def2;border-radius:14px;width:fit-content;max-width:100%;} .services-showcase .service-controls button{border:0;border-radius:9px;background:transparent;padding:12px 22px;font-size:13px;transition:background .2s,color .2s,box-shadow .2s;} .services-showcase .service-controls button[aria-pressed=true]{background:#6c5ce0;color:#fff;box-shadow:0 5px 12px rgba(108,92,224,0.2);} .home-services.services-showcase.has-switcher .grid>.service-panel{display:grid;grid-template-columns:1fr 1fr;padding:0;min-height:330px;overflow:hidden;gap:0;border-radius:20px;border-color:#ded7ed;box-shadow:0 16px 40px #14123006;transform:none;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s;} .home-services.services-showcase.has-switcher .grid>.service-panel:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(108,92,224,0.12);} .home-services.services-showcase.has-switcher .grid>.service-panel[hidden]{display:none;} .home-services.services-showcase .grid>.service-panel::after{display:none;} .home-services.services-showcase .grid>.service-panel>div{margin-bottom:0;} .service-copy{padding:38px;align-self:center;min-width:0;} .service-copy>div:first-child{margin-bottom:24px;display:flex;justify-content:space-between;color:#6c5ce0;} .service-copy>div:first-child>span:first-child{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#ECE8FC;font-size:12px;} .service-copy>div:first-child>span:last-child{display:none;} .home-services.services-showcase .service-copy h3{font-size:34px;margin-bottom:16px;letter-spacing:-.035em;} .service-copy>p{font-size:15px;line-height:1.85;margin-bottom:26px;max-width:420px;} .service-copy>span:last-child{display:inline-flex;align-items:center;padding:10px 0;border-bottom:1px solid #c9bdef;font-size:13px;transition:color .2s,border-color .2s;} .service-panel:hover .service-copy>span:last-child{color:#5341C4;border-color:#6c5ce0;} .service-art{position:relative;isolation:isolate;min-height:330px;display:grid;place-items:center;padding:40px;overflow:hidden;background:radial-gradient(ellipse at 90% 0,#63508d,transparent 65%),#211936;color:#ECE8FC;} .service-art-grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:28px 28px;} .service-art::after{content:'';position:absolute;width:340px;height:340px;border:1px solid #ffffff13;border-radius:50%;right:-200px;bottom:-160px;box-shadow:0 0 0 28px #ffffff04,0 0 0 56px #ffffff03;z-index:-1;animation:ring-pulse 8s ease-in-out infinite alternate;} .service-mini-window{width:100%;max-width:370px;border:1px solid #c1afe23d;background:linear-gradient(135deg,#ffffff10,#ffffff04);border-radius:13px;box-shadow:0 22px 35px #0003;transform:rotate(-3deg);padding-bottom:18px;animation:window-float 7s ease-in-out infinite alternate;} .service-window-top{padding:12px 15px;display:flex;gap:10px;justify-content:space-between;border-bottom:1px solid #ffffff14;color:#d4c7ec;font-size:8px;letter-spacing:.12em;}.service-window-dots{font-size:6px;letter-spacing:2px;color:#a793d0;} .service-window-label{font-size:14px;font-weight:500;padding:18px 20px 16px;} .pipeline-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:0 20px;} .pipeline-board>div{padding:8px;background:#ffffff07;border:1px solid #ffffff10;border-radius:6px;transition:transform .3s ease,background .3s ease;} .pipeline-board>div:hover{transform:translateY(-2px);background:#ffffff12;} .pipeline-board>div>span{display:block;font-size:8px;color:#d7caec;margin-bottom:10px;} .pipeline-board i{position:relative;display:block;height:20px;margin-top:7px;border-radius:3px;background:#9c83db35;border:1px solid #c6b1f21f;} .pipeline-board i::before{content:'';position:absolute;left:5px;top:6px;width:55%;height:3px;background:#c2afe87a;border-radius:3px;animation:pipeline-bar-shimmer 3.5s ease-in-out infinite alternate;} .pipeline-board>div:nth-child(2) i{background:#a68cde5c;} .pipeline-board>div:nth-child(2) i::before{animation-delay:-1.2s;} .pipeline-board>div:last-child i{background:#b8a1ec7a;} .pipeline-board>div:last-child i::before{animation-delay:-2.4s;} .service-sparkline{height:50px;margin:13px 20px 0;} .service-sparkline svg{width:100%;height:100%;} .service-line{stroke-dasharray:360;stroke-dashoffset:360;animation:service-draw 1.6s ease-out forwards;} .service-art-stamp{position:absolute;right:20px;bottom:25px;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#ECE8FC;color:#6c5ce0;border:3px solid #fff;font-size:27px;box-shadow:0 10px 25px #0003;animation:stamp-bob 5s ease-in-out infinite alternate;transition:transform .3s ease;} .service-art-stamp:hover{transform:scale(1.1) rotate(6deg) !important;} .journey-map{padding:0 20px 6px;} .journey-start{margin:0 auto;display:flex;gap:12px;align-items:center;width:fit-content;padding:10px 18px;background:#a68cde25;border:1px solid #c6b1f24f;border-radius:8px;font-size:10px;} .journey-start b{font-size:22px;color:#cab7f4;display:inline-block;animation:journey-node-ping 3s ease-in-out infinite;} .journey-stem{height:26px;width:1px;background:#b9a4e2;margin:auto;} .journey-branches{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:24px;} .journey-branches::before{content:'';position:absolute;top:0;left:25%;width:50%;height:24px;border:1px solid #b9a4e2;border-bottom:0;border-radius:8px 8px 0 0;} .journey-branches>div{display:grid;justify-items:center;gap:9px;background:#ffffff08;border:1px solid #ffffff23;border-radius:9px;padding:12px 5px;font-size:9px;animation:branch-glow 5s ease-in-out infinite alternate;transition:transform .3s ease,box-shadow .3s ease;} .journey-branches>div:last-child{animation-delay:-2.5s;} .journey-branches>div:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(108,92,224,0.3);} .journey-branches b{font-size:22px;color:#ccbaf6;} .agent-map{position:relative;width:210px;height:160px;margin:0 auto;display:grid;place-items:center;} .agent-orbit{position:absolute;width:170px;height:130px;border:1px dashed #c1abed70;border-radius:50%;animation:orbit-spin 25s linear infinite;} .agent-core{width:72px;height:72px;background:radial-gradient(circle at top,#b49bf1,#6C5CE0);border:1px solid #d3c0ff;border-radius:20px;display:grid;place-items:center;font-size:48px;box-shadow:0 0 40px #a085eb38;animation:agent-core-glow 4s ease-in-out infinite alternate;} .agent-node{position:absolute;display:grid;place-items:center;width:32px;height:32px;border-radius:99px;background:#3e3155;border:1px solid #c2aee95c;font-size:16px;animation:agent-node-pulse 4s ease-in-out infinite alternate;transition:transform .3s ease,box-shadow .3s ease;} .agent-node:hover{transform:scale(1.2) !important;box-shadow:0 0 20px #c4b5fd !important;} .node-one{left:6px;top:24px;} .node-two{right:6px;top:24px;animation-delay:-1s;} .node-three{left:20px;bottom:8px;animation-delay:-2s;} .node-four{right:20px;bottom:8px;animation-delay:-3s;} .agent-caption{text-align:center;font-size:9px;letter-spacing:.04em;color:#d4c7ec;margin-top:10px;} @keyframes service-draw{to{stroke-dashoffset:0;}} @media(max-width:900px){.home-services.services-showcase.has-switcher .grid>.service-panel{grid-template-columns:1fr 1fr;}.service-copy{padding:26px;}.service-art{padding:26px 20px;}.home-services.services-showcase .service-copy h3{font-size:28px;}.service-window-top{font-size:7px;}.service-window-dots{display:none;}} @media(max-width:600px){.home-services.services-showcase{padding-top:36px;padding-bottom:36px;}.services-showcase>.section-heading{font-size:33px;}.services-showcase .service-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:3px;padding:4px;}.services-showcase .service-controls button{padding:12px 5px;font-size:12px;line-height:1.4;min-width:0;}.home-services.services-showcase.has-switcher .grid>.service-panel{grid-template-columns:1fr;}.service-art{min-height:275px;padding:26px 30px;}.service-copy{padding:26px;}.service-copy>div:first-child{margin-bottom:16px;}.service-copy>p{margin-bottom:16px;font-size:14px;}.service-art-stamp{right:16px;bottom:18px;width:40px;height:40px;font-size:23px;}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;}.motion-toggle{display:none;}.reveal{opacity:1;transform:none;}.service-line{stroke-dashoffset:0;}} /* ---- Mega menu (desktop) ---- */ /* Must stay in step with .site-header in tailwind.css: `relative` here silently killed the sticky behaviour the nav, mega panel and scroll-margin all assume. */ .modern-site .site-header { position: sticky; top: 0; z-index: 50; } .site-nav { align-items: center; } .nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .nav-item { position: static; } .nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #17152B; text-decoration: none; white-space: nowrap; transition: color .2s, background .2s; } .nav-link:hover { color: #6C5CE0; background: #F7F6FC; } .nav-caret { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s ease; opacity: .55; } .has-mega.open .nav-caret { transform: rotate(-135deg) translateY(2px); opacity: 1; } .has-mega.open > .nav-link, .has-mega:focus-within > .nav-link { color: #6C5CE0; background: #F7F6FC; } /* Salesforce Partner badge — sits beside "Book a Call" in the navbar (sized to match the button's 48px height) and as a large plaque on the Partners page. Hidden below 1024px so it never crowds the brand tagline or the mobile menu button. */ .nav-partner-badge { display: none; align-items: center; transition: opacity .2s ease; } .nav-partner-badge img { display: block; height: 48px; width: auto; } .nav-partner-badge:hover { opacity: .85; } @media (min-width: 1024px) { .nav-partner-badge { display: inline-flex; } } /* Large partner badge plaque in the Partners page proof section — the badge is a site-level trust mark, shown big where the page talks about certification. */ .partner-badge-feature { display: flex; justify-content: center; align-items: center; width: fit-content; margin: 44px auto 0; padding: 36px 48px; background: #fff; border: 1px solid #E2DEF2; border-radius: 22px; box-shadow: 0 22px 44px -26px rgba(20,18,48,.28); } .partner-badge-feature img { display: block; height: 92px; width: auto; } @media (max-width: 767px) { .partner-badge-feature { padding: 26px 30px; margin-top: 34px; } .partner-badge-feature img { height: 62px; } } /* AppExchange badge — third element of the homepage hero CTA row, linking to the listing. Sized to the hero buttons so the row reads as one line of equal-height items. */ .hero-appexchange-badge { display: inline-flex; align-items: center; border-radius: 12px; transition: transform .25s, box-shadow .25s; } .hero-appexchange-badge img { display: block; height: 48px; width: auto; border-radius: 12px; } .hero-appexchange-badge:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(6,45,60,.35); } @media (max-width: 640px) { .hero-appexchange-badge img { height: 42px; } } /* At xl the full nav, partner badge and CTA all share the 80rem row; the tagline yields there rather than squeezing the nav links or wrapping the CTA label. It stays visible below 1280px, where there is room for it. */ @media (min-width: 1280px) { .site-brand-tagline { display: none; } } .mega-panel { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 1px solid #E2DEF2; box-shadow: 0 34px 64px -26px rgba(20,18,48,.30); opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition: opacity .28s ease, transform .28s ease, visibility .28s; z-index: 45; } .mega-panel::before { content: ''; position: absolute; top: -22px; left: 0; right: 0; height: 22px; } .has-mega.open > .mega-panel, .has-mega:focus-within > .mega-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .mega-grid { display: flex; justify-content: space-between; align-items: stretch; gap: 48px; width: 100%; max-width: 80rem; margin: 0 auto; padding: 34px 2.5rem 38px; } .mega-cols { display: flex; gap: 44px; flex-wrap: wrap; } .mega-col { min-width: 168px; } .mega-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #a99af5; margin: 0 0 10px; } .mega-link { display: block; padding: 7px 0; font-size: 14.5px; font-weight: 500; line-height: 1.35; color: #17152B; text-decoration: none; transition: color .2s ease, transform .2s ease; } .mega-link:hover { color: #6C5CE0; transform: translateX(4px); } .mega-side { width: 300px; border-left: 1px solid #E2DEF2; padding-left: 40px; display: grid; gap: 16px; align-content: start; } .mega-overview { font-size: 13.5px; font-weight: 700; color: #6C5CE0; text-decoration: none; } .mega-overview:hover { color: #5341C4; } .mega-featured { display: grid; gap: 6px; padding: 22px; border-radius: 18px; text-decoration: none; background: linear-gradient(150deg,#6C5CE0,#4b3bbf); color: #fff; box-shadow: 0 16px 30px -14px rgba(108,92,224,.5); transition: transform .3s ease, box-shadow .3s ease; } .mega-featured:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -14px rgba(108,92,224,.6); } .mega-featured-eyebrow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #d9d1ff; } .mega-featured-title { font-size: 16px; font-weight: 700; line-height: 1.3; } .mega-featured-text { font-size: 12.5px; line-height: 1.6; color: #e7e2ff; } .mega-featured-cta { font-size: 12.5px; font-weight: 700; color: #fff; margin-top: 2px; } /* Wide highlighted card (Case Studies) — fills the panel instead of a narrow side card */ .mega-grid--hero { justify-content: flex-start; } .mega-grid--hero .mega-cols { flex: 0 0 auto; } .mega-hero { flex: 1; display: grid; gap: 16px; align-content: start; border-left: 1px solid #E2DEF2; padding-left: 44px; } .mega-herocard { display: flex; align-items: center; justify-content: space-between; gap: 30px; width: 100%; padding: 28px 32px; border-radius: 20px; background: linear-gradient(135deg,#6C5CE0,#4b3bbf); color: #fff; text-decoration: none; box-shadow: 0 18px 34px -16px rgba(108,92,224,.55); transition: transform .3s ease, box-shadow .3s ease; } .mega-herocard:hover { transform: translateY(-3px); box-shadow: 0 26px 46px -16px rgba(108,92,224,.65); } .mega-herocard-main { display: grid; gap: 9px; max-width: 62%; } .mega-herocard-title { font-size: 23px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; } .mega-herocard-text { font-size: 14px; line-height: 1.65; color: #e7e2ff; } .mega-herocard-tags { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; flex-shrink: 0; } .mega-tag { font-size: 12px; font-weight: 600; background: rgba(255,255,255,.16); color: #fff; padding: 8px 15px; border-radius: 999px; white-space: nowrap; } /* ---- Compact dropdown (Resources, About) ---- */ .has-dropdown { position: relative; } .dropdown-panel { position: absolute; top: 100%; left: 0; min-width: 250px; background: #fff; border: 1px solid #E2DEF2; border-radius: 14px; box-shadow: 0 24px 48px -22px rgba(20,18,48,.32); padding: 10px; display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition: opacity .24s ease, transform .24s ease, visibility .24s; z-index: 45; } .dropdown-panel::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } .has-dropdown.open > .dropdown-panel, .has-dropdown:focus-within > .dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .dropdown-link { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #17152B; text-decoration: none; transition: background .18s ease, color .18s ease; } .dropdown-link:hover { background: #F7F6FC; color: #6C5CE0; } .dropdown-foot { display: block; margin-top: 6px; padding: 10px 12px 4px; border-top: 1px solid #E2DEF2; font-size: 13px; font-weight: 700; color: #6C5CE0; text-decoration: none; } .dropdown-foot:hover { color: #5341C4; } /* Smooth in-page anchor scrolling (for TOC links); off when motion is reduced. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---- Readability floor ---- Anything meant to be read stays at 12px or larger. Enforced by hand, not by a blanket rule: a global `* { font-size: 12px }` would blow up the miniature UI inside the illustrations, which are drawn at deliberately small scale. Deliberately below the floor (illustration internals, not copy): .console-top 9px, .console-label 11px, .console-cloud > span 10px, .console-bottom 8px, .service-window-top 8px, .service-window-dots 6px, .pipeline-board span 8px, .journey-start 10px, .journey-branches 9px, .agent-caption 9px, .platform-caption 8px, .geo-label 10px, .geo-hq text 8px (SVG map), and the 240px background numeral. If one of these should be readable, lift it here rather than globally. */ /* ---- Award popup ---- A native shown modally on load. Native rather than a div with z-index because it brings the top layer, focus containment and Esc-to-close without hand-rolling any of them — the three things a hand-rolled overlay usually gets wrong. */ /* The dialog is stretched to the viewport and centres the figure with grid. The UA default centres the *dialog* instead, via `inset: 0; margin: auto` around a shrink-to-fit box — that collapses to margin 0 as soon as the content is taller than the viewport, which pinned the popup to the top-left and clipped it. */ .award-modal { padding: 0; border: 0; background: none; color: inherit; width: 100%; height: 100%; max-width: 100%; max-height: 100%; box-sizing: border-box; overflow: visible; } .award-modal[open] { display: grid; place-items: center; padding: 40px; } .award-modal::backdrop { background: rgba(9, 8, 28, .84); } /* Applied by the popup script while the dialog is open. A modal dialog makes the page inert but leaves it scrollable, so the wheel would otherwise slide the page around behind the backdrop. */ html.award-open { overflow: hidden; } /* A backdrop click lands on the dialog element itself, since the figure inside it covers only the photo. The JS uses this to tell the two apart. */ .award-modal[open] { animation: award-modal-in .28s cubic-bezier(.22, 1, .36, 1); } @keyframes award-modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } } /* Sized against the dialog's content box (viewport less its padding), with a further 18px held back so the close button, which overhangs the top right corner, always has somewhere to sit without being clipped. */ .award-modal-figure { position: relative; margin: 0; padding: 14px; background: #fff; border-radius: 12px; box-shadow: 0 40px 90px rgba(5, 4, 20, .55); max-width: min(1180px, calc(100% - 18px)); } .award-modal-image { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; border-radius: 4px; background: #0B0D28; } .award-modal-caption { padding: 14px 6px 4px; font-size: 15px; line-height: 1.6; color: #5A5570; text-align: center; } .award-modal-close { position: absolute; top: -18px; right: -18px; width: 46px; height: 46px; padding: 0; border: 0; cursor: pointer; display: grid; place-items: center; border-radius: 50%; background: #141230; color: #fff; font-size: 30px; line-height: 1; box-shadow: 0 10px 26px rgba(5, 4, 20, .45); transition: background .18s ease, transform .18s ease; } .award-modal-close:hover { background: #5341C4; transform: scale(1.06); } /* The ring is suppressed until the popup script sees a real keypress, so it never appears merely because focus was moved onto the button on open. */ .award-modal-close:focus-visible { outline: none; } .award-modal.award-keyboard .award-modal-close:focus-visible { outline: 3px solid #6C5CE0; outline-offset: 3px; } @media (max-width: 700px) { /* Pull the frame in so the close button overhangs the padding rather than the viewport edge, where it would be half cut off. */ .award-modal[open] { padding: 26px; } .award-modal-figure { padding: 10px; max-width: calc(100% - 14px); border-radius: 10px; } .award-modal-image { max-height: 68vh; } .award-modal-close { top: -14px; right: -14px; width: 40px; height: 40px; font-size: 26px; } } @media (prefers-reduced-motion: reduce) { .award-modal[open] { animation: none; } .award-modal-close { transition: none; } } /* --- Added Animations --- */ /* Globe rotation */ .globe-spin-group { transform-origin: 320px 260px; animation: globe-spin 120s linear infinite; } @keyframes globe-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes globe-spin-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } /* Keep the text and pill backgrounds upright */ .geo-marker rect, .geo-marker text { animation: globe-spin-reverse 120s linear infinite; } .geo-marker[data-country="US"] rect, .geo-marker[data-country="US"] text { transform-origin: 82px 198px; } .geo-marker[data-country="UK"] rect, .geo-marker[data-country="UK"] text { transform-origin: 248px 46px; } .geo-marker[data-country="DE"] rect, .geo-marker[data-country="DE"] text { transform-origin: 455px 78px; } .geo-marker[data-country="IN"] rect, .geo-marker[data-country="IN"] text { transform-origin: 555px 302px; } /* Card hover lifts */ .home-audiences .grid>a { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease !important; } .home-audiences .grid>a:hover { transform: translateY(-8px) !important; box-shadow: 0 24px 48px rgba(108,92,224,0.12) !important; } .home-services .grid>a { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease !important; } .home-services .grid>a:hover { transform: translateY(-6px) !important; box-shadow: 0 16px 32px rgba(108,92,224,0.08) !important; border-color: #6c5ce0 !important; } /* Nav Link Underline Micro-Animation */ .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; bottom: 4px; left: 14px; right: 14px; height: 2px; background: #6C5CE0; border-radius: 2px; transform: scaleX(0); transform-origin: right; transition: transform .28s cubic-bezier(0.22, 1, 0.36, 1); } .nav-link:hover::after, .has-mega.open > .nav-link::after, .has-dropdown.open > .nav-link::after { transform: scaleX(1); transform-origin: left; } /* Interactive Country Hover Highlight on Globe Markers */ .geo-marker { transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1); } .geo-marker.is-active rect { fill: #6C5CE0 !important; stroke: #6C5CE0 !important; filter: drop-shadow(0 4px 12px rgba(108,92,224,0.5)); } .geo-marker.is-active text { fill: #FFFFFF !important; } .geo-marker.is-active .marker-pulse { animation: marker-ping 1.2s ease-out infinite; fill: #6C5CE0; opacity: .55; } /* Keyframe Animations */ @keyframes console-float { 0%, 100% { transform: rotateY(calc(-12deg + var(--mouse-rot-y, 0deg))) rotateX(calc(7deg + var(--mouse-rot-x, 0deg))) rotateZ(-5deg) translateY(0); box-shadow: 22px 40px 70px rgba(20,18,48,0.12), inset 0 1px 0 #ffffff; } 50% { transform: rotateY(calc(-10deg + var(--mouse-rot-y, 0deg))) rotateX(calc(9deg + var(--mouse-rot-x, 0deg))) rotateZ(-4deg) translateY(-10px); box-shadow: 26px 50px 85px rgba(108,92,224,0.18), inset 0 1px 0 #ffffff; } } @keyframes ambient-pulse { 0% { transform: scale(0.92) translate(0, 0); opacity: 0.65; } 100% { transform: scale(1.12) translate(10px, -8px); opacity: 1; } } @keyframes beacon-ping { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } } @keyframes dot-ping { 0% { transform: scale(0.5); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } } @keyframes chart-wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.82); } } @keyframes float-chip-one { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(1deg); } } @keyframes float-chip-two { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-1deg); } } @keyframes sparkle-rotate { 0%, 100% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(18deg) scale(1.12); } 75% { transform: rotate(-18deg) scale(1.05); } } @keyframes chip-shimmer { 0%, 75% { left: -120%; } 100% { left: 180%; } } @keyframes hero-gradient-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes window-float { 0% { transform: rotate(-3deg) translateY(0); } 100% { transform: rotate(-1.5deg) translateY(-8px); } } @keyframes stamp-bob { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-7px) rotate(4deg); } } @keyframes pipeline-bar-shimmer { 0% { width: 45%; opacity: 0.7; } 100% { width: 80%; opacity: 1; } } @keyframes journey-node-ping { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(202,183,244,0)); } 50% { transform: scale(1.15); filter: drop-shadow(0 0 10px rgba(202,183,244,0.8)); } } @keyframes branch-glow { 0% { background: #ffffff08; border-color: #ffffff23; } 100% { background: #ffffff14; border-color: #c4b5fd55; box-shadow: 0 4px 18px rgba(108,92,224,0.2); } } @keyframes agent-core-glow { 0% { transform: scale(1); box-shadow: 0 0 35px #a085eb38; } 100% { transform: scale(1.08); box-shadow: 0 0 60px #a085eb75, 0 0 18px rgba(255,255,255,0.4); } } @keyframes agent-node-pulse { 0% { transform: translateY(0) scale(1); border-color: #c2aee95c; } 100% { transform: translateY(-5px) scale(1.08); border-color: #d8b4fe; box-shadow: 0 0 15px rgba(192,132,252,0.45); } } @keyframes sculpture-drift-1 { 0% { transform: translate(0, 0) rotateX(45deg); } 100% { transform: translate(-4px, -6px) rotateX(43deg); } } @keyframes sculpture-drift-2 { 0% { transform: translate(6px, 14px) rotateX(45deg); } 100% { transform: translate(3px, 9px) rotateX(43deg); } } @keyframes sculpture-drift-3 { 0% { transform: translate(12px, 28px) rotateX(45deg); } 100% { transform: translate(10px, 23px) rotateX(43deg); } } @keyframes sculpture-drift-4 { 0% { transform: translate(18px, 42px) rotateX(45deg); } 100% { transform: translate(16px, 36px) rotateX(43deg); } } @keyframes sculpture-drift-5 { 0% { transform: translate(24px, 56px) rotateX(45deg); } 100% { transform: translate(22px, 50px) rotateX(43deg); } } @keyframes border-beam { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @keyframes ring-pulse { 0% { transform: scale(1); opacity: 0.65; } 100% { transform: scale(1.1); opacity: 0.95; } } @keyframes geo-dot-breathe { 0%, 100% { box-shadow: 0 0 0 5px #6c5ce021; transform: scale(1); } 50% { box-shadow: 0 0 0 9px #6c5ce040, 0 0 12px #6c5ce060; transform: scale(1.15); } } @keyframes cta-glow-pulse { 0%, 100% { box-shadow: 0 8px 24px rgba(108,92,224,0.25); } 50% { box-shadow: 0 14px 40px rgba(108,92,224,0.5), 0 0 0 6px rgba(108,92,224,0.18); } } @keyframes mark-float { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-7px) rotate(-3deg); } } @keyframes orbit-spin { to { transform: rotate(1turn); } } /* ═══════════════════════════════════════════════ ENHANCED ANIMATIONS — Eliminate Plain Sections ═══════════════════════════════════════════════ */ /* ── Cursor Spotlight ── */ .modern-site { position: relative; } .cursor-glow { position: fixed; pointer-events: none; z-index: 9999; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(108,92,224,0.08) 0%, transparent 70%); transform: translate(-50%, -50%); transition: opacity .4s ease; opacity: 0; mix-blend-mode: screen; } .cursor-glow.is-visible { opacity: 1; } /* ── Animated Gradient Mesh on Audiences ── */ .home-audiences { position: relative; overflow: hidden; } .home-audiences::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 20% 50%, rgba(108,92,224,0.06) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(181,160,251,0.05) 0%, transparent 50%), radial-gradient(ellipse at 60% 80%, rgba(108,92,224,0.04) 0%, transparent 50%); animation: mesh-drift 20s ease-in-out infinite alternate; pointer-events: none; z-index: 0; } .home-audiences > * { position: relative; z-index: 1; } @keyframes mesh-drift { 0% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(3%, -2%) rotate(1deg); } 66% { transform: translate(-2%, 3%) rotate(-0.5deg); } 100% { transform: translate(1%, -1%) rotate(0.5deg); } } /* Audience card icon badges */ .audience-badge { display: inline-flex !important; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; position: relative; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; animation: icon-float 4s ease-in-out infinite alternate; } .audience-badge-partners { background: linear-gradient(135deg, #ede8fa 0%, #ded5f7 100%); border: 1px solid rgba(108, 92, 224, 0.22); color: #6c5ce0; box-shadow: 0 4px 14px rgba(108, 92, 224, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7); } .audience-badge-businesses { background: linear-gradient(135deg, #ffffff 0%, #f4f0fd 100%); border: 1px solid rgba(108, 92, 224, 0.22); color: #5848c2; box-shadow: 0 4px 14px rgba(108, 92, 224, 0.16), 0 1px 3px rgba(0, 0, 0, 0.04); animation-delay: -2s; } .home-audiences .grid > a:hover .audience-badge { transform: translateY(-4px) scale(1.08); box-shadow: 0 8px 20px rgba(108, 92, 224, 0.2); } .audience-icon-svg { display: block; width: 24px; height: 24px; } @keyframes icon-float { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(-6px) scale(1.05); } } /* Audience card shimmer sweep on hover */ .home-audiences .grid > a::before { content: ''; position: absolute; top: 0; left: -130%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); transform: skewX(-20deg); transition: left .75s ease; pointer-events: none; z-index: 2; } .home-audiences .grid > a:hover::before { left: 160%; } /* ── Proof Bar Enhancements ── */ .home-proof { position: relative; } .home-proof > div > p:first-child { background: linear-gradient(135deg, #6c5ce0, #9987f2, #6c5ce0); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: stat-gradient-shift 4s ease-in-out infinite; } @keyframes stat-gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 200% 50%; } } /* ── Industry Card Magnetic Hover ── */ .industry-card { --card-rx: 0deg; --card-ry: 0deg; transform-style: preserve-3d; perspective: 800px; } .industry-card.is-magnetic { transform: rotateX(var(--card-rx)) rotateY(var(--card-ry)) translateY(-6px) scale(1.008); } /* Animated number counter on industry cards */ .industry-num { transition: color .3s ease, transform .3s ease; } .industry-card:hover .industry-num { transform: scale(1.2); } /* ── Section Heading Shimmer ── */ .home-audiences .section-heading, .home-services .section-heading, .home-industries h2, .home-portfolio h2, .home-geography .section-heading, .home-testimonial .section-heading, .home-cta h2 { background: linear-gradient(110deg, #141230 0%, #6c5ce0 25%, #141230 50%, #6c5ce0 75%, #141230 100%); background-size: 300% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: heading-shimmer 8s linear infinite; } @keyframes heading-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } /* ── Portfolio Card Line-Draw Effect ── */ .project-card .project-art::after { content: ''; position: absolute; inset: 16px; border: 1px solid rgba(108,92,224,0.2); border-radius: 12px; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path .8s cubic-bezier(.22,1,.36,1); pointer-events: none; z-index: 3; } .project-card:hover .project-art::after { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } /* Portfolio card gradient border beam */ .project-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2.5px; background: linear-gradient(90deg, transparent, #6c5ce0, #c4b8f0, #6c5ce0, transparent); background-size: 200% 100%; transform: scaleX(0); transform-origin: left; transition: transform .5s ease; z-index: 5; } .project-card:hover::after { transform: scaleX(1); animation: border-beam 2s linear infinite; } /* ── Testimonial Section Enhancements ── */ .home-testimonial { position: relative; overflow: hidden; } .home-testimonial::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; border: 1px solid rgba(108,92,224,0.08); border-radius: 50%; box-shadow: 0 0 0 40px rgba(108,92,224,0.03), 0 0 0 80px rgba(108,92,224,0.02); animation: ring-pulse 8s ease-in-out infinite alternate; pointer-events: none; } .home-testimonial::after { content: ''; position: absolute; bottom: -60px; left: -60px; width: 250px; height: 250px; border: 1px dashed rgba(108,92,224,0.1); border-radius: 50%; animation: orbit-spin 45s linear infinite; pointer-events: none; } /* Testimonial quote mark animated glow */ .testimonial-mark { text-shadow: 0 0 30px rgba(108,92,224,0.3); animation: mark-float 6s ease-in-out infinite alternate, mark-glow 3s ease-in-out infinite alternate !important; } @keyframes mark-glow { 0% { text-shadow: 0 0 20px rgba(108,92,224,0.2); } 100% { text-shadow: 0 0 45px rgba(108,92,224,0.5), 0 0 80px rgba(108,92,224,0.15); } } /* Testimonial slider hover lift */ .home-testimonial .testimonial-slider { transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease; } .home-testimonial .testimonial-slider:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(108,92,224,0.12); } /* ── CTA Section Enhancements ── */ .home-cta > div { position: relative; overflow: hidden; } .home-cta > div::before { content: ''; position: absolute; top: 0; left: -200%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); transform: skewX(-20deg); animation: cta-sweep 6s ease-in-out infinite; pointer-events: none; z-index: 1; } @keyframes cta-sweep { 0%, 60% { left: -200%; } 100% { left: 200%; } } /* CTA floating decorative orbs */ .home-cta > div .wrap { position: relative; z-index: 2; } /* ── Why Section Quote Cards ── */ .home-why blockquote { position: relative; overflow: hidden; } .home-why blockquote::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #6c5ce0, transparent); background-size: 200% 100%; animation: border-beam 4s linear infinite; } /* ── Floating Particles System ── */ .home-hero::after, .home-cta::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 10% 20%, rgba(108,92,224,0.35) 50%, transparent 50%), radial-gradient(1px 1px at 30% 65%, rgba(181,160,251,0.25) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 55% 15%, rgba(108,92,224,0.3) 50%, transparent 50%), radial-gradient(1px 1px at 70% 75%, rgba(196,184,240,0.2) 50%, transparent 50%), radial-gradient(2px 2px at 85% 40%, rgba(108,92,224,0.25) 50%, transparent 50%), radial-gradient(1px 1px at 40% 90%, rgba(181,160,251,0.2) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 95% 10%, rgba(108,92,224,0.15) 50%, transparent 50%), radial-gradient(1px 1px at 20% 45%, rgba(196,184,240,0.2) 50%, transparent 50%); animation: particles-float 25s linear infinite; pointer-events: none; z-index: 0; } @keyframes particles-float { 0% { transform: translateY(0); } 100% { transform: translateY(-40px); } } /* ── Smooth Section Divider Lines ── */ .home-audiences::after, .home-portfolio::after, .home-testimonial > .wrap::after { content: ''; display: block; width: 120px; height: 2px; margin: 0 auto; background: linear-gradient(90deg, transparent, #6c5ce0, transparent); opacity: 0.4; } /* ── Interactive Eyebrow Badge Pulse ── */ .eyebrow::before { animation: eyebrow-pulse 2.5s ease-in-out infinite; } @keyframes eyebrow-pulse { 0%, 100% { width: 1.75rem; opacity: 1; } 50% { width: 2.25rem; opacity: 0.6; } } /* ── Geography Section Text Stagger ── */ .geo-item { animation: geo-item-slide-in .5s cubic-bezier(.22,1,.36,1) both; } .geo-item:nth-child(1) { animation-delay: 0s; } .geo-item:nth-child(2) { animation-delay: .1s; } .geo-item:nth-child(3) { animation-delay: .2s; } .geo-item:nth-child(4) { animation-delay: .3s; } @keyframes geo-item-slide-in { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } /* ── Smooth Scroll Progress Indicator ── */ .read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; background: linear-gradient(90deg, #6c5ce0, #9987f2, #c4b8f0); transform-origin: left; transform: scaleX(0); transition: transform .1s linear; } /* ── Footer Brand Glow ── */ .site-footer { position: relative; overflow: hidden; } .site-footer::after { content: ''; position: absolute; top: 60px; left: 50%; transform: translateX(-50%); width: 500px; height: 300px; background: radial-gradient(ellipse, rgba(108,92,224,0.08) 0%, transparent 70%); pointer-events: none; animation: footer-glow 8s ease-in-out infinite alternate; } @keyframes footer-glow { 0% { opacity: 0.4; transform: translateX(-50%) scale(0.9); } 100% { opacity: 0.8; transform: translateX(-50%) scale(1.15); } } /* ── Service Tab Button Micro-Interactions ── */ .services-showcase .service-controls button { position: relative; overflow: hidden; } .services-showcase .service-controls button::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(108,92,224,0.1), transparent); transform: translateX(-100%); transition: transform .4s ease; } .services-showcase .service-controls button:hover::after { transform: translateX(100%); } /* ── Enhanced Hover States for All Interactive Elements ── */ .home-proof > div { position: relative; } .home-proof > div::before { content: ''; position: absolute; inset: -1px; border-radius: 13px; background: linear-gradient(135deg, transparent, rgba(108,92,224,0.15), transparent); opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: -1; } .home-proof > div:hover::before { opacity: 1; } /* ── Enhanced Footer Social Icons ── */ .footer-social { display: flex !important; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .footer-social a { display: inline-flex !important; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.72); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important; } .footer-social a:hover { transform: translateY(-3px) scale(1.08) !important; background: rgba(108, 92, 224, 0.25) !important; border-color: #a794ff !important; color: #ffffff !important; box-shadow: 0 6px 18px rgba(108, 92, 224, 0.4) !important; } .footer-social svg { display: block; width: 16px; height: 16px; fill: currentColor; transition: transform 0.25s ease; } .footer-social a:hover svg { transform: scale(1.1); } /* ═══════════════════════════════════════════════════════════════════════════ TEAM SHOWCASE – Split layout: left heading + bio, right portrait cards ═══════════════════════════════════════════════════════════════════════════ */ .team-showcase-section { background: linear-gradient(160deg, #F7F6FC 0%, #ECE8FC 35%, #F7F6FC 100%); overflow: hidden; } .team-showcase-container { display: grid; grid-template-columns: 1.05fr 1.25fr; gap: 48px; align-items: start; } /* — Left column — */ .team-showcase-left { position: sticky; top: 120px; } .team-title-block { margin-bottom: 28px; } .team-heading-primary { display: flex; flex-direction: column; gap: 4px; } .team-heading-row { display: block; font-size: clamp(30px, 3.2vw, 44px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: #141230; } .team-heading-row:first-child { font-size: clamp(13px, 1.1vw, 15px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6C5CE0; margin-bottom: 6px; } .team-accent-line { width: 56px; height: 4px; margin-top: 16px; border-radius: 8px; background: linear-gradient(90deg, #6C5CE0, #9987f2); } /* — Bio Box — */ .team-bio-box { margin-top: 10px; background: #ffffff; border: 1px solid #E2DEF2; border-radius: 24px; padding: 34px 32px 28px; box-shadow: 0 12px 42px rgba(20,18,48,0.06); transition: box-shadow .35s ease, border-color .35s ease; } .team-bio-box:hover { box-shadow: 0 18px 56px rgba(108,92,224,0.12); border-color: #D3CBF5; } .team-bio-inner { min-height: 120px; } .team-bio-paragraph { font-size: 15.5px; line-height: 1.85; color: #3E3855; font-weight: 450; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; transition: opacity .3s ease; } .team-bio-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 18px; border-top: 1px solid #ECE8FC; } .team-readmore-btn { background: none; border: none; color: #6C5CE0; font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 0; position: relative; display: inline-flex; align-items: center; gap: 6px; transition: color .2s, transform .2s; } .team-readmore-btn::after { content: ''; position: absolute; bottom: 2px; left: 0; width: 100%; height: 1.5px; background: #6C5CE0; transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.22,1,.36,1); } .team-readmore-btn:hover::after { transform: scaleX(1); } .team-readmore-btn:hover { color: #5341C4; } /* Social icons in the bio box */ .team-bio-socials-wrapper { display: flex; gap: 8px; } .team-social-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #F7F6FC; color: #6C5CE0; border: 1px solid #E2DEF2; transition: all .25s cubic-bezier(.22,1,.36,1); } .team-social-btn:hover { background: #6C5CE0; color: #ffffff; border-color: #6C5CE0; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(108,92,224,0.35); } .team-social-btn svg { display: block; width: 15px; height: 15px; } /* — Right column: Member Cards — */ .team-showcase-right { overflow: visible; } .team-members-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 26px; width: 100%; } .team-member-item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px 32px; border-radius: 26px; background: #ffffff; border: 2px solid #EDE9F8; cursor: pointer; transition: all .35s cubic-bezier(.22,1,.36,1); box-shadow: 0 6px 24px rgba(20,18,48,0.04); } .team-member-item:hover { transform: translateY(-8px); box-shadow: 0 20px 52px rgba(108,92,224,0.15); border-color: #BBAEF2; } .team-member-item.is-active { border-color: #6C5CE0; background: linear-gradient(175deg, #ffffff 40%, #F7F4FF 100%); box-shadow: 0 16px 48px rgba(108,92,224,0.18); } .team-member-item.is-active::before { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 56px; height: 4px; border-radius: 6px; background: linear-gradient(90deg, #6C5CE0, #9987f2); } .team-member-item:focus-visible { outline: 2px solid #6C5CE0; outline-offset: 3px; } /* Circular photo frame */ .team-member-photo-frame { width: 152px; height: 152px; border-radius: 50%; overflow: hidden; border: 4px solid #ECE8FC; margin-bottom: 20px; transition: border-color .3s ease, box-shadow .3s ease; box-shadow: 0 6px 20px rgba(108,92,224,0.08); } .team-member-item.is-active .team-member-photo-frame { border-color: #6C5CE0; box-shadow: 0 0 0 5px rgba(108,92,224,0.16), 0 8px 24px rgba(108,92,224,0.18); } .team-member-photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22,1,.36,1); } .team-member-item:hover .team-member-photo { transform: scale(1.08); } /* Name & role */ .team-member-name { font-size: 20px; font-weight: 700; color: #141230; margin: 0; letter-spacing: -.02em; } .team-member-role { font-size: 14px; color: #6C5CE0; font-weight: 600; margin-top: 6px; line-height: 1.4; } /* Social links on the card */ .team-member-socials { display: flex; gap: 8px; margin-top: 14px; } .team-card-social-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #F7F6FC; color: #7B6DA8; border: 1px solid #ECE8FC; transition: all .25s ease; } .team-card-social-link:hover { background: #6C5CE0; color: #fff; border-color: #6C5CE0; transform: translateY(-2px) scale(1.1); box-shadow: 0 4px 12px rgba(108,92,224,0.3); } .team-card-social-link svg { display: block; width: 14px; height: 14px; } /* ═══════════════════════════════════════════════════════════════════════════ TEAM MODAL – "Read More" detail dialog ═══════════════════════════════════════════════════════════════════════════ */ .team-detail-dialog { border: none; border-radius: 24px; padding: 0; max-width: 560px; width: 92vw; background: #ffffff; box-shadow: 0 32px 100px rgba(20,18,48,0.22); overflow: hidden; animation: teamModalIn .35s cubic-bezier(.22,1,.36,1); } .team-detail-dialog::backdrop { background: rgba(20,18,48,0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } @keyframes teamModalIn { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .team-modal-panel { padding: 36px 32px 28px; position: relative; } .team-modal-close { position: absolute; top: 14px; right: 18px; width: 36px; height: 36px; border: none; background: #F7F6FC; border-radius: 50%; font-size: 20px; color: #5A5570; cursor: pointer; display: grid; place-items: center; transition: all .2s ease; } .team-modal-close:hover { background: #6C5CE0; color: #fff; transform: rotate(90deg); } /* Modal header */ .team-modal-header { display: flex; gap: 20px; align-items: center; margin-bottom: 22px; } .team-modal-avatar { width: 90px; height: 90px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 3px solid #ECE8FC; } .team-modal-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .team-modal-name { font-size: 22px; font-weight: 600; color: #141230; margin: 0; letter-spacing: -.02em; } .team-modal-role { font-size: 14px; color: #6C5CE0; font-weight: 500; margin-top: 4px; } .team-modal-socials { display: flex; gap: 8px; margin-top: 10px; } .team-modal-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #F7F6FC; color: #6C5CE0; border: 1px solid #E2DEF2; transition: all .2s ease; } .team-modal-social-icon:hover { background: #6C5CE0; color: #fff; border-color: #6C5CE0; } .team-modal-social-icon svg { display: block; } /* Modal body */ .team-modal-bio { font-size: 14.5px; line-height: 1.9; color: #4A4460; margin: 0; } .team-modal-meta { display: flex; gap: 20px; margin-top: 20px; } .team-modal-meta-item { display: flex; flex-direction: column; align-items: center; background: #F7F6FC; border-radius: 14px; padding: 14px 22px; } .team-modal-meta-num { font-size: 28px; font-weight: 700; color: #6C5CE0; } .team-modal-meta-label { font-size: 11px; font-weight: 600; color: #5A5570; text-transform: uppercase; letter-spacing: .06em; text-align: center; } .team-modal-certs-wrap { margin-top: 20px; padding-top: 18px; border-top: 1px solid #ECE8FC; } .team-modal-certs-heading { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #8a7cb0; margin: 0 0 12px; } .team-modal-certs-list { display: flex; flex-wrap: wrap; gap: 8px; } .team-modal-cert-tag { font-size: 12px; font-weight: 600; color: #141230; background: #F7F6FC; border: 1px solid #E2DEF2; border-radius: 10px; padding: 6px 14px; transition: all .2s ease; } .team-modal-cert-tag:hover { border-color: #6C5CE0; background: #ECE8FC; } /* Modal footer */ .team-modal-footer { margin-top: 24px; padding-top: 18px; border-top: 1px solid #ECE8FC; text-align: center; } /* ═══════════════ Responsive — Team showcase ═══════════════ */ @media (max-width: 960px) { .team-showcase-container { grid-template-columns: 1fr; gap: 36px; } .team-showcase-left { position: static; } .team-members-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .team-member-photo-frame { width: 130px; height: 130px; } .team-member-name { font-size: 18px; } } @media (max-width: 560px) { .team-members-grid { grid-template-columns: 1fr; gap: 16px; } .team-member-item { padding: 28px 18px 24px; } .team-member-photo-frame { width: 120px; height: 120px; } .team-member-name { font-size: 18px; } .team-bio-box { padding: 24px 20px 20px; } .team-modal-panel { padding: 24px 18px 20px; } .team-modal-header { flex-direction: column; text-align: center; } .team-modal-avatar { margin: 0 auto; } } /* Bio fade animation on member switch */ .team-bio-fade-out { animation: bioPanelFadeOut .18s ease-out forwards; } .team-bio-fade-in { animation: bioPanelFadeIn .22s ease-in forwards; } @keyframes bioPanelFadeOut { to { opacity: 0; transform: translateY(6px); } } @keyframes bioPanelFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════════════════ APPEXCHANGE PROOF GRID ═══════════════════════════════════════════════════════════════════════════ */ .appex-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .appex-stat-card { display: flex; flex-direction: column; background: #ffffff; border: 1.5px solid #E2DEF2; border-radius: 20px; padding: 28px 24px 24px; box-shadow: 0 4px 18px rgba(20,18,48,0.04); transition: all .28s cubic-bezier(.22,1,.36,1); } .appex-stat-card:hover { transform: translateY(-4px); border-color: #6C5CE0; box-shadow: 0 12px 36px rgba(108,92,224,0.12); } .appex-stat-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: #6C5CE0; margin-bottom: 10px; } .appex-stat-value { font-size: 3rem; font-weight: 700; color: #141230; line-height: 1; letter-spacing: -.04em; margin-bottom: 8px; } .appex-stat-value--text { font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.2; } .appex-stat-sub { font-size: 12.5px; line-height: 1.55; color: #5A5570; margin-top: auto; } @media (max-width: 900px) { .appex-proof-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .appex-proof-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════════════ ECOSYSTEM PLATFORM SHOWCASE (Salesforce, MuleSoft, Tableau, Slack) ═══════════════════════════════════════════════════════════════════════════ */ /* — Standalone Ecosystem Section (Home, About & Solutions) — */ .home-ecosystem-bar-section, .about-ecosystem-section { padding: 30px 0 60px; position: relative; z-index: 2; } .home-ecosystem-card-box, .about-ecosystem-box, .solutions-ecosystem-banner { background: #ffffff; border: 1px solid #E2DEF2; border-radius: 28px; padding: 44px 36px 40px; box-shadow: 0 12px 48px rgba(20, 18, 48, 0.05); margin-bottom: 48px; } .home-ecosystem-header, .about-ecosystem-header, .solutions-ecosystem-header { text-align: center; margin-bottom: 32px; } .home-ecosystem-eyebrow, .about-ecosystem-eyebrow, .solutions-ecosystem-eyebrow { display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #6C5CE0; } .home-ecosystem-platforms-grid, .about-ecosystem-grid, .solutions-ecosystem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .ecosystem-platform-tile, .about-platform-card, .solutions-platform-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 20px 24px; border-radius: 20px; background: #F8F7FD; border: 1.5px solid #E6E1F5; transition: all .32s cubic-bezier(.22, 1, .36, 1); } .ecosystem-platform-tile:hover, .about-platform-card:hover, .solutions-platform-card:hover { transform: translateY(-6px); background: #ffffff; border-color: #6C5CE0; box-shadow: 0 16px 40px rgba(108, 92, 224, 0.14); } .ecosystem-platform-logo-box, .about-platform-logo-frame, .solutions-platform-logo-frame { height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; width: 100%; } .ecosystem-platform-logo-box img, .about-platform-logo-frame img, .solutions-platform-logo-frame img { display: block; object-fit: contain; transition: transform .3s ease; } .ecosystem-platform-tile:hover .ecosystem-platform-logo-box img, .about-platform-card:hover .about-platform-logo-frame img, .solutions-platform-card:hover .solutions-platform-logo-frame img { transform: scale(1.08); } /* Individual logo size adjustments for optical balance */ .ecosystem-img-salesforce, .about-platform-img.ecosystem-img-salesforce, .solutions-logo-salesforce { height: 52px; max-width: 130px; } .ecosystem-img-mulesoft, .about-platform-img.ecosystem-img-mulesoft, .solutions-logo-mulesoft { height: 44px; max-width: 150px; } .ecosystem-img-tableau, .about-platform-img.ecosystem-img-tableau, .solutions-logo-tableau { height: 44px; max-width: 170px; } .ecosystem-img-slack, .about-platform-img.ecosystem-img-slack, .solutions-logo-slack { height: 38px; max-width: 140px; } /* Fallback for about-platform-img without individual class */ .about-platform-img { max-height: 48px; max-width: 150px; width: auto; object-fit: contain; } .ecosystem-platform-title, .about-platform-name, .solutions-platform-name { font-size: 18px; font-weight: 700; color: #141230; margin: 0 0 6px; letter-spacing: -.01em; } .ecosystem-platform-desc, .about-platform-role, .solutions-platform-desc { font-size: 13px; line-height: 1.6; color: #5A5570; margin: 0; } /* Fallback for solutions pill format */ .solutions-ecosystem-logo { height: 60px; padding: 10px 20px; background: #ffffff; border: 1.5px solid #E2DEF2; border-radius: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(20,18,48,0.03); transition: all .25s ease; } .solutions-ecosystem-logo:hover { transform: translateY(-2px); border-color: #6C5CE0; box-shadow: 0 8px 20px rgba(108,92,224,0.12); } .solutions-ecosystem-logo img { max-height: 42px; max-width: 140px; width: auto; object-fit: contain; } /* — Footer Ecosystem Bar — */ /* Footer column widths: the brand column carries the subscribe form, so it runs wider and the sparse Solutions column narrower than lg:grid-cols-4 allows. */ @media (min-width: 1024px) { .site-footer > .wrap > .grid { grid-template-columns: 1.35fr .75fr 1fr 1.15fr; } } /* Vertical padding lives here rather than a Tailwind class because the compiled tailwind.css only ships utilities the original markup used — py-10/py-12 were silently missing from it, which stripped the footer's padding entirely. */ .site-footer { padding-top: 44px; padding-bottom: 40px; } /* Footer link/body text: near-white so everything is clearly legible on the navy background (the text-white/50 markup classes remain as fallbacks). Written here rather than as new Tailwind classes because the compiled tailwind.css only ships utilities the original markup used. */ .site-footer .grid a { color: rgba(255,255,255,.92); transition: color .18s ease; } .site-footer .grid a:hover { color: #fff; } .site-footer .grid p { color: rgba(255,255,255,.9); } .footer-ecosystem-bar { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .footer-ecosystem-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,0.6); } .footer-ecosystem-logos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .footer-ecosystem-pill { /* Fixed size so every platform chip is identical, regardless of each logo's own aspect ratio (the Salesforce cloud is near-square, the wordmarks 3-4:1). */ width: 122px; height: 48px; padding: 0; border-radius: 12px; background: rgba(255,255,255,0.96); border: 1px solid rgba(255,255,255,0.2); display: inline-flex; align-items: center; justify-content: center; transition: all .2s ease; } .footer-ecosystem-pill:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.3); } .footer-ecosystem-pill img { /* One shared height for all logos; wide wordmarks additionally cap on width and letterbox via object-fit, so nothing overflows its pill. */ max-height: 26px; max-width: 102px; width: auto; height: auto; object-fit: contain; } /* The Salesforce cloud is near-square (1.43:1) where the other logos are 3-4:1 wordmarks, so the shared height renders it as a speck. It fills more of its pill instead — same footprint rules, its own scale. */ .footer-ecosystem-pill-cloud img { max-height: 38px; max-width: 56px; } @media (max-width: 960px) { .home-ecosystem-platforms-grid, .about-ecosystem-grid, .solutions-ecosystem-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (max-width: 560px) { .home-ecosystem-platforms-grid, .about-ecosystem-grid, .solutions-ecosystem-grid { grid-template-columns: 1fr; gap: 14px; } .home-ecosystem-card-box, .about-ecosystem-box, .solutions-ecosystem-banner { padding: 30px 18px 24px; } } /* Brand logo (wide lockup with tagline built in) */ .site-brand { display: inline-flex; align-items: center; } .site-brand-logo { display: block; width: 300px; max-width: 100%; height: auto; } .footer-brand-logo { display: block; width: 300px; max-width: 100%; height: auto; } @media (max-width: 640px) { .site-brand-logo { width: 210px; } } /* Keep the header CTA on one line; give the row room by trimming the logo at desktop widths */ .site-header .button { white-space: nowrap; flex-shrink: 0; } .site-brand { flex-shrink: 0; } @media (min-width: 1280px) { .site-brand-logo { width: 250px; } }