/* =========================================================================
   BLESSLAND INFRASPACE PRIVATE LIMITED — MAIN STYLESHEET
   -------------------------------------------------------------------------
   Design language: "blueprint intelligence" — the vernacular of an
   architectural blueprint (grid lines, dimension marks, corner
   registration ticks, drafting annotations) fused with the vernacular of
   software/AI (mono data labels, precise grids). This is the one visual
   idea the whole site is built on, so keep new sections consistent with
   it rather than introducing unrelated decoration.

   Sections in this file:
   1. Design tokens (colors, type, spacing)
   2. Reset / base
   3. Layout helpers
   4. Header / nav
   5. Buttons & form controls
   6. Blueprint decorative system (grid bg, corner marks, annotations)
   7. Home page sections
   8. About / Services / Contact page sections
   9. Footer
   10. Scroll-reveal + responsive
   ========================================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Color */
  --navy: #0F1E38;        /* deep blueprint navy — primary dark surface */
  --steel: #1F3A5F;       /* structural steel blue — secondary surface */
  --steel-light: #2E5280; /* lighter steel for hovers/borders on dark */
  --brass: #C08A28;       /* brass/amber accent — CTAs, highlights */
  --brass-light: #E0AC4B; /* hover state for brass */
  --paper: #F6F3EC;       /* warm paper — light background */
  --paper-dim: #EDE8DB;   /* slightly deeper paper for alternating sections */
  --ink: #17181C;         /* near-black text on paper */
  --ink-soft: #4A4F58;    /* secondary text on paper */
  --line-on-paper: rgba(15, 30, 56, 0.14);   /* blueprint grid lines on paper */
  --line-on-navy: rgba(246, 243, 236, 0.14); /* blueprint grid lines on navy */
  --white: #FFFFFF;

  /* Type */
  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Spacing scale */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6.5rem;

  /* Layout */
  --max-width: 1180px;
  --radius: 2px; /* near-zero radius — drafting precision, not soft UI */
}

/* ---------- 2. RESET / BASE ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { color: var(--ink-soft); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--brass);
  display: inline-block;
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

/* ---------- 3. LAYOUT HELPERS ---------- */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-3);
}

.section { padding: var(--sp-6) 0; position: relative; }
.section--tight { padding: var(--sp-5) 0; }
.section--navy { background: var(--navy); color: var(--paper); }
.section--navy p { color: rgba(246,243,236,0.72); }
.section--dim { background: var(--paper-dim); }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  align-items: start;
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--sp-4);
}
.section-head h2 { margin-top: var(--sp-2); }
.section-head p { margin-top: var(--sp-2); font-size: 1.05rem; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- 4. HEADER / NAV ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 30, 56, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-on-navy);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  max-width: var(--max-width);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--paper);
}
.brand-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.brand span.small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--brass-light);
  font-weight: 400;
  text-transform: uppercase;
  margin-top: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.nav-links a {
  font-size: 0.92rem;
  color: rgba(246,243,236,0.82);
  position: relative;
  padding: 0.3em 0;
  transition: color 0.2s ease;
}
.nav-links a:hover,
.nav-links a.active { color: var(--paper); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--brass);
}

.nav-cta {
  background: var(--brass);
  color: var(--navy) !important;
  padding: 0.6em 1.3em;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: var(--radius);
  transition: background 0.2s ease;
}
.nav-cta:hover { background: var(--brass-light); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--paper);
  display: block;
}

/* ---------- 5. BUTTONS & FORM CONTROLS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.7em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn--brass { background: var(--brass); color: var(--navy); }
.btn--brass:hover { background: var(--brass-light); }

.btn--outline-navy { border-color: rgba(15,30,56,0.35); color: var(--navy); }
.btn--outline-navy:hover { border-color: var(--navy); background: rgba(15,30,56,0.05); }

.btn--outline-paper { border-color: rgba(246,243,236,0.4); color: var(--paper); }
.btn--outline-paper:hover { border-color: var(--paper); background: rgba(246,243,236,0.08); }

.btn-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }

label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 0.5em;
}

input, textarea, select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(15,30,56,0.22);
  border-radius: var(--radius);
  padding: 0.85em 1em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(192,138,40,0.15);
  outline: none;
}
textarea { resize: vertical; min-height: 140px; }

.field { margin-bottom: var(--sp-3); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.form-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: var(--sp-2);
}

.form-status {
  display: none;
  padding: 0.9em 1.1em;
  border-radius: var(--radius);
  font-size: 0.92rem;
  margin-bottom: var(--sp-3);
  font-family: var(--font-mono);
}
.form-status.show { display: block; }
.form-status.ok { background: rgba(46,120,80,0.12); color: #235c3f; border: 1px solid rgba(46,120,80,0.3); }
.form-status.err { background: rgba(178,52,44,0.1); color: #8a2a22; border: 1px solid rgba(178,52,44,0.3); }

/* ---------- 6. BLUEPRINT DECORATIVE SYSTEM ---------- */

