/* ════════════════════════════════════════════════════════════════════
   CallVault — Nexus-SecTech house theme
   Palette, type scale and component vocabulary lifted from nexus-sec.tech
   so the product pages and the company site read as one estate.
   Fonts are self-hosted (assets/fonts) — no third-party requests, which
   matters on a page whose subject is not phoning home.
   ════════════════════════════════════════════════════════════════════ */

/* ── Cormorant Garamond — display ── */
@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("fonts/cormorant-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("fonts/cormorant-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:italic; font-weight:300 700; font-display:swap;
  src:url("fonts/cormorant-italic-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* No italic latin-ext face is shipped. Italic is used only for the policy
   page's title and a single <em>, both plain ASCII, so the latin subset
   covers it; extended-Latin italic would fall back to the roman face. */
/* ── DM Sans — text ── */
@font-face{
  font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap;
  src:url("fonts/dm-sans-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap;
  src:url("fonts/dm-sans-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --navy:#0a1c24;
  --navy-2:#0e2730;
  --navy-3:#103039;
  --teal:#2389a0;
  --teal-mid:#43b4cc;
  --teal-light:#5cc6dd;
  --cyan:#7fe0ec;
  --white:#eef6f7;
  --muted:rgba(223,234,237,0.52);
  --muted-2:rgba(223,234,237,0.34);
  /* Long-form prose sits brighter than the house --muted. The parent site uses
     --muted for short decorative copy only; at 0.52 over --navy that is 4.7:1,
     which is thin for a privacy policy read end to end. 0.78 gives ~9:1. */
  --text:rgba(223,234,237,0.78);
  --rule:rgba(124,209,221,0.12);
  --rule-soft:rgba(255,255,255,0.05);
  --grad-accent:linear-gradient(120deg,var(--cyan) 0%,var(--teal-light) 45%,var(--teal) 100%);
  --grad-card:linear-gradient(160deg,rgba(92,198,221,0.07) 0%,rgba(255,255,255,0.015) 100%);
  --shell:1000px;
  --pad-x:4rem;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:16px; line-height:1.65; color:var(--white);
  background:var(--navy); -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
  position:relative; overflow-x:hidden;
}

/* ── Atmospheric mesh + grid ── */
.bg-mesh{
  position:fixed; inset:-20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 12% 18%, rgba(92,198,221,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 88% 82%, rgba(35,137,160,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 60% 40%, rgba(16,48,57,0.6) 0%, transparent 100%);
  animation:meshDrift 26s ease-in-out infinite alternate;
}
@keyframes meshDrift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(2.5%,2%,0) scale(1.08); }
}
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(124,209,221,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,209,221,0.04) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, transparent 90%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, transparent 90%);
}

/* ── Shared shell ── */
.shell{ position:relative; z-index:1; max-width:var(--shell); margin:0 auto; width:100%; padding-left:var(--pad-x); padding-right:var(--pad-x); }

/* ── NAV ── */
nav{
  position:relative; z-index:10; padding:1.15rem var(--pad-x);
  border-bottom:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:rgba(10,28,36,0.55);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.brand{ display:flex; align-items:center; gap:0.85rem; text-decoration:none; }
.brand .mk{ filter:drop-shadow(0 4px 14px rgba(67,180,204,0.35)); flex-shrink:0; }
.brand .bt{ display:flex; flex-direction:column; line-height:1; }
.brand .bt .nm{ font-weight:600; font-size:1.02rem; letter-spacing:0.02em; color:var(--white); }
.brand .bt .sb{ font-size:0.56rem; letter-spacing:0.26em; text-transform:uppercase; color:var(--teal-light); margin-top:3px; }
.contact-link{
  font-size:0.72rem; font-weight:500; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--teal-light); text-decoration:none; white-space:nowrap;
  border:1px solid rgba(92,198,221,0.3); padding:0.5rem 1.15rem; border-radius:3px;
  transition:background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.contact-link:hover,.contact-link:focus-visible{
  background:rgba(92,198,221,0.12); border-color:var(--teal-light); color:var(--cyan);
  box-shadow:0 0 24px -6px rgba(92,198,221,0.5);
}

/* ── HERO ── */
.hero{ padding-top:7rem; padding-bottom:4rem; }
.hero.compact{ padding-top:4.5rem; padding-bottom:2.5rem; }
.hero-mark-wrap{ display:flex; justify-content:center; margin-bottom:3rem; }
.hero-mark{ filter:drop-shadow(0 18px 50px rgba(67,180,204,0.4)); }
.hero-mark .halo{ transform-origin:120px 120px; animation:haloSpin 38s linear infinite; }
@keyframes haloSpin{ to{ transform:rotate(360deg); } }
.eyebrow{
  display:inline-flex; align-items:center; gap:0.65rem;
  font-size:0.7rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--teal-light); margin-bottom:1.75rem;
}
.eyebrow::before{ content:''; display:block; width:26px; height:1px; background:var(--grad-accent); }
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal-light); box-shadow:0 0 0 0 rgba(92,198,221,0.6); animation:liveDot 2.6s ease-out infinite; }
@keyframes liveDot{ 0%{ box-shadow:0 0 0 0 rgba(92,198,221,0.55);} 70%,100%{ box-shadow:0 0 0 8px rgba(92,198,221,0);} }
h1{
  font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:clamp(3rem,6vw,5rem); line-height:1.04; letter-spacing:-0.018em;
  color:var(--white); margin-bottom:1.6rem; max-width:13em;
}
h1.wordmark{ letter-spacing:-0.03em; }
.hero.compact h1{ font-size:clamp(2.3rem,4.6vw,3.4rem); max-width:17em; margin-bottom:1.1rem; }
.grad{ background:var(--grad-accent); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.grad.it{ font-style:italic; }
.hero-body{ font-size:1.08rem; line-height:1.8; color:var(--muted); max-width:44em; }
.hero-stats{
  display:flex; gap:2.5rem; margin-top:2.75rem; flex-wrap:wrap;
  padding-top:2rem; border-top:1px solid var(--rule);
}
.stat .v{ font-family:'Cormorant Garamond',serif; font-size:1.7rem; color:var(--white); line-height:1; }
.stat .k{ font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted-2); margin-top:0.45rem; }
.updated{ margin-top:1.4rem; font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted-2); }

