/* ==========================================================================
   INTRSTLR Security — site styles
   One stylesheet for all four pages. Desktop is the base; the media query at
   the bottom handles phones and narrow tablets.
   ========================================================================== */

:root {
  --ground:   #000000;
  --panel:    #07080B;
  --rule:     #22262E;
  --rule-2:   #2E3441;
  --text:     #F0F1F3;
  --body:     #A9B6C7;
  --muted:    #8A97A8;
  --gold:     #C9B96A;
  --cyan:     #5AAECB;
  --indigo:   #3B3D9E;
  --teal:     #1F6E8C;
  --green:    #2E7D53;
  --olive:    #8A8244;
  --pad:      80px;
  --mono:     'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:     'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--gold); }

img { max-width: 100%; height: auto; display: block; }

.wrap { padding-left: var(--pad); padding-right: var(--pad); }

/* ---------------------------------------------------------------- nav ---- */
.nav {
  height: 88px;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ground);
}
.nav--sticky { position: sticky; top: 0; z-index: 50; }
.nav__logo img { height: 46px; width: auto; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 40px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
}

/* ------------------------------------------------------------ buttons ---- */
.btn-fill {
  background: transparent;
  color: var(--text);
  border-bottom: 4px solid var(--gold);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 500;
  padding: 17px 34px;
  transition: background 180ms ease, color 180ms ease;
}
.btn-fill:hover { background: var(--gold); color: var(--ground); }
.btn-fill--sm { padding: 11px 22px; }

.btn-text {
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  padding: 17px 8px;
  transition: color 180ms ease;
}
.btn-text:hover { color: var(--gold); }

