/*Trinary Projects Landing Page*/
*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    scroll-behavior:smooth;
}
body{
    font-family:"Inter",sans-serif;
    background:#fbfcfe;
    color:#111827;
    line-height:1.7;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
/*VARIABLES*/
:root{
    --primary:#0F172A;
    --secondary:#2563EB;
    --accent:#3B82F6;
    --text:#1F2937;
    --muted:#64748B;
    --border:#E5E7EB;
    --background:#FBFCFE;
    --white:#ffffff;
    --radius:22px;
    --radius-small:14px;
    --shadow-sm:
        0 6px 18px rgba(15,23,42,.05);
    --shadow-md:
        0 18px 40px rgba(15,23,42,.08);
    --shadow-lg:
        0 28px 70px rgba(15,23,42,.10);
    --transition:
        .35s cubic-bezier(.2,.8,.2,1);
}
/*TYPOGRAPHY*/
h1,h2,h3,h4{
    color:var(--primary);
    font-weight:700;
    line-height:1.1;
}
h1{
    font-size:clamp(3.6rem,7vw,5.8rem);
    letter-spacing:-2px;
    max-width:720px;
}
h2{
    font-size:clamp(2.4rem,5vw,3.8rem);
    letter-spacing:-1px;
}
h3{
    font-size:1.4rem;
}
p{
    color:var(--muted);
    font-size:1.08rem;
}
a{
    text-decoration:none;
    color:inherit;
}
img{
    display:block;
    max-width:100%;
}
/*LAYOUT*/
.container{
    width:min(1220px,92%);
    margin:auto;
}
.section{
overflow:hidden;
}
.section::before{
content:"";
position:absolute;
width:240px;
height:240px;
border-radius:50%;
background:
radial-gradient(circle,
rgba(37,99,235,.045),
transparent 70%);
right:-120px;
top:-60px;
pointer-events:none;
}
.section-light{
    background:#F7F9FC;
}
.section-heading{
max-width:760px;
margin-bottom:80px;
}
.section-heading h2{
max-width:620px;
}
.section-heading p{
max-width:600px;
font-size:1.15rem;
}
.section-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--secondary);
    margin-bottom:18px;
}
.section-tag::before{
    content:"";
    width:36px;
    height:2px;
    background:var(--secondary);
}
/*NAVIGATION*/
.site-header{
    position:sticky;
    top:0;
    z-index:999;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(229,231,235,.65);
}
.navbar{
    height:84px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.logo{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:1.45rem;
    font-weight:800;
}
.logo-dark{
    color:var(--primary);
}
.logo-blue{
    color:var(--secondary);
}
.nav-menu{
    display:flex;
    gap:42px;
    list-style:none;
}
.nav-menu a{
    font-size:.95rem;
    color:#475569;
    position:relative;
    transition:var(--transition);
}
.nav-menu a:hover{
    color:var(--primary);
}
.nav-menu a::after{
    content:"";
    position:absolute;
    bottom:-8px;
    left:0;
    width:0;
    height:2px;
    background:var(--secondary);
    transition:.3s;
}
.nav-menu a:hover::after{
    width:100%;
}
/*BUTTONS*/
.button-primary,
.nav-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 32px;
    background:var(--primary);
    color:white;
    border-radius:14px;
    font-weight:600;
    transition:var(--transition);
}
.button-primary:hover,
.nav-button:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-md);
}
.button-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 30px;
    border:1px solid var(--border);
    background:white;
    color:var(--primary);
    border-radius:14px;
    transition:var(--transition);
}
.button-secondary:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-sm);
}
.menu-toggle{
display:none;
width:46px;
height:46px;
border:none;
background:white;
border-radius:12px;
cursor:pointer;
align-items:center;
justify-content:center;
flex-direction:column;
gap:5px;
}
.menu-toggle span{
display:block;
width:22px;
height:2px;
background:var(--primary);
transition:.3s;
}
.mobile-menu{
position:fixed;
left:0;
right:0;
top:84px;
background:white;
padding:30px;
display:flex;
flex-direction:column;
gap:24px;
transform:translateY(-120%);
transition:.35s;
box-shadow:var(--shadow-lg);
z-index:998;
}
.mobile-menu.active{
transform:translateY(0);
}
.mobile-menu a{
font-weight:600;
font-size:1.05rem;
color:var(--primary);
}
@media(max-width:768px){
.menu-toggle{
display:flex;
}
}
/*HERO*/
.hero-section{
    position:relative;
    overflow:hidden;
    padding:140px 0;
}
.hero-background{
position:absolute;
inset:0;
z-index:-2;
background:
linear-gradient(
180deg,
#ffffff 0%,
#f8fbff 100%
);
overflow:hidden;
}
.hero-background::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px);
background-size:48px 48px;
mask-image:linear-gradient(
180deg,
white,
transparent
);
opacity:.45;
}
.hero-background::after{
content:"";
position:absolute;
width:900px;
height:900px;
right:-320px;
top:-300px;
border-radius:50%;
background:
radial-gradient(circle,
rgba(37,99,235,.12),
transparent 70%);
filter:blur(30px);
}
.hero-section::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    right:-250px;
    top:-180px;
    border-radius:50%;
    background:rgba(37,99,235,.05);
    filter:blur(20px);
    z-index:-1;
}
.hero-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:90px;
    align-items:center;
}
.eyebrow{
    display:inline-block;
    font-size:.8rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--secondary);
    font-weight:700;
    margin-bottom:24px;
}
.hero-content p{
    max-width:650px;
    margin:32px 0;
    font-size:1.18rem;
}
.hero-actions{
    display:flex;
    gap:18px;
    margin-bottom:46px;
}
.hero-features{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}
.feature-pill{
    background:white;
    border:1px solid var(--border);
    border-radius:999px;
    padding:12px 18px;
    font-size:.9rem;
    color:#334155;
    box-shadow:var(--shadow-sm);
}
.hero-visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}
.large-card{
padding:50px;
display:flex;
flex-direction:column;
gap:28px;
}
.architecture{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}
.architecture div{
padding:18px;
background:#F8FAFC;
border-radius:16px;
border:1px solid #EEF2F7;
font-weight:600;
transition:.35s;
}
.architecture div:hover{
transform:translateY(-4px);
background:white;
}
.card-label{
    display:inline-block;
    color:var(--secondary);
    font-size:.82rem;
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:.14em;
    margin-bottom:18px;
}
.large-card h3{
    font-size:2rem;
    margin-bottom:36px;
    max-width:340px;
}
.mini-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}
.mini-grid div{
    background:#F8FAFC;
    border-radius:14px;
    padding:18px;
    text-align:center;
    font-weight:600;
}
.floating-card{
    position:absolute;
    background:white;
    border:1px solid var(--border);
    border-radius:16px;
    padding:16px 22px;
    box-shadow:var(--shadow-md);
    animation:float 7s ease-in-out infinite;
}
.floating-card:nth-child(2){
    left:-30px;
    top:18%;
}
.floating-card:nth-child(3){
    right:-10px;
    top:58%;
}
.floating-card:nth-child(4){
    bottom:-25px;
    left:20%;
}
@keyframes float{
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-10px);
    }
    100%{
        transform:translateY(0px);
    }
}
/*ABOUT*/
.about-layout{
    display:grid;
    grid-template-columns:1.4fr .8fr;
    gap:90px;
    align-items:start;
}
.about-content{
    max-width:720px;
}
.about-content p{
    margin-bottom:28px;
    font-size:1.08rem;
}
.mission-panel{
    display:flex;
    flex-direction:column;
    gap:28px;
}
.mission-card{
    background:#fff;
    padding:38px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}
