* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: #ffffff;
color: #0b0b0d;
font-family: 'Manrope', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
a {
color: #0b0b0d;
text-decoration: none;
}
a:hover {
color: #0062e6;
}
::selection {
background: #0062e6;
color: #fff;
}
@keyframes floaty {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes cubefloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@keyframes spin3d {
0% { transform: rotateX(12deg) rotateY(-22deg); }
100% { transform: rotateX(12deg) rotateY(338deg); }
}
@keyframes flowdash {
to { stroke-dashoffset: -2400; }
}
@keyframes wavedrift {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
@keyframes wavedrift2 {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(7px); }
}
@keyframes shimmer {
to { stroke-dashoffset: -1600; }
}
@keyframes twinkle {
0%, 100% { opacity: .15; transform: scale(.7); }
50% { opacity: .9; transform: scale(1); }
}
/* hover states (React version did these via JS state; plain CSS is simpler) */
.lets-talk-lg:hover, .btn-dark:hover { background: #0062e6 !important; color: #fff !important; transform: translateY(-1px); }
.btn-outline:hover { border-color: #0b0b0d !important; transform: translateY(-2px); }
.icon-btn:hover { background: #0062e6 !important; color: #fff !important; border-color: #0062e6 !important; }
.card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(15,25,55,.09); border-color: #dfe3ee !important; }
.work-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(15,25,55,.1); }
.cta-btn:hover { background: #0b0b0d !important; transform: translateY(-2px); }
.social-link:hover { background: #0b0b0d !important; color: #fff !important; border-color: #0b0b0d !important; }
.nl-submit:hover { background: #0062e6 !important; color: #fff !important; }
.close-btn:hover { background: #0b0b0d !important; color: #fff !important; }
/* reveal-on-scroll (site.js toggles .is-visible) */
[data-reveal] {
opacity: 0;
transform: translateY(22px);
transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-visible {
opacity: 1;
transform: none;
}
/* mobile menu (site.js toggles .is-open on ) */
.mobile-panel { display: none; }
body.menu-open .mobile-panel { display: flex; }
/* nav-link active state (site.js toggles .is-active via scroll-spy) */
[data-nav] { color: #3a3b40; transition: color .2s; }
[data-nav].is-active { color: #0062e6; }
/* modal open/close (site.js toggles .is-open) */
.modal-overlay { display: none; }
.modal-overlay.is-open { display: flex; }
@media(max-width:920px){
[data-r=nav]{display:none!important}
.hdr-menu{display:inline-flex!important}
#home{grid-template-columns:1fr!important;padding:36px 22px 58px!important;gap:24px!important;min-height:0!important}
#home h1{font-size:46px!important}
.hero-art{height:290px!important}
[data-r=svc-head]{grid-template-columns:1fr!important;gap:14px!important}
[data-r=svc-head] p{justify-self:start!important;max-width:100%!important}
[data-r=svc-grid]{grid-template-columns:1fr 1fr!important}
[data-r=work-head]{flex-direction:column!important;align-items:flex-start!important;gap:14px!important}
[data-r=work-grid]{grid-template-columns:1fr!important}
[data-r=foot-grid]{grid-template-columns:1fr 1fr!important;gap:30px!important}
[data-r=wrap]{padding-left:22px!important;padding-right:22px!important}
}
@media(max-width:560px){
#home h1{font-size:38px!important}
[data-r=svc-grid]{grid-template-columns:1fr!important}
[data-r=foot-grid]{grid-template-columns:1fr!important;gap:26px!important}
.cta-box{flex-direction:column!important;align-items:flex-start!important;gap:22px!important;padding:34px 24px!important}
.lets-talk-lg{display:none!important}
.foot-brand{align-items:center!important;text-align:center!important}
.foot-brand img{margin-left:auto!important;margin-right:auto!important}
}