/* =========================================================
   AVAT — Agro Veterinary Agency Tchad
   Shared stylesheet for all pages (index, about, products,
   partners, contact). Edit colors/fonts in :root below.
   ========================================================= */

:root{
  /* ---- Palette pulled directly from the AVAT logo ---- */
  --sand:#F4F5F1;        /* off-white ring of the logo */
  --sand-deep:#E8EAE3;
  --ink:#26282B;
  --night:#4E5054;        /* charcoal grey circle */
  --night-deep:#133;
  --clay:#EF7B29;         /* fox/canid orange — primary CTA */
  --clay-light:#F5964F;
  --millet:#1E7A3F;       /* deep leaf green — icons & light-bg accents */
  --millet-light:#2E9E4F;
  --ochre:#4CC26C;        /* bright leaf green — pops on dark sections */
  --navy:#1E2A5E;         /* arc-text navy — labels on light backgrounds */
  --paper:#FFFFFF;
  --line: rgba(38,40,43,0.13);
  --line-dark: rgba(255,255,255,0.14);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--sand);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:22px;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Zilla Slab', serif;
  font-weight:800;
  line-height:1.08;
  letter-spacing:-0.01em;
}
.mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
section{position:relative;}

/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(53,55,58,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-dark);
}
.navwrap{
  max-width:1180px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--sand);}
.brand .mark-logo{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  background:var(--paper);
}
.brand .name{font-family:'Zilla Slab',serif; font-weight:700; font-size:20px; letter-spacing:0.02em;}
.brand .name span{color:var(--clay-light);}
nav ul{display:flex; gap:30px; list-style:none;}
nav a{
  color:var(--sand); font-size:18px; font-weight:400;
  opacity:0.85; transition:opacity .2s, color .2s;
}
nav a:hover, nav a.active{opacity:1; color:var(--ochre);}
.navcta{
  background:var(--clay); color:var(--paper)!important; opacity:1!important;
  padding:9px 18px; border-radius:2px; font-size:18px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase;
}
.burger{display:none;}
@media(max-width:860px){
  nav ul{display:none;}
  .burger{display:block; color:var(--sand); font-size:26px; background:none; border:none;}
}

/* ---------- PAGE HEADER (inner pages) ---------- */
.pagehead{
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(76,194,108,0.14), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%);
  color:var(--sand);
  padding:150px 0 70px;
}
.pagehead .stamp{margin-bottom:22px;}
.pagehead h1{font-size:clamp(2rem,4vw,3rem); color:var(--paper);}
.pagehead p{margin-top:18px; max-width:560px; color:rgba(244,245,241,0.75); font-size:18px;}
.crumb{font-size:14px; color:rgba(244,245,241,0.5); margin-top:14px;}
.crumb a{color:var(--ochre);}

/* ---------- HERO (home only) ---------- */
.hero{
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(76,194,108,0.14), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%);
  color:var(--sand);
  padding:150px 0 90px;
  overflow:hidden;
}
.hero .wrap{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:60px; align-items:center;
}
.stamp{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(76,194,108,0.5);
  color:var(--ochre);
  padding:7px 14px 7px 10px; border-radius:999px;
  font-size:13px; margin-bottom:26px;
}
.stamp .dot{width:6px; height:6px; border-radius:50%; background:var(--ochre); box-shadow:0 0 0 3px rgba(76,194,108,0.18);}
.hero h1{
  font-size:clamp(2.4rem, 4.6vw, 3.6rem);
  color:var(--paper);
}
.hero h1 em{font-style:normal; color:var(--clay-light);}
.hero p.lede{margin-top:22px; max-width:520px; font-size:19px; color:rgba(244,245,241,0.78);}
.hero .ctas{display:flex; gap:14px; margin-top:34px;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; font-size:15px; font-weight:600;
  border-radius:2px; letter-spacing:0.02em; transition:transform .2s, background .2s;
  border:none; cursor:pointer; font-family:'IBM Plex Sans',sans-serif;
}
.btn-primary{background:var(--clay); color:var(--paper);}
.btn-primary:hover{background:var(--clay-light); transform:translateY(-1px);}
.btn-ghost{border:1px solid var(--line-dark); color:var(--sand); background:transparent;}
.btn-ghost:hover{border-color:var(--ochre); color:var(--ochre);}

.clockwrap{position:relative; display:flex; justify-content:center;}
.clockface{
  width:280px; height:280px; border-radius:50%;
  border:1px solid rgba(244,245,241,0.18);
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(76,194,108,0.06), transparent 70%);
}
.clockface::before{
  content:'';
  position:absolute; inset:22px;
  border-radius:50%;
  border:1px dashed rgba(244,245,241,0.15);
}
.sweep{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from -90deg, var(--ochre) 0deg, transparent 8deg 360deg);
  opacity:0.5;
  animation:spin 16s linear infinite;
  mask:radial-gradient(circle, transparent 60%, black 61%);
  -webkit-mask:radial-gradient(circle, transparent 60%, black 61%);
}
@keyframes spin{to{transform:rotate(360deg);}}
.clockcenter{position:relative; text-align:center; z-index:2;}
.clockcenter .big{font-family:'Zilla Slab',serif; font-weight:900; font-size:2.6rem; color:var(--ochre);}
.clockcenter .small{font-size:13px; color:rgba(244,245,241,0.6); margin-top:4px;}

