/* ============================================================
   SaaS marketing homepage (Eelu LibraryPro) — standalone,
   mobile-first, theme-independent.
   ============================================================ */
:root {
    --sx-brand: #0b7bf2;
    --sx-brand-dark: #0a63c9;
    --sx-ink: #0f1f33;
    --sx-muted: #5b6b80;
    --sx-line: #e7eef7;
    --sx-bg: #ffffff;
    --sx-soft: #f4f8fe;
    --sx-dark: #0f1f33;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 76px;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--sx-ink);
    background: var(--sx-bg);
}

/* ---------------- Header ---------------- */
.sx-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--sx-line);
    backdrop-filter: blur(6px);
}

.sx-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--sx-ink) !important;
    text-decoration: none;
}

.sx-brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--sx-brand), var(--sx-brand-dark));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sx-header .nav-link {
    font-weight: 600;
    color: var(--sx-muted);
    padding: .5rem .8rem;
}

.sx-header .nav-link:hover {
    color: var(--sx-brand);
}

.sx-cta-group .btn {
    white-space: nowrap;
}

/* ---------------- Sections ---------------- */
.sx-section {
    padding: 4.5rem 0;
}

.sx-alt {
    background: var(--sx-soft);
}

.sx-h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    text-align: center;
    margin-bottom: .5rem;
}

.sx-h3 {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: .75rem;
}

.sx-sub {
    text-align: center;
    color: var(--sx-muted);
    font-size: 1.05rem;
    max-width: 44rem;
    margin: 0 auto 2.5rem;
}

/* ---------------- Hero ---------------- */
.sx-hero {
    padding: 4rem 0 4.5rem;
    background: linear-gradient(180deg, #eef5fe 0%, #ffffff 100%);
    overflow: hidden;
}

.sx-hero h1 {
    font-size: clamp(2rem, 4.2vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 1rem 0;
}

.sx-pill {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--sx-line);
    color: var(--sx-brand-dark);
    font-weight: 700;
    font-size: .82rem;
    border-radius: 999px;
    padding: .4rem 1rem;
    box-shadow: 0 4px 14px rgba(15, 31, 51, 0.06);
}

.sx-lead {
    font-size: 1.12rem;
    color: var(--sx-muted);
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

.sx-audience {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.sx-audience span {
    font-size: .8rem;
    font-weight: 700;
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: 999px;
    padding: .35rem .85rem;
    color: #33475f;
}

.sx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-bottom: 1.5rem;
}

.sx-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sx-trust li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    font-size: .92rem;
    color: #33475f;
}

.sx-trust i {
    color: #22b573;
}

/* ---------------- Mockup ---------------- */
.sx-mock {
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 31, 51, 0.12);
    overflow: hidden;
}

.sx-mock-bar {
    display: flex;
    gap: .4rem;
    padding: .7rem 1rem;
    background: #f1f5fa;
    border-bottom: 1px solid var(--sx-line);
}

.sx-mock-bar span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #cbd8e8;
}

.sx-mock-bar span:first-child { background: #f43f5e; }
.sx-mock-bar span:nth-child(2) { background: #f2b705; }
.sx-mock-bar span:nth-child(3) { background: #22b573; }

.sx-mock-body {
    display: flex;
    min-height: 260px;
}

.sx-mock-side {
    width: 64px;
    background: var(--sx-dark);
    padding: .8rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: center;
}

.sx-mock-side span {
    display: block;
    width: 100%;
    height: 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.18);
}

.sx-mock-side .sx-mock-logo {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--sx-brand);
    margin-bottom: .4rem;
}

.sx-mock-side .on { background: var(--sx-brand); }

.sx-mock-main {
    flex: 1;
    padding: 1.1rem;
    background: #f8fafd;
}

.sx-mock-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .7rem;
    margin-bottom: .9rem;
}

.sx-mock-cards > div {
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: 10px;
    padding: .6rem .7rem;
}

.sx-mock-cards small {
    display: block;
    color: var(--sx-muted);
    font-size: .68rem;
}

.sx-mock-cards strong {
    font-size: 1.05rem;
}

.sx-mock-rows span {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: #e2eaf4;
    margin-bottom: .55rem;
}

