/*
Theme Name: Sanad Registry
Description: The Sanad company site — homepage, public Digital ID verification, and the Apply Now intake form.
Author: Lone Star TSC
Version: 1.0
Text Domain: sanad-registry
*/

:root{
  --ink:#0d1a22;
  --ink-soft:#13232c;
  --paper:#f2ecdd;
  --paper-line:rgba(13,26,34,0.14);
  --gold:#b8912f;
  --gold-bright:#d9b354;
  --teal:#1f4b43;
  --maroon:#7a2e2a;
  --cream-text:#efe8d6;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
section[id]{scroll-margin-top:90px;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
}
.display{font-family:'Fraunces', serif;}
.mono{font-family:'IBM Plex Mono', monospace; letter-spacing:0.04em;}

a{color:inherit; text-decoration:none;}
*{transition:color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease;}

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 6vw;
  background:rgba(13,26,34,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(184,145,47,0.25);
}
.wordmark-link{display:flex; align-items:center;}
.logo-img{height:34px; width:auto; display:block;}
.navlinks{display:flex; gap:36px; font-size:0.85rem; color:var(--cream-text); opacity:0.85;}
.navlinks a{position:relative; padding-bottom:3px;}
.navlinks a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold-bright); transition:width 0.25s ease;}
.navlinks a:hover{color:var(--gold-bright); opacity:1;}
.navlinks a:hover::after{width:100%;}
.nav-cta{
  font-size:0.78rem; padding:9px 18px; border:1px solid var(--gold);
  color:var(--gold-bright); border-radius:2px; letter-spacing:0.05em;
}
.nav-cta:hover{background:var(--gold); color:var(--ink); transform:translateY(-1px);}

/* ---------- HERO ---------- */
.hero{
  background:
    radial-gradient(ellipse at 75% 20%, rgba(184,145,47,0.10), transparent 55%),
    var(--ink);
  color:var(--cream-text);
  padding:9vh 6vw 10vh;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:5vw; align-items:center;
  position:relative; overflow:hidden;
}
.hero-eyebrow{
  font-family:'IBM Plex Mono'; font-size:0.72rem; letter-spacing:0.2em;
  color:var(--gold-bright); text-transform:uppercase; margin-bottom:22px;
  display:flex; align-items:center; gap:10px;
}
.hero-eyebrow::before{content:""; width:26px; height:1px; background:var(--gold);}
.hero h1{
  font-size:clamp(2.3rem, 4.4vw, 3.6rem);
  font-weight:500; line-height:1.12; letter-spacing:-0.01em;
}
.hero h1 em{font-style:italic; color:var(--gold-bright); font-weight:400;}
.hero p.lede{
  margin-top:26px; font-size:1.05rem; line-height:1.65; max-width:46ch; color:rgba(239,232,214,0.78);
}
.hero-actions{margin-top:38px; display:flex; gap:18px; align-items:center;}
.btn-primary{
  background:var(--gold); color:var(--ink); padding:14px 26px; font-size:0.88rem;
  font-weight:500; letter-spacing:0.02em; border-radius:2px; display:inline-block;
}
.btn-primary:hover{background:var(--gold-bright); transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(184,145,47,0.5);}
.btn-ghost{font-size:0.85rem; color:var(--cream-text); opacity:0.8; border-bottom:1px solid rgba(239,232,214,0.35); padding-bottom:2px;}
.btn-ghost:hover{opacity:1; border-color:var(--gold-bright);}

