/* dozp.top — Trust Fintech design system. Hand-authored, no build step. */

:root{
  --ink:#0b1f3a; --ink-2:#334966; --muted:#5b6b82; --line:#e6ebf2;
  --bg:#f6f8fc; --surface:#ffffff; --surface-2:#f0f4fa;
  --brand:#1d4ed8; --brand-700:#1742b0; --brand-50:#eaf1ff;
  --accent:#10b981; --accent-700:#0b8c63; --accent-50:#e6faf3;
  --warn:#f59e0b; --danger:#e23b3b;
  --grad:linear-gradient(120deg,#1d4ed8 0%,#3b82f6 55%,#10b981 130%);
  --grad-soft:linear-gradient(160deg,#0b1f3a 0%,#15356e 60%,#1d4ed8 130%);
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px;
  --sh-1:0 1px 2px rgba(11,31,58,.06),0 2px 8px rgba(11,31,58,.05);
  --sh-2:0 6px 20px rgba(11,31,58,.08),0 2px 6px rgba(11,31,58,.05);
  --sh-3:0 18px 50px rgba(20,53,110,.18);
  --maxw:1140px;
  --font:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{line-height:1.18;margin:0 0 .5em;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(1.9rem,4.4vw,3rem)} h2{font-size:clamp(1.4rem,2.6vw,2rem)} h3{font-size:1.18rem}
p{margin:0 0 1rem} a{color:var(--brand);text-decoration:none} a:hover{color:var(--brand-700)}
img{max-width:100%;display:block} svg{flex:none}
.ic{vertical-align:-2px}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.6rem 1rem;border-radius:8px;z-index:200}
.skip:focus{left:12px;top:12px}
.muted{color:var(--muted)}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.container--narrow{max-width:760px}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;font-size:.98rem;line-height:1;padding:.8rem 1.25rem;border-radius:999px;
  border:1px solid transparent;cursor:pointer;transition:transform .12s ease,box-shadow .18s ease,background .18s;
  white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(29,78,216,.28)}
.btn--primary:hover{color:#fff;box-shadow:0 10px 26px rgba(29,78,216,.36);transform:translateY(-1px)}
.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--sh-1)}
.btn--ghost:hover{border-color:#cdd8e8;color:var(--ink);box-shadow:var(--sh-2)}
.btn--sm{padding:.55rem .9rem;font-size:.88rem}
.btn--lg{padding:1rem 1.6rem;font-size:1.05rem}
.btn--block{display:flex;width:100%}

/* ── header ──────────────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.site-header.is-stuck{border-color:var(--line);box-shadow:var(--sh-1)}
.site-header__bar{display:flex;align-items:center;gap:18px;height:68px}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.25rem;color:var(--ink);letter-spacing:-.02em}
.brand__mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;box-shadow:0 4px 12px rgba(29,78,216,.35)}
.brand__dot{color:var(--brand)} .brand--light,.brand--light .brand__dot{color:#fff}
.site-nav{display:flex;gap:6px;margin-left:8px}
.site-nav a{padding:.55rem .85rem;border-radius:10px;color:var(--ink-2);font-weight:600;font-size:.96rem}
.site-nav a:hover{background:var(--surface-2);color:var(--ink)}
.site-nav a.is-active{color:var(--brand);background:var(--brand-50)}
.header-cta{margin-left:auto}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);background:var(--surface);border-radius:12px;flex-direction:column;gap:5px;align-items:center;justify-content:center;cursor:pointer}
.burger span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;flex-direction:column;gap:4px;padding:12px 20px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.mobile-menu a{padding:.8rem .6rem;border-radius:10px;font-weight:600;color:var(--ink)}
.mobile-menu a:hover{background:var(--surface-2)}
.mobile-menu .btn{margin-top:8px}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--grad-soft);color:#fff;overflow:hidden;padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem)}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 60% at 85% 10%,rgba(16,185,129,.25),transparent 60%),
  radial-gradient(50% 50% at 10% 90%,rgba(59,130,246,.3),transparent 60%);pointer-events:none}
.hero__inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero__title{color:#fff;font-size:clamp(2rem,4.6vw,3.2rem)}
.grad{background:linear-gradient(90deg,#8ef0c8,#bfe0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__lead{color:#d7e3f7;font-size:1.1rem;max-width:34em;margin-bottom:1.4rem}
.pill{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  color:#eaf2ff;padding:.4rem .8rem;border-radius:999px;font-size:.85rem;font-weight:600;margin-bottom:1.1rem}
.hero__trust{list-style:none;display:flex;flex-wrap:wrap;gap:14px 22px;padding:0;margin:1.4rem 0 0;color:#cfe0f7;font-size:.93rem}
.hero__trust li{display:inline-flex;align-items:center;gap:.4rem}
.hero__trust .ic{color:#7ef0c0}

.selector{background:rgba(255,255,255,.97);color:var(--ink);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-3)}
.selector__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.selector__chips{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}
.field{display:block} .field__label{display:block;font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:4px}
.field__out{display:block;font-size:1.3rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.field__out--xl{font-size:1.8rem;color:var(--brand)}
.field--lg{margin-bottom:18px}
.field__scale{display:flex;justify-content:space-between;font-size:.76rem;color:var(--muted);margin-top:4px}
.field select{width:100%;padding:.7rem .8rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);font:inherit;color:var(--ink)}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;
  background:linear-gradient(90deg,var(--brand),var(--accent));margin-top:10px;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--brand);box-shadow:0 2px 8px rgba(29,78,216,.4)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--brand);box-shadow:0 2px 8px rgba(29,78,216,.4)}

.toggle{position:relative;cursor:pointer}
.toggle input{position:absolute;opacity:0}
.toggle span{display:inline-block;padding:.55rem .9rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:.88rem;font-weight:600;color:var(--ink-2);transition:.15s}
.toggle input:checked+span{background:var(--brand-50);border-color:var(--brand);color:var(--brand-700)}
.toggle input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}

.hero__stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:18px}
.stat__num{font-size:1.9rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.stat__lbl{font-size:.82rem;color:#cfe0f7}

/* ── sections ────────────────────────────────────────────────────────────── */
.section{padding:clamp(2.2rem,5vw,3.6rem) 0}
.section--alt{background:var(--surface)}
.section--center{text-align:center}
.section__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:1.6rem}
.section__head--center{flex-direction:column;text-align:center;gap:.3rem}
.section__sub{color:var(--muted);margin:0}
.link-arrow{font-weight:700;display:inline-flex;align-items:center;gap:.3rem}
.page-head{padding:2.4rem 0 .5rem}.page-head--center{text-align:center}
.page-head h1{margin-bottom:.3rem}.page-head p{color:var(--muted);max-width:42em}
.page-head--center p{margin-inline:auto}
.empty{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);padding:2rem;text-align:center;color:var(--muted)}
.result-count{color:var(--muted);font-weight:600;margin:0 0 1rem}

