/* ============================================================
   style.css — Vayuputra Industries
   Palette: White 65% · Black · Blue accents
   Topbar: White | Navbar: White | Footer: Black
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,600;1,700;1,800;1,900&display=swap');

/* ═══ CSS VARIABLES ═══ */
:root {
  /* Core */
  --white:        #ffffff;
  --off-white:    #f8f9fb;
  --gray-light:   #eef0f4;
  --gray-mid:     #d1d5db;
  --black:        #0a0a0a;
  --black-soft:   #111318;
  --black-mid:    #1c1f26;

  /* Blue */
  --blue:         #1d4ed8;
  --blue-mid:     #2563eb;
  --blue-light:   #3b82f6;
  --blue-pale:    #eff6ff;
  --blue-xpale:   #f0f7ff;
  --blue-border:  rgba(37,99,235,0.18);
  --blue-shadow:  rgba(37,99,235,0.15);

  /* Text */
  --txt-black:    #0a0a0a;
  --txt-body:     #1f2937;
  --txt-muted:    #6b7280;
  --txt-light:    rgba(255,255,255,0.85);
  --txt-dim:      rgba(255,255,255,0.5);

  /* Borders */
  --bdr-light:    rgba(0,0,0,0.09);
  --bdr-blue:     rgba(37,99,235,0.2);
  --bdr-white:    rgba(255,255,255,0.12);

  /* Legacy aliases — keeps old inline styles from breaking */
  --gold:           #2563eb;
  --gold-light:     #3b82f6;
  --gold-pale:      rgba(37,99,235,0.08);
  --green-deep:     #111318;
  --green-mid:      #1c1f26;
  --green-light:    #2563eb;
  --dark:           #ffffff;
  --dark-2:         #f8f9fb;
  --dark-3:         #eef0f4;
  --cream:          #0a0a0a;
  --cream-muted:    #4b5563;
  --cream-dim:      #9ca3af;
  --text-muted:     #6b7280;
  --border:         rgba(0,0,0,0.09);
  --border-hover:   rgba(37,99,235,0.4);
  --font-display:   'Poppins', sans-serif;
  --font-body:      'Poppins', sans-serif;
  --section-pad:    6rem 5%;
  --max-width:      1200px;
  --ease:           cubic-bezier(0.23,1,0.32,1);
  --speed:          0.35s;
}

/* ═══ RESET ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);background:var(--white);color:var(--txt-body);overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
button,input,select,textarea{font-family:var(--font-body);outline:none}

/* ═══ TYPOGRAPHY ═══ */
.section-tag{display:inline-block;color:var(--blue-mid);font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:.9rem}
.section-title{font-family:var(--font-display);font-size:clamp(1.9rem,3.8vw,3.1rem);font-weight:700;line-height:1.16;margin-bottom:1.1rem;color:var(--black)}
.section-title em{font-style:italic;color:var(--blue-mid)}
.section-body{font-size:1rem;font-weight:300;line-height:1.92;color:var(--txt-body);max-width:680px}
.divider{width:52px;height:3px;background:linear-gradient(90deg,var(--blue-mid),transparent);margin:1.1rem 0 1.8rem}
.divider.center{margin-left:auto;margin-right:auto}
.text-center{text-align:center}
.text-muted{color:var(--txt-muted)}
section{padding:var(--section-pad)}
.container{max-width:var(--max-width);margin:0 auto}