.mission-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-md);
}
.mission-card h3{
    margin-bottom:18px;
}
/*VALUES*/
.values-grid{
    margin-top:90px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:24px;
}
.value-card{
    background:white;
    padding:34px;
    border-radius:20px;
    border:1px solid var(--border);
    transition:var(--transition);
    position:relative;
    overflow:hidden;
}
.value-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:4px;
    height:100%;
    background:var(--secondary);
    transform:scaleY(0);
    transition:.35s;
}
.value-card:hover::before{
    transform:scaleY(1);
}
.value-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-md);
}
.value-card h3{
    margin-bottom:16px;
}
/*SERVICES*/
.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:34px;
}
.service-card{
    background:white;
    border-radius:28px;
    padding:48px;
    border:1px solid var(--border);
    transition:var(--transition);
    position:relative;
    overflow:hidden;
}
.service-card::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:4px;
    background:linear-gradient(
        90deg,
        var(--secondary),
        #60A5FA
    );
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s;
}
.service-card:hover{
transform:
translateY(-12px);
box-shadow:
0 30px 70px rgba(15,23,42,.10);
}
.service-card:hover::after{
    transform:scaleX(1);
}
.service-number{
    width:52px;
    height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#EFF6FF;
    color:var(--secondary);
    font-weight:700;
    margin-bottom:28px;
}
.service-card h3{
    margin-bottom:20px;
}
.service-card p{
    margin-bottom:28px;
}
.service-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:18px;
}
.service-list li{
    position:relative;
    padding-left:30px;
    color:#475569;
}
.service-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:11px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--secondary);
}
/*CUSTOM SOLUTIONS*/
.split-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:110px;
    align-items:start;
}
.split-left h2{
    margin:20px 0 28px;
}
.split-left p{
    margin-bottom:24px;
}
.timeline{
    display:flex;
    flex-direction:column;
    gap:40px;
    position:relative;
    padding-left:36px;
}
.timeline::before{
    content:"";
    position:absolute;
    left:8px;
    top:8px;
    bottom:8px;
    width:2px;
    background:#D6E4FF;
}
.timeline-item{
    display:flex;
    gap:24px;
    position:relative;
}
.timeline-dot{
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--secondary);
    flex-shrink:0;
    margin-left:-36px;
    margin-top:8px;
    border:4px solid white;
    box-shadow:0 0 0 2px #D6E4FF;
}
.timeline-item h3{
    margin-bottom:10px;
}
/*ENGAGEMENT MODELS*/
.engagement-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}
.engagement-card{
    background:white;
    padding:44px;
    border-radius:24px;
    border:1px solid var(--border);
    transition:var(--transition);
}
.engagement-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-md);
}
.engagement-card h3{
    margin-bottom:18px;
}
.engagement-card p{
    max-width:420px;
}
/*SUBTLE SECTION DIVIDERS*/
.section::after{
    content:"";
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:min(92%,1200px);
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(148,163,184,.35),
        transparent
    );
}
.site-footer::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.15),
transparent
);
}
/*WHY CHOOSE US*/
.bento-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:28px;
}
.bento-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:28px;
    padding:42px;
    transition:var(--transition);
    box-shadow:var(--shadow-sm);
    position:relative;
    overflow:hidden;
    min-height:260px;
}
.bento-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(37,99,235,.03),
        transparent 60%
    );
    opacity:0;
    transition:.35s;
}
.bento-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
}
.bento-card:hover::before{
    opacity:1;
}
.bento-card.large{
    grid-column:span 6;
    min-height:360px;
}
.bento-card:not(.large){
    grid-column:span 3;
}
.bento-card.accent{
    background:linear-gradient(
        135deg,
        #0F172A,
        #1E293B
    );
    color:white;
}
.bento-card.accent h3,
.bento-card.accent p,
.bento-card.accent .card-number{
    color:white;
}
.card-number{
    display:inline-block;
    font-size:.82rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--secondary);
    font-weight:700;
    margin-bottom:22px;
}
.bento-card h3{
    margin-bottom:18px;
}
/*CONTACT*/
.contact-layout{
    display:grid;
    grid-template-columns:1fr .9fr;
    gap:100px;
    align-items:start;
}
.contact-highlight{
    margin-top:50px;
    padding:34px;
    border-left:4px solid var(--secondary);
    background:white;
    border-radius:0 18px 18px 0;
    box-shadow:var(--shadow-sm);
}
.contact-highlight h3{
    margin-bottom:16px;
}
.contact-form-wrapper{
    background:white;
    border-radius:30px;
    padding:50px;
    border:1px solid var(--border);
    box-shadow:var(--shadow-md);
}
.contact-form{
    display:flex;
    flex-direction:column;
    gap:24px;
}
.form-group{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.form-group label{
    font-size:.92rem;
    font-weight:600;
    color:var(--primary);
}
.form-group input,
.form-group textarea,
.form-group select{
    width:100%;
    padding:18px;
    border-radius:14px;
    border:1px solid var(--border);
    background:#fff;
    font:inherit;
    transition:var(--transition);
}
.form-group textarea{
    resize:vertical;
    min-height:180px;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
    outline:none;
    border-color:var(--secondary);
    box-shadow:0 0 0 4px rgba(37,99,235,.08);
}
.full-width{
    width:100%;
}
/*FOOTER*/
.site-footer{
    position:relative;
    background:#0F172A;
    color:white;
    padding:90px 0 40px;
}
.footer-top{
    display:flex;
    justify-content:space-between;
    gap:120px;
    padding-bottom:60px;
}
.footer-brand{
    max-width:360px;
}
.footer-brand p{
    margin-top:20px;
    color:#CBD5E1;
}
.footer-links{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:70px;
}
.footer-links h4{
    color:white;
    margin-bottom:22px;
}
.footer-links a{
    display:block;
    color:#CBD5E1;
    margin-bottom:14px;
    transition:var(--transition);
}
.footer-links a:hover{
    color:white;
    transform:translateX(4px);
}
.footer-bottom{
    padding-top:34px;
    border-top:1px solid rgba(255,255,255,.08);
}
.footer-bottom p{
    color:#94A3B8;
}
/*SCROLL REVEALS*/
.reveal{
    opacity:0;
    transform:translateY(50px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}
.reveal.active{
    opacity:1;
    transform:none;
}
/*NAVBAR SCROLL STATE*/
.site-header.scrolled{
    box-shadow:
        0 12px 40px rgba(15,23,42,.08);
    background:rgba(255,255,255,.97);
}
/*UTILITIES*/
.text-center{
    text-align:center;
}
.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.mt-3{margin-top:3rem;}
.mt-4{margin-top:4rem;}
.mb-1{margin-bottom:1rem;}
.mb-2{margin-bottom:2rem;}
.mb-3{margin-bottom:3rem;}
.mb-4{margin-bottom:4rem;}
/*RESPONSIVE*/
@media(max-width:1100px){
.hero-grid,
.about-layout,
.split-layout,
.contact-layout{
grid-template-columns:1fr;
gap:70px;
}
.values-grid{
grid-template-columns:repeat(2,1fr);
}
.services-grid{
grid-template-columns:1fr;
}
.engagement-grid{
grid-template-columns:1fr;
}
.footer-top{
flex-direction:column;
gap:60px;
}
.footer-links{
grid-template-columns:repeat(2,1fr);
}
.bento-card.large,
.bento-card{
grid-column:span 6;
}
}
@media(max-width:768px){
.section{
padding:90px 0;
}
.nav-menu{
display:none;
}
.nav-button{
display:none;
}
h1{
font-size:3rem;
}
h2{
font-size:2.3rem;
}
.hero-actions{
flex-direction:column;
}
.hero-features{
justify-content:flex-start;
}
.values-grid{
grid-template-columns:1fr;
}
.footer-links{
grid-template-columns:1fr;
gap:40px;
}
.bento-grid{
grid-template-columns:1fr;
}
.bento-card.large,
.bento-card{
grid-column:auto;
}
.contact-form-wrapper{
padding:34px;
}
.large-card{
padding:32px;
}
.floating-card{
display:none;
}
}
@media(max-width:500px){
.container{
width:94%;
}
.section{
padding:70px 0;
}
.button-primary,
.button-secondary{
width:100%;
}
.hero-actions{
gap:14px;
}
.service-card,
.engagement-card,
.mission-card,
.contact-form-wrapper,
.bento-card{
padding:30px;
}
}