/* Dark variant: deep blue-black, ivory text, one pale "atmosphere" blue accent.
   Loaded after styles.css; remove the <link> to go back to the light site. */
:root {
  --black: #ecebe7;   /* text */
  --white: #0b0c10;   /* background */
  --grey: #9a9ca5;
  --line: #1e2028;
  --soft: #12141a;
  --accent: #a9c1ff;
  --accent-soft: rgb(169 193 255 / 14%);
  --card: linear-gradient(180deg, #15171e 0%, #0f1116 100%);
}

body {
  background:
    radial-gradient(1200px 700px at 50% -200px, rgb(110 140 255 / 10%), transparent 70%),
    var(--white);
  background-attachment: fixed;
}
::selection { background: rgb(169 193 255 / 35%); color: #fff; }

.site-header {
  background: rgb(11 12 16 / 72%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgb(255 255 255 / 6%);
}
.nav a:hover { color: #fff; }

/* Headline emphasis: ivory fading into the atmosphere blue */
h1 em, .statement em {
  background: linear-gradient(90deg, #fff 0%, var(--accent) 70%);
  -webkit-background-clip: text; /* stylelint-disable-line property-no-vendor-prefix -- Safari */
  background-clip: text;
  color: transparent;
}
.eyebrow::before { box-shadow: 0 0 12px rgb(169 193 255 / 80%); border-radius: 50%; }
.lead { color: #a7a9b2; }

.btn {
  background: var(--black);
  color: #0b0c10;
  border-radius: 999px;
  padding: 14px 28px;
  box-shadow: 0 0 0 rgb(169 193 255 / 0%);
  transition: background 0.2s, box-shadow 0.3s, transform 0.2s;
}

.btn:hover {
  background: #fff;
  box-shadow: 0 0 32px rgb(169 193 255 / 35%);
  transform: translateY(-1px);
}

.case-cta { border-bottom-color: var(--accent); }
.case-cta:hover { color: var(--accent); }

/* Bands: a soft gradient instead of a flat grey block */
section { border-top-color: var(--line); }

.dark {
  background: linear-gradient(180deg, #11131a 0%, #0b0c10 100%);
  color: var(--black);
  border-top: 1px solid var(--line);
}
.dark .section-head .statement { color: var(--black); }
.dark .label, .dark .section-head p, .dark .cell p { color: var(--grey); }
.dark .grid { border-top-color: rgb(255 255 255 / 25%); }
.dark .cell + .cell { border-left-color: var(--line); }
.grid { border-top-color: rgb(255 255 255 / 25%); }

/* Cards: depth, a hairline border, a glow on hover */
.sector, .work-card, .product {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.sector:hover, .work-card:hover {
  background: var(--card);
  color: var(--black);
  border-color: rgb(169 193 255 / 45%);
  box-shadow: 0 10px 40px rgb(0 0 0 / 50%), 0 0 0 1px rgb(169 193 255 / 15%), 0 0 40px var(--accent-soft);
  transform: translateY(-3px);
}
.sector:hover p, .work-card:hover p, .work-card:hover .tag { color: var(--grey); }
.sector:hover .arrow { color: var(--accent); }

.case-head .tag {
  border-color: rgb(169 193 255 / 40%);
  color: var(--accent);
  border-radius: 999px;
}
.case-body { border-top-color: rgb(255 255 255 / 25%); }

/* Form */
input, textarea, select {
  background: #0f1116;
  border-color: #262933;
  border-radius: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.page p, .page li { color: #c4c6cc; }

.logos img { filter: invert(1) grayscale(1); opacity: 0.55; transition: opacity 0.3s, filter 0.3s; }
.logos li:hover img { opacity: 0.95; }

/* The rising world, tinted by its atmosphere */
.world {
  background: radial-gradient(circle at 50% 0%, #171a24 0%, #0e1016 18%, #0b0c10 40%);
  box-shadow:
    0 -1px 0 rgb(225 233 255 / 95%),
    0 -6px 18px rgb(169 193 255 / 45%),
    0 -40px 120px rgb(120 150 255 / 18%),
    inset 0 2px 8px rgb(169 193 255 / 45%);
}

.dawn {
  background: radial-gradient(ellipse 50% 60% at 50% 100%, rgb(190 210 255 / 26%), rgb(120 150 255 / 8%) 55%, transparent 75%);
}