/* ═══ BUTTONS ═══ */
.btn{display:inline-block;padding:.85rem 2.1rem;border-radius:3px;font-size:.84rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;transition:all var(--speed) var(--ease);border:2px solid transparent}
.btn-primary{background:var(--blue-mid);color:#fff;border-color:var(--blue-mid)}
.btn-primary:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-2px);box-shadow:0 8px 24px var(--blue-shadow)}
.btn-outline{background:transparent;color:var(--black);border-color:var(--black)}
.btn-outline:hover{background:var(--black);color:#fff;transform:translateY(-2px)}
.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-outline-white:hover{background:#fff;color:var(--black);transform:translateY(-2px)}
.btn-gold-outline,.btn-blue-outline{background:transparent;color:var(--blue-mid);border-color:var(--blue-mid)}
.btn-gold-outline:hover,.btn-blue-outline:hover{background:var(--blue-mid);color:#fff;transform:translateY(-2px)}

/* ═══ CARDS ═══ */
.card{background:#fff;border:1px solid var(--bdr-light);border-radius:6px;padding:2rem;transition:border-color var(--speed) var(--ease),transform var(--speed) var(--ease),box-shadow var(--speed) var(--ease)}
.card:hover{border-color:var(--bdr-blue);transform:translateY(-4px);box-shadow:0 12px 32px var(--blue-shadow)}

/* ═══ TAGS / PILLS ═══ */
.tag{display:inline-block;background:var(--blue-pale);border:1px solid var(--bdr-blue);color:var(--blue-mid);padding:.2rem .75rem;border-radius:2px;font-size:.71rem;font-weight:600;letter-spacing:.04em}
.pill{display:inline-block;background:var(--blue-pale);border:1px solid var(--bdr-blue);color:var(--blue-mid);padding:.38rem 1rem;border-radius:50px;font-size:.79rem;font-weight:500}

/* ═══ SCROLL REVEAL ═══ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ═══ BACKGROUND VARIANTS ═══ */
/* White sections (65% of site) */
.bg-white,.bg-dark{background:#fff}
.bg-light,.bg-dark-2{background:var(--off-white)}
.bg-gray,.bg-dark-3{background:var(--gray-light)}
.bg-gradient-green,.bg-blue-pale{background:linear-gradient(135deg,var(--blue-xpale),var(--blue-pale))}

/* Black sections */
.bg-black,.black-section{background:var(--black-soft);color:#fff}
.black-section .section-title{color:#fff}
.black-section .section-tag{color:var(--blue-light)}
.black-section .section-body{color:rgba(255,255,255,.68)}
.black-section .divider{background:linear-gradient(90deg,var(--blue-light),transparent)}
.black-section .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09);color:#fff}
.black-section .card:hover{border-color:var(--blue-light);box-shadow:0 12px 32px rgba(59,130,246,.2)}
.black-section .text-muted{color:rgba(255,255,255,.48)}
/* Inline dark section styles compatibility */
section[style*="green-deep"],section[style*="green-mid"],section[style*="1A3A1A"],
section[style*="1A3A2A"],section[style*="0E1F14"]{
  background:var(--black-soft) !important;
  color:#fff;
}

/* Blue sections */
.blue-section{background:var(--blue-mid);color:#fff}
.blue-section .section-title{color:#fff}
.blue-section .section-tag{color:rgba(255,255,255,.7)}
.blue-section .section-body{color:rgba(255,255,255,.8)}
.blue-section .divider{background:linear-gradient(90deg,rgba(255,255,255,.55),transparent)}

/* ═══ PAGE HERO (inner pages — BLACK) ═══ */
.page-hero{min-height:44vh;display:flex;align-items:flex-end;padding:9rem 5% 4.5rem;background:var(--black-soft);border-bottom:3px solid var(--blue-mid);position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 79px,rgba(37,99,235,.05) 80px),repeating-linear-gradient(90deg,transparent,transparent 79px,rgba(37,99,235,.05) 80px);pointer-events:none}
.page-hero::after{content:'';position:absolute;top:0;right:0;width:45%;height:100%;background:linear-gradient(135deg,transparent,rgba(37,99,235,.1));pointer-events:none}
.page-hero-content{position:relative;z-index:2;max-width:var(--max-width);width:100%}
.breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.77rem;color:rgba(255,255,255,.38);margin-bottom:1.2rem}
.breadcrumb a{color:var(--blue-light)}
.page-hero-title{font-family:var(--font-display);font-size:clamp(2.3rem,5vw,4rem);font-weight:lighter;line-height:1.1;color:#fff}
.page-hero-title em{font-style:italic;color:var(--blue-light)}
.page-hero-logo-bg{position:absolute;right:5%;bottom:0;height:100%;max-height:160px;opacity:.05;pointer-events:none;filter:brightness(10)}

/* ═══ GRIDS ═══ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}

/* ═══ FOOTER — BLACK ═══ */
footer{background:#000000;border-top:3px solid var(--blue-mid);padding:5rem 5% 2.5rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:4rem;max-width:var(--max-width);margin:0 auto 3.5rem}
.footer-logo{font-family:var(--font-display);font-size:1.5rem;font-weight:900;color:#fff;display:inline-block;margin-bottom:1rem;text-decoration:none}
.footer-logo span{color:var(--blue-light);font-weight:400}
.footer-desc{font-size:.84rem;color:rgba(255,255,255,.42);line-height:1.85;max-width:280px}
.footer-col-title{font-size:.71rem;text-transform:uppercase;letter-spacing:.17em;color:var(--blue-light);font-weight:700;margin-bottom:1.2rem}
.footer-links{display:flex;flex-direction:column;gap:.65rem}
.footer-links a{color:rgba(255,255,255,.38);font-size:.85rem;transition:color .25s}
.footer-links a:hover{color:#fff}
.footer-bottom{max-width:var(--max-width);margin:0 auto;padding-top:2rem;border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-copy{font-size:.77rem;color:rgba(255,255,255,.28)}
.footer-web{font-size:.77rem;color:var(--blue-light)}

/* ═══ LOGO IMAGE ═══ */
.footer-logo-img{height:65px;width:auto;display:block;object-fit:contain;margin-bottom:1rem;filter:none;transition:opacity .25s}
.footer-logo:hover .footer-logo-img{opacity:.85}

/* ═══ PROCESS STEPS ═══ */
.process-steps{display:flex;flex-direction:column;gap:0;max-width:680px}
.process-step{display:flex;gap:2rem;padding:2rem 0;border-bottom:1px solid var(--bdr-light);transition:padding-left .3s}
.process-step:last-child{border-bottom:none}
.process-step:hover{padding-left:.5rem}
.step-line{display:flex;flex-direction:column;align-items:center;min-width:40px}
.step-dot{width:13px;height:13px;border-radius:50%;background:var(--blue-mid);flex-shrink:0;box-shadow:0 0 10px rgba(37,99,235,.4);transition:box-shadow .3s}
.process-step:hover .step-dot{box-shadow:0 0 20px rgba(37,99,235,.8)}
.step-connector{flex:1;width:1px;background:var(--bdr-blue);margin-top:4px}
.step-num{font-family:var(--font-display);font-size:.74rem;color:var(--blue-mid);font-weight:700;margin-top:.3rem}
.step-title{font-weight:700;font-size:.97rem;margin-bottom:.4rem;color:var(--black)}
.step-body{font-size:.84rem;color:var(--txt-muted);line-height:1.8}

/* ═══ INFRA / ICON CARDS ═══ */
.infra-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;max-width:var(--max-width);margin:3rem auto 0}
.infra-card{background:#fff;border:1px solid var(--bdr-light);border-radius:6px;padding:2rem;text-align:center;transition:all .3s var(--ease)}
.infra-card:hover{border-color:var(--bdr-blue);transform:translateY(-4px);box-shadow:0 12px 32px var(--blue-shadow)}

/* ═══ STAT ITEMS ═══ */
.stat-num{font-family:var(--font-display);font-size:2.4rem;font-weight:900;color:var(--blue-mid);line-height:1}
.stat-label{font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-muted);margin-top:.3rem}

/* ═══ OVERRIDE: fix any lingering gold/green inline colours on existing pages ═══ */
/* These rules convert old dark-theme card/box styles to light theme */
.card[style*="green"],
div[style*="green-deep"],
div[style*="green-mid"],
div[style*="1A3A"],
div[style*="2D5A"],
div[style*="rgba(26,58"],
div[style*="rgba(200,151"] {
  background: var(--off-white) !important;
  border-color: var(--bdr-blue) !important;
  color: var(--txt-body) !important;
}