/* ============================================
   VerifyDocs — Design Tokens & Base
   ============================================ */
@font-face {
  font-family: 'Bungee';
  src: url('https://fonts.gstatic.com/s/bungee/v18/N0bU2SZBIuF2PU_ECn50Kd_PmA.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root{
  --ink: #0A1628;
  --blue: #1550FF;
  --blue-deep: #0B3FCC;
  --blue-soft: #E8EFFF;
  --blue-tint: #F1F5FF;
  --bg: #F7F9FC;
  --card: #FFFFFF;
  --slate: #4A5A7A;
  --slate-light: #8695B7;
  --line: #D7E0F0;
  --line-strong: #B9C8E8;
  --green: #00A876;
  --green-soft: #E5F7F0;
  --amber: #C97A17;

  --font-head: 'Bungee', 'Arial Narrow', sans-serif;
  --font-body: 'Chakra Petch', 'Segoe UI', sans-serif;

  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --container: 1240px;
  --header-h: 76px;
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  touch-action: pan-x pan-y;
}

body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Disable pinch-zoom / double-tap zoom without blocking accessibility zoom entirely on desktop */
@media (max-width: 1024px){
  html{ touch-action: pan-x pan-y; }
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input, select, textarea{ font-family:inherit; font-size:1rem; }

h1,h2,h3,h4{ font-family:var(--font-head); line-height:1.25; letter-spacing:0.2px; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.78rem;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--blue);
  background:var(--blue-tint);
  border:1px solid var(--line-strong);
  padding:7px 14px;
  margin-bottom:18px;
}
.eyebrow .dot{
  width:6px; height:6px; background:var(--green); border-radius:50%;
  animation:pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.4; transform:scale(0.7); }
}

.section{ padding:88px 0; }
.section-tight{ padding:56px 0; }
@media (max-width:768px){
  .section{ padding:56px 0; }
  .section-tight{ padding:36px 0; }
}

.section-head{
  max-width:680px;
  margin-bottom:52px;
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{
  font-size:clamp(1.7rem, 3.4vw, 2.5rem);
  margin-bottom:14px;
}
.section-head p{
  color:var(--slate);
  font-size:1.05rem;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.95rem;
  padding:14px 28px;
  border:1.5px solid transparent;
  border-radius:var(--radius);
  transition:all .2s ease;
  white-space:nowrap;
  position:relative;
}
.btn-primary{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
}
.btn-primary:hover{ background:var(--blue-deep); border-color:var(--blue-deep); transform:translateY(-2px); }
.btn-outline{
  background:transparent;
  color:var(--ink);
  border-color:var(--line-strong);
}
.btn-outline:hover{ border-color:var(--blue); color:var(--blue); background:var(--blue-tint); }
.btn-block{ width:100%; }
.btn svg{ width:18px; height:18px; flex-shrink:0; }

/* Outline card base - NO shadow, 8px radius standard */
.card{
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  position:relative;
  transition:border-color .25s ease, transform .25s ease;
}
.card:hover{ border-color:var(--blue); }

/* Shared page hero banner — used by Pricing, Contact, Verification API, etc. */
.page-hero{
  padding:calc(var(--header-h) + 56px) 0 50px;
  text-align:center;
  background:radial-gradient(ellipse 800px 400px at 50% -10%, var(--blue-tint), transparent 65%);
}
.page-hero h1{ font-size:clamp(1.9rem,4vw,2.8rem); margin-bottom:14px; }
.page-hero p{ color:var(--slate); max-width:600px; margin:0 auto; font-size:1.05rem; }
@media (max-width:768px){
  .page-hero{ padding:calc(var(--header-h) + 34px) 0 40px; }
}

/* corner notch - signature ID-card motif */
.notch{
  position:absolute;
  width:14px; height:14px;
  border-top:2px solid var(--blue);
  border-left:2px solid var(--blue);
  top:-2px; left:-2px;
  opacity:0;
  transition:opacity .25s ease;
}
.notch.br{ top:auto; left:auto; bottom:-2px; right:-2px; border-top:none; border-left:none; border-bottom:2px solid var(--blue); border-right:2px solid var(--blue); }
.card:hover .notch{ opacity:1; }

/* Scanline signature element */
.scanline{
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--blue), var(--green), transparent);
  opacity:0;
  animation:scan 3.2s ease-in-out infinite;
}
@keyframes scan{
  0%{ top:0; opacity:0; }
  8%{ opacity:1; }
  50%{ top:100%; opacity:1;}
  58%{ opacity:0; }
  100%{ top:100%; opacity:0; }
}

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }

/* Skeleton loaders */
.skel{
  background:linear-gradient(90deg, #EAEFF9 25%, #F5F8FD 37%, #EAEFF9 63%);
  background-size:400% 100%;
  animation:skel-loop 1.4s ease infinite;
}
@keyframes skel-loop{
  0%{ background-position:100% 50%; }
  100%{ background-position:0 50%; }
}

/* Page loading bar */
#page-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--blue), var(--green));
  z-index:9999;
  transition:width .3s ease;
}

::selection{ background:var(--blue); color:#fff; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}