:root {
--ink: #1e293b;
--muted: #64748b;
--accent: #3b82f6;
--accent-2: #8b5cf6;
--glass: rgba(255,255,255,.06);
--stroke: rgba(0,0,0,.08);
--maxw: 1200px;
--qs-top-max: 126px;
--qs-bot-max: 50px;
} * {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
color: var(--ink);
font-family: "Tw Cen MT","Century Gothic","Jost",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
background-color: #f8fafc;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
} .hidden { display: none; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.h-full { height: 100%; }
.relative { position: relative; }
.z-50 { z-index: 50; }
.mx-auto { margin-left: auto; margin-right: auto; }
.gap-3 { gap: 0.75rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; } .qs-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 84px;
z-index: 9999;
display: flex;
align-items: center;
background: transparent;
border-bottom: 1px solid rgba(148,163,184,0.15);
transform: translateY(0);
opacity: 1;
transition:
transform .45s cubic-bezier(0.23,1,0.32,1),
opacity .35s ease,
background .35s ease,
box-shadow .35s ease,
border-color .35s ease;
}
.qs-navbar.scrolled {
background:
radial-gradient(600px 400px at 80% 0%, rgba(59,130,246,0.18), transparent 65%),
linear-gradient(115deg,
rgba(10,14,22,0.98) 0%,
rgba(20,26,44,0.96) 40%,
rgba(35,22,70,0.94) 70%,
rgba(60,20,110,0.92) 100%);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border-bottom: 1px solid rgba(148,163,184,0.5);
box-shadow: 0 14px 40px -10px rgba(0,0,0,0.65);
}
.qs-navbar.nav-mounted {
will-change: transform, opacity;
}
.qs-navbar.nav-hide,
.qs-navbar.nav-footer-hide {
transform: translateY(-110%);
opacity: 0;
pointer-events: none;
} .qs-nav-inner {
position: relative;
width: 100%;
max-width: 1450px;
margin: 0 auto;
padding: 0 34px;
height: 84px;
display: flex;
align-items: center;
justify-content: space-between;
} .nav-brand {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
}
.nav-logo-img {
height: 54px;
width: auto;
mix-blend-mode: luminosity;
filter: brightness(.9);
transition: filter .35s ease;
}
.nav-brand:hover .nav-logo-img {
filter: brightness(1.08) drop-shadow(0 0 14px rgba(59,130,246,0.5));
} .nav-brand-text {
display: none;
line-height: 1;
}
.nav-brand-text span {
display: block;
}
.nav-brand-main {
color: #e5edf7;
font-size: 1rem;
font-weight: 700;
letter-spacing: .15em;
}
.nav-brand-sub {
margin-top: 4px;
font-size: .7rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--accent);
opacity: .9;
} .qs-nav-menu { display: none;
height: 100%;
align-items: center;
gap: 2.5rem; }
.nav-item {
height: 100%;
display: flex;
align-items: center;
}
.nav-link {
position: relative;
padding: 30px 0;
cursor: pointer;
color: #94a3b8;
font-size: .8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .08em;
transition: color .25s ease;
white-space: nowrap;
}
.nav-link:hover {
color: #f9fafb;
}
.nav-link::after {
content: "";
position: absolute;
bottom: 18px;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg,var(--accent),var(--accent-2));
transform: translateX(-50%);
box-shadow: 0 0 12px rgba(59,130,246,0.7);
opacity: 0;
transition: width .3s ease, opacity .3s ease;
}
.nav-link:hover::after {
width: 100%;
opacity: 1;
} .dropdown-menu {
position: absolute;
top: 84px;
left: 50%;
transform: translateX(-50%) translateY(-14px);
width: 1100px;
max-width: 92vw;
background: rgba(5,10,30,0.96);
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
border-radius: 12px;
border: 1px solid rgba(148,163,184,0.35);
box-shadow: 0 22px 60px rgba(0,0,0,0.7);
padding: 36px 34px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.nav-item:hover .dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.dropdown-inner {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 30px;
}
.dropdown-summary h4 {
margin: 0 0 8px;
font-size: 1.15rem;
font-weight: 600;
color: #e5edf7;
}
.dropdown-summary p {
margin: 0;
font-size: .9rem;
color: #9caec6;
line-height: 1.7;
}
.dropdown-links {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
gap: 14px;
}
.dd-link {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px;
border-radius: 10px;
text-decoration: none;
border: 1px solid transparent;
transition: background .25s ease, border-color .25s ease;
}
.dd-link:hover {
background: rgba(15,23,42,0.95);
border-color: rgba(148,163,184,0.55);
}
.dd-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: rgba(59,130,246,0.16);
color: var(--accent);
font-size: .9rem;
transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.dd-link:hover .dd-icon {
background: linear-gradient(135deg,var(--accent),var(--accent-2));
color: #ffffff;
box-shadow: 0 0 18px rgba(59,130,246,0.6);
}
.dd-title {
font-size: .9rem;
font-weight: 500;
color: #e5edf7;
margin-bottom: 2px;
}
.dd-sub {
font-size: .75rem;
color: #9caec6;
} .nav-cta {
padding: 9px 18px;
border-radius: 10px;
background: rgba(15,23,42,0.9);
border: 1px solid rgba(59,130,246,0.55);
color: #e5edf7;
font-size: .75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .16em;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
box-shadow:
inset 0 0 0 1px rgba(15,23,42,0.9),
0 0 20px rgba(59,130,246,0.45);
backdrop-filter: blur(12px) saturate(130%);
-webkit-backdrop-filter: blur(12px) saturate(130%);
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.nav-cta:hover {
border-color: #e5e7eb;
box-shadow:
inset 0 0 0 1px rgba(226,232,240,0.85),
0 0 24px rgba(59,130,246,0.7);
transform: translateY(-1px);
} .hamburger {
padding: 6px;
border-radius: 999px;
border: 1px solid transparent;
background: transparent;
cursor: pointer;
display: inline-flex; }
.hamburger i {
font-size: 1.25rem;
color: #e5edf7;
} .mobile-menu {
position: fixed;
inset: 0;
background: #020617;
z-index: 9990;
transform: translateX(100%);
transition: transform .45s cubic-bezier(.7,0,.3,1);
padding: 110px 28px 32px;
overflow-y: auto;
}
.mobile-menu.open {
transform: translateX(0);
}
.mobile-menu-simple {
display: flex;
flex-direction: column;
gap: 28px;
max-width: 420px;
margin: 40px auto 0;
}
.mobile-nav-item {
font-size: 1.7rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: #f9fafb;
text-decoration: none;
padding-bottom: 12px;
border-bottom: 1px solid rgba(148,163,184,0.35);
}
.mobile-nav-item:last-child {
border-bottom: none;
}
@media (max-width: 480px) {
.mobile-nav-item {
font-size: 1.45rem;
}
} .mobile-section-label,
.mobile-link,
.mobile-cta {
display: none !important;
}  @media (max-width: 767.98px) {
.qs-nav-menu {
display: none;
}
.hamburger {
display: inline-flex;
}
.nav-logo-img {
height: 48px;
}
.nav-brand-text {
display: none;
}
} @media (min-width: 768px) and (max-width: 1199.98px) {
.qs-nav-menu {
display: flex;
align-items: center;
gap: 2.5rem;
}
.hamburger {
display: none;
}
.nav-logo-img {
height: 50px;
}
.nav-brand-text {
display: none;
}
} @media (min-width: 1200px) {
.qs-nav-menu {
display: flex;
align-items: center;
gap: 2.5rem;
}
.hamburger {
display: none;
}
.nav-logo-img {
height: 54px;
}
.nav-brand-text {
display: flex;
flex-direction: column;
align-items: flex-start;
}
}
html {
scroll-behavior: smooth;
} .qs-footer {
background:
radial-gradient(170% 220% at 10% 0,
#020617 0,
#020617 40%,
transparent 72%),
radial-gradient(150% 210% at 100% 0,
#253a7a 0,
#141a34 45%,
#050816 100%);
}@keyframes scroll-logos { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.logo-scroller{width:100%;background:#f7f7f7;padding:24px 0;border-bottom:1px solid #e9ecef;margin-bottom:40px}
.logo-scroller-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:0 20px;box-sizing:border-box}
.trusted-by{font-size:.9rem;font-weight:500;color:#777;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.logo-track-container{overflow:hidden;flex-grow:1;-webkit-mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent);mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent)}
.logo-track{display:flex;align-items:center;width:fit-content;animation:scroll-logos 40s linear infinite}
.logo-track:hover{animation-play-state:paused}
.logo-item{flex-shrink:0;padding:0 40px;height:40px;display:grid;place-items:center}
.logo-item img{max-height:40px;width:auto;opacity:.6;filter:grayscale(100%);transition:all .3s ease}
.logo-item img:hover{opacity:1;filter:grayscale(0%)} .services-section{width:100%;max-width:1200px;margin:0 auto 40px auto;padding:0 20px;box-sizing:border-box}
.services-section .services-container{display:flex;background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.07);overflow:hidden;position:relative} .services-section .services-info{
flex-basis:35%;padding:48px;color:#fff;
background-image:linear-gradient(135deg,rgba(0,10,40,.95),rgba(40,0,60,.9)),url(//quanticsolutions.net/wp-content/themes/QS/home/images/minimalist-cityscape_1250527-12056.jpg);
background-size:cover;background-position:center;background-blend-mode:multiply;
display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2;overflow:hidden;
}
.services-section #tech-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block;z-index:1}
.services-section .services-info>*{position:relative;z-index:2}
.services-section .services-info h2{font-size:clamp(1.6rem,6vw,2.25rem);font-weight:600;line-height:1.25;margin-bottom:16px}
.services-section .services-info p{font-size:.95rem;font-weight:300;line-height:1.7;opacity:.9;margin-bottom:24px}
.services-section .services-info .btn{
display:inline-block;background:rgba(255,255,255,.08);color:#fff;padding:12px 24px;border-radius:8px;
text-decoration:none;font-weight:500;text-align:center;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(5px);transition:all .3s ease;width:fit-content
}
.services-section .services-info .btn:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.5);transform:translateY(-2px)} .services-section .services-slider{
flex-basis:65%;padding:48px;overflow:hidden;position:relative;z-index:1;
background-image:linear-gradient(to right,rgba(255,255,255,.95),rgba(255,255,255,.95)),url(//quanticsolutions.net/wp-content/themes/QS/home/images/dubai-1767540.jpg);
background-size:cover;background-position:center;
}
.services-section .slider-viewport{width:100%;overflow:hidden}
.services-section .slider-track{display:flex;transition:transform .6s cubic-bezier(.45,0,.2,1)}
.services-section .slider-track.no-transition{transition:none} .services-section .service-card{
flex:0 0 calc(33.333% - 20px);margin:0 10px;background-color:#333;background-size:cover;background-position:center;
border-radius:12px;border:1px solid #e9ecef;box-shadow:0 4px 12px rgba(0,0,0,.04);position:relative;overflow:hidden;height:300px;transition:all .4s ease
}
.services-section .service-card::after{content:"";position:absolute;inset:0;background-size:cover;background-position:center;background-image:inherit;transition:transform .4s ease;z-index:1}
.services-section .service-card:hover::after{transform:scale(1.05)}
.services-section .service-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.7) 100%);z-index:2;transition:all .4s ease}
.services-section .service-card:hover::before{background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.8) 100%)} .services-section .service-card-title-default{position:absolute;bottom:0;left:0;right:0;padding:24px;color:#fff;z-index:3;opacity:1;transform:translateY(0);transition:all .4s ease}
.services-section .service-card-title-default h3{font-size:1.1rem;font-weight:600;margin:0;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.services-section .service-card:hover .service-card-title-default{opacity:0;transform:translateY(10px)} .services-section .card-content{
position:absolute;bottom:0;left:0;right:0;padding:24px;color:#fff;z-index:3;
opacity:0;transform:translateY(20px);transition:all .4s ease
}
.services-section .service-card:hover .card-content{opacity:1;transform:translateY(0)} .services-section .card-content .icon{
width:40px;
height:40px;
margin-bottom:12px;
display:grid;
place-items:center;
border-radius:8px;
background:rgba(255,255,255,.15);
backdrop-filter:blur(5px);
color:#fff;
border:1px solid rgba(255,255,255,.3);
}
.services-section .card-content .icon img{
width:80% !important;
height:auto !important;
display:block;
}
.services-section .card-content h3{font-size:1.1rem;font-weight:600;margin-bottom:8px}
.services-section .card-content p{font-size:.88rem;line-height:1.6;color:#e0e0e0} .services-section .slider-navigation{display:flex;justify-content:flex-end;align-items:center;margin-top:24px;padding:0 10px;gap:12px}
.services-section .nav-arrow{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #e0e0e0;box-shadow:0 2px 5px rgba(0,0,0,.05);cursor:pointer;display:grid;place-items:center;color:#555;transition:all .3s ease}
.services-section .nav-arrow:hover{background:#f8f8f8;color:#000;transform:scale(1.05)}
.services-section .nav-arrow svg{width:18px;height:18px} @media (max-width: 992px){
.services-section .services-container{flex-direction:column}
.services-section .services-info,
.services-section .services-slider{flex-basis:100%}
.services-section .services-slider{padding:48px 24px}
} @media (max-width: 768px){
.services-section .slider-viewport{overflow:hidden}
.services-section .service-card{flex:0 0 100%;margin:0;height:300px}
.services-section .service-card::before{background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.88) 100%) !important;transition:none !important}
.services-section .service-card::after{transition:none !important;transform:none !important}
.services-section .service-card-title-default{display:none}
.services-section .card-content{opacity:1 !important;transform:none !important;padding:18px 18px 20px}
.services-section .slider-navigation{justify-content:center}
}.hero{
--ink:#e9edf2; --muted:#b7c0cc;
--accent:#58a6ff; --accent-2:#8b5cf6;
--glass:rgba(255,255,255,.06); --stroke:rgba(255,255,255,.18);
--maxw:1100px; --qs-top-max:80px; --qs-bot-max:32px; } @keyframes fadeIn-down { from{opacity:0;transform:translateY(15px)} to{opacity:1;transform:translateY(0)} }
@keyframes draw-line { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes fadeIn-glow {
from { color: var(--ink); text-shadow: 0 0 0 transparent; }
to   { color: hsl(230,40%,80%);
text-shadow:
0 0 1em hsla(320,100%,50%,.2),
0 0 .125em hsla(320,100%,60%,.3),
-1em -.125em .5em hsla(40,100%,60%,0),
1em  .125em .5em hsla(200,100%,60%,0); }
}
@keyframes lights {
0%   { color:hsl(230,40%,80%); text-shadow:0 0 1em hsla(320,100%,50%,.2),0 0 .125em hsla(320,100%,60%,.3),-1em -.125em .5em hsla(40,100%,60%,0),1em .125em .5em hsla(200,100%,60%,0) }
30%  { color:hsl(230,80%,90%); text-shadow:0 0 1em hsla(320,100%,50%,.5),0 0 .125em hsla(320,100%,60%,.5),-.5em -.125em .25em hsla(40,100%,60%,.2), .5em .125em .25em hsla(200,100%,60%,.4) }
40%  { color:hsl(230,100%,95%);text-shadow:0 0 1em hsla(320,100%,50%,.5),0 0 .125em hsla(320,100%,90%,.5),-.25em -.125em .125em hsla(40,100%,60%,.2), .25em .125em .125em hsla(200,100%,60%,.4) }
70%  { color:hsl(230,80%,90%); text-shadow:0 0 1em hsla(320,100%,50%,.5),0 0 .125em hsla(320,100%,60%,.5), .5em -.125em .25em hsla(40,100%,60%,.2),-.5em .125em .25em hsla(200,100%,60%,.4) }
100% { color:hsl(230,40%,80%); text-shadow:0 0 1em hsla(320,100%,50%,.2),0 0 .125em hsla(320,100%,60%,.3), 1em -.125em .5em hsla(40,100%,60%,0),-.1em .125em .5em hsla(200,100%,60%,0) }
}
@keyframes logo-glow {
0%   { filter: brightness(0.8) drop-shadow(0 0 0 transparent); }
30%  { filter: brightness(1.1) drop-shadow(0 0 12px rgba(88,166,255,.5)); }
70%  { filter: brightness(1.1) drop-shadow(0 0 12px rgba(139,92,246,.5)); }
100% { filter: brightness(0.8) drop-shadow(0 0 0 transparent); }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
ul{list-style:none;margin:0;padding:0} .hero{
position:relative;
height:100svh;
min-height:560px;
overflow:hidden;
color:var(--ink);
}
body.admin-bar .hero{height:calc(100svh - 32px)}
.hero video{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;
filter:saturate(1.05) contrast(1.05) brightness(.6);
z-index:1
}
.overlay{
position:absolute;inset:0;pointer-events:none;z-index:2;
background:
radial-gradient(1100px 800px at 75% 50%, rgba(255,255,255,.08), transparent 60%),
linear-gradient(115deg, rgba(10,14,22,.90) 0%, rgba(20,26,44,.80) 40%, rgba(35,22,70,.70) 70%, rgba(60,20,110,.62) 100%),
radial-gradient(150% 115% at 50% 100%, rgba(0,0,0,.55), transparent 65%);
}
.wrap{
position:relative;
z-index:3;
height:100%;
perspective:1000px;
}
.container{
max-width:860px;
margin:0 auto;
padding:40px clamp(14px,3.6vw,28px) 0; display:grid;
align-content:center;
justify-items:center;
text-align:center; height: calc(100% - 164px); transition:transform .1s ease-out;
} .brand-lockup{
color:var(--ink);
text-transform:uppercase;
line-height:.9;
margin:0 0 8px;
opacity:0;
animation:fadeIn-down .8s ease-out .1s forwards;
} .hero-logo{
display:block;
margin:0 auto 4px;
height:150px; width:auto;
mix-blend-mode:luminosity;
filter:brightness(.8) drop-shadow(0 0 0 transparent);
transition:filter .5s ease-out;
}
.brand-lockup.glowing .hero-logo{animation:logo-glow 5s 1.5s linear infinite} .brand-lockup.glowing .q-line,
.brand-lockup.glowing .s-line{
animation:fadeIn-glow 1.5s ease-out forwards, lights 5s 1.5s linear infinite
}
.brand-lockup .q-line{
display:block;
font-weight:500;
font-size:clamp(32px,6.2vw,var(--qs-top-max));
letter-spacing:.06em
}
.brand-lockup .s-line{
display:block;
font-weight:400;
font-size:clamp(14px,2.8vw,var(--qs-bot-max));
letter-spacing:.05em;
margin-top:6px;
position:relative
}
.brand-lockup .s-line::after{
content:"";
display:block;
height:2px;
border-radius:2px;
width:44%;
margin:8px auto 0;
background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
opacity:.85; animation:draw-line .8s cubic-bezier(.19,1,.22,1) 2.4s forwards;
} .tagline,.cta{opacity:0;animation:fadeIn-down .8s ease-out forwards}
.tagline{
animation-delay:2.2s;
margin:10px 0 18px;
color:var(--muted);
font-size:clamp(14px,1.8vw,18px)
}
.cta{
animation-delay:2.4s;
display:inline-flex;
justify-content:center;
align-items:center;
width:auto;
padding:12px 18px;
border-radius:10px;
text-decoration:none;
font-weight:600;
color:var(--ink);
background:rgba(49,104,180,.18);
box-shadow:inset 0 0 0 1px rgba(88,166,255,.35);
backdrop-filter:saturate(140%) blur(6px);
transition:box-shadow .25s ease
}
.cta:hover{
box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 16px rgba(88,166,255,.5)
} .hero-cards{
position:absolute;
left:0;right:0;
bottom:18px;
z-index:3
}
.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
max-width:var(--maxw);
margin:0 auto;
padding:0 clamp(14px,3.6vw,28px);
transition:transform .1s;
}
.card{
background:var(--glass);
border-radius:14px;
padding:14px 16px;
box-shadow:0 6px 26px rgba(0,0,0,.22), inset 0 0 0 1px var(--stroke);
backdrop-filter:saturate(130%) blur(8px);
text-align:left;
position:relative;
overflow:hidden;
transition:transform .25s, box-shadow .25s;
color:var(--ink)
}
.card:hover{
transform:translateY(-6px);
box-shadow:0 10px 32px rgba(0,0,0,.28), inset 0 0 0 1px var(--stroke)
}
.card::before{
content:"";
position:absolute;
inset:0;
border-radius:14px;
border:2px solid transparent;
background:linear-gradient(120deg,var(--accent-2),var(--accent)) border-box;
-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;
mask-composite:exclude;
opacity:0;
transition:opacity .25s
}
.card:hover::before{opacity:.8}
.card h4{margin:0 0 4px;font-size:15px}
.card p{margin:0;color:var(--muted);font-size:13px;line-height:1.5} @media (max-height:900px){
.brand-lockup .q-line{font-size:clamp(28px,5.5vw,84px)}
.brand-lockup .s-line{font-size:clamp(12px,2.4vw,32px);letter-spacing:.32em}
.tagline{margin:8px 0 14px}
.hero-cards{bottom:14px}
}
@media (max-height:780px){
.container{height: calc(100% - 156px)} .brand-lockup .q-line{font-size:clamp(26px,5vw,76px)}
.brand-lockup .s-line{font-size:clamp(11px,2.2vw,28px)}
.cards{gap:18px}
.card{padding:12px 14px}
}
@media (max-height:700px){
.container{height: calc(100% - 148px)}
.tagline{font-size:clamp(13px,1.6vw,16px)}
.cta{padding:10px 16px;border-radius:9px}
.cards{gap:16px}
} @media (max-width:900px){ .hero-cards{display:none} .wrap{
height:100%;
display:grid;
place-items:center;
}
.container{
height:100%;
max-width:92vw;
padding:0 18px; display:grid;
align-content:center;
justify-items:center;
row-gap:10px;
} .hero{
--qs-top-max:60px;
--qs-bot-max:26px;
} .hero-logo{
height:120px;
margin-bottom:2px;
}
.brand-lockup{margin-bottom:6px}
.brand-lockup .q-line{
font-size:clamp(24px,12vw,var(--qs-top-max));
letter-spacing:.05em;
}
.brand-lockup .s-line{
font-size:clamp(12px,5.2vw,var(--qs-bot-max));
letter-spacing:.12em;
margin-top:4px;
}
.brand-lockup .s-line::after{
width:42%;
margin-top:6px; animation:draw-line .8s cubic-bezier(.19,1,.22,1) 2.4s forwards;
}
.tagline{
margin:6px 0 12px;
font-size:clamp(13px,4vw,16px);
}
.cta{
padding:10px 16px;
border-radius:10px;
font-size:.95rem;
}
} @media (max-width:360px){
.hero-logo{height:100px}
.brand-lockup .q-line{font-size:clamp(22px,11.5vw,52px)}
.brand-lockup .s-line{font-size:clamp(11px,4.8vw,22px)}
.tagline{font-size:clamp(12px,3.8vw,15px)}
.cta{padding:9px 14px;font-size:.9rem}
}:root {
--ink: #212529;
--muted: #6c757d;
--accent: #0d6efd;
--accent-2: #6f42c1;
--qs-blue: #00BFFF;
--maxw: 880px;
--bg-light: #f8f9fa;
--card-bg: #ffffff;
--border-color: #dee2e6;
}
.about-section {
background-color: var(--bg-light);
color: var(--ink);
padding: clamp(2.2rem, 5.5vw, 4rem) 0;
position: relative;
overflow: hidden;
}
.about-container {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 clamp(2rem, 5vw, 4rem);
}
.section-title {
text-align: center;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.2em;
color: var(--muted);
margin: 0;
} .about-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
margin-top: clamp(3.8rem, 7vw, 70px);
} .about-card {
position: relative;
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 16px;
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
} .about-card::before {
content: "";
display: block;
padding-top: 50%;
}
.about-card .card-inner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(1.1rem, 2.6vw, 1.8rem);
}
.about-card:hover {
transform: translateY(-6px);
box-shadow:
0 20px 25px -5px rgb(0 0 0 / 0.1),
0 8px 10px -6px rgb(0 0 0 / 0.1);
} .about-section .section-title,
.about-section .about-card {
opacity: 0;
transform: translateY(24px);
transition: opacity .6s ease-out, transform .6s ease-out;
}
.about-section.is-visible .section-title,
.about-section.is-visible .about-card {
opacity: 1;
transform: translateY(0);
} .card-image .card-inner { padding: 0; }
.card-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.card-mission {
font-size: clamp(.9rem, 1.6vw, 1.05rem);
line-height: 1.55;
}
.mission-content { position: relative; }
.mission-content p { margin: 0; }
.mission-content::after {
content: "";
position: absolute;
left: 0;
bottom: -1.2rem;
height: 3px;
width: 38%;
border-radius: 4px;
background: linear-gradient(to right, var(--accent), transparent);
} .card-tagline .card-inner {
align-items: center;
text-align: center;
color: #f8f9fa;
}
.card-tagline h3 {
font-size: clamp(1.25rem, 2.8vw, 1.75rem);
font-weight: 500;
line-height: 1.45;
margin: 0;
position: relative;
z-index: 2;
}
.card-tagline h3 .tag-hl {
color: var(--qs-blue);
font-weight: 600;
text-shadow: 0 0 8px rgba(0,191,255,.35);
}
.card-bg-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.card-bg-overlay {
position: absolute;
inset: 0;
background-color: rgba(12,13,15,.62);
z-index: 1;
} .card-stats .card-inner {
justify-content: flex-end;
text-align: center;
padding: 1.3rem;
}
.card-stats lottie-player {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: .25;
pointer-events: none;
}
.stats-bar {
display: grid;
grid-template-columns: repeat(3,1fr);
align-items: start;
gap: .5rem .75rem;
width: 100%;
position: relative;
z-index: 2;
}
.stat { text-align: center; }
.stat-top {
font-weight: 700;
color: var(--ink);
font-size: clamp(1.2rem, 2vw, 1.45rem);
line-height: 1;
margin-bottom: 0.3rem;
display: flex;
justify-content: center;
align-items: baseline;
gap: .15rem;
}
.stat-number,
.stat-prefix {
display: inline;
font: inherit;
color: inherit;
}
.stat-label {
font-size: clamp(.55rem, .85vw, .6rem);
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
display: block;
line-height: 1.2;
max-width: 13.5ch;
margin: 0 auto;
text-align: center;
white-space: normal;
word-break: keep-all;
} @media (max-height: 820px) {
.about-section { padding: clamp(1.8rem, 4.5vw, 3.2rem) 0; }
.about-card::before { padding-top: 46%; }
} @media (min-width: 641px) and (max-width: 1024px) {
.about-grid {
grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
grid-template-areas:
"mission tagline"
"stats   stats";
align-items: stretch;
gap: 1.1rem;
}
.about-grid .card-image {
display: none;
}
.card-mission  { grid-area: mission; }
.card-tagline  { grid-area: tagline; }
.card-stats    { grid-area: stats; } .about-card::before {
padding-top: 0;
}
.about-card .card-inner {
position: relative;
min-height: 230px;
} .card-tagline h3 {
font-size: clamp(1.05rem, 2.2vw, 1.4rem);
}
} @media (max-width: 640px) {
.about-grid {
grid-template-columns: 1fr;
gap: 1rem;
} .about-grid .card-image {
display: none;
} .about-card::before {
display: none;
}
.about-card {
border-radius: 14px;
}
.about-card .card-inner {
position: static;
padding: 0.8rem 0.8rem;
} .card-mission {
font-size: 0.9rem;
line-height: 1.5;
}
.mission-content::after {
width: 44%;
bottom: -.8rem;
} .card-tagline h3 {
font-size: clamp(0.95rem, 4vw, 1.15rem);
line-height: 1.4;
} .card-stats .card-inner {
padding: 0.8rem 0.5rem;
}
.stats-bar {
grid-template-columns: repeat(3, 1fr);
gap: 0.25rem;
align-items: center;
}
.stat-top {
font-size: clamp(0.8rem, 3.6vw, 0.95rem);
margin-bottom: 0.05rem;
}
.stat-label {
font-size: clamp(0.95rem, 4.6vw, 1.15rem);
max-width: 9ch;
letter-spacing: 0.05em;
line-height: 1.25;
color: var(--ink);
text-transform: none;
}
.stat:not(:last-child) {
border-right: 1px solid rgba(0,0,0,0.08);
}
}:root{
--ink-dark:#1e293b;
--ink-light:#f1f5f9;
--muted-dark:#64748b;
--muted-light:#cbd5e1;
--accent-primary:#3b82f6;
--accent-secondary:#1e293b;
--bg-section:#f1f5f9;
--bg-dark-card:#0f172a;
--maxw:1140px;
}
.domains-section{
padding:clamp(2.4rem,6vw,4.8rem) 0;
background:var(--bg-section);
}
.domains-container{
max-width:var(--maxw);
margin:0 auto;
padding:0 1.5rem;
}
.section-title{
margin:0;
text-align:center;
font-weight:600;
color:var(--ink-dark);
font-size:clamp(1.5rem,3.6vw,2.1rem);
}
.section-subtitle{
max-width:720px;
margin:.75rem auto clamp(1.6rem,4.5vw,3rem);
text-align:center;
color:var(--muted-dark);
font-size:clamp(1rem,1.8vw,1.08rem);
} .domains-grid{
display:block;
height:auto;
border-radius:16px;
box-shadow:none;
position:relative;
z-index:1;
}
.domain-card{
position:relative;
width:100%;
overflow:hidden;
border-radius:16px;
margin:0 0 1rem 0;
min-height:420px;
background:#000;
} .domain-card::after{
content:"";
position:absolute;
inset:0;
padding:2px;
border-radius:inherit;
background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
opacity:0;
transition:opacity .35s ease;
}
.domain-card:hover::after{
opacity:1;
}
.card-background{
position:absolute;
inset:0;
z-index:0;
}
.card-background img{
width:100%;
height:100%;
object-fit:cover;
opacity:.55;
transform:none;
transition:none;
}
.card-overlay{
position:absolute;
inset:0;
z-index:1;
}
.dark-card{
background:var(--bg-dark-card);
color:var(--ink-light);
}
.light-card{
background:#fff;
color:var(--ink-dark);
}
.dark-card .card-overlay{
background:linear-gradient(to top,rgba(8,12,22,.9) 65%, rgba(8,12,22,.5) 85%, rgba(8,12,22,.25) 100%);
}
.light-card .card-overlay{
background:linear-gradient(to top,rgba(255,255,255,.95) 65%, rgba(255,255,255,.7) 85%, rgba(255,255,255,.3) 100%);
}
.card-content{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
justify-content:flex-end;
height:100%;
padding:1.15rem 1.25rem 1.25rem;
}
.domain-card h3{
margin:0 0 .6rem 0;
font-weight:600;
font-size:clamp(1.4rem,6.6vw,1.9rem);
text-shadow:0 2px 15px rgba(0,0,0,.2);
}
.dark-card h3{
color:var(--accent-primary);
}
.light-card h3{
color:var(--accent-secondary);
}
.content-reveal{
opacity:1;
position:relative;
}
.domain-card p{
max-width:100%;
margin:0 0 1rem 0;
line-height:1.6;
font-size:clamp(1rem,4vw,1.05rem);
}
.dark-card p{
color:var(--muted-light);
}
.light-card p{
color:var(--muted-dark);
}
.btn{
display:inline-flex;
align-items:center;
gap:.5rem;
padding:.7rem 1.05rem;
border-radius:8px;
font-weight:600;
text-decoration:none;
font-size:.95rem;
transition:none;
}
.btn-primary{
background:var(--accent-primary);
color:var(--ink-light);
}
.btn-primary:hover{
background:#2563eb;
}
.btn-secondary{
background:var(--accent-secondary);
color:var(--ink-light);
}
.btn-secondary:hover{
background:#334155;
} @media (max-width:640px){
.domains-grid{
box-shadow:none;
border-radius:0;
}
} @media (min-width:641px) and (max-width:1120px){
.domains-grid{
display:flex;
flex-direction:row;
gap:1.25rem;
height:auto;
border-radius:16px;
box-shadow:0 25px 50px -12px rgb(0 0 0 / .25);
}
.domain-card{
flex:1 1 0;
margin:0;
min-height:360px;
}
.card-content{
padding:clamp(1.25rem,3vw,2rem);
}
.domain-card h3{
font-size:clamp(1.4rem,3vw,1.9rem);
}
.domain-card p{
font-size:clamp(.96rem,1.8vw,1.04rem);
line-height:1.55;
}
.btn{
font-size:.9rem;
padding:.62rem 1rem;
} .domain-card::after{
opacity:.6;
}
} @media (min-width:1121px){
.domains-grid{
position:relative;
display:block;
height:clamp(380px,56vh,520px);
border-radius:16px;
box-shadow:0 25px 50px -12px rgb(0 0 0 / .25);
}
.domain-card{
position:absolute;
top:0;
bottom:0;
margin:0;
min-height:0;
border-radius:16px;
transition:width .7s cubic-bezier(.23,1,.32,1), left .7s cubic-bezier(.23,1,.32,1);
}
.dark-card{
left:0;
width:50%;
border-radius:16px 0 0 16px;
}
.light-card{
left:50%;
width:50%;
border-radius:0 16px 16px 0;
} .domains-grid:has(.dark-card:hover) .dark-card{
width:68%;
}
.domains-grid:has(.dark-card:hover) .light-card{
left:68%;
width:32%;
}
.domains-grid:has(.light-card:hover) .light-card{
left:32%;
width:68%;
}
.domains-grid:has(.light-card:hover) .dark-card{
width:32%;
}
.card-background img{
opacity:.5;
transition:transform .6s ease, opacity .35s ease;
}
.domains-grid:hover .domain-card:not(:hover) .card-background img{
opacity:.25;
}
.domain-card:hover .card-background img{
transform:scale(1.045);
opacity:.6;
}
.card-overlay{
position:absolute;
inset:0;
}
.dark-card .card-overlay{
background:linear-gradient(to top,rgba(15,23,42,1) 40%,rgba(15,23,42,.6) 65%,transparent 100%);
}
.light-card .card-overlay{
background:linear-gradient(to top,rgba(255,255,255,1) 40%,rgba(255,255,255,.75) 65%,transparent 100%);
}
.card-content{
position:absolute;
inset:0;
padding:clamp(1.25rem,4.2vw,2.4rem);
}
.domain-card h3{
position:absolute;
left:clamp(1.25rem,4.2vw,2.4rem);
bottom:clamp(1.25rem,4.2vw,2.4rem);
font-size:clamp(1.6rem,3.8vw,2.3rem);
transform-origin:bottom left;
transition:transform .5s cubic-bezier(.23,1,.32,1);
}
.domains-grid:hover .domain-card:not(:hover) h3{
transform:scale(.86);
}
.domain-card:hover h3{
transform:translateY(-170px);
}
.content-reveal{
position:absolute;
left:clamp(1.25rem,4.2vw,2.4rem);
bottom:clamp(1.25rem,4.2vw,2.4rem);
opacity:0;
transition:opacity .45s .08s cubic-bezier(.23,1,.32,1);
}
.domain-card:hover .content-reveal{
opacity:1;
}
.domain-card p{
max-width:92%;
margin:0 0 1.4rem 0;
line-height:1.65;
font-size:clamp(.92rem,1.5vw,1.02rem);
}
.btn{
font-size:.9rem;
padding:.7rem 1.2rem;
transition:transform .25s, background-color .25s;
}
.btn:hover{
transform:scale(1.04);
} @media (max-height:800px){
.domains-grid{
height:clamp(360px,52vh,480px);
}
.domain-card:hover h3{
transform:translateY(-150px);
}
}
} .domains-section .section-title,
.domains-section .section-subtitle{
opacity:1 !important;
transform:none !important;
visibility:visible !important;
transition:none !important;
position:relative;
z-index:3;
}.security-section {
--sec-bg: #0A0F16;
--sec-ink: #E9EDF2;
--sec-muted: #A0AEC0;
--sec-glow-primary: #00BFFF; --sec-glow-secondary: #8b5cf6;
--sec-card-base-bg: rgba(20, 26, 38, 0.25);
--maxw: 1180px;
--hexagon-color: rgba(60, 100, 150, 0.15);
--hexagon-color-hover: rgba(60, 100, 150, 0.4);
position: relative;
overflow: hidden;
padding: clamp(3rem, 8vw, 6rem) 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--sec-bg);
color: var(--sec-ink);
-webkit-font-smoothing: antialiased;
} .security-bg-video {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
object-fit: cover;
filter: brightness(0.6);
}
.security-bg-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
background:
linear-gradient(115deg, rgba(10,14,22,.90) 0%, rgba(20,26,44,.78) 40%, rgba(35,22,70,.70) 70%, rgba(60,20,110,.62) 100%),
radial-gradient(160% 120% at 50% 100%, rgba(0,0,0,.6), transparent 65%);
} .security-container {
width: 100%;
max-width: var(--maxw);
margin: 0 auto;
padding: 0 1.5rem;
position: relative;
z-index: 3;
} .security-section .section-header {
text-align: center;
margin-bottom: clamp(2rem, 5vw, 4rem);
}
.security-section .section-header h2 {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 600;
line-height: 1.2;
margin: 0 0 0.75rem 0;
text-shadow: 0 0 8px rgba(0,191,255,0.3), 0 0 15px rgba(0,191,255,0.1);
}
.security-section .section-header p {
font-size: clamp(1rem, 2vw, 1.15rem);
color: var(--sec-muted);
max-width: 650px;
margin: 0 auto;
} .security-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1.5rem;
}
.security-card {
position: relative;
border-radius: 16px;
padding: 2rem 1.5rem;
text-align: center;
background: var(--sec-card-base-bg);
backdrop-filter: blur(12px);
box-shadow: 0 0 15px rgba(0,191,255,0.2), 0 0 30px rgba(139,92,246,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
opacity: 0;
}
.security-card::before {
content:'';
position:absolute; inset:0; border-radius:16px; padding:1.5px;
background:linear-gradient(45deg, rgba(0,191,255,.6), rgba(139,92,246,.6));
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
z-index:0; opacity:.8; transition:opacity .3s ease;
}
.security-card:hover {
transform: translateY(-5px);
box-shadow: 0 0 25px rgba(0,191,255,.5), 0 0 40px rgba(139,92,246,.3);
} .security-card .hexagon-overlay {
position:absolute; inset:-1px; pointer-events:none; z-index:1; overflow:hidden; border-radius:16px;
background-image:
linear-gradient(45deg, var(--hexagon-color) 2px, transparent 2px),
linear-gradient(-45deg, var(--hexagon-color) 2px, transparent 2px),
linear-gradient(90deg, transparent 5px, transparent 5px);
background-size:24px 42px; background-position:0 0, 12px 21px;
opacity:0; transform:scale(.8); transition:opacity .4s ease-out, transform .4s ease-out;
}
@keyframes hexagon-pulse {
0% { background-position:0 0, 12px 21px; opacity:.4; }
50% { background-position:5px 5px, 17px 26px; opacity:.7; }
100% { background-position:0 0, 12px 21px; opacity:.4; }
}
.security-card:hover .hexagon-overlay {
opacity:1; transform:scale(1);
background-image:
linear-gradient(45deg, var(--hexagon-color-hover) 2px, transparent 2px),
linear-gradient(-45deg, var(--hexagon-color-hover) 2px, transparent 2px),
linear-gradient(90deg, transparent 5px, transparent 5px);
animation: hexagon-pulse 1.5s infinite alternate ease-in-out;
} .security-section .card-icon {
margin: 0 auto 1.25rem;
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
height: 80px;
} .security-section .card-icon img {
width: 64px;
height: 64px;
object-fit: contain;
filter:
brightness(2)
invert(52%) sepia(91%) saturate(3000%) hue-rotate(180deg) brightness(1.1)
drop-shadow(0 0 6px rgba(0,191,255,0.7))
drop-shadow(0 0 12px rgba(139,92,246,0.3));
opacity: 0.9;
transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}
.security-card:hover .card-icon img {
transform: scale(1.1);
filter:
brightness(2.2)
invert(52%) sepia(91%) saturate(3000%) hue-rotate(180deg) brightness(1.2)
drop-shadow(0 0 10px rgba(0,191,255,0.9))
drop-shadow(0 0 18px rgba(139,92,246,0.5));
opacity: 1;
} .security-section h4 {
font-size: 1.25rem;
font-weight: 500;
margin: 0 0 .5rem;
color: var(--sec-ink);
text-shadow: 0 0 5px rgba(0,191,255,.2);
position: relative;
z-index: 2;
}
.security-section p {
font-size: 1rem;
color: var(--sec-muted);
margin: 0;
position: relative;
z-index: 2;
} .read-more-container {
text-align: center;
margin-top: clamp(2rem,5vw,4rem);
opacity: 0;
}
.read-more-btn {
display:inline-block;
padding:12px 32px;
border:1px solid var(--sec-glow-primary);
border-radius:8px;
color:var(--sec-ink);
text-decoration:none;
font-weight:500;
letter-spacing:.5px;
background:transparent;
transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.read-more-btn:hover {
background-color: var(--sec-glow-primary);
color: var(--sec-bg);
box-shadow: 0 0 20px rgba(0,191,255,.5);
} @keyframes fadeIn-up {
from { opacity:0; transform:translateY(30px); }
to   { opacity:1; transform:translateY(0); }
}
.security-section.is-visible .section-header { animation: fadeIn-up .8s .2s forwards; opacity:0; }
.security-section.is-visible .security-card { animation: fadeIn-up .8s forwards; }
.security-section.is-visible .security-grid .security-card:nth-child(1){ animation-delay:.3s; }
.security-section.is-visible .security-grid .security-card:nth-child(2){ animation-delay:.4s; }
.security-section.is-visible .security-grid .security-card:nth-child(3){ animation-delay:.5s; }
.security-section.is-visible .security-grid .security-card:nth-child(4){ animation-delay:.6s; }
.security-section.is-visible .security-grid .security-card:nth-child(5){ animation-delay:.7s; }
.security-section.is-visible .read-more-container { animation: fadeIn-up .8s .9s forwards; } @media (max-width:1100px){
.security-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px){
.security-grid{ grid-template-columns:repeat(2,1fr); }
.security-section h4{ font-size:1.15rem; }
.security-section .card-icon { height: 72px; }
.security-section .card-icon img { width: 56px; height: 56px; }
}
@media (max-width:576px){
.security-grid{ grid-template-columns:1fr; }
.security-section .section-header h2{ font-size:1.75rem; }
.security-section .card-icon { height: 64px; }
.security-section .card-icon img { width: 52px; height: 52px; }
} @media (prefers-reduced-motion: reduce){
.security-section *{ animation:none !important; transition:none !important; }
.security-section .section-header,
.security-section .security-card,
.security-section .read-more-container{ opacity:1 !important; transform:none !important; }
}.impact-section {
--imp-bg: #F8F9FA;
--imp-ink: #212529;
--imp-ink-light: #F8F9FA;
--imp-muted: #6C757D;
--imp-accent-blue: #0d6efd;
--imp-card-bg: #FFFFFF;
--imp-card-stroke: #E9ECEF;
--imp-card-shadow: rgba(0, 0, 0, .05);
--maxw: 1200px;
position: relative;
overflow: hidden;
background: var(--imp-bg);
color: var(--imp-ink);
min-height: auto;
display: block;
padding: clamp(2.4rem, 5vh, 3.4rem) 0;
box-sizing: border-box;
}
.impact-container {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 1.75rem;
width: 100%;
} .impact-section .section-header {
text-align: center;
max-width: 780px;
margin: 0 auto clamp(1.4rem, 3.4vh, 2.1rem);
opacity: 0;
transform: translateY(40px);
}
.impact-section .section-header h2 {
font-size: clamp(2rem, 3.8vw, 2.7rem);
font-weight: 700;
letter-spacing: -0.01em;
margin: 0 0 0.7rem;
color: var(--imp-ink);
}
.impact-section .section-header p {
font-size: clamp(0.98rem, 1.7vw, 1.12rem);
color: var(--imp-muted);
line-height: 1.6;
margin: 0 auto;
} .impact-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
gap: 1.4rem;
align-items: stretch;
} .impact-card {
border-radius: 22px;
padding: clamp(1.6rem, 2.4vh, 2rem);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: transform .3s ease, box-shadow .3s ease, opacity .35s ease;
opacity: 0;
transform: translateY(40px);
overflow: hidden;
position: relative;
}
.impact-card:hover {
transform: translateY(-4px);
} .impact-card-large {
grid-row: span 2;
background: #10151B;
color: var(--imp-ink-light);
text-align: left;
justify-content: flex-end;
align-items: flex-start;
box-shadow: 0 14px 32px rgba(0, 0, 0, .25);
min-height: 420px;
}
.card-bg-video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
z-index: 1;
filter: brightness(.55);
opacity: .85;
object-fit: cover;
}
.card-bg-overlay {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(to top, rgba(10, 10, 10, .88) 35%, transparent 100%);
opacity: 1;
}
.impact-card-large .card-content {
position: relative;
z-index: 3;
max-width: 430px;
} .large-stat {
display: flex;
flex-direction: column;
align-items: flex-start !important;
text-align: left !important;
width: 100%;
}
.large-title {
will-change: opacity, transform, clip-path, filter;
color: #fff;
text-align: left !important;
}
.large-sub {
color: rgba(255, 255, 255, .9) !important;
text-transform: none !important;
letter-spacing: .02em;
text-align: left !important;
display: block;
width: 100%;
max-width: none !important;
margin-top: 0.35rem;
padding: 0;
text-shadow: 0 0 8px rgba(0, 0, 0, .25);
} .impact-card-small {
background: var(--imp-card-bg);
border: 1px solid var(--imp-card-stroke);
box-shadow: 0 10px 26px var(--imp-card-shadow);
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 220px;
padding: 1.6rem 1.9rem;
}
.impact-card-small:hover {
box-shadow: 0 18px 30px rgba(0, 0, 0, .08);
} .stat-number {
font-size: clamp(2.1rem, 3.7vw, 2.8rem);
font-weight: 700;
color: var(--imp-accent-blue);
line-height: 1.1;
margin-bottom: 0.35rem;
}
.stat-label {
font-size: clamp(1rem, 1.7vw, 1.1rem);
font-weight: 500;
margin-bottom: 0.7rem;
color: var(--imp-ink);
text-transform: none;
letter-spacing: 0;
white-space: normal;
}
.stat-description {
font-size: clamp(0.9rem, 1.4vw, 0.98rem);
color: var(--imp-muted);
line-height: 1.6;
margin: 0;
max-width: 95%;
} @keyframes fadeInUp {
from { opacity: 0; transform: translateY(40px) }
to { opacity: 1; transform: translateY(0) }
}
@keyframes fadeOutDown {
from { opacity: 1; transform: translateY(0) }
to { opacity: 0; transform: translateY(40px) }
} @keyframes bigTitleIn {
0% { opacity: 0; transform: translateY(8px) scale(.98); filter: blur(2px); clip-path: inset(0 0 100% 0) }
40% { clip-path: inset(0 0 0 0) }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) }
}
@keyframes bigTitleOut {
0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) }
100% { opacity: 0; transform: translateY(8px) scale(.98); filter: blur(4px) }
}
@keyframes bigSubIn {
from { opacity: 0; transform: translateX(-14px) }
to { opacity: 1; transform: translateX(0) }
}
@keyframes bigSubOut {
from { opacity: 1; transform: translateX(0) }
to { opacity: 0; transform: translateX(-14px) }
} .impact-section.is-entering .section-header { animation: fadeInUp .7s .1s forwards; }
.impact-section.is-entering .impact-card { animation: fadeInUp .7s forwards; }
.impact-section.is-entering .impact-card-large { animation-delay: .25s; }
.impact-section.is-entering .impact-grid .impact-card-small:nth-of-type(1) { animation-delay: .35s; }
.impact-section.is-entering .impact-grid .impact-card-small:nth-of-type(2) { animation-delay: .45s; }
.impact-section.is-leaving .section-header { animation: fadeOutDown .5s forwards; }
.impact-section.is-leaving .impact-card { animation: fadeOutDown .5s forwards; }
.impact-section.big-in .large-title { animation: bigTitleIn .8s ease-out forwards; }
.impact-section.big-in .large-sub { animation: bigSubIn .6s .15s ease-out forwards; }
.impact-section.big-out .large-title { animation: bigTitleOut .5s ease-in forwards; }
.impact-section.big-out .large-sub { animation: bigSubOut .4s ease-in forwards; } @media (max-width: 992px) {
@keyframes bigTitleInMobile {
0% { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(3px) }
60% { opacity: 1 }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) }
}
@keyframes bigTitleOutMobile {
0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) }
100% { opacity: 0; transform: translateY(10px) scale(.97); filter: blur(2px) }
}
.impact-section.big-in .large-title { animation: bigTitleInMobile .55s ease-out forwards; }
.impact-section.big-out .large-title { animation: bigTitleOutMobile .4s ease-in forwards; }
.impact-card { border-radius: 20px; }
} @media (min-width: 768px) and (max-width: 1200px) { .impact-section .impact-container {
display: flex !important;
flex-direction: row !important;
align-items: center;
justify-content: space-between;
padding-top: 3rem;
padding-bottom: 3rem;
gap: 2rem;
} .impact-section .section-header {
width: 35% !important;
text-align: left !important;
margin: 0 !important;
padding-right: 1rem;
transform: none !important;
opacity: 1 !important;
}
.impact-section .section-header h2 {
font-size: 2rem !important;
} .impact-section .impact-grid {
width: 65% !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 1rem !important;
margin-top: 0 !important;
} .impact-card-large {
min-height: 320px !important;
}
.impact-card-small {
min-height: 150px !important;
padding: 1rem !important;
}
.stat-number {
font-size: 2rem !important;
}
.stat-label {
font-size: 0.9rem !important;
}
} @media (max-width: 767px) {
.impact-container { padding: 0 1.25rem; }
.impact-grid { grid-template-columns: 1fr; }
.impact-card-large { grid-row: auto; min-height: 380px; }
.impact-card-small { min-height: 0; padding: 1.4rem 1.4rem 1.6rem; }
.impact-card-small .stat-label {
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
max-width: 90%;
margin-left: auto;
margin-right: auto;
text-align: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.impact-section { padding: clamp(2.1rem, 5vh, 2.7rem) 0; }
} @media (max-height: 780px) {
.impact-section { padding: clamp(2rem, 4vh, 3rem) 0; }
.impact-card { padding: clamp(1.3rem, 2vh, 1.7rem); }
.stat-number { font-size: clamp(2rem, 3.5vw, 2.6rem); }
} @media (prefers-reduced-motion: reduce) {
.impact-section * { animation: none !important; transition: none !important; }
.impact-section .section-header, .impact-section .impact-card { opacity: 1 !important; transform: none !important; }
}.vision-section{ --vis-bg:#0A0F16;
--vis-ink:#E9EDF2;
--vis-muted:#A0AEC0;
--vis-accent:#58A6FF;
--vis-accent-2:#8B5CF6;
--maxw:960px;
position:relative; overflow:hidden; min-height:100vh;
display:flex; align-items:center; justify-content:center;
padding:clamp(3rem,8vw,6rem) 1.5rem; box-sizing:border-box; color:var(--vis-ink); background:linear-gradient(135deg,#070C18 0%,#0B1030 45%,#1B0E3A 75%,#0A0F16 100%);
background-size:600% 600%;
animation:visionWave 16s ease infinite;
}
#vision-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1; display:block} .vision-bg-overlay{
position:absolute; inset:0; pointer-events:none; z-index:2;
background:
radial-gradient(160% 120% at 50% 100%, rgba(0,0,0,.55), transparent 65%),
radial-gradient(90% 60% at 50% 0%, rgba(88,166,255,.10), transparent 60%),
radial-gradient(80% 50% at 20% 30%, rgba(139,92,246,.08), transparent 60%);
}
.vision-container{max-width:var(--maxw); margin:0 auto; position:relative; z-index:3; text-align:center} .vision-logo{margin-bottom:2rem}
.vision-logo img{
width:clamp(96px,22vw,210px);
height:auto;
filter:drop-shadow(0 0 15px rgba(88,166,255,.45));
} .vision-title{
font-size:clamp(2rem,5.2vw,3.8rem);
font-weight:600; line-height:1.12; margin:0 0 1.1rem;
text-shadow:0 0 10px rgba(139,92,246,.25);
text-wrap:balance;
}
.vision-subcopy{
font-size:clamp(.98rem,1.9vw,1.15rem);
color:var(--vis-muted);
line-height:1.7; max-width:760px; margin:0 auto 1.6rem;
text-wrap:pretty;
} .vision-chips{
display:flex; justify-content:center; gap:.6rem .75rem; flex-wrap:wrap; margin:0 0 2rem
}
.chip{
display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .85rem;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
border-radius:999px; font-size:.9rem; letter-spacing:.02em;
box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.04);
transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.chip:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.25); background:rgba(255,255,255,.08)} .closing-line{
font-size:clamp(1.3rem,3vw,2rem);
font-weight:700; line-height:1.2;
}
.closing-line span{display:block}
.closing-line span:nth-child(2){
color:var(--vis-accent);
text-shadow:0 0 20px rgba(88,166,255,.45), 0 0 30px rgba(139,92,246,.25);
} .vision-container > *{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.vision-section.is-visible .vision-logo{opacity:1; transform:none; transition-delay:.05s}
.vision-section.is-visible .vision-title{opacity:1; transform:none; transition-delay:.15s}
.vision-section.is-visible .vision-subcopy{opacity:1; transform:none; transition-delay:.25s}
.vision-section.is-visible .vision-chips{opacity:1; transform:none; transition-delay:.35s}
.vision-section.is-visible .closing-line{opacity:1; transform:none; transition-delay:.45s} @keyframes visionWave{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
} @media (prefers-reduced-motion:reduce){
.vision-section{animation:none}
.vision-container > *{transition:none; opacity:1 !important; transform:none !important}
} @media (max-height:780px){
.vision-section{padding:clamp(2rem,6vw,4rem) 1.2rem}
.vision-logo{margin-bottom:1.2rem}
} @media (max-width:992px){
.vision-section{min-height:auto; padding:clamp(2.2rem,6vw,3.5rem) 1.25rem}
.vision-title{font-size:clamp(1.8rem,5.4vw,3rem); margin-bottom:1rem}
.vision-subcopy{max-width:640px; margin-bottom:1.25rem}
.chip{padding:.45rem .8rem; font-size:.88rem}
.closing-line{font-size:clamp(1.25rem,3.2vw,1.7rem)} .closing-line span{white-space:nowrap}
} @media (max-width:640px){
.vision-logo img{width:clamp(90px,28vw,150px)}
.vision-title{font-size:clamp(1.6rem,7vw,2.2rem)}
.vision-subcopy{font-size:clamp(.95rem,3.8vw,1.02rem); line-height:1.65}
.vision-chips{gap:.5rem .6rem; margin-bottom:1.5rem}
.chip{padding:.42rem .76rem; font-size:.86rem}
.closing-line{font-size:clamp(1.15rem,5.2vw,1.45rem)} .closing-line span{white-space:nowrap}
}.locations-section {
--loc-header-top: 0px;
padding: clamp(2.4rem, 6vw, 4.8rem) 0;
background: #F8F9FA;
color: #212529
}
.locations-container {
max-width: 1080px;
margin: 0 auto;
padding: 0 .9rem
} .locations-header {
text-align: center;
margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
position: sticky;
top: var(--loc-header-top);
z-index: 20;
background: #F8F9FA;
padding-top: .9rem;
padding-bottom: .7rem;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.locations-header h2 {
font-size: clamp(1.7rem, 3.2vw, 2.2rem);
font-weight: 600;
margin: 0 0 .45rem
}
.locations-header p {
font-size: clamp(.92rem, 1.4vw, 1.02rem);
color: #6C757D;
max-width: 520px;
margin: 0 auto
} body.admin-bar .locations-section {
--loc-header-top: 32px;
}
@media (max-width:782px) {
body.admin-bar .locations-section {
--loc-header-top: 46px;
}
} .locations-scroll-wrapper {
height: 200vh;
position: relative
} .locations-sticky-container {
position: sticky;
top: 50vh;
height: 60vh;
transform: translateY(-50%);
width: 100%;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 16px 32px -12px rgba(0, 0, 0, .14);
transition: transform .3s ease, box-shadow .3s ease;
background: #0a0f16;
will-change: transform; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.locations-sticky-container:hover {
transform: translateY(-50%) scale(1.01);
box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .18)
} .location-image-container {
position: absolute;
inset: 0;
z-index: 1
}
@keyframes kenBurns {
0% { transform: scale(1.06) translate(0, 0) }
100% { transform: scale(1.12) translate(-.8%, .8%) }
}
.location-image {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.12);
transition: opacity .8s ease-in-out
}
.location-image.active {
opacity: 1;
animation: kenBurns 14s ease-in-out infinite alternate
} .location-text-container {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 3.2%;
background: linear-gradient(to right, rgba(10, 15, 22, 0) 25%, rgba(10, 15, 22, .82) 65%)
}
.text-panel {
position: absolute;
width: 32%;
color: #F8F9FA;
opacity: 0;
transform: translateY(28px);
transition: opacity .55s cubic-bezier(.19, 1, .22, 1), transform .55s cubic-bezier(.19, 1, .22, 1)
}
.text-panel.active {
opacity: 1;
transform: translateY(0)
}
.text-panel h3 {
font-size: clamp(1.35rem, 2.8vw, 1.8rem);
font-weight: 600;
margin: 0 0 .45rem
}
.text-panel p {
font-size: .92rem;
line-height: 1.55;
color: rgba(248, 249, 250, .86);
margin: 0
} .location-arrow {
display: none;
position: absolute;
top: auto;
bottom: 1.25rem;
transform: none; 
z-index: 10;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: #212529;
border: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
cursor: pointer;
align-items: center;
justify-content: center;
padding: 0;
transition: background .2s ease, transform .2s ease;
}
.location-arrow:hover:not(:disabled) {
background: #fff;
transform: scale(1.08); 
}
.location-arrow:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.location-arrow svg {
width: 1.25rem;
height: 1.25rem;
}
#loc-arrow-prev { left: 1.25rem; }
#loc-arrow-next { right: 1.25rem; } @media (max-width: 992px) { .locations-scroll-wrapper { height: auto }
.locations-sticky-container {
position: relative;
top: auto;
transform: none;
height: auto;
aspect-ratio: 16 / 9; 
min-height: 350px; 
max-height: 480px; 
}
.locations-sticky-container:hover {
transform: none;
box-shadow: 0 16px 32px -12px rgba(0, 0, 0, .14);
} .location-arrow { display: flex; } .location-text-container {
background: linear-gradient(to top, rgba(10, 15, 22, 0.9) 0%, rgba(10, 15, 22, 0.7) 50%, transparent 100%);
align-items: center;
justify-content: center;
text-align: center;
padding: 3rem 1.5rem 1.5rem;
} .text-panel {
position: relative;
width: 100%;
max-width: 500px;
opacity: 1;
transform: none;
display: none;
transition: none;
}
.text-panel.active { display: block; } .text-panel h3 {
font-size: clamp(1.5rem, 5vw, 1.8rem);
margin-bottom: 0.75rem;
}
.text-panel p {
font-size: clamp(0.95rem, 2.5vw, 1rem);
line-height: 1.6;
color: rgba(248, 249, 250, 0.95);
}
}
@media (max-width: 576px) {
.locations-sticky-container {
aspect-ratio: 4 / 3;
min-height: 320px; 
max-height: 60vh;
}
.location-text-container { padding: 2rem 1rem 1rem; }
.location-arrow {
width: 2.5rem;
height: 2.5rem;
bottom: .75rem; 
}
#loc-arrow-prev { left: .75rem; }
#loc-arrow-next { right: .75rem; }
}