/* ==========================================================================
   Direction 01 — Industrial Cyan
   Deep navy ground, electric cyan accent, diagonal section cuts, oversized
   numerals. Heavy engineering with energy.
   ========================================================================== */
:root {
  --brand: #1769e0;
  --brand-600: #1257c4;
  --brand-700: #0d3f96;
  --brand-900: #07142e;
  --accent: #00d4ff;
  --accent-2: #66e6ff;

  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #e6edf7;
  --border: #ccd9ea;

  --text: #07142e;
  --text-dim: #5b6b83;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 10px;

  --font-display: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-hero: clamp(2.35rem, 1.1rem + 4.6vw, 4.6rem);
  --lh-display: 1.02;
  --tracking-display: -0.03em;
  --display-transform: uppercase;

  --btn-transform: uppercase;
  --btn-tracking: .06em;

  --shadow: 0 10px 30px rgba(7, 20, 46, .1);
  --shadow-lg: 0 28px 70px rgba(7, 20, 46, .2);
}

body { background: var(--bg); }

/* --- dark hero with diagonal cut --------------------------------------- */
.hero {
  background:
    radial-gradient(900px 500px at 78% 8%, rgba(0, 212, 255, .24), transparent 62%),
    linear-gradient(160deg, #07142e 0%, #0b2450 58%, #0d3f96 100%);
  color: #fff;
  padding-bottom: clamp(5rem, 3rem + 8vw, 9rem);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4.5vw), 0 100%);
}
.hero .eyebrow { color: var(--accent); }
.hero .lede { color: rgba(255, 255, 255, .74); }
.hero-stats { border-top-color: rgba(255, 255, 255, .18); }
.hero-stats .stat-num { color: var(--accent); }
.hero-stats .stat-label { color: rgba(255, 255, 255, .62); }
.hero .ph { background-color: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .26); }
.hero .ph::after { color: rgba(255, 255, 255, .6); }

/* hairline grid behind the hero media, like a plant drawing */
.hero-media::before {
  content: ""; position: absolute; inset: -12% -8%;
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(closest-side, #000, transparent);
  pointer-events: none;
}

/* --- header ------------------------------------------------------------- */
.site-header {
  background: rgba(7, 20, 46, .92);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.site-header.is-stuck { background: rgba(7, 20, 46, .97); border-bottom-color: rgba(255, 255, 255, .14); }
.site-header .nav a { color: rgba(255, 255, 255, .66); }
.site-header .nav a:hover, .site-header .nav a[aria-current="page"] { color: #fff; }
.site-header .icon-btn { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .2); color: #fff; }
.site-header .icon-btn:hover { border-color: var(--accent); }
.brand-mark { background: var(--accent); color: #07142e; border-radius: 3px; }
.brand span small { color: rgba(255, 255, 255, .5); }

/* --- squared, technical cards ------------------------------------------ */
.eyebrow { color: var(--brand); }
.card, .tile, .p-card, .project, .quote {
  border-radius: var(--radius);
  border-color: var(--border);
}
.card { border-left: 3px solid var(--border); }
.card:hover { border-left-color: var(--accent); }
.card-icon { border-radius: 3px; background: var(--brand-900); color: var(--accent); }
.card-link { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }

.tile { background: var(--surface); }
.tile .card-icon { background: var(--surface-2); color: var(--brand); }
.tile:hover .card-icon { background: var(--brand-900); color: var(--accent); }

/* oversized stat numerals on the dark band */
.section--brand { background: linear-gradient(140deg, #07142e, #0b2450); }
.section--brand .stat-num { font-size: clamp(2.6rem, 1.6rem + 4vw, 4.6rem); }

/* --- diagonal cut between light sections ------------------------------- */
.section--cut { clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%); margin-top: -3vw; padding-top: calc(var(--section-py) + 3vw); }

.teaser { border-radius: var(--radius-lg); background: linear-gradient(115deg, #07142e 10%, #0d3f96 100%); }
.cta-band {
  background: var(--accent);
  color: #07142e;
  border-radius: var(--radius-lg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 2.5rem 100%);
  padding-left: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.cta-band .btn { --btn-bg: #07142e; --btn-bd: #07142e; }

.site-footer { background: #07142e; }
.p-badge--stock { background: var(--accent); color: #07142e; }
.p-media { background: var(--brand-900); }
.p-media svg { color: var(--accent); }
.cfg-tab[aria-selected="true"] { background: var(--brand-900); color: var(--accent); }
.stage-viz { background: linear-gradient(160deg, #07142e, #0b2450); }
.stage-viz svg { color: var(--accent-2); }
.viz-tag { color: rgba(255, 255, 255, .55); }