:root {
  --bg: #f6fafc;
  --surface: #ffffff;
  --ink: #2f3e45;
  --text: #53656d;
  --muted: #7e8c92;
  --line: #dbe8ed;
  --accent: #3888b0;
  --accent-deep: #2d647f;
  --accent-mid: #8aa8b0;
  --accent-soft: #eaf4f8;
  --accent-pale: #f3f8fa;
  --dark: #606060;
  --max: 1220px;
  --radius: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 2%, rgba(63,152,189,.08), transparent 27rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }

.wrap { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, white 91%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}
.site-header::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent 0 8%, var(--accent) 32%, transparent 62%);
  opacity:.22;
}
.nav {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand { display:inline-flex; align-items:center; min-width:142px; }
.brand img { width:142px; height:auto; object-fit:contain; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: .94rem; }
.nav-links a { color: #365661; transition:.2s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.nav-actions { display:flex; gap:10px; align-items:center; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  color:var(--ink);
  font-weight: 650;
  font-size: .92rem;
  transition: .2s ease;
}
.btn:hover { transform: translateY(-1px); border-color: var(--accent-mid); box-shadow:0 8px 28px rgba(36,95,118,.08); }
.btn.primary { background: var(--accent-deep); color: white; border-color: var(--accent-deep); }
.btn.accent { background: var(--accent); color: white; border-color: var(--accent); }
.menu-btn { display:none; width:44px; height:44px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); }

.hero { padding: 104px 0 70px; min-height: 78vh; display:flex; align-items:center; position:relative; overflow:hidden; }
.hero::before {
  content:"";
  position:absolute;
  width:620px; height:620px; right:-240px; top:-270px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(63,152,189,.12), rgba(63,152,189,0) 68%);
  pointer-events:none;
}
.hero-grid { display:grid; grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr); gap:78px; align-items:center; position:relative; }
.eyebrow { font-size:.82rem; text-transform:uppercase; letter-spacing:.15em; color:var(--accent); font-weight:800; margin-bottom:18px; }
h1, h2, h3, p { margin-top:0; }
h1 { font-size: clamp(3.4rem, 8.2vw, 8rem); line-height:.88; letter-spacing:-.075em; margin-bottom:34px; max-width:970px; color:var(--accent-deep); }
.hero h1 .soft { color:var(--accent); }
.lead { font-size: clamp(1.08rem, 1.6vw, 1.35rem); color:var(--text); max-width:720px; line-height:1.55; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }

.system-visual {
  position:relative;
  min-height:500px;
  border:1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(241,249,251,.93)),
    var(--surface);
  border-radius:38px;
  overflow:hidden;
  box-shadow:0 32px 80px rgba(36,95,118,.09);
}
.system-visual::before {
  content:"";
  position:absolute; inset:-5%;
  background:
    repeating-linear-gradient(118deg, transparent 0 18px, rgba(63,152,189,.065) 18px 21px, transparent 21px 37px);
  mask-image: linear-gradient(135deg, black 15%, rgba(0,0,0,.2) 72%, transparent 100%);
}
.system-visual::after {
  content:"NU3";
  position:absolute;
  right:-18px; top:12px;
  font-size:9rem;
  font-weight:800;
  letter-spacing:-.08em;
  color:rgba(63,152,189,.055);
  line-height:1;
}
.orbit { position:absolute; left:50%; top:50%; border:1px solid rgba(63,152,189,.35); border-radius:50%; transform:translate(-50%,-50%); }
.orbit.o1 { width:290px; height:290px; }
.orbit.o2 { width:390px; height:390px; }
.orbit.o3 { width:200px; height:200px; border-color:rgba(36,95,118,.22); }
.node { position:absolute; width:12px; height:12px; background:var(--accent); border-radius:50%; box-shadow:0 0 0 7px rgba(63,152,189,.12); }
.n1 { left:24%; top:31%; }.n2 { right:20%; top:38%; }.n3 { left:42%; bottom:21%; }.n4 { right:39%; top:18%; }
.center-label { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:144px; height:144px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,var(--accent-deep),#183c49); color:white; text-align:center; font-weight:800; line-height:1.08; letter-spacing:-.03em; box-shadow:0 18px 44px rgba(36,95,118,.22); }
.visual-caption { position:absolute; left:28px; right:28px; bottom:24px; display:flex; justify-content:space-between; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; }
.visual-caption span::before { content:"●"; color:var(--accent); margin-right:7px; font-size:.62em; vertical-align:middle; }

.section { padding: 92px 0; border-top:1px solid var(--line); position:relative; }
.section-head { display:grid; grid-template-columns: .7fr 1.3fr; gap:60px; margin-bottom:52px; }
.section-kicker { color:var(--accent); font-size:.8rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
h2 { font-size:clamp(2.5rem,5vw,5.1rem); line-height:.98; letter-spacing:-.055em; color:var(--accent-deep); }
h3 { font-size:1.45rem; line-height:1.15; letter-spacing:-.035em; }
.section-head p, .large-copy { font-size:1.2rem; color:var(--text); max-width:720px; }

.pillars { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); overflow:hidden; border-radius:22px; }
.pillar { min-height:330px; padding:28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.72); display:flex; flex-direction:column; position:relative; transition:.22s ease; }
.pillar::before { content:""; position:absolute; left:0; top:0; height:4px; width:100%; background:linear-gradient(90deg,var(--accent),var(--accent-mid)); transform:scaleX(.22); transform-origin:left; transition:.22s ease; }
.pillar:hover { background:white; transform:translateY(-3px); box-shadow:0 18px 50px rgba(36,95,118,.08); z-index:2; }
.pillar:hover::before { transform:scaleX(1); }
.pillar .num { color:var(--accent); font-size:.75rem; font-weight:800; letter-spacing:.11em; }
.pillar h3 { margin-top:auto; margin-bottom:16px; font-size:1.8rem; color:var(--accent-deep); }
.pillar p { color:var(--muted); margin-bottom:26px; }
.text-link { margin-top:auto; font-size:.91rem; font-weight:750; display:inline-flex; gap:7px; align-items:center; color:var(--accent-deep); }
.text-link:hover { color:var(--accent); }

