/* ============================================================
   BIZZBOTS INDIA — Design System
   Concept: verification-as-craft. The visual world of an official
   seal / hallmark / notarised ledger — the physical trust-marks
   already used in Indian gold-loan, jewellery and banking counters
   — rendered for a digital trust network.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700&family=Spectral:ital@1&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* ---- palette ---- */
  --paper:        #FBFAF7;
  --paper-dim:     #F3F1EA;
  --hairline:     #DEDAD0;
  --ink-navy:     #1E3A8A;   /* exact Trusto app brand color */
  --ink-navy-deep:#10214F;
  --ink-navy-soft:#EEF1FA;
  --brass:        #A6741F;
  --brass-soft:   #F3E9D6;
  --charcoal:     #23262B;
  --charcoal-60:  rgba(35,38,43,.62);
  --charcoal-40:  rgba(35,38,43,.40);
  --white:        #FFFFFF;

  /* ---- type ---- */
  --f-display: 'Spectral', Georgia, serif;
  --f-body:    'Inter', -apple-system, sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;

  --container: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--charcoal);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

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

:focus-visible{
  outline:2px solid var(--ink-navy);
  outline-offset:3px;
  border-radius:2px;
}

/* ---- layout primitives ---- */
.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}
section{padding:104px 0;}
@media (max-width:760px){
  section{padding:64px 0;}
  .wrap{padding:0 20px;}
}

.eyebrow{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass);
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
}
.eyebrow::before{
  content:'';
  width:22px;height:1px;
  background:var(--brass);
  display:inline-block;
}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  color:var(--ink-navy-deep);
  margin:0 0 .4em;
  letter-spacing:-.01em;
}
h1{font-size:clamp(38px,5.4vw,66px); line-height:1.04; font-weight:700;}
h2{font-size:clamp(28px,3.6vw,42px); line-height:1.14;}
h3{font-size:22px; line-height:1.3;}
p{margin:0 0 1em; color:var(--charcoal-60); max-width:60ch;}
p.lede{font-size:19px; line-height:1.6; color:var(--charcoal);}

.mono-stat{font-family:var(--f-mono);}

/* ---- nav ---- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,247,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.site-nav .wrap{
  height:74px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-display); font-weight:700; font-size:19px;
  color:var(--ink-navy-deep);
}
.brand .mark{width:30px;height:30px;flex-shrink:0;}
.nav-links{display:flex; align-items:center; gap:36px;}
.nav-links a{
  font-size:14.5px; font-weight:500; color:var(--charcoal);
  padding:6px 0; border-bottom:1px solid transparent;
  transition:border-color .15s;
}
.nav-links a:hover{border-color:var(--brass);}
.nav-links a.current{color:var(--ink-navy); border-color:var(--ink-navy);}
.nav-cta{
  background:var(--ink-navy); color:var(--white) !important;
  padding:10px 20px; border-radius:3px; font-weight:600 !important;
  border-bottom:none !important;
}
.nav-cta:hover{background:var(--ink-navy-deep);}
.nav-toggle{display:none;}

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:74px 0 0 0; background:var(--paper);
    flex-direction:column; padding:32px 24px; gap:22px;
    transform:translateX(100%); transition:transform .25s ease;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{
    display:block; background:none; border:none; cursor:pointer;
    width:28px; height:20px; position:relative;
  }
  .nav-toggle span, .nav-toggle::before, .nav-toggle::after{
    content:''; position:absolute; left:0; width:100%; height:2px;
    background:var(--ink-navy-deep); transition:.2s;
  }
  .nav-toggle::before{top:0;} .nav-toggle span{top:9px;} .nav-toggle::after{top:18px;}
}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-body); font-weight:600; font-size:15px;
  padding:13px 26px; border-radius:3px; cursor:pointer;
  border:1px solid transparent; transition:.15s;
}
.btn-primary{background:var(--ink-navy); color:var(--white);}
.btn-primary:hover{background:var(--ink-navy-deep);}
.btn-ghost{border-color:var(--charcoal-40); color:var(--charcoal);}
.btn-ghost:hover{border-color:var(--ink-navy); color:var(--ink-navy);}
.btn-gold{background:var(--brass); color:var(--white);}
.btn-gold:hover{background:#8C6119;}

/* ============================================================
   THE SEAL — signature element. A wax/hallmark verification
   stamp: ring text + fingerprint core. Stamps down on scroll-
   into-view, with an ink-spread pulse.
   ============================================================ */
.seal{
  position:relative;
  filter:drop-shadow(0 8px 22px rgba(16,33,79,.18));
}
.seal svg{width:100%; height:100%;}
.seal .seal-body{
  transform-origin:center;
  opacity:0;
  transform:scale(1.5) rotate(-14deg);
  transition:opacity .55s cubic-bezier(.2,.8,.3,1), transform .55s cubic-bezier(.2,.8,.3,1);
}
.seal.stamped .seal-body{opacity:1; transform:scale(1) rotate(0deg);}
.seal .ink-ring{
  transform-origin:center; opacity:0; transform:scale(.6);
  transition:opacity .5s ease .2s, transform .7s cubic-bezier(.2,.8,.3,1) .2s;
}
.seal.stamped .ink-ring{opacity:1; transform:scale(1);}

/* ---- cards ---- */
.card{
  background:var(--white);
  border:1px solid var(--hairline);
  border-radius:4px;
  padding:32px;
}
.card-navy{background:var(--ink-navy-deep); color:rgba(255,255,255,.92); border:none;}
.card-navy h3, .card-navy h4{color:var(--white);}
.card-navy p{color:rgba(255,255,255,.72);}

.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; padding:5px 10px; border-radius:2px;
  background:var(--brass-soft); color:var(--brass);
}
.tag-navy{background:var(--ink-navy-soft); color:var(--ink-navy);}

hr.hairline{border:none; border-top:1px solid var(--hairline); margin:0;}

/* ---- footer ---- */
footer{
  background:var(--ink-navy-deep); color:rgba(255,255,255,.7);
  padding:64px 0 32px;
}
footer h4{color:var(--white); font-size:14px; font-family:var(--f-body); font-weight:600; margin-bottom:16px;}
footer a{color:rgba(255,255,255,.7); font-size:14.5px; display:block; margin-bottom:10px;}
footer a:hover{color:var(--white);}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); margin-top:48px; padding-top:24px;
  display:flex; justify-content:space-between; font-size:13px; color:rgba(255,255,255,.5);
  font-family:var(--f-mono);
}
@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px;}
  .footer-bottom{flex-direction:column; gap:8px;}
}