.sx-mock-note {
    text-align: center;
    font-size: .75rem;
    color: var(--sx-muted);
    padding: .5rem;
    margin: 0;
    border-top: 1px solid var(--sx-line);
    background: #fff;
}

/* ---------------- Cards ---------------- */
.sx-card {
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: 16px;
    padding: 1.5rem;
    height: 100%;
    box-shadow: 0 6px 20px rgba(15, 31, 51, 0.05);
    transition: transform .18s, box-shadow .18s;
}

.sx-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(15, 31, 51, 0.1);
}

.sx-problem {
    text-align: center;
    padding: 1.25rem 1rem;
}

.sx-problem i {
    font-size: 1.6rem;
    color: #f43f5e;
    margin-bottom: .6rem;
}

.sx-problem p {
    margin: 0;
    font-weight: 600;
    font-size: .93rem;
}

.sx-closing {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 800;
    margin: 2.5rem 0 0;
}

.sx-check {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    font-weight: 600;
    height: 100%;
}

.sx-check i {
    color: #22b573;
    font-size: 1.2rem;
    margin-top: .1rem;
}

.sx-alt .sx-check {
    box-shadow: 0 6px 20px rgba(15, 31, 51, 0.05);
}

.sx-feature h3 {
    font-size: 1.08rem;
    font-weight: 800;
    margin: 1rem 0 .4rem;
}

.sx-feature p {
    color: var(--sx-muted);
    font-size: .93rem;
    margin: 0;
    line-height: 1.6;
}

.sx-ficon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: #e8f3fd;
    color: var(--sx-brand);
}

.sx-step {
    text-align: center;
}

.sx-step-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sx-brand), var(--sx-brand-dark));
    color: #fff;
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.sx-step h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: .4rem;
}

.sx-step p {
    color: var(--sx-muted);
    font-size: .92rem;
    margin: 0;
}

/* ---------------- Seat map ---------------- */
.sx-seatmap {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: .55rem;
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 6px 20px rgba(15, 31, 51, 0.05);
    margin-bottom: 1.25rem;
}

.sx-seat {
    aspect-ratio: 1;
    border-radius: 8px;
    display: inline-block;
    min-width: 0;
}

.sx-seat.sx-free { background: #d9f2e3; border: 2px solid #22b573; }
.sx-seat.sx-busy { background: #ffdfe5; border: 2px solid #f43f5e; }
.sx-seat.sx-rsvd { background: #fdf3d7; border: 2px solid #f2b705; }
.sx-seat.sx-exp { background: #e8eaf0; border: 2px solid #94a3b8; }
.sx-seat.sx-maint { background: repeating-linear-gradient(45deg, #f1e9fd, #f1e9fd 4px, #e2d4fa 4px, #e2d4fa 8px); border: 2px solid #8b5cf6; }

.sx-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sx-legend li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    font-weight: 600;
    color: #33475f;
}

.sx-legend .sx-seat {
    width: 18px;
    height: 18px;
    border-radius: 5px;
}

/* ---------------- Dashboard preview ---------------- */
.sx-dash {
    background: var(--sx-dark);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 24px 60px rgba(15, 31, 51, 0.2);
}

.sx-dash-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.sx-stat {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 1rem;
}

.sx-stat small {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: .75rem;
    margin-bottom: .3rem;
}

.sx-stat strong {
    color: #fff;
    font-size: 1.3rem;
}

/* ---------------- CTA / forms ---------------- */
.sx-cta {
    background: linear-gradient(150deg, #0f1f33 0%, #1e4064 100%);
}

.sx-cta .sx-h2,
.sx-cta .sx-sub {
    color: #fff;
}

.sx-form {
    background: #fff;
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

#demo .sx-form,
#contact .sx-form {
    box-shadow: 0 6px 20px rgba(15, 31, 51, 0.06);
    border: 1px solid var(--sx-line);
}

/* ---------------- Pricing ---------------- */
.sx-price {
    position: relative;
    text-align: center;
}

.sx-price.sx-featured {
    border: 2px solid var(--sx-brand);
}

.sx-flag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--sx-brand);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .25rem .9rem;
    white-space: nowrap;
}

.sx-amount {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 1rem 0;
}

.sx-amount span {
    font-size: .9rem;
    font-weight: 600;
    color: var(--sx-muted);
}

.sx-amount.sx-custom {
    color: var(--sx-brand-dark);
    font-size: 1.3rem;
}

.sx-ticks {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
}

.sx-ticks li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .35rem 0;
    font-size: .93rem;
}

.sx-ticks i {
    color: #22b573;
    margin-top: .2rem;
}

/* ---------------- Final CTA ---------------- */
.sx-final {
    background: linear-gradient(135deg, var(--sx-brand) 0%, var(--sx-brand-dark) 100%);
}

.sx-final .sx-h2,
.sx-final .sx-sub {
    color: #fff;
}

.sx-final .btn-outline-light:hover {
    color: var(--sx-brand-dark);
}

/* ---------------- Footer ---------------- */
.sx-footer {
    background: var(--sx-dark);
    color: rgba(255, 255, 255, 0.75);
    padding: 3.5rem 0 6rem;
}

.sx-footer h3 {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
}

.sx-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sx-footer ul li {
    margin-bottom: .55rem;
}

.sx-footer a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}

.sx-footer a:hover {
    color: #fff;
}

.sx-foot-note {
    font-size: .9rem;
    max-width: 22rem;
}

.sx-footer hr {
    border-color: rgba(255, 255, 255, 0.15);
    margin: 2rem 0 1.25rem;
}

.sx-copy {
    text-align: center;
    font-size: .85rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
}

/* ---------------- Mobile sticky CTA ---------------- */
.sx-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: flex;
    gap: .5rem;
    padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--sx-line);
}

