/* ===================================================================
   Technology page overrides. Scoped under body.technology-page so
   index.html, nano-immersion.html, science-validation.html,
   applications.html and company.html are unaffected. Brings this page
   into the same visual system as the homepage and NANO Immersion page:
   deep navy -> steel graphite -> warm white -> graphite -> warm white
   -> graphite -> deep navy, clean sans-serif throughout, no green.
   =================================================================== */
:root{
  --tn-bg:#0A1626;
  --tn-graphite:#1B2531;
  --tn-graphite-line:rgba(255,255,255,0.14);
  --tn-light:#FAF9F5;
  --tn-light-line:#DAD5C8;
  --tn-ink:#F4F6F9;
  --tn-ink-soft:#B7C3D1;
  --tn-ink-dim:#7C8CA6;
  --tn-dark:#1C2430;
  --tn-dark-soft:#525E6E;
  --tn-dark-dim:#8A8F99;
  --tn-blue:#2E67E8;
  --tn-blue-deep:#1E4FC7;
  --tn-link-dark:#122F80;
}

body.technology-page{
  font-family:'Helvetica Neue',Arial,sans-serif;
  background:var(--tn-bg);
  color:var(--tn-ink);
  line-height:1.6;
}
body.technology-page p{line-height:1.6;}
body.technology-page h1,
body.technology-page h2,
body.technology-page h3,
body.technology-page h4{font-family:'Helvetica Neue',Arial,sans-serif;}

/* Header / nav / buttons — align to the same blue accent.
   Scoped to the site nav header only (not the section <header> elements
   used inside the platform/performance graphics further down the page). */
body.technology-page header.site-header{background:rgba(10,22,38,0.92);}
body.technology-page .nav-cta{background:var(--tn-blue);}
body.technology-page .nav-cta:hover{background:var(--tn-blue-deep);}
body.technology-page .nav-links a:hover,
body.technology-page .nav-links a.active{border-color:var(--tn-blue);}
body.technology-page .btn-primary{background:var(--tn-blue);}
body.technology-page .btn-primary:hover{background:var(--tn-blue-deep);}
body.technology-page .btn-ghost:hover{border-color:var(--tn-blue);color:var(--tn-blue);}
body.technology-page .hero h1 em{color:var(--tn-blue);}
body.technology-page .hero-eyebrow,
body.technology-page .section-tag{
  text-transform:uppercase;font-weight:700;letter-spacing:0.07em;
}

/* ---------- Hero ---------- */
.tech-hero{padding-bottom:64px;background:#051628;}
.tech-hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,3vw,48px);align-items:center;
}
.tech-hero-copy{max-width:760px;}
.tech-hero-media{margin:0;position:relative;z-index:1;}
.tech-hero-media img{
  display:block;width:100%;height:auto;
  /* feather the edges so the photo melts into the navy hero */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 90%,transparent);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 90%,transparent);
          mask-composite:intersect;
}
@media (max-width:1100px){
  .tech-hero-grid{grid-template-columns:1fr;}
  .tech-hero-media{max-width:620px;margin:8px auto 0;}
}
.tech-hero h1{font-size:46px;font-weight:600;line-height:1.18;letter-spacing:-0.01em;}
.tech-hero p{max-width:640px;}
.tech-hero p + p{margin-top:14px;}
/* Headline is set as three deliberate lines on desktop; on narrower screens
   the spans go back to being inline and the text wraps naturally. */
@media (min-width:821px){
  .hero-line{display:block;}
}

/* ---------- Three Different Variables (graphite) ---------- */
.tech-variables{background:var(--tn-graphite);border-bottom:1px solid var(--tn-graphite-line);}
.tech-variables .split h3{color:var(--tn-blue);}
.tech-variables .split p{color:var(--tn-ink-soft);}
.tech-variables .split-3{grid-template-columns:repeat(3,1fr);}
.tech-why-matters{
  margin-top:64px;padding-top:36px;max-width:760px;border-top:1px solid var(--tn-graphite-line);
}
.tech-why-matters h3{font-size:15px;font-weight:600;margin-bottom:10px;color:var(--tn-blue);}
.tech-why-matters p{font-size:18px;line-height:1.55;color:var(--tn-ink-soft);}