/* ── chips / badges / pills ──────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 12px}
.chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--surface-2);color:var(--ink-2);
  font-size:.82rem;font-weight:600;padding:.32rem .6rem;border-radius:999px;border:1px solid transparent}
.chip .ic{color:var(--brand)}
.chip--accent{background:var(--accent-50);color:var(--accent-700)}
.chip--btn{cursor:pointer;background:var(--surface);border-color:var(--line);color:var(--ink-2);transition:.15s}
.chip--btn:hover{border-color:#cdd8e8;color:var(--ink)}
.chip--btn.is-active{background:var(--brand-50);border-color:var(--brand);color:var(--brand-700)}
.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;font-weight:700;padding:.28rem .6rem;border-radius:8px}
.badge--soft{background:var(--surface-2);color:var(--ink-2)}
.badge--ok{background:var(--accent-50);color:var(--accent-700)}
.badge--accent{background:var(--brand-50);color:var(--brand-700)}

/* ── company cards ───────────────────────────────────────────────────────── */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.ccard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;box-shadow:var(--sh-1);transition:transform .16s ease,box-shadow .2s ease,border-color .2s;display:flex;flex-direction:column}
.ccard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#dbe4f1}
.ccard--featured{border-color:var(--brand);box-shadow:0 10px 30px rgba(29,78,216,.16)}
.ccard--featured::before{content:"Топ вибір";position:absolute;top:-10px;left:18px;background:var(--grad);color:#fff;font-size:.72rem;font-weight:800;padding:.25rem .6rem;border-radius:999px;box-shadow:var(--sh-1)}
.ccard__head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ccard__logo{flex:none;width:52px;height:52px;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:var(--surface-2)}
.ccard__logo-img{width:52px;height:52px;object-fit:contain}
.ccard__logo-ph{font-weight:800;color:var(--brand);font-size:1.05rem}
.ccard__name{font-weight:800;font-size:1.08rem;display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.ccard__rank{font-size:.72rem;font-weight:800;color:var(--brand-700);background:var(--brand-50);padding:.1rem .4rem;border-radius:6px}
.ccard__actions{display:grid;grid-template-columns:1.3fr .8fr;gap:8px;margin-top:auto;padding-top:12px}
.arbar{display:flex;align-items:center;gap:10px;margin:6px 0 2px}
.arbar__track{flex:1;height:7px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.arbar__fill{height:100%;background:linear-gradient(90deg,var(--accent),#34d399);border-radius:6px}
.arbar__val{font-size:.8rem;font-weight:800;color:var(--accent-700)}

/* ── steps / cta band ────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.step__n{width:40px;height:40px;border-radius:12px;background:var(--grad);color:#fff;font-weight:800;display:grid;place-items:center;margin-bottom:12px}
.step p{color:var(--muted);margin:0}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--grad-soft);color:#fff;border-radius:var(--r-xl);padding:34px;box-shadow:var(--sh-2)}
.cta-band h2{color:#fff;margin-bottom:.3rem}.cta-band p{color:#d7e3f7;margin:0}

/* ── filters ─────────────────────────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:18px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-1);margin-bottom:1.4rem}
.filters__group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filters__label{font-size:.84rem;font-weight:700;color:var(--muted)}

/* ── company landing ─────────────────────────────────────────────────────── */
.breadcrumbs{padding-top:1.2rem;font-size:.85rem;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.breadcrumbs span{color:var(--muted)}
.company-hero{padding:1.2rem 0 0}
.company-hero__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:26px;box-shadow:var(--sh-2)}
.company-hero__main{display:flex;align-items:center;gap:18px}
.company-hero__logo{width:72px;height:72px;border-radius:18px;overflow:hidden;display:grid;place-items:center;background:var(--surface-2)}
.company-hero__ph{font-weight:800;font-size:1.5rem;color:var(--brand)}
.company-hero h1{margin:0 0 .4rem}
.company-hero__meta{display:flex;gap:8px;flex-wrap:wrap}
.company-hero__cta{min-width:240px;flex:1}
.company-hero__note{text-align:center;font-size:.78rem;color:var(--muted);margin:.5rem 0 0}
.company-grid{display:grid;grid-template-columns:1fr 320px;gap:28px}
.factbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-1);margin-bottom:1.4rem}
.factgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0}
.factgrid div{background:var(--bg);border-radius:var(--r);padding:12px 14px}
.factgrid dt{font-size:.8rem;color:var(--muted);margin-bottom:2px}
.factgrid dd{margin:0;font-weight:800;font-size:1.05rem;color:var(--ink)}
.prose{font-size:1.02rem;color:var(--ink-2)}.prose h2{color:var(--ink);margin-top:1.4rem}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.4rem 0}
.proscons__col{border-radius:var(--r-lg);padding:18px;border:1px solid var(--line);background:var(--surface)}
.proscons__col ul{margin:.5rem 0 0;padding-left:1.1rem}.proscons__col li{margin-bottom:.4rem}
.proscons__col--pro h3{color:var(--accent-700)} .proscons__col--con h3{color:var(--warn)}
.faq{margin-top:1.6rem}
.faq__item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.4rem 1rem;margin-bottom:10px}
.faq__item summary{cursor:pointer;font-weight:700;padding:.7rem 0;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item[open]{box-shadow:var(--sh-1)}
.company-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:88px;align-self:start}
.sidecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-1)}
.sidecard .btn{margin-top:8px}
.risk-note{font-size:.84rem;color:var(--ink-2);background:#fff8ec;border:1px solid #f6e2bd;border-radius:var(--r);padding:14px 16px}
.risk-note strong{color:var(--warn)}

/* ── wizard / compare ────────────────────────────────────────────────────── */
.wizard-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:30px;box-shadow:var(--sh-2)}
.wizard-card__note{display:flex;align-items:center;gap:.4rem;justify-content:center;color:var(--muted);font-size:.85rem;margin:1rem 0 0}
.wizard-card__note .ic{color:var(--accent)}
.compare-pick{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:14px;align-items:end;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-1);margin-bottom:1.6rem}
.compare-table-wrap{overflow-x:auto}
.compare-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.compare-table th,.compare-table td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--line)}
.compare-table thead th{background:var(--surface-2);font-size:.9rem}
.compare-table__lbl{text-align:left;font-weight:700;color:var(--muted)}

