*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Neutral Harmony Bliss Tokens ── */
:root{
  /* Palette */
  --eggshell:#F4F1DE;
  --peach:#E07A5F;--peach-lt:#FDF0EC;--peach-dk:#C4614A;
  --indigo:#3D405B;--indigo-lt:#EEEEF3;--indigo-dk:#2A2D42;
  --teal:#81B29A;--teal-lt:#EDF4F0;--teal-dk:#5E9178;
  --cream:#F2CC8F;--cream-lt:#FDF6E7;--cream-dk:#D4A843;
  --warm-white:#FDFCF5;
  /* Semantic */
  --bg:#FAF8F2;--bg2:#FFFFFF;--bg3:#F0ECE0;
  --border:rgba(61,64,91,0.10);--border-md:rgba(61,64,91,0.18);
  --text:#2A2D42;--text2:#5A5E7A;--text3:#A0A4BC;
  /* Status */
  --green:#81B29A;--green-lt:#EDF4F0;--green-md:#81B29A;
  --red:#E07A5F;--red-lt:#FDF0EC;--red-md:#C4614A;
  --purple:#3D405B;--purple-lt:#EEEEF3;
  --amber:#D4A843;--amber-lt:#FDF6E7;--amber-md:#D4A843;
  --blue:#3D405B;--blue-lt:#EEEEF3;--blue-dk:#2A2D42;
  /* Shape */
  --radius:18px;--radius-sm:12px;--radius-xl:26px;--radius-pill:99px;
  --nav-h:68px;--safe-b:env(safe-area-inset-bottom,0px);
  /* Shadow — warm tinted */
  --shadow-sm:0 2px 12px rgba(61,64,91,0.10),0 1px 4px rgba(61,64,91,0.06);
  --shadow:0 8px 28px rgba(61,64,91,0.13);
  --shadow-accent:0 4px 18px rgba(224,122,95,0.28);
}

@media(prefers-color-scheme:dark){
  :root{
    --eggshell:#1E2035;
    --peach:#E8896E;--peach-lt:#2D1A14;--peach-dk:#F0A090;
    --indigo:#C5C8E0;--indigo-lt:#1A1C2E;--indigo-dk:#E0E2F0;
    --teal:#92C4AD;--teal-lt:#0D211A;--teal-dk:#A8D4BC;
    --cream:#F0C878;--cream-lt:#221A08;--cream-dk:#F5D898;
    --warm-white:#252840;
    --bg:#151728;--bg2:#1E2035;--bg3:#262944;
    --border:rgba(197,200,224,0.08);--border-md:rgba(197,200,224,0.15);
    --text:#E0E2F0;--text2:#8D90A8;--text3:#4A4D68;
    --green:#92C4AD;--green-lt:#0D211A;--green-md:#92C4AD;
    --red:#E8896E;--red-lt:#2D1A14;--red-md:#E8896E;
    --purple:#C5C8E0;--purple-lt:#1A1C2E;
    --amber:#F0C878;--amber-lt:#221A08;--amber-md:#F0C878;
    --blue:#C5C8E0;--blue-lt:#1A1C2E;--blue-dk:#E0E2F0;
    --shadow-sm:0 2px 8px rgba(0,0,0,0.35);
    --shadow:0 8px 28px rgba(0,0,0,0.50);
    --shadow-accent:0 4px 18px rgba(232,137,110,0.25);
  }
}

/* ── Base ── */
html,body{height:100%;overflow:hidden;background:var(--bg)}
body{font-family:-apple-system,BlinkMacSystemFont,'Sarabun','Noto Sans Thai',sans-serif;font-size:15px;color:var(--text);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}
input,select,textarea{background:var(--bg2);border:1.5px solid var(--border-md);border-radius:var(--radius-sm);padding:12px 14px;width:100%;font-size:15px;color:var(--text);appearance:none;-webkit-appearance:none;transition:border-color .2s,box-shadow .2s}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A8ABBE' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
input:focus,select:focus{border-color:var(--peach);box-shadow:0 0 0 3px rgba(224,122,95,0.15)}

/* ── Layout ── */
#app{display:flex;flex-direction:column;height:100dvh}
#screen{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--nav-h) + var(--safe-b) + 24px)}

/* ── Topbar ── */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;background:var(--bg);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--border)}
.topbar-title{font-size:22px;font-weight:800;letter-spacing:-0.6px;color:var(--text)}
.topbar-right{display:flex;align-items:center;gap:8px}

