/* Creer Infotech — Global Design System */
:root{
  --color-primary:#0B6B3A;--color-primary-600:#0a5f34;--color-primary-700:#084d2a;
  --color-primary-soft:#e8f3ec;--color-accent:#6ba57f;
  --color-white:#fff;--color-bg:#fff;--color-bg-alt:#f6f8f7;--color-bg-muted:#f1f4f2;
  --color-border:#e4e8e6;--color-text:#0f1a14;--color-text-soft:#4a5651;--color-text-muted:#7a857f;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:22px;
  --shadow-xs:0 1px 2px rgba(15,26,20,.04);--shadow-sm:0 2px 6px rgba(15,26,20,.05);
  --shadow-md:0 8px 20px rgba(15,26,20,.06);--shadow-lg:0 20px 40px rgba(15,26,20,.08);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
  --container:1200px;--ease:cubic-bezier(.22,.61,.36,1);--dur:260ms;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4,h5{margin:0 0 var(--space-4);color:var(--color-text);line-height:1.15;letter-spacing:-0.015em;font-weight:700}
h1{font-size:clamp(2.25rem,4vw + 1rem,3.75rem);letter-spacing:-0.03em}
h2{font-size:clamp(1.75rem,2.2vw + 1rem,2.5rem);letter-spacing:-0.02em}
h3{font-size:1.35rem}
h4{font-size:1.1rem}
p{margin:0 0 var(--space-4);color:var(--color-text-soft)}
.lead{font-size:1.15rem;color:var(--color-text-soft);max-width:60ch}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary);padding:6px 12px;background:var(--color-primary-soft);border-radius:999px;margin-bottom:var(--space-4)}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--space-5)}
.section{padding:var(--space-9) 0}
.section-sm{padding:var(--space-8) 0}
.section-alt{background:var(--color-bg-alt)}
.section-header{max-width:720px;margin:0 auto var(--space-7);text-align:center}
.section-header p{margin:0 auto}
.grid{display:grid;gap:var(--space-5)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:var(--radius-md);font-weight:600;font-size:.95rem;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease);position:relative;overflow:hidden;white-space:nowrap}
.btn::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.35),transparent 40%);opacity:0;transition:opacity var(--dur) var(--ease);pointer-events:none}
.btn:hover::after{opacity:1}
.btn-primary{background:var(--color-primary);color:var(--color-white);box-shadow:0 6px 16px rgba(11,107,58,.24)}
.btn-primary:hover{background:var(--color-primary-600);transform:translateY(-1px);box-shadow:0 10px 22px rgba(11,107,58,.28)}
.btn-outline{background:transparent;color:var(--color-text);border:1px solid var(--color-border)}
.btn-outline:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-soft)}
.btn-ghost{color:var(--color-primary);padding:10px 4px}
.btn-ghost:hover{color:var(--color-primary-700)}
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.75);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.nav.is-scrolled{background:rgba(255,255,255,.95);border-bottom-color:var(--color-border);box-shadow:var(--shadow-xs)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;letter-spacing:-0.01em}
.brand-mark{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--color-primary),#14a05a);display:grid;place-items:center;color:#fff;font-weight:800;font-size:.9rem;box-shadow:0 4px 10px rgba(11,107,58,.28)}
.nav-links{display:flex;align-items:center;gap:var(--space-6);list-style:none;margin:0;padding:0}
.nav-links a{color:var(--color-text-soft);font-size:.94rem;font-weight:500;position:relative;transition:color var(--dur) var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:2px;background:var(--color-primary);transform:scaleX(0);transform-origin:right;transition:transform var(--dur) var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--color-primary)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);transform-origin:left}
.nav-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:8px}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--color-text);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--color-text);transition:transform var(--dur) var(--ease)}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav.open .nav-toggle span{background:transparent}
.nav.open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
.nav.open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}
.hero{position:relative;padding:var(--space-9) 0 var(--space-8);background:radial-gradient(1000px 500px at 85% -10%,rgba(11,107,58,.10),transparent 60%),radial-gradient(700px 400px at 0% 10%,rgba(11,107,58,.06),transparent 60%),linear-gradient(180deg,#fff 0%,#fbfdfb 100%);overflow:hidden}
.hero-inner{max-width:780px}
.hero h1{margin-bottom:var(--space-5)}
.hero .lead{font-size:1.2rem;margin-bottom:var(--space-6)}
.hero-cta{display:flex;gap:var(--space-3);flex-wrap:wrap}
.hero-page{padding:var(--space-8) 0 var(--space-7);background:linear-gradient(180deg,var(--color-primary-soft) 0%,#fff 100%);border-bottom:1px solid var(--color-border)}
.hero-page .container{max-width:900px;text-align:center}
.card{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(11,107,58,.2)}
.card-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--color-primary-soft);color:var(--color-primary);margin-bottom:var(--space-4);transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.card:hover .card-icon{transform:scale(1.06);background:var(--color-primary);color:#fff}
.card h3{margin-bottom:var(--space-2)}
.card p{margin:0;color:var(--color-text-soft);font-size:.95rem}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);padding:var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-white);box-shadow:var(--shadow-xs)}
.stat-num{font-size:2.2rem;font-weight:700;color:var(--color-primary);letter-spacing:-0.02em;line-height:1}
.stat-label{font-size:.9rem;color:var(--color-text-muted);margin-top:6px}
.trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-7);padding:var(--space-5) 0;color:var(--color-text-muted);font-size:.9rem;letter-spacing:.06em}
.trust span{opacity:.75;text-transform:uppercase;font-weight:600}
.footer{background:#0a1410;color:#c8d1cc;padding:var(--space-8) 0 var(--space-5);margin-top:var(--space-9)}
.footer a{color:#c8d1cc;transition:color var(--dur) var(--ease)}
.footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-6);margin-bottom:var(--space-6)}
.footer h4{color:#fff;font-size:.95rem;margin-bottom:var(--space-4)}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:10px;font-size:.92rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:var(--space-4);display:flex;justify-content:space-between;color:#8a958f;font-size:.85rem}
.reveal{opacity:0;transform:translateY(20px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal.delay-1{transition-delay:80ms}
.reveal.delay-2{transition-delay:160ms}
.reveal.delay-3{transition-delay:240ms}
.form{display:grid;gap:var(--space-4)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.field label{display:block;font-size:.85rem;font-weight:600;color:var(--color-text);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-white);font:inherit;color:var(--color-text);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 4px rgba(11,107,58,.12)}
.field textarea{min-height:140px;resize:vertical}
@media (max-width:960px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .section{padding:var(--space-8) 0}
  .nav-toggle{display:inline-flex}
  .nav-links{position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:var(--space-3) var(--space-5) var(--space-5);border-bottom:1px solid var(--color-border);transform:translateY(-8px);opacity:0;pointer-events:none;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--color-border)}
  .nav-links a::after{display:none}
  .nav.open .nav-links{transform:translateY(0);opacity:1;pointer-events:auto}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;padding:var(--space-4)}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
  h1{font-size:2.1rem}
}
/* ================= CHANGE START: Site green updated according to logo ================= */
:root {
  --color-primary: #50B03C;
  --color-primary-600: #43A533;
  --color-primary-700: #347F2B;
  --color-primary-soft: #EEF9EB;
  --color-accent: #7DCB6C;
  --logo-green-rgb: 80, 176, 60;
}

/* Buttons */
.btn-primary {
  background: var(--color-primary) !important;
  box-shadow: 0 6px 16px rgba(var(--logo-green-rgb), 0.24) !important;
}

.btn-primary:hover {
  background: var(--color-primary-600) !important;
  box-shadow: 0 10px 22px rgba(var(--logo-green-rgb), 0.28) !important;
}

/* Brand mark if used anywhere */
.brand-mark {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-600)) !important;
  box-shadow: 0 4px 10px rgba(var(--logo-green-rgb), 0.28) !important;
}

