/* Voltline Solar — daylight engineering, warm solar palette (non-terminal) */

:root {

  --bg: #f6f1ea;

  --bg-deep: #ebe4d9;

  --surface: #fffcf8;

  --ink: #132a3a;

  --muted: #5a6d7a;

  --accent: #c9f40e;

  --accent-text: #3d4f06;

  --sun: #ff9f1c;

  --sky: #0d7ea8;

  --line: rgba(19, 42, 58, 0.12);

  --shadow: 0 18px 50px rgba(19, 42, 58, 0.09);

  --shadow-sm: 0 6px 24px rgba(19, 42, 58, 0.06);

  --radius: 1rem;

  --radius-lg: 1.35rem;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

}



*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  min-height: 100vh;

  background: linear-gradient(165deg, var(--bg) 0%, var(--bg-deep) 45%, #e8e0f5 130%);

  color: var(--ink);

  font-family: var(--font);

  font-size: 1.02rem;

  line-height: 1.65;

}



.skip {

  position: absolute;

  left: -9999px;

  background: var(--ink);

  color: var(--surface);

  padding: 0.4rem 0.9rem;

  font-weight: 600;

  border-radius: 0.35rem;

}

.skip:focus {

  left: 0.75rem;

  top: 0.75rem;

  z-index: 100;

}



.shell {

  max-width: 68rem;

  margin: 0 auto;

  padding: 0 1.25rem 6rem;

}



/* Sticky header band */

.topline-wrap {

  position: sticky;

  top: 0;

  z-index: 50;

  background: rgba(255, 252, 248, 0.88);

  backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--line);

  margin: 0 -1.25rem 1.5rem;

  padding: 0.65rem 1.25rem;

}



.topline {

  max-width: 68rem;

  margin: 0 auto;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

}



.brand {

  font-weight: 800;

  letter-spacing: -0.03em;

  color: var(--ink);

  text-decoration: none;

  font-size: 1.2rem;

  line-height: 1.2;

}

.brand span {

  color: var(--sky);

  font-weight: 700;

}



.meta {

  font-size: 0.88rem;

  color: var(--muted);

}



.meta a {

  color: var(--sky);

  font-weight: 600;

  text-decoration: none;

}

.meta a:hover {

  text-decoration: underline;

}



/* Primary nav — pills */

.subnav {

  max-width: 68rem;

  margin: 0 auto 1.75rem;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 0.45rem;

}



.subnav > span:first-child {

  display: none;

}



.subnav a {

  display: inline-flex;

  align-items: center;

  padding: 0.45rem 0.95rem;

  font-size: 0.9rem;

  font-weight: 600;

  color: var(--muted);

  text-decoration: none;

  border-radius: 999px;

  border: 1px solid transparent;

  transition: background 0.15s, color 0.15s, border-color 0.15s;

}



.subnav a:hover {

  color: var(--ink);

  background: rgba(255, 255, 255, 0.65);

  border-color: var(--line);

}



.subnav a.active {

  color: var(--ink);

  background: var(--surface);

  border-color: rgba(13, 126, 168, 0.28);

  box-shadow: var(--shadow-sm);

}



/* Hero */

.hero {

  margin-bottom: 2rem;

}



.hero__grid {

  display: grid;

  gap: 1.75rem;

  align-items: center;

}

@media (min-width: 900px) {

  .hero__grid {

    grid-template-columns: 1.05fr 0.95fr;

    gap: 2.5rem;

  }

}



.eyebrow {

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.09em;

  text-transform: uppercase;

  color: var(--sun);

  margin: 0 0 0.65rem;

}



.hero h1 {

  font-size: clamp(2rem, 4.5vw, 2.85rem);

  line-height: 1.12;

  letter-spacing: -0.03em;

  margin: 0 0 1rem;

  font-weight: 800;

  color: var(--ink);

}



.hero__media {

  margin: 0;

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow);

  border: 1px solid var(--line);

}



.hero__media img {

  display: block;

  width: 100%;

  height: auto;

  aspect-ratio: 4/3;

  object-fit: cover;

}



/* Cards & panels */

.panel-area {

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: var(--radius-lg);

  padding: clamp(1.25rem, 3vw, 2rem);

  box-shadow: var(--shadow-sm);

}



.panel-area h1,

.doc-page h1 {

  font-size: clamp(1.65rem, 3vw, 2.1rem);

  margin: 0 0 0.75rem;

  font-weight: 800;

  letter-spacing: -0.02em;

  line-height: 1.15;

  color: var(--ink);

}



.lead {

  color: var(--muted);

  margin: 0 0 1.25rem;

  font-size: 1.05rem;

  line-height: 1.6;

}



.hero-shot {

  width: 100%;

  max-height: min(280px, 40vw);

  object-fit: cover;

  border-radius: var(--radius);

  margin: 1rem 0;

  border: 1px solid var(--line);

}



.grid-two {

  display: grid;

  gap: 1.25rem;

}

@media (min-width: 640px) {

  .grid-two {

    grid-template-columns: 1fr 1fr;

  }

}



/* Accent link */

.link-sun {

  color: var(--sky);

  font-weight: 700;

  text-decoration: none;

  border-bottom: 2px solid rgba(255, 159, 28, 0.45);

}

.link-sun:hover {

  color: var(--sun);

  border-bottom-color: var(--sun);

}



