/* ------- Shinnova Solar — global styles ------- */

@font-face {
  font-family: 'TBJ Norguba';
  src: url('assets/fonts/TBJNorguba-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mansfield';
  src: url('assets/fonts/Mansfield-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mansfield';
  src: url('assets/fonts/Mansfield-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mansfield';
  src: url('assets/fonts/Mansfield-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mansfield';
  src: url('assets/fonts/Mansfield-SemiBold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mansfield';
  src: url('assets/fonts/Mansfield-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mansfield';
  src: url('assets/fonts/Mansfield-Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  --sky: #0990CF;
  --sky-700: #0775AA;
  --sky-300: #5DB6E0;
  --sky-50: #E6F4FB;
  --green: #00FF01;
  --green-dim: #00CC01;
  --charcoal: #202D2D;
  --charcoal-2: #2A3A3A;
  --charcoal-3: #364747;
  --grey: #6B7777;
  --grey-2: #98A2A2;
  --line: #E2E6E6;
  --bg: #F6F7F7;
  --white: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Mansfield', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 17px;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.display {
  font-family: 'TBJ Norguba', 'Mansfield', sans-serif;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 0.92;
  text-transform: uppercase;
}
.display-xl { font-size: clamp(56px, 8.5vw, 144px); }
.display-lg { font-size: clamp(44px, 6vw, 96px); }
.display-md { font-size: clamp(34px, 4.2vw, 72px); }
.display-sm { font-size: clamp(26px, 3vw, 52px); }

.eyebrow {
  font-family: 'Poppins', 'Mansfield', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 12px;
  color: var(--sky);
}
.eyebrow.green { color: var(--green-dim); }
.eyebrow.light { color: var(--green); }

.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 768px) { .container { padding: 0 22px; } }

.lede {
  font-family: 'Mansfield', sans-serif;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--charcoal-2);
  max-width: 54ch;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 28px;
  font-family: 'Poppins', 'Mansfield', sans-serif;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px;
  border-radius: 999px;
  transition: all .25s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--sky); color: #fff; }
.btn-primary:hover { background: var(--sky-700); transform: translateY(-1px); }
.btn-green { background: var(--green); color: var(--charcoal); }
.btn-green:hover { background: #00d901; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--charcoal); border: 1.5px solid var(--charcoal); }
.btn-ghost.on-dark { color: #fff; border-color: #fff; }
.btn-ghost:hover { background: var(--charcoal); color: #fff; }
.btn-ghost.on-dark:hover { background: #fff; color: var(--charcoal); }
.btn .arrow {
  width: 14px; height: 14px;
  background: url('assets/arrow.png') center/contain no-repeat;
  filter: brightness(0) invert(1);
  transition: transform .25s ease;
}
.btn-green .arrow, .btn-ghost:not(.on-dark) .arrow { filter: none; }
.btn:hover .arrow { transform: translateX(4px); }

.text-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Poppins', 'Mansfield', sans-serif;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; font-size: 12px;
  color: var(--sky);
  border-bottom: 1.5px solid currentColor; padding-bottom: 6px;
  transition: gap .25s ease;
}
.text-link::after { content: "→"; font-size: 16px; line-height: 1; }
.text-link:hover { gap: 14px; }

/* Sonar rings */
.sonar-bg {
  position: absolute; top: -200px; right: -280px;
  width: 1100px; height: 1100px;
  pointer-events: none; color: var(--sky); opacity: .28;
  will-change: transform;
}
.sonar-bg .ring {
  position: absolute; border: 1px solid currentColor;
  border-radius: 50%; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.section.dark .sonar-bg { color: var(--sky-300); opacity: .22; }
.section.blue .sonar-bg { color: #fff; opacity: .28; }
.sonar-bg-bottomleft {
  position: absolute; bottom: -340px; left: -340px;
  width: 780px; height: 780px;
  pointer-events: none; color: var(--green); opacity: .22;
  will-change: transform;
}
.sonar-bg-bottomleft .ring {
  position: absolute; border: 1px solid currentColor;
  border-radius: 50%; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* Pill / circle image frame */
.pill-frame { border-radius: 9999px; overflow: hidden; }
.pill-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Sections */
.section { padding: 120px 0; position: relative; overflow: hidden; }
.section.tight { padding: 88px 0; }
.section.dark { background: var(--charcoal); color: #fff; }
.section.dark .lede { color: rgba(255,255,255,.78); }
.section.blue { background: var(--sky); color: #fff; }
.section.blue .lede { color: rgba(255,255,255,.85); }
.section.blue .eyebrow { color: var(--green); }
.section.dark .eyebrow { color: var(--green); }
@media (max-width: 768px) { .section { padding: 80px 0; } .section.tight { padding: 60px 0; } }

/* Noise overlay */
.noise {
  position: absolute; inset: 0; pointer-events: none;
  background: url('assets/noise.jpg'); background-size: 300px;
  opacity: .04; mix-blend-mode: overlay; z-index: 1;
}