/* ─────────────────────────────────────────────────────────────
   Vrutaz Advisors — shared design system
   Brand: blue #0571D4 · navy #0B2D50
   ───────────────────────────────────────────────────────────── */

:root{
  --blue:#0571D4;
  --blue-dark:#0559A6;
  --blue-tint:#EEF6FF;
  --blue-tint-2:#DCEBFC;
  --navy:#0B2D50;
  --navy-soft:#14406E;
  --slate:#5B6C80;
  --slate-light:#8395A8;
  --line:#E1E8F0;
  --line-soft:#EDF2F7;
  --wash:#F6F9FC;
  --white:#fff;
  --green:#11A66B;
  --green-tint:#E7F7F0;
  --amber:#C77700;
  --amber-tint:#FFF5E5;
  --red:#D0342C;
  --red-tint:#FDECEB;
  --radius:14px;
  --radius-lg:20px;
  --radius-xl:26px;
  --radius-pill:100px;
  --shadow-sm:0 1px 2px rgba(11,45,80,.05), 0 1px 3px rgba(11,45,80,.04);
  --shadow:0 6px 20px -6px rgba(11,45,80,.10), 0 2px 8px -4px rgba(11,45,80,.06);
  --shadow-lg:0 32px 64px -32px rgba(11,45,80,.30);
  --ink:#0A1F33;
  --font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--font); color:var(--navy);
  background:var(--white); line-height:1.55; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; line-height:1.2; font-weight:680; letter-spacing:-.018em;}
h1{font-size:clamp(2rem,4vw,3rem);}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem);}
h3{font-size:1.15rem;}
p{margin:0;}
a{color:var(--blue); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}
button,input,select,textarea{font:inherit; color:inherit;}
small{font-size:.84rem;}

.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:860px; margin:0 auto; padding:0 24px;}
.muted{color:var(--slate);}
.tiny{font-size:.82rem;}
.center{text-align:center;}
.mono-num{font-variant-numeric:tabular-nums;}

/* ── Buttons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--radius-pill); border:1.5px solid transparent;
  font-weight:600; font-size:.95rem; cursor:pointer; text-decoration:none;
  transition:background .15s, border-color .15s, color .15s, transform .06s;
  white-space:nowrap;
}
.btn:hover{text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--blue); color:#fff;}
.btn-primary:hover{background:var(--blue-dark); color:#fff;}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:var(--navy-soft); color:#fff;}
.btn-ghost{background:#fff; color:var(--navy); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue);}
.btn-quiet{background:transparent; color:var(--slate); border-color:transparent; padding:8px 12px;}
.btn-quiet:hover{color:var(--navy); background:var(--wash);}
.btn-sm{padding:8px 15px; font-size:.87rem; border-radius:var(--radius-pill);}
.btn-pill{border-radius:var(--radius-pill);}
.btn-dark{background:var(--ink); color:#fff; border-radius:var(--radius-pill);}
.btn-dark:hover{background:#16344f; color:#fff;}
.btn .chev{transition:transform .16s;}
.btn:hover .chev{transform:translateX(3px);}
.btn-lg{padding:15px 30px; font-size:1.02rem;}
.btn-block{width:100%;}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed;}

/* ── Cards / surfaces ──────────────────────────────────────── */
.card{background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:26px;}
.card-flat{background:var(--wash); border:1px solid var(--line-soft); border-radius:var(--radius); padding:20px;}
.panel{background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;}
.panel-head{padding:18px 22px; border-bottom:1.5px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.panel-head h3{font-size:1.02rem;}
.panel-body{padding:22px;}

/* ── Pills / badges ────────────────────────────────────────── */
.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:100px; font-size:.77rem; font-weight:600; letter-spacing:.01em;}
.pill-blue{background:var(--blue-tint); color:var(--blue-dark);}
.pill-green{background:var(--green-tint); color:var(--green);}
.pill-amber{background:var(--amber-tint); color:var(--amber);}
.pill-red{background:var(--red-tint); color:var(--red);}
.pill-grey{background:var(--wash); color:var(--slate); border:1px solid var(--line);}
.dot{width:7px; height:7px; border-radius:50%; flex:none;}

/* ── Forms ─────────────────────────────────────────────────── */
.field{margin-bottom:18px;}
.field > label, .lbl{display:block; font-size:.87rem; font-weight:600; color:var(--navy); margin-bottom:7px;}
.hint{font-size:.82rem; color:var(--slate); margin-top:6px;}
.inp, select.inp, textarea.inp{
  width:100%; padding:11px 14px; border:1.5px solid var(--line); border-radius:10px;
  background:#fff; font-size:.95rem; transition:border-color .15s, box-shadow .15s;
}
.inp:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(5,113,212,.13);}
.inp::placeholder{color:var(--slate-light);}
select.inp{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235B6C80' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;}
.err{color:var(--red); font-size:.82rem; margin-top:6px;}
.inp.bad{border-color:var(--red);}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:640px){ .row2{grid-template-columns:1fr;} }