/* Pills / tags */

.tag {

  display: inline-block;

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  padding: 0.2rem 0.55rem;

  border-radius: 999px;

  background: rgba(201, 244, 14, 0.35);

  color: var(--accent-text);

  margin-right: 0.4rem;

  margin-bottom: 0.4rem;

}



/* Callout instead of “terminal block” */

.cmd {

  margin: 0.75rem 0;

  padding: 1rem 1.1rem;

  background: linear-gradient(135deg, rgba(13, 126, 168, 0.07), rgba(255, 159, 28, 0.08));

  border-radius: var(--radius);

  border-left: 4px solid var(--sky);

  font-size: 0.95rem;

  color: var(--ink);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);

}



/* Card grid for hub links */

.hub-cards {

  display: grid;

  gap: 1rem;

  margin-top: 1.5rem;

}

@media (min-width: 640px) {

  .hub-cards {

    grid-template-columns: 1fr 1fr;

  }

}



.hub-card {

  display: block;

  padding: 1.15rem 1.25rem;

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  text-decoration: none;

  color: inherit;

  box-shadow: var(--shadow-sm);

  transition: transform 0.18s, box-shadow 0.18s;

}

.hub-card:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow);

}

.hub-card strong {

  display: block;

  font-size: 1.05rem;

  margin-bottom: 0.35rem;

  color: var(--ink);

}

.hub-card span {

  font-size: 0.92rem;

  color: var(--muted);

}



/* Tabs — segmented control */

.tablist {

  display: inline-flex;

  flex-wrap: wrap;

  gap: 0.35rem;

  margin: 0 0 1.25rem;

  padding: 0.35rem;

  list-style: none;

  background: rgba(255, 255, 255, 0.7);

  border: 1px solid var(--line);

  border-radius: 999px;

}



.tablist button {

  font-family: var(--font);

  font-size: 0.88rem;

  font-weight: 600;

  padding: 0.5rem 1.15rem;

  border: none;

  background: transparent;

  color: var(--muted);

  cursor: pointer;

  border-radius: 999px;

  transition: background 0.15s, color 0.15s;

}

.tablist button:hover {

  color: var(--ink);

  background: rgba(255, 255, 255, 0.9);

}

.tablist button.is-active {

  color: var(--ink);

  background: var(--surface);

  box-shadow: 0 2px 12px rgba(19, 42, 58, 0.08);

}



.prose p {

  margin: 0 0 1rem;

}



/* Footer */

.foot {

  margin-top: 3rem;

  padding-top: 1.5rem;

  border-top: 1px solid var(--line);

  font-size: 0.88rem;

  color: var(--muted);

}



.foot > p:first-of-type {

  font-weight: 700;

  color: var(--ink);

  margin-bottom: 0.35rem;

}



.foot-legal {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

  margin: 0.85rem 0;

}



.foot-legal a {

  color: var(--sky);

  font-weight: 600;

  text-decoration: none;

  padding: 0.15rem 0;

  border-bottom: 1px solid transparent;

}



.foot-legal a:hover,

.foot-legal a:focus-visible {

  border-bottom-color: var(--sun);

  color: var(--ink);

}



.legal-scan section {

  margin-top: 1.5rem;

  padding-top: 1rem;

  border-top: 1px solid var(--line);

}



.doc-page code {

  font-size: 0.88em;

  padding: 0.15rem 0.4rem;

  background: rgba(13, 126, 168, 0.1);

  border-radius: 0.3rem;

  color: var(--ink);

}



/* Cookie strip */

@keyframes cookie-banner-enter {

  from {

    transform: translate3d(0, 100%, 0);

    opacity: 0;

  }

  to {

    transform: translate3d(0, 0, 0);

    opacity: 1;

  }

}



.cookie-banner {

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  z-index: 9000;

  background: var(--surface);

  border-top: 1px solid var(--line);

  padding: 1rem 1.1rem;

  box-shadow: 0 -12px 40px rgba(19, 42, 58, 0.12);

}



#cookie-consent:not([hidden]) {

  animation: cookie-banner-enter 0.44s cubic-bezier(0.22, 1, 0.36, 1) both;

}



.cookie-banner__inner {

  max-width: 68rem;

  margin: 0 auto;

}

.cookie-banner__title {

  font-family: var(--font);

  font-size: 1.05rem;

  margin: 0 0 0.4rem;

  font-weight: 800;

  color: var(--ink);

}

.cookie-banner p {

  margin: 0 0 0.75rem;

  font-size: 0.92rem;

  color: var(--muted);

}

.cookie-banner__actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.55rem;

}

.cb-btn {

  font-family: var(--font);

  font-size: 0.88rem;

  font-weight: 600;

  padding: 0.55rem 1.1rem;

  border: 1px solid var(--line);

  background: var(--bg);

  color: var(--ink);

  cursor: pointer;

  border-radius: 999px;

  transition: background 0.15s, border-color 0.15s;

}

.cb-btn:hover {

  border-color: rgba(19, 42, 58, 0.22);

}

.cb-btn--primary {

  background: var(--ink);

  color: var(--surface);

  border-color: var(--ink);

}

.cb-btn--primary:hover {

  filter: brightness(1.08);

}



/* Remove legacy terminal prompt if any remains */

.prompt {

  display: none;

}