/* ------------------------------------------------------------ headings --- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.20em;
  color: var(--gold);
}
.eyebrow--cyan { color: var(--cyan); }

.sec { padding: 88px var(--pad) 0 var(--pad); border-bottom: 1px solid var(--rule); }
.sec:last-of-type { border-bottom: none; }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 80px; }
.sec__head-l { display: flex; flex-direction: column; gap: 18px; max-width: 620px; }
.sec__head h2 { margin: 0; font-size: 48px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.08; }
.sec__head p { margin: 0 0 6px 0; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 380px; }

/* ---------------------------------------------------------------- hero --- */
.hero {
  min-height: 560px;
  padding: 64px var(--pad);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 48px;
}
.hero__copy { display: flex; flex-direction: column; gap: 24px; flex: 1 1 auto; min-width: 0; }
.hero h1 { margin: 0; font-size: 66px; line-height: 1.02; font-weight: 700; letter-spacing: -0.02em; }
.hero__lede { margin: 0; font-size: 19px; line-height: 1.5; color: var(--body); max-width: 640px; }
.hero__actions { display: flex; align-items: center; gap: 18px; margin-top: 4px; flex-wrap: wrap; }
.hero__strip {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--cyan);
}
.hero__strip .rule { width: 24px; height: 1px; background: var(--rule); }
.hero__patch { position: relative; width: 391px; height: 470px; flex-shrink: 0; }
.hero__patch svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* page hero without a patch (personal, contact) */
.hero--text { min-height: 0; align-items: flex-end; padding-bottom: 72px; }
.hero--text h1 { font-size: 60px; }
.hero--text .hero__aside {
  margin: 0 0 8px 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 380px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------- spec strip --- */
.spec-strip {
  padding: 0 52px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.spec {
  padding: 34px 28px 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background-color 220ms ease;
}
.spec + .spec { border-left: 1px solid var(--rule); }
.spec:hover { background-color: rgba(255, 255, 255, 0.03); }
.spec > * { transform-origin: left center; transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.spec:hover > * { transform: scale(1.1); }
.spec__bar { width: 28px; height: 3px; }
.spec__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); }
.spec__big { font-size: 29px; font-weight: 500; letter-spacing: -0.01em; }
.spec__sub { font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------- capability rows - */
.cap {
  padding: 30px 0;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: flex-start;
  gap: 44px;
  transition: background-color 220ms ease;
}
.cap:last-child { border-bottom: 1px solid var(--rule); }
.cap:hover { background-color: rgba(255, 255, 255, 0.03); }
.cap > * { transform-origin: left center; transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.cap:hover > * { transform: scale(1.05); }
.cap > *:last-child { transform-origin: right center; }
.cap__n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--cyan); width: 40px; flex-shrink: 0; padding-top: 6px; }
.cap__t { margin: 0; font-size: 25px; font-weight: 500; letter-spacing: -0.01em; width: 380px; flex-shrink: 0; }
.cap__d { margin: 0; font-size: 16px; line-height: 1.6; color: var(--body); flex-grow: 1; }
.cap__m { font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em; color: var(--muted); width: 128px; flex-shrink: 0; text-align: right; padding-top: 6px; }

/* ------------------------------------------------------------- columns --- */
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }
.col { display: flex; flex-direction: column; gap: 14px; transition: background-color 220ms ease; }
.col:hover { background-color: rgba(255, 255, 255, 0.03); }
.col > * { transform-origin: left center; transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.col:hover > * { transform: scale(1.05); }
.col h3 { margin: 10px 0 0 0; font-size: 21px; font-weight: 500; }
.col p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--body); }
.col__bars { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.col__bars span { height: 3px; }

/* --------------------------------------------------------- price cards --- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: background-color 220ms ease, box-shadow 220ms ease;
}
.card > * { transform-origin: left center; transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.card:hover > * { transform: scale(1.04); }
.card:hover > .hairline { transform: none; }
.card:hover { background-color: rgba(255, 255, 255, 0.03); }
.card--featured { border-color: var(--gold); }
.card--featured:hover { box-shadow: inset 0 0 0 2px var(--gold); }
.card__meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); }
.card--featured .card__meta { color: var(--gold); }
.card h3 { margin: 0; font-size: 26px; font-weight: 500; }
.card__price { font-size: 34px; font-weight: 700; color: var(--gold); letter-spacing: -0.01em; }
.hairline { height: 1px; background: var(--rule); }
.card ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.75; color: var(--body); }

/* ------------------------------------------------------ service accordion */
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 72px; }
.svc { transition: background-color 220ms ease; }
.svc:hover { background-color: rgba(255, 255, 255, 0.03); }
.svc > summary, .svc > .svc-body { transform-origin: left center; transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.svc summary {
  padding: 22px 0;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}
.svc summary::-webkit-details-marker { display: none; }
.svc summary::marker { content: ''; }
.svc:last-of-type summary { border-bottom: 1px solid var(--rule); }
.svc__name { flex: 1 1 auto; font-size: 18px; }
.svc__note { color: var(--muted); font-size: 14px; }
.svc__price { font-family: var(--mono); font-size: 15px; color: var(--gold); transform-origin: right center; transition: font-weight 180ms ease; }
.svc:hover .svc__price { font-weight: 700; }
.chev {
  width: 8px; height: 8px;
  margin-right: 14px;
  flex-shrink: 0;
  align-self: center;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 220ms ease, border-color 220ms ease;
}
.svc:hover .chev { border-color: var(--gold); }
.svc[open] .chev { transform: rotate(-135deg) translate(-3px, -3px); }
.svc:hover > summary, .svc:hover > .svc-body { transform: scale(1.04); }
.svc-body { font-size: 14px; line-height: 1.65; color: var(--body); padding: 2px 20px 18px 22px; }
.svc-lead { margin-bottom: 14px; }
.svc-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.svc-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: var(--cyan); margin-bottom: 8px; }
.svc-list { margin: 0; padding-left: 16px; font-size: 13px; line-height: 1.6; }
.svc-list li { margin-bottom: 7px; }

/* ---------------------------------------------------------- scope block -- */
.scope { display: flex; gap: 80px; background: var(--panel); }
.scope__l { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.scope__l h2 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; }
.scope__r { flex-grow: 1; display: flex; flex-direction: column; gap: 20px; }
.scope__r p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--body); }
.scope__r strong { color: var(--text); font-weight: 500; }
.callout {
  border-left: 2px solid var(--gold);
  padding: 14px 16px 14px 20px;
  margin-top: 6px;
  transition: background-color 220ms ease;
}
.callout > * { transition: transform 220ms cubic-bezier(.2,.7,.2,1); transform-origin: left center; }
.callout:hover { background-color: rgba(255, 255, 255, 0.075); }
.callout:hover > * { transform: scale(1.03); }
.callout p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text); }
.hotline { display: inline-block; margin-top: 10px; font-weight: 500; color: var(--text); transition: font-weight 180ms ease, color 180ms ease; }
.callout:hover .hotline { font-weight: 700; color: #FFFFFF; }
.hotline-num { color: var(--gold); }
.hotline-num:hover, .callout:hover .hotline-num { color: var(--gold); }

/* -------------------------------------------------------------- contact -- */
.contact { display: flex; justify-content: space-between; gap: 80px; }
.contact__l { display: flex; flex-direction: column; gap: 20px; max-width: 620px; }
.contact__l h2 { margin: 0; font-size: 44px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.08; }
.contact__l p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--body); }
.contact__r { display: flex; flex-direction: column; gap: 26px; width: 420px; flex-shrink: 0; }
.field { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--rule); padding-top: 20px; }
.field--lead { border-top: 2px solid var(--gold); }
.field__k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); }
.field__v { font-size: 19px; }
.field__note { font-size: 13px; color: var(--muted); }
.retain { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--cyan); margin-top: 8px; }