/* Month chip */
.month-chip{display:flex;align-items:center;gap:5px;background:var(--bg2);border:1.5px solid var(--border-md);border-radius:var(--radius-pill);padding:7px 14px;font-size:12px;color:var(--text2);font-weight:600;box-shadow:var(--shadow-sm)}
.month-chip select{background:none;border:none;padding:0;font-size:12px;color:var(--text2);width:auto;box-shadow:none;font-weight:600}

/* Icon button */
.icon-btn{width:36px;height:36px;border-radius:50%;background:var(--bg2);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text2);box-shadow:var(--shadow-sm);transition:transform .15s,background .15s}
.icon-btn:active{transform:scale(0.92);background:var(--bg3)}

/* ── Bottom Nav ── */
#bottom-nav{display:flex;align-items:flex-end;background:var(--bg2);border-top:1px solid var(--border);padding:8px 0 calc(var(--safe-b)+8px);flex-shrink:0;position:fixed;bottom:0;left:0;right:0;z-index:50;box-shadow:0 -4px 20px rgba(61,64,91,0.07)}
.bn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--text3);padding:4px 0;cursor:pointer;user-select:none;transition:color .2s}
.bn i{font-size:22px;transition:transform .2s}
.bn.on{color:var(--peach)}
.bn.on i{transform:scale(1.12)}
.bn-fab{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--peach) 0%,var(--peach-dk) 100%);display:flex;align-items:center;justify-content:center;margin-top:-20px;box-shadow:var(--shadow-accent);transition:transform .2s}
.bn-fab:active{transform:scale(0.92)}
.bn-fab i{font-size:24px;color:#fff}

/* ── Section label ── */
.sec-label{font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--text3);text-transform:uppercase;padding:20px 20px 8px}

/* ── Balance hero ── */
.balance-hero{padding:8px 20px 20px}
.balance-num{font-size:46px;font-weight:800;letter-spacing:-2px;line-height:1;color:var(--text)}
.balance-num.neg{color:var(--red-md)}
.balance-sub{font-size:13px;color:var(--text2);margin-top:7px;display:flex;gap:14px}
.bal-in{color:var(--teal-dk)}.bal-out{color:var(--peach)}
.save-pill{display:inline-flex;align-items:center;gap:5px;background:var(--teal-lt);border-radius:var(--radius-pill);padding:6px 14px;font-size:12px;color:var(--teal-dk);margin-top:12px;font-weight:700}

/* ── KPI Grid ── */
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 20px 8px}
.kpi-card{background:var(--bg2);border-radius:var(--radius);padding:16px;border:1.5px solid var(--border);box-shadow:0 3px 14px rgba(61,64,91,0.11),0 1px 4px rgba(61,64,91,0.07);transition:transform .15s}
.kpi-card:active{transform:scale(0.97)}
.kpi-label{font-size:11px;color:var(--text3);margin-bottom:6px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.kpi-val{font-size:20px;font-weight:800;color:var(--text)}
.kpi-val.green{color:var(--teal-dk)}.kpi-val.red{color:var(--peach)}.kpi-val.purple{color:var(--indigo)}.kpi-val.amber{color:var(--cream-dk)}

/* ── Alert bar ── */
.alert-bar{margin:6px 20px 10px;background:var(--cream-lt);border:1.5px solid rgba(212,168,67,0.2);border-radius:var(--radius-sm);padding:10px 14px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--cream-dk);font-weight:600}

/* ── Budget ── */
.budget-list{padding:0 20px 8px;display:flex;flex-direction:column;gap:14px}
.bud-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}
.bud-name{color:var(--text2);font-weight:600}
.bud-track{height:6px;background:var(--bg3);border-radius:var(--radius-pill);overflow:hidden}
.bud-fill{height:100%;border-radius:var(--radius-pill);transition:width .5s ease}