.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; min-height:300px; display:flex; flex-direction:column; position:relative; overflow:hidden; box-shadow:0 10px 34px rgba(36,95,118,.035); }
.card::after { content:""; position:absolute; width:110px; height:110px; right:-46px; top:-46px; border-radius:50%; border:22px solid rgba(63,152,189,.07); }
.card .tag { align-self:flex-start; border:1px solid var(--line); border-radius:999px; padding:6px 10px; font-size:.72rem; color:var(--muted); margin-bottom:70px; background:var(--accent-pale); }
.card h3 { font-size:1.8rem; color:var(--accent-deep); }
.card p { color:var(--muted); }
.card .text-link { margin-top:auto; }
.card.featured { background:linear-gradient(145deg,var(--accent-deep),#183b48); color:white; border-color:var(--accent-deep); }
.card.featured h3 { color:white; }
.card.featured p, .card.featured .tag { color:#d8e9ee; }
.card.featured .tag { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.08); }
.card.featured .text-link { color:#bce9f2; }
.card.featured .text-link:hover { color:white; }
.card.featured::after { border-color:rgba(255,255,255,.08); }

.metric-strip { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.38); }
.metric { padding:32px 24px; border-right:1px solid var(--line); }
.metric:last-child { border-right:none; }
.metric strong { display:block; font-size:2rem; letter-spacing:-.04em; color:var(--accent-deep); }
.metric span { color:var(--muted); font-size:.86rem; }

.timeline { border-top:1px solid var(--line); }
.timeline-row { display:grid; grid-template-columns:130px .9fr 1.5fr; gap:24px; padding:26px 0; border-bottom:1px solid var(--line); align-items:start; }
.timeline-year { color:var(--accent); font-weight:800; }
.timeline-title { font-weight:750; color:var(--accent-deep); }
.timeline-row p { color:var(--muted); margin:0; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.panel { border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:34px; position:relative; overflow:hidden; }
.panel::after { content:""; position:absolute; right:-70px; bottom:-70px; width:180px; height:180px; border-radius:50%; background:rgba(63,152,189,.055); }
.panel.dark { background:linear-gradient(145deg,var(--accent-deep),#173b48); color:white; border-color:var(--accent-deep); }
.panel.dark h2 { color:white; }
.panel.dark p { color:#d4e6eb; }
.panel p { color:var(--muted); }

.page-hero { padding:96px 0 70px; position:relative; overflow:hidden; }
.page-hero::after { content:""; position:absolute; width:410px; height:410px; border:78px solid rgba(63,152,189,.045); border-radius:50%; right:-120px; top:-160px; pointer-events:none; }
.page-hero h1 { max-width:1100px; font-size:clamp(3.5rem,7vw,7rem); }
.page-hero .lead { max-width:800px; }
.detail-grid { display:grid; grid-template-columns:280px 1fr; gap:80px; }
.side-nav { position:sticky; top:110px; align-self:start; border-top:1px solid var(--line); }
.side-nav a { display:block; padding:14px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:.9rem; }
.side-nav a:hover { color:var(--accent); }
.content-block { padding-bottom:68px; }
.content-block h2 { font-size:clamp(2.2rem,4vw,4rem); }
.content-block p { color:var(--text); max-width:800px; font-size:1.06rem; }
.feature-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:28px; }
.feature-item { padding:20px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.66); position:relative; overflow:hidden; }
.feature-item::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent-mid); }
.feature-item strong { display:block; margin-bottom:5px; color:var(--accent-deep); }
.feature-item span { color:var(--muted); font-size:.92rem; }
.feature-item.is-link { display:block; cursor:pointer; padding-right:52px; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.feature-item.is-link::after { content:"↗"; position:absolute; top:16px; right:16px; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent-deep); font-size:.85rem; transition:transform .18s ease, background .18s ease, color .18s ease; }
.feature-item.is-link:hover { background:var(--accent-soft); border-color:var(--accent); transform:translateY(-3px); box-shadow:0 18px 50px rgba(36,95,118,.12); }
.feature-item.is-link:hover::after { background:var(--accent); color:#fff; transform:translate(2px,-2px); }

.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.person { min-height:250px; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; }
.person::before { content:""; position:absolute; width:90px; height:90px; right:-32px; top:-32px; border:20px solid var(--accent-soft); border-radius:50%; }
.person .role { color:var(--accent); font-size:.82rem; font-weight:750; margin-bottom:8px; }
.person h3 { margin-bottom:5px; color:var(--accent-deep); }
.person p { color:var(--muted); margin:0; }

.contact-box { background:linear-gradient(135deg,var(--accent-soft),#f5fbfc); border:1px solid #cfe8ee; border-radius:34px; padding:54px; display:grid; grid-template-columns:1.3fr .7fr; gap:50px; position:relative; overflow:hidden; }
.contact-box::before { content:""; position:absolute; right:-42px; top:-80px; width:250px; height:250px; border-radius:50%; border:46px solid rgba(63,152,189,.09); }
.contact-box h2 { margin-bottom:16px; }
.contact-meta { display:grid; gap:18px; align-content:end; position:relative; z-index:1; }
.contact-meta div { padding-top:14px; border-top:1px solid rgba(36,95,118,.17); }
.contact-meta span { display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:#5f7881; margin-bottom:4px; }

.site-footer { padding:48px 0 28px; border-top:1px solid var(--line); background:#f2f9fb; }
.footer-grid { display:grid; grid-template-columns:1.2fr repeat(3,1fr); gap:36px; }
.footer-col strong { display:block; margin-bottom:12px; color:var(--accent-deep); }
.footer-col a { display:block; color:var(--muted); font-size:.9rem; margin:7px 0; }
.footer-col .brand { display:inline-flex; margin-bottom:14px; }
.footer-col .brand img { width:150px; }
.footer-bottom { margin-top:50px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:18px; color:var(--muted); font-size:.8rem; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 980px) {
  .nav-links { display:none; position:absolute; top:78px; left:20px; right:20px; padding:18px; border:1px solid var(--line); border-radius:20px; background:white; box-shadow:0 20px 60px rgba(36,95,118,.12); flex-direction:column; align-items:stretch; gap:0; }
  .nav-links.open { display:flex; }
  .nav-links a { padding:12px 6px; border-bottom:1px solid var(--line); }
  .nav-links a:last-child { border-bottom:none; }
  .menu-btn { display:inline-grid; place-items:center; }
  .hero { padding-top:72px; min-height:auto; }
  .hero-grid { grid-template-columns:1fr; gap:40px; }
  .system-visual { min-height:420px; }
  .section-head { grid-template-columns:1fr; gap:18px; }
  .pillars { grid-template-columns:repeat(2,1fr); }
  .cards { grid-template-columns:repeat(2,1fr); }
  .metric-strip { grid-template-columns:repeat(2,1fr); }
  .timeline-row { grid-template-columns:90px 1fr; }
  .timeline-row p { grid-column:2; }
  .detail-grid { grid-template-columns:1fr; gap:30px; }
  .side-nav { position:static; display:none; }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .contact-box { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1.2fr 1fr 1fr; }
  .footer-grid .footer-col:last-child { grid-column:2/4; }
}

@media (max-width: 640px) {
  .wrap { width:min(calc(100% - 28px),var(--max)); }
  .nav { height:70px; }
  .brand img { width:124px; }
  .nav-actions > .btn { display:none; }
  .nav-links { top:70px; left:14px; right:14px; }
  .hero { padding:62px 0 48px; }
  h1 { font-size:clamp(3.2rem,17vw,5rem); }
  .system-visual { min-height:340px; border-radius:26px; }
  .orbit.o2 { width:300px; height:300px; }
  .orbit.o1 { width:225px; height:225px; }
  .orbit.o3 { width:150px; height:150px; }
  .center-label { width:118px; height:118px; font-size:.88rem; }
  .section { padding:68px 0; }
  .pillars, .cards, .metric-strip, .split, .team-grid, .feature-list { grid-template-columns:1fr; }
  .pillar { min-height:250px; }
  .card { min-height:270px; }
  .metric { border-right:none; border-bottom:1px solid var(--line); }
  .metric:last-child { border-bottom:none; }
  .timeline-row { grid-template-columns:68px 1fr; gap:16px; }
  .contact-box { padding:32px 24px; border-radius:26px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-grid .footer-col:first-child, .footer-grid .footer-col:last-child { grid-column:1/3; }
  .footer-bottom { flex-direction:column; }
}

/* =========================================================
   V4 — visual language derived from the supplied NU3Gen logo
   Brand blue #3888B0 · DNA grey #606060 · strand blue #8AA8B0
   ========================================================= */
:root {
  --brand-blue:#3888b0;
  --brand-blue-dark:#2d647f;
  --brand-grey:#606060;
  --brand-strand:#8aa8b0;
  --brand-ice:#eaf4f8;
  --brand-mist:#f3f8fa;
  --brand-ink:#2f3e45;
}

body {
  background:
    radial-gradient(circle at 92% 5%, rgba(56,136,176,.075), transparent 30rem),
    linear-gradient(180deg,#fff 0,#f8fbfc 48rem,#fff 100%);
}

.site-header { background:rgba(255,255,255,.90); }
.site-header::after {
  height:2px;
  background:linear-gradient(90deg,transparent 5%,var(--brand-blue) 24%,var(--brand-strand) 44%,var(--brand-grey) 51%,var(--brand-strand) 58%,var(--brand-blue) 76%,transparent 95%);
  opacity:.18;
}
.brand { min-width:156px; }
.brand img { width:156px; }
.nav-links a { position:relative; }
.nav-links a::after {
  content:""; position:absolute; left:0; right:0; bottom:-10px; height:2px;
  background:var(--brand-blue); transform:scaleX(0); transform-origin:left; transition:.2s ease;
}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.btn { border-radius:14px; }
.btn.primary { background:var(--brand-blue); border-color:var(--brand-blue); box-shadow:0 10px 24px rgba(56,136,176,.12); }
.btn.primary:hover { background:var(--brand-blue-dark); border-color:var(--brand-blue-dark); }

.hero { min-height:84vh; padding-top:92px; }
.hero::before {
  width:780px; height:780px; right:-370px; top:-390px;
  background:radial-gradient(circle,rgba(56,136,176,.10),rgba(138,168,176,.035) 42%,transparent 70%);
}
h1 { color:var(--brand-ink); }
.hero h1 .brand-blue,.hero h1 .soft { color:var(--brand-blue); }
.hero h1 .brand-grey { color:var(--brand-grey); }
.eyebrow,.section-kicker { color:var(--brand-blue); }

/* Hero visual: logo becomes the core graphic instead of a generic biotech illustration */
.brand-visual {
  position:relative;
  min-height:520px;
  border:1px solid var(--line);
  border-radius:42px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(239,247,250,.92));
  box-shadow:0 34px 86px rgba(45,100,127,.10);
  isolation:isolate;
}
.brand-visual::before {
  content:""; position:absolute; width:410px; height:410px; right:-92px; top:-92px; border-radius:50%;
  border:42px solid rgba(56,136,176,.07); box-shadow:0 0 0 38px rgba(138,168,176,.05),0 0 0 76px rgba(96,96,96,.025);
}
.brand-visual::after {
  content:""; position:absolute; left:-8%; right:-8%; bottom:94px; height:132px;
  background:repeating-linear-gradient(115deg,transparent 0 28px,rgba(138,168,176,.18) 28px 32px,transparent 32px 58px);
  transform:rotate(-4deg); opacity:.6; z-index:-1;
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}
.brand-visual-logo {
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); width:76%;
  filter:drop-shadow(0 18px 28px rgba(45,100,127,.08));
}
.brand-visual-label {
  position:absolute; left:30px; right:30px; top:28px; display:flex; align-items:center; justify-content:space-between;
  font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:750;
}
.brand-visual-label::before { content:"NU3GEN / APPLIED SCIENCE"; }
.brand-visual-label::after { content:"2016 →"; color:var(--brand-blue); }
.brand-stream {
  position:absolute; left:32px; right:32px; bottom:30px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
.brand-stream span {
  min-height:62px; border-top:1px solid rgba(56,136,176,.36); padding-top:11px; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
}
.brand-stream span::before { content:""; display:block; width:8px; height:8px; border-radius:50%; background:var(--brand-blue); margin-bottom:9px; box-shadow:0 0 0 5px rgba(56,136,176,.09); }
.brand-stream span:nth-child(2)::before{background:var(--brand-grey);box-shadow:0 0 0 5px rgba(96,96,96,.07)}
.brand-stream span:nth-child(3)::before{background:var(--brand-strand)}

/* A small DNA-like signature reused through the site */
.section::after {
  content:""; position:absolute; top:-1px; right:4vw; width:110px; height:18px;
  background:repeating-linear-gradient(115deg,transparent 0 10px,rgba(56,136,176,.28) 10px 12px,transparent 12px 22px);
  opacity:.45;
}

.pillars { background:#fff; }
.pillar { background:#fff; }
.pillar::before { height:3px; background:linear-gradient(90deg,var(--brand-blue),var(--brand-strand),var(--brand-grey)); }
.pillar .num { color:var(--brand-blue); }
.pillar h3,.card h3,.timeline-title,.metric strong { color:var(--brand-ink); }

.card { border-radius:24px; }
.card::after {
  width:96px; height:96px; border:16px solid rgba(56,136,176,.055); right:-34px; top:-34px;
}
.card::before {
  content:""; position:absolute; left:28px; top:26px; width:42px; height:7px; border-radius:99px;
  background:linear-gradient(90deg,var(--brand-blue) 0 42%,var(--brand-strand) 42% 68%,var(--brand-grey) 68% 100%); opacity:.82;
}
.card .tag { margin-top:22px; }
.card.featured {
  background:linear-gradient(145deg,#2d647f 0%,#315d70 54%,#596a70 100%);
  border-color:transparent;
}

.metric-strip { border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#fff; }
.metric { border-bottom:none; }

.panel { position:relative; overflow:hidden; }
.panel::after {
  content:""; position:absolute; right:-62px; bottom:-66px; width:160px; height:160px; border:26px solid rgba(56,136,176,.06); border-radius:50%;
}
.panel.dark { background:linear-gradient(145deg,#59656a,#364d58); }

.contact-box {
  background:linear-gradient(145deg,#f7fbfc,#eaf4f8);
  border-color:#d7e8ee;
}

/* Secondary pages use the logo itself as a quiet watermark. */
.page-hero { position:relative; overflow:hidden; background:linear-gradient(180deg,#fff,#f7fbfc); }
.page-hero::before {
  content:""; position:absolute; right:-55px; top:50%; transform:translateY(-50%); width:min(44vw,650px); height:280px;
  background:url('../img/nu3gen-logo.png') center/contain no-repeat; opacity:.045; pointer-events:none;
}
.page-hero::after {
  content:""; position:absolute; right:8%; bottom:0; width:220px; height:16px;
  background:repeating-linear-gradient(115deg,transparent 0 15px,rgba(56,136,176,.25) 15px 18px,transparent 18px 32px); opacity:.55;
}
.page-hero h1 { max-width:930px; color:var(--brand-ink); }

.site-footer { background:#f5f9fa; }
.site-footer::before {
  content:""; display:block; height:3px;
  background:linear-gradient(90deg,var(--brand-blue),var(--brand-strand) 47%,var(--brand-grey) 50%,var(--brand-strand) 53%,var(--brand-blue)); opacity:.7;
}

@media (max-width:900px){
  .brand-visual{min-height:430px}
  .brand-visual-logo{width:78%}
}
@media (max-width:640px){
  .brand { min-width:132px; }
  .brand img { width:132px; }
  .brand-visual{min-height:360px;border-radius:28px}
  .brand-visual-logo{width:84%;top:43%}
  .brand-stream{left:20px;right:20px;bottom:20px;grid-template-columns:repeat(2,1fr)}
  .brand-stream span{min-height:48px}
  .brand-visual-label{left:20px;right:20px;top:20px;font-size:.65rem}
}