.statrow{
  border-top:1px solid var(--line-dark);
  margin-top:70px; padding-top:26px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.statrow .stat b{
  display:block; font-family:'Zilla Slab',serif; font-size:1.7rem; color:var(--ochre); font-weight:700;
}
.statrow .stat span{font-size:15px; color:rgba(244,245,241,0.6);}

/* ---------- SECTION HEADERS ---------- */
.eyebrow{
  font-size:13px; color:var(--navy); font-weight:600; margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:26px; height:1.5px; background:var(--navy); display:inline-block;}
.eyebrow.on-dark{color:var(--ochre);}
.eyebrow.on-dark::before{background:var(--ochre);}
.sec-title{font-size:clamp(1.7rem,3vw,2.3rem); max-width:720px;}
.sec-sub{max-width:640px; color:rgba(38,40,43,0.68); margin-top:16px; font-size:17.5px;}
.light .sec-sub{color:rgba(244,245,241,0.65);}

/* ---------- IDENTITY (about) ---------- */
.identity{padding:96px 0; background:var(--sand);}
.identity .grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; margin-top:44px; align-items:start;}
.identity p{color:rgba(38,40,43,0.78); margin-bottom:16px; font-size:17.5px;}
.seal-logo{
  width:120px; height:120px; border-radius:50%; object-fit:cover;
  flex-shrink:0; border:1px solid var(--line);
}
.identity-card{
  background:var(--paper); border:1px solid var(--line); padding:30px;
  display:flex; gap:24px; align-items:flex-start;
}

/* ---------- MVV ---------- */
.mvv{padding:96px 0; background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.mvv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:48px;}
.mvv-card{padding:38px 32px; border-right:1px solid var(--line);}
.mvv-card:last-child{border-right:none;}
.mvv-card .icon{
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid var(--clay);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
  color:var(--clay);
}
.mvv-card h3{font-size:1.25rem; margin-bottom:14px;}
.mvv-card p, .mvv-card ul{color:rgba(38,40,43,0.72); font-size:16.5px;}
.mvv-card ul{list-style:none; margin-top:6px;}
.mvv-card li{padding:7px 0; border-top:1px solid var(--line); display:flex; gap:8px;}
.mvv-card li:first-child{border-top:none;}
.mvv-card li b{color:var(--millet); font-weight:600; flex-shrink:0;}

/* ---------- PROCESS ---------- */
.process{padding:100px 0 110px; background:var(--night); color:var(--sand);}
.proc-track{
  margin-top:64px; position:relative;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.proc-track::before{
  content:''; position:absolute; top:23px; left:6%; right:6%; height:1px;
  background:repeating-linear-gradient(to right, rgba(76,194,108,0.5) 0 8px, transparent 8px 16px);
}
.proc-step{position:relative;}
.proc-num{
  width:46px; height:46px; border-radius:50%; background:var(--night);
  border:1.5px solid var(--ochre); color:var(--ochre);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:16px;
  position:relative; z-index:2; margin-bottom:22px;
}
.proc-step h4{font-size:1.05rem; color:var(--paper); margin-bottom:10px;}
.proc-step p{font-size:15.8px; color:rgba(244,245,241,0.6);}

/* ---------- PRODUCTS ---------- */
.products{padding:100px 0; background:var(--sand);}
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:48px;}
.prod-card{
  background:var(--paper); border:1px solid var(--line); padding:28px 24px;
  transition:transform .25s, box-shadow .25s;
}
.prod-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(38,40,43,0.08);}
.prod-card .tag{font-size:12.5px; color:var(--clay); margin-bottom:16px; display:block;}
.prod-card svg{width:38px; height:38px; margin-bottom:18px; color:var(--millet);}
.prod-card h4{font-size:1.05rem; margin-bottom:10px;}
.prod-card p{font-size:15.5px; color:rgba(38,40,43,0.65);}
.prod-card ul{margin-top:10px; padding-left:16px; font-size:15px; color:rgba(38,40,43,0.65);}

/* ---------- PARTNERS ---------- */
.partners{padding:100px 0; background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.region-grid{margin-top:48px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);}
.region{background:var(--paper); padding:26px 24px;}
.region .rname{
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--clay);
  letter-spacing:0.08em; text-transform:uppercase; margin-bottom:14px; display:block;
}
.region ul{list-style:none;}
.region li{padding:9px 0; border-top:1px solid var(--line); font-size:16px;}
.region li:first-child{border-top:none;}
.region .country{display:block; font-size:13px; color:rgba(38,40,43,0.45); margin-top:2px;}
.region.local{background:var(--millet); color:var(--paper);}
.region.local li{border-color:rgba(251,248,240,0.2);}
.region.local .rname{color:var(--clay-light);}
.region.local .country{color:rgba(251,248,240,0.55);}