/* Hero green glow */
.hero {
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(var(--logo-green-rgb), 0.10), transparent 60%),
    radial-gradient(700px 400px at 0% 10%, rgba(var(--logo-green-rgb), 0.06), transparent 60%),
    linear-gradient(180deg, #fff 0%, #fbfdfb 100%) !important;
}

/* Cards */
.card:hover {
  border-color: rgba(var(--logo-green-rgb), 0.22) !important;
}

.card-icon {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}

.card:hover .card-icon {
  background: var(--color-primary) !important;
  color: #fff !important;
}

/* Form focus */
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px rgba(var(--logo-green-rgb), 0.12) !important;
}

/* Page-specific icon boxes */
.services-preview .card-icon,
.industry-section .card-icon,
.faq-grid .card-icon,
.mvv-grid .card-icon,
.contact-info .card-icon,
.info-row .card-icon {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}

/* Vision / Mission green blocks */
.works-preview .work-thumb,
.works-preview .work-card:nth-child(1) .work-thumb,
.works-preview .work-card:nth-child(2) .work-thumb,
.works-preview .work-card:nth-child(3) .work-thumb {
  background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary)) !important;
}

/* Links and active nav already use variable, this ensures exact logo green */
.nav-links a:hover,
.nav-links a.active,
.btn-ghost,
.eyebrow,
.stat-num {
  color: var(--color-primary) !important;
}

.nav-links a::after {
  background: var(--color-primary) !important;
}
/* ================= CHANGE END ================= */
/* ================= CHANGE START: Footer color made lighter and proper ================= */
.footer {
  background: #f6f8f7 !important;
  color: #4a5651 !important;
  padding: var(--space-8) 0 var(--space-5);
  margin-top: var(--space-9);
  border-top: 1px solid var(--color-border);
}

.footer a {
  color: #4a5651 !important;
}

.footer a:hover {
  color: var(--color-primary) !important;
}

.footer h4 {
  color: #0f1a14 !important;
}

.footer p,
.footer li {
  color: #4a5651 !important;
}

.footer-bottom {
  border-top: 1px solid #dfe5e2 !important;
  color: #7a857f !important;
}

.footer-bottom span {
  color: #7a857f !important;
}

/* Footer logo should remain clear on light footer */
.footer .brand {
  color: #0f1a14 !important;
}

.footer .brand-logo {
  opacity: 1;
}
/* ================= CHANGE END ================= */