/* EGIL viewer-inspired public web layer: deep navy shell, technical paper field, blue control accents. */
:root {
  --viewer-navy: #10233a;
  --viewer-navy-deep: #0c1d31;
  --viewer-blue: #3274b9;
  --viewer-ice: #a9c8dc;
  --viewer-paper: #e8eff4;
  --viewer-ink: #1b3552;
  --viewer-rule: #42627f;
}

body.viewer-site {
  background: var(--viewer-paper);
  color: #3c566f;
  line-height: 1.7;
}

.viewer-site .field {
  background-image: linear-gradient(to right, rgba(66,98,127,.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(66,98,127,.07) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 100% 64% at 50% 0%, #000 0%, transparent 83%);
  -webkit-mask-image: radial-gradient(ellipse 100% 64% at 50% 0%, #000 0%, transparent 83%);
}

.viewer-site header.nav {
  height: 84px;
  background: rgba(12,29,49,.97);
  border-bottom: 1px solid #35516d;
  backdrop-filter: blur(16px);
}
.viewer-site .nav-inner { height: 84px; max-width: 1320px; }
.viewer-site .brand-logo { width: clamp(122px, 11vw, 158px); }
.viewer-site .brand-tag { color: #9bb4cf; letter-spacing: .15em; }
.viewer-site nav.links { gap: clamp(17px,2vw,30px); }
.viewer-site nav.links a { color: #cbd9e5; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.viewer-site nav.links a:hover, .viewer-site nav.links a:focus-visible, .viewer-site nav.links a[aria-current="page"] { color: #fff; }
.viewer-site nav.links a[aria-current="page"]::after { background: var(--viewer-ice); height: 2px; }
.viewer-site .nav-cta { border-color: #4c6681; border-radius: 3px; padding: 10px 12px; }
.viewer-site .nav-cta:hover, .viewer-site .nav-cta:focus-visible { background: #244d7a; border-color: #244d7a; }

.viewer-site .hero, .viewer-site .page-hero { position: relative; overflow: hidden; }
.viewer-site .hero { padding-top: 170px; padding-bottom: 104px; }
.viewer-site .page-hero { padding-top: 166px; padding-bottom: 72px; }
.viewer-site .hero::before, .viewer-site .page-hero::before {
  content: ""; position: absolute; z-index: -1; width: min(900px,75vw); height: 560px; right: -12vw; top: 90px;
  background: radial-gradient(ellipse at center, rgba(50,116,185,.18), transparent 67%);
}
.viewer-site .hero::after, .viewer-site .page-hero::after {
  content: ""; position: absolute; z-index: -1; right: 3vw; top: 148px; width: min(560px,48vw); height: 330px;
  background-image: linear-gradient(rgba(66,98,127,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(66,98,127,.14) 1px,transparent 1px);
  background-size: 36px 36px; transform: perspective(660px) rotateX(57deg) rotateZ(-8deg); opacity: .55;
}
.viewer-site .hero-split { gap: clamp(34px,5vw,86px); }
/* The systems graphic is a complete composition, not a cropped decorative bleed. */
.viewer-site .hero-figure svg,
.viewer-site .hero-figure img { width: 100%; max-width: 100%; transform: none; }
.viewer-site .eyebrow, .viewer-site .kicker, .viewer-site .asset-meta { color: #315a80; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .16em; }
.viewer-site .eyebrow::before, .viewer-site .eyebrow::after, .viewer-site .kicker::before { background: #7894ac; }
.viewer-site h1.display, .viewer-site .page-hero h1, .viewer-site h2.headline, .viewer-site .logic h2, .viewer-site .tile h3 { color: var(--viewer-ink); }
.viewer-site h1.display { font-size: clamp(38px,4.3vw,60px); max-width: 11.5ch; }
.viewer-site .tint-blue { color: #2267a6; }
.viewer-site .hero .sub, .viewer-site .page-hero .sub, .viewer-site .lede { color: #4f687f; }
.viewer-site .hero .support { color: #668096; }
.viewer-site .btn { border-radius: 3px; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; padding: 14px 18px; }
.viewer-site .btn-primary { background: #244d7a; border-color: #244d7a; }
.viewer-site .btn-primary:hover, .viewer-site .btn-primary:focus-visible { background: #3274b9; border-color: #3274b9; }
.viewer-site .btn-ghost { color: var(--viewer-ink); border-color: #91a9bb; background: rgba(255,255,255,.45); }
.viewer-site .btn-ghost:hover, .viewer-site .btn-ghost:focus-visible { border-color: #3274b9; background: #fff; }

.viewer-site section.block { padding-top: 94px; padding-bottom: 94px; }
.viewer-site section.block + section.block { border-color: rgba(66,98,127,.20); }
.viewer-site .meridian { background: linear-gradient(to bottom,transparent,rgba(50,116,185,.7) 30%,rgba(50,116,185,.7) 70%,transparent); }
.viewer-site .meridian::after { background: #3274b9; box-shadow: 0 0 0 4px rgba(50,116,185,.13); }
.viewer-site .line-list { border-color: rgba(66,98,127,.30); }
.viewer-site .line-list li { color: #4b647b; border-color: rgba(66,98,127,.24); }
.viewer-site .line-list li strong { color: var(--viewer-ink); }
.viewer-site .line-list li::before { border-color: #3274b9; }

.viewer-site .tile, .viewer-site .insight-card { background: rgba(248,251,253,.78); border: 1px solid #b5c6d4; border-radius: 3px; box-shadow: 0 12px 28px rgba(30,64,91,.06); }
.viewer-site .tile { padding: 32px 30px; }
.viewer-site .tile:hover { border-color: #3274b9; box-shadow: 0 16px 36px rgba(30,64,91,.12); }
.viewer-site .tile .t-rule { background: #3274b9; }
.viewer-site .tile p, .viewer-site .insight-card p { color: #536d84; }
.viewer-site .tile h3, .viewer-site .insight-card h3 { color: var(--viewer-ink); }

.viewer-site .band { background: var(--viewer-navy); border: 0; position: relative; overflow: hidden; }
.viewer-site .band::before { content:""; position:absolute; inset:0; background-image: linear-gradient(to right,rgba(169,200,220,.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(169,200,220,.06) 1px,transparent 1px); background-size: 86px 86px; mask-image: radial-gradient(ellipse at center,black,transparent 75%); }
.viewer-site .band .quote, .viewer-site .band .lede { position:relative; color:#f4f8fb; }
.viewer-site .band .quote em { color: var(--viewer-ice); }
.viewer-site .band .attrib { color: #a8bbce; }

.viewer-site .logic { border-color: rgba(66,98,127,.24); }
/* Keep the logic rail as a precise navigation cue, never as a decorative block. */
.viewer-site .logic .rail { background: transparent; }
.viewer-site .logic .rail::before {
  left: 50%; width: 1px;
  background: linear-gradient(to bottom, rgba(50,116,185,.72), rgba(66,98,127,.18));
}
.viewer-site .logic .node {
  width: 11px; height: 11px;
  background: #3274b9;
  border-color: #d9e9f4;
  box-shadow: 0 0 0 4px rgba(50,116,185,.14);
}
.viewer-site .logic p, .viewer-site .figure-caption { color: #536d84; }
.viewer-site .logic h2 { font-size: clamp(29px,3.2vw,39px); line-height: 1.15; }
/* Platform stack: light-field diagram uses navy hierarchy, never inherited white. */
.viewer-site .stack-rail::before { background: linear-gradient(to bottom, rgba(50,116,185,.72), rgba(66,98,127,.16)); }
.viewer-site .stack-rail ol { border-top-color: #42627f; }
.viewer-site .s-row { border-bottom-color: rgba(66,98,127,.30); }
.viewer-site .s-row h3 { color: var(--viewer-ink); }
.viewer-site .s-desc { color: #526c83; }
.viewer-site .s-row.is-first, .viewer-site .s-row.is-last { background: linear-gradient(90deg, rgba(50,116,185,.12), transparent 72%); }
.viewer-site .s-row.is-first .s-num, .viewer-site .s-row.is-last .s-num { color: #2267a6; }
.viewer-site .s-row.is-last { border-bottom-color: rgba(66,98,127,.38); }
.viewer-site .s-row.is-last .s-desc { color: #315a80; }
/* Inline technical figures retain their hierarchy while using the EGIL viewer palette. */
.viewer-site .figure-native [fill="#0D0E10"],
.viewer-site .figure-native [fill="#0d0e10"],
.viewer-site .figure-native [fill="#0E1013"],
.viewer-site .figure-native [fill="#0F1214"],
.viewer-site .figure-native [fill="#0F1820"],
.viewer-site .figure-native [fill="#0F1B24"],
.viewer-site .figure-native [fill="#10222F"],
.viewer-site .figure-native [fill="#121316"] { fill: #10233a; }
.viewer-site .figure-native [fill="#14344A"],
.viewer-site .figure-native [fill="#1D1E21"] { fill: #173b61; }
.viewer-site .figure-native [stroke="#1A1B1E"],
.viewer-site .figure-native [stroke="#1A2430"],
.viewer-site .figure-native [stroke="#26272B"],
.viewer-site .figure-native [stroke="#2A2B2F"],
.viewer-site .figure-native [stroke="#2F4A5E"] { stroke: #42627f; }
.viewer-site .figure-native [fill="#7A8088"] { fill: #607a91; }
/* The market-shift figure sits on a light field, so its callout must not inherit white. */
.viewer-site .logic-figure text[fill="#FFFFFF"] { fill: #1b3552; }
/* Insights live on the technical paper field: never inherit legacy white-on-dark copy. */
.viewer-site .insight-entry h3 { color: var(--viewer-ink); }
.viewer-site .insight-entry p { color: #4f687f; }
.viewer-site .insight-entry .e-label { color: #315a80; }
.viewer-site .insight-entry .e-label::before { background: #7894ac; }
.viewer-site .insight-entry .figure-caption { color: #536d84; }
.viewer-site .insight-entry svg text[fill="#FFFFFF"] { fill: #1b3552; }
.viewer-site .insight-entry svg text[fill="#B1B6BD"] { fill: #4f687f; }
.viewer-site .insight-entry svg text[fill="#7A8088"] { fill: #607a91; }
.viewer-site .insight-entry svg [fill="#121316"],
.viewer-site .insight-entry svg [fill="#10222F"] { fill: #dce8f1; }
.viewer-site .insight-entry svg [fill="#14344A"] { fill: #c3d8e8; }

/* Private viewer previews: an invitation to a guided engineering conversation, not a public technical claim. */
.viewer-showcase { margin: 8px 0 72px; }
.viewer-showcase__intro { max-width: 65ch; margin: 0 auto 32px; text-align: center; color: #4f687f; }
.viewer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.viewer-card { background: rgba(248,251,253,.88); border: 1px solid #a9c1d3; box-shadow: 0 16px 36px rgba(18,48,75,.10); padding: 14px; }
.viewer-window { min-height: 290px; position: relative; overflow: hidden; background: linear-gradient(145deg,#0c1d31,#173b61 72%,#214f7d); border: 1px solid #35516d; }
.viewer-window::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(169,200,220,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(169,200,220,.10) 1px,transparent 1px); background-size: 36px 36px; opacity:.45; }
.viewer-window__bar { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid rgba(169,200,220,.25); color:#dceaf4; font:600 10px ui-monospace,monospace; letter-spacing:.15em; text-transform:uppercase; }
.viewer-window__status { color:#9ed0f3; }
.viewer-window__image { display:block; position:absolute; inset:35px 0 0; width:100%; height:calc(100% - 35px); object-fit:cover; object-position:center; }
.viewer-card:first-child .viewer-window__image { object-position: 44% center; }
.viewer-module { position:absolute; z-index:1; bottom:48px; height:86px; border:1px solid #a9c8dc; background:linear-gradient(145deg,#e9f0f5,#aebfcd); box-shadow: 0 15px 22px rgba(0,0,0,.28); }
.viewer-module::before { content:""; position:absolute; inset:12px 10px; background:repeating-linear-gradient(90deg,rgba(27,53,82,.60) 0 2px,transparent 2px 10px); opacity:.55; }
.viewer-module--byog { left:12%; width:55%; transform:skewY(-4deg); }
.viewer-module--byog::after { content:"EGIL | MODULAR IT"; position:absolute; left:12px; bottom:10px; color:#173b61; font:700 10px 'Eudoxus Sans',sans-serif; letter-spacing:.08em; }
.viewer-module--power { right:11%; width:34%; height:72px; background:linear-gradient(145deg,#2e6da7,#123b60); transform:translateY(-10px) skewY(-4deg); }
.viewer-module--power::after { content:"POWER"; position:absolute; left:12px; bottom:10px; color:#e6f1f8; font:700 10px 'Eudoxus Sans',sans-serif; letter-spacing:.12em; }
.viewer-module--onprem { left:13%; width:38%; height:100px; transform:skewY(-4deg); }
.viewer-module--onprem + .viewer-module--power { right:13%; width:36%; height:100px; transform:skewY(-4deg); }
.viewer-orbit { position:absolute; z-index:2; right:18px; bottom:18px; width:34px; height:34px; border:1px solid #a9c8dc; border-radius:50%; }
.viewer-orbit::before,.viewer-orbit::after { content:""; position:absolute; inset:6px; border:1px solid #a9c8dc; border-radius:50%; opacity:.7; }
.viewer-orbit::after { inset:14px -4px; }
.viewer-card__body { padding:20px 8px 6px; }
.viewer-card__eyebrow { color:#315a80; font:600 10px ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase; }
.viewer-card h3 { color:var(--viewer-ink); font:700 clamp(22px,2.5vw,29px) 'Eudoxus Sans',sans-serif; line-height:1.15; margin:8px 0; }
.viewer-card p { color:#4f687f; font-size:15px; line-height:1.6; min-height:72px; }
.viewer-card .btn { margin-top:16px; }
@media(max-width:760px){ .viewer-grid{grid-template-columns:1fr}.viewer-window{min-height:250px}.viewer-card p{min-height:0;} }
.viewer-site .impact-band {
  margin-top: 44px;
  padding: clamp(34px,5vw,60px);
  border: 1px solid #35516d;
  background: linear-gradient(135deg, #10233a 0%, #173b61 100%);
  box-shadow: 0 16px 38px rgba(18,48,75,.14);
}
.viewer-site .impact-band .kicker { color: #a9c8dc; font-size: 12px; }
.viewer-site .impact-band h3 { color: #fff; font-size: clamp(30px,3.6vw,43px); }
.viewer-site .impact-band p { color: #d4e1ec; font-size: 17px; line-height: 1.72; }
.viewer-site .founder-byline { border-color: rgba(169,200,220,.32); }
.viewer-site .founder-byline__name { color: #fff; }
.viewer-site .founder-byline__role { color: #a9c8dc; }
.viewer-site .founder-byline__note { color: #d4e1ec; }
.viewer-site .founder-byline__quote {
  margin: 14px 0 0;
  max-width: 60ch;
  padding-left: 14px;
  border-left: 2px solid #4b9fe6;
  color: #f1f7fb;
  font-family: var(--display);
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 600;
  line-height: 1.48;
}
.viewer-site .impact-signal {
  color: #fff;
  border-top-color: rgba(169,200,220,.46);
  border-bottom-color: rgba(169,200,220,.20);
  background: linear-gradient(90deg, rgba(169,200,220,.14), rgba(169,200,220,0));
}
.viewer-site .stack-rail li, .viewer-site .inquiry, .viewer-site .contact-aside { background: rgba(255,255,255,.55); border-color: #b5c6d4; }
.viewer-site .inquiry-types { border-top-color: rgba(66,98,127,.45); }
.viewer-site .inquiry-types div { color:#4f687f; border-bottom-color: rgba(66,98,127,.45); }
.viewer-site form.inquiry label, .viewer-site form.inquiry .form-note { color:#536d84; }
.viewer-site form.inquiry input, .viewer-site form.inquiry select, .viewer-site form.inquiry textarea { background:#f8fbfd; border-color:#9fb7c9; color:#1b3552; }

.viewer-site .final-cta { background: linear-gradient(135deg,#10233a,#173b61); position:relative; padding-top: 104px; padding-bottom: 104px; }
.viewer-site .why-egil-cta { padding-top: 56px; }
.viewer-site .final-cta h2 { color: #fff; }
.viewer-site .final-cta p { color: #c6d9e9; }
.viewer-site footer { background: #0c1d31; border-color: #35516d; }
.viewer-site footer, .viewer-site footer a { color: #b8c7d7; }

@media (max-width: 960px) {
  .viewer-site header.nav, .viewer-site .nav-inner { height: 76px; }
  .viewer-site nav.links { top:76px; background:#0c1d31; border-color:#35516d; }
  .viewer-site .hero { padding-top: 132px; }
  .viewer-site .page-hero { padding-top: 132px; }
  .viewer-site .hero::after, .viewer-site .page-hero::after { display:none; }
}

@media (max-width: 640px) {
  .viewer-site section.block { padding-top: 48px; padding-bottom: 48px; }
  .viewer-site .final-cta { padding-top: 56px; padding-bottom: 64px; }
}