/* ── Entrance ── */
@keyframes rise{ from{ transform:translateY(24px); } to{ transform:translateY(0); } }
.reveal{ animation:rise 0.8s cubic-bezier(.2,.7,.2,1) both; }
.d1{ animation-delay:.08s;} .d2{ animation-delay:.18s;} .d3{ animation-delay:.28s;} .d4{ animation-delay:.38s;} .d5{ animation-delay:.48s;}

/* ── Divider ── */
.section-divider hr{ border:none; border-top:1px solid var(--rule); }

/* ── Sections ── */
section.band{ padding-top:3.6rem; padding-bottom:0.4rem; }
.section-label{
  font-size:0.7rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--teal-light); margin-bottom:2.5rem; display:flex; align-items:center; gap:0.85rem;
}
.section-label::after{ content:''; flex:1; height:1px; background:var(--rule); }

h2{
  font-family:'Cormorant Garamond',serif; font-weight:500; font-size:1.95rem;
  letter-spacing:0.01em; color:var(--white); line-height:1.2;
  margin:3.2rem 0 1.1rem; padding-top:1.6rem; position:relative;
}
h2::before{ content:''; position:absolute; top:0; left:0; width:34px; height:2px; background:var(--grad-accent); border-radius:2px; }
h2:first-of-type{ margin-top:0; }

p{ margin:0 0 1.15rem; color:var(--text); max-width:44em; }
p.lede{ color:var(--white); }
ul{ margin:0 0 1.3rem; padding-left:1.15rem; max-width:44em; }
li{ margin:.45rem 0; color:var(--text); }
li::marker{ color:var(--teal); }
li strong{ color:var(--white); font-weight:500; }
a{ color:var(--teal-light); text-decoration:none; border-bottom:1px solid rgba(92,198,221,0.3); transition:color .2s, border-color .2s; }
a:hover,a:focus-visible{ color:var(--cyan); border-color:var(--cyan); }
strong{ color:var(--white); font-weight:600; }
code,.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em; color:var(--cyan); background:rgba(92,198,221,0.08); border:1px solid var(--rule); border-radius:3px; padding:0.08em 0.38em; }
.mono.block{ display:block; padding:0.75rem 0.9rem; margin:0 0 1.3rem; max-width:44em; overflow-x:auto; white-space:nowrap; }

