:root{
                --ink:#0b1328;
                --muted:#5f6f8e;
                --primary:#4069ff;
                --primary-soft:rgba(64,105,255,.14);
                --accent:#5fe0cb;
                --accent-2:#ffd166;
                --surface:#f3f7ff;
                --surface-2:#fffaf2;
                --line:rgba(15,23,42,.08);
                --cardShadow: 0 24px 60px rgba(8, 15, 35, 0.08);
                --cardShadowHover: 0 34px 80px rgba(8, 15, 35, 0.14);
            }
            body {
                font-family: "DM Sans", sans-serif;
                color: var(--ink);
                background:
                    radial-gradient(circle at top left, rgba(64,105,255,.16) 0%, transparent 28%),
                    radial-gradient(circle at 85% 12%, rgba(95,224,203,.12) 0%, transparent 24%),
                    linear-gradient(180deg, #fcfdff 0%, #f5f8ff 42%, #eef4ff 100%);
            }
            section,
            header,
            footer {
                position: relative;
            }
            .navbar {
                background: rgba(255,255,255,.82);
                box-shadow: 0 18px 38px rgba(15, 23, 42, 0.07);
                backdrop-filter: blur(18px);
                border-bottom: 1px solid rgba(255,255,255,.55);
            }
            .navbar-brand {
                font-weight: 900;
                letter-spacing: .02em;
                color: var(--ink);
            }
            .navbar-brand span {
                font-weight: 900;
                letter-spacing: .2px;
            }
            .navbar .nav-link {
                color: var(--ink);
                font-weight: 500;
                transition: color .2s ease, background .2s ease;
                border-radius: .85rem;
                padding: .6rem 1rem;
            }
            .navbar .nav-link:hover,
            .navbar .nav-link.active {
                color: var(--primary);
                background: rgba(64,105,255,.1);
            }
            .navbar-toggler {
                border: 1px solid rgba(15, 23, 42, 0.14);
                border-radius: .85rem;
                padding: .35rem .75rem;
            }
            .navbar-toggler-icon {
                filter: invert(28%) sepia(84%) saturate(522%) hue-rotate(188deg) brightness(96%) contrast(92%);
            }
            .navbar .dropdown-menu {
                border-radius: 1rem;
                border: 1px solid rgba(15,23,42,.08);
                box-shadow: 0 24px 42px rgba(15, 23, 42, 0.12);
            }
            .hero-bg {
                padding: 6rem 0 5rem;
                overflow: hidden;
                background:
                    radial-gradient(circle at top left, rgba(64,105,255,.22) 0, transparent 34%),
                    radial-gradient(circle at 85% 10%, rgba(95,224,203,.18) 0, transparent 24%),
                    linear-gradient(180deg, #f7faff 0%, #eff4ff 100%);
            }
            .hero-bg::before,
            .hero-bg::after {
                content: "";
                position: absolute;
                border-radius: 999px;
                filter: blur(18px);
                pointer-events: none;
            }
            .hero-bg::before {
                width: 18rem;
                height: 18rem;
                right: -5rem;
                top: 2rem;
                background: rgba(64,105,255,.12);
            }
            .hero-bg::after {
                width: 12rem;
                height: 12rem;
                left: 8%;
                bottom: -2rem;
                background: rgba(255,209,102,.16);
            }
            .badge-soft{
                background: rgba(64,105,255,.12);
                color: var(--primary);
                border-radius: 999px;
                padding: .38rem 1rem;
                font-size: .78rem;
                font-weight: 800;
                text-transform: uppercase;
                letter-spacing: .08em;
                display: inline-block;
                border: 1px solid rgba(64,105,255,.12);
                box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
            }
            .hero-title {
                font-weight: 900;
                font-size: clamp(2.4rem, 3.6vw + 1rem, 4rem);
                letter-spacing: -.03em;
                line-height: 1;
            }
            .hero-subtitle {
                font-size: 1.08rem;
                color: #4d5b79;
                max-width: 42rem;
                line-height: 1.8;
            }
            .top-links a {
                color: var(--primary);
            }
            .rounded-pill.btn-main {
                padding-inline: 1.8rem;
                padding-block: .85rem;
                font-weight: 700;
                background: linear-gradient(135deg, var(--primary), #2dc9f4 62%, var(--accent) 100%);
                border: none;
                color: #fff;
                box-shadow: 0 16px 34px rgba(64,105,255,.24);
            }
            .rounded-pill.btn-main:hover {
                transform: translateY(-2px);
                box-shadow: 0 20px 38px rgba(64,105,255,.28);
            }
            .btn-primary {
                background: linear-gradient(135deg, var(--primary), #2dc9f4 68%, var(--accent) 100%);
                border-color: transparent;
                box-shadow: 0 12px 28px rgba(64,105,255,.18);
            }
            .btn-primary:hover,
            .btn-primary:focus {
                background: linear-gradient(135deg, #3358dc, #22bfe9);
                border-color: transparent;
            }
            .btn-outline-secondary {
                color: #30405f;
                border-color: rgba(71,85,105,.18);
                background: rgba(255,255,255,.55);
                backdrop-filter: blur(10px);
            }
            .btn-outline-secondary:hover {
                background: rgba(64,105,255,.08);
                border-color: rgba(64,105,255,.22);
                color: var(--primary);
            }
            .hero-panel,
            .content-card,
            .settings-card,
            .feature-card,
            .faq-shell,
            .seo-shell {
                background: #ffffff;
                border: 1px solid rgba(255,255,255,.72);
                box-shadow: var(--cardShadow);
                backdrop-filter: blur(18px);
                border-radius: 1.4rem;
            }
            .hero-panel {
                position: relative;
                overflow: hidden;
            }
            .hero-panel::before {
                content: "";
                position: absolute;
                inset: 0 auto auto 0;
                width: 100%;
                height: .35rem;
                background: linear-gradient(90deg, var(--primary), #35c8f2, var(--accent-2));
            }
            .tool-section {
                padding: 5rem 0 0;
                background: #ffffff;
            }
            .tool-shell {
                background: #ffffff;
                border-radius: 2rem;
                padding: 0;
                box-shadow: none;
            }
            .section-band {
                padding: 4.5rem 0;
                background: #ffffff;
            }
            .section-band.alt {
                background: linear-gradient(180deg, #fbfcff 0%, #f3f8ff 100%);
            }
            .converter-intro {
                display: flex;
                flex-wrap: wrap;
                gap: 1rem;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 1.25rem;
            }
            .converter-copy {
                max-width: 32rem;
            }
            .converter-stats {
                display: flex;
                flex-wrap: wrap;
                gap: .75rem;
            }
            .stat-pill {
                display: inline-flex;
                align-items: center;
                gap: .5rem;
                padding: .7rem .95rem;
                border-radius: 999px;
                background: rgba(255,255,255,.8);
                border: 1px solid rgba(255,255,255,.72);
                color: #30405f;
                font-size: .88rem;
                font-weight: 700;
            }
            .stat-pill i {
                font-size: .85rem;
                line-height: 1;
            }
            .upload-surface {
                padding: 0;
                border-radius: 0;
                background: transparent;
                border: 0;
                box-shadow: none;
            }
            .section-kicker {
                color: var(--primary);
                text-transform: uppercase;
                letter-spacing: .08em;
                font-size: .8rem;
                font-weight: 800;
            }
            .section-title {
                font-weight: 800;
                letter-spacing: -.02em;
            }

            .dropzone {
                border-radius: 1.4rem;
                border: 2px dashed rgba(255, 255, 255, 0.9);
                background: linear-gradient(135deg, #ffb536 0%, #f4a827 48%, #eb8e1c 100%);
                min-height: 320px;
                cursor: pointer;
                transition: box-shadow 0.2s ease, transform 0.2s ease;
                position: relative;
                overflow: hidden;
                box-shadow: 0 24px 50px rgba(244,168,39,.22);
            }

            .dropzone.hover {
                box-shadow: 0 1rem 2rem rgba(0,0,0,0.16);
                transform: translateY(-3px);
            }

            .dropzone-inner {
                position: absolute;
                inset: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: #fff;
                padding: 2.5rem 2rem;
                text-align: center;
            }

            .dropzone-inner > i {
                font-size: 3rem;
                margin-bottom: 1rem;
            }
            #chooseBtn i {
                font-size: 1rem;
                margin-bottom: 0;
            }
            .dropzone-inner .subcopy {
                max-width: 24rem;
                line-height: 1.6;
                opacity: .95;
            }
            .dropzone-note {
                display: flex;
                flex-wrap: wrap;
                gap: .65rem;
                margin-top: 1rem;
            }
            .dropzone-note span {
                display: inline-flex;
                align-items: center;
                gap: .45rem;
                padding: .55rem .75rem;
                border-radius: 999px;
                background: rgba(255,255,255,.76);
                color: #845400;
                font-size: .82rem;
                font-weight: 700;
            }
            .dropzone-note i {
                font-size: .85rem;
                margin-bottom: 0;
                line-height: 1;
            }

            .preview-list {
                max-height: 260px;
                overflow-y: auto;
                border-radius: 1rem;
                border: 1px solid rgba(255,255,255,.72);
                background: rgba(255,255,255,.92);
                box-shadow: 0 18px 36px rgba(15,23,42,.06);
            }

            .preview-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: .6rem .9rem;
                border-bottom: 1px solid #edf2ff;
                font-size: .9rem;
            }

            .preview-item:last-child {
                border-bottom: none;
            }

            .preview-item .badge {
                font-size: .7rem;
            }

            .feature-icon,
            .circle-icon {
                width: 3rem;
                height: 3rem;
                border-radius: 1rem;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                margin-bottom: .75rem;
                background: linear-gradient(135deg, rgba(64,105,255,.15), rgba(45,201,244,.16), rgba(255,209,102,.14));
                box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
            }
            .feature-icon i {
                font-size: 1.1rem;
            }
            .circle-icon {
                width: 3.3rem;
                height: 3.3rem;
                color: var(--primary);
            }
            .tool-card {
                border-radius: 1.4rem;
                border: 1px solid rgba(255,255,255,.72);
                box-shadow: var(--cardShadow);
                background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, #f7faff 100%);
                transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
                height: 100%;
                position: relative;
                overflow: hidden;
            }
            .tool-card::before {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, rgba(64,105,255,.07), transparent 40%, rgba(95,224,203,.07) 100%);
                opacity: 0;
                transition: opacity .25s ease;
            }
            .tool-card:hover,
            .feature-card:hover,
            .settings-card:hover {
                transform: translateY(-7px);
                box-shadow: var(--cardShadowHover);
                border-color: rgba(64,105,255,.16);
            }
            .tool-card:hover::before {
                opacity: 1;
            }
            .faq-item button {
                text-align: left;
                font-weight: 600;
            }
            footer {
                background:
                    radial-gradient(circle at top left, rgba(91,123,255,.2), transparent 34%),
                    linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
                color: #cbd5f5;
            }
            .footer-top {
                padding: 4.5rem 0 2.5rem;
            }
            .footer-brand {
                max-width: 24rem;
            }
            .footer-brand-mark {
                width: 3.25rem;
                height: 3.25rem;
                border-radius: 1rem;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, rgba(91,123,255,.26), rgba(114,224,220,.22));
                color: #ffffff;
                box-shadow: 0 18px 40px rgba(91,123,255,.18);
            }
            .footer-eyebrow {
                color: #8fb4ff;
                text-transform: uppercase;
                letter-spacing: .1em;
                font-size: .78rem;
                font-weight: 800;
            }
            .footer-heading {
                color: #ffffff;
                font-weight: 800;
                margin-bottom: 1rem;
            }
            .footer-text {
                color: rgba(233,240,255,.72);
                line-height: 1.7;
            }
            .footer-link-grid {
                display: grid;
                gap: .7rem;
            }
            .footer-link-grid a {
                color: #edf4ff;
                text-decoration: none;
                transition: color .2s ease, transform .2s ease;
            }
            .footer-link-grid a:hover {
                color: #72e0dc;
                transform: translateX(2px);
            }
            .footer-bottom {
                border-top: 1px solid rgba(233,240,255,.12);
                padding: 1.25rem 0 1.75rem;
            }
            .footer-meta-links {
                display: flex;
                flex-wrap: wrap;
                gap: 1rem 1.4rem;
            }
            .footer-meta-links a {
                color: #e9f0ff;
                text-decoration: none;
            }
            .footer-meta-links a:hover {
                color: #72e0dc;
            }

            .tool-label {
                font-size: .8rem;
                text-transform: uppercase;
                letter-spacing: .08em;
            }

            .bg-soft-primary {
                background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(247,250,255,.94) 100%);
            }
            .preview-thumb {
                width: 48px;
                height: 48px;
                object-fit: cover;
                border-radius: 0.5rem;
                border: 1px solid #dee2e6;
            }

            .preview-item .btn-group .btn {
                padding-inline: 0.4rem;
            }
            .action-bar {
                margin-top: 1rem;
                padding: .85rem 0 0;
                border-radius: 0;
                background: transparent;
                border: 0;
                box-shadow: none;
            }
            .helper-note {
                padding: .9rem 1rem;
                border-radius: 1rem;
                background: linear-gradient(135deg, rgba(64,105,255,.08), rgba(95,224,203,.08));
                border: 1px solid rgba(64,105,255,.08);
            }
            .settings-card .card-body {
                padding: 0;
            }
            .settings-group + .settings-group {
                margin-top: 1.1rem;
                padding-top: 1.1rem;
                border-top: 1px solid rgba(15,23,42,.08);
            }
            .settings-card .form-select,
            .settings-card .form-control {
                border-radius: .9rem;
                border-color: rgba(15,23,42,.12);
                box-shadow: none;
                padding-block: .65rem;
            }
            .settings-card .form-check {
                padding: .7rem .85rem .7rem 2.2rem;
                border-radius: .9rem;
                background: rgba(255,255,255,.8);
                border: 1px solid rgba(15,23,42,.08);
                min-width: 9rem;
            }
            .settings-footnote {
                margin-top: 1rem;
                padding: .95rem 1rem;
                border-radius: 1rem;
                background: linear-gradient(135deg, rgba(255,209,102,.16), rgba(64,105,255,.08));
                color: #4d5b79;
            }
            .processing-overlay {
                position: fixed;
                inset: 0;
                background: rgba(15, 23, 42, 0.6); /* dark translucent */
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 1050; /* above navbar & cards */
            }

            .processing-overlay.d-none {
                display: none !important;
            }

            .processing-modal {
                max-width: 420px;
                width: 90%;
            }

            .processing-modal .big-icon {
                font-size: 3rem;
            }
            #starRating i {
                transition: color 0.2s ease, transform 0.1s ease;
            }

            #starRating i.hovered {
                color: #ffc107 !important;
            }

            #starRating i.selected {
                color: #ff9800 !important;
            }
            .faq-item {
                border-radius: 1.25rem;
                background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(247,250,255,.98) 100%);
                border: 1px solid rgba(255,255,255,.72);
                box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
                margin-bottom: 1rem;
            }
            .faq-shell .accordion-item {
                border: 1px solid rgba(255,255,255,.7);
                border-radius: 1rem;
                overflow: hidden;
                box-shadow: 0 10px 24px rgba(15,23,42,.05);
                background: rgba(255,255,255,.88);
                margin-bottom: .85rem;
            }
            .faq-shell .accordion-button {
                font-weight: 700;
                color: var(--ink);
                background: transparent;
                box-shadow: none;
                padding: 1rem 1.15rem;
            }
            .faq-shell .accordion-button:not(.collapsed) {
                color: var(--primary);
                background: rgba(64,105,255,.04);
            }
            .faq-shell .accordion-body {
                color: #566784;
                line-height: 1.7;
            }