.sx-sticky-cta .btn {
    flex: 1;
}

/* ---------------- Reveal animation ---------------- */
.sx-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .5s ease;
}

.sx-reveal.sx-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sx-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 991.98px) {
    .sx-dash-grid { grid-template-columns: repeat(2, 1fr); }
    .sx-cta-group { margin-top: .75rem; flex-wrap: wrap; }
}

@media (max-width: 575.98px) {
    .sx-section { padding: 3rem 0; }
    .sx-hero { padding: 2.5rem 0 3rem; }
    .sx-mock-cards { grid-template-columns: 1fr 1fr; }
    .sx-seatmap { grid-template-columns: repeat(6, 1fr); padding: 1.25rem; }
    .sx-form { padding: 1.25rem; }
    .sx-footer { padding-bottom: 7rem; }
}
/* ============================================================
   Screenshot-style homepage (route /) — sx2 namespace.
   ============================================================ */
.sx2-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--sx-line);
    backdrop-filter: blur(6px);
}

.sx2-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--sx-ink) !important;
    text-decoration: none;
    line-height: 1.1;
}

.sx2-brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--sx-brand), var(--sx-brand-dark));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.sx2-brand-text {
    display: inline-flex;
    flex-direction: column;
}

.sx2-brand-text small {
    font-size: .62rem;
    font-weight: 600;
    color: var(--sx-muted);
}

.sx2-header .nav-link {
    font-weight: 600;
    color: #33475f;
    padding: .5rem .7rem;
    font-size: .95rem;
}

.sx2-header .nav-link:hover {
    color: var(--sx-brand);
}

.sx2-cta-group .btn {
    white-space: nowrap;
}

/* ---------- Hero ---------- */
.sx2-hero {
    padding: 2rem 0 2.5rem;
    background: linear-gradient(180deg, #e9f1fc 0%, #f4f8fd 60%, #ffffff 100%);
    overflow: hidden;
}

.sx2-eyebrow {
    display: inline-block;
    background: #fff;
    color: var(--sx-brand-dark);
    font-weight: 700;
    font-size: .82rem;
    border-radius: 999px;
    padding: .4rem 1.1rem;
    box-shadow: 0 4px 14px rgba(15, 31, 51, 0.08);
    margin-bottom: 1.1rem;
}

.sx2-hero h1 {
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 800;
    line-height: 1.18;
    color: #101c33;
    margin-bottom: 1rem;
}

.sx2-hero h1 span {
    color: var(--sx-brand);
}

.sx2-lead {
    font-size: 1.02rem;
    color: var(--sx-muted);
    line-height: 1.65;
    margin-bottom: 1.25rem;
    max-width: 34rem;
}

.sx2-audience {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .9rem;
}

.sx2-audience li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .9rem;
    color: #33475f;
}

.sx2-audience i {
    color: #22b573;
}

.sx2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-bottom: 1.75rem;
}