/* ---------- SPLIT (beneficiaries + coverage) ---------- */
.split{padding:100px 0; background:var(--sand);}
.split .grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px;}
.benef-list{list-style:none; margin-top:30px;}
.benef-list li{display:flex; align-items:center; gap:14px; padding:15px 0; border-top:1px solid var(--line); font-size:15px;}
.benef-list li:first-child{border-top:none;}
.benef-list .num{font-family:'IBM Plex Mono',monospace; color:var(--clay); font-size:14px;}

.coverage-box{background:var(--night); color:var(--sand); padding:40px; position:relative; overflow:hidden;}
.coverage-box h3{font-size:1.3rem; color:var(--paper); margin-bottom:16px;}
.coverage-box p{font-size:16.5px; color:rgba(244,245,241,0.65); margin-bottom:22px;}
.coverage-tags{display:flex; flex-wrap:wrap; gap:10px;}
.coverage-tags span{border:1px solid rgba(76,194,108,0.4); color:var(--ochre); padding:7px 13px; font-size:14px; border-radius:999px;}

/* ---------- STRENGTHS ---------- */
.strengths{padding:90px 0; background:var(--night); color:var(--sand);}
.str-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:48px;}
.str-card{border:1px solid var(--line-dark); padding:22px 18px; text-align:left;}
.str-card .n{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ochre); margin-bottom:14px; display:block;}
.str-card p{font-size:15.5px; color:rgba(244,245,241,0.75);}

/* ---------- CONTACT PAGE ---------- */
.contact-wrap{padding:100px 0; background:var(--sand);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:44px;}
.contact-info-card{background:var(--paper); border:1px solid var(--line); padding:32px;}
.contact-info-card .row{display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--line);}
.contact-info-card .row:first-child{border-top:none;}
.contact-info-card .row .ic{
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--clay); color:var(--clay);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-info-card .row h5{font-size:16px; margin-bottom:4px;}
.contact-info-card .row p{font-size:15.5px; color:rgba(38,40,43,0.65);}
.form-card{background:var(--night); color:var(--sand); padding:34px;}
.form-card h3{color:var(--paper); font-size:1.3rem; margin-bottom:22px;}
.field{margin-bottom:18px;}
.field label{display:block; font-size:14px; margin-bottom:7px; color:rgba(244,245,241,0.7); font-family:'IBM Plex Mono',monospace; letter-spacing:0.04em; text-transform:uppercase;}
.field input, .field textarea, .field select{
  width:100%; background:rgba(244,245,241,0.06); border:1px solid var(--line-dark);
  color:var(--paper); padding:12px 14px; font-family:'IBM Plex Sans',sans-serif; font-size:16px; border-radius:2px;
}
.field textarea{min-height:110px; resize:vertical;}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--ochre);}
.map-embed{margin-top:60px; border:1px solid var(--line); height:340px; background:var(--paper); display:flex; align-items:center; justify-content:center; color:rgba(38,40,43,0.4); font-size:13px;}

/* ---------- CLOSING / CTA ---------- */
.closing{padding:110px 0; text-align:center; background:linear-gradient(160deg, var(--clay) 0%, #A8501C 100%); color:var(--paper);}
.closing h2{font-size:clamp(1.8rem,3.6vw,2.6rem); max-width:760px; margin:0 auto 22px;}
.closing p{max-width:600px; margin:0 auto 34px; color:rgba(251,248,240,0.85); font-size:17px;}
.closing .btn-primary{background:var(--night); color:var(--sand);}
.closing .btn-primary:hover{background:var(--night-deep);}

/* ---------- FOOTER ---------- */
footer{background:var(--night-deep); color:rgba(244,245,241,0.6); padding:56px 0 26px;}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--line-dark);}
.foot-grid h5{color:var(--sand); font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:16px;}
.foot-grid ul{list-style:none;}
.foot-grid li{margin-bottom:10px; font-size:15px;}
.foot-grid a:hover{color:var(--ochre);}
.foot-brand .name{font-family:'Zilla Slab',serif; font-size:1.3rem; color:var(--sand); font-weight:700; margin-bottom:12px;}
.foot-brand p{font-size:15.5px; max-width:280px; line-height:1.6;}
.foot-bottom{padding-top:22px; display:flex; justify-content:space-between; font-size:14.5px;}

@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr; gap:40px;}
  .statrow{grid-template-columns:repeat(2,1fr);}
  .identity .grid, .split .grid, .contact-grid{grid-template-columns:1fr;}
  .mvv-grid{grid-template-columns:1fr;}
  .mvv-card{border-right:none; border-bottom:1px solid var(--line);}
  .proc-track{grid-template-columns:1fr; gap:36px;}
  .proc-track::before{display:none;}
  .prod-grid{grid-template-columns:repeat(2,1fr);}
  .region-grid{grid-template-columns:repeat(2,1fr);}
  .str-grid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
}

[data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease;}
[data-reveal].in{opacity:1; transform:translateY(0);}