/* =========================================================
   ASTAKARA SIMPLE FINANCIAL MODEL — V1.2 WEB
   Design system matched to astakara landing page
========================================================= */
:root{
    --ink:#0b1f3a;
    --muted:#55677f;
    --cream:#eaf3fb;
    --soft:#dbe9f5;
    --white:#ffffff;
    --accent:#1e5fa8;
    --accent-light:#6fb8ea;
    --line:#c9dced;
    --good:#1c8a5b;
    --good-bg:#e7f5ee;
    --watch:#b8790f;
    --watch-bg:#fbf1de;
    --attn:#c0392b;
    --attn-bg:#fbe9e7;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
    font-family:Arial,Helvetica,sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
h1,h2,h3,h4{
    font-family:"Sora",Arial,Helvetica,sans-serif;
    font-weight:800;
    letter-spacing:-.02em;
}
button{font-family:inherit;cursor:pointer;}
.container{width:92%;max-width:1180px;margin:auto;}
.container-narrow{width:92%;max-width:840px;margin:auto;}

/* ---------- App Header ---------- */
.app-header{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
}
.app-header-inner{
    width:92%;max-width:1180px;margin:auto;
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 0;
}
.app-logo{
    display:flex;align-items:center;gap:9px;
    font-family:"Sora",Arial,sans-serif;font-weight:800;font-size:18px;color:var(--ink);
}
.app-logo .logo-img{
    height:24px;width:auto;display:block;
}
.app-logo .tag{
    font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--accent);
    text-transform:uppercase;margin-left:8px;padding:4px 8px;border:1px solid var(--line);border-radius:20px;
}
.app-header-right{display:flex;align-items:center;gap:14px;}
.exit-link{font-size:13px;font-weight:700;color:var(--muted);}
.exit-link:hover{color:var(--ink);}

/* ---------- Progress Track ---------- */
.progress-wrap{
    display:none;
    border-bottom:1px solid var(--line);
    background:var(--white);
}
.progress-wrap.show{display:block;}
.progress-track{
    width:92%;max-width:900px;margin:auto;
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 0;
    gap:4px;
}
.progress-step{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
    font-size:10px;font-weight:800;letter-spacing:.5px;color:var(--muted);text-transform:uppercase;
    position:relative;
}
.progress-step .dot{
    width:26px;height:26px;border-radius:50%;
    background:var(--cream);border:2px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:800;color:var(--muted);
    transition:.25s;
}
.progress-step.active .dot{background:var(--ink);border-color:var(--ink);color:white;}
.progress-step.done .dot{background:var(--accent);border-color:var(--accent);color:white;}
.progress-step.active{color:var(--ink);}
.progress-step.done{color:var(--accent);}
.progress-line{
    position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--line);z-index:-1;
}
.progress-step:first-child .progress-line{display:none;}
.progress-step.done .progress-line,
.progress-step.active .progress-line{background:var(--accent);}

/* ---------- Screens ---------- */
.screen{display:none;padding:64px 0 100px;min-height:60vh;}
.screen.active{display:block;animation:fadeUp .45s ease;}
@keyframes fadeUp{
    from{opacity:0;transform:translateY(14px);}
    to{opacity:1;transform:translateY(0);}
}

/* ---------- Kicker / badges ---------- */
.kicker{
    font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:800;
    color:var(--accent);margin-bottom:18px;display:inline-block;
}
.badge{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--ink);color:white;padding:8px 16px;border-radius:30px;
    font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
    margin-bottom:24px;
}
.badge .dot-live{width:6px;height:6px;border-radius:50%;background:var(--accent-light);}

/* ---------- Buttons ---------- */
.btn{
    padding:15px 26px;border-radius:30px;font-size:14px;font-weight:700;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border:1px solid transparent;transition:.2s;white-space:nowrap;
}
.btn-primary{background:var(--ink);color:white;}
.btn-primary:hover{background:var(--accent);transform:translateY(-2px);}
.btn-secondary{background:white;border:1px solid var(--line);color:var(--ink);}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);}
.btn-ghost{background:transparent;color:var(--muted);}
.btn-ghost:hover{color:var(--ink);}
.btn-block{width:100%;}
.btn-lg{padding:18px 32px;font-size:15px;}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none !important;}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px;}
.btn-row.split{justify-content:space-between;}