/* ── Transaction list ── */
.txn-list{background:var(--bg2);border-radius:var(--radius);margin:0 20px;padding:0 16px;display:flex;flex-direction:column;box-shadow:0 3px 14px rgba(61,64,91,0.10),0 1px 4px rgba(61,64,91,0.06);border:1.5px solid var(--border)}
.txn-item{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--border);animation:fadeUp .25s ease both}
.txn-item:last-child{border-bottom:none}
.txn-icon{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.ic-green{background:var(--teal-lt);color:var(--teal-dk)}
.ic-red{background:var(--peach-lt);color:var(--peach-dk)}
.ic-purple{background:var(--indigo-lt);color:var(--indigo)}
.ic-amber{background:var(--cream-lt);color:var(--cream-dk)}
.ic-gray{background:var(--bg3);color:var(--text3)}
.txn-info{flex:1;min-width:0}
.txn-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txn-meta{font-size:11px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txn-amt{font-size:15px;font-weight:800;flex-shrink:0}
.txn-amt.pos{color:var(--teal-dk)}.txn-amt.neg{color:var(--peach-dk)}.txn-amt.inst{color:var(--indigo)}

/* ── Divider ── */
.hdivider{height:1px;background:var(--border);margin:4px 0}

/* ── Card ── */
.card{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius);margin:0 20px 14px;overflow:hidden;box-shadow:0 3px 14px rgba(61,64,91,0.11),0 1px 4px rgba(61,64,91,0.07)}

/* ── Forms ── */
.form-body{padding:16px 20px;display:flex;flex-direction:column;gap:14px}
.fg{display:flex;flex-direction:column;gap:6px}
.fg label{font-size:12px;color:var(--text2);font-weight:700;letter-spacing:.3px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-actions{padding:4px 20px 20px;display:flex;gap:8px;justify-content:flex-end}
.btn-save{background:linear-gradient(135deg,var(--peach) 0%,var(--peach-dk) 100%);color:#fff;border-radius:var(--radius-sm);padding:12px 24px;font-size:14px;font-weight:700;box-shadow:var(--shadow-accent);transition:transform .15s,opacity .15s}
.btn-save:active{transform:scale(0.96);opacity:.9}
.btn-cancel{background:var(--bg2);color:var(--text2);border:1.5px solid var(--border-md);border-radius:var(--radius-sm);padding:12px 18px;font-size:14px;font-weight:600}
.btn-sm{padding:7px 14px;font-size:12px;border-radius:var(--radius-sm);font-weight:700;display:inline-flex;align-items:center;gap:4px;transition:transform .15s,opacity .15s}
.btn-sm:active{transform:scale(0.95);opacity:.85}
.btn-green{background:var(--teal);color:#fff}
.btn-outline{background:var(--bg2);color:var(--text2);border:1.5px solid var(--border-md)}

/* ── Tabs ── */
.tab-row{display:flex;border-bottom:1px solid var(--border);background:var(--bg2)}
.tab{flex:1;padding:13px 0;text-align:center;font-size:13px;color:var(--text3);border-bottom:2.5px solid transparent;cursor:pointer;font-weight:600;transition:color .2s}
.tab.on{color:var(--peach);border-bottom-color:var(--peach);font-weight:800}

/* ── Credit cards ── */
.cc-item{padding:16px;display:flex;flex-direction:column;gap:10px}
.cc-top{display:flex;align-items:center;justify-content:space-between}
.cc-dot-name{display:flex;align-items:center;gap:10px}
.cc-dot{width:13px;height:13px;border-radius:50%}
.cc-name{font-size:15px;font-weight:800}
.cc-meta{font-size:11px;color:var(--text3);margin-top:2px}
.cc-used{font-size:18px;font-weight:800;color:var(--peach-dk)}
.cc-avail{font-size:11px;color:var(--text3);margin-top:2px}
.cc-bar{height:6px;background:var(--bg3);border-radius:var(--radius-pill);overflow:hidden}
.cc-fill{height:100%;border-radius:var(--radius-pill);transition:width .5s ease}

/* ── Overlay ── */
#overlay{display:none;position:fixed;inset:0;z-index:100;flex-direction:column;background:var(--bg)}
#overlay.open{display:flex;animation:fadeUp .2s ease}
.ov-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.ov-back{width:38px;height:38px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text2);box-shadow:var(--shadow-sm)}
.ov-title{font-size:17px;font-weight:800;flex:1}
.ov-body{flex:1;overflow-y:auto;padding-bottom:24px}

/* ── Add sheet ── */
#add-sheet{display:none;position:fixed;inset:0;z-index:200}
#add-sheet.open{display:block}
.add-backdrop{position:absolute;inset:0;background:rgba(29,30,45,0.5);backdrop-filter:blur(4px)}
.add-panel{position:absolute;bottom:0;left:0;right:0;background:var(--bg);border-radius:var(--radius-xl) var(--radius-xl) 0 0;max-height:92dvh;overflow-y:auto;padding-bottom:calc(var(--safe-b)+28px);box-shadow:0 -8px 40px rgba(61,64,91,0.18);animation:slideUp .3s cubic-bezier(.32,.72,0,1)}
.add-handle{width:40px;height:4px;background:var(--border-md);border-radius:var(--radius-pill);margin:12px auto 6px}
.add-head{padding:8px 20px 6px;display:flex;align-items:center;justify-content:space-between}
.add-head-title{font-size:17px;font-weight:800}
.add-close{width:30px;height:30px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text2)}

/* ── Settings ── */
.set-section{margin:0 20px 18px}
.set-row{display:flex;align-items:center;padding:13px 0;border-bottom:1px solid var(--border);gap:10px}
.set-row:last-child{border-bottom:none}
.set-row input,.set-row select{flex:1}
.set-del{width:34px;height:34px;border-radius:10px;background:var(--peach-lt);color:var(--peach-dk);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.set-add-btn{width:100%;padding:12px;background:var(--peach-lt);color:var(--peach-dk);border-radius:var(--radius-sm);font-size:14px;font-weight:700;text-align:center;margin-top:8px;border:1.5px dashed rgba(224,122,95,0.35)}

/* ── Empty state ── */
.empty-state{text-align:center;padding:48px 20px;color:var(--text3);font-size:14px}

/* ── Bill stamps ── */
.btn-stamp{background:var(--teal);color:#fff;border-radius:var(--radius-sm);padding:7px 14px;font-size:12px;font-weight:700;transition:transform .15s}
.btn-stamp:active{transform:scale(0.95)}
.btn-unstamp{background:var(--peach-lt);color:var(--peach-dk);border-radius:var(--radius-sm);padding:7px 12px;font-size:12px;font-weight:700}
.paid-badge{display:inline-flex;align-items:center;gap:4px;background:var(--teal-lt);border-radius:var(--radius-pill);padding:4px 12px;font-size:12px;color:var(--teal-dk);font-weight:700}

/* ── Smart input ── */
.smart-wrap{padding:12px 20px 10px}
.smart-box{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1.5px solid var(--border-md);border-radius:var(--radius);padding:12px 14px;box-shadow:0 3px 14px rgba(61,64,91,0.10);transition:border-color .2s,box-shadow .2s}
.smart-box:focus-within{border-color:var(--peach);box-shadow:0 0 0 3px rgba(224,122,95,0.12)}
.smart-input{flex:1;background:none;border:none;font-size:15px;color:var(--text);outline:none}
.smart-input::placeholder{color:var(--text3)}
.smart-send{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--peach) 0%,var(--peach-dk) 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-accent);transition:transform .15s}
.smart-send:active{transform:scale(0.9)}
.smart-send i{font-size:16px;color:#fff}
.smart-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.smart-chip{background:var(--bg2);border:1.5px solid var(--border-md);border-radius:var(--radius-pill);padding:5px 12px;font-size:11px;color:var(--text2);cursor:pointer;white-space:nowrap;font-weight:600;transition:background .15s,transform .15s}
.smart-chip:active{background:var(--bg3);transform:scale(0.95)}
.smart-preview{margin:8px 20px 0;background:var(--bg2);border-radius:var(--radius);overflow:hidden;border:1.5px solid var(--border);box-shadow:var(--shadow-sm);animation:fadeUp .2s ease}
.sp-head{padding:8px 14px 6px;font-size:9px;font-weight:800;letter-spacing:1.2px;color:var(--text3);text-transform:uppercase}
.sp-row{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-top:1px solid var(--border)}
.sp-key{font-size:12px;color:var(--text2);font-weight:600}
.sp-val{font-size:13px;font-weight:700}
.sp-actions{display:flex;gap:8px;padding:10px 14px 12px;border-top:1px solid var(--border)}
.sp-confirm{flex:1;background:linear-gradient(135deg,var(--peach) 0%,var(--peach-dk) 100%);color:#fff;border-radius:var(--radius-sm);padding:10px;font-size:13px;font-weight:700}
.sp-edit{background:var(--bg);border:1.5px solid var(--border-md);border-radius:var(--radius-sm);padding:10px 16px;font-size:13px;color:var(--text2);font-weight:600}

/* ── Sub & Install cards ── */
.sub-card{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius);margin:0 20px 10px;padding:16px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-sm);animation:fadeUp .2s ease both}
.sub-name{font-size:15px;font-weight:800}
.sub-amt{font-size:20px;font-weight:800;color:var(--cream-dk)}
.sub-meta{font-size:12px;color:var(--text3)}
.inst-card{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius);margin:0 20px 10px;padding:16px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-sm);animation:fadeUp .2s ease both}
.inst-prog{height:6px;background:var(--bg3);border-radius:var(--radius-pill);overflow:hidden;margin-top:4px}
.inst-prog-fill{height:100%;border-radius:var(--radius-pill);background:var(--indigo);transition:width .5s ease}

