/* ==========================================================
   VIOS INFOSYSTEMS - Marketing site shared styles
========================================================== */

:root{

    --green-deep:#052e22;
    --green-mid:#064e3b;
    --green-hover:#053f30;
    --gold:#c99a2e;
    --gold-light:#e9c976;
    --cream:#f4f1ea;
    --surface:#ffffff;
    --ink:#1c1917;
    --ink-soft:#57534e;
    --border:#e7e2d9;
    --text-dim:#9fb8ac;

}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
    background:var(--cream);
    color:var(--ink);
    font-family:'Inter', system-ui, sans-serif;
    line-height:1.6;
    overflow-x:hidden;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

h1, h2, h3, .display{
    font-family:'Fraunces', serif;
    font-weight:500;
    letter-spacing:-.01em;
    line-height:1.12;
}

h1{ font-size:clamp(36px, 5.4vw, 60px); }
h2{ font-size:clamp(28px, 3.6vw, 40px); }
h3{ font-size:20px; font-weight:600; }

em{ font-style:italic; color:var(--gold); }

.section{ padding:88px 0; }

@media (max-width:640px){ .section{ padding:48px 0; } }

.container{ max-width:1120px; margin:0 auto; padding:0 32px; }

@media (max-width:560px){ .container{ padding:0 20px; } }

.eyebrow{
    font-size:12px;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:600;
    margin-bottom:16px;
}

.lede{
    font-size:17px;
    color:var(--ink-soft);
    max-width:620px;
}

/* ----------------------------------------------------------
   Buttons
---------------------------------------------------------- */

.btn{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-weight:600;
    font-size:15px;
    padding:14px 26px;
    border-radius:8px;
    text-decoration:none;
    border:none;
    cursor:pointer;
    transition:background .18s ease, transform .18s ease, color .18s ease;
    font-family:inherit;
}

.btn svg{ width:15px; height:15px; }

.btn-gold{ background:var(--gold); color:var(--green-deep); }
.btn-gold:hover{ background:var(--gold-light); transform:translateY(-1px); }

.btn-outline{
    background:transparent;
    color:var(--cream);
    border:1.5px solid rgba(244,241,234,.35);
}
.btn-outline:hover{ border-color:var(--gold-light); color:var(--gold-light); }

.btn-outline-dark{
    background:transparent;
    color:var(--green-mid);
    border:1.5px solid var(--border);
}
.btn-outline-dark:hover{ border-color:var(--green-mid); }

/* ----------------------------------------------------------
   Header / Nav
---------------------------------------------------------- */

header.site{
    position:sticky;
    top:0;
    z-index:50;
    background:var(--green-deep);
    transition:padding .25s ease, box-shadow .25s ease;
}

header.site.scrolled{
    box-shadow:0 8px 24px rgba(0,0,0,.18);
}

header.site.scrolled .nav-inner{ padding:11px 32px; }

header.site.scrolled .brand img{ width:28px; height:28px; }

.nav-inner{
    max-width:1120px;
    margin:0 auto;
    padding:18px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    transition:padding .25s ease;
}

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img{ width:34px; height:34px; transition:width .25s ease, height .25s ease; }

.brand .word{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:17px;
    color:var(--cream);
    line-height:1.1;
}

.brand .word span{
    display:block;
    font-family:'Inter', sans-serif;
    font-weight:500;
    font-size:9px;
    letter-spacing:.2em;
    color:var(--gold-light);
    margin-top:1px;
}

nav.primary{ display:flex; align-items:center; gap:34px; }

nav.primary a{
    color:var(--text-dim);
    text-decoration:none;
    font-size:14.5px;
    font-weight:500;
    transition:color .15s ease;
}

nav.primary a:hover, nav.primary a.active{ color:var(--cream); }

.nav-cta{ display:flex; align-items:center; gap:28px; }

.nav-toggle{ display:none; }

@media (max-width:860px){

    nav.primary{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:var(--green-deep);
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        padding:8px 32px 20px;
        display:none;
    }

    nav.primary.open{ display:flex; }

    nav.primary a{ padding:12px 0; width:100%; border-top:1px solid rgba(244,241,234,.08); }

    .nav-cta .btn-gold{ padding:10px 16px; font-size:13.5px; }

    .nav-cta{ gap:14px; }

    .nav-inner{ padding:14px 20px; }

    .nav-toggle{
        display:inline-flex;
        background:none;
        border:none;
        color:var(--cream);
        font-size:24px;
        cursor:pointer;
    }

}

/* ----------------------------------------------------------
   Hero (dark)
---------------------------------------------------------- */

.hero{
    position:relative;
    background:var(--green-deep);
    color:var(--cream);
    padding:96px 0 110px;
    overflow:hidden;
}

@media (max-width:640px){ .hero{ padding:48px 0 56px; } }

.hero .watermark{
    position:absolute;
    top:8%;
    right:-4%;
    width:640px;
    max-width:70vw;
    opacity:1;
    pointer-events:none;
}

