/* ═══════════════════════════════════════════════
MOBILE NUCLEAR OVERRIDE — iOS Safari fix
Forces ALL elements visible, no animations
═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
/* Kill IntersectionObserver-gated elements */
.reveal,
.smooth-reveal,
.anim-fade-up,
.anim-fade-left,
.anim-fade-right,
.anim-scale,
.svc-animated,
.btl-item {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
transition: none !important;
animation-play-state: running !important;
}
/* Kill ALL CSS entrance animations that start hidden */
.hero-badge,
.hero h1,
.hero h1 .line1,
.hero h1 .line2,
.hero-sub,
.hero-actions,
.hero-stats,
.btn-primary,
.btn-ghost,
.section-title,
.section-sub,
.section-label,
.bento-card,
.bento-story,
.bento-mission,
.bento-vision,
.bento-values,
.service-card,
.partner-big-card,
.partner-band,
.partner-logos,
.partner-logo-card,
.region-card,
.value-card,
.mvv-card,
.contact-item,
.contact-form,
.about-grid,
.about-text,
.about-visual,
.bento-grid,
.bento-timeline,
.bento-values-row,
.trust-bar,
.pc-products,
.vision-countries,
.services-grid,
.regions-grid,
.values-grid,
.contact-grid,
section,
footer,
.divider {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
animation: none !important;
-webkit-animation: none !important;
animation-delay: 0s !important;
-webkit-animation-delay: 0s !important;
animation-fill-mode: none !important;
transition-property: border-color, box-shadow, background, color !important;
}
/* Force sections to display */
section,
#about,
#services,
#partners,
#regions,
#contact,
footer {
display: block !important;
}
/* Force reveal/smooth-reveal visible */
.reveal,
.smooth-reveal,
.smooth-reveal.in-view,
.reveal.in-view {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Force svc-animated visible */
.svc-animated,
.svc-animated.in-view {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
/* Fix product chips — show text */
.pc-product {
opacity: 1 !important;
color: rgba(247,244,239,0.80) !important;
visibility: visible !important;
}
/* Hero inner — no parallax transform */
.hero-inner {
opacity: 1 !important;
transform: none !important;
animation: none !important;
-webkit-animation: none !important;
}
/* Fix any element with in-view class requirement */
[class*="reveal"],
[class*="anim-"],
.in-view,
.in-view * {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
}
}
*{touch-action:manipulation;-webkit-tap-highlight-color:rgba(13,13,13,0.1);}button,a,.service-card,.sfil,.atab{touch-action:manipulation!important;cursor:pointer!important;}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;max-width:100vw}
:root{
--beige:#F7F4EF;
--charcoal:#0D0D0D;
--red:#FF3333;
--red2:#FF3333;
--blue:#0055FF;
--beige60:rgba(247,244,239,0.6);
--charcoal5:rgba(13,13,13,0.05);
--charcoal10:rgba(13,13,13,0.1);
--charcoal20:rgba(13,13,13,0.2);
--navy:var(--beige);
--navy2:var(--charcoal);
--white:#FFFFFF;
--glass:rgba(247,244,239,0.05);
--glass2:rgba(247,244,239,0.08);
--glass3:rgba(247,244,239,0.13);
--border:var(--charcoal10);
--border2:var(--charcoal20);
--text:rgba(13,13,13,0.92);
--text2:rgba(13,13,13,0.75);
--text3:rgba(13,13,13,0.55);
}
html{scroll-behavior:smooth}
body{
font-family:'Inter',sans-serif;
background:var(--navy);
color:var(--text);
overflow-x:hidden;
max-width:100vw;
line-height:1.6;
/* Warm parchment texture */
background-image:
radial-gradient(ellipse 80% 60% at 20% 10%, rgba(120,170,210,0.20) 0%, transparent 60%),
radial-gradient(ellipse 60% 80% at 80% 90%, rgba(120,170,210,0.16) 0%, transparent 55%);
}
/* ─── CANVAS BG ─── */
#bg-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* ─── NAV ─── */
nav{
position:fixed;top:0;left:0;right:0;z-index:1000;
display:flex;align-items:center;justify-content:space-between;
padding:0 5%;height:72px;
background:rgba(247,244,239,0.97);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border-bottom:1px solid rgba(13,13,13,0.30);
transition:background .5s ease, backdrop-filter .5s ease, box-shadow .5s ease, border-color .5s ease;
transition:all .3s;
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{
width:36px;height:36px;border-radius:8px;
background:linear-gradient(135deg,var(--beige),var(--red));
display:flex;align-items:center;justify-content:center;
font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;color:#FFFFFF;
letter-spacing:-0.5px;
}
.logo-text{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;color:#0D0D0D;letter-spacing:-0.3px}
.logo-text span{color:var(--red2)}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{
color:#0D0D0D;font-size:14px;font-weight:700;text-decoration:none;
letter-spacing:0.02em;transition:color .2s;
}
.nav-links a:hover{color:#0D0D0D}
.nav-cta{
background:linear-gradient(135deg,#0055FF,#0055FF);
color:#F7F4EF;border:none;padding:10px 22px;border-radius:8px;
font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;
transition:opacity .2s;
}
.nav-cta:hover{opacity:.85}
/* ─── HERO ─── */
.hero{
position:relative;z-index:1;
min-height:100vh;display:flex;align-items:center;justify-content:center;
text-align:center;padding:120px 5% 80px;
overflow:hidden;
}
.hero-inner{max-width:900px;margin:0 auto}
.hero-badge{
display:inline-flex;align-items:center;gap:8px;
background:rgba(27,79,114,0.18);border:1px solid rgba(27,79,114,0.40);box-shadow:0 1px 6px rgba(0,0,0,0.20);
border-radius:100px;padding:6px 16px;margin-bottom:32px;
font-size:13px;font-weight:500;color:#93C5FD;letter-spacing:0.04em;
}
.badge-dot{width:6px;height:6px;border-radius:50%;background:#0055FF;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero h1{
font-family:'Space Grotesk',sans-serif;
font-size:clamp(42px,7vw,88px);
font-weight:800;line-height:1.0;
letter-spacing:-2px;
margin-bottom:28px;
}
.hero h1 .line1{display:block;color:#0D0D0D;text-shadow:0 1px 2px rgba(0,0,0,0.08)}
.hero h1 .line2{
display:block;
background:linear-gradient(90deg,#0055FF,#0055FF,#E05C3A);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;
filter:drop-shadow(0 2px 3px rgba(0,0,0,0.25));
}
.hero-sub{
font-size:18px;color:rgba(13,13,13,0.85);max-width:580px;margin:0 auto 48px;
font-weight:500;line-height:1.7;
}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn-primary{
background:linear-gradient(135deg,#0055FF,#0055FF);
color:#F7F4EF;padding:15px 32px;border-radius:10px;
font-size:15px;font-weight:600;text-decoration:none;
border:1px solid rgba(13,13,13,0.30);
transition:transform .2s,box-shadow .2s;
box-shadow:0 4px 20px rgba(13,13,13,0.25);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 50px rgba(13,13,13,0.5)}
.btn-ghost{
background:rgba(13,13,13,0.18);color:#0D0D0D;padding:15px 32px;border-radius:10px;
font-size:15px;font-weight:600;text-decoration:none;
border:1px solid rgba(13,13,13,0.45);
transition:background .2s,border-color .2s;
}
.btn-ghost:hover{background:rgba(13,13,13,0.32);border-color:rgba(13,13,13,0.70)}
.hero-stats{
display:flex;gap:48px;justify-content:center;margin-top:72px;
flex-wrap:wrap;
}
.stat{text-align:center}
.stat-num{
font-family:'Space Grotesk',sans-serif;
font-size:36px;font-weight:800;
background:linear-gradient(135deg,#0055FF,#0055FF);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
filter:drop-shadow(0 2px 3px rgba(0,0,0,0.35));
}
.stat-label{font-size:13px;color:var(--text3);margin-top:4px;letter-spacing:0.04em}
.stat-divider{width:1px;background:var(--border);align-self:stretch}
/* ─── SECTION BASE ─── */
section{position:relative;z-index:1;padding:100px 5%}
.section-label{
display:inline-flex;align-items:center;gap:8px;
font-size:12px;font-weight:600;color:#0055FF;letter-spacing:0.12em;
text-transform:uppercase;margin-bottom:16px;
}
.section-label::before{content:'';width:24px;height:2px;background:#0055FF;border-radius:2px}
.section-title{
font-family:'Space Grotesk',sans-serif;
font-size:clamp(28px,4vw,48px);font-weight:700;
letter-spacing:-1px;line-height:1.15;margin-bottom:16px;color:#0D0D0D;text-shadow:0 1px 2px rgba(0,0,0,0.08);
}
.section-sub{font-size:17px;color:var(--text2);max-width:600px;line-height:1.7}
/* ─── ABOUT ─── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:1200px;margin:60px auto 0}
.about-text p{color:var(--text2);font-size:16px;line-height:1.8;margin-bottom:20px}
.about-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.pill{
background:#0A1F44;
border:1px solid rgba(13,13,13,0.25);
box-shadow:0 1px 4px rgba(0,0,0,0.15);
border-radius:100px;padding:7px 16px;font-size:13px;color:#F7F4EF;font-weight:600;
}
.mvv-cards{display:flex;flex-direction:column;gap:16px}
.mvv-card{
background:#0A1F44;
border:1.5px solid rgba(247,244,239,0.22);
box-shadow:0 4px 16px rgba(0,0,0,0.25);
border-radius:16px;
padding:24px;transition:border-color .3s,transform .3s,box-shadow .3s;
position:relative;overflow:hidden;
}
.mvv-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,#0055FF,transparent);
border-radius:16px 16px 0 0;
}
.mvv-card:hover{border-color:rgba(13,13,13,0.4);transform:translateX(4px)}
.mvv-card h4{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;margin-bottom:8px;color:#F7F4EF}
.mvv-card p{font-size:14px;color:rgba(247,244,239,0.75);line-height:1.6}
/* ─── SERVICES GRID ─── */
.services-header{text-align:center;max-width:700px;margin:0 auto}
.services-grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;max-width:1200px;margin:60px auto 0;
}
.service-card{
background:#0A1F44;
border:1.5px solid rgba(247,244,239,0.22);
border-radius:20px;padding:32px;
box-shadow:0 4px 20px rgba(0,0,0,0.25);
transition:border-color .3s,transform .3s,box-shadow .3s;
cursor:default;position:relative;overflow:hidden;
}
.service-card::after{
content:'';position:absolute;inset:0;border-radius:20px;
background:linear-gradient(135deg,rgba(13,13,13,0.06),transparent);
opacity:0;transition:opacity .3s;
}
.service-card:hover{
border-color:rgba(13,13,13,0.45);
transform:translateY(-6px);
box-shadow:0 12px 40px rgba(13,13,13,0.18),0 0 0 1px rgba(13,13,13,0.12);
}
.service-card:hover::after{opacity:1}
.svc-icon{
width:52px;height:52px;border-radius:14px;margin-bottom:20px;
display:flex;align-items:center;justify-content:center;font-size:26px;
}
.svc-icon.blue{background:rgba(13,13,13,0.15);border:1px solid rgba(13,13,13,0.2)}
.svc-icon.red{background:rgba(220,38,38,0.12);border:1px solid rgba(220,38,38,0.2)}
.svc-icon.teal{background:rgba(20,184,166,0.12);border:1px solid rgba(20,184,166,0.2)}
.svc-icon.purple{background:rgba(139,92,246,0.12);border:1px solid rgba(139,92,246,0.2)}
.service-card h3{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:600;margin-bottom:10px;color:#F7F4EF}
.service-card p{font-size:14px;color:rgba(247,244,239,0.75);line-height:1.7}
.svc-expand-desc,.svc-expand-item,.svc-ebar-label{color:#FF3333}
.svc-tag{
display:inline-block;margin-top:20px;
font-size:12px;font-weight:600;letter-spacing:0.05em;color:#F7F4EF;
padding:4px 10px;border:1px solid rgba(13,13,13,0.30);border-radius:6px;
}
/* ─── GOOGLE PARTNER BAND ─── */
.partner-band{
border-top:1px solid var(--border);border-bottom:1px solid var(--border);
padding:60px 5%;text-align:center;
}
.partner-title{
font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;
color:#0055FF;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:32px;font-weight:700;
}
.partner-logos{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;align-items:center}
.partner-logo-card{
background:#0A1F44;
border:1.5px solid rgba(247,244,239,0.22);
box-shadow:0 2px 8px rgba(0,0,0,0.20);
border-radius:12px;
padding:14px 24px;font-size:14px;font-weight:600;color:rgba(247,244,239,0.75);
display:flex;align-items:center;gap:10px;transition:border-color .2s;
}
.partner-logo-card:hover{border-color:var(--border2);color:#F7F4EF}
.partner-logo-card .dot{width:8px;height:8px;border-radius:50%}
.g-blue{background:#0055FF}.g-red{background:#EA4335}.g-yellow{background:#FBBC05}.g-green{background:#34A853}
/* ─── REGIONS ─── */
.regions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;max-width:1000px;margin:60px auto 0}
.region-card{
background:#0A1F44;
border:1.5px solid rgba(247,244,239,0.22);
box-shadow:0 4px 16px rgba(0,0,0,0.25);
border-radius:16px;
padding:28px 20px;text-align:center;transition:border-color .3s,transform .3s,box-shadow .3s;
}
.region-card:hover{border-color:rgba(13,13,13,0.35);transform:translateY(-4px)}
.region-flag{font-size:32px;margin-bottom:12px}
.region-name{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;color:#F7F4EF}
.region-hq{font-size:11px;color:var(--red2);font-weight:600;letter-spacing:0.08em;margin-top:4px}
/* ─── VALUES ─── */
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;max-width:1200px;margin:60px auto 0}
.value-card{
background:#0A1F44;
border:1.5px solid rgba(247,244,239,0.22);
box-shadow:0 4px 16px rgba(0,0,0,0.25);
border-radius:20px;
padding:32px 24px;text-align:center;transition:border-color .3s,transform .3s,box-shadow .3s;
}
.value-card:hover{border-color:rgba(13,13,13,0.3);transform:translateY(-4px)}
.value-icon{font-size:36px;margin-bottom:16px}
.value-card h4{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;margin-bottom:8px;color:#F7F4EF}
.value-card p{font-size:13px;color:rgba(247,244,239,0.75);line-height:1.6}
/* ─── CONTACT ─── */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:1100px;margin:60px auto 0;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:14px}
.contact-item{
display:flex;align-items:center;gap:18px;
background:linear-gradient(135deg,rgba(10,31,68,0.90),rgba(10,31,68,0.75));
border:1.5px solid rgba(247,244,239,0.22);
box-shadow:0 4px 20px rgba(0,0,0,0.22);
border-radius:16px;padding:18px 22px;
transition:transform .25s,border-color .25s,box-shadow .25s;
position:relative;overflow:hidden;
}
.contact-item::before{
content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
background:linear-gradient(180deg,#0055FF,rgba(13,13,13,0.2));
border-radius:16px 0 0 16px;
}
.contact-item:hover{transform:translateX(5px);border-color:rgba(13,13,13,0.40);box-shadow:0 6px 28px rgba(0,0,0,0.30)}
.contact-ico{
width:46px;height:46px;border-radius:12px;
background:linear-gradient(135deg,rgba(13,13,13,0.20),rgba(13,13,13,0.08));
border:1px solid rgba(13,13,13,0.28);
display:flex;align-items:center;justify-content:center;
font-size:22px;flex-shrink:0;
box-shadow:0 2px 8px rgba(0,0,0,0.20);
}
.contact-item-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.contact-item h5{font-size:10px;font-weight:700;color:#F7F4EF;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:3px}
.contact-item p{font-size:14px;color:#F7F4EF;font-weight:500;line-height:1.5}
.contact-item a{color:#F7F4EF;text-decoration:none;transition:color .2s}
.contact-item a:hover{color:#F7F4EF}
.contact-form{background:#0A1F44;border:1.5px solid rgba(247,244,239,0.22);border-radius:20px;padding:36px;backdrop-filter:blur(8px)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.form-group label{font-size:13px;font-weight:500;color:rgba(247,244,239,0.75)}
.form-group input,.form-group textarea,.form-group select{
background:rgba(247,244,239,0.06);border:1.5px solid rgba(247,244,239,0.25);
border-radius:10px;padding:12px 16px;color:#F7F4EF;font-size:15px;font-family:'Inter',sans-serif;
outline:none;transition:border-color .2s;
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:rgba(13,13,13,0.6)}
.form-group textarea{min-height:100px;resize:vertical}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(247,244,239,0.45)}
.form-group select option{background:#0A1F44;color:#F7F4EF}
.form-submit{
width:100%;padding:15px;border:none;border-radius:10px;
background:linear-gradient(135deg,#0055FF,#0055FF);
color:#FFFFFF;font-size:15px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;
transition:opacity .2s,transform .2s;
}
.form-submit:hover{opacity:.9;transform:translateY(-1px)}
/* ─── FOOTER ─── */
footer{
position:relative;z-index:1;
border-top:1px solid var(--border);
padding:48px 5%;
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;
}
.footer-brand{display:flex;flex-direction:column;gap:8px}
.footer-brand p{font-size:13px;color:rgba(13,13,13,0.55)}
.footer-links{display:flex;gap:28px;list-style:none;flex-wrap:wrap}
.footer-links a{font-size:13px;color:var(--text3);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:#F7F4EF}
.footer-socials{display:flex;gap:12px}
.social-btn{
width:42px;height:42px;border-radius:10px;background:#0A1F44;
border:1px solid rgba(13,13,13,0.22);display:flex;align-items:center;justify-content:center;
text-decoration:none;color:rgba(247,244,239,0.80);transition:background .2s,color .2s,transform .2s,border-color .2s;
}
.social-btn:hover{background:rgba(13,13,13,0.20);color:#F7F4EF;border-color:rgba(13,13,13,0.50);transform:translateY(-3px)}
/* ─── 3D FLOATING SHAPES ─── */
.shape{
position:absolute;border-radius:50%;
background:radial-gradient(circle,rgba(13,13,13,0.15),transparent 70%);
pointer-events:none;
}
/* ─── SECTION DIVIDER ─── */
.divider{
width:100%;height:1px;
background:linear-gradient(90deg,transparent,var(--border),transparent);
margin:0;
}
/* ─── INTERACTIVE ABOUT CARDS ─── */
.tappable-card{cursor:pointer;user-select:none}
.card-expand-hint{
font-size:11px;color:rgba(247,244,239,0.30);margin-top:10px;
transition:opacity .3s;letter-spacing:0.05em;
}
.card-expanded{
max-height:0;overflow:hidden;
transition:max-height .45s cubic-bezier(.4,0,.2,1), opacity .35s ease;
opacity:0;
}
.mvv-card.open .card-expanded{max-height:200px;opacity:1}
.mvv-card.open .card-expand-hint{opacity:0;height:0;margin:0}
.mvv-card.open{border-color:rgba(13,13,13,0.5);background:rgba(13,13,13,0.07)}
.mvv-card.open::before{background:linear-gradient(90deg,var(--beige,#0055FF),transparent)}
/* pill click ripple */
.tappable{cursor:pointer;position:relative;overflow:hidden;transition:all .25s}
.tappable:active{transform:scale(0.93)}
.tappable.lit{
background:rgba(13,13,13,0.15);
border-color:rgba(13,13,13,0.55);
color:#0055FF;
}
@keyframes ripple{
from{transform:scale(0);opacity:.5}
to{transform:scale(4);opacity:0}
}
.ripple-dot{
position:absolute;border-radius:50%;
width:30px;height:30px;margin:-15px;
background:rgba(13,13,13,0.4);
pointer-events:none;animation:ripple .5s ease-out forwards;
}
/* ─── INTERACTIVE SERVICE CARDS ─── */
.service-card{cursor:pointer}
.service-card .svc-detail{
max-height:0;overflow:hidden;opacity:0;
transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin .3s;
margin-top:0;
}
.service-card.open .svc-detail{max-height:200px;opacity:1;margin-top:14px}
.service-card.open{
border-color:rgba(13,13,13,0.45);
box-shadow:0 20px 60px rgba(13,13,13,0.18),0 0 0 1px rgba(13,13,13,0.15),
inset 0 1px 0 rgba(13,13,13,0.1);
}
.service-card .svc-arrow{
display:inline-block;margin-left:6px;font-size:12px;
transition:transform .3s;color:rgba(247,244,239,0.65);
}
.service-card.open .svc-arrow{transform:rotate(180deg);color:#F7F4EF}
/* pulse on open */
@keyframes cardPop{
0%{transform:translateY(-6px) scale(1)}
40%{transform:translateY(-8px) scale(1.015)}
100%{transform:translateY(-6px) scale(1)}
}
.service-card.open{animation:cardPop .3s ease}
.region-flag-img{
margin-bottom:10px;
border-radius:6px;overflow:hidden;
box-shadow:0 4px 16px rgba(0,0,0,0.4);
border:1px solid rgba(255,255,255,0.12);
display:inline-block;
animation:flagShine 4s ease-in-out infinite;
}
.regions-grid .region-card:nth-child(2) .region-flag-img{animation-delay:.8s}
.regions-grid .region-card:nth-child(3) .region-flag-img{animation-delay:1.6s}
@keyframes flagShine{
0%,100%{box-shadow:0 4px 16px rgba(0,0,0,0.4);border-color:rgba(13,13,13,0.20)}
50%{box-shadow:0 6px 24px rgba(13,13,13,0.25);border-color:rgba(13,13,13,0.35)}
}
/* ─── SCROLL REVEAL ─── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
/* ─── RESPONSIVE ─── */
@media(max-width:900px){
.about-grid,.contact-grid{grid-template-columns:1fr}
.nav-links{display:none}
#hamburger{display:flex!important}
.hero-stats .stat-divider{display:none}
}
@media(max-width:600px){
.form-row{grid-template-columns:1fr}
.hero-stats{gap:24px}
}
/* ════════════════════════════════════
PERSISTENT LOOPING ANIMATIONS
════════════════════════════════════ */
/* Timeline dots — continuous pulse */
.tl-dot {
animation: tlDotPulse 1.8s ease-in-out infinite !important;
}
.tl-item:nth-child(2) .tl-dot { animation-delay: .45s !important; }
.tl-item:nth-child(3) .tl-dot { animation-delay: .9s !important; }
.tl-item:nth-child(4) .tl-dot { animation-delay: 1.35s !important; }
@keyframes tlDotPulse {
0%,100% { box-shadow:0 0 0 4px rgba(13,13,13,0.15); transform:scale(1); background:#0055FF; }
50% { box-shadow:0 0 0 10px rgba(13,13,13,0.0); transform:scale(1.25); background:#0055FF; }
}
/* Timeline items — float up/down continuously */
.tl-item.visible {
animation: tlFloat 3.5s ease-in-out infinite !important;
}
.tl-item:nth-child(2).visible { animation-delay: .5s !important; }
.tl-item:nth-child(3).visible { animation-delay: 1s !important; }
.tl-item:nth-child(4).visible { animation-delay: 1.5s !important; }
@keyframes tlFloat {
0%,100% { transform:translateX(0) translateY(0); }
50% { transform:translateX(4px) translateY(-3px); }
}
/* Highlight word — glow pulse */
.highlight-word {
animation: highlightGlow 2.5s ease-in-out infinite;
}
@keyframes highlightGlow {
0%,100% { background:rgba(13,13,13,0.10); color:#0055FF; }
50% { background:rgba(13,13,13,0.28); color:#0D0D0D; }
}
/* Pills — wave shimmer */
.pill.tappable {
animation: pillWave 3s ease-in-out infinite;
}
.about-pills .tappable:nth-child(1){ animation-delay:0s; }
.about-pills .tappable:nth-child(2){ animation-delay:.4s; }
.about-pills .tappable:nth-child(3){ animation-delay:.8s; }
.about-pills .tappable:nth-child(4){ animation-delay:1.2s; }
.about-pills .tappable:nth-child(5){ animation-delay:1.6s; }
@keyframes pillWave {
0%,80%,100% { border-color:rgba(13,13,13,0.20); color:rgba(247,244,239,0.60); }
40% { border-color:rgba(13,13,13,0.55); color:#F7F4EF; transform:translateY(-3px); }
}
/* MVP cards — breathing border */
.mvv-card {
animation: cardBreath 4s ease-in-out infinite;
}
.mvv-cards .mvv-card:nth-child(2){ animation-delay:1.3s; }
.mvv-cards .mvv-card:nth-child(3){ animation-delay:2.6s; }
@keyframes cardBreath {
0%,100% { border-color:rgba(13,13,13,0.18); box-shadow:none; }
50% { border-color:rgba(13,13,13,0.35); box-shadow:0 0 20px rgba(13,13,13,0.07); }
}
/* Mission points — left-side glow sweep */
.mpoint {
animation: mpointSweep 4s ease-in-out infinite;
}
.mission-points .mpoint:nth-child(1){ animation-delay:0s; }
.mission-points .mpoint:nth-child(2){ animation-delay:1s; }
.mission-points .mpoint:nth-child(3){ animation-delay:2s; }
.mission-points .mpoint:nth-child(4){ animation-delay:3s; }
@keyframes mpointSweep {
0%,70%,100% { background:rgba(255,255,255,0.55); border-color:rgba(13,13,13,0.18); color:rgba(13,13,13,0.75); }
35% { background:rgba(13,13,13,0.1); border-color:rgba(13,13,13,0.35); color:#0055FF; transform:translateX(6px); }
}
/* Mp dots — pulse */
.mp-dot {
animation: mpDot 4s ease-in-out infinite;
}
.mission-points .mpoint:nth-child(2) .mp-dot { animation-delay:1s; }
.mission-points .mpoint:nth-child(3) .mp-dot { animation-delay:2s; }
.mission-points .mpoint:nth-child(4) .mp-dot { animation-delay:3s; }
@keyframes mpDot {
0%,70%,100% { transform:scale(1); }
35% { transform:scale(1.7); box-shadow:0 0 8px rgba(13,13,13,0.5); }
}
/* Vision globe rings — continuous expand */
.globe-ring {
animation: globeExpand 2.4s ease-out infinite !important;
animation-delay: var(--delay) !important;
}
/* Globe center — spin + pulse */
.globe-center {
animation: globeSpin 8s linear infinite, globePulse 2s ease-in-out infinite !important;
}
@keyframes globePulse {
0%,100% { transform:scale(1); }
50% { transform:scale(1.15); }
}
/* Value hexes — continuous float wave */
.value-hex {
animation: hexFloat 4s ease-in-out infinite;
}
.values-interactive .value-hex:nth-child(1){ animation-delay:0s; }
.values-interactive .value-hex:nth-child(2){ animation-delay:.6s; }
.values-interactive .value-hex:nth-child(3){ animation-delay:1.2s; }
.values-interactive .value-hex:nth-child(4){ animation-delay:1.8s; }
.values-interactive .value-hex:nth-child(5){ animation-delay:2.4s; }
@keyframes hexFloat {
0%,100% { transform:translateY(0); }
50% { transform:translateY(-8px); }
}
/* Hex icons — spin/pulse alternating */
.hex-icon {
animation: hexIconSpin 5s ease-in-out infinite;
}
.values-interactive .value-hex:nth-child(1) .hex-icon { animation-delay:0s; }
.values-interactive .value-hex:nth-child(2) .hex-icon { animation-delay:.6s; }
.values-interactive .value-hex:nth-child(3) .hex-icon { animation-delay:1.2s; }
.values-interactive .value-hex:nth-child(4) .hex-icon { animation-delay:1.8s; }
.values-interactive .value-hex:nth-child(5) .hex-icon { animation-delay:2.4s; }
@keyframes hexIconSpin {
0%,80%,100% { transform:scale(1) rotate(0deg); }
40% { transform:scale(1.3) rotate(15deg); }
}
/* Service cards — continuous shimmer on svc-card-bg */
.service-card .svc-card-bg {
animation: svcBgShimmer 4s ease-in-out infinite;
opacity: 0.6 !important;
}
.services-grid .service-card:nth-child(1) .svc-card-bg { animation-delay:0s; }
.services-grid .service-card:nth-child(2) .svc-card-bg { animation-delay:.5s; }
.services-grid .service-card:nth-child(3) .svc-card-bg { animation-delay:1s; }
.services-grid .service-card:nth-child(4) .svc-card-bg { animation-delay:1.5s; }
.services-grid .service-card:nth-child(5) .svc-card-bg { animation-delay:2s; }
.services-grid .service-card:nth-child(6) .svc-card-bg { animation-delay:2.5s; }
.services-grid .service-card:nth-child(7) .svc-card-bg { animation-delay:3s; }
.services-grid .service-card:nth-child(8) .svc-card-bg { animation-delay:3.5s; }
@keyframes svcBgShimmer {
0%,100% { opacity:0; }
50% { opacity:0.6; }
}
/* Service icons — continuous bounce */
.svc-icon-anim {
display: inline-block;
animation: svcIconLoop 3s ease-in-out infinite;
}
.service-card:nth-child(1) .svc-icon-anim { animation-delay:0s; }
.service-card:nth-child(2) .svc-icon-anim { animation-delay:.37s; }
.service-card:nth-child(3) .svc-icon-anim { animation-delay:.74s; }
.service-card:nth-child(4) .svc-icon-anim { animation-delay:1.1s; }
.service-card:nth-child(5) .svc-icon-anim { animation-delay:1.5s; }
.service-card:nth-child(6) .svc-icon-anim { animation-delay:1.85s; }
.service-card:nth-child(7) .svc-icon-anim { animation-delay:2.2s; }
.service-card:nth-child(8) .svc-icon-anim { animation-delay:2.6s; }
@keyframes svcIconLoop {
0%,100% { transform:translateY(0) scale(1) rotate(0deg); }
30% { transform:translateY(-6px) scale(1.15) rotate(-5deg); }
60% { transform:translateY(-3px) scale(1.05) rotate(3deg); }
}
/* Service feature tags — shimmer */
.svc-features span {
color: #FF3333;
animation: featureShimmer 5s ease-in-out infinite;
}
.svc-features span:nth-child(2){ animation-delay:.8s; }
.svc-features span:nth-child(3){ animation-delay:1.6s; }
@keyframes featureShimmer {
0%,70%,100% { background:rgba(247,244,239,0.05); color:#FF3333; border-color:rgba(13,13,13,0.18); }
35% { background:rgba(13,13,13,0.14); color:#FF3333; border-color:rgba(13,13,13,0.40); }
}
/* Section label — continuous slide */
.section-label {
animation: labelPulse 3s ease-in-out infinite;
}
@keyframes labelPulse {
0%,100% { opacity:1; letter-spacing:0.12em; }
50% { opacity:.7; letter-spacing:0.18em; }
}
/* Section label bar */
.section-label::before {
animation: labelBar 3s ease-in-out infinite;
}
@keyframes labelBar {
0%,100% { width:24px; opacity:1; }
50% { width:40px; opacity:.6; }
}
/* Stat numbers — count glow */
.stat-num {
animation: statGlow 4s ease-in-out infinite;
}
.hero-stats .stat:nth-child(1) .stat-num { animation-delay:0s; }
.hero-stats .stat:nth-child(3) .stat-num { animation-delay:1s; }
.hero-stats .stat:nth-child(5) .stat-num { animation-delay:2s; }
.hero-stats .stat:nth-child(7) .stat-num { animation-delay:3s; }
@keyframes statGlow {
0%,100% { filter:brightness(1); }
50% { filter:brightness(1.4); }
}
/* Hero badge dot — already pulsing, enhance */
.badge-dot {
animation: badgeDot 1.4s ease-in-out infinite !important;
}
@keyframes badgeDot {
0%,100% { opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(59,130,246,0); }
50% { opacity:.5; transform:scale(1.3); box-shadow:0 0 0 6px rgba(59,130,246,0); }
}
/* Tab active underline — animated width */
.atab.active {
animation: tabUnderline 2s ease-in-out infinite;
}
@keyframes tabUnderline {
0%,100% { border-bottom-color:rgba(13,13,13,0.50); }
50% { border-bottom-color:#0055FF; }
}
/* Region cards — wave float */
.region-card {
animation: regionFloat 5s ease-in-out infinite;
}
.regions-grid .region-card:nth-child(1){ animation-delay:0s; }
.regions-grid .region-card:nth-child(2){ animation-delay:.6s; }
.regions-grid .region-card:nth-child(3){ animation-delay:1.2s; }
.regions-grid .region-card:nth-child(4){ animation-delay:1.8s; }
.regions-grid .region-card:nth-child(5){ animation-delay:2.4s; }
@keyframes regionFloat {
0%,100% { transform:translateY(0); }
50% { transform:translateY(-6px); border-color:rgba(13,13,13,0.3); }
}
/* Region flags — wiggle */
.region-flag {
display:block;
animation: flagWiggle 5s ease-in-out infinite;
}
.regions-grid .region-card:nth-child(1) .region-flag{ animation-delay:0s; }
.regions-grid .region-card:nth-child(2) .region-flag{ animation-delay:.6s; }
.regions-grid .region-card:nth-child(3) .region-flag{ animation-delay:1.2s; }
.regions-grid .region-card:nth-child(4) .region-flag{ animation-delay:1.8s; }
.regions-grid .region-card:nth-child(5) .region-flag{ animation-delay:2.4s; }
@keyframes flagWiggle {
0%,80%,100% { transform:scale(1) rotate(0deg); }
40% { transform:scale(1.2) rotate(-8deg); }
}
/* Partner logo cards — glow pulse */
.partner-logo-card {
animation: partnerGlow 4s ease-in-out infinite;
}
.partner-logos .partner-logo-card:nth-child(1){ animation-delay:0s; }
.partner-logos .partner-logo-card:nth-child(2){ animation-delay:.6s; }
.partner-logos .partner-logo-card:nth-child(3){ animation-delay:1.2s; }
.partner-logos .partner-logo-card:nth-child(4){ animation-delay:1.8s; }
.partner-logos .partner-logo-card:nth-child(5){ animation-delay:2.4s; }
@keyframes partnerGlow {
0%,100% { border-color:rgba(13,13,13,0.18); transform:translateY(0); }
50% { border-color:rgba(13,13,13,0.35); transform:translateY(-4px); }
}
/* "Learn more →" arrow bounce */
.svc-learn {
animation: learnArrow 2s ease-in-out infinite;
color: rgba(247,244,239,0.70);
}
@keyframes learnArrow {
0%,100% { transform:translateX(0); color:rgba(247,244,239,0.70); }
50% { transform:translateX(5px); color:#F7F4EF; }
}
/* Value card border rotating gradient */
.value-card {
animation: valueCardGlow 6s ease-in-out infinite;
}
.values-grid .value-card:nth-child(1){ animation-delay:0s; }
.values-grid .value-card:nth-child(2){ animation-delay:1.5s; }
.values-grid .value-card:nth-child(3){ animation-delay:3s; }
.values-grid .value-card:nth-child(4){ animation-delay:4.5s; }
@keyframes valueCardGlow {
0%,100% { border-color:rgba(13,13,13,0.18); }
50% { border-color:rgba(13,13,13,0.3); box-shadow:0 0 24px rgba(13,13,13,0.06); }
}
/* MVV card before line — animated width */
.mvv-card::before {
animation: mvvLine 3s ease-in-out infinite;
}
.mvv-cards .mvv-card:nth-child(2)::before{ animation-delay:1s; }
.mvv-cards .mvv-card:nth-child(3)::before{ animation-delay:2s; }
@keyframes mvvLine {
0%,100% { width:30%; opacity:.6; }
50% { width:100%; opacity:1; }
}
/* Respect reduced-motion */
@media (min-width: 1025px) {
#hamburger { display: none !important; }
.nav-links { display: flex !important; }
.nav-cta { display: inline-block !important; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}
/* ════════════════════════════════════
PARTNER SECTION
════════════════════════════════════ */
.partner-band {
padding: 100px 5%;
border-top: 1px solid rgba(13,13,13,0.12);
border-bottom: 1px solid rgba(255,255,255,0.06);
position: relative;
z-index: 1;
overflow: hidden;
}
.partner-band::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
}
.partners-header { text-align: center; margin-bottom: 0; }
/* Partner Cards Row */
.partner-cards-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 1100px;
margin: 0 auto 48px;
}
@media(max-width:800px){ .partner-cards-row{grid-template-columns:1fr} }
.partner-big-card {
background: #0A1F44;
border: 1.5px solid rgba(247,244,239,0.22);
box-shadow: 0 4px 24px rgba(0,0,0,0.30);
border-radius: 24px;
padding: 36px;
position: relative;
overflow: hidden;
transition: border-color .4s, transform .4s, box-shadow .4s;
cursor: default;
animation: partnerCardBreath 5s ease-in-out infinite;
}
#pc-google { animation-delay: 0s; }
#pc-muvi { animation-delay: 2.5s; }
@keyframes partnerCardBreath {
0%,100% { border-color:rgba(13,13,13,0.18); box-shadow:none; }
50% { border-color:rgba(13,13,13,0.2); box-shadow:0 0 40px rgba(13,13,13,0.04); }
}
.partner-big-card:hover {
border-color: rgba(13,13,13,0.35);
transform: translateY(-6px);
box-shadow: 0 24px 60px rgba(13,13,13,0.18);
animation: none;
}
/* Glow blob behind card */
.pc-glow {
position: absolute;
width: 300px; height: 300px;
border-radius: 50%;
top: -100px; right: -100px;
pointer-events: none;
opacity: 0.6;
animation: pcGlowPulse 4s ease-in-out infinite;
}
.pc-glow-google { background: radial-gradient(circle, rgba(66,133,244,0.1), transparent 70%); }
.pc-glow-muvi { background: radial-gradient(circle, rgba(59,130,246,0.08), transparent 70%); animation-delay:2s; }
@keyframes pcGlowPulse {
0%,100%{ transform:scale(1); opacity:.5; }
50% { transform:scale(1.3); opacity:.9; }
}
/* Card header */
.pc-header {
display: flex;
align-items: flex-start;
gap: 18px;
margin-bottom: 20px;
}
.pc-logo-wrap {
width: 64px; height: 64px;
border-radius: 16px;
background: rgba(13,13,13,0.06);
border: 1px solid rgba(13,13,13,0.20);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
animation: logoWrap 5s ease-in-out infinite;
}
#pc-google .pc-logo-wrap { animation-delay:0s; }
#pc-muvi .pc-logo-wrap { animation-delay:2.5s; }
@keyframes logoWrap {
0%,100%{ border-color:rgba(13,13,13,0.20); }
50% { border-color:rgba(13,13,13,0.3); box-shadow:0 0 20px rgba(13,13,13,0.08); }
}
.pc-eyebrow {
font-size: 11px;
font-weight: 600;
color: rgba(247,244,239,0.55);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 4px;
}
.pc-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 22px;
font-weight: 700;
margin-bottom: 8px;
line-height: 1.1;
color: #F7F4EF;
}
.pc-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(13,13,13,0.12);
border: 1px solid rgba(13,13,13,0.25);
border-radius: 100px;
padding: 4px 12px;
font-size: 12px;
font-weight: 600;
color: #F7F4EF;
animation: badgePing 3s ease-in-out infinite;
}
#pc-muvi .pc-badge { animation-delay: 1.5s; }
@keyframes badgePing {
0%,100%{ border-color:rgba(13,13,13,0.25); background:rgba(13,13,13,0.08); }
50% { border-color:rgba(13,13,13,0.5); background:rgba(13,13,13,0.18); }
}
.pc-badge-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #0055FF;
animation: badgeDotPulse 1.5s ease-in-out infinite;
}
@keyframes badgeDotPulse {
0%,100%{ transform:scale(1); opacity:1; }
50% { transform:scale(1.5); opacity:.6; }
}
/* Description */
.pc-desc {
font-size: 14px;
color: rgba(247,244,239,0.68);
line-height: 1.75;
margin-bottom: 24px;
border-left: 3px solid #0D0D0D;
padding-left: 14px;
animation: descBorder 4s ease-in-out infinite;
}
#pc-muvi .pc-desc { animation-delay: 2s; }
@keyframes descBorder {
0%,100%{ border-left-color:rgba(13,13,13,0.15); }
50% { border-left-color:rgba(13,13,13,0.5); }
}
/* Product chips */
.pc-products {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 28px;
}
.pc-product {
display: flex;
align-items: center;
gap: 7px;
background: rgba(var(--pc), 0.08);
border: 1px solid rgba(var(--pc), 0.2);
border-radius: 8px;
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
color: rgba(247,244,239,0.80);
transition: all .3s;
animation: chipWave 5s ease-in-out infinite;
}
.pc-products .pc-product:nth-child(1){ animation-delay:0s; }
.pc-products .pc-product:nth-child(2){ animation-delay:.5s; }
.pc-products .pc-product:nth-child(3){ animation-delay:1s; }
.pc-products .pc-product:nth-child(4){ animation-delay:1.5s; }
.pc-products .pc-product:nth-child(5){ animation-delay:2s; }
@keyframes chipWave {
0%,70%,100%{ transform:translateY(0); background:rgba(var(--pc),0.08); border-color:rgba(var(--pc),0.2); }
35% { transform:translateY(-3px); background:rgba(var(--pc),0.18); border-color:rgba(var(--pc),0.45); color:#0D0D0D; }
}
.pc-product:hover {
background: rgba(var(--pc), 0.22);
border-color: rgba(var(--pc), 0.5);
color: #F7F4EF;
transform: translateY(-3px);
animation: none;
}
/* Stat row */
.pc-stat-row {
display: flex;
gap: 0;
border-top: 1px solid rgba(13,13,13,0.12);
padding-top: 20px;
}
.pc-stat {
flex: 1;
text-align: center;
padding: 0 8px;
border-right: 1px solid rgba(13,13,13,0.12);
}
.pc-stat:last-child { border-right: none; }
.pc-stat-n {
display: block;
font-family: 'Space Grotesk', sans-serif;
font-size: 20px;
font-weight: 700;
color: #F7F4EF;
animation: statNumGlow 4s ease-in-out infinite;
}
.pc-stat-row .pc-stat:nth-child(2) .pc-stat-n { animation-delay: 1.3s; }
.pc-stat-row .pc-stat:nth-child(3) .pc-stat-n { animation-delay: 2.6s; }
@keyframes statNumGlow {
0%,100%{ color:#F7F4EF; }
50% { color:#FF3333; text-shadow:0 0 12px rgba(13,13,13,0.15); }
}
.pc-stat-l {
display: block;
font-size: 11px;
color: rgba(247,244,239,0.55);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 2px;
}
/* Trust bar */
.trust-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
max-width: 760px;
margin: 0 auto;
background: rgba(255,255,255,0.40);
border: 1px solid rgba(13,13,13,0.15);
border-radius: 16px;
padding: 20px 32px;
flex-wrap: wrap;
}
.trust-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 28px;
font-size: 13px;
font-weight: 600;
color: rgba(13,13,13,0.65);
animation: trustItemGlow 6s ease-in-out infinite;
transition: color .3s;
}
.trust-bar .trust-item:nth-child(1){ animation-delay:0s; }
.trust-bar .trust-item:nth-child(3){ animation-delay:1.5s; }
.trust-bar .trust-item:nth-child(5){ animation-delay:3s; }
.trust-bar .trust-item:nth-child(7){ animation-delay:4.5s; }
@keyframes trustItemGlow {
0%,70%,100%{ color:rgba(13,13,13,0.60); }
35% { color:#0055FF; }
}
.trust-item svg { flex-shrink:0; animation: trustIcon 6s ease-in-out infinite; }
.trust-bar .trust-item:nth-child(1) svg { animation-delay:0s; }
.trust-bar .trust-item:nth-child(3) svg { animation-delay:1.5s; }
.trust-bar .trust-item:nth-child(5) svg { animation-delay:3s; }
.trust-bar .trust-item:nth-child(7) svg { animation-delay:4.5s; }
@keyframes trustIcon {
0%,70%,100%{ transform:scale(1) rotate(0deg); }
35% { transform:scale(1.2) rotate(-8deg); }
}
.trust-divider {
width: 1px; height: 32px;
background: rgba(13,13,13,0.15);
flex-shrink: 0;
}
@media(max-width:600px){
.trust-divider{display:none}
.trust-item{padding:6px 12px}
}
/* ════════════════════════════════════
BENTO GRID ABOUT
════════════════════════════════════ */
.bento-grid {
display: grid;
grid-template-columns: 1.35fr 1fr;
grid-template-rows: auto auto auto;
gap: 16px;
max-width: 1100px;
margin: 0 auto;
}
@media(max-width:860px){ .bento-grid{grid-template-columns:1fr} }
.bento-card {
position: relative;
border: 1.5px solid rgba(247,244,239,0.22);
border-radius: 24px;
padding: 36px;
overflow: hidden;
background: #0A1F44;
box-shadow: 0 4px 24px rgba(0,0,0,0.30);
transition: border-color .4s, transform .35s, box-shadow .4s;
}
.bento-card:hover {
border-color: rgba(13,13,13,0.3);
transform: translateY(-4px);
box-shadow: 0 20px 60px rgba(13,13,13,0.15);
}
/* Layout placements */
.bento-story { grid-column:1; grid-row:1/3; }
.bento-mission{ grid-column:2; grid-row:1; }
.bento-vision { grid-column:2; grid-row:2; }
.bento-values { grid-column:1/3; grid-row:3; }
@media(max-width:860px){
.bento-story,.bento-mission,.bento-vision,.bento-values{grid-column:1;grid-row:auto}
}
/* Glow blobs */
.bento-glow {
position:absolute;inset:0;pointer-events:none;
animation: bentoGlow 5s ease-in-out infinite;
}
.bento-mission .bento-glow{animation-delay:1.2s}
.bento-vision .bento-glow{animation-delay:2.5s}
.bento-values .bento-glow{animation-delay:3.5s}
@keyframes bentoGlow{
0%,100%{opacity:.5}
50%{opacity:1}
}
/* Tags */
.bento-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #F7F4EF;
border: 1px solid rgba(13,13,13,0.30);
background: rgba(13,13,13,0.08);
padding: 4px 12px;
border-radius: 100px;
margin-bottom: 20px;
width: fit-content;
animation: tagPulse 4s ease-in-out infinite;
}
@keyframes tagPulse{
0%,100%{border-color:rgba(13,13,13,0.2);background:rgba(13,13,13,0.06)}
50%{border-color:rgba(13,13,13,0.45);background:rgba(13,13,13,0.14)}
}
.bento-title {
font-family:'Space Grotesk',sans-serif;
font-size:26px;font-weight:700;line-height:1.2;
margin-bottom:14px;color:#F7F4EF;
}
.bento-body {
font-size:14px;color:rgba(247,244,239,0.70);line-height:1.75;
margin-bottom:0;
}
/* ── STORY TIMELINE ── */
.bento-timeline {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 0;
position: relative;
padding-left: 24px;
flex: 1;
}
.bento-story {
display: flex;
flex-direction: column;
}
.bento-timeline::before {
content:'';
position:absolute;left:6px;top:8px;bottom:8px;
width:1.5px;
background:linear-gradient(to bottom,#FF3333,rgba(13,13,13,0.1));
animation: timelineGrow 3s ease-out forwards;
}
@keyframes timelineGrow{from{height:0;opacity:0}to{height:calc(100% - 16px);opacity:1}}
.btl-item {
display:flex;align-items:center;gap:14px;
flex: 1;
padding:0;
min-height: 64px;
opacity:0;animation:btlSlide .5s ease forwards;
}
.btl-item:nth-child(1){animation-delay:.2s}
.btl-item:nth-child(2){animation-delay:.5s}
.btl-item:nth-child(3){animation-delay:.8s}
.btl-item:nth-child(4){animation-delay:1.1s}
.btl-item:nth-child(5){animation-delay:1.4s}
@keyframes btlSlide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.btl-dot {
width:18px;height:18px;border-radius:50%;
background:#FF3333;
box-shadow:0 0 0 4px rgba(13,13,13,0.25);
flex-shrink:0;margin-left:-27px;
animation:btlDot 2.5s ease-in-out infinite;
}
.btl-item:nth-child(2) .btl-dot{animation-delay:.6s}
.btl-item:nth-child(3) .btl-dot{animation-delay:1.2s}
.btl-item:nth-child(4) .btl-dot{animation-delay:1.8s}
.btl-item:nth-child(5) .btl-dot{animation-delay:2.4s}
.btl-dot.last{background:rgba(13,13,13,0.4);border:1.5px dashed rgba(13,13,13,0.5)}
.btl-dot.btl-dot-current{background:#FF3333;box-shadow:0 0 0 4px rgba(13,13,13,0.25),0 0 0 8px rgba(13,13,13,0.10);animation:btlDotCurrent 1.8s ease-in-out infinite!important}
@keyframes btlDotCurrent{0%,100%{box-shadow:0 0 0 3px rgba(13,13,13,0.25),0 0 0 7px rgba(13,13,13,0.08)}50%{box-shadow:0 0 0 6px rgba(13,13,13,0.20),0 0 0 12px rgba(13,13,13,0.05)}}
@keyframes btlDot{
0%,100%{box-shadow:0 0 0 3px rgba(13,13,13,0.15)}
50%{box-shadow:0 0 0 7px rgba(13,13,13,0.05)}
}
.btl-year {
font-family:'Space Grotesk',sans-serif;
font-size:18px;font-weight:700;
color:#FF3333;min-width:72px;font-size:16px;font-weight:800;
}
.btl-label {
font-size:16px;color:#F7F4EF;font-weight:700;
}
/* ── MISSION RINGS ── */
.mission-rings {
position:relative;width:110px;height:110px;
margin:16px auto 20px;
display:flex;align-items:center;justify-content:center;
}
.mring {
position:absolute;border-radius:50%;
border:1px solid rgba(220,38,38,0.25);
animation:mringPulse 3s ease-in-out infinite;
}
.mring1{width:40px;height:40px;animation-delay:0s;border-color:rgba(220,38,38,0.4)}
.mring2{width:70px;height:70px;animation-delay:.6s}
.mring3{width:100px;height:100px;animation-delay:1.2s;border-color:rgba(220,38,38,0.1)}
@keyframes mringPulse{
0%,100%{opacity:.6;transform:scale(1)}
50%{opacity:1;transform:scale(1.08)}
}
.mring-icon{font-size:22px;z-index:2;animation:mIconSpin 6s ease-in-out infinite}
@keyframes mIconSpin{
0%,100%{transform:scale(1) rotate(0deg)}
50%{transform:scale(1.2) rotate(-15deg)}
}
/* ── VISION COUNTRIES ── */
.vision-countries {
display:flex;flex-direction:column;gap:8px;margin-top:18px;
}
.vc-item {
display:flex;align-items:center;gap:12px;
padding:10px 14px;
background:rgba(255,255,255,0.55);
border:1px solid rgba(13,13,13,0.12);
border-radius:10px;
transition:all .3s;
animation:vcSlide 4s ease-in-out infinite;
}
.vision-countries .vc-item:nth-child(1){animation-delay:0s}
.vision-countries .vc-item:nth-child(2){animation-delay:1.3s}
.vision-countries .vc-item:nth-child(3){animation-delay:2.6s}
@keyframes vcSlide{
0%,70%,100%{background:#FFFFFF;border-color:rgba(13,13,13,0.18)}
35%{background:rgba(13,13,13,0.07);border-color:rgba(13,13,13,0.25);transform:translateX(4px)}
}
.vc-flag{font-size:18px;flex-shrink:0}
.vc-name{font-size:13px;font-weight:600;color:#F7F4EF;flex:1}
.vc-badge{
font-size:10px;font-weight:700;letter-spacing:.06em;
padding:3px 8px;border-radius:100px;
}
.vc-badge.hq{background:rgba(13,13,13,0.15);color:#F7F4EF;border:1px solid rgba(13,13,13,0.35)}
.vc-badge.active{background:rgba(22,101,52,0.18);color:#4ADE80;border:1px solid rgba(74,222,128,0.30)}
.vc-badge.coming{background:rgba(13,13,13,0.12);color:#FCD34D;border:1px solid rgba(252,211,77,0.30)}
/* ── VALUES BENTO ROW ── */
.bento-values-row {
display:flex;gap:0;align-items:stretch;flex-wrap:wrap;margin-top:20px;
}
.bv-item {
flex:1;min-width:140px;display:flex;flex-direction:column;gap:8px;
padding:0 24px;
transition:all .3s;
cursor:default;
}
.bv-item:hover{transform:translateY(-4px)}
.bv-divider{
width:1px;background:rgba(247,244,239,0.12);
align-self:stretch;flex-shrink:0;
animation:bvDivGlow 5s ease-in-out infinite;
}
.bv-item:nth-child(1){padding-left:0}
.bv-item:nth-child(9){padding-right:0}
.bv-item:nth-child(1){animation:bvWave 5s ease-in-out infinite 0s}
.bv-item:nth-child(3){animation:bvWave 5s ease-in-out infinite .8s}
.bv-item:nth-child(5){animation:bvWave 5s ease-in-out infinite 1.6s}
.bv-item:nth-child(7){animation:bvWave 5s ease-in-out infinite 2.4s}
.bv-item:nth-child(9){animation:bvWave 5s ease-in-out infinite 3.2s}
@keyframes bvWave{
0%,70%,100%{transform:translateY(0)}
35%{transform:translateY(-6px)}
}
@keyframes bvDivGlow{
0%,100%{background:rgba(13,13,13,0.15)}
50%{background:rgba(13,13,13,0.2)}
}
.bv-icon{
font-size:28px;
animation:bvIcon 5s ease-in-out infinite;
display:block;
}
.bento-values-row .bv-item:nth-child(1) .bv-icon{animation-delay:0s}
.bento-values-row .bv-item:nth-child(3) .bv-icon{animation-delay:.8s}
.bento-values-row .bv-item:nth-child(5) .bv-icon{animation-delay:1.6s}
.bento-values-row .bv-item:nth-child(7) .bv-icon{animation-delay:2.4s}
.bento-values-row .bv-item:nth-child(9) .bv-icon{animation-delay:3.2s}
@keyframes bvIcon{
0%,70%,100%{transform:scale(1) rotate(0deg)}
35%{transform:scale(1.25) rotate(-8deg)}
}
.bv-name{
font-family:'Space Grotesk',sans-serif;
font-size:13px;font-weight:700;color:#F7F4EF;
}
.bv-desc{
font-size:12px;color:rgba(247,244,239,0.65);line-height:1.55;
}
@media(max-width:700px){
.bento-values-row{flex-direction:column;gap:16px}
.bv-divider{display:none}
.bv-item{padding:0}
}
/* ── SEGMENTED FILTER CONTROL ── */
.svc-filters {
display: flex;
gap: 0;
margin: 36px auto 0;
justify-content: center;
background: #0A1F44;
border: 1px solid rgba(13,13,13,0.22);
border-radius: 14px;
padding: 5px;
width: fit-content;
}
.sfil {
display: flex;
align-items: center;
gap: 7px;
background: none;
border: 1px solid transparent;
color: rgba(247,244,239,0.55);
padding: 10px 22px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: 'Inter', sans-serif;
transition: all .25s cubic-bezier(.4,0,.2,1);
white-space: nowrap;
}
.sfil-icon { font-size: 15px; transition: transform .3s; display:inline-block; }
.sfil:hover:not(.active) {
color: rgba(247,244,239,0.90);
background: rgba(13,13,13,0.10);
}
.sfil:hover:not(.active) .sfil-icon { transform: scale(1.2) rotate(-5deg); }
.sfil.active {
background: linear-gradient(135deg,rgba(13,13,13,0.22),rgba(13,13,13,0.15));
color: #0055FF;
border-color: rgba(13,13,13,0.35);
box-shadow: 0 2px 14px rgba(13,13,13,0.15), inset 0 1px 0 rgba(255,255,255,0.07);
animation: sfilActiveGlow 3s ease-in-out infinite;
}
.sfil.active .sfil-icon { transform: scale(1.1); animation: sfilIconBounce 3s ease-in-out infinite; }
@keyframes sfilActiveGlow {
0%,100%{ box-shadow:0 2px 14px rgba(13,13,13,0.12),inset 0 1px 0 rgba(255,255,255,0.07); }
50% { box-shadow:0 4px 20px rgba(13,13,13,0.25),inset 0 1px 0 rgba(255,255,255,0.1); }
}
@keyframes sfilIconBounce {
0%,100%{ transform:scale(1.1) rotate(0deg); }
50% { transform:scale(1.25) rotate(-8deg); }
}
/* ══════════════════════════
SMOOTH SITE-WIDE ANIMATIONS
══════════════════════════ */
/* Universal ease — every transition silky */
*, *::before, *::after {
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* NAV — fade down gently */
nav {
animation: smoothNavIn 0.9s ease both;
}
@keyframes smoothNavIn {
from { opacity:0; transform:translateY(-20px); }
to { opacity:1; transform:translateY(0); }
}
/* NAV LINKS — soft stagger */
.nav-links li { opacity:0; animation: softFadeDown 0.6s ease forwards; }
.nav-links li:nth-child(1){animation-delay:0.35s}
.nav-links li:nth-child(2){animation-delay:0.45s}
.nav-links li:nth-child(3){animation-delay:0.55s}
.nav-links li:nth-child(4){animation-delay:0.65s}
.nav-links li:nth-child(5){animation-delay:0.75s}
@keyframes softFadeDown {
from{opacity:0;transform:translateY(-8px)}
to{opacity:1;transform:translateY(0)}
}
/* NAV CTA — gentle pop */
.nav-cta { animation: softPop 0.5s ease 0.85s both; }
@keyframes softPop {
from{opacity:0;transform:scale(0.9)}
to{opacity:1;transform:scale(1)}
}
/* HERO TEXT — graceful entrance */
.hero-badge { animation: softUp 0.8s ease 0.2s both; }
.hero h1 .line1 { animation: softUp 0.9s ease 0.4s both; display:block; }
.hero h1 .line2 { animation: softUp 0.9s ease 0.58s both; display:block; }
.hero-sub { animation: softUp 0.8s ease 0.74s both; }
.btn-primary { animation: softUp 0.7s ease 0.88s both; }
.btn-ghost { animation: softUp 0.7s ease 0.96s both; }
.hero-stats { animation: softUp 0.7s ease 1.1s both; }
@keyframes softUp {
from{opacity:0;transform:translateY(22px)}
to{opacity:1;transform:translateY(0)}
}
/* SCROLL REVEALS — clean fade+rise */
.smooth-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.75s ease, transform 0.75s ease;
}
.smooth-reveal.in-view {
opacity: 1;
transform: translateY(0);
}
/* stagger children inside a reveal group */
.smooth-reveal:nth-child(2) { transition-delay: 0.1s; }
.smooth-reveal:nth-child(3) { transition-delay: 0.2s; }
.smooth-reveal:nth-child(4) { transition-delay: 0.3s; }
.smooth-reveal:nth-child(5) { transition-delay: 0.4s; }
.smooth-reveal:nth-child(6) { transition-delay: 0.5s; }
.smooth-reveal:nth-child(7) { transition-delay: 0.6s; }
.smooth-reveal:nth-child(8) { transition-delay: 0.7s; }
/* HOVER LIFTS — all cards */
.service-card,
.bento-card,
.partner-big-card,
.region-card,
.value-card,
.mvv-card,
.contact-item {
transition: transform 0.45s ease, border-color 0.45s ease,
box-shadow 0.45s ease, background 0.45s ease !important;
}
.service-card:hover { transform:translateY(-8px); }
.bento-card:hover { transform:translateY(-6px); }
.partner-big-card:hover{ transform:translateY(-6px); }
.region-card:hover { transform:translateY(-5px); }
.value-card:hover { transform:translateY(-6px); }
.mvv-card:hover { transform:translateX(5px); }
.contact-item:hover { transform:translateX(5px); }
/* BUTTONS — smooth hover */
.btn-primary, .btn-ghost, .nav-cta, .form-submit {
transition: transform 0.35s ease, opacity 0.3s ease,
box-shadow 0.35s ease !important;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 10px 40px rgba(13,13,13,0.25); }
.btn-ghost:hover { transform:translateY(-3px); }
.nav-cta:hover { transform:translateY(-2px); opacity:0.9; }
.form-submit:hover { transform:translateY(-3px); }
.form-submit:active{ transform:scale(0.98); }
/* FILTER BUTTONS */
.sfil {
transition: all 0.35s ease !important;
}
.sfil:hover:not(.active) { transform:translateY(-2px); }
.sfil.active { transform:translateY(-1px); }
/* FOOTER LINKS */
.footer-links a {
transition: color 0.3s ease, transform 0.3s ease !important;
display:inline-block;
}
.footer-links a:hover { color:#F7F4EF; transform:translateY(-2px); }
/* SOCIAL BUTTONS */
.social-btn {
transition: all 0.35s ease !important;
}
.social-btn:hover {
transform:translateY(-3px);
background:rgba(13,13,13,0.18);
border-color:rgba(13,13,13,0.35);
}
/* FORM INPUTS */
.form-group input,
.form-group textarea,
.form-group select {
transition: border-color 0.35s ease, box-shadow 0.35s ease !important;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
box-shadow: 0 0 0 3px rgba(13,13,13,0.12);
border-color: rgba(13,13,13,0.45) !important;
}
/* PC PRODUCT CHIPS */
.pc-product {
transition: all 0.35s ease !important;
}
.pc-product:hover {
transform:translateY(-3px);
background:rgba(var(--pc),0.22) !important;
border-color:rgba(var(--pc),0.5) !important;
color:#F7F4EF;
}
/* VC ITEMS */
.vc-item {
transition: all 0.4s ease !important;
}
.vc-item:hover {
transform:translateX(8px);
animation:none !important;
background:rgba(13,13,13,0.1) !important;
border-color:rgba(13,13,13,0.35) !important;
}
/* TRUST ITEMS */
.trust-item {
transition: color 0.3s ease, transform 0.3s ease !important;
}
.trust-item:hover { color:#0055FF; transform:translateY(-2px); }
/* MODAL */
.svc-modal-overlay {
transition: opacity 0.4s ease !important;
}
.svc-modal-box {
transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94),
opacity 0.45s ease !important;
}
.svc-modal-overlay.open .svc-modal-box {
transform: none !important;
}
.svc-modal-overlay:not(.open) .svc-modal-box {
transform: translateY(30px) scale(0.97) !important;
}
/* CURSOR GLOW (subtle) */
#cursor-glow {
position:fixed;pointer-events:none;z-index:9999;
width:400px;height:400px;border-radius:50%;
background:radial-gradient(circle,rgba(13,13,13,0.05),transparent 65%);
transform:translate(-50%,-50%);
transition:left 0.18s ease, top 0.18s ease;
will-change:left,top;
opacity:0;
}
/* 3D TILT VARS */
.tilt-card {
will-change:transform;
transform-style:preserve-3d;
transition:transform 0.12s ease !important;
}
/* NAV SCROLL SHADOW */
nav.scrolled {
box-shadow:0 4px 40px rgba(0,0,0,0.25);
transition:box-shadow 0.4s ease;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce) {
*,*::before,*::after {
animation-duration:0.01ms !important;
transition-duration:0.01ms !important;
}
}
/* ════════════════════════════════════
ABOUT TABS
════════════════════════════════════ */
function switchTab(btn, panelId) {
document.querySelectorAll('.atab').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
document.querySelectorAll('.about-tab-panel').forEach(p => {
p.classList.remove('active','animating');
p.style.display = 'none';
});
const panel = document.getElementById(panelId);
panel.style.display = 'block';
panel.classList.add('active');
// Force reflow so transition re-fires every time
void panel.offsetWidth;
requestAnimationFrame(() => {
panel.classList.add('animating');
});
if (panelId === 'tab-story') animateTimeline();
if (panelId === 'tab-vision') replayVisionAnim();
if (panelId === 'tab-values') replayValueHexes();
if (panelId === 'tab-mission') replayMissionPoints();
}
// Init first tab
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.about-tab-panel').forEach((p,i) => {
p.style.display = i===0 ? 'block' : 'none';
if(i===0) {
p.classList.add('active');
void p.offsetWidth;
setTimeout(()=>p.classList.add('animating'),50);
}
});
animateTimeline();
initMissionCanvas();
});
function animateTimeline() {
// Reset first — force remove so re-adding triggers transition again
document.querySelectorAll('.tl-item').forEach(item => {
item.classList.remove('visible');
void item.offsetWidth; // force reflow
});
document.querySelectorAll('.tl-item').forEach((item, i) => {
setTimeout(() => item.classList.add('visible'), 120 + i * 180);
});
}
function replayVisionAnim() {
document.querySelectorAll('.globe-ring').forEach(r => {
r.style.animation = 'none';
void r.offsetWidth;
r.style.animation = '';
});
const gc = document.querySelector('.globe-center');
if(gc){ gc.style.animation='none'; void gc.offsetWidth; gc.style.animation=''; }
}
function replayValueHexes() {
document.querySelectorAll('.value-hex').forEach((v,i) => {
v.classList.remove('active');
v.style.opacity = '0';
v.style.transform = 'translateY(20px)';
void v.offsetWidth;
setTimeout(() => {
v.style.transition = 'opacity .4s ease, transform .4s ease';
v.style.opacity = '1';
v.style.transform = 'translateY(0)';
}, i * 80 + 60);
});
}
function replayMissionPoints() {
document.querySelectorAll('.mpoint').forEach((m,i) => {
m.classList.remove('active');
m.style.opacity = '0';
m.style.transform = 'translateX(-16px)';
void m.offsetWidth;
setTimeout(() => {
m.style.transition = 'opacity .4s ease, transform .4s ease, background .3s, border-color .3s, color .3s';
m.style.opacity = '1';
m.style.transform = 'translateX(0)';
}, i * 100 + 80);
});
}
/* Mission Canvas Animation */
function initMissionCanvas() {
const c = document.getElementById('mission-canvas');
if (!c) return;
const ctx = c.getContext('2d');
let angle = 0;
const nodes = [
{label:'Clients',x:100,y:40,color:'#0055FF'},
{label:'Data',x:160,y:100,color:'#0055FF'},
{label:'Solutions',x:100,y:160,color:'#0055FF'},
{label:'Impact',x:40,y:100,color:'#0055FF'},
];
function draw() {
ctx.clearRect(0,0,200,200);
// rotating ring
ctx.save();
ctx.translate(100,100);
ctx.rotate(angle);
for (let i=0;i<8;i++) {
const a = (i/8)*Math.PI*2;
ctx.beginPath();
ctx.arc(Math.cos(a)*60,Math.sin(a)*60,3,0,Math.PI*2);
ctx.fillStyle = `rgba(190,168,140,${0.3+0.2*Math.sin(angle+i)})`;
ctx.fill();
}
ctx.restore();
// center target
ctx.beginPath();
ctx.arc(100,100,20,0,Math.PI*2);
ctx.strokeStyle = 'rgba(13,13,13,0.4)';
ctx.lineWidth = 1.5;
ctx.stroke();
ctx.beginPath();
ctx.arc(100,100,8,0,Math.PI*2);
ctx.fillStyle = '#0055FF';
ctx.fill();
// lines to nodes
nodes.forEach(n => {
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(n.x,n.y);
ctx.strokeStyle = 'rgba(13,13,13,0.15)';
ctx.lineWidth = 1;
ctx.setLineDash([3,4]);
ctx.stroke();
ctx.setLineDash([]);
ctx.beginPath();
ctx.arc(n.x,n.y,14,0,Math.PI*2);
ctx.fillStyle = 'rgba(13,13,13,0.12)';
ctx.fill();
ctx.strokeStyle = 'rgba(13,13,13,0.3)';
ctx.lineWidth = 1;
ctx.stroke();
ctx.fillStyle = '#0055FF';
ctx.font = '9px Inter,sans-serif';
ctx.textAlign = 'center';
ctx.fillText(n.label,n.x,n.y+3);
});
angle += 0.008;
requestAnimationFrame(draw);
}
draw();
}
/* Vision Canvas */
function initVisionCanvas() {}
function startVisionAnim() {}
function animateMPoint(el) {
document.querySelectorAll('.mpoint').forEach(m => m.classList.remove('active'));
el.classList.add('active');
}
/* Values */
function activateValue(el, idx) {
document.querySelectorAll('.value-hex').forEach(v => v.classList.remove('active'));
el.classList.add('active');
}
/* ════════════════════════════════════
SERVICE FILTER
════════════════════════════════════ */
function filterServices(btn, cat) {
document.querySelectorAll('.sfil').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
document.querySelectorAll('.svc-animated').forEach(card => {
if (cat === 'all' || card.dataset.cat === cat) {
card.style.display = '';
card.style.opacity = '';
card.style.transform = '';
card.style.removeProperty('opacity');
card.style.removeProperty('transform');
} else {
card.style.display = 'none';
}
});
}
card.style.opacity = '0';
card.style.transform = 'translateY(18px)';
card.style.transition = 'none';
void card.offsetWidth;
setTimeout(() => {
card.style.transition = 'opacity .35s ease, transform .35s cubic-bezier(.34,1.2,.64,1)';
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
}, i * 70);
});
}, 230);
}
/* ════════════════════════════════════
SERVICE MODAL
════════════════════════════════════ */
const SVC_DATA = [
{
icon:'☁️', title:'Cloud Services & Solutions',
desc:'Unlock the full potential of the cloud with our comprehensive suite of migration, management, and optimization services on Google Cloud and other leading platforms.',
items:['Cloud infrastructure migration & planning','Multi-cloud strategy and architecture','24/7 cloud operations monitoring','Cost optimization and resource scaling','Disaster recovery & backup solutions'],
bars:[{label:'Migration Expertise',w:'92%'},{label:'Cost Reduction',w:'78%'},{label:'Uptime SLA',w:'99%'}]
},
{
icon:'💼', title:'Google Workspace',
desc:'As an authorized Google Workspace partner, we handle every step from domain setup to full team onboarding across all plan tiers.',
items:['Starter, Standard, Plus & Enterprise plans','Email & domain migration','User provisioning & admin setup','Training and ongoing support','Google Meet, Drive, Docs, Sheets & more'],
bars:[{label:'Onboarding Speed',w:'88%'},{label:'User Adoption',w:'85%'},{label:'Support Satisfaction',w:'96%'}]
},
{
icon:'🖥️', title:'IT Remote Management',
desc:'Proactive, secure, and seamless IT management from our Amman operations center — your team stays focused while we keep everything running.',
items:['Real-time monitoring & alerting','Automated security patching','Remote helpdesk & ticketing','Monthly performance reports','Scheduled on-site visits included'],
bars:[{label:'Issue Resolution Time',w:'94%'},{label:'System Uptime',w:'99%'},{label:'Client Satisfaction',w:'91%'}]
},
{
icon:'🌐', title:'Web Design & Hosting',
desc:'We craft stunning, conversion-focused websites and back them with enterprise-grade hosting infrastructure for maximum uptime and performance.',
items:['Custom responsive web design','CMS integration (WordPress & more)','DNS management & SSL certificates','99.9% uptime SLA hosting','Speed & SEO optimization'],
bars:[{label:'Page Speed Score',w:'95%'},{label:'Mobile Responsiveness',w:'100%'},{label:'Uptime',w:'99%'}]
},
{
icon:'🎨', title:'Creative Design & Portfolio',
desc:'From brand identity to UI/UX prototypes, we create visual experiences that capture your essence and resonate deeply with your audience.',
items:['Logo & full brand identity design','Marketing collateral & print','Presentation & pitch deck design','Social media graphics & templates','UI/UX wireframes & prototypes'],
bars:[{label:'Brand Consistency',w:'97%'},{label:'Client Revisions',w:'82%'},{label:'Delivery Speed',w:'89%'}]
},
{
icon:'🔐', title:'Security & Surveillance',
desc:'Complete physical and digital security solutions — from IP cameras and access control to PBX and structured network cabling.',
items:['IP CCTV & NVR/DVR systems','Biometric & card access control','PBX & VoIP phone systems','Structured network cabling','Counter-surveillance & perimeter protection'],
bars:[{label:'Coverage Effectiveness',w:'96%'},{label:'System Reliability',w:'98%'},{label:'Response Time',w:'92%'}]
},
{
icon:'🖨️', title:'IT Equipment & Leasing',
desc:'The latest hardware without the capital expenditure — flexible leasing plans for laptops, servers, and networking gear with easy upgrades.',
items:['Laptops, desktops & workstations','Servers & storage solutions','Switches, routers & access points','Monthly or annual leasing plans','Free upgrade at end of term'],
bars:[{label:'Cost vs Purchase',w:'65%'},{label:'Hardware Quality',w:'93%'},{label:'Upgrade Flexibility',w:'88%'}]
},
{
icon:'📱', title:'Social Media & Digital Marketing',
desc:'End-to-end digital marketing from content creation to paid campaigns — amplifying your brand across every relevant platform.',
items:['Facebook, Instagram & TikTok management','LinkedIn B2B campaigns','Google Business Profile optimization','Monthly analytics & KPI reports','Paid ads management & A/B testing'],
bars:[{label:'Engagement Growth',w:'87%'},{label:'Reach Increase',w:'91%'},{label:'ROI Improvement',w:'79%'}]
}
];
function openServiceModal(idx) {
const d = SVC_DATA[idx];
document.getElementById('modal-icon').textContent = d.icon;
document.getElementById('modal-title').textContent = d.title;
document.getElementById('modal-desc').textContent = d.desc;
const list = document.getElementById('modal-list');
list.innerHTML = d.items.map(item =>
`${item}
`
).join('');
['mbar1','mbar2','mbar3'].forEach((id,i) => {
const bar = d.bars[i];
const el = document.getElementById(id);
el.querySelector('span').textContent = bar.label;
const fill = el.querySelector('.mbar-fill');
fill.style.setProperty('--w', bar.w);
fill.classList.remove('animated');
});
const overlay = document.getElementById('svc-modal');
overlay.classList.add('open');
document.body.style.overflow = 'hidden';
setTimeout(() => {
['mbar1','mbar2','mbar3'].forEach((id,i) => {
setTimeout(() => {
document.getElementById(id).querySelector('.mbar-fill').classList.add('animated');
}, i * 200 + 300);
});
}, 100);
}
function closeServiceModal() {
document.getElementById('svc-modal').classList.remove('open');
document.body.style.overflow = '';
}
function closeModal(e) {
if (e.target === document.getElementById('svc-modal')) closeServiceModal();
}
document.addEventListener('keydown', e => {
if (e.key === 'Escape') closeServiceModal();
});
/* ─── FORM SUBMIT ─── */
document.querySelector('.form-submit').addEventListener('click', function() {
this.textContent = '✓ Message Sent!';
this.style.background = 'linear-gradient(135deg,#059669,#10B981)';
setTimeout(() => {
this.textContent = 'Send Message →';
this.style.background = 'linear-gradient(135deg,#0055FF,#0055FF)';
}, 3000);
});
/* ── REPLAY icon pop on every hover ── */
document.querySelectorAll('.service-card').forEach(card => {
card.addEventListener('mouseenter', () => {
const icon = card.querySelector('.svc-icon-anim');
if (!icon) return;
icon.classList.remove('popping');
void icon.offsetWidth; // force reflow so animation restarts
icon.classList.add('popping');
});
});
/* ── REPLAY card entrance animation on filter ── */
/* Already handled in filterServices() */
/* ── Replay modal progress bars every open ── */
/* Already handled in openServiceModal() */
/* ── Value hex cascade on page load ── */
setTimeout(() => replayValueHexes && replayValueHexes(), 300);
/* ════════════════════════════
SMOOTH SITE-WIDE ANIMATOR
════════════════════════════ */
(function(){
'use strict';
/* ── CURSOR GLOW ── */
const glow = document.createElement('div');
glow.id = 'cursor-glow';
document.body.appendChild(glow);
let mx=0,my=0,cx=0,cy=0;
document.addEventListener('mousemove', e=>{mx=e.clientX;my=e.clientY; glow.style.opacity='1';});
function animGlow(){
cx += (mx-cx)*0.08; cy += (my-cy)*0.08;
glow.style.left=cx+'px'; glow.style.top=cy+'px';
requestAnimationFrame(animGlow);
}
animGlow();
/* ── SCROLL REVEAL ── */
const revealEls = [
...document.querySelectorAll(
'.service-card,.bento-card,.partner-big-card,.region-card,.value-card,.contact-item,.contact-form,.bento-tag,footer,.partner-band,.reveal'
)
];
if(window.innerWidth > 1024){
revealEls.forEach(el => el.classList.add('smooth-reveal'));
const io = new IntersectionObserver(entries=>{
entries.forEach(e=>{
if(e.isIntersecting){
e.target.classList.add('in-view');
io.unobserve(e.target);
}
});
},{threshold:0.1,rootMargin:'0px 0px -30px 0px'});
revealEls.forEach(el=>io.observe(el));
/* ── GENTLE 3D TILT ── */
document.querySelectorAll('.service-card,.bento-card,.partner-big-card').forEach(card=>{
card.addEventListener('mousemove',function(e){
const r=this.getBoundingClientRect();
const x=(e.clientX-r.left)/r.width -0.5;
const y=(e.clientY-r.top)/r.height-0.5;
this.style.transform=`translateY(-8px) rotateX(${-y*4}deg) rotateY(${x*4}deg)`;
this.style.transition='transform 0.1s ease';
});
card.addEventListener('mouseleave',function(){
this.style.transform='';
this.style.transition='transform 0.5s ease, border-color 0.45s ease, box-shadow 0.45s ease';
});
});
/* ── RIPPLE on every button ── */
const rippleStyle = document.createElement('style');
rippleStyle.textContent=`
@keyframes rippleAnim{from{transform:scale(0);opacity:0.45}to{transform:scale(1);opacity:0}}
.ripple-circle{position:absolute;border-radius:50%;pointer-events:none;
background:rgba(255,255,255,0.22);transform:scale(0);
animation:rippleAnim 0.55s ease-out forwards;}
`;
document.head.appendChild(rippleStyle);
document.querySelectorAll('button,.btn-primary,.btn-ghost,.nav-cta,.sfil,.atab').forEach(btn=>{
btn.addEventListener('click',function(e){
const r=this.getBoundingClientRect();
const size=Math.max(r.width,r.height)*2;
const span=document.createElement('span');
span.className='ripple-circle';
span.style.cssText=`width:${size}px;height:${size}px;left:${e.clientX-r.left-size/2}px;top:${e.clientY-r.top-size/2}px`;
this.style.position='relative';this.style.overflow='hidden';
this.appendChild(span);
setTimeout(()=>span.remove(),600);
});
});
/* ── HERO PARALLAX ── */
const heroInner=document.querySelector('.hero-inner');
window.addEventListener('scroll',()=>{
const y=window.scrollY;
if(heroInner && y30);
},{passive:true});
/* ── SMOOTH STAT COUNTER ── */
function countUp(el){
const raw=el.textContent.trim();
const num=parseFloat(raw.replace(/[^0-9.]/g,''));
const suffix=raw.replace(/[0-9.]/g,'');
if(isNaN(num)||num<=0||num>5000)return;
const dur=1400, fps=60, steps=dur/fps*fps/1000*fps;
let cur=0,frame=0;
const ease=t=>t<.5?2*t*t:-1+(4-2*t)*t;
function tick(){
frame++;
cur=num*ease(Math.min(frame/steps,1));
el.textContent=(Number.isInteger(num)?Math.round(cur):cur.toFixed(1))+suffix;
if(frame{
entries.forEach(e=>{
if(e.isIntersecting){countUp(e.target);countObs.unobserve(e.target);}
});
},{threshold:0.8});
document.querySelectorAll('.stat-num,.pc-stat-n').forEach(el=>countObs.observe(el));
})();
/* ════════════════════
MOBILE & TOUCH JS
════════════════════ */
(function(){
// Hamburger controlled by CSS only
// Hamburger toggle
const ham = document.getElementById('hamburger');
const menu = document.getElementById('mobile-menu');
if(ham && menu){
ham.addEventListener('click',()=>{
ham.classList.toggle('open');
menu.classList.toggle('open');
document.body.style.overflow = menu.classList.contains('open') ? 'hidden' : '';
});
}
// Close button inside menu
const closeBtn = document.getElementById('menu-close');
if(closeBtn) closeBtn.addEventListener('click', closeMobileMenu);
// Close on ESC
document.addEventListener('keydown', e=>{ if(e.key==='Escape') closeMobileMenu(); });
// Passive touch scroll for iOS momentum
document.addEventListener('touchmove', e=>{}, {passive:true});
// Fix iOS 100vh bug
function setVH(){
document.documentElement.style.setProperty('--vh', window.innerHeight * 0.01 + 'px');
}
setVH();
window.addEventListener('resize', setVH);
window.addEventListener('orientationchange', ()=>{ setTimeout(setVH, 200); });
// Hide nav on scroll down — desktop only
let lastScroll = 0;
const navEl = document.querySelector('nav');
window.addEventListener('scroll',()=>{
const current = window.scrollY;
if(navEl && window.innerWidth > 1024){
if(current > lastScroll && current > 100){
navEl.style.transform = 'translateY(-100%)';
navEl.style.transition = 'transform 0.35s ease';
} else {
navEl.style.transform = 'translateY(0)';
}
}
lastScroll = Math.max(0, current);
},{passive:true});
// Touch feedback on cards (preserves onclick)
if('ontouchstart' in window){
document.querySelectorAll('.service-card,.region-card,.value-card,.bento-card').forEach(card=>{
card.addEventListener('touchstart',function(){
this.style.transform='scale(0.98)';
this.style.transition='transform .15s ease';
},{passive:true});
card.addEventListener('touchend',function(){
this.style.transform='';
this.style.transition='transform .4s ease';
},{passive:true});
});
}
// Hamburger shown via CSS media query only
})();
/* ════════════════════════════════════════
SCROLL-TRIGGERED ANIMATIONS
════════════════════════════════════════ */
(function(){
// On mobile/tablet: skip all animations, force everything visible immediately
if(window.innerWidth <= 1024 || ('ontouchstart' in window)) {
document.querySelectorAll('.anim-fade-up,.anim-fade-left,.anim-fade-right,.anim-scale,.reveal,.smooth-reveal,.svc-animated,.btl-item').forEach(el=>{
el.classList.add('anim-in');
el.style.opacity='1';
el.style.transform='none';
el.style.visibility='visible';
});
return;
}
// Desktop only: use IntersectionObserver
const animEls = document.querySelectorAll('.anim-fade-up,.anim-fade-left,.anim-fade-right,.anim-scale');
if(!animEls.length) return;
function isInView(el){
const r = el.getBoundingClientRect();
return r.top < window.innerHeight * 0.88 && r.bottom > 0;
}
const io = new IntersectionObserver(entries=>{
entries.forEach(e=>{
if(e.isIntersecting){
e.target.classList.add('anim-in');
io.unobserve(e.target);
}
});
},{threshold:0.08, rootMargin:'0px 0px -40px 0px'});
animEls.forEach(el=>{
if(isInView(el)) el.classList.add('anim-in');
else io.observe(el);
});
})();
function closeMobileMenu(){
const ham=document.getElementById('hamburger');
const menu=document.getElementById('mobile-menu');
if(ham) ham.classList.remove('open');
if(menu) menu.classList.remove('open');
document.body.style.overflow='';
}