/* ── Report cat bars ── */
.cat-bar-item{display:flex;align-items:center;gap:12px;padding:13px 20px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .15s}
.cat-bar-item:last-child{border-bottom:none}
.cat-bar-item:active{background:var(--bg3)}
.cat-bar-bg{flex:1;height:7px;background:var(--bg3);border-radius:var(--radius-pill);overflow:hidden}
.cat-bar-fill{height:100%;border-radius:var(--radius-pill);transition:width .4s ease}

/* ── Filter pills ── */
.filter-pills{display:flex;gap:7px;padding:10px 20px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.filter-pills::-webkit-scrollbar{display:none}
.fpill{padding:7px 16px;border-radius:var(--radius-pill);font-size:12px;font-weight:700;border:1.5px solid var(--border-md);background:var(--bg2);color:var(--text2);white-space:nowrap;cursor:pointer;flex-shrink:0;transition:all .2s}
.fpill.on{background:var(--peach);color:#fff;border-color:var(--peach);box-shadow:var(--shadow-accent)}

/* ── Sort bar ── */
.sort-bar{display:flex;align-items:center;gap:8px;padding:6px 20px 4px;font-size:11px;color:var(--text3);font-weight:600}
.sort-btn{padding:5px 11px;border-radius:8px;background:var(--bg2);border:1.5px solid var(--border);font-size:11px;color:var(--text2);cursor:pointer;font-weight:600;transition:all .2s}
.sort-btn.on{background:var(--peach-lt);color:var(--peach-dk);border-color:var(--peach)}

/* ── Mini bar chart ── */
.mini-bar-chart{padding:0 20px 14px}
.mini-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.mini-bar-label{font-size:11px;color:var(--text2);width:28px;flex-shrink:0;font-weight:600}
.mini-bar-track{flex:1;height:8px;background:var(--bg3);border-radius:var(--radius-pill);overflow:hidden}
.mini-bar-fill{height:100%;border-radius:var(--radius-pill)}
.mini-bar-amt{font-size:11px;font-weight:700;width:58px;text-align:right;flex-shrink:0}

/* ── Toggle head ── */
.tog-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 6px;cursor:pointer;user-select:none}
.tog-head-title{font-size:10px;font-weight:700;letter-spacing:1.2px;color:var(--text3);text-transform:uppercase}
.tog-icon{font-size:14px;color:var(--text3);transition:transform .25s}
.tog-icon.open{transform:rotate(180deg)}

/* ── CC cycle row ── */
.cc-cycle-row{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-top:1px solid var(--border);cursor:pointer;transition:background .15s}
.cc-cycle-row:active{background:var(--bg3)}

/* ── Animations ── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes slideUp{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Staggered list */
.txn-item:nth-child(1){animation-delay:.03s}
.txn-item:nth-child(2){animation-delay:.07s}
.txn-item:nth-child(3){animation-delay:.11s}
.txn-item:nth-child(4){animation-delay:.15s}
.txn-item:nth-child(5){animation-delay:.19s}
.kpi-card:nth-child(1){animation:fadeUp .2s .00s ease both}
.kpi-card:nth-child(2){animation:fadeUp .2s .05s ease both}
.kpi-card:nth-child(3){animation:fadeUp .2s .10s ease both}
.kpi-card:nth-child(4){animation:fadeUp .2s .15s ease both}
.sub-card:nth-child(1){animation-delay:.03s}
.sub-card:nth-child(2){animation-delay:.07s}
.inst-card:nth-child(1){animation-delay:.03s}
.inst-card:nth-child(2){animation-delay:.07s}