/*
 * MisCo eBanking Nalog Kreator — LIGHT PREMIUM EDITION
 * A dedicated LIGHT presentation, independent of the dark edition.
 * Preserves all of the existing functional demo modules and accessibility logic.
 */
:root {
  color-scheme: light;
  --ink: #142646;
  --muted: #526781;
  --bg: #f7f9ff;
  --deep: #eef4ff;
  --line: rgba(64, 91, 153, .16);
  --violet: #6c53e8;
  --sky: #198cba;
  --mint: #087c69;
  --coral: #d15f79;
  --off: #f8faff;
  --darkink: #142747;
}
body {background: var(--bg); color: var(--ink)}
::selection {background:#ded9ff;color:#15284b}
.site-mesh {background:radial-gradient(circle at 81% 8%,#8c74fa20,transparent 37%),radial-gradient(circle at 8% 31%,#82dff229,transparent 36%)}
.reading-progress {background:linear-gradient(90deg,#7059e8,#39b7ce,#64d7ae);box-shadow:0 2px 12px #695cf738}
/* Navigation */
.nav {background:rgba(255,255,255,.87);border-bottom:1px solid #dae3f1;box-shadow:0 8px 26px #314e8710}
.brand img{filter:drop-shadow(0 3px 9px #4673b226)}
.brand-text strong {color:#193358}
.brand-text em {color:#3266c1}
.brand-text small {color:#687b9a}
.nav-links a {color:#4a5e7b}
.nav-links a:hover {color:#6552d8}
.nav-caption {color:#6b7e99}
.nav-caption i {background:#20b39f;box-shadow:0 0 0 4px #25cdb219}
.btn-primary {background:linear-gradient(115deg,#6557e9 0%,#5289e8 72%,#31b9ca 100%);color:#fff;box-shadow:0 9px 22px #536ed436}
.btn-primary:hover {box-shadow:0 15px 34px #536ed44e}
.btn-line {background:#ffffffde;border-color:#bfcae2;color:#263957;box-shadow:0 5px 14px #253a6610}
.btn-line:hover {background:#f0f3ff;border-color:#918aef}
.btn-muted {background:#eef1ff;color:#594eaa;border-color:#bdc5f2}
.btn-dark {background:#243c78;color:#fff}
.btn-light {background:#ffffffc2;color:#213c5b;border-color:#d6dff1}
.play-round {border-color:#7c86a8}
.nav-toggle {background:#f5f7ff;color:#27385c;border-color:#cbd5ec}
.mobile-nav {background:#fff;box-shadow:0 15px 30px #26427e20}
.mobile-nav a {border-bottom-color:#e4e9f7;color:#283858}
/* Typography and section design */
.micro-label,.section-kicker,.pill-white {color:#6353ba}
.section-kicker {color:#594acd}
.section-heading h2,.safety-grid h2,.mobile-copy h2,.payment-copy h2,.calc-copy h2,.faq-grid h2,.inbox-description h2 {color:#172a4b}
.section-heading h2 em,.safety-grid h2 em,.mobile-copy h2 em,.payment-copy h2 em,.calc-copy h2 em,.faq-grid h2 em,.inbox-description h2 em,.audience-section em {background:linear-gradient(98deg,#7051d9,#377aca 53%,#0b9a8a);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-heading p,.safety-grid p,.mobile-copy>p,.payment-copy>p,.calc-copy>p,.faq-grid>div>p,.inbox-description>p {color:#586b86}
/* Immersive illustrated hero */
.hero {background:linear-gradient(115deg,#fff 0%,#f9fbff 42%,#eef5ff 100%);min-height:680px}
.hero:before {opacity:.24;background-image:linear-gradient(#7893c91b 1px,transparent 1px),linear-gradient(90deg,#7893c91b 1px,transparent 1px)}
.hero-aurora {background:conic-gradient(from 60deg,#ae9cff65,#8bcbf435,#6ce9c736,#c3b2ff59);filter:blur(94px);opacity:.62}
.label-light {background:#f1edff;border-color:#d7cffe;color:#5546af;box-shadow:0 5px 16px #7056e70d}
.ping-dot {background:#7964e7;box-shadow:0 0 0 5px #7358db1d}
.hero h1 {color:#162747}
.hero-color {background:linear-gradient(93deg,#7252d6 0%,#328fcb 52%,#0c9684);-webkit-background-clip:text;background-clip:text;color:transparent}
.period {color:#13ad9c}
.hero-desc {color:#4d607b}
.hero-desc strong {color:#192d51}
.hero-trust {color:#5c708e}
.hero-trust .icon {color:#0c9b83}
.hero-orbit {border-color:#a59bea4c}
.orbit-b {border-color:#52b3ce4b}
.hero-console {background:#fff;border:1px solid #b6c8eb;box-shadow:0 35px 80px #24457732,0 0 0 8px #ffffff73}
.console-top {background:#f7f9ff;border-bottom-color:#dce5f5}
.console-title,.console-mini {color:#6980a3}
.console-side {background:#edf3ff;border-right-color:#d6e1f7}
.sidebar-monogram {background:#5d73d9;color:#fff}
.side-item {color:#667da2}
.side-item.active {color:#4d56b5;background:#d9e2ff}
.side-bottom {color:#7890b2}
.console-work {color:#1a2d4f}
.mini-overline {color:#6683b0}
.status-active {color:#087754;background:#e8faf0;border-color:#9ddfc5}
.console-account {background:#eef4ff;border-color:#d2def5}
.console-account small {color:#7383a3}
.console-account b {color:#213554}
.account-end {color:#06866b}
.pipeline-heading {color:#263b5c}
.pipeline-heading span {color:#6e829f}
.pipeline-track:before {background:#c7d3e8}
.pipeline-beam {background:linear-gradient(90deg,transparent,#418ee8,transparent)}
.step-graphic {background:#ecf2fc;border-color:#d1ddf2}
.step-graphic.violet {background:#e9e4ff;color:#6653d1}
.step-graphic.cyan {background:#e0f5ff;color:#1685af}
.step-graphic.mint {background:#dff7ed;color:#0f8c71}
.pipeline-step small {color:#6d81a0}
.console-success {background:linear-gradient(95deg,#e7fcf4,#e7f5ff);border-color:#b5e3d1}
.success-ring {background:#d0f6e4;color:#0d7d60}
.console-success small {color:#5e7c91}
.success-arrow {color:#0b9178}
.float-source {background:#fff;border:1px solid #d5d5f4;box-shadow:0 17px 45px #3e5a8926}
.float-source strong,.hero-toast b {color:#263550}
.float-source small,.hero-toast small {color:#7184a2}
.float-icon.lavender {background:#eee9ff;color:#6650c4}
.float-icon.blue {background:#e3f6ff;color:#1f85b5}
.source-pulse {background:#12bd97;box-shadow:0 0 12px #61d9b8}
.hero-phone {background:linear-gradient(145deg,#e8efff,#f7fbff);border-color:#243b69;box-shadow:0 0 0 2px #9eb4d8,0 21px 52px #304e8038}
.phone-island {background:#203254}
.phone-header {color:#2a4060}
.phone-header span {color:#6d819c}
.phone-name {color:#188b88}
.hero-phone strong {color:#1d3453}
.scan-glass {background:repeating-linear-gradient(0deg,#fff,#fff 13px,#b9dbf844 14px);border-color:#96c7d8}
.scan-number {color:#27476a}
.scan-beam,.camera-beam {background:#25baa1;box-shadow:0 0 12px 2px #40c9b475}
.phone-result {color:#168776}
.phone-home {background:#9ba9c6}
.hero-toast {background:#f3fffbbf;border-color:#a8e5d4;box-shadow:0 14px 36px #29477920;backdrop-filter:blur(16px)}
.toast-icon {background:#d5f8eb;color:#0b8d6d}
.visual-disclaimer {color:#6880a3}
.hero-partners {border-top-color:#e0e7f2}
.hero-partners span {color:#6b7f9c}
.hero-partners strong {color:#526986}
/* Value proposition */
.transition-quote {background:#eef4ff;border-top:1px solid #dde7f5;border-bottom:1px solid #dce7f6}
.quote-marquee {color:#455d84}
.dot-spacer {color:#26bca8}
.problem {background:linear-gradient(180deg,#f7faff,#eff5ff)}
.before-card,.after-card {background:#fff;border-color:#d7e1f1;box-shadow:0 18px 55px #344f8d12;color:#203454}
.before-card {background:linear-gradient(138deg,#fff7f9,#fff 72%);border-color:#f1dce3}
.after-card {background:linear-gradient(133deg,#f1faff,#effff7 90%);border-color:#ccece6;box-shadow:0 25px 65px #18a98d18}
.comparison-label {color:#6e7f98}
.legacy-steps>div {background:#fff;color:#53657e;border-color:#efd9df}
.legacy-steps i {color:#ca5571}
.comparison-footer {color:#667791}
.comparison-footer.glow {color:#0d8b70}
.compare-arrow {background:#fff;color:#128c84;border-color:#c4d5ef;box-shadow:0 5px 22px #3a5ca91a}
.smart-track>div {background:#ffffffcd;border-color:#cae4e1}
.smart-icon {background:#d9f7ef;color:#098c73}
.smart-track small {color:#657e8b}
/* Storytelling section */
.storytelling {background:radial-gradient(ellipse at 86% 35%,#dcd5ff80,transparent 52%),#f7f8ff}
.story-step {background:#fff;color:#223656;border-color:#d6e0f0;box-shadow:0 9px 24px #4c66a40b}
.story-step:before {background:linear-gradient(#6654d7,#359bc1)}
.story-step.active {background:#f1efff;border-color:#a9a2ea;box-shadow:0 15px 40px #6858cb1a}
.story-number {color:#6759c9;border-color:#b9b2ee}
.story-step small {color:#48668c}
.story-step span:nth-child(2)>span {color:#61738f}
.story-stage {background:radial-gradient(circle at 53% 43%,#e9e4ff 0%,#e3efff 55%,#f7fbff 89%);border-color:#c9d7f1;box-shadow:0 26px 58px #475fa22b}
.story-stage:before {opacity:.45}
.stage-top {color:#6f7e9f}
.stage-count {color:#5b4bcb}
.stage-orbit {border-color:#9e8de070}
.stage-ring {border-color:#819ee78b;box-shadow:0 0 55px #6f8bff25}
.stage-symbol {box-shadow:0 0 0 12px #7e6df017,0 15px 75px #6b6ce960}
.stage-satellite {background:#fff;color:#3b7d9c;border-color:#c3d5ef;box-shadow:0 12px 24px #3d599c26}
.stage-card {background:#ffffffed;border-color:#cddbf4;box-shadow:0 12px 31px #3b5c9726;color:#253958}
.stage-card>span {color:#6352c0}
.stage-card>p {color:#586c88}
.stage-checks span {color:#367469}
.stage-checks .icon {color:#119377}
.story-progress {background:#e7eaf8}
.story-progress span {background:linear-gradient(90deg,#7060dd,#31aeaa)}
.story-control {color:#7382a1}
.outline-circle {background:#fff;color:#4b62a6;border-color:#cbd7ee}
.outline-circle:hover {background:#e8edff}
/* eFakture panel intentionally one of the brightest editorial moments */
.sef-feature {background:#f7faff}
.sef-shell {background:linear-gradient(128deg,#f0edff 0%,#e9f6ff 46%,#dffcf0 100%);box-shadow:0 22px 70px #527ba71d}
/* Modules */
.modules {background:#fff}
.filter {background:#f4f6ff;color:#52627e;border-color:#d9e0f2}
.filter:hover {background:#eae9ff}
.filter.active {background:#6255d8;color:#fff;border-color:#6255d8}
.module-card {background:linear-gradient(160deg,#ffffff,#f8faff 90%);border-color:#dce4f3;box-shadow:0 8px 25px #36477f0c;color:#1c3154}
.module-card:hover {box-shadow:0 18px 55px #344d8d24;border-color:#aaa4eb;transform:translateY(-5px)}
.module-card:after {background:#9a87ee0b}
.module-card.module-featured {background:radial-gradient(circle at 76% 75%,#ebe5ff,transparent 64%),linear-gradient(145deg,#fff,#f5f6ff)}
.module-card.module-tall {background:radial-gradient(circle at 35% 80%,#e2fbf5,transparent 60%),linear-gradient(150deg,#fff,#f4fcff)}
.module-tag {color:#7383a3}
.module-icon.vio {background:#eee8ff;color:#6754cb}
.module-icon.sky {background:#e2f4ff;color:#2685b7}
.module-icon.coral {background:#fff0f1;color:#c86779}
.module-icon.mint {background:#e2f8ef;color:#0a9274}
.module-card p {color:#63738d}
.module-more {color:#5b4acb}
.module-more:hover {color:#338dba}
.paper-sheet {box-shadow:0 10px 20px #6c75a024}
.doc-convert {color:#169585}
.paper-done {background:#2a957d;border-color:#b3eed4}
.inbox-mini span {background:#ffffffdd;border-color:#d5e0f2;color:#40627d}
.module-bottom>span {color:#7284a2}
.text-link {color:#5b4acb}
.text-link:hover {color:#128d9b}
/* Inbox and phone */
.inbox-section {background:radial-gradient(ellipse at 5% 35%,#d1ecff,transparent 50%),#f0f5ff}
.benefit-list span,.payment-points span {color:#455e7b}
.benefit-list .icon,.payment-points .icon {color:#159884}
.small-note {color:#667f9b}
.inbox-panel {border-color:#d0dbef;box-shadow:0 22px 65px #38598d27}
.mobile-section {background:linear-gradient(180deg,#fff,#f2f8ff)}
.mobile-halo {background:radial-gradient(circle,#cfccff9a 0%,#bdeff060 43%,transparent 72%)}
.mobile-halo:after {border-color:#a0b3eb6c;box-shadow:0 0 0 50px #7e8fff0b}
.mobile-device {box-shadow:0 0 0 2px #53658b,0 25px 63px #304a805c}
.mobile-result-floating {background:#fff;border-color:#b4e1d7;box-shadow:0 13px 39px #35588e28;color:#263f60}
.result-indicator {background:#d5f8e7;color:#067b60}
.mobile-result-floating small {color:#587c8b}
.numbered-benefits>div>span {background:#eeeaff;color:#5d4ac8;border-color:#c8c0f2}
.numbered-benefits p {color:#62768e}
/* Payments and banks */
.payment-section {background:#edf5ff}
.payment-widget,.calc-widget {box-shadow:0 22px 64px #3b559b20;border-color:#ccd8ed}
.bank-section {background:#f7f9ff}
.bank-switch {background:#eaf0ff;border-color:#cedaf1}
.bank-tab {color:#60718e}
.bank-tab.active {background:linear-gradient(110deg,#655be5,#65bcd8);color:#fff;box-shadow:0 5px 18px #626bd72b}
.bank-demo {border-color:#cedaf1;box-shadow:0 24px 60px #30508123}
.bank-left {background:radial-gradient(circle at 50% 43%,#d0e7ff,#eaf3ff 65%);color:#263a5d}
.bank-topline {color:#6a7c9a}
.bank-topline b {color:#13886f}
.bank-document {box-shadow:0 9px 24px #34578730}
.bank-transit {background:linear-gradient(90deg,#9e9fed,#39b5b4)}
.bank-destination {background:#e4f6f5;border-color:#b0dddc;box-shadow:0 10px 31px #3457872a;color:#214766}
.bank-destination .icon {color:#148d82}
.bank-destination small {color:#567987}
.bank-confirm {background:#eafaf4;color:#127d64;border-color:#b1e9d5}
.bank-right {background:linear-gradient(135deg,#fff,#f7f8ff);color:#233b5e}
.bank-point {color:#526986}
.bank-point b {color:#5c4ec5}
.bank-right>p {color:#6b7b95}
.calc-section {background:radial-gradient(ellipse at 12% 35%,#dfd6ff,transparent 55%),#eff5ff}
.calc-note {background:#ffffffb9;color:#5e708e;border-color:#d8def1}
.calc-note .icon {color:#6554d8}
/* Safety, audience and FAQs */
.safety-section {background:#fff}
.safety-card {background:linear-gradient(135deg,#f8faff,#f1f6ff);border-color:#d7e1f2;box-shadow:0 10px 25px #374c7a0d;color:#233757}
.safety-card>span {background:#e7e8ff;color:#6355cc;border-color:#c4bdf6}
.safety-card p {color:#647792}
.audience-section {background:linear-gradient(150deg,#f4f7ff,#eef8ff)}
.audience-card {background:linear-gradient(140deg,#fff,#f9fbff);border-color:#d7e1ef;box-shadow:0 12px 28px #40598b10;color:#253758}
.audience-card>span {color:#7888a2}
.audience-card>.icon {color:#6451d5}
.audience-card p {color:#64758f}
.faq-section {background:#fff}
.faq-items details {border-bottom-color:#dce4f0;color:#1e3152}
.faq-items summary .icon {color:#6255cb}
.faq-items p {color:#62748f}
.final-cta {background:#f3f7ff}
.cta-panel {background:linear-gradient(118deg,#e4deff 0%,#d6edff 54%,#d9f6ee 100%);color:#162c4b;box-shadow:0 27px 80px #506caa27;border:1px solid #c8dafa}
.cta-content h2 em {color:#5747c1}
.cta-content>p {color:#516982}
.cta-glyph {box-shadow:0 12px 30px #4862b533}
/* Footer & dialogs are light too, rather than abrupt dark walls */
.footer {background:#eaf0fa;border-top:1px solid #d7e1ee;color:#273a57}
.footer-main>div:first-child>p {color:#687a94}
.footer-links strong {color:#63748e}
.footer-links a {color:#445b79}
.footer-links a:hover {color:#6554d7}
.footer-bottom {color:#687b98;border-top-color:#d1dcea}
.modal-backdrop {background:#11274d99;backdrop-filter:blur(8px)}
.module-dialog,.contact-dialog {background:linear-gradient(145deg,#fff,#f4f7ff);border-color:#d4def1;box-shadow:0 35px 100px #12285370;color:#1f3353}
.module-dialog>p,.contact-dialog>p {color:#586c85}
.modal-close {background:#eff2fa;color:#33476d;border-color:#cdd7eb}
.dialog-points>div {color:#304460}
.dialog-points .icon {color:#15987d}
.module-dialog-note {background:#eff5ff;color:#5a6f91;border-color:#d4e1f5}
.contact-dialog label {color:#334763}
.contact-dialog input,.contact-dialog select,.contact-dialog textarea {background:#fff;color:#203651;border-color:#bbcbe4}
.contact-dialog input:focus,.contact-dialog select:focus,.contact-dialog textarea:focus {box-shadow:0 0 0 4px #6556d91a;border-color:#8d81df}
.setup-note,.form-feedback {color:#647b97}
.form-feedback {color:#0d8169}
/* Quiet tactile details */
.section {scroll-margin-top:88px}
.nav, .module-card, .story-step, .before-card, .after-card, .safety-card, .audience-card {transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.module-card:focus-within,.story-step:focus-visible {box-shadow:0 0 0 3px #7464db36,0 17px 45px #435c9e1b}
@media(max-width:800px){
  .hero {background:linear-gradient(150deg,#fff 0%,#f8faff 53%,#edf4ff 100%)}
  .hero-console {transform:none;box-shadow:0 17px 43px #35568d30}
  .hero-visual {overflow:visible}
  .hero-desc {font-size:15px}
  .nav {box-shadow:0 5px 19px #405c9e11}
  .story-step {box-shadow:0 7px 18px #49659d0c}
}
@media(max-width:480px){
  .hero h1 {font-size:clamp(40px,10.4vw,54px)}
  .hero-desc {font-size:14px}
  .section-heading p {font-size:14px}
  .module-card p {font-size:13px}
}
@media(prefers-reduced-motion:reduce){.hero-aurora,.hero-orbit{animation:none!important}}