.steps { display: flex; flex-direction: column; gap: 12px; }
.step { display: flex; gap: 16px; align-items: baseline; }
.step__n { font-family: var(--mono); font-size: 12px; color: var(--gold); width: 18px; flex-shrink: 0; }
.step__t { font-size: 16px; line-height: 1.6; color: var(--body); }

.copy-mail {
  margin-left: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted);
  border: 1px solid var(--rule-2);
  background: transparent;
  padding: 4px 9px;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}
.copy-mail:hover { color: var(--gold); border-color: var(--gold); }
.copy-mail.done { color: var(--green); border-color: var(--green); }
.copy-mail.warn { color: var(--gold); border-color: var(--gold); }

/* --------------------------------------------------------------- footer -- */
.foot {
  min-height: 152px;
  padding: 40px var(--pad);
  margin-top: 64px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.foot__mark { display: flex; align-items: center; gap: 16px; }
.foot__bars { display: flex; flex-direction: column; gap: 2px; width: 22px; }
.foot__bars span { height: 3px; }

/* ----------------------------------------------------------- animations -- */
@keyframes rise    { from { opacity: 0; transform: translateY(16px); }  to { opacity: 1; transform: none; } }
@keyframes drop    { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
@keyframes slideX  { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes slideXr { from { opacity: 0; transform: translateX(30px); }  to { opacity: 1; transform: none; } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes patchIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes drawRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes spin {
  0%    { transform: scaleX(1); }
  12.5% { transform: scaleX(0.7071); }
  25%   { transform: scaleX(0); }
  37.5% { transform: scaleX(-0.7071); }
  50%   { transform: scaleX(-1); }
  62.5% { transform: scaleX(-0.7071); }
  75%   { transform: scaleX(0); }
  87.5% { transform: scaleX(0.7071); }
  100%  { transform: scaleX(1); }
}

.anim-rise   { opacity: 0; animation: rise 650ms cubic-bezier(.2,.7,.2,1) both; }
.anim-drop   { opacity: 0; animation: drop 620ms cubic-bezier(.2,.7,.2,1) both; }
.anim-left   { opacity: 0; animation: slideX 700ms cubic-bezier(.2,.7,.2,1) both; }
.anim-right  { opacity: 0; animation: slideXr 700ms cubic-bezier(.2,.7,.2,1) both; }
.anim-fade   { opacity: 0; animation: fadeIn 700ms ease-out both; }
.anim-patch  { opacity: 0; animation: patchIn 900ms cubic-bezier(.2,.7,.2,1) 180ms both; }
.anim-draw   { transform-origin: left center; animation: drawRule 420ms ease-out 900ms both; }

.d1 { animation-delay: 60ms; }  .d2 { animation-delay: 150ms; }
.d3 { animation-delay: 250ms; } .d4 { animation-delay: 460ms; }
.n0 { animation-delay: 0ms; }   .n1 { animation-delay: 120ms; }
.n2 { animation-delay: 190ms; } .n3 { animation-delay: 260ms; }
.s0 { animation-delay: 620ms; } .s1 { animation-delay: 720ms; }
.s2 { animation-delay: 820ms; } .s3 { animation-delay: 920ms; }
.c0 { animation-delay: 380ms; } .c1 { animation-delay: 500ms; }
.c2 { animation-delay: 620ms; } .c3 { animation-delay: 740ms; } .c4 { animation-delay: 860ms; }
.a0 { animation-delay: 0ms; }   .a1 { animation-delay: 110ms; } .a2 { animation-delay: 220ms; }
.k0 { animation-delay: 0ms; }   .k1 { animation-delay: 140ms; }
.r0{animation-delay:380ms}.r1{animation-delay:450ms}.r2{animation-delay:520ms}.r3{animation-delay:590ms}
.r4{animation-delay:660ms}.r5{animation-delay:730ms}.r6{animation-delay:800ms}.r7{animation-delay:870ms}
.foot-in { animation-delay: 240ms; }

/* scroll reveal: held at frame one until the block enters the viewport */
.on-view { animation-play-state: paused; }
.on-view.in-view { animation-play-state: running; }

/* rotating wireframe globe over the printed patch */
.mer { transform-box: view-box; transform-origin: 415.5px 419px; animation: spin 26s linear infinite; }
.m0{animation-delay:-0s}.m1{animation-delay:-1.63s}.m2{animation-delay:-3.25s}.m3{animation-delay:-4.88s}
.m4{animation-delay:-6.5s}.m5{animation-delay:-8.13s}.m6{animation-delay:-9.75s}.m7{animation-delay:-11.38s}
.m8{animation-delay:-13s}.m9{animation-delay:-14.63s}.m10{animation-delay:-16.25s}.m11{animation-delay:-17.88s}
.m12{animation-delay:-19.5s}.m13{animation-delay:-21.13s}.m14{animation-delay:-22.75s}.m15{animation-delay:-24.38s}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim-rise, .anim-drop, .anim-left, .anim-right, .anim-fade, .anim-patch, .anim-draw, .mer {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ======================================================= NARROW SCREENS == */
@media (max-width: 760px) {
  :root { --pad: 24px; }

  .nav { height: 64px; }
  .nav__logo img { height: 32px; }
  .nav__links { gap: 18px; font-size: 11px; }
  .btn-fill--sm { padding: 9px 14px; }

  .hero { min-height: 0; flex-direction: column; align-items: flex-start; gap: 20px; padding: 36px var(--pad) 44px var(--pad); }
  .hero h1, .hero--text h1 { font-size: 34px; }
  .hero__lede { font-size: 16px; }
  .hero__patch { width: 250px; height: 300px; align-self: center; order: -1; }
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; gap: 14px; }
  .hero__actions a { text-align: center; }
  .btn-fill { padding: 16px 0; }
  .btn-text { padding: 14px 0; }
  .hero__strip { font-size: 10px; gap: 12px; letter-spacing: 0.14em; flex-wrap: wrap; }
  .hero--text { align-items: flex-start; padding-bottom: 40px; }

  .sec { padding: 48px var(--pad) 40px var(--pad); }
  .sec__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sec__head h2 { font-size: 30px; }
  .sec__head p { max-width: none; margin: 4px 0 0 0; font-size: 14px; }

  .spec-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 12px; }
  .spec { padding: 26px 12px; gap: 7px; }
  .spec + .spec { border-left: none; }
  .spec:nth-child(2n) { border-left: 1px solid var(--rule); }
  .spec:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .spec__big { font-size: 22px; }
  .spec__sub { font-size: 12px; }
  .spec:hover > * { transform: none; }

  .cap { flex-direction: column; gap: 8px; padding: 20px 0; }
  .cap__n { width: auto; padding-top: 0; }
  .cap__t { width: auto; font-size: 18px; }
  .cap__d { font-size: 14px; }
  .cap__m { width: auto; text-align: left; padding-top: 0; }
  .cap:hover > * { transform: none; }

  .cols-3 { grid-template-columns: 1fr; gap: 26px; }
  .col h3 { font-size: 18px; }
  .col p { font-size: 14px; }
  .col:hover > * { transform: none; }

  .cards { grid-template-columns: 1fr; gap: 18px; }
  .card { padding: 24px 20px; gap: 14px; }
  .card h3 { font-size: 20px; }
  .card__price { font-size: 28px; }
  .card ul { font-size: 13px; line-height: 1.7; }
  .card:hover > * { transform: none; }

  .svc-grid { grid-template-columns: 1fr; gap: 0; }
  .svc summary { padding: 14px 0; }
  .svc__name { font-size: 15px; }
  .svc-split { grid-template-columns: 1fr; gap: 14px; }
  .svc:hover > summary, .svc:hover > .svc-body { transform: none; }

  .scope { flex-direction: column; gap: 20px; }
  .scope__l { width: auto; }
  .scope__l h2 { font-size: 28px; }
  .scope__r p { font-size: 13px; }
  .callout:hover > * { transform: none; }

  .contact { flex-direction: column; gap: 26px; }
  .contact__l h2 { font-size: 28px; }
  .contact__l p { font-size: 14px; }
  .contact__r { width: auto; gap: 16px; }
  .field { padding-top: 14px; }
  .field__v { font-size: 15px; }
  .step__t { font-size: 14px; }

  .foot { flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px var(--pad); min-height: 0; line-height: 1.8; }
}