/* Full-bleed blueprint grid, used as a background layer on dark sections */
.blueprint-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-on-navy) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-on-navy) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  opacity: 0.7;
}
.section--dim .blueprint-grid,
.section:not(.section--navy) .blueprint-grid {
  background-image:
    linear-gradient(var(--line-on-paper) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-on-paper) 1px, transparent 1px);
}

/* Corner registration marks — replace generic numbered badges.
   Used to frame cards, like a drafter's crop marks on a blueprint sheet. */
.corner-marked {
  position: relative;
  padding: var(--sp-3);
  border: 1px solid var(--line-on-paper);
}
.section--navy .corner-marked { border-color: var(--line-on-navy); }
.corner-marked::before,
.corner-marked::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--brass);
  border-left: 2px solid var(--brass);
  top: -1px; left: -1px;
}
.corner-marked::after {
  top: auto; left: auto;
  bottom: -1px; right: -1px;
  border-top: none; border-left: none;
  border-bottom: 2px solid var(--brass);
  border-right: 2px solid var(--brass);
}

/* Drafting annotation label — small mono callout tag */
.annotation {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
  display: inline-block;
  padding: 0.3em 0.6em;
  border: 1px dashed rgba(31,58,95,0.4);
  border-radius: var(--radius);
}
.section--navy .annotation { color: var(--brass-light); border-color: rgba(224,172,75,0.4); }

/* Dimension line — a thin rule with tick ends, used to underline stats/labels */
.dim-line {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: var(--steel);
}
.dim-line::before, .dim-line::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(31,58,95,0.3);
}
.section--navy .dim-line { color: var(--brass-light); }
.section--navy .dim-line::before, .section--navy .dim-line::after { background: rgba(246,243,236,0.25); }

/* ---------- 7. HOME — HERO ---------- */
.hero {
  background: var(--navy);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  padding: var(--sp-6) 0 var(--sp-5);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-5);
  align-items: center;
}

.hero-copy h1 {
  margin-top: var(--sp-2);
  color: var(--paper);
}
.hero-copy .lede {
  margin-top: var(--sp-3);
  font-size: 1.15rem;
  max-width: 46ch;
  color: rgba(246,243,236,0.78);
}

.hero-stats {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}
.hero-stat .num {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  color: var(--brass-light);
  display: block;
}
.hero-stat .label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(246,243,236,0.6);
  margin-top: 0.3em;
}

/* Signature hero visual — blueprint lines resolving into a structure+circuit glyph */
.hero-visual {
  position: relative;
  z-index: 2;
  aspect-ratio: 1 / 1;
  max-width: 440px;
  margin: 0 auto;
}
.hero-visual svg { width: 100%; height: 100%; }

.draw-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: draw 2.4s ease forwards;
}
.draw-line.d1 { animation-delay: 0.1s; }
.draw-line.d2 { animation-delay: 0.5s; }
.draw-line.d3 { animation-delay: 0.9s; }
.draw-line.d4 { animation-delay: 1.3s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.pulse-node {
  opacity: 0;
  animation: fadeIn 0.6s ease forwards 1.8s;
}
@keyframes fadeIn { to { opacity: 1; } }

/* ---------- 8. CARDS / SERVICE GRID ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }

.service-card {
  background: var(--white);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.section--navy .service-card { background: var(--steel); }

.service-card .icon {
  width: 42px;
  height: 42px;
  color: var(--brass);
  margin-bottom: var(--sp-1);
}
.service-card h3 { margin-top: 0.2em; }
.service-card p { font-size: 0.95rem; }
.service-card .tag-row { margin-top: auto; padding-top: var(--sp-2); display: flex; gap: 0.4em; flex-wrap: wrap; }

/* Pillars (Home: AI Solutions vs Infrastructure Services) */
.pillar {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pillar h3 { margin-top: var(--sp-2); }
.pillar p { margin-top: var(--sp-2); }
.pillar ul { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: 0.6em; }
.pillar li {
  font-size: 0.92rem;
  color: var(--ink-soft);
  padding-left: 1.3em;
  position: relative;
}
.section--navy .pillar li { color: rgba(246,243,236,0.75); }
.pillar li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 7px; height: 1px;
  background: var(--brass);
}
.pillar .btn { margin-top: var(--sp-3); align-self: flex-start; }

/* Approach / process steps */
.process-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.process-step { position: relative; padding-top: var(--sp-3); border-top: 1px solid var(--line-on-paper); }
.process-step .index {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--brass);
}
.process-step h3 { margin-top: 0.6em; font-size: 1.05rem; }
.process-step p { margin-top: 0.5em; font-size: 0.92rem; }

