/* ─── RESET & ROOT ─────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --sun: var(--submain);
  --sun2: var(--text);
  --sky: #03163D;
  --sky2: #03163D;
  --blue: var(--submain);
  --green: #00E676;
  --purple: var(--text);
  --text: #0F4A63;
  --dim: #5E8CA3;
  --main: #FFFFFF;
  --submain: #157DA4;
  --lightblue: #F6FCFF;
  --card: rgba(255, 255, 255, 0.82);
  --border: rgba(21, 125, 164, 0.18);
  --radius: 14px;
  --gap: 16px;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Vazirmatn', sans-serif;
  background: linear-gradient(180deg, var(--main) 0%, var(--lightblue) 100%);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ─── ANIMATED BACKGROUND ──────────────────────────────── */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: transparent;
}


/* ─── MAIN CONTAINER ───────────────────────────── */
.container {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--gap) var(--gap) 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "geo  geo"
    "inp  res"
    "roof roof"
    "diag diag";
  gap: var(--gap);
}

.container > * {
  min-width: 0;
}

@media (max-width: 900px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas: "geo" "inp" "res" "roof" "diag";
  }
}

@media (max-width: 640px) {
  .container {
    padding: 12px 12px 28px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 10px 10px 24px;
    gap: 10px;
  }
}