/* ============================================================
   VAYUPAKSHA AEROSPACE — Design tokens
   Direction: survey & photogrammetry, not generic "sci-fi drone".
   Contour lines, ground-control coordinates, blueprint ink,
   survey-flag orange. Grounded in what the company actually measures.
   ============================================================ */
:root {
  /* Color */
  --ink: #10202C;         /* primary dark background — blueprint ink */
  --ink-soft: #17303E;    /* secondary dark surface */
  --ink-line: #2B4452;    /* hairlines / borders on dark */
  --paper: #F4EFE4;       /* warm paper white — light sections */
  --paper-dim: #E9E1D1;   /* paper surface / card on paper */
  --paper-line: #D8CDB6;  /* hairlines on paper */
  --signal: #E2582A;      /* survey-flag orange — primary accent */
  --signal-dark: #B8451F;
  --contour: #7C9A82;     /* muted sage — secondary accent, topo lines */
  --contour-soft: #A9C2AC;
  --text-on-ink: #F4EFE4;
  --text-on-ink-muted: #9FB2BC;
  --text-on-paper: #16242B;
  --text-on-paper-muted: #5B6B67;

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

  /* Layout */
  --max-width: 1240px;
  --radius: 6px;
  --radius-lg: 14px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text-on-paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

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

p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Coordinate-style eyebrow label — the site's structural signature.
   Used the way a surveyor labels a control point: a short mono tag
   ahead of every section heading. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(226, 88, 42, 0.18);
}

.section {
  padding: 96px 0;
}
@media (max-width: 720px) {
  .section { padding: 64px 0; }
}

.section-dark {
  background: var(--ink);
  color: var(--text-on-ink);
}
.section-dark .eyebrow { color: var(--contour-soft); }
.section-dark .eyebrow::before { background: var(--contour-soft); box-shadow: 0 0 0 3px rgba(169, 194, 172, 0.18); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--text-on-ink); }
.section-dark p { color: var(--text-on-ink-muted); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--signal);
  color: #FFF9F2;
}
.btn-primary:hover { background: var(--signal-dark); }

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn-outline:hover { background: rgba(0,0,0,0.05); }
.section-dark .btn-outline:hover { background: rgba(255,255,255,0.08); }

.btn-ghost {
  background: transparent;
  color: var(--signal);
  padding-left: 0;
  padding-right: 0;
}
.btn-ghost::after { content: '→'; transition: transform 0.2s var(--ease); }
.btn-ghost:hover::after { transform: translateX(4px); }

/* Topographic contour-line texture — the recurring visual motif.
   Applied as a background SVG on dark hero/CTA sections. */
.topo-bg {
  position: relative;
  overflow: hidden;
}
.topo-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23F4EFE4' stroke-opacity='0.05' stroke-width='1.4'%3E%3Cpath d='M-50,120 C150,60 300,220 500,140 C650,80 800,180 950,110'/%3E%3Cpath d='M-50,220 C150,160 300,320 500,240 C650,180 800,280 950,210'/%3E%3Cpath d='M-50,320 C150,260 300,420 500,340 C650,280 800,380 950,310'/%3E%3Cpath d='M-50,420 C150,360 300,520 500,440 C650,380 800,480 950,410'/%3E%3Cpath d='M-50,520 C150,460 300,620 500,540 C650,480 800,580 950,510'/%3E%3Cpath d='M-50,620 C150,560 300,720 500,640 C650,580 800,680 950,610'/%3E%3Cpath d='M-50,720 C150,660 300,820 500,740 C650,680 800,780 950,710'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 900px 900px;
  background-repeat: repeat;
  pointer-events: none;
}
.topo-bg > * { position: relative; z-index: 1; }

/* Coordinate readout chip — small mono label used on imagery
   to reinforce the "aerial data" idea without being decorative. */
.geo-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--contour-soft);
  background: rgba(16, 32, 44, 0.72);
  border: 1px solid rgba(244, 239, 228, 0.18);
  padding: 5px 10px;
  border-radius: 3px;
  backdrop-filter: blur(2px);
}

.card {
  background: #FFFDF8;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.hairline {
  border: none;
  border-top: 1px solid var(--paper-line);
  margin: 0;
}
.section-dark .hairline { border-top-color: var(--ink-line); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

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

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