/* Oxygen Pack — shared styles. Palette and type per brand guidelines v1.0. */

/* ---------- Fonts ----------
   Self-hosted from the brand asset library (02 Color and Type / Fonts),
   subsetted to Latin + punctuation and converted to woff2.

   These were previously loaded from Google Fonts. They are served from our own
   domain now so that no third party sees visitor traffic, the pages render
   without an external dependency, and there is no cross-origin subresource to
   integrity-check. Do not swap this back to a CDN link.

   font-display: swap — text paints immediately in the fallback face and
   re-renders when the brand font arrives, rather than showing nothing.
*/

@font-face {
  font-family: "Fira Sans";
  src: url("/assets/fonts/firasans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/assets/fonts/firasans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/assets/fonts/firasans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/assets/fonts/firasans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("/assets/fonts/merriweather-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --op-blue:   #0097C8;
  --op-orange: #F26723;
  --op-green:  #66FF99;
  --op-black:  #101418;
  --op-ink:    #1D1D1F;
  --op-gray:   #6E6E73;

  --bg: var(--op-black);
  --bg-soft: #161b21;
  --card: #171d24;
  --border: #2a323b;
  --text: #ffffff;
  --muted: #a7adb4;
  --ring: rgba(0, 151, 200, 0.35);
}

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

body {
  margin: 0;
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 720px; }

a { color: var(--op-blue); }

/* Skip link for keyboard and screen reader users */
.skip {
  position: absolute; left: -9999px;
  background: var(--op-orange); color: #fff; padding: 10px 16px;
  border-radius: 8px; text-decoration: none; font-weight: 600;
}
.skip:focus { left: 24px; top: 16px; z-index: 100; }

/* ---------- Header / nav ---------- */

header.site {
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
  background: rgba(16, 20, 24, .88);
  backdrop-filter: saturate(140%) blur(8px);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 16px 0;
}
.brand img { height: 34px; display: block; }
.nav-links {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
.nav-links a {
  display: block; color: var(--text); text-decoration: none;
  font-size: 15px; font-weight: 500;
  padding: 8px 12px; border-radius: 8px;
  transition: background .2s, color .2s;
}
.nav-links a:hover { background: rgba(0,151,200,.10); color: var(--op-blue); }
.nav-links a[aria-current="page"] { color: var(--op-blue); font-weight: 600; }
.nav-links a.nav-cta {
  background: var(--op-orange); color: #fff; font-weight: 600; margin-left: 6px;
}
.nav-links a.nav-cta:hover { background: var(--op-orange); filter: brightness(1.08); color: #fff; }

@media (max-width: 900px) {
  .nav-inner { flex-direction: column; align-items: flex-start; }
  .nav-links { gap: 2px; }
  .nav-links a { padding: 8px 10px; font-size: 14px; }
}

/* ---------- Type ---------- */

h1 {
  font-size: clamp(32px, 4.6vw, 50px); line-height: 1.1;
  margin: 0 0 18px; letter-spacing: -0.02em; font-weight: 700;
}
h2 {
  font-size: clamp(24px, 3vw, 32px); line-height: 1.2;
  margin: 0 0 16px; letter-spacing: -0.01em; font-weight: 600;
}
h3 { font-size: 19px; font-weight: 600; margin: 0 0 8px; }
.accent { color: var(--op-blue); }

.eyebrow {
  display: inline-block;
  font-size: 13px; color: var(--op-blue); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 14px;
}
.lead {
  font-family: "Merriweather", Georgia, serif;
  font-size: 18px; color: var(--muted); margin: 0 0 28px; max-width: 54ch;
}
p { max-width: 68ch; }
.muted { color: var(--muted); }

/* ---------- Sections ---------- */

.hero { padding: 72px 0 48px; }
section.band { padding: 56px 0; border-top: 1px solid var(--border); }
.section-head { margin-bottom: 32px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block; cursor: pointer; text-decoration: none;
  background: var(--op-orange); color: #ffffff; font-weight: 700; border: 0;
  padding: 14px 24px; border-radius: 12px; font-size: 16px;
  font-family: inherit;
  transition: transform .12s ease, filter .2s;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); color: #fff; }
.btn.ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.btn.ghost:hover { border-color: var(--op-blue); color: var(--op-blue); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ---------- Cards ---------- */

.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: linear-gradient(180deg, var(--card), var(--bg-soft));
  border: 1px solid var(--border); border-radius: 16px;
  padding: 26px;
}
a.card { text-decoration: none; color: var(--text); display: block; transition: border-color .2s, transform .12s; }
a.card:hover { border-color: var(--op-blue); transform: translateY(-2px); }
.card p { color: var(--muted); font-size: 15px; margin: 0; }
.card .tag {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--op-blue);
  background: rgba(0,151,200,.10); border: 1px solid var(--border);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.card .tag.signal { color: var(--op-green); background: rgba(102,255,153,.10); }
.card .more { display: inline-block; margin-top: 14px; color: var(--op-blue); font-weight: 600; font-size: 15px; }

@media (max-width: 860px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .hero { padding: 48px 0 32px; }
}

/* ---------- Value / feature list ---------- */

.stack { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.stack li { display: flex; gap: 14px; align-items: flex-start; }
.stack .ic {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  background: rgba(0,151,200,.12); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 17px;
}
.stack b { display: block; }
.stack span { color: var(--muted); font-size: 15px; }

/* ---------- FAQ (feeds AEO / answer engines) ---------- */

.faq { display: grid; gap: 18px; }
.faq .q { font-weight: 600; margin: 0 0 6px; font-size: 17px; }
.faq .a { color: var(--muted); margin: 0; }

/* ---------- Writings ---------- */

.post-list { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
.post-list li { border-top: 1px solid var(--border); }
.post-list li:last-child { border-bottom: 1px solid var(--border); }
.post-list a {
  display: block; padding: 22px 4px; text-decoration: none; color: var(--text);
  transition: background .2s, padding-left .2s;
}
.post-list a:hover { background: rgba(0,151,200,.05); padding-left: 12px; }
.post-list .meta { color: var(--op-gray); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.post-list h3 { margin: 6px 0 6px; font-size: 21px; }
.post-list p { color: var(--muted); font-size: 15px; margin: 0; }

article.post { padding: 56px 0; }
article.post h2 { margin-top: 40px; }
article.post p { font-size: 17px; margin: 0 0 20px; }
article.post blockquote {
  font-family: "Merriweather", Georgia, serif;
  border-left: 3px solid var(--op-blue);
  margin: 28px 0; padding: 4px 0 4px 20px; color: var(--muted);
}
.post-meta { color: var(--op-gray); font-size: 14px; margin-bottom: 8px; }

.breadcrumb { font-size: 14px; color: var(--muted); padding: 24px 0 0; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--op-blue); }

/* ---------- Contact ---------- */

.email-big {
  font-size: clamp(24px, 4vw, 38px); font-weight: 700;
  color: var(--op-blue); text-decoration: none; word-break: break-word;
  display: inline-block; margin: 8px 0 20px;
}
.email-big:hover { text-decoration: underline; }

/* ---------- Footer ---------- */

footer.site {
  border-top: 1px solid var(--border);
  padding: 48px 0 56px; margin-top: 24px;
  color: var(--muted); font-size: 14px;
}
.foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; margin-bottom: 36px; }
footer.site h4 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text); margin: 0 0 12px; font-weight: 600;
}
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--op-blue); }
.foot-tagline { color: var(--text); font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.foot-legal { border-top: 1px solid var(--border); padding-top: 24px; }

@media (max-width: 860px) {
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
}