/* CTA band */
.cta-band {
  background: var(--brass);
  color: var(--navy);
  padding: var(--sp-5) 0;
  text-align: center;
}
.cta-band h2 { color: var(--navy); }
.cta-band p { color: rgba(15,30,56,0.75); max-width: 50ch; margin: var(--sp-2) auto 0; }
.cta-band .btn-row { justify-content: center; }
.cta-band .btn--brass { background: var(--navy); color: var(--paper); }
.cta-band .btn--brass:hover { background: var(--steel); }
.cta-band .btn--outline-navy { border-color: rgba(15,30,56,0.4); }

/* ---------- 9. ABOUT PAGE ---------- */
.page-hero {
  background: var(--navy);
  color: var(--paper);
  padding: var(--sp-5) 0 var(--sp-4);
  position: relative;
  overflow: hidden;
}
.page-hero h1 { margin-top: var(--sp-2); color: var(--paper); }
.page-hero p { margin-top: var(--sp-2); max-width: 60ch; color: rgba(246,243,236,0.75); }
.page-hero .wrap { position: relative; z-index: 2; }

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.value-item { padding: var(--sp-3) 0; border-top: 1px solid var(--line-on-paper); }
.value-item h3 { font-size: 1.05rem; }
.value-item p { margin-top: 0.5em; font-size: 0.92rem; }

.registry-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-3);
  font-size: 0.95rem;
}
.registry-table tr { border-bottom: 1px solid var(--line-on-paper); }
.registry-table td { padding: 0.9em 0.5em; }
.registry-table td:first-child {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
  width: 40%;
}

/* ---------- 10. SERVICES PAGE ---------- */
.service-detail {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line-on-paper);
}
.service-detail:first-of-type { border-top: none; padding-top: 0; }
.service-detail .annotation { margin-bottom: var(--sp-2); }
.service-detail h2 { margin-top: var(--sp-1); }
.service-detail .desc { margin-top: var(--sp-3); font-size: 1.02rem; }

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2) var(--sp-3);
}
.spec-item {
  padding: var(--sp-2);
  border: 1px solid var(--line-on-paper);
}
.spec-item .label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
}
.spec-item .val { margin-top: 0.4em; font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- 11. CONTACT PAGE ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--sp-5);
  align-items: start;
}
.contact-info-item {
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line-on-paper);
}
.contact-info-item:first-child { border-top: none; padding-top: 0; }
.contact-info-item .label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
}
.contact-info-item p { margin-top: 0.4em; color: var(--ink); font-size: 0.98rem; }
.contact-info-item a:hover { color: var(--steel); text-decoration: underline; }

.contact-form-panel {
  background: var(--white);
  padding: var(--sp-4);
  border: 1px solid var(--line-on-paper);
}

.map-frame {
  margin-top: var(--sp-3);
  border: 1px solid var(--line-on-paper);
  height: 260px;
  overflow: hidden;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* ---------- 12. FOOTER ---------- */
.site-footer {
  background: var(--navy);
  color: rgba(246,243,236,0.7);
  padding: var(--sp-5) 0 var(--sp-3);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-on-navy);
}
.footer-brand .brand { margin-bottom: var(--sp-2); }
.footer-brand p { font-size: 0.9rem; max-width: 34ch; color: rgba(246,243,236,0.6); }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin-bottom: var(--sp-2);
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.6em; }
.footer-col a { font-size: 0.9rem; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--paper); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(246,243,236,0.45);
  flex-wrap: wrap;
  gap: 0.5em;
}

/* ---------- 13. SCROLL REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------- 14. RESPONSIVE ---------- */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { max-width: 320px; }
  .grid-2 { grid-template-columns: 1fr; gap: var(--sp-4); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .process-list { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .service-detail { grid-template-columns: 1fr; gap: var(--sp-3); }
  .contact-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .nav-links {
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: var(--navy);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sp-3);
    gap: var(--sp-2);
    border-bottom: 1px solid var(--line-on-navy);
    transform: translateY(-140%);
    transition: transform 0.25s ease;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-toggle { display: flex; }
  .nav-cta { margin-top: var(--sp-1); }

  .card-grid, .card-grid--2 { grid-template-columns: 1fr; }
  .process-list { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .section { padding: var(--sp-5) 0; }
  .section--tight { padding: var(--sp-4) 0; }
}