.hero .watermark path{
    stroke-dasharray:900;
    stroke-dashoffset:900;
    animation:draw-swoosh 1.6s cubic-bezier(.4,0,.2,1) .3s forwards;
}

@keyframes draw-swoosh{
    to{ stroke-dashoffset:0; }
}

.stat-badge{
    position:absolute;
    z-index:3;
    background:var(--surface);
    color:var(--ink);
    border-radius:14px;
    padding:18px 22px;
    box-shadow:0 20px 44px rgba(0,0,0,.28);
    opacity:0;
    animation:float-in .7s cubic-bezier(.2,.7,.2,1) 1.1s forwards, float 5s ease-in-out 1.9s infinite;
}

.stat-badge .stat-num{
    font-family:'Fraunces', serif;
    font-size:26px;
    color:var(--green-mid);
    font-weight:600;
}

.stat-badge .stat-label{
    font-size:12px;
    color:var(--ink-soft);
    margin-top:2px;
}

@keyframes float-in{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:translateY(0); }
}

@keyframes float{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
}

.hero-inner{ position:relative; z-index:2; max-width:680px; }

.hero p.lede{ color:var(--text-dim); margin-top:20px; }

.hero .cta-row{ margin-top:36px; display:flex; gap:16px; flex-wrap:wrap; }

/* ----------------------------------------------------------
   Pillars / cards
---------------------------------------------------------- */

.grid-4{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:28px;
    margin-top:52px;
}

@media (max-width:900px){ .grid-4{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .grid-4{ grid-template-columns:1fr; } }

.grid-3{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
    margin-top:52px;
}

@media (max-width:900px){ .grid-3{ grid-template-columns:1fr; } }

.grid-industries{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
    margin-top:40px;
}

@media (max-width:860px){ .grid-industries{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .grid-industries{ grid-template-columns:1fr; } }

.industry-icon{
    width:44px;
    height:44px;
    border-radius:10px;
    background:var(--bg, #eaf3ec);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:16px;
}

.industry-icon svg{
    width:22px;
    height:22px;
    color:var(--green-mid);
}

.country-scroll-wrap{
    overflow:hidden;
    margin-top:40px;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.country-scroll{
    display:flex;
    gap:16px;
    width:max-content;
    padding:8px 4px 20px;
    animation:marquee 45s linear infinite;
}

.country-scroll-wrap:hover .country-scroll{
    animation-play-state:paused;
}

@keyframes marquee{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}

.country-card{
    flex:0 0 130px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    padding:18px 14px;
    text-align:center;
    transition:transform .2s ease, background .2s ease;
}

.country-card:hover{
    transform:translateY(-4px);
    background:rgba(255,255,255,.1);
}

.country-card img{
    width:40px;
    height:auto;
    margin:0 auto 10px;
    border-radius:3px;
}

.country-card .country-name{
    color:var(--cream);
    font-size:14px;
    font-weight:600;
    margin-bottom:8px;
}

.country-card .country-count{
    display:inline-block;
    background:var(--gold);
    color:var(--green-deep);
    font-size:11.5px;
    font-weight:700;
    padding:4px 10px;
    border-radius:20px;
}

.pillar{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    padding:28px 24px;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.pillar:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(6,78,59,.12);
    border-color:transparent;
}

.pillar .num{
    font-family:'Fraunces', serif;
    font-size:26px;
    color:var(--gold);
    margin-bottom:14px;
}

.pillar h3{ margin-bottom:10px; }

.pillar p{ font-size:14.5px; color:var(--ink-soft); }

/* ----------------------------------------------------------
   Scroll reveal
---------------------------------------------------------- */

.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}

.reveal.visible{ opacity:1; transform:translateY(0); }

.reveal-1{ transition-delay:.05s; }
.reveal-2{ transition-delay:.15s; }
.reveal-3{ transition-delay:.25s; }
.reveal-4{ transition-delay:.35s; }

/* ----------------------------------------------------------
   Stats bar (counting-up numbers)
---------------------------------------------------------- */

.stats-bar{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
    text-align:center;
}

@media (max-width:760px){ .stats-bar{ grid-template-columns:1fr; } }

.stats-bar .stat{ padding:8px; }

.stats-bar .stat-value{
    font-family:'Fraunces', serif;
    font-size:clamp(32px, 4.4vw, 46px);
    color:var(--gold-light);
    font-weight:600;
}

.stats-bar .stat-caption{
    font-size:13.5px;
    color:var(--text-dim);
    margin-top:6px;
}

/* ----------------------------------------------------------
   FAQ accordion
---------------------------------------------------------- */

.faq-item{
    border-bottom:1px solid var(--border);
}

.faq-item:first-child{ border-top:1px solid var(--border); }

.faq-question{
    width:100%;
    text-align:left;
    background:none;
    border:none;
    padding:20px 0;
    font-family:inherit;
    font-size:16px;
    font-weight:600;
    color:var(--ink);
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
}

.faq-question svg{
    width:18px;
    height:18px;
    color:var(--green-mid);
    transition:transform .25s ease;
    flex-shrink:0;
}

.faq-item.open .faq-question svg{ transform:rotate(45deg); }

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
}

.faq-answer p{
    padding:0 0 20px;
    color:var(--ink-soft);
    font-size:15px;
    max-width:640px;
}

/* ----------------------------------------------------------
   Industries strip
---------------------------------------------------------- */

.industries-strip{
    background:var(--green-mid);
    padding:26px 0;
}

.industries-strip .container{
    display:flex;
    flex-wrap:wrap;
    gap:14px 30px;
    justify-content:center;
}

.industries-strip span{
    color:var(--cream);
    font-size:14px;
    font-weight:500;
    opacity:.85;
}

/* ----------------------------------------------------------
   Services teaser / grid
---------------------------------------------------------- */

.grid-2{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:28px;
    margin-top:52px;
}

@media (max-width:760px){ .grid-2{ grid-template-columns:1fr; } }

.service-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    padding:32px;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.service-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(6,78,59,.12);
    border-color:transparent;
}

.service-card .tag{
    display:inline-block;
    font-size:11.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:700;
    margin-bottom:14px;
}

.service-card h3{ margin-bottom:12px; font-size:22px; }

.service-card p{ color:var(--ink-soft); font-size:15px; }

.service-list{
    list-style:none;
    margin-top:16px;
}

.service-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:14.5px;
    color:var(--ink-soft);
    margin-bottom:8px;
}