/* ---------- Landing (Start Page) ---------- */
.landing{
    text-align:center;
    max-width:760px;margin:0 auto;
    padding:20px 0 10px;
}
.landing h1{
    font-size:clamp(38px,5.6vw,60px);
    line-height:1.08;letter-spacing:-1.5px;
    margin-bottom:22px;
}
.landing .lead{
    color:var(--muted);font-size:18px;max-width:600px;margin:0 auto 30px;
}
.audience-pills{
    display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:34px;
}
.pill{
    border:1px solid var(--line);background:white;color:#31506f;
    padding:8px 16px;border-radius:20px;font-size:12px;font-weight:700;
}
.landing .btn-row{justify-content:center;}
.reassure{
    margin-top:22px;font-size:13px;color:var(--muted);font-style:italic;
}
.landing-preview{
    margin-top:60px;background:var(--ink);border-radius:28px;padding:0;
    box-shadow:0 30px 80px rgba(11,31,58,.18);overflow:hidden;text-align:left;
}
.landing-preview-head{
    display:flex;justify-content:space-between;align-items:center;
    padding:22px 30px;color:white;border-bottom:1px solid rgba(255,255,255,.12);
    font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:800;
}
.landing-preview-head span:last-child{color:#a9cbea;}
.landing-preview-body{
    display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
    background:rgba(255,255,255,.1);
}
.landing-preview-body div{
    background:#0e2544;padding:22px;color:white;
}
.landing-preview-body small{color:#a9cbea;font-size:11px;text-transform:uppercase;letter-spacing:1px;}
.landing-preview-body strong{display:block;font-size:20px;margin-top:8px;font-family:"Sora",sans-serif;}

/* ---------- Panel (form container) ---------- */
.panel{
    max-width:760px;margin:0 auto;
    background:white;border:1px solid var(--line);border-radius:24px;
    padding:44px 48px;box-shadow:0 20px 55px rgba(11,31,58,.06);
}
.panel-wide{max-width:980px;}
.panel-head{margin-bottom:36px;}
.panel-head h2{font-size:32px;line-height:1.15;letter-spacing:-1px;margin-bottom:10px;}
.panel-head p{color:var(--muted);font-size:15.5px;max-width:560px;}
.step-tag{font-size:11px;font-weight:800;color:var(--accent);letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;display:block;}

/* ---------- Start Here list ---------- */
.build-list{list-style:none;display:flex;flex-direction:column;gap:16px;margin:30px 0 10px;}
.build-list li{
    display:flex;align-items:flex-start;gap:16px;
    background:white;border:1px solid var(--line);border-radius:16px;padding:18px 20px;
}
.build-list .num{
    width:32px;height:32px;border-radius:50%;background:var(--cream);color:var(--accent);
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;
}
.build-list strong{display:block;font-size:15.5px;margin-bottom:2px;}
.build-list span{color:var(--muted);font-size:13.5px;}
.note-box{
    margin-top:28px;background:var(--cream);border:1px solid var(--line);border-radius:16px;
    padding:18px 20px;font-size:13.5px;color:#31506f;display:flex;gap:12px;align-items:flex-start;
}
.note-box .ic{font-size:16px;}

/* ---------- Fields ---------- */
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:13px;font-weight:700;color:var(--ink);}
.field .hint{font-size:12px;color:var(--muted);font-weight:400;margin-top:-4px;}
.field input[type="text"],
.field input[type="number"],
.field select,
.field textarea{
    border:1px solid var(--line);border-radius:12px;padding:13px 15px;
    font-size:14.5px;font-family:inherit;color:var(--ink);background:#fbfdff;
    transition:.15s;
}
.field textarea{resize:vertical;min-height:80px;}
.field input:focus,
.field select:focus,
.field textarea:focus{
    outline:none;border-color:var(--accent);background:white;
    box-shadow:0 0 0 3px rgba(30,95,168,.12);
}
.seg{display:flex;gap:8px;flex-wrap:wrap;}
.seg-btn{
    padding:10px 16px;border-radius:20px;border:1px solid var(--line);background:white;
    font-size:13px;font-weight:700;color:var(--muted);
}
.seg-btn.active{background:var(--ink);border-color:var(--ink);color:white;}

/* ---------- Tables (Sales / Cost) ---------- */
.table-scroll{overflow-x:auto;margin:0 -4px;padding:0 4px;}
.data-table{width:100%;border-collapse:separate;border-spacing:0;min-width:860px;table-layout:fixed;}
#salesTable th:nth-child(1),
#salesTable td:nth-child(1){width:19%;}
#salesTable th:nth-child(2),
#salesTable td:nth-child(2){width:14%;}
#salesTable th:nth-child(3),#salesTable td:nth-child(3),
#salesTable th:nth-child(4),#salesTable td:nth-child(4),
#salesTable th:nth-child(5),#salesTable td:nth-child(5),
#salesTable th:nth-child(6),#salesTable td:nth-child(6),
#salesTable th:nth-child(7),#salesTable td:nth-child(7){width:12.5%;}
#salesTable th:last-child,
#salesTable td:last-child{width:34px;}
#varCostTable th:nth-child(1),
#varCostTable td:nth-child(1),
#fixCostTable th:nth-child(1),
#fixCostTable td:nth-child(1){width:32%;}
#varCostTable th:not(:first-child),
#varCostTable td:not(:first-child),
#fixCostTable th:not(:first-child),
#fixCostTable td:not(:first-child){width:17%;}
.data-table th{
    text-align:left;font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;
    color:var(--muted);font-weight:800;padding:0 10px 10px;border-bottom:1px solid var(--line);
}
.data-table td{padding:8px 10px;vertical-align:middle;}
.data-table tbody tr{border-bottom:1px solid #eef4fa;}
.data-table input[type="text"],
.data-table input[type="number"]{
    width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 10px;
    font-size:13.5px;font-family:inherit;background:#fbfdff;color:var(--ink);
}
.data-table input:focus{outline:none;border-color:var(--accent);background:white;}
.data-table .row-remove{
    width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:white;
    color:var(--muted);font-size:14px;display:flex;align-items:center;justify-content:center;
}
.data-table .row-remove:hover{border-color:var(--attn);color:var(--attn);}
.data-table tfoot td{
    padding:14px 8px 6px;font-weight:800;font-size:13.5px;border-top:2px solid var(--line);
    white-space:nowrap;
}
.data-table tfoot tr td:first-child{color:var(--ink);}
.data-table .cur-cell{color:var(--accent);font-variant-numeric:tabular-nums;cursor:default;}
.add-row-btn{
    margin-top:14px;padding:10px 18px;border-radius:20px;border:1px dashed var(--accent-light);
    background:var(--cream);color:var(--accent);font-size:12.5px;font-weight:800;
}
.add-row-btn:hover{background:var(--soft);}

.cost-group-title{
    font-size:13px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--ink);
    margin:34px 0 6px;display:flex;align-items:center;gap:10px;
}
.cost-group-title:first-of-type{margin-top:6px;}
.cost-group-title .tag-pct{background:var(--soft);color:var(--accent);font-size:10px;padding:3px 9px;border-radius:12px;letter-spacing:.5px;}
.helper-text{font-size:12.5px;color:var(--muted);margin-bottom:14px;}

/* ---------- Investment / Funding ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.mini-table{width:100%;border-collapse:collapse;}
.mini-table td{padding:10px 0;border-bottom:1px solid #eef4fa;}
.mini-table td:first-child{font-size:13.5px;color:var(--ink);font-weight:600;padding-right:14px;}
.mini-table input{
    width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 12px;
    font-size:13.5px;text-align:right;font-family:inherit;background:#fbfdff;
}
.mini-table input:focus{outline:none;border-color:var(--accent);background:white;}
.total-row{
    display:flex;justify-content:space-between;align-items:center;
    margin-top:16px;padding:16px 18px;border-radius:14px;background:var(--cream);
    font-weight:800;font-size:14.5px;
}
.total-row span:last-child{color:var(--accent);font-variant-numeric:tabular-nums;}
.funding-result{
    margin-top:22px;padding:20px;border-radius:16px;text-align:center;
    font-size:14px;font-weight:700;
}
.funding-result.ok{background:var(--good-bg);color:var(--good);}
.funding-result.gap{background:var(--attn-bg);color:var(--attn);}
.funding-result .amt{display:block;font-size:26px;font-family:"Sora",sans-serif;margin-top:4px;}

/* ---------- Calculating screen ---------- */
.calc-wrap{max-width:520px;margin:60px auto;text-align:center;}
.calc-spinner{
    width:64px;height:64px;border-radius:50%;
    border:4px solid var(--soft);border-top-color:var(--accent);
    margin:0 auto 30px;animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.calc-title{font-size:24px;margin-bottom:30px;}
.calc-checklist{list-style:none;display:flex;flex-direction:column;gap:12px;text-align:left;}
.calc-checklist li{
    display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted);
    opacity:0;transform:translateX(-8px);transition:.35s;
}
.calc-checklist li.show{opacity:1;transform:translateX(0);}
.calc-checklist li.checked{color:var(--ink);font-weight:700;}
.calc-checklist .ck{
    width:20px;height:20px;border-radius:50%;border:2px solid var(--line);
    display:flex;align-items:center;justify-content:center;font-size:11px;color:transparent;flex-shrink:0;
}
.calc-checklist li.checked .ck{background:var(--good);border-color:var(--good);color:white;}

/* ---------- Dashboard / KPI ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:36px;}
.kpi-card{
    background:white;border:1px solid var(--line);border-radius:18px;padding:20px 18px;
}
.kpi-card small{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:800;}
.kpi-card strong{display:block;font-size:19px;margin-top:8px;font-family:"Sora",sans-serif;letter-spacing:-.5px;}
.kpi-card.accent strong{color:var(--accent);}

.chart-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;margin-bottom:20px;}
.chart-card{
    background:white;border:1px solid var(--line);border-radius:20px;padding:26px 26px 14px;
}
.chart-card h4{font-size:14px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:18px;color:var(--ink);}
.chart-card.full{grid-column:1 / -1;}
.chart-holder{position:relative;height:220px;}

/* ---------- Summary Table ---------- */
.summary-table-wrap{
    background:white;border:1px solid var(--line);border-radius:20px;padding:8px;margin:30px 0 40px;
    overflow-x:auto;
}
.summary-table{width:100%;border-collapse:collapse;min-width:680px;}
.summary-table th{
    text-align:right;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
    font-weight:800;padding:16px 16px 12px;
}
.summary-table th:first-child{text-align:left;}
.summary-table td{
    padding:12px 16px;font-size:13.5px;text-align:right;border-top:1px solid #eef4fa;
    font-variant-numeric:tabular-nums;
}
.summary-table td:first-child{text-align:left;font-weight:700;color:var(--ink);}
.summary-table tr.subtle td:first-child{font-weight:400;color:var(--muted);}
.summary-table tr.highlight td{background:var(--cream);font-weight:800;}
.summary-table tr.highlight td:first-child{color:var(--ink);}
.summary-table tr.total td{background:var(--ink);color:white;font-weight:800;border-top:none;}
.summary-table tr.total td:first-child{color:white;}

.insight-strip{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:34px 0 10px;
}
.insight-strip .stat{
    background:white;border:1px solid var(--line);border-radius:16px;padding:20px;
}
.insight-strip .stat small{font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase;}
.insight-strip .stat strong{display:block;font-size:22px;margin-top:6px;font-family:"Sora",sans-serif;}

/* ---------- Reality Check ---------- */
.reality-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:34px 0;}
.reality-card{
    background:white;border:1px solid var(--line);border-radius:18px;padding:22px 24px;
}
.reality-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.reality-card h4{font-size:15.5px;}
.reality-card .what{font-size:12px;color:var(--muted);margin-bottom:10px;}
.status-chip{
    font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
    padding:5px 12px;border-radius:20px;white-space:nowrap;
}
.status-chip.GOOD,.status-chip.POSITIVE,.status-chip.FUNDED{background:var(--good-bg);color:var(--good);}
.status-chip.WATCH{background:var(--watch-bg);color:var(--watch);}
.status-chip.ATTENTION,.status-chip.GAP,.status-chip.NEEDSATTENTION{background:var(--attn-bg);color:var(--attn);}
.reality-card .result-val{font-size:26px;font-family:"Sora",sans-serif;margin:6px 0 10px;}
.reality-card .explain{font-size:13px;color:#31506f;line-height:1.55;}

.interpret-box{
    background:white;border:1px solid var(--line);border-radius:20px;padding:32px 36px;margin-top:20px;
}
.interpret-box h3{font-size:22px;margin-bottom:22px;}
.interpret-group{margin-bottom:22px;}
.interpret-group:last-child{margin-bottom:0;}
.interpret-group h5{
    font-size:11.5px;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;
    display:flex;align-items:center;gap:8px;
}
.interpret-group.good h5{color:var(--good);}
.interpret-group.attention h5{color:var(--attn);}
.interpret-group.watch h5{color:var(--watch);}
.interpret-group ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
.interpret-group li{
    font-size:14px;color:#31506f;line-height:1.6;padding-left:18px;position:relative;
}
.interpret-group li::before{
    content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:currentColor;
}
.interpret-group.good li{color:#1c8a5b;}
.interpret-group.attention li{color:#c0392b;}
.interpret-group.watch li{color:#b8790f;}

/* ---------- Download ---------- */
.download-panel{
    text-align:center;max-width:640px;margin:0 auto;
}
.download-panel h2{font-size:34px;margin-bottom:14px;}
.download-panel p{color:var(--muted);font-size:16px;margin-bottom:32px;}
.download-icon{
    width:76px;height:76px;border-radius:22px;background:var(--ink);color:white;
    display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 26px;
}

/* ---------- Next steps ---------- */
.next-head{text-align:center;max-width:600px;margin:80px auto 34px;}
.next-head .kicker{display:block;}
.next-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.next-card{
    background:white;border:1px solid var(--line);border-radius:20px;padding:26px 22px;
    display:flex;flex-direction:column;transition:.2s;
}
.next-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(11,31,58,.08);}
.next-card .n-ic{
    width:42px;height:42px;border-radius:12px;background:var(--cream);color:var(--accent);
    display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:16px;
}
.next-card h4{font-size:15.5px;margin-bottom:8px;}
.next-card p{font-size:12.5px;color:var(--muted);margin-bottom:18px;flex-grow:1;}
.next-card .link{font-size:12.5px;font-weight:800;color:var(--accent);}

/* ---------- Misc ---------- */
.section-divider{height:1px;background:var(--line);margin:70px 0;}
.footnote{text-align:center;color:var(--muted);font-size:12.5px;margin-top:50px;}
.web-enhancement-tag{
    display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
    background:var(--soft);color:var(--accent);padding:3px 8px;border-radius:8px;margin-left:8px;vertical-align:middle;
}

/* ---------- Responsive ---------- */
@media(max-width:900px){
    .field-grid{grid-template-columns:1fr;}
    .two-col{grid-template-columns:1fr;gap:10px;}
    .kpi-grid{grid-template-columns:repeat(2,1fr);}
    .chart-grid{grid-template-columns:1fr;}
    .reality-grid{grid-template-columns:1fr;}
    .next-grid{grid-template-columns:1fr 1fr;}
    .landing-preview-body{grid-template-columns:1fr 1fr;}
    .insight-strip{grid-template-columns:1fr;}
}
@media(max-width:640px){
    .panel{padding:30px 22px;border-radius:18px;}
    .panel-head h2{font-size:26px;}
    .progress-step span.label{display:none;}
    .kpi-grid{grid-template-columns:1fr 1fr;}
    .next-grid{grid-template-columns:1fr;}
    .btn-row{flex-direction:column;}
    .btn-row .btn{width:100%;}
    .app-logo .tag{display:none;}
    .landing h1{letter-spacing:-1px;}
    .summary-table{min-width:560px;}
}