/* Homepage, catalogue and authentication. Colours follow the selected site palette. */
.startup-page {
    --startup-lilac: color-mix(in srgb, var(--startup-tone-1) 17%, #fff);
    --startup-mint: color-mix(in srgb, var(--startup-tone-2) 15%, #fff);
    --startup-peach: color-mix(in srgb, var(--startup-tone-3) 16%, #fff);
    --startup-text: var(--ink);
    --startup-line: var(--line);
    background: var(--paper);
}
.site-nav { --startup-line: var(--line); padding-block: .9rem; border-color: var(--startup-line); background: rgba(255,255,255,.96); }
.site-nav .nav-link { border-radius: 10px; }
.site-nav .nav-link.active { background: var(--ochre-soft); box-shadow: none; }
.startup-page .btn, .site-nav .btn { border-radius: 12px; }
.site-nav .btn-auth {
    display: inline-flex; align-items: center; justify-content: center;
    width: 9.5rem; min-height: 44px; padding: .6rem .8rem; flex-shrink: 0;
}
.site-nav .btn-login {
    background: color-mix(in srgb, var(--startup-tone-1) 7%, #fff); border-color: color-mix(in srgb, var(--startup-tone-1) 23%, #fff); color: var(--ink);
    font-weight: 650; box-shadow: 0 2px 4px rgba(60,40,95,.04);
}
.site-nav .btn-login i { color: var(--startup-tone-1); }
.site-nav .btn-login:hover, .site-nav .btn-login:focus-visible {
    background: var(--ink); border-color: var(--ink); color: #fff;
}
.site-nav .btn-login:hover i, .site-nav .btn-login:focus-visible i { color: inherit; }
.site-nav .btn-account,
.site-nav [data-notification-toggle],
.site-nav .lang-trigger {
    height: 44px; border-radius: 12px; padding: .45rem .85rem;
    border: 1px solid color-mix(in srgb, var(--startup-tone-1) 23%, #fff); background: color-mix(in srgb, var(--startup-tone-1) 7%, #fff); color: var(--ink);
    font-weight: 650; box-shadow: 0 2px 4px rgba(60,40,95,.04);
}
.site-nav .btn-account { max-width: min(15rem, 100%); }
.site-nav .account-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.site-nav .btn-account .nav-avatar { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; }
.site-nav [data-notification-toggle] { display: inline-flex; align-items: center; justify-content: center; width: 44px; padding: 0; }
.site-nav .lang-trigger { background: #fff; border-color: var(--startup-line); }
.site-nav .btn-account:hover,
.site-nav .btn-account:focus-visible,
.site-nav .btn-account.show,
.site-nav [data-notification-toggle]:hover,
.site-nav [data-notification-toggle]:focus-visible,
.site-nav [data-notification-toggle].show,
.site-nav .lang-trigger:hover {
    background: var(--ink); color: #fff; border-color: var(--ink);
}
.site-nav .account-dropdown {
    padding: .5rem; margin-top: .6rem; border: 1px solid var(--startup-line);
    border-radius: 16px; box-shadow: 0 16px 40px -16px rgba(48,36,72,.3);
    max-width: calc(100vw - 2rem);
}
.site-nav .account-dropdown .dropdown-item { padding: .65rem .8rem; border-radius: 9px; font-size: .85rem; white-space: normal; }
.site-nav .account-dropdown .dropdown-item:hover,
.site-nav .account-dropdown .dropdown-item:focus { background: color-mix(in srgb, var(--startup-tone-1) 7%, #fff); color: var(--ink); }
.startup-page .site-main .btn-primary, .startup-page .hero .btn-primary {
    --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--ink-2); --bs-btn-hover-border-color: var(--ink-2); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ink-2); --bs-btn-active-border-color: var(--ink-2); --bs-btn-active-color: #fff;
    box-shadow: 0 6px 16px -10px var(--ink);
}
.startup-page .hero {
    padding: clamp(3rem, 7vw, 6.5rem) 0;
    background: radial-gradient(ellipse at 85% 20%, var(--startup-lilac), transparent 52%),
        radial-gradient(ellipse at 15% 100%, var(--startup-mint), transparent 48%), color-mix(in srgb, var(--startup-tone-1) 2%, #fff);
    color: var(--startup-text);
    border-bottom: 1px solid var(--startup-line);
}
.startup-page .hero::before { display: none; }
.startup-page .hero h1 {
    color: var(--ink); font-size: clamp(2.5rem, 4.8vw, 4.6rem); line-height: 1.06;
    letter-spacing: -.055em; max-width: 16ch; margin-top: 1.3rem; margin-bottom: 1.4rem;
}
.startup-eyebrow {
    display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .85rem;
    color: var(--ink); background: #fff; border: 1px solid var(--startup-line);
    border-radius: 999px; font-weight: 650; font-size: .8rem;
}
.startup-eyebrow i { color: var(--startup-tone-1); }
.startup-page .hero .lead, .startup-page .hero .text-body-secondary {
    color: var(--muted) !important; font-size: 1.06rem; line-height: 1.75; max-width: 34rem;
}
.startup-page .hero .btn-lg { padding: .95rem 1.25rem; font-size: .95rem; }
.startup-page .hero .btn-outline-secondary {
    --bs-btn-color: var(--ink); --bs-btn-border-color: var(--line); --bs-btn-bg: #fff;
    --bs-btn-hover-bg: var(--ochre-soft); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-bg: var(--ochre-soft); --bs-btn-active-color: var(--ink);
}
.startup-page .hero-proof { border: 0; padding-top: 0; margin-top: 2rem; gap: .75rem 1rem; }
.startup-page .hero-proof span { color: var(--muted) !important; font-size: .75rem; gap: .15rem; }
.startup-page .hero-proof i { color: var(--ink); }
.startup-page .hero .process-card {
    border: 1px solid #fff; border-radius: 24px; padding: 1.5rem 1.6rem 1.6rem;
    box-shadow: 0 30px 70px -35px var(--ink-2), 0 0 0 8px rgba(255,255,255,.4);
}
.startup-window-bar { display: flex; gap: 6px; align-items: center; border-bottom: 1px solid var(--startup-line); padding-bottom: 1rem; margin-bottom: 1.4rem; }
.startup-window-bar span { width: 8px; height: 8px; background: color-mix(in srgb, var(--startup-tone-3) 30%, #fff); border-radius: 50%; }
.startup-window-bar span:nth-child(2) { background: color-mix(in srgb, var(--startup-tone-1) 30%, #fff); }
.startup-window-bar span:nth-child(3) { background: color-mix(in srgb, var(--startup-tone-2) 30%, #fff); }
.startup-window-bar i { margin-left: auto; color: var(--muted); font-size: .85rem; }
.startup-page .hero .process-card .edition { position: static; margin-bottom: 1rem; box-shadow: none; border-radius: 8px; }
.startup-page .hero .process-card h2 { font-size: 1.22rem; letter-spacing: -.025em; line-height: 1.3; margin-bottom: 1.2rem; }
.startup-page .hero .process-step { border: 0; border-radius: 14px; background: color-mix(in srgb, var(--startup-tone-1) 5%, #fff); padding: 1rem; margin-top: .65rem; gap: .8rem; grid-template-columns: 2rem minmax(0,1fr); }
.startup-page .hero .process-step:nth-last-child(2) { background: color-mix(in srgb, var(--startup-tone-2) 5%, #fff); }
.startup-page .hero .process-step:last-child { background: color-mix(in srgb, var(--startup-tone-3) 5%, #fff); }
.startup-page .hero .process-step .num { width: 2rem; height: 2rem; background: color-mix(in srgb, var(--startup-tone-1) 20%, #fff); color: var(--startup-tone-1); box-shadow: none; }
.startup-page .hero .process-step:nth-last-child(2) .num { background: color-mix(in srgb, var(--startup-tone-2) 20%, #fff); color: var(--startup-tone-2); }
.startup-page .hero .process-step:last-child .num { background: color-mix(in srgb, var(--startup-tone-3) 20%, #fff); color: var(--startup-tone-3); }
.startup-page .hero .process-step strong { color: var(--startup-text); font-size: .86rem; }
.startup-page .hero .process-step p { font-size: .79rem; color: var(--muted); line-height: 1.6; }
.startup-page .hero-visual { border: 6px solid #fff; border-radius: 24px; box-shadow: 0 25px 60px -30px var(--ink-2); }
.startup-page .landing-section { padding-block: clamp(3rem, 6vw, 5rem); }
.startup-page .section-head h2 { letter-spacing: -.04em; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.startup-page .section-head h2::after { width: 2.5rem; height: 5px; background: var(--ochre); border-radius: 99px; }
.startup-page .features-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1rem; }
.startup-page .features-row > div { background: color-mix(in srgb, var(--startup-tone-1) 4%, #fff); border: 1px solid color-mix(in srgb, var(--startup-tone-1) 15%, #fff); border-radius: 20px; padding: 1.6rem; }
.startup-page .features-row > div:nth-child(4n+2) { background: color-mix(in srgb, var(--startup-tone-2) 4%, #fff); border-color: color-mix(in srgb, var(--startup-tone-2) 15%, #fff); }
.startup-page .features-row > div:nth-child(4n+3) { background: color-mix(in srgb, var(--startup-tone-3) 4%, #fff); border-color: color-mix(in srgb, var(--startup-tone-3) 15%, #fff); }
.startup-page .features-row > div:nth-child(4n+4) { background: color-mix(in srgb, var(--startup-tone-4) 4%, #fff); border-color: color-mix(in srgb, var(--startup-tone-4) 15%, #fff); }
.startup-page .feature-icon { background: color-mix(in srgb, var(--startup-tone-1) 18%, #fff); color: var(--startup-tone-1); box-shadow: none; border-radius: 13px; }
.startup-page .features-row > div:nth-child(4n+2) .feature-icon { background: color-mix(in srgb, var(--startup-tone-2) 18%, #fff); color: var(--startup-tone-2); }
.startup-page .features-row > div:nth-child(4n+3) .feature-icon { background: color-mix(in srgb, var(--startup-tone-3) 18%, #fff); color: var(--startup-tone-3); }
.startup-page .features-row > div:nth-child(4n+4) .feature-icon { background: color-mix(in srgb, var(--startup-tone-4) 18%, #fff); color: var(--startup-tone-4); }
.startup-page .feature-title { color: var(--startup-text); font-size: 1.04rem; }
.startup-page .feature-text { color: var(--muted); font-size: .9rem; line-height: 1.7; }
.startup-page .cta-band { border-radius: 24px; padding: clamp(2rem, 5vw, 3.5rem); box-shadow: none; }
.startup-page .startup-catalog-head {
    background: radial-gradient(ellipse at 90% 0%, var(--startup-lilac), transparent 60%),
        linear-gradient(120deg, color-mix(in srgb, var(--startup-tone-2) 3%, #fff), color-mix(in srgb, var(--startup-tone-1) 2%, #fff)); border-color: var(--startup-line);
    padding-block: 2.5rem;
}
.startup-page .startup-catalog-head h1 { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.045em; }
.startup-page .startup-catalog-head > .container > p { max-width: 52rem; line-height: 1.65; font-size: .95rem; }
.startup-page .startup-search {
    margin: 0; padding: .5rem .75rem 1rem; border-radius: 20px; border: 1px solid var(--startup-line);
    background: #fff; box-shadow: 0 12px 30px -25px var(--ink-2);
}
.startup-page .startup-search .input-group { box-shadow: none; }
.startup-page .startup-search .input-group > .form-control { border-left: 0; padding-left: 0; min-width: 0; }
.startup-page .startup-search .input-group-text { border-radius: 12px 0 0 12px; color: var(--ink); padding-left: 1rem; }
.startup-page .startup-search .input-group > .btn { border-radius: 0 12px 12px 0; }
.startup-page .startup-search .form-select { background-color: var(--paper); border-radius: 10px; box-shadow: none; font-size: .87rem; }
.startup-page .startup-search .form-label { font-size: .76rem; color: var(--muted); }
.startup-page .startup-categories h2 { font-weight: 750; color: var(--startup-text); }
.startup-page .cat-link, .startup-page .sub-link { padding: .75rem .85rem; border-radius: 12px; font-size: .85rem; }
.startup-page .cat-link.btn-primary { background: var(--ink); color: #fff; box-shadow: none; }
.startup-page .cat-link.btn-light { background: #fff; border-color: var(--startup-line); }
.startup-page .cat-link .badge { border: 0 !important; background: color-mix(in srgb, var(--startup-tone-1) 6%, #fff) !important; color: var(--muted) !important; }
.startup-page .product-card { border: 1px solid var(--startup-line); border-radius: 20px; box-shadow: 0 4px 18px -12px var(--ink-2); }
.startup-page .product-card:hover, .startup-page .product-card:focus-within { border-color: var(--ink-2); box-shadow: 0 18px 35px -22px var(--ink-2); }
.startup-page .product-thumb, .startup-page .product-thumb-placeholder { aspect-ratio: 16 / 10; }
.startup-page .product-thumb-placeholder { background: linear-gradient(135deg, var(--startup-lilac), var(--ochre-soft)); color: var(--ink); }
.startup-page .product-card .card-meta { color: var(--ink); background: var(--ochre-soft); font-size: .69rem; }
.startup-page .product-card h3 { color: var(--startup-text); font-size: 1.14rem; line-height: 1.35; overflow-wrap: anywhere; }
.startup-page .product-card .tech-tag { background: var(--paper); border-color: var(--line); color: var(--muted); border-radius: 6px; }
.startup-page .product-card .delivery-tag { font-size: .72rem; }
.startup-page .product-card .product-foot { flex-wrap: wrap; row-gap: .65rem !important; padding-top: 1rem; }
.startup-page .product-card .price { color: var(--ink); font-size: 1.4rem; letter-spacing: -.035em; }
.startup-page .product-card .edition { border-radius: 8px; }
.startup-page .startup-empty { border: 1px dashed color-mix(in srgb, var(--startup-tone-1) 25%, #fff) !important; background: color-mix(in srgb, var(--startup-tone-1) 2%, #fff) !important; border-radius: 20px !important; padding-inline: 1rem; }
.startup-page .startup-empty > i { display: inline-flex; justify-content: center; align-items: center; width: 80px; height: 80px; background: var(--startup-lilac); color: var(--startup-tone-1) !important; border-radius: 24px; font-size: 2rem; }
.startup-page .auth-wrap {
    background: radial-gradient(ellipse at 85% 10%, var(--startup-lilac), transparent 52%),
        radial-gradient(ellipse at 5% 90%, var(--startup-mint), transparent 50%), var(--paper);
    padding: clamp(2rem, 5vw, 4.5rem) 1rem !important;
}
.startup-page .auth-container {
    padding: clamp(1.25rem, 4vw, 2.5rem); border-radius: 24px; background: #fff;
    border: 1px solid var(--startup-line); box-shadow: 0 24px 60px -40px var(--ink-2);
}
.startup-page .auth-heading .brand-mark {
    background: var(--startup-lilac); color: var(--startup-tone-1); border-radius: 16px; box-shadow: none;
    width: 56px !important; height: 56px !important; font-size: 1.3rem !important;
}
.startup-page .auth-heading h1 { font-size: clamp(1.65rem, 4vw, 2rem); letter-spacing: -.04em; line-height: 1.2; }
.startup-page .auth-heading p { margin-top: .65rem; font-size: .9rem; line-height: 1.6; }
.startup-page .auth-form-card { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; }
.startup-page .auth-form-card > .card-body { padding: 0 !important; }
.startup-page .auth-form-card .form-control { min-height: 48px; background-color: var(--paper); border-radius: 12px; }
.startup-page .auth-form-card .form-control:focus { background-color: #fff; }
.startup-page .auth-form-card .form-control.is-invalid { border-color: var(--bs-form-invalid-border-color); }
.startup-page .auth-form-card .input-group > .form-control { border-radius: 12px 0 0 12px; }
.startup-page .auth-form-card .input-group > .btn { border-radius: 0 12px 12px 0; }
.startup-page .auth-form-card .form-label { font-size: .85rem; margin-bottom: .5rem; }
.startup-page .auth-form-card .form-text, .startup-page .auth-form-card .invalid-feedback { font-size: .8rem; }
.startup-page .auth-form-card .btn-lg { min-height: 48px; font-size: .95rem; }
.startup-page .auth-form-card form > .d-flex { flex-wrap: wrap; gap: .75rem; }
.startup-page .auth-footer { border-top: 1px solid var(--startup-line); padding-top: 1.3rem; line-height: 1.7; color: var(--muted); }
.startup-page .auth-footer a { color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 991.98px) {
    /* One scroll area for the whole mobile navigation, including open submenus. */
    .site-nav {
        max-height: 100vh;
        max-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scroll-padding-block: 1rem;
    }
    .site-nav #mainNav { min-width: 0; }
    .site-nav .dropdown-menu {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100%;
        max-height: none !important;
        overflow: visible !important;
        margin-top: .5rem;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .site-nav .nav-link { padding-inline: .45rem !important; }
    .site-nav #mainNav > div { gap: .5rem !important; }
}
@media (max-width: 575.98px) {
    .startup-page .hero h1 { font-size: clamp(2.3rem, 10vw, 3.2rem); }
    .startup-page .hero .lead { font-size: .98rem; }
    .startup-page .hero .process-card { padding: 1.25rem; border-radius: 20px; box-shadow: 0 12px 25px -18px var(--ink-2); }
    .startup-page .hero .process-step { padding: .85rem; }
    .startup-page .startup-search { padding: .25rem .25rem .85rem; }
    .startup-page .startup-search .input-group > .btn { padding-inline: .7rem; font-size: .8rem; }
    .startup-page .startup-catalog-head { padding-block: 1.8rem; }
    .startup-page .hero-proof { gap: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
    .startup-page .hero-in, .startup-page .hero-in-2, .startup-page .hero-in-3 { animation: none; }
    .startup-page .product-card, .startup-page .product-thumb, .startup-page .btn { transition: none; transform: none; }
}