/* ── Card grid (mirrors the products grid on nexus-sec.tech) ── */
.card-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule); border-radius:6px; overflow:hidden;
  margin-bottom:0.5rem;
}
.card{
  background:var(--grad-card); background-color:rgba(14,39,48,0.66);
  padding:2.1rem 1.9rem; display:flex; flex-direction:column; gap:0.6rem;
  backdrop-filter:blur(4px); transition:background-color 0.3s, transform 0.3s;
  position:relative; overflow:hidden;
}
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad-accent); transform:scaleX(0); transform-origin:left;
  transition:transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.card::after{
  content:''; position:absolute; width:240px; height:240px; right:-90px; top:-90px;
  background:radial-gradient(circle, rgba(92,198,221,0.14), transparent 70%);
  opacity:0; transition:opacity 0.35s; pointer-events:none;
}
.card:hover{ background-color:rgba(35,137,160,0.12); transform:translateY(-2px); }
.card:hover::before{ transform:scaleX(1); }
.card:hover::after{ opacity:1; }
.card h3{ font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-weight:500; color:var(--white); letter-spacing:0.01em; }
.card p{ font-size:0.9rem; line-height:1.68; color:var(--muted); margin:0; }

/* ── Callout ── */
.callout{
  background:var(--grad-card); background-color:rgba(14,39,48,0.6);
  border:1px solid var(--rule); border-left:2px solid var(--teal-mid);
  border-radius:6px; padding:1.3rem 1.5rem; margin:1.9rem 0; max-width:46em;
}
.callout p{ color:var(--text); }
.callout p:last-child{ margin-bottom:0; }
.callout strong{ color:var(--white); }

/* ── Table ── */
.table-wrap{ overflow-x:auto; margin:0 0 1.5rem; border:1px solid var(--rule); border-radius:6px; background:rgba(14,39,48,0.5); }
table{ border-collapse:collapse; width:100%; min-width:34rem; }
th,td{ text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--rule); vertical-align:top; font-size:0.9rem; color:var(--text); }
thead th{ color:var(--teal-light); font-weight:500; font-size:.66rem; text-transform:uppercase; letter-spacing:.16em; background:rgba(16,48,57,0.5); }
tbody tr:last-child td{ border-bottom:none; }
tbody td:first-child{ color:var(--white); }

/* ── FOOTER ── */
footer{
  position:relative; z-index:1; margin-top:auto; border-top:1px solid var(--rule-soft);
  padding:2.2rem var(--pad-x); display:flex; align-items:flex-start; justify-content:space-between; gap:1.4rem;
  background:rgba(10,28,36,0.7);
}
.footer-brand{ display:flex; align-items:center; gap:0.7rem; margin-bottom:0.6rem; }
.footer-brand .nm{ font-size:0.82rem; font-weight:600; color:rgba(238,246,247,0.7); letter-spacing:0.02em; }
.footer-legal{ font-size:0.68rem; color:rgba(238,246,247,0.32); line-height:1.7; }
.footer-legal strong{ color:rgba(238,246,247,0.5); font-weight:500; }
.footer-legal a{ color:rgba(238,246,247,0.5); border-bottom-color:rgba(238,246,247,0.2); }
.footer-legal a:hover{ color:var(--teal-light); border-bottom-color:var(--teal-light); }
.footer-ico{ font-size:0.68rem; color:rgba(238,246,247,0.3); text-align:right; line-height:1.7; flex-shrink:0; }

/* ── Skip link ── */
.skip{ position:absolute; left:-9999px; top:0; z-index:100; }
.skip:focus{ left:1rem; top:1rem; background:var(--navy-3); color:var(--white); padding:.6rem 1rem; border:1px solid var(--teal-light); border-radius:4px; }

/* ── Responsive ── */
@media (max-width:860px){
  .card-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  :root{ --pad-x:1.5rem; }
  .hero{ padding-top:4rem; padding-bottom:2.5rem; }
  .hero.compact{ padding-top:3rem; }
  .hero-mark-wrap{ margin-bottom:2rem; }
  .hero-stats{ gap:1.6rem; }
  footer{ flex-direction:column; align-items:flex-start; gap:0.8rem; }
  .footer-ico{ text-align:left; }
  h2{ font-size:1.7rem; }
}
@media (max-width:480px){
  h1{ font-size:2.6rem; }
}
@media (prefers-reduced-motion:reduce){
  .bg-mesh,.hero-mark .halo,.eyebrow .dot{ animation:none !important; }
  .reveal{ animation:none !important; transform:none; }
  html{ scroll-behavior:auto; }
  .card,.card::before,.card::after,.contact-link,a{ transition:none !important; }
}