/* Valkyn service pages — shared shell.
   Tokens mirror index.html so service pages read as the same site.
   Kept in one file (not inlined per page) so the Publisher agent can add
   pages without ever touching styling. */

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

:root{
  --bg:#07090d;
  --bg-2:#0b0f16;
  --surface:#0e131c;
  --surface-2:#121826;
  --border:rgba(255,255,255,.08);
  --border-2:rgba(255,255,255,.14);
  --fg:#eef2f8;
  --muted:#93a1b5;
  --muted-2:#65718a;
  --navy:#1F4E79;
  --navy-l:#2d6da3;
  --cyan:#38e0e0;
  --cyan-d:#16b6c4;
  --accent-grad:linear-gradient(110deg,#2d6da3 0%,#38bdf8 42%,#38e0e0 78%,#7df9ff 100%);
  --green:#34d399;
  --font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
  --maxw:1120px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  font-weight:300;
  overflow-x:hidden;
}

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

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ── nav ── */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(7,9,13,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:28px}
.brand{font-weight:700;font-size:19px;color:var(--fg);letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand span{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-links{margin-left:auto;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.nav-links a{color:var(--muted);font-size:14.5px;font-weight:400}
.nav-links a:hover{color:var(--fg);text-decoration:none}
.nav-cta{
  border:1px solid var(--border-2);border-radius:8px;padding:8px 15px;
  color:var(--fg)!important;font-weight:500;
}
.nav-cta:hover{border-color:var(--cyan);background:rgba(56,224,224,.06)}

/* ── hero ── */
.hero{padding:88px 0 56px;border-bottom:1px solid var(--border)}
.eyebrow{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cyan-d);margin-bottom:20px;
}
h1{
  font-size:clamp(34px,5.2vw,56px);line-height:1.08;font-weight:700;
  letter-spacing:-.03em;margin-bottom:22px;max-width:17ch;
}
.lede{font-size:clamp(18px,2.1vw,21px);color:var(--muted);max-width:62ch;font-weight:300}

/* ── content ── */
main section{padding:56px 0;border-bottom:1px solid var(--border)}
h2{
  font-size:clamp(24px,3.1vw,33px);font-weight:600;letter-spacing:-.02em;
  margin-bottom:20px;max-width:24ch;
}
h3{font-size:19px;font-weight:600;margin:0 0 8px;letter-spacing:-.01em}
main p{color:var(--muted);max-width:68ch;margin-bottom:16px}
main ul{color:var(--muted);max-width:68ch;margin:0 0 16px 20px}
main li{margin-bottom:9px}
strong{color:var(--fg);font-weight:600}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));margin-top:28px}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:24px;
  transition:border-color .2s,transform .2s;
}
.card:hover{border-color:var(--border-2);transform:translateY(-2px)}
.card p{font-size:15.5px;margin:0}

/* ── FAQ: the block answer engines actually quote ── */
.faq{border-top:1px solid var(--border);padding-top:22px;margin-top:8px}
.faq-item{margin-bottom:26px;max-width:70ch}
.faq-item h3{color:var(--fg);margin-bottom:7px}
.faq-item p{margin:0}

/* ── CTA ── */
.cta{
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg-2) 100%);
  border:1px solid var(--border-2);border-radius:16px;padding:44px 34px;
  margin:56px 0;text-align:center;
}
.cta h2{margin:0 auto 14px;max-width:22ch}
.cta p{margin:0 auto 26px;max-width:52ch}
.btn{
  display:inline-block;background:var(--accent-grad);color:#04121a!important;
  font-weight:650;font-size:16px;padding:14px 30px;border-radius:10px;
  letter-spacing:-.01em;
}
.btn:hover{text-decoration:none;filter:brightness(1.08)}

/* ── footer ── */
footer{padding:44px 0 60px;color:var(--muted-2);font-size:14px}
footer a{color:var(--muted)}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:18px}

@media(max-width:640px){
  body{font-size:16px}
  .hero{padding:56px 0 40px}
  main section{padding:42px 0}
  .cta{padding:34px 22px}
  .nav-links{gap:14px}
  .nav-links a:not(.nav-cta){display:none}
}