:root {
    --leios-primary: #B87537; /* brand ochre */
    --leios-primary-600: #9E622E; /* darker */
    --leios-ink: #1f2937; /* dark text */
    --leios-muted: #4b5563; /* muted text */
    --leios-cream: #f7f3ec; /* light background */
    --leios-white: #ffffff;
    --radius-xl: 1.25rem;
    --shadow-1: 0 10px 25px rgba(0, 0, 0, .08);
    --shadow-2: 0 20px 40px rgba(0, 0, 0, .12);
    --max-w: 1200px;
    --speed: 350ms;
}

.navbar {
    width: 100%;
}

* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    line-height: 1.6;
    color: var(--leios-ink);
    background: linear-gradient(180deg, var(--leios-cream), #fff)
}

a {
    color: inherit;
    text-decoration: none
}

img {
    max-width: 100%;
    border-radius: 5px;
    display: block
}

/* Scroll progress */
.progress {
    position: fixed;
    left: 0;
    top: 0;
    height: 3px;
    background: var(--leios-primary);
    width: 0;
    z-index: 60
}

/* Nav */
.nav {
    position: sticky;
    display: flex;
    top: 0;
    z-index: 50;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .75));
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    border-radius: 10px;
    padding: 5px 10px;
}

.nav .row {
    max-width: var(--max-w);
    margin: 0 100px 0 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px
}

.nav {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 1.5rem;
    font-weight: 800;
    letter-spacing: .08em;
}
.brand{
    display: flex;
    justify-content: start;
    margin-right: 10%;
 
    
    
}
.brand span{
    padding:15px ;
   
    font-size: 1.5rem;
}

.brand img {
    width: 100px;
    height: 60px;
    flex-direction: column;
    object-fit: contain;
    border-radius: 10%;
}

.links {
  
   padding: 7px 0;
    font-weight: 600
}

.links a {
    padding: .5rem .75rem;
    border-radius: .5rem
}
h3{
    padding-top:5px;
}

.links a:hover {
    background: #f7f3ec;
    cursor: pointer;
    
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.1rem;
    border-radius: .75rem;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--speed) cubic-bezier(.2, .8, .2, 1), box-shadow var(--speed), background var(--speed)
}

.btn.primary {
    background: var(--leios-primary);
    color: var(--leios-white);
    box-shadow: var(--shadow-1)
}

.btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    background: var(--leios-primary-600)
}

.btn.ghost {
    border-color: rgba(0, 0, 0, .1)
}

/* Hero */
.hero {
    position: relative;
    overflow: hidden
}

.hero-wrap {
    max-width: var(--max-w);
    margin: auto;
    padding: 72px 20px 48px;
    display: grid;
    grid-template-columns:1.2fr 1fr;
    gap: 40px;
    align-items: center
}

.hero h1 {
    font-size: clamp(2rem, 2.5vw + 1rem, 3.3rem);
    line-height: 1.15;
    margin: 0 0 12px
}

.hero p {
    color: var(--leios-muted);
    font-size: 1.125rem;
    margin: 0 0 24px
}

.hero-card {
    background: var(--leios-white);
    border-radius: var(--radius-xl);
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: var(--shadow-1)
}

/* Ribbon */
.ribbon {
    background: var(--leios-primary);
    color: #fff;
    border-radius: 10px;
}

.ribbon .inner {
    max-width: var(--max-w);
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .75rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .02em
}

/* Sections */
section {
    padding: 30px 20px 50px 20px
}

.container {
    max-width: var(--max-w);
    margin: auto
}

.section-title {
    font-size: clamp(1.5rem, 1.2vw + 1rem, 2.2rem);
    margin: 0 0 10px
}

.section-sub {
    margin: 0 0 28px;
    color: var(--leios-muted)
}

/* Services */
.grid {
    display: grid;
    gap: 20px
}

.services {
    grid-template-columns:repeat(5, minmax(180px, 1fr))
}

.card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: var(--radius-xl);
    padding: 20px;
    box-shadow: var(--shadow-1);
    transition: transform var(--speed), box-shadow var(--speed)
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-2)
}

.svc-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--leios-primary), var(--leios-primary-600));
    display: grid;
    place-items: center;
    margin-bottom: 14px
}

.svc-icon svg {
    width: 24px;
    height: 24px;
    fill: #fff
}

.card h3 {
    margin: 0 0 8px;
    font-size: 1.05rem
}

.card p {
    margin: 0;
    color: var(--leios-muted)
}

/* Featured */
.feature-grid {
    grid-template-columns:repeat(3, minmax(240px, 1fr))
}

.feature .thumb {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .06);
    aspect-ratio: 16/10;
    background: linear-gradient(120deg, #f2e8dd, #fff);
    display: grid;
    place-items: center;
    position: relative;
}

.feature .thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.feature.card {
    display: flex;
    flex-direction: column;
}

.feature h4 {
    margin: 12px 0 6px
}

.feature small {
    color: var(--leios-muted)
}

/* Values */
.values {
    grid-template-columns:repeat(4, minmax(220px, 1fr))
}

/* CTA */
.cta {
    background: linear-gradient(180deg, var(--leios-primary), var(--leios-primary-600));
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 36px;
    display: grid;
    grid-template-columns:1.3fr .7fr;
    gap: 24px;
    align-items: center
}

.cta .btn {
    background: #fff;
    color: var(--leios-primary);
}

/* Larger form card with proper left spacing */
.cta .card {
    max-width: 460px;        /* wider card */
    width: 100%;
    padding: 28px;           /* more inner space */
    margin-left: 10px;       /* keep away from brown edge */
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: var(--shadow-1);
    background: var(--leios-white);
}

/* Footer */
footer {
 
    /*padding: 36px 20px 56px;*/
    color: var(--leios-muted)
}

/* Utilities */
.row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.muted {
    color: var(--leios-muted)
}

.techs {
    display: flex;
    gap: 14px;
    flex-wrap: wrap
}

.tech {
    padding: 0.5rem 0.5rem;
    border-radius: 10px;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
  
}

/* NEW: clickable contact links inside .tech pills */
.tech .contact-link {
    
    align-items: center;
    gap: 8px;
    color: inherit;
    flex-wrap: wrap;
    padding: 16px;
}

.tech .contact-link svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* Inputs */
input, textarea {
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, .1);
    font-size: 0.9rem;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
}

/* Responsive */
@media (max-width: 1024px) {
    .services {
        grid-template-columns:repeat(3, 1fr)
    }

    .feature-grid {
        grid-template-columns:repeat(2, 1fr)
    }

    .values {
        grid-template-columns:repeat(2, 1fr)
    }

    .cta {
        grid-template-columns:1fr
    }

    .hero-wrap {
        grid-template-columns:1fr
    }
}

@media (max-width: 640px) {
    .services {
        grid-template-columns:1fr 1fr
    }

    .feature-grid {
        grid-template-columns:1fr
    }
}

/* Reveal animations */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--speed) ease, transform var(--speed) ease
}

.reveal.on {
    opacity: 1;
    transform: none
}