/* Zafirpay one-pager — tokens and styles per Design/README.md (2026-08-28 handoff) */

@font-face{font-family:Poppins;font-weight:300;src:url("../fonts/Poppins-Light.ttf") format("truetype");font-display:swap}
@font-face{font-family:Poppins;font-weight:400;src:url("../fonts/Poppins-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:Poppins;font-weight:500;src:url("../fonts/Poppins-Medium.ttf") format("truetype");font-display:swap}
@font-face{font-family:Poppins;font-weight:600;src:url("../fonts/Poppins-SemiBold.ttf") format("truetype");font-display:swap}
@font-face{font-family:Poppins;font-weight:700;src:url("../fonts/Poppins-Bold.ttf") format("truetype");font-display:swap}

:root{
  --acc:#624DE3;
  --acc-soft:rgba(98,77,227,0.08);
  --acc-glow:rgba(98,77,227,0.20);
  --deep:#380682;
  --darkest:#1C062D;
  --yellow:#FDD65B;
  --text:#222222;
  --text-2:rgba(34,34,34,0.7);
  --text-3:rgba(34,34,34,0.55);
  --border:#CFCFCF;
  --hairline:#EEEEF4;
  --gray-band:#F7F7FA;
  --error:#C0392B;
  --shadow-hover:0 12px 32px rgba(28,6,45,0.12);
  --shadow-subtle:0 4px 12px rgba(28,6,45,0.08);
  --ease-pop:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;min-width:320px;background:#FFFFFF;color:var(--text);font-family:Poppins,system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none}
a:hover{color:var(--deep)}
h1,h2,h3,p{margin:0}
::selection{background:rgba(98,77,227,0.22)}

.container{max-width:1200px;margin:0 auto;padding-left:clamp(20px,4vw,40px);padding-right:clamp(20px,4vw,40px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:7px;background:var(--acc);color:#FFFFFF;font-family:Poppins,system-ui,sans-serif;font-weight:700;cursor:pointer;transition:filter 120ms ease,box-shadow 200ms ease,transform 120ms ease}
.btn:hover{filter:brightness(1.1);color:#FFFFFF}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--acc-glow)}
.btn-nav{height:43px;padding:0 18px;font-size:14px}
.btn-nav:hover{box-shadow:0 0 0 5px var(--acc-glow)}
.btn-primary{height:58px;padding:0 28px;font-size:16px}
.btn-primary:hover{box-shadow:0 0 0 6px var(--acc-glow)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.96);border-bottom:1px solid var(--hairline)}
.nav-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text)}
.brand:hover{color:var(--text)}
.brand-word{font-weight:600;font-size:22px;letter-spacing:-0.02em}
.brand-word-light{color:#FFFFFF}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-size:15px;font-weight:500;color:var(--text)}
.nav-links a:hover{color:var(--acc)}

/* ---------- hero ---------- */
.hero{padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(56px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(40px,5vw,72px);align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:var(--acc-soft);border:1px solid rgba(98,77,227,0.18);color:var(--deep);font-size:13px;font-weight:600;white-space:nowrap}
.pill-icon{flex:none}
h1{margin-top:24px;font-weight:700;font-size:clamp(36px,4.2vw,54px);line-height:1.12;letter-spacing:-0.015em;color:var(--text);text-wrap:balance}
.lead{margin-top:24px;max-width:560px;font-weight:300;font-size:18px;line-height:1.65;color:var(--text-2);text-wrap:pretty}
.hero-cta{margin-top:36px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.credline{font-size:14px;color:var(--text-3)}

.hero-art{position:relative;aspect-ratio:3/2;border-radius:20px;background:#F3EDFB;overflow:hidden;transition:box-shadow 200ms ease}
.hero-art:hover{box-shadow:var(--shadow-hover)}
.hero-art img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- sections ---------- */
.section-head{max-width:640px}
.eyebrow{font-weight:600;font-size:14px;letter-spacing:0.08em;text-transform:uppercase;color:var(--acc)}
h2{margin-top:12px;font-weight:700;font-size:clamp(30px,3vw,40px);line-height:1.2;letter-spacing:-0.005em;color:var(--text)}
.section-head h2:first-child,.section-who h2{margin-top:0}
.h2-light{margin-top:0;color:#FFFFFF;max-width:640px}
.section-services{padding-bottom:clamp(64px,8vw,112px)}
.section-who{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(64px,8vw,112px)}
.section-who .lead{margin-top:20px}

/* ---------- cards ---------- */
.cards-grid{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
/* services has exactly 4 cards — a 380px minimum caps the row at 2, giving a
   balanced 2x2 on desktop instead of an orphaned 3+1 */
.section-services .cards-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.card{background:#FFFFFF;border:1px solid var(--border);border-radius:12px;padding:32px;display:flex;flex-direction:column;gap:16px;transition:box-shadow 200ms var(--ease-pop),transform 200ms var(--ease-pop),border-color 200ms ease}
.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-4px);border-color:rgba(98,77,227,0.45)}
.card h3{margin-top:8px;font-weight:700;font-size:22px;line-height:1.3;color:var(--text)}
.card p{font-size:15px;line-height:1.65;color:var(--text-2);text-wrap:pretty}
.card-icon{width:88px;height:88px;border-radius:16px;background:var(--acc-soft);overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform 300ms var(--ease-pop)}
.card:hover .card-icon{transform:scale(1.06)}
.card-icon img{display:block;width:100%;height:100%;object-fit:cover}
.card-compact{padding:28px;gap:12px}
.card-compact:hover{box-shadow:var(--shadow-subtle);transform:translateY(-2px);border-color:var(--border)}
.card-compact h3{margin-top:0;font-size:18px}
.card-compact p{font-size:14px;line-height:1.6}
.trust-icon{color:var(--acc)}

/* ---------- dark band ---------- */
.band-dark{background:linear-gradient(180deg,var(--deep) 0%,var(--darkest) 100%)}
.band-inner{padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(64px,8vw,104px)}
.steps-grid{margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(28px,4vw,56px)}
.step{display:flex;flex-direction:column;gap:14px;border-top:1px solid rgba(255,255,255,0.18);padding-top:24px}
.step-num{font-weight:700;font-size:15px;color:var(--yellow);letter-spacing:0.06em}
.step h3{font-weight:700;font-size:21px;color:#FFFFFF}
.step p{font-size:15px;line-height:1.65;color:rgba(255,255,255,0.72);text-wrap:pretty}
.steps-footnote{margin-top:48px;font-size:14px;color:rgba(255,255,255,0.55)}

/* ---------- who chips ---------- */
.chips{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}
.chip{display:inline-flex;align-items:center;height:46px;padding:0 22px;border-radius:999px;border:1px solid var(--border);background:#FFFFFF;font-size:15px;font-weight:500;color:var(--text);transition:border-color 200ms ease,background 200ms ease}
.chip:hover{border-color:var(--acc);background:var(--acc-soft)}

/* ---------- compliance band ---------- */
.band-gray{background:var(--gray-band)}
.status-box{margin-top:32px;border:1px solid var(--acc);background:var(--acc-soft);border-radius:12px;padding:clamp(24px,3vw,36px)}
.status-box p{font-size:16px;line-height:1.7;font-weight:500;color:var(--deep);text-wrap:pretty}

/* ---------- waiting list ---------- */
.section-wait{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(64px,8vw,112px)}
.wait-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(40px,5vw,72px);align-items:start}
.wait-copy{margin-top:20px;max-width:480px}
.form-card{background:#FFFFFF;border:1px solid var(--border);border-radius:12px;padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:20px;box-shadow:0 12px 32px rgba(28,6,45,0.08)}
.form-card label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600;color:var(--text)}
.label-opt{font-weight:400;color:rgba(34,34,34,0.5)}
.form-card input[type="text"],.form-card input[type="email"],.form-card input[type="url"]{height:50px;border:1px solid var(--border);border-radius:7px;padding:0 16px;font-family:Poppins,system-ui,sans-serif;font-size:15px;color:var(--text);transition:border-color 150ms ease,box-shadow 150ms ease}
.form-card select{height:50px;border:1px solid var(--border);border-radius:7px;padding:0 12px;font-family:Poppins,system-ui,sans-serif;font-size:15px;color:var(--text);background:#FFFFFF}
.form-card input:focus,.form-card select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-glow)}
.form-card input[aria-invalid="true"]{border-color:var(--error)}
.field-error{font-size:13px;font-weight:400;color:var(--error)}
.consent{flex-direction:row !important;align-items:flex-start;gap:10px;font-weight:400 !important;color:rgba(34,34,34,0.75);cursor:pointer}
.consent input{margin-top:4px;width:16px;height:16px;accent-color:var(--acc);flex:none}
.consent-error{margin-top:-12px}
.submit-error{font-size:14px;line-height:1.5;color:var(--error);background:rgba(192,57,43,0.06);border:1px solid rgba(192,57,43,0.35);border-radius:7px;padding:12px 16px}
.btn-submit[disabled]{opacity:0.6;cursor:default;filter:none}
.hp-field{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.form-success{background:#FFFFFF;border:1px solid var(--acc);border-radius:12px;padding:40px;display:flex;flex-direction:column;gap:12px;box-shadow:0 12px 32px rgba(28,6,45,0.10)}
.success-title{font-weight:600;font-size:18px;color:var(--text)}
.success-sub{font-size:15px;color:var(--text-2)}

/* ---------- footer ---------- */
.footer{background:var(--darkest)}
.footer-inner{padding-top:clamp(56px,6vw,80px);padding-bottom:40px;display:flex;flex-direction:column;gap:40px}
.footer-top{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
.footer-brand{display:flex;flex-direction:column;gap:10px;max-width:360px}
.footer-tag{font-size:15px;color:rgba(255,255,255,0.65)}
.footer-company{display:flex;flex-direction:column;gap:6px;font-size:14px;color:rgba(255,255,255,0.65)}
.footer-company-name{font-weight:600;color:rgba(255,255,255,0.9)}
.footer-company a{color:rgba(255,255,255,0.65)}
.footer-company a:hover{color:#FFFFFF}
.footer-links{display:flex;gap:24px;font-size:14px;align-items:flex-start}
.footer-links a{color:rgba(255,255,255,0.65)}
.footer-links a:hover{color:#FFFFFF}
.footer-disclaimers{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,0.14);padding-top:32px;font-size:13px;line-height:1.6;color:rgba(255,255,255,0.5)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:13px;color:rgba(255,255,255,0.45)}

/* ---------- legal pages ---------- */
.legal{max-width:760px;padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(64px,8vw,112px)}
.legal h1{margin:0;font-weight:700;font-size:clamp(32px,3.4vw,44px);line-height:1.15;letter-spacing:-0.01em;color:var(--text)}
.legal-updated{margin:12px 0 0;font-size:14px;color:var(--text-3)}
.legal h2{margin:40px 0 0;font-size:22px;line-height:1.3}
.legal p{margin:14px 0 0;font-size:15.5px;line-height:1.7;color:var(--text-2)}
.legal ul{margin:14px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.legal li{font-size:15.5px;line-height:1.7;color:var(--text-2)}
.legal strong{color:var(--text)}

/* ---------- reveal animation ---------- */
html.anim [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-pop),transform .7s var(--ease-pop)}
html.anim [data-reveal="in"]{opacity:1;transform:none}
html.anim .reveal-delay-100[data-reveal]{transition-delay:100ms}
html.anim .reveal-delay-120[data-reveal]{transition-delay:120ms}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.anim [data-reveal]{opacity:1;transform:none;transition:none}
  .card,.card-icon,.btn{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .nav-links{display:none}
}