.sx2-trust {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
}

.sx2-trust li {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    font-size: .85rem;
    color: #33475f;
    line-height: 1.3;
    max-width: 9rem;
}

.sx2-trust span {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #e8f3fd;
    color: var(--sx-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex: 0 0 auto;
}

.sx2-scribble {
    position: absolute;
    top: 0;
    right: 2rem;
    font-family: 'Segoe Script', 'Comic Sans MS', cursive;
    font-style: italic;
    color: #7d8da3;
    font-size: .95rem;
    line-height: 1.4;
    text-align: right;
    transform: rotate(3deg);
}

/* ---------- Hero owner photo ---------- */
.sx2-hero-img {
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 31, 51, 0.25);
    width: 100%;
    height: auto;
}

/* ---------- Hero slider ---------- */
.sx2-hero-slider {
    border-radius: 20px;
}
.sx2-hero-slider .carousel-indicators [data-bs-target] {
    background-color: #0b7bf2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.sx2-hero-slider .carousel-control-prev-icon,
.sx2-hero-slider .carousel-control-next-icon {
    background-color: rgba(11, 123, 242, 0.75);
    border-radius: 50%;
    padding: 1.1rem;
    background-size: 55%;
}
.sx2-hero-slider .carousel-item img {
    cursor: zoom-in;
}

/* ---------- Laptop mockup ---------- */
.sx2-laptop {
    max-width: 640px;
    margin: 0 auto;
}

.sx2-screen {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 31, 51, 0.14);
    overflow: hidden;
    border: 1px solid var(--sx-line);
}

.sx2-screen-bar {
    display: flex;
    gap: .4rem;
    padding: .65rem 1rem;
    background: #f1f5fa;
    border-bottom: 1px solid var(--sx-line);
}

.sx2-screen-bar span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.sx2-screen-bar span:nth-child(1) { background: #f43f5e; }
.sx2-screen-bar span:nth-child(2) { background: #f2b705; }
.sx2-screen-bar span:nth-child(3) { background: #22b573; }

.sx2-screen-body {
    display: flex;
    min-height: 300px;
}

.sx2-screen-side {
    width: 92px;
    background: #16213a;
    padding: .9rem .7rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    align-items: stretch;
}

.sx2-screen-logo {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--sx-brand);
    margin: 0 auto .4rem;
}

.sx2-screen-side span:not(.sx2-screen-logo) {
    display: block;
    height: 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.16);
}

.sx2-screen-side span.on {
    background: var(--sx-brand);
}

.sx2-screen-main {
    flex: 1;
    padding: 1.1rem 1.2rem;
    background: #f8fafd;
    min-width: 0;
}

.sx2-screen-hi {
    font-weight: 800;
    font-size: 1rem;
    margin: 0;
}

.sx2-screen-sub {
    color: var(--sx-muted);
    font-size: .75rem;
    margin: 0 0 .9rem;
}

.sx2-screen-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6rem;
    margin-bottom: .9rem;
}

.sx2-screen-cards > div {
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: 10px;
    padding: .55rem .6rem;
}

.sx2-screen-cards i {
    font-size: .95rem;
}

.sx2-screen-cards small {
    display: block;
    color: var(--sx-muted);
    font-size: .62rem;
    margin: .25rem 0 0;
}

.sx2-screen-cards strong {
    font-size: .98rem;
}

.sx2-screen-panel {
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: 10px;
    padding: .7rem .8rem;
    height: 100%;
}

.sx2-screen-panel small {
    color: var(--sx-muted);
    font-size: .68rem;
    font-weight: 700;
}

.sx2-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 74px;
    margin-top: .5rem;
}

.sx2-bars span {
    flex: 1;
    background: linear-gradient(180deg, #5b9bf5, var(--sx-brand-dark));
    border-radius: 3px 3px 0 0;
    min-height: 8px;
}

.sx2-screen-panel ul {
    list-style: none;
    padding: 0;
    margin: .5rem 0 0;
}

.sx2-screen-panel li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .28rem 0;
    font-size: .7rem;
    font-weight: 600;
}

.sx2-screen-panel li b {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e8f3fd;
    color: var(--sx-brand-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    flex: 0 0 auto;
}

.sx2-screen-panel li span {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.sx2-screen-panel li em {
    font-style: normal;
    font-weight: 400;
    color: var(--sx-muted);
    font-size: .62rem;
}

.sx2-laptop-base {
    height: 12px;
    margin: 0 24px;
    background: linear-gradient(180deg, #cbd5e1, #94a3b8);
    border-radius: 0 0 14px 14px;
}

/* icon color helpers */
.sx2-c-green { color: #22b573 !important; }
.sx2-c-blue { color: var(--sx-brand) !important; }
.sx2-c-orange { color: #f2814b !important; }
.sx2-c-purple { color: #8b5cf6 !important; }
.sx2-c-red { color: #f43f5e !important; }
.sx2-c-teal { color: #14b8a6 !important; }
.sx2-c-indigo { color: #6366f1 !important; }

/* ---------- Generic section titles ---------- */
.sx2-section {
    padding: 2.25rem 0;
}

.sx2-altband {
    background: var(--sx-soft);
}

.sx2-h2 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 800;
    color: #101c33;
    margin-bottom: .4rem;
}

.sx2-sub {
    color: var(--sx-muted);
    margin-bottom: 1.25rem;
}

.sx2-left { text-align: left; }
.sx2-left-sub { text-align: left; margin-left: 0; }

/* ---------- Problems ---------- */
.sx2-problems {
    background: #fdf2f5;
    padding: 2rem 0;
}

.sx2-problems h2 {
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 800;
    color: #101c33;
}

.sx2-problems .sx2-sub {
    text-align: left;
}

.sx2-pdash {
    display: block;
    width: 52px;
    height: 6px;
    border-radius: 6px;
    background: #f4a7c0;
    margin-bottom: .9rem;
}

.sx2-ptitle {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
    color: #101c33;
    line-height: 1.2;
    margin-bottom: .6rem;
}

.sx2-ptitle span {
    color: #e83e6b;
}

.sx2-psub {
    color: #5b6b80;
    font-size: .95rem;
}

.sx2-ecards {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: .7rem;
}

.sx2-ecard {
    background: #fff;
    border: 1px solid #f5dbe2;
    border-radius: 16px;
    padding: .9rem .4rem .8rem;
    text-align: center;
    box-shadow: 0 4px 14px rgba(232, 62, 107, 0.06);
}

.sx2-eico {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: .5rem;
}

.ec-pink { background: #fde7ee; color: #e83e6b; }
.ec-blue { background: #e5eefc; color: #3b6fe0; }
.ec-orange { background: #fdf1de; color: #e8930c; }
.ec-purple { background: #efe9fb; color: #7c5cd6; }
.ec-red { background: #fde7e9; color: #e0314b; }
.ec-green { background: #e2f6e9; color: #22b573; }

.sx2-ecard p {
    margin: 0;
    font-size: .72rem;
    font-weight: 600;
    color: #33475f;
    line-height: 1.35;
}

.sx2-ewide {
    margin-top: .7rem;
    border: 1.5px dashed #f0a4bc;
    border-radius: 16px;
    background: rgba(255,255,255,.6);
    padding: .9rem;
    text-align: center;
    color: #33475f;
    font-weight: 700;
}

.sx2-ewide i {
    display: block;
    color: #e83e6b;
    font-size: 1.4rem;
    margin-bottom: .3rem;
}

.sx2-note-wrap {
    border-left: 3px solid #e83e6b;
    padding-left: .9rem;
    position: relative;
}

.sx2-handnote {
    font-family: 'Caveat', 'Segoe Script', 'Comic Sans MS', cursive;
    color: #3d4d61;
    font-size: 1.45rem;
    line-height: 1.35;
    margin: 0;
}

.sx2-handnote em {
    font-style: normal;
    color: #e83e6b;
}

@media (max-width: 991.98px) {
    .sx2-ecards { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Feature cards ---------- */
.sx2-fcard {
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: 14px;
    padding: 1.25rem 1rem;
    text-align: center;
    height: 100%;
    box-shadow: 0 6px 20px rgba(15, 31, 51, 0.05);
    transition: transform .18s, box-shadow .18s;
}

.sx2-fcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(15, 31, 51, 0.1);
}

.sx2-fcard i {
    font-size: 1.7rem;
    margin-bottom: .6rem;
}

.sx2-fcard h3 {
    font-size: .92rem;
    font-weight: 800;
    margin-bottom: .35rem;
}

.sx2-fcard p {
    font-size: .78rem;
    color: var(--sx-muted);
    margin: 0;
    line-height: 1.5;
}

/* ---------- Seat section ---------- */
.sx2-seats {
    background: #eef4fb;
    padding: 2.25rem 0;
}

.sx2-ticks {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.sx2-ticks li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .3rem 0;
    font-weight: 600;
    font-size: .95rem;
}

.sx2-ticks i {
    color: #22b573;
    margin-top: .2rem;
}

.sx2-hall {
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: 16px;
    padding: 1.5rem;
    height: 100%;
    box-shadow: 0 6px 20px rgba(15, 31, 51, 0.05);
}

.sx2-hall-title {
    font-weight: 800;
    margin-bottom: .8rem;
}

.sx2-hall-legend {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    font-size: .8rem;
    font-weight: 600;
    color: #33475f;
}

.sx2-hall-legend li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.sx2-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.sx2-d-green { background: #22b573; }
.sx2-d-red { background: #f43f5e; }
.sx2-d-yellow { background: #f2b705; }
.sx2-d-gray { background: #94a3b8; }

.sx2-hall-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .55rem;
}

.sx2-hseat {
    background: #d9f2e3;
    border: 2px solid #22b573;
    color: #14532d;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 800;
    text-align: center;
    padding: .45rem 0;
}

.sx2-hseat.sx2-busy {
    background: #ffdfe5;
    border-color: #f43f5e;
    color: #881337;
}

.sx2-hseat.sx2-rsvd {
    background: #fdf3d7;
    border-color: #f2b705;
    color: #713f12;
}

.sx2-hseat.sx2-maint {
    background: #e8eaf0;
    border-color: #94a3b8;
    color: #475569;
}

.sx2-infocard {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    height: 100%;
}

.sx2-infocard > i {
    font-size: 1.6rem;
    color: #16a34a;
    margin-bottom: .8rem;
}

.sx2-infocard h3 {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: .6rem;
}

.sx2-infocard p {
    color: #3f6212;
    font-size: .92rem;
    line-height: 1.65;
    margin: 0;
}

/* ---------- Dashboard strip stats ---------- */
.sx2-stat {
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    height: 100%;
    box-shadow: 0 6px 20px rgba(15, 31, 51, 0.05);
}

.sx2-stat > i {
    font-size: 1.5rem;
}

.sx2-stat strong {
    display: block;
    font-size: 1.15rem;
    line-height: 1.2;
}

.sx2-stat small {
    color: var(--sx-muted);
    font-size: .76rem;
}

/* ---------- How steps ---------- */
.sx2-how {
    background: var(--sx-soft);
    padding: 2.25rem 0;
}

.sx2-step {
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: 14px;
    padding: 1.25rem 1rem;
    height: 100%;
    display: flex;
    gap: .8rem;
    align-items: flex-start;
}

.sx2-step-ic {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #e8f3fd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex: 0 0 auto;
}

.sx2-step-t {
    font-weight: 800;
    font-size: .92rem;
    margin: 0 0 .25rem;
}

.sx2-step-t strong {
    color: var(--sx-brand-dark);
    margin-right: .3rem;
}

.sx2-step-d {
    font-size: .8rem;
    color: var(--sx-muted);
    margin: 0;
    line-height: 1.5;
}

.sx2-step-arrow {
    color: var(--sx-brand);
    font-size: 1.2rem;
}

/* ---------- Pricing / benefits / minicards ---------- */
.sx2-price {
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: 14px;
    padding: 1.5rem 1.25rem;
    text-align: center;
    height: 100%;
}

.sx2-price h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: .6rem 0 .3rem;
}

.sx2-price > p {
    font-size: .82rem;
    color: var(--sx-muted);
    min-height: 2.4em;
    margin-bottom: 1rem;
}

.sx2-price > i {
    font-size: 1.8rem;
    color: var(--sx-brand);
}

.sx2-price-amt {
    font-size: 1.9rem !important;
    font-weight: 800;
    color: var(--sx-ink) !important;
    margin-bottom: .25rem !important;
    min-height: 0 !important;
}

.sx2-price-amt small {
    font-size: .85rem;
    font-weight: 600;
    color: var(--sx-muted);
}

.sx2-price-featured {
    border: 2px solid var(--sx-brand) !important;
    box-shadow: 0 12px 32px rgba(11, 123, 242, 0.18);
}

.sx2-price-feats {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    text-align: left;
    font-size: .82rem;
}

.sx2-price-feats li {
    padding: .25rem 0;
    color: var(--sx-ink);
}

.sx2-price-feats i {
    color: var(--sx-brand);
    margin-right: .45rem;
}

.sx2-benefits {
    background: #eef4fb;
    border-radius: 14px;
    padding: 1.5rem;
    height: 100%;
}

.sx2-benefits h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.sx2-benefits ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sx2-benefits li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .32rem 0;
    font-size: .9rem;
    font-weight: 600;
}

.sx2-benefits i {
    color: #22b573;
    margin-top: .2rem;
}

.sx2-minicard {
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: 14px;
    padding: 1.5rem 1.25rem;
    height: 100%;
}

.sx2-minicard h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: .5rem;
}

.sx2-minicard p {
    font-size: .88rem;
    color: var(--sx-muted);
    margin-bottom: 1rem;
}

.sx2-form {
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 6px 20px rgba(15, 31, 51, 0.06);
}

.sx2-contactline {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.sx2-contactline a {
    color: var(--sx-brand-dark);
    text-decoration: none;
}

/* ---------- Final CTA / footer ---------- */
.sx2-final {
    background: linear-gradient(120deg, #2563eb 0%, #4f46e5 60%, #7c3aed 100%);
    padding: 2.5rem 0;
    color: #fff;
}

.sx2-final h2 {
    font-weight: 800;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    margin-bottom: .3rem;
}

.sx2-final p {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: .95rem;
}

.sx2-footer {
    background: #0a1730;
    color: rgba(255, 255, 255, 0.72);
    padding: 2rem 0 .9rem;
    position: relative;
    overflow: hidden;
}

.sx2-footer::before,
.sx2-footer::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 120px;
    background-image: radial-gradient(rgba(120, 170, 255, 0.35) 1.5px, transparent 1.6px);
    background-size: 16px 16px;
    pointer-events: none;
}

.sx2-footer::before {
    left: -30px;
    bottom: 60px;
}

.sx2-footer::after {
    right: -40px;
    top: 30px;
}

.sx2-footer .container {
    position: relative;
    z-index: 1;
}

.sx2-brand-blue {
    color: #3b9dff;
}

.sx2-footer .sx2-brand,
.sx2-footer .sx2-brand-text {
    color: #fff !important;
}

.sx2-accent {
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 4px;
    background: #2f9bff;
    margin: .4rem 0 .9rem;
}

.sx2-footer ul a i {
    width: 1.35rem;
    margin-right: .15rem;
}

.sx2-f-blue { color: #2f9bff; }
.sx2-f-green { color: #2fd47e; }
.sx2-f-orange { color: #ff9f2f; }
.sx2-f-purple { color: #8b7bff; }

.sx2-footer h3 {
    font-size: .95rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: .7rem;
}

.sx2-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sx2-footer ul li {
    margin-bottom: .35rem;
}

.sx2-footer a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-size: .9rem;
}

.sx2-footer a:hover {
    color: #fff;
}

.sx2-foot-brand-sub {
    font-size: .72rem;
    color: rgba(255, 255, 255, 0.55);
    margin: -.3rem 0 .8rem 2.9rem;
}

.sx2-foot-note {
    font-size: .85rem;
    max-width: 20rem;
}

.sx2-social {
    display: flex;
    gap: .6rem;
    margin-top: 1rem;
}

.sx2-social a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
}

.sx2-social a:hover {
    background: var(--sx-brand);
}

.sx2-co {
    color: #fff !important;
}

.sx2-footer hr {
    border-color: rgba(255, 255, 255, 0.15);
    margin: 1.25rem 0 .7rem;
}

.sx2-copy {
    font-size: .82rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 991.98px) {
    .sx2-scribble { display: none; }
    .sx2-screen-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .sx2-hero { padding: 2.5rem 0 3rem; }
    .sx2-section { padding: 3rem 0; }
    .sx2-screen-side { width: 64px; }
    .sx2-form { padding: 1.25rem; }
    .sx2-footer { padding-bottom: 5rem; }
    .sx2-step-arrow { display: none; }
}