/* ── Choice tiles (radio/checkbox cards) ───────────────────── */
.choice{
  display:block; border:1.5px solid var(--line); border-radius:var(--radius);
  padding:18px; cursor:pointer; background:#fff; transition:border-color .15s, box-shadow .15s, background .15s;
}
.choice:hover{border-color:var(--blue);}
.choice.sel{border-color:var(--blue); background:var(--blue-tint); box-shadow:0 0 0 3px rgba(5,113,212,.11);}
.choice.off{opacity:.5; cursor:not-allowed; background:var(--wash);}
.choice.off:hover{border-color:var(--line);}
.choice-grid{display:grid; gap:14px;}
@media(min-width:720px){ .choice-grid.c2{grid-template-columns:1fr 1fr;} .choice-grid.c3{grid-template-columns:repeat(3,1fr);} }

/* ── Nav (marketing) ───────────────────────────────────────── */
.nav{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.93); backdrop-filter:blur(10px); border-bottom:1.5px solid var(--line);}
.nav .wrap{display:flex; align-items:center; gap:22px; height:72px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:34px; width:auto;}
.navlinks{display:flex; gap:26px; margin-left:auto; font-size:.93rem;}
.navlinks a{color:var(--slate); font-weight:500;}
.navlinks a:hover{color:var(--blue); text-decoration:none;}
.navcta{display:flex; align-items:center; gap:12px; margin-left:auto;}
.navlinks + .navcta{margin-left:0;}
@media(max-width:900px){ .navlinks{display:none;} }

/* ── Footer ────────────────────────────────────────────────── */
.footer{background:var(--navy); color:#C9D6E4; padding:56px 0 30px; margin-top:80px;}
.footer a{color:#C9D6E4; font-size:.9rem;}
.footer a:hover{color:#fff;}
.footer-grid{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:34px;}
@media(max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr;} }
.footer h4{color:#fff; font-size:.88rem; margin-bottom:14px; letter-spacing:.03em; text-transform:uppercase;}
.footer li{margin-bottom:9px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.13); margin-top:40px; padding-top:22px; font-size:.83rem; color:#8FA3B8; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}

/* ── Tables ────────────────────────────────────────────────── */
.tbl-scroll{overflow-x:auto;}
table.tbl{width:100%; border-collapse:collapse; font-size:.92rem;}
table.tbl th{text-align:left; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--slate); font-weight:650; padding:12px 14px; border-bottom:1.5px solid var(--line); white-space:nowrap;}
table.tbl td{padding:14px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
table.tbl tr:last-child td{border-bottom:none;}

/* ── Steps / progress ──────────────────────────────────────── */
.steps{display:flex; flex-direction:column; gap:0;}
.step{display:flex; gap:14px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--line-soft);}
.step:last-child{border-bottom:none;}
.step-dot{width:22px; height:22px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:700; color:#fff; margin-top:2px;}
.step-dot.done{background:var(--green);}
.step-dot.now{background:var(--blue); box-shadow:0 0 0 4px rgba(5,113,212,.16);}
.step-dot.todo{background:#fff; border:1.8px solid var(--line); color:var(--slate-light);}
.step-t{font-weight:600; font-size:.95rem;}
.step-d{font-size:.85rem; color:var(--slate);}

.bar{height:7px; background:var(--line-soft); border-radius:100px; overflow:hidden;}
.bar > i{display:block; height:100%; background:var(--blue); border-radius:100px; transition:width .4s;}

/* ── Utilities ─────────────────────────────────────────────── */
.stack{display:flex; flex-direction:column;}
.gap8{gap:8px;} .gap12{gap:12px;} .gap16{gap:16px;} .gap24{gap:24px;}
.flex{display:flex;} .between{justify-content:space-between;} .aic{align-items:center;}
.wrapf{flex-wrap:wrap;}
.grid{display:grid; gap:20px;}
@media(min-width:760px){ .grid.g2{grid-template-columns:1fr 1fr;} .grid.g3{grid-template-columns:repeat(3,1fr);} .grid.g4{grid-template-columns:repeat(4,1fr);} }
.mt8{margin-top:8px;} .mt16{margin-top:16px;} .mt24{margin-top:24px;} .mt32{margin-top:32px;} .mt48{margin-top:48px;}
.mb8{margin-bottom:8px;} .mb16{margin-bottom:16px;} .mb24{margin-bottom:24px;} .mb32{margin-bottom:32px;}
.sec{padding:92px 0;}
.sec-tight{padding:48px 0;}
.hr{height:1.5px; background:var(--line); border:none; margin:28px 0;}
.empty{text-align:center; padding:44px 20px; color:var(--slate);}
.empty h3{color:var(--navy); margin-bottom:6px;}