.service-list li svg{
    width:16px;
    height:16px;
    color:var(--gold);
    flex-shrink:0;
    margin-top:3px;
}

/* ----------------------------------------------------------
   Section variants
---------------------------------------------------------- */

.section-dark{ background:var(--green-deep); color:var(--cream); }
.section-dark .lede{ color:var(--text-dim); }
.section-dark h2{ color:var(--cream); }

.section-mid{ background:var(--green-mid); color:var(--cream); }

.pullquote{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:clamp(22px, 3vw, 30px);
    line-height:1.4;
    color:var(--green-deep);
    border-left:3px solid var(--gold);
    padding-left:28px;
    margin:36px 0;
}

/* ----------------------------------------------------------
   Contact / form
---------------------------------------------------------- */

.contact-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:56px;
    margin-top:16px;
}

@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }

.form-field{ margin-bottom:20px; }

.form-field label{
    display:block;
    font-size:13px;
    font-weight:600;
    margin-bottom:8px;
    color:var(--ink);
}

.form-field input, .form-field textarea{
    width:100%;
    padding:13px 15px;
    border:1px solid var(--border);
    border-radius:8px;
    font-family:inherit;
    font-size:15px;
    background:var(--surface);
    color:var(--ink);
}

.form-field textarea{ min-height:130px; resize:vertical; }

.form-field input:focus, .form-field textarea:focus{
    outline:none;
    border-color:var(--green-mid);
    box-shadow:0 0 0 3px rgba(6,78,59,.12);
}

.contact-info-card{
    background:var(--green-deep);
    color:var(--cream);
    border-radius:14px;
    padding:36px;
}

.contact-info-card .row{
    display:flex;
    gap:14px;
    margin-bottom:24px;
}

.contact-info-card .row:last-child{ margin-bottom:0; }

.contact-info-card .row svg{ width:20px; height:20px; color:var(--gold-light); flex-shrink:0; margin-top:2px; }

.contact-info-card .row .label{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:4px; }

.contact-info-card .row .value{ font-size:15.5px; }

.form-status{
    margin-top:16px;
    font-size:14px;
    padding:12px 16px;
    border-radius:8px;
    display:none;
}

.form-status.success{ display:block; background:#eaf3de; color:#27500a; }
.form-status.error{ display:block; background:#fcebeb; color:#791f1f; }

/* ----------------------------------------------------------
   Footer
---------------------------------------------------------- */

footer.site{
    background:var(--green-deep);
    color:var(--text-dim);
    padding:56px 0 28px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:40px;
    padding-bottom:36px;
    border-bottom:1px solid rgba(244,241,234,.1);
}

@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }

.footer-grid h4{
    color:var(--cream);
    font-size:13px;
    letter-spacing:.1em;
    text-transform:uppercase;
    margin-bottom:16px;
    font-weight:600;
}

.footer-grid ul{ list-style:none; }
.footer-grid li{ margin-bottom:10px; }
.footer-grid a{ text-decoration:none; font-size:14.5px; }
.footer-grid a:hover{ color:var(--gold-light); }

.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    padding-top:24px;
    font-size:13px;
}

.footer-bottom a{ text-decoration:none; }
.footer-bottom a:hover{ color:var(--gold-light); }

/* ----------------------------------------------------------
   About page specifics
---------------------------------------------------------- */

.about-hero{ padding:72px 0 60px; }

@media (max-width:640px){ .about-hero{ padding:40px 0 32px; } }

.about-body{ max-width:720px; }

.about-body p{ margin-bottom:20px; color:var(--ink-soft); font-size:16.5px; }