/* ── footer ──────────────────────────────────────────────────────────────── */
.site-footer{background:var(--ink);color:#c6d3e6;padding:3rem 0 2rem;margin-top:2rem}
.site-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;padding-bottom:1.8rem;border-bottom:1px solid rgba(255,255,255,.1)}
.site-footer__brand p{margin-top:.8rem;max-width:34em;font-size:.92rem;color:#9fb1cc}
.site-footer__col h4{color:#fff;font-size:.95rem;margin-bottom:.7rem}
.site-footer__col a{display:block;color:#c6d3e6;padding:.28rem 0;font-size:.92rem}
.site-footer__col a:hover{color:#fff}
.site-footer__legal{padding-top:1.4rem;font-size:.82rem;color:#8fa2bf}
.site-footer__legal p{margin:.5rem 0}.site-footer__legal strong{color:#e6edf7}

/* ── flash / error ───────────────────────────────────────────────────────── */
.flash-wrap{margin-top:14px}
.flash{padding:.8rem 1rem;border-radius:12px;margin-bottom:8px;font-weight:600}
.flash--error{background:#fdecec;color:#b42323;border:1px solid #f6c9c9}
.flash--success{background:var(--accent-50);color:var(--accent-700);border:1px solid #bde6d5}
.flash--info{background:var(--brand-50);color:var(--brand-700);border:1px solid #c5d8f8}
.error-page{text-align:center;padding:3rem 0}
.error-page__code{font-size:5rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.04em}
.error-page__actions{display:flex;gap:12px;justify-content:center;margin-top:1.2rem;flex-wrap:wrap}

/* ── reveal animation ────────────────────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
[data-reveal].is-in{opacity:1;transform:none}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .hero__inner{grid-template-columns:1fr;gap:26px}
  .company-grid{grid-template-columns:1fr}
  .company-side{position:static}
  .steps{grid-template-columns:1fr}
  .compare-pick{grid-template-columns:1fr}
}
@media(max-width:720px){
  .site-nav,.header-cta{display:none}
  .burger{display:flex}
  .mobile-menu.is-open{display:flex}
  .selector__row{grid-template-columns:1fr}
  .hero__stats{grid-template-columns:1fr 1fr}
  .proscons{grid-template-columns:1fr}
  .site-footer__grid{grid-template-columns:1fr}
  .section__head{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .btn,.ccard{transition:none}
}