/* ---------- ZetaWorks™ (warm white — a component inside NANO™, not equal to it) ---------- */
.tech-zetaworks{background:var(--tn-light);color:var(--tn-dark);border-bottom:1px solid var(--tn-light-line);}
.tech-zetaworks .section-title{color:var(--tn-dark);}
.tech-zetaworks .section-lede{color:var(--tn-dark-soft);max-width:700px;}

.zeta-closeup{margin-top:44px;display:flex;align-items:stretch;gap:0;}
.zeta-closeup-item{
  flex:1;background:#FFFFFF;border:1px solid var(--tn-light-line);border-radius:10px;
  padding:30px 28px;box-shadow:0 18px 44px -28px rgba(28,36,48,0.24);
}
.zeta-closeup-item .icon{width:30px;height:30px;color:var(--tn-blue);margin-bottom:14px;}
.zeta-closeup-item h4{font-size:18px;font-weight:800;color:var(--tn-dark);margin-bottom:10px;}
.zeta-closeup-item p{font-size:14.5px;line-height:1.55;color:var(--tn-dark-soft);}
.zeta-closeup-arrow{
  flex:none;width:52px;display:flex;align-items:center;justify-content:center;color:var(--tn-blue);
}
.zeta-closeup-arrow svg{width:26px;height:26px;}

/* ---------- Transparency (graphite) ---------- */
.tech-connect{background:var(--tn-graphite);border-bottom:1px solid var(--tn-graphite-line);}
.tech-connect-wrap{max-width:1120px;}
.tc-grid{display:grid;grid-template-columns:1fr 0.92fr;gap:64px;align-items:center;}
.tc-intro .section-title{max-width:520px;}
.tc-lede-strong{font-size:19px;font-weight:600;color:var(--tn-ink);margin-top:18px;max-width:480px;}
.tc-intro .section-lede{margin-top:10px;max-width:480px;}
.tx-link{
  display:inline-block;margin-top:44px;
  font-size:17px;font-weight:600;color:#6FA8FF;
  border-bottom:1px solid #6FA8FF;padding-bottom:3px;
}
.tx-link:hover{color:#8FBCFF;border-color:#8FBCFF;}
.tc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:32px;}
.tc-actions .btn{white-space:nowrap;}
.tc-actions .tx-link{margin-top:0;}
.tc-preview{display:grid;grid-template-columns:1fr;gap:20px;}
.tc-preview-card{border:1px solid var(--tn-graphite-line);border-radius:14px;padding:26px 28px;background:rgba(255,255,255,0.03);}
.tc-preview-card .icon{width:26px;height:26px;color:#6FA8FF;margin-bottom:16px;}
.tc-preview-kicker{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#6FA8FF;margin-bottom:10px;}
.tc-preview-card h4{font-size:19px;font-weight:600;color:var(--tn-ink);margin-bottom:10px;}
.tc-badge{display:inline-block;margin-bottom:14px;padding:5px 12px;border-radius:999px;background:#2E67E8;color:#fff;font-size:13px;font-weight:700;letter-spacing:0.02em;white-space:nowrap;}
.tc-preview-card p{font-size:15px;line-height:1.55;color:var(--tn-ink-soft);}
.tc-personalized{margin-top:28px;font-size:14px;color:var(--tn-ink-dim);}
@media (max-width:900px){
  .tc-grid{grid-template-columns:1fr;gap:40px;}
  .tc-intro .section-title,.tc-lede-strong,.tc-intro .section-lede{max-width:none;}
}
@media (max-width:640px){
  .tc-badge{white-space:normal;}
}

/* ---------- Final CTA (deep navy) ---------- */
.tech-cta{background:var(--tn-bg);}

/* ---------- Headline line control (desktop) ----------
   Each headline is set as two deliberate lines; on narrower screens the
   spans are inline again and the text wraps naturally. */
@media (min-width:821px){
  body.technology-page .tx-headline,
  body.technology-page .cta-headline{max-width:none;}
  body.technology-page .cta-headline{line-height:1.18;}
  body.technology-page .tx-line{display:block;}
}
@media (max-width:820px){
  body.technology-page .tx-headline,
  body.technology-page .cta-headline{text-wrap:balance;}
}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .tech-hero h1{font-size:34px;}
  .zeta-closeup{flex-direction:column;}
  .zeta-closeup-arrow{width:auto;height:36px;transform:rotate(90deg);}
}
@media (max-width:640px){
  .tech-hero h1{font-size:28px;}
}
body.technology-page .section-tag.nano-connect-lockup{text-transform:none;letter-spacing:0;font-size:20px;font-weight:400;}