/* Public marketing site preview inspired by the layout and palette of KORONA POS. */
:root {
    color-scheme: light;
    --navy: #202a35;
    --ink: #202a35;
    --blue: #ed6a14;
    --muted: #64717d;
    --line: #dfe4e8;
    --soft: #f5f6f7;
    --lime: #ed6a14;
}

html { scroll-padding-top: 92px; }
body { background: #fff; color: #202a35; }
.wrap { width: min(1200px, calc(100% - 56px)); }
.topline { background: #f5f6f7; color: #56616b; letter-spacing: 0; }
.topline a { color: #34414d; font-weight: 650; }
.site-header { background: #ffffffed; border-color: #e7eaed; }
.nav { min-height: 78px; }
.nav nav { gap: clamp(14px, 2vw, 28px); color: #313c47; }
.nav nav a:hover, .text-link:hover { color: #d95708; }
.login { border-radius: 999px; border-color: #dfe4e8; padding-inline: 18px; }
.theme-toggle, .nav-toggle { border-radius: 999px; background: #f6f7f8; color: #303b46; }

.hero { background: #fff !important; color: #202a35 !important; }
.hero:before { display: none; }
.hero-grid { padding-block: 72px 78px; gap: clamp(42px, 7vw, 92px); }
.eyebrow { color: #d95708; letter-spacing: .12em; }
.eyebrow i, .live-dot { background: #ed6a14; }
.hero-grid h1 { color: #202a35; font-size: clamp(40px, 5vw, 66px); letter-spacing: -.052em; }
.hero-grid h1 em { color: #ed6a14; }
.hero-copy > p { color: #626d78; font-size: 18px; line-height: 1.75; }
.hero .primary, .contact-section .primary { background: #ed6a14 !important; color: #fff !important; }
.btn { border-radius: 999px; padding: 15px 25px; }
.btn.primary { box-shadow: 0 7px 18px #ed6a1428; }
.hero-points { color: #67737e; }
.product-scene { transform: perspective(1400px) rotateY(-3deg); }
.scene-caption { color: #4c5965; background: #f3f5f6; border-color: #e0e4e7; }
.mock-app { background: #fff; border: 1px solid #dce2e6; box-shadow: 0 25px 60px #2634421c; }
.mock-app aside { background: #202a35; }
.mock-app aside .on, .mock-tabs .selected { background: #ed6a14; color: #fff; }
.mock-search { border-color: #e1e5e8; }
.mock-products > div { border-color: #e3e7ea; }
.mock-bottom b { background: #ed6a14; }
.floating-note { border-color: #e3e7ea; box-shadow: 0 14px 32px #202a351c; }
.floating-note > span { background: #fff0e5; color: #db5d0b; }
.illustration-note { color: #687887; }

.value-strip { border-color: #e5e8eb; }
.value-strip > span, .value-strip p { color: #697681; }
.value-strip b { color: #303b46; }
.value-strip i { color: #ed6a14; }
.section { padding-block: 78px; }
.kicker { color: #d95708; }
.section-head > p, .center-head p { color: #66727d; }
.benefits article, .rubro, .plan { border-color: #e1e5e8; box-shadow: 0 8px 24px #202a3508; }
.benefits article { border-radius: 16px; padding: 28px; }
.icon { color: #d95708; background: #fff0e5; border-radius: 50%; }
:root .rubros-section, :root .plans-section { background: #f6f7f8; }
.rubro-filter button { border-color: #d9dfe3; background: #fff; color: #52606b; }
.rubro-filter .active { background: #202a35; border-color: #202a35; color: #fff; }
.rubro a, .equipment a { color: #d95708; }
.rubro, .equipment { border-radius: 16px; }
.equipment-art { background: #f0f2f3; border-radius: 16px; }
.equipment-art svg { color: #dd6414; }
.plan { border-radius: 18px; }
.plan.featured { border: 2px solid #ed6a14; box-shadow: 0 18px 42px #ed6a1417; }
.plan-tag { background: #ed6a14; border-radius: 999px; }
.plan .primary, .contact-section .primary { background: #ed6a14 !important; color: #fff !important; }
.outline { border-color: #cfd6dc; }
.steps li > span { color: #d95708; }
.steps .text-link { color: #d95708; }
details { border-color: #e1e5e8; }
.contact-section { background: #202a35; }
.contact-section .eyebrow { color: #ffc19a; }
.contact-section form { background: #fff; color: #202a35; border-color: #e1e5e8; border-radius: 18px; box-shadow: 0 20px 55px #10182028; }
.contact-section form h3 { color: #202a35; }
.contact-section label { color: #4f5c68; }
.contact-section input, .contact-section select { background: #fff; color: #202a35; border-color: #cfd6dc; }
.contact-section .form-note, .contact-section .form-note a { color: #687681; }
footer { background: #151d25; }
.mobile-contact a:first-child { background: #ed6a14; }
.mobile-contact a:last-child { background: #202a35; }

:root[data-theme="dark"] {
    color-scheme: dark;
    --page: #030405;
    --surface: #0c0e11;
    --panel: #07090b;
    --button: #131719;
    --button-hover: #202729;
    --button-active: #202729;
    --ink: #e1e3e5;
    --muted: #a8afb4;
    --line: #272d31;
    --soft: #080a0c;
    --blue: #009b9e;
    --shadow: #0005;
}
:root[data-theme="dark"] body { background: #030405; color: #e1e3e5; }
:root[data-theme="dark"] .site-header { background: #050607; border-color: #191d20; }
:root[data-theme="dark"] .theme-toggle,
:root[data-theme="dark"] .nav-toggle,
:root[data-theme="dark"] .login { background: #131719; color: #e1e3e5; border-color: #30383c; }
:root[data-theme="dark"] .topline { background: #030405; color: #a8afb4; }
:root[data-theme="dark"] .topline a,
:root[data-theme="dark"] .nav nav,
:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .hero-grid h1,
:root[data-theme="dark"] .value-strip b { color: #e1e3e5; }
:root[data-theme="dark"] .hero { background: #030405 !important; }
:root[data-theme="dark"] .hero-copy > p,
:root[data-theme="dark"] .hero-points,
:root[data-theme="dark"] .section-head > p,
:root[data-theme="dark"] .center-head p { color: #a8afb4; }
:root[data-theme="dark"] .hero .text-link { color: #e1e3e5 !important; }
:root[data-theme="dark"] .hero .primary,
:root[data-theme="dark"] .contact-section .primary,
:root[data-theme="dark"] .plan .primary { background: #009b9e !important; color: #fff !important; }
:root[data-theme="dark"] .hero .primary:hover,
:root[data-theme="dark"] .contact-section .primary:hover,
:root[data-theme="dark"] .plan .primary:hover { background: #00afb2 !important; }
:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .benefits article,
:root[data-theme="dark"] .rubro,
:root[data-theme="dark"] .plan,
:root[data-theme="dark"] .floating-note,
:root[data-theme="dark"] .contact-section form { background: #101316; color: #e1e3e5; border-color: #272d31; }
:root[data-theme="dark"] .mock-app { background: #101316; color: #e1e3e5; border-color: #272d31; }
:root[data-theme="dark"] .mock-app aside { background: #080a0c; }
:root[data-theme="dark"] .mock-products > div,
:root[data-theme="dark"] .mock-search,
:root[data-theme="dark"] .equipment-art { background: #161a1d; color: #e1e3e5; border-color: #30383c; }
:root[data-theme="dark"] .mock-search { background: #0a0c0e; color: #c4c9cd; border-color: #30383c; }
:root[data-theme="dark"] .mock-products > div { background: #191d20; color: #e1e3e5; border-color: #30383c; }
:root[data-theme="dark"] .scene-caption,
:root[data-theme="dark"] .rubros-section { background: #080a0c; color: #e1e3e5; }
:root[data-theme="dark"] .plans-section { background: #0c0e11; color: #e1e3e5; }
:root[data-theme="dark"] .scene-caption { background: #111518; color: #e1e3e5; }
:root[data-theme="dark"] .contact-section { background: #090b0d; }
:root[data-theme="dark"] footer { background: #050607; }
:root[data-theme="dark"] .rubro-filter button { background: #111518; color: #d3d7da; border-color: #30383c; }
:root[data-theme="dark"] .rubro-filter .active { background: #009b9e; color: #fff; border-color: #009b9e; }
:root[data-theme="dark"] .icon { background: #24170f; color: #f26b1d; }
:root[data-theme="dark"] .kicker,
:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .steps li > span { color: #f26b1d; }
:root[data-theme="dark"] .contact-section form h3,
:root[data-theme="dark"] .contact-section label { color: #e1e3e5; }
:root[data-theme="dark"] .contact-section input,
:root[data-theme="dark"] .contact-section select { background: #090b0d; color: #e1e3e5; border-color: #30383c; }
:root[data-theme="dark"] .contact-section input { background: #090b0d; color: #e1e3e5; border-color: #30383c; }
:root[data-theme="dark"] .contact-section .form-note,
:root[data-theme="dark"] .contact-section .form-note a { color: #a8afb4; }
:root[data-theme="dark"] .mobile-contact { background: #080a0c; border-color: #272d31; }
:root[data-theme="dark"] .mobile-contact a:first-child { background: #009b9e; color: #fff; border-color: #009b9e; }
:root[data-theme="dark"] .mobile-contact a:last-child { background: #14181b; color: #e1e3e5; border-color: #30383c; }

@media (max-width: 760px) {
    .hero-grid { padding-block: 52px 56px; }
    .hero-grid h1 { font-size: clamp(38px, 10vw, 52px); }
    .product-scene { transform: none; }
    .section { padding-block: 56px; }
}