/* ---------- CERTIFICATE CARD (hero visual) ---------- */
.cert-wrap{position:relative; display:flex; justify-content:center;}
.cert{
  width:100%; max-width:340px;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--paper-line);
  padding:34px 30px 30px;
  position:relative;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);
  transform:rotate(-2.2deg);
  animation:settle 1.1s cubic-bezier(.2,.9,.25,1) both;
}
.cert:hover{transform:rotate(0deg) translateY(-4px); box-shadow:0 40px 70px -20px rgba(0,0,0,0.6);}
@keyframes settle{
  0%{transform:rotate(-2.2deg) translateY(-18px) scale(0.97); opacity:0;}
  100%{transform:rotate(-2.2deg) translateY(0) scale(1); opacity:1;}
}
.cert::before, .cert::after{
  content:""; position:absolute; inset:8px; border:1px solid var(--gold);
  opacity:0.55; pointer-events:none;
}
.cert-kicker{font-family:'IBM Plex Mono'; font-size:0.62rem; letter-spacing:0.18em; color:var(--teal); text-transform:uppercase;}
.cert-name{font-family:'Fraunces'; font-size:1.5rem; margin-top:10px; line-height:1.25;}
.cert-role{font-size:0.8rem; color:#555; margin-top:2px;}
.cert-rule{height:1px; background:var(--paper-line); margin:18px 0;}
.cert-field{display:flex; justify-content:space-between; font-family:'IBM Plex Mono'; font-size:0.68rem; padding:5px 0; color:#444;}
.cert-field b{color:var(--ink); font-weight:500;}

.seal{
  position:absolute; top:-26px; right:-22px; width:104px; height:104px;
  animation:stamp 0.55s 0.75s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes stamp{
  0%{transform:scale(2.4) rotate(-18deg); opacity:0;}
  70%{opacity:1;}
  100%{transform:scale(1) rotate(-14deg); opacity:1;}
}
.seal svg{width:100%; height:100%;}

/* ---------- MANIFESTO ---------- */
.manifesto{
  padding:12vh 6vw; background:var(--paper);
  display:flex; justify-content:center; text-align:center;
}
.manifesto blockquote{
  max-width:820px; font-family:'Fraunces'; font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.15rem); line-height:1.5; color:var(--ink);
}
.manifesto blockquote span{color:var(--maroon); font-style:italic;}
.manifesto cite{
  display:block; margin-top:26px; font-family:'IBM Plex Mono'; font-size:0.72rem;
  letter-spacing:0.14em; color:var(--teal); font-style:normal; text-transform:uppercase;
}

/* ---------- REGISTER (what's included) ---------- */
.register{padding:4vh 6vw 12vh; background:var(--paper);}
.register-head{max-width:640px; margin:0 auto 46px; text-align:center;}
.register-head .label{font-family:'IBM Plex Mono'; font-size:0.7rem; letter-spacing:0.18em; color:var(--maroon); text-transform:uppercase;}
.register-head h2{font-family:'Fraunces'; font-size:clamp(1.7rem,3vw,2.3rem); margin-top:12px; font-weight:500;}

.ledger{max-width:760px; margin:0 auto; border-top:1px solid var(--ink);}
.ledger-row{
  display:grid; grid-template-columns:180px 1fr; gap:24px;
  padding:18px 4px; border-bottom:1px solid var(--paper-line);
  align-items:baseline;
}
.ledger-row:hover{background:rgba(184,145,47,0.06); padding-left:12px; padding-right:8px;}
.ledger-row .field{font-family:'IBM Plex Mono'; font-size:0.72rem; letter-spacing:0.1em; color:var(--teal); text-transform:uppercase;}
.ledger-row .value{font-size:0.98rem; color:var(--ink);}
.ledger-row .value small{display:block; color:#6b6558; font-size:0.82rem; margin-top:3px;}

/* ---------- FOUNDING PROGRAM ---------- */
.founding{
  background:var(--teal); color:var(--cream-text);
  padding:9vh 6vw; display:grid; grid-template-columns:1fr 1fr; gap:6vw; align-items:center;
}
.founding .label{font-family:'IBM Plex Mono'; font-size:0.7rem; letter-spacing:0.18em; color:var(--gold-bright); text-transform:uppercase;}
.founding h2{font-family:'Fraunces'; font-size:clamp(1.7rem,3vw,2.3rem); margin-top:14px; font-weight:500; line-height:1.25;}
.founding p{margin-top:18px; line-height:1.65; color:rgba(239,232,214,0.82); max-width:52ch;}
.founding-count{
  font-family:'Fraunces'; font-size:5.5rem; color:var(--gold-bright); line-height:1; text-align:center;
}
.founding-count-wrap{text-align:center; border-left:1px solid rgba(239,232,214,0.2); padding-left:6vw;}
.founding-count-label{font-family:'IBM Plex Mono'; font-size:0.7rem; letter-spacing:0.14em; margin-top:10px; opacity:0.8; text-transform:uppercase;}

/* ---------- FOMO ---------- */
.fomo{background:var(--paper); padding:8vh 6vw 2vh;}
.fomo-inner{max-width:900px; margin:0 auto; text-align:center;}
.fomo-head{font-family:'Fraunces'; font-size:clamp(1.5rem,2.6vw,2rem); font-weight:500; line-height:1.35;}
.fomo-head em{font-style:italic; color:var(--maroon);}
.fomo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; text-align:left;}
.fomo-card{border-top:2px solid var(--maroon); padding-top:16px;}
.fomo-card:hover{border-top-color:var(--gold); transform:translateY(-3px);}
.fomo-card .k{font-family:'IBM Plex Mono'; font-size:0.68rem; letter-spacing:0.14em; color:var(--maroon); text-transform:uppercase;}
.fomo-card p{margin-top:10px; font-size:0.92rem; line-height:1.55; color:var(--ink); opacity:0.85;}

/* ---------- VERIFY ---------- */
.verify{background:var(--ink-soft); padding:10vh 6vw; color:var(--cream-text);}
.verify-inner{max-width:640px; margin:0 auto; text-align:center;}
.verify .label{font-family:'IBM Plex Mono'; font-size:0.7rem; letter-spacing:0.18em; color:var(--gold-bright); text-transform:uppercase;}
.verify h2{font-family:'Fraunces'; font-size:clamp(1.6rem,2.8vw,2.1rem); margin-top:12px; font-weight:500;}
.verify p.sub{margin-top:14px; font-size:0.92rem; color:rgba(239,232,214,0.7); line-height:1.6;}
.verify-form{display:flex; gap:10px; margin-top:32px;}
.verify-form input{
  flex:1; background:var(--ink); border:1px solid rgba(184,145,47,0.35); color:var(--cream-text);
  padding:14px 16px; font-family:'IBM Plex Mono'; font-size:0.85rem; border-radius:2px;
}
.verify-form input:focus{outline:none; border-color:var(--gold-bright);}
.verify-form input::placeholder{color:rgba(239,232,214,0.4);}
.verify-form button{
  background:var(--gold); color:var(--ink); border:none; padding:14px 24px;
  font-size:0.85rem; font-weight:600; border-radius:2px; cursor:pointer; white-space:nowrap;
}
.verify-form button:hover{background:var(--gold-bright); transform:translateY(-2px);}
.verify-result{margin-top:28px; text-align:left; display:none;}
.verify-result.show{display:block;}
.verify-card{
  background:var(--ink); border:1px solid rgba(184,145,47,0.3); border-radius:4px; padding:24px 26px;
}
.verify-status{
  display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono'; font-size:0.7rem;
  letter-spacing:0.1em; text-transform:uppercase; padding:5px 12px; border-radius:20px;
}
.verify-status.verified{background:rgba(31,75,67,0.4); color:#7fd6b0; border:1px solid rgba(127,214,176,0.4);}
.verify-status.pending{background:rgba(184,145,47,0.15); color:var(--gold-bright); border:1px solid rgba(184,145,47,0.4);}
.verify-status.notfound{background:rgba(122,46,42,0.2); color:#e08c86; border:1px solid rgba(224,140,134,0.4);}
.verify-card .vname{font-family:'Fraunces'; font-size:1.3rem; margin-top:14px;}
.verify-card .vrole{font-size:0.85rem; color:rgba(239,232,214,0.65); margin-top:2px;}
.verify-card .vlink{display:inline-block; margin-top:14px; font-family:'IBM Plex Mono'; font-size:0.78rem; color:var(--gold-bright); border-bottom:1px solid rgba(217,179,84,0.4);}
.verify-card .vlink:hover{color:#fff; border-color:#fff;}
.verify-note{margin-top:16px; font-size:0.74rem; color:rgba(239,232,214,0.45); text-align:center;}

/* ---------- PRICING ---------- */
.pricing{padding:12vh 6vw; background:var(--ink); color:var(--cream-text);}
.pricing-head{text-align:center; max-width:600px; margin:0 auto 60px;}
.pricing-head .label{font-family:'IBM Plex Mono'; font-size:0.7rem; letter-spacing:0.18em; color:var(--gold-bright); text-transform:uppercase;}
.pricing-head h2{font-family:'Fraunces'; font-size:clamp(1.7rem,3vw,2.3rem); margin-top:12px; font-weight:500;}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:1080px; margin:0 auto;}
.plan{
  background:var(--ink-soft); border:1px solid rgba(184,145,47,0.22);
  padding:34px 28px; position:relative;
}
.plan:hover{transform:translateY(-6px); box-shadow:0 24px 50px -20px rgba(0,0,0,0.5); border-color:rgba(184,145,47,0.45);}
.plan.featured{border-color:var(--gold); background:#16282f;}
.plan.featured:hover{border-color:var(--gold-bright);}
.plan.featured::before{
  content:"RECOMMENDED"; position:absolute; top:-11px; left:28px;
  background:var(--gold); color:var(--ink); font-family:'IBM Plex Mono';
  font-size:0.62rem; letter-spacing:0.12em; padding:4px 10px;
}
.plan-name{font-family:'Fraunces'; font-size:1.35rem;}
.plan-price-usd{font-family:'Fraunces'; font-size:2.3rem; color:var(--gold-bright);}
.plan-price-usd sup{font-family:'IBM Plex Sans'; font-size:0.9rem; font-weight:400; opacity:0.6;}
.plan-billed{font-size:0.72rem; color:rgba(239,232,214,0.5); margin-top:4px;}
.plan-offer{
  margin-top:16px; background:rgba(184,145,47,0.12); border:1px solid rgba(184,145,47,0.35);
  padding:12px 14px; border-radius:2px;
}
.plan-offer .tag{font-family:'IBM Plex Mono'; font-size:0.6rem; letter-spacing:0.12em; color:var(--gold-bright); text-transform:uppercase;}
.plan-offer .amt{font-family:'Fraunces'; font-size:1.3rem; margin-top:4px;}
.plan-offer .pkr{font-size:0.72rem; color:rgba(239,232,214,0.55); margin-top:2px;}
.plan ul{list-style:none; margin-top:24px;}
.plan li{
  font-size:0.85rem; padding:8px 0; border-top:1px solid rgba(239,232,214,0.09);
  color:rgba(239,232,214,0.82);
}
.plan li:first-child{border-top:none;}

/* ---------- FOOTER / APPLY ---------- */
footer{
  background:var(--ink); color:var(--cream-text); text-align:center;
  padding:10vh 6vw 6vh; border-top:1px solid rgba(184,145,47,0.2);
}
.footer-logo-img{height:48px; width:auto; margin:0 auto 40px;}
footer h3{font-family:'Fraunces'; font-size:clamp(1.6rem,3vw,2.2rem); font-weight:500; max-width:20ch; margin:0 auto 20px;}
footer h3 em{color:var(--gold-bright); font-style:italic;}
footer p.sub{max-width:44ch; margin:0 auto 40px; color:rgba(239,232,214,0.65); font-size:0.92rem; line-height:1.6;}

.apply-form{max-width:520px; margin:0 auto; text-align:left;}
.apply-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;}
.apply-form input{
  width:100%; background:var(--ink-soft); border:1px solid rgba(184,145,47,0.3); color:var(--cream-text);
  padding:14px 16px; font-family:'IBM Plex Sans'; font-size:0.9rem; border-radius:2px; margin-bottom:12px;
}
.apply-form input:focus{outline:none; border-color:var(--gold-bright);}
.apply-form input::placeholder{color:rgba(239,232,214,0.4);}
.apply-form button{
  width:100%; background:var(--gold); color:var(--ink); border:none; padding:15px;
  font-size:0.92rem; font-weight:600; letter-spacing:0.02em; border-radius:2px; cursor:pointer;
}
.apply-form button:hover{background:var(--gold-bright); transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(184,145,47,0.5);}
.apply-success{
  background:rgba(31,75,67,0.3); border:1px solid rgba(127,214,176,0.35); color:#cdeee0;
  padding:14px 18px; border-radius:4px; font-size:0.88rem; margin-bottom:20px; text-align:left; max-width:520px; margin-left:auto; margin-right:auto;
}
.apply-error{
  background:rgba(122,46,42,0.25); border:1px solid rgba(224,140,134,0.4); color:#f2c9c5;
  padding:14px 18px; border-radius:4px; font-size:0.88rem; margin-bottom:20px; text-align:left; max-width:520px; margin-left:auto; margin-right:auto;
}
.apply-note{margin-top:16px; font-size:0.74rem; color:rgba(239,232,214,0.4);}

.foot-mono{font-family:'IBM Plex Mono'; font-size:0.7rem; letter-spacing:0.14em; opacity:0.5; margin-top:60px; text-transform:uppercase;}

@media (max-width:840px){
  .hero{grid-template-columns:1fr; padding-top:6vh;}
  .founding{grid-template-columns:1fr;}
  .founding-count-wrap{border-left:none; border-top:1px solid rgba(239,232,214,0.2); padding-left:0; padding-top:30px;}
  .fomo-grid{grid-template-columns:1fr; gap:28px;}
  .plans{grid-template-columns:1fr;}
  .navlinks{display:none;}
  .ledger-row{grid-template-columns:1fr;}
  .apply-row{grid-template-columns:1fr;}
  .verify-form{flex-direction:column;}
}