:root {
    --bg: #f4f5f9;
    --bg-alt: #eef0f6;
    --surface: #ffffff;
    --surface-soft: #f9f9fc;
    --text: #151927;
    --muted: #6b7287;
    --line: #e6e8ef;
    --brand-purple: #8850ef;
    --brand-blue: #2a6bff;
    --navy: #081b45;
    --shadow-card: 0 16px 50px rgba(22, 30, 58, 0.08);
    --shadow-soft: 0 8px 24px rgba(13, 18, 33, 0.08);
    --radius-xxl: 28px;
    --radius-xl: 24px;
    --radius-lg: 20px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --radius-pill: 999px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100%;
    font-family: "Manrope", "Segoe UI", sans-serif;
    color: var(--text);
    background: linear-gradient(180deg, #f8f9ff 0%, #f4f5f9 36%, #f2f3f8 100%);
    line-height: 1.45;
}

.page-ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 12% 7%, rgba(137, 80, 239, 0.16) 0%, transparent 34%),
        radial-gradient(circle at 88% 4%, rgba(42, 107, 255, 0.14) 0%, transparent 30%),
        radial-gradient(circle at 58% 48%, rgba(19, 34, 86, 0.06) 0%, transparent 40%);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.container {
    width: min(1200px, calc(100% - 44px));
    margin: 0 auto;
}

.section {
    margin-top: 86px;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: "Sora", "Manrope", sans-serif;
    letter-spacing: -0.03em;
}

p {
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
select {
    font: inherit;
    color: inherit;
}

.pi {
    display: inline-block;
    line-height: 1;
    font-style: normal;
}

.hidden {
    display: none !important;
}

.site-header {
    position: sticky;
    top: 12px;
    z-index: 20;
    padding-top: 12px;
}

.nav-wrap {
    min-height: 72px;
    padding: 12px 22px;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(226, 229, 238, 0.9);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    row-gap: 10px;
    flex-wrap: wrap;
    box-shadow: 0 12px 26px rgba(15, 22, 38, 0.05);
}

.nav-left,
.nav-right {
    display: flex;
    align-items: center;
    gap: 24px;
    row-gap: 8px;
}

.nav-left {
    min-width: 0;
    flex: 1 1 420px;
    flex-wrap: wrap;
}

.nav-right {
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

.nav-right > * {
    max-width: 100%;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 36px;
    font-weight: 800;
}

.brand-bolt {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
}

.brand-bolt .pi {
    font-size: 30px;
    color: var(--brand-purple);
}

.brand-text {
    font-size: 34px;
    letter-spacing: -0.05em;
}

.brand-stars {
    color: #e495ff;
    font-size: 14px;
    display: inline-grid;
    place-items: center;
}

.maker-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(136, 80, 239, 0.2);
    background: rgba(136, 80, 239, 0.08);
    color: #6b4dc9;
    font-size: 13px;
    font-weight: 800;
    padding: 8px 14px;
    white-space: nowrap;
}

.maker-badge .pi {
    color: #8255e6;
}

.maker-badge:hover {
    border-color: rgba(42, 107, 255, 0.3);
    color: #3354cb;
}

.main-nav {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.main-nav a {
    font-size: 16px;
    font-weight: 600;
    color: #1d2538;
}

.main-nav a:hover,
.sales-link:hover {
    color: var(--brand-blue);
}

.sales-link {
    font-size: 16px;
    font-weight: 600;
    color: #1f2537;
}

.btn {
    border: 0;
    border-radius: var(--radius-pill);
    font-size: 16px;
    font-weight: 700;
    padding: 12px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    max-width: 100%;
    line-height: 1.1;
    white-space: nowrap;
}

.btn .pi {
    font-size: 14px;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-dark {
    background: #05070d;
    color: #fff;
}

.btn-dark:hover {
    box-shadow: 0 10px 22px rgba(4, 8, 19, 0.3);
}

.btn-gradient {
    background: linear-gradient(96deg, var(--brand-purple) 0%, var(--brand-blue) 100%);
    color: #fff;
}

.btn-gradient:hover {
    box-shadow: 0 12px 24px rgba(64, 101, 237, 0.34);
}

.btn-wide {
    width: 100%;
}

.hero h1 {
    font-size: clamp(43px, 5vw, 72px);
    line-height: 1.06;
    max-width: 920px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero {
    position: relative;
}

.hero-watermark {
    position: absolute;
    left: 50%;
    top: 120px;
    transform: translateX(-50%) rotate(-7deg);
    font-size: clamp(230px, 34vw, 480px);
    color: rgba(108, 78, 203, 0.08);
    pointer-events: none;
}

.automation-chip {
    margin: 0 auto 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid rgba(124, 97, 221, 0.25);
    border-radius: var(--radius-pill);
    background: rgba(136, 80, 239, 0.08);
    color: #5e4bc2;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.automation-chip .pi {
    color: #834fea;
    font-size: 16px;
}

.hero-layout {
    margin-top: 44px;
    display: grid;
    grid-template-columns: minmax(190px, 250px) minmax(500px, 1fr) minmax(200px, 240px);
    gap: 30px;
    align-items: center;
}

.hero-quote {
    text-align: center;
    color: #2a3042;
    align-self: center;
}

.hero-quote > p:first-child {
    font-size: 39px;
    line-height: 1.42;
}

.hero-quote strong {
    margin-top: 12px;
    display: inline-block;
    font-size: 24px;
    color: #242c40;
}

.mini-avatars {
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
}

.mini-avatars span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -8px;
    display: grid;
    place-items: center;
    background: linear-gradient(120deg, #4c6de2, #9f5ff4);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.mini-avatars span:first-child {
    margin-left: 0;
}

.happy-users {
    margin-top: 14px;
    font-size: 24px;
    font-weight: 700;
    color: #2c3a68;
}

.happy-users .pi {
    margin-right: 6px;
    color: #8b5ce9;
}

.uploader-card {
    background: var(--surface);
    border-radius: var(--radius-xxl);
    border: 1px solid #eceef4;
    box-shadow: var(--shadow-card);
    padding: 24px;
}

.url-builder {
    display: flex;
    gap: 10px;
}

.url-builder input {
    flex: 1;
    border: 1px solid #ccd2e1;
    border-radius: var(--radius-sm);
    padding: 14px 14px;
    min-width: 0;
    font-size: 16px;
    color: #222a3f;
    background: #fff;
}

.url-builder input:focus,
.domain-btn:focus,
.case-item:focus,
.upload-tab:focus,
.feature-item:focus,
.upload-trigger:focus-within {
    outline: 3px solid rgba(42, 107, 255, 0.25);
    outline-offset: 2px;
}

.domain-btn {
    border: 1px solid var(--brand-blue);
    background: #f5f9ff;
    color: var(--brand-blue);
    border-radius: var(--radius-sm);
    font-weight: 700;
    padding: 0 16px;
    cursor: pointer;
}

.upload-tabs {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eceef4;
}

.upload-tab {
    border: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: #6d7489;
    cursor: pointer;
    padding: 6px 0;
}

.upload-tab .pi {
    color: #7f89a6;
    margin-right: 5px;
    font-size: 14px;
}

.upload-tab.active {
    color: var(--brand-blue);
    box-shadow: inset 0 -3px 0 var(--brand-blue);
}

.upload-tab.active .pi {
    color: var(--brand-blue);
}

.paste-html-wrap {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.paste-html-wrap textarea {
    width: 100%;
    resize: vertical;
    min-height: 140px;
    border: 1px solid #d8deee;
    border-radius: 12px;
    padding: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-size: 14px;
    background: #fbfcff;
    color: #1f2a44;
}

.drop-zone {
    margin-top: 16px;
    border: 3px dashed #cb91ff;
    border-radius: var(--radius-lg);
    min-height: 300px;
    padding: 30px 18px;
    display: grid;
    justify-items: center;
    align-content: center;
    text-align: center;
    background: #fcfaff;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.drop-zone.dragover {
    border-color: var(--brand-blue);
    background: #f3f8ff;
}

.drop-icons {
    color: #8d94a8;
    display: flex;
    gap: 15px;
}

.drop-icons .pi {
    font-size: 34px;
}

.drop-zone p {
    margin-top: 14px;
    font-size: 20px;
    color: #5f667d;
    max-width: 360px;
}

.upload-trigger {
    margin-top: 18px;
    min-width: 170px;
}

.inline-link {
    border: 0;
    background: transparent;
    color: var(--brand-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
    padding: 0;
}

.inline-link .pi {
    margin-right: 5px;
}

.inline-link:hover {
    color: #1848ba;
}

.help-text {
    margin-top: 12px;
    font-size: 15px;
    color: #7f8599;
}

.upload-policy-note {
    margin-top: 8px;
}

.upload-zip-note {
    margin-top: 4px;
}

.upload-zip-note .pi {
    margin-right: 6px;
    color: #5677d4;
}

.error-text {
    margin-top: 10px;
    font-size: 15px;
    color: #bf2036;
    font-weight: 700;
}

#publish-action {
    margin-top: 8px;
}

.upload-settings {
    margin-top: 16px;
    border: 1px solid #e8ebf2;
    border-radius: var(--radius-lg);
    padding: 18px;
    background: #fdfdff;
}

.setting-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.file-pill {
    background: #eff3ff;
    color: #2d4284;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid #edf0f6;
    font-weight: 600;
    color: #25314d;
}

.setting-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.setting-label .pi {
    color: #6b7ead;
}

.setting-row:first-of-type {
    border-top: 0;
}

.setting-row select {
    border: 1px solid #dce0eb;
    border-radius: var(--radius-sm);
    padding: 8px;
    background: #f7f8fc;
    color: #95a0ba;
}

.setting-row input[type="checkbox"] {
    width: 44px;
    height: 24px;
    appearance: none;
    border-radius: var(--radius-pill);
    background: #c8d0e0;
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
}

.setting-row input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

.setting-row input[type="checkbox"]:checked {
    background: linear-gradient(96deg, var(--brand-purple), var(--brand-blue));
}

.setting-row input[type="checkbox"]:checked::before {
    transform: translateX(20px);
}

.muted {
    color: #8e95a7;
}

.progress-wrap,
.result-wrap {
    margin-top: 16px;
    border: 1px solid #e8ebf2;
    border-radius: var(--radius-lg);
    padding: 22px;
    background: #fcfcff;
    text-align: center;
}

.progress-wrap p {
    font-size: 18px;
    color: #45506c;
}

.spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid #d6ddf4;
    border-top-color: var(--brand-blue);
    margin-bottom: 12px;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.result-title {
    font-size: 21px;
    font-weight: 800;
    color: #1f2942;
}

.result-url-wrap {
    margin-top: 12px;
}

.result-url-wrap input {
    width: 100%;
    border: 1px solid #d8deec;
    border-radius: var(--radius-sm);
    background: #fff;
    padding: 11px;
    font-size: 15px;
}

.result-actions {
    margin-top: 13px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.captcha-note {
    margin-top: 16px;
    font-size: 13px;
    color: #a1a8ba;
    text-align: center;
}

.captcha-note .pi {
    margin-right: 5px;
}

.hero-prompt {
    text-align: center;
    color: var(--brand-purple);
    font-weight: 700;
    font-size: 21px;
}

.hero-prompt span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hero-prompt .pi-leftwardsarrow {
    display: block;
    margin-top: 12px;
    font-size: 56px;
}

.logo-strip {
    margin-top: 40px;
    text-align: center;
}

.logo-strip p {
    color: #959eb6;
    font-size: 13px;
    letter-spacing: 0.25em;
    font-weight: 700;
}

.logo-strip p .pi {
    margin: 0 7px;
    color: #9866ea;
}

.logos {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 42px;
    flex-wrap: wrap;
    color: #7a8297;
    font-size: 39px;
    font-weight: 800;
}

.photo-ribbon {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.photo-card {
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #0f1732;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.photo-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.photo-card.tall img {
    height: 320px;
}

.photo-card span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #f4f6ff;
}

.photo-card span .pi {
    color: #dfacff;
}

.examples-shell {
    border-radius: var(--radius-xxl);
    background:
        radial-gradient(circle at 90% -8%, rgba(111, 148, 255, 0.26) 0%, transparent 45%),
        radial-gradient(circle at 5% -12%, rgba(153, 99, 255, 0.28) 0%, transparent 42%),
        linear-gradient(118deg, #071739 10%, #0d2d71 64%, #183c90 100%);
    color: #fff;
    padding: 44px 32px 34px;
    box-shadow: 0 22px 50px rgba(8, 23, 57, 0.32);
    position: relative;
    overflow: hidden;
}

.examples-watermark {
    position: absolute;
    right: -58px;
    top: -6px;
    font-size: 250px;
    color: rgba(200, 215, 255, 0.16);
    pointer-events: none;
}

.examples-top-tabs {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    padding: 10px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.15);
}

.examples-top-tabs a,
.examples-top-tabs span {
    color: #eef3ff;
    font-size: 18px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: 7px 14px;
}

.examples-top-tabs a:hover {
    background: rgba(255, 255, 255, 0.22);
}

.examples-showcase h2 {
    font-size: clamp(45px, 5vw, 71px);
    line-height: 1.08;
}

.examples-showcase h2 .pi {
    font-size: 0.42em;
    margin-right: 8px;
    color: #e6beff;
}

.examples-intro {
    margin-top: 12px;
    font-size: 28px;
    color: rgba(255, 255, 255, 0.84);
    max-width: 960px;
}

.examples-category-pills {
    margin-top: 27px;
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}

.examples-pill {
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.1);
    color: #eef2ff;
    border-radius: var(--radius-pill);
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.examples-pill .pi {
    font-size: 14px;
    color: #c8d9ff;
}

.examples-pill:hover {
    background: rgba(255, 255, 255, 0.2);
}

.examples-pill.active {
    background: #fff;
    color: #0a1e4f;
    border-color: #fff;
}

.examples-pill.active .pi {
    color: #285fd5;
}

.examples-content {
    margin-top: 22px;
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 16px;
    align-items: start;
}

.examples-copy {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--radius-lg);
    padding: 17px;
}

.examples-copy p {
    margin-top: 0;
    color: #ecf2ff;
    font-size: 17px;
}

.examples-use-cases {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
}

.examples-use-cases li {
    color: #dce9ff;
    font-size: 14px;
    line-height: 1.5;
}

.examples-use-cases .pi {
    margin-right: 6px;
    color: #a9ceff;
}

.examples-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.example-card {
    border-radius: var(--radius-lg);
    background: #fdfdff;
    border: 1px solid rgba(209, 219, 244, 0.82);
    overflow: hidden;
    color: #18213b;
    box-shadow: 0 16px 28px rgba(11, 20, 45, 0.23);
}

.example-card-image {
    display: block;
}

.example-card-image img {
    width: 100%;
    height: 158px;
    object-fit: cover;
    display: block;
}

.example-card-body {
    padding: 13px 13px 12px;
}

.example-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radius-pill);
    background: #e8f0ff;
    color: #2c4f9d;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 9px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.example-title {
    margin-top: 9px;
    display: block;
    font-size: 20px;
    font-family: "Sora", "Manrope", sans-serif;
    font-weight: 700;
    color: #1a2745;
    letter-spacing: -0.02em;
}

.example-title:hover {
    color: #2653b8;
}

.example-card-body p {
    margin-top: 8px;
    color: #647089;
    font-size: 14px;
    line-height: 1.45;
}

.example-alias-link {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #2f60d0;
    font-weight: 700;
}

.example-alias-link:hover {
    color: #1d479e;
}

.section-copy {
    max-width: 500px;
}

.eyebrow {
    color: #6f79a1;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.reviews h2 {
    margin-top: 9px;
    font-size: clamp(42px, 5vw, 67px);
}

.reviews h2 .pi {
    font-size: 0.5em;
    color: #8e63ec;
    margin-right: 8px;
}

.section-copy > p:last-child {
    margin-top: 12px;
    color: #636d84;
    font-size: 20px;
}

.review-grid {
    margin-top: 30px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.review-card {
    background: #f2f4f9;
    border: 1px solid #ebedf4;
    border-radius: var(--radius-xl);
    padding: 18px;
    box-shadow: var(--shadow-soft);
}

.review-person {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-person > span {
    width: 39px;
    height: 39px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(115deg, #6b7cf3, #ab61f0);
}

.review-person h3 {
    font-size: 19px;
}

.review-person p {
    color: #77809a;
    font-size: 14px;
}

.review-card > p {
    margin-top: 13px;
    font-size: 31px;
    color: #253048;
}

.review-card > p .pi {
    color: #9575ea;
    margin-right: 8px;
}

.use-cases {
    display: grid;
    grid-template-columns: minmax(230px, 300px) 1fr;
    gap: 28px;
    align-items: center;
}

.use-case-list {
    display: grid;
    gap: 12px;
}

.case-item {
    border: 1px solid #e5e8f1;
    border-radius: var(--radius-pill);
    background: #f7f8fc;
    color: #7c869f;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    padding: 12px 18px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.case-item .pi {
    font-size: 12px;
}

.case-item.active {
    background: linear-gradient(96deg, rgba(136, 80, 239, 0.11), rgba(42, 107, 255, 0.11));
    color: #324377;
    border-color: rgba(94, 118, 215, 0.32);
}

.use-case-card {
    min-height: 380px;
    border-radius: var(--radius-xxl);
    background: #fff;
    border: 1px solid #e4e7ef;
    box-shadow: var(--shadow-card);
    display: grid;
    grid-template-columns: 1fr minmax(250px, 360px);
    overflow: hidden;
}

.use-case-content {
    padding: 44px 40px;
    display: grid;
    align-content: center;
    gap: 22px;
}

.use-case-content h3 {
    font-size: clamp(40px, 3vw, 52px);
    line-height: 1.1;
}

.case-visual {
    background: linear-gradient(130deg, #a7c8ff, #68a0ff);
    position: relative;
    overflow: hidden;
}

.case-photo {
    position: absolute;
    border-radius: var(--radius-md);
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 18px 35px rgba(22, 37, 82, 0.26);
    object-fit: cover;
}

.case-photo.one {
    width: 64%;
    height: 72%;
    left: 8%;
    bottom: -6%;
    transform: rotate(-11deg);
}

.case-photo.two {
    width: 56%;
    height: 58%;
    right: 8%;
    top: 10%;
    transform: rotate(10deg);
}

.case-star {
    position: absolute;
    color: #fff;
    text-shadow: 0 8px 20px rgba(24, 48, 110, 0.35);
}

.case-star.one {
    left: 8%;
    top: 8%;
    font-size: 30px;
}

.case-star.two {
    right: 8%;
    bottom: 8%;
    font-size: 24px;
}

.scale {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 90px 20px;
}

.scale-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(#dce0ec 1px, transparent 1px),
        linear-gradient(90deg, #dce0ec 1px, transparent 1px);
    background-size: 120px 120px;
    transform: perspective(500px) rotateX(35deg);
    opacity: 0.5;
}

.eyebrow.large {
    position: relative;
    z-index: 1;
    font-size: 45px;
    text-transform: none;
    letter-spacing: normal;
    color: #6c52c7;
}

.eyebrow.large .pi {
    margin-right: 10px;
}

.metric {
    margin-top: 10px;
    font-family: "Sora", "Manrope", sans-serif;
    font-size: clamp(66px, 11vw, 150px);
    font-weight: 800;
    letter-spacing: -0.04em;
    background: linear-gradient(90deg, #cf72ee 0%, #8d5ce8 55%, #3f72ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 1;
}

.metric-sub {
    position: relative;
    z-index: 1;
    font-size: 22px;
    color: #8f96aa;
}

.features h2 {
    text-align: center;
    font-size: clamp(45px, 5vw, 84px);
    line-height: 1.04;
}

.features h2 > .pi {
    font-size: 0.42em;
    margin-right: 8px;
    color: #9c69eb;
}

.features h2 span {
    background: linear-gradient(95deg, #b365ec, #2a6bff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.feature-layout {
    margin-top: 36px;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
}

.feature-list {
    background: #f0f2f8;
    border: 1px solid #e4e8f1;
    border-radius: var(--radius-xl);
    padding: 16px;
    display: grid;
    gap: 10px;
}

.feature-item {
    border: 0;
    text-align: left;
    border-radius: var(--radius-md);
    padding: 16px;
    background: transparent;
    color: #6f788f;
    cursor: pointer;
    display: grid;
    gap: 5px;
}

.feature-item strong {
    font-size: 22px;
}

.feature-item strong .pi {
    color: #8a65e7;
    margin-right: 8px;
}

.feature-item small {
    font-size: 15px;
}

.feature-item.active {
    background: #fdfcff;
    color: #213252;
    box-shadow: inset 0 0 0 1px rgba(160, 171, 208, 0.4);
}

.feature-preview {
    background: #f4f5fb;
    border: 1px solid #e4e7ef;
    border-radius: var(--radius-xl);
    display: grid;
    align-content: center;
    justify-items: center;
    padding: 28px;
}

.preview-window {
    width: min(360px, 100%);
    min-height: 330px;
    border-radius: var(--radius-xl);
    background: #e9ecf6;
    display: grid;
    place-items: center;
    position: relative;
}

.preview-frame {
    width: 62%;
    height: 74%;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: inset 0 -30px 0 #e9edf7;
}

.preview-modal {
    position: absolute;
    width: 64%;
    border-radius: var(--radius-md);
    background: #303c56;
    padding: 17px;
    text-align: center;
    color: #fff;
}

.preview-icon {
    font-size: 34px;
    color: #d9adff;
}

.preview-modal input {
    margin-top: 11px;
    width: 100%;
    border-radius: var(--radius-pill);
    border: 0;
    padding: 10px 12px;
    text-align: center;
    color: #7a8499;
}

.preview-modal button {
    margin-top: 10px;
    border: 0;
    background: linear-gradient(96deg, var(--brand-purple), var(--brand-blue));
    color: #fff;
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: 8px 16px;
}

.preview-caption {
    margin-top: 22px;
    font-size: 22px;
    color: #78829b;
}

.preview-caption .pi {
    margin-right: 7px;
    color: #9d71ec;
}

.cta {
    margin-bottom: 90px;
}

.cta-card {
    border-radius: var(--radius-xxl);
    background: linear-gradient(130deg, #0f1f47 0%, #1f3f88 60%, #3c5ac0 100%);
    color: #fff;
    text-align: center;
    padding: 64px 24px;
    box-shadow: 0 18px 42px rgba(12, 24, 66, 0.26);
    position: relative;
    overflow: hidden;
}

.cta-watermark {
    position: absolute;
    right: -35px;
    top: -5px;
    color: rgba(225, 234, 255, 0.22);
    font-size: 240px;
    pointer-events: none;
}

.cta-card h2 {
    font-size: clamp(46px, 5vw, 80px);
}

.cta-card p {
    margin: 14px auto 24px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 34px;
    max-width: 730px;
}

.cta-card p .pi {
    color: #e7c1ff;
    margin-right: 8px;
}

.pricing .section-copy {
    max-width: 720px;
}

.pricing-note {
    margin-top: 14px;
    color: #6b7694;
    font-size: 15px;
    font-weight: 700;
}

.pricing-table-wrap {
    margin-top: 24px;
    border: 1px solid #e4e8f2;
    border-radius: var(--radius-xl);
    overflow-x: auto;
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.pricing-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 880px;
}

.pricing-table th,
.pricing-table td {
    border-bottom: 1px solid #edf0f6;
    padding: 14px 14px;
    text-align: left;
    vertical-align: middle;
}

.pricing-table thead th {
    background: #f6f9ff;
    color: #20335f;
    font-size: 16px;
    font-weight: 800;
    border-bottom: 1px solid #dde4f3;
}

.pricing-table tbody tr:hover td {
    background: #fbfcff;
}

.pricing-table tbody tr:last-child td {
    border-bottom: 0;
}

.pricing-table .feature-col {
    min-width: 220px;
    font-weight: 700;
    color: #2a375d;
}

.feature-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.feature-title .pi {
    color: #7784a8;
    font-size: 14px;
}

.pricing-table .plan-col {
    border-left: 1px solid var(--plan-line, #e2e8f8);
    background: var(--plan-soft, #f7f9ff);
    color: var(--plan-color, #2b3e70);
    font-weight: 700;
    text-align: center;
}

.pricing-table thead .plan-col {
    position: relative;
    background: linear-gradient(180deg, var(--plan-soft, #f7f9ff) 0%, #f8faff 100%);
}

.pricing-table thead .plan-col::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: var(--plan-color, #2a6bff);
}

.pricing-table tbody tr:hover .plan-col {
    background: var(--plan-soft-hover, #edf3ff);
}

.pricing-table .plan-free {
    --plan-color: #3f4f7c;
    --plan-soft: #f5f7ff;
    --plan-soft-hover: #edf1ff;
    --plan-line: #e0e6fa;
    --plan-yes-bg: #e8eeff;
    --plan-no-bg: #edf1f9;
    --plan-no-color: #7f89a7;
}

.pricing-table .plan-basic {
    --plan-color: #1d66ff;
    --plan-soft: #eff5ff;
    --plan-soft-hover: #e4efff;
    --plan-line: #d8e7ff;
    --plan-yes-bg: #deebff;
    --plan-no-bg: #ebf2ff;
    --plan-no-color: #7b8eb5;
}

.pricing-table .plan-solo {
    --plan-color: #7a4de0;
    --plan-soft: #f4efff;
    --plan-soft-hover: #ede3ff;
    --plan-line: #e7dbff;
    --plan-yes-bg: #e9ddff;
    --plan-no-bg: #f0e9ff;
    --plan-no-color: #8a7ca9;
}

.pricing-table .plan-pro {
    --plan-color: #d8870f;
    --plan-soft: #fff5e7;
    --plan-soft-hover: #ffefd8;
    --plan-line: #f7e3c3;
    --plan-yes-bg: #ffe6ba;
    --plan-no-bg: #fff0d8;
    --plan-no-color: #a48d66;
}

.plan-name {
    display: block;
    font-size: 20px;
    font-weight: 900;
    color: var(--plan-color, #20335f);
}

.plan-name .pi {
    margin-right: 6px;
    font-size: 14px;
    color: var(--plan-color, #20335f);
}

.plan-price {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    color: #66779e;
    font-weight: 700;
}

.plan-mark {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.plan-mark .pi {
    font-size: 14px;
}

.plan-col .plan-mark.yes {
    background: var(--plan-yes-bg, #ecf8ef);
    color: var(--plan-color, #17723a);
}

.plan-col .plan-mark.no {
    background: var(--plan-no-bg, #f4f6fb);
    color: var(--plan-no-color, #7b86a4);
}

.cell-note {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #7b86a4;
}

.pricing-page .pricing {
    margin-top: 0;
}

.faq-list {
    margin-top: 28px;
    display: grid;
    gap: 12px;
}

.faq-list details {
    border: 1px solid #e4e7ef;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.faq-list summary {
    cursor: pointer;
    padding: 18px;
    font-weight: 800;
    color: #1e2c4f;
    position: relative;
    list-style: none;
    padding-right: 42px;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    content: "+";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    line-height: 1;
    color: #6170a0;
}

.faq-list details[open] summary::after {
    content: "-";
}

.faq-list details p {
    border-top: 1px solid #edf0f5;
    margin: 0;
    padding: 15px 18px 18px;
    color: #5d6884;
    font-size: 16px;
    line-height: 1.55;
}

.faq-list a {
    color: #3556ca;
    font-weight: 700;
}

.faq-list a:hover {
    text-decoration: underline;
}

.simple-page {
    margin-top: 110px;
    margin-bottom: 90px;
}

.auth-card,
.panel-card {
    background: #fff;
    border: 1px solid #e4e7ef;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    padding: 30px;
}

.auth-card {
    max-width: 540px;
    margin: 0 auto;
}

.auth-card h1,
.panel-card h1 {
    font-size: clamp(32px, 3vw, 48px);
}

.auth-card > p,
.panel-card > p {
    margin-top: 8px;
    color: #66708a;
    font-size: 18px;
}

.auth-form {
    margin-top: 18px;
    display: grid;
    gap: 12px;
}

.auth-social {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

.auth-divider {
    margin: 14px 0 6px;
    text-align: center;
    color: #7b849a;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    position: relative;
}

.auth-divider span {
    background: #fff;
    padding: 0 10px;
    position: relative;
    z-index: 1;
}

.auth-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid #dce1ef;
    transform: translateY(-50%);
}

.btn-google {
    border: 1px solid #d7dcea;
    background: #fff;
    color: #1f2a44;
}

.btn-google:hover {
    box-shadow: 0 10px 22px rgba(15, 25, 48, 0.12);
}

.btn-google-mock {
    border-style: dashed;
}

.auth-form label {
    display: grid;
    gap: 6px;
    font-size: 14px;
    color: #4d5876;
    font-weight: 700;
}

.auth-form input {
    border: 1px solid #d7dcea;
    border-radius: var(--radius-sm);
    padding: 12px;
    font-size: 16px;
    color: #1b263f;
}

.auth-form input:focus {
    outline: 3px solid rgba(42, 107, 255, 0.25);
    outline-offset: 2px;
}

.auth-meta {
    margin-top: 12px;
    color: #66708a;
    font-size: 14px;
}

.auth-meta a {
    color: #3658cf;
    font-weight: 700;
}

.auth-meta code {
    background: #f1f4fb;
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    color: #344369;
}

.form-errors {
    margin-top: 14px;
    border: 1px solid rgba(191, 32, 54, 0.35);
    border-radius: var(--radius-sm);
    background: #fff5f7;
    padding: 10px 12px;
    color: #9f1f33;
    font-size: 14px;
}

.form-errors p + p {
    margin-top: 6px;
}

.panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    width: 100%;
}

.panel-head p {
    margin-top: 6px;
    color: #66708a;
}

.panel-head .btn {
    flex-shrink: 1;
}

.admin-stats {
    display: flex;
    gap: 12px;
}

.admin-stats div {
    min-width: 90px;
    border-radius: var(--radius-md);
    padding: 10px;
    text-align: center;
    background: #f6f8ff;
    border: 1px solid #dce3f5;
}

.admin-stats strong {
    display: block;
    font-size: 26px;
    color: #203567;
}

.admin-stats span {
    font-size: 12px;
    font-weight: 700;
    color: #6c7795;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.panel-title {
    margin-top: 26px;
    margin-bottom: 12px;
    font-size: 26px;
}

.table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 920px;
}

.admin-table th,
.admin-table td {
    border-bottom: 1px solid #e8ecf5;
    padding: 11px 8px;
    text-align: left;
    font-size: 14px;
}

.admin-table th {
    color: #556184;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-table td {
    color: #1e2b4a;
}

.admin-table a {
    color: #2f58d2;
    font-weight: 700;
}

.admin-table a:hover {
    text-decoration: underline;
}

.links-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1260px;
}

.links-table th,
.links-table td {
    border-bottom: 1px solid #e8ecf5;
    padding: 8px 6px;
    text-align: left;
    font-size: 14px;
    vertical-align: middle;
}

.links-table th {
    color: #556184;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #f7f9ff;
}

.links-table th.text-center,
.links-table td.link-cell-center {
    text-align: center;
}

.links-table th.text-right,
.links-table td.link-cell-actions {
    text-align: right;
}

.links-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.links-table th .sort-arrow {
    margin-left: 5px;
    opacity: 0.45;
    font-size: 12px;
}

.links-table th.active .sort-arrow {
    opacity: 1;
    color: #3656c6;
}

.link-shortcut-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.link-shortcut {
    color: #5146ff;
    font-weight: 700;
}

.link-shortcut:hover {
    color: #4037ce;
}

.copy-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    border: 1px solid #d1d8ea;
    background: #fff;
    color: #7883a0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.copy-btn .pi {
    font-size: 12px;
}

.copy-btn:hover {
    border-color: #99a5c9;
    color: #283457;
    transform: translateY(-1px);
}

.copy-btn.is-copied {
    background: #169f5b;
    border-color: #169f5b;
    color: #fff;
}

.qr-cell-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.qr-canvas {
    width: 64px;
    height: 64px;
    border: 1px solid #dde4f6;
    border-radius: 0;
    background: #fff;
    image-rendering: pixelated;
}

.qr-download-link {
    color: #3e63dd;
}

.qr-download-link:hover {
    color: #2d4fbf;
}

.qr-download-link .pi {
    font-size: 16px;
}

.link-destination-cell {
    max-width: 420px;
}

.link-destination {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1d2d53;
    font-weight: 600;
}

.link-meta {
    margin-top: 4px;
    display: block;
    color: #6e7894;
    font-size: 12px;
}

.link-meta .pi {
    font-size: 12px;
    margin-right: 4px;
}

.meta-protection {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
}

.meta-protection.is-on {
    color: #0f8f56;
}

.meta-protection.is-off {
    color: #5f6d8f;
}

.meta-protection .pi {
    margin-right: 0;
}

.link-protection-cell {
    min-width: 72px;
    text-align: center;
}

.protection-form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.protect-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #d1d8ea;
    border-radius: 8px;
    background: #fff;
    color: #2f58d2;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.protect-toggle-btn:hover {
    border-color: #9cb0ea;
    background: #f4f7ff;
    transform: translateY(-1px);
}

.protect-toggle-btn[aria-pressed="true"] {
    border-color: #7ea0e9;
    background: #eef3ff;
}

.protect-icon {
    font-size: 13px;
    color: #2f58d2;
}

.link-row td {
    vertical-align: middle;
}

.link-save-btn {
    padding: 6px 7px;
    font-size: 12px;
    border-radius: 8px;
    white-space: nowrap;
}

.protect-unavailable {
    color: #7683a5;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.links-table .password-column-header,
.links-table td.link-password-cell {
    display: none;
}

.links-table.show-password-column .password-column-header,
.links-table.show-password-column td.link-password-cell {
    display: table-cell;
}

.link-password-cell {
    min-width: 250px;
    vertical-align: middle;
}

.password-input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.password-visible-input {
    width: 100%;
    border: 1px solid #ccd6f0;
    border-radius: 8px;
    background: #fff;
    color: #1f2b4c;
    font-size: 13px;
    padding: 7px 8px;
}

.password-visible-input:disabled {
    background: #f5f7fc;
    color: #95a2c2;
}

.link-row[data-protected="1"] .password-input-wrap {
    display: none;
}

.link-row[data-protected="0"] .password-input-wrap {
    display: flex;
}

.password-unavailable {
    color: #95a2c2;
}

.link-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.link-action-btn {
    border: 1px solid #d5def1;
    background: #fff;
    color: #2f58d2;
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.link-action-btn:hover {
    background: #f3f6ff;
}

.link-action-btn .pi {
    font-size: 12px;
}

.link-delete-btn {
    color: #b02b43;
    border-color: #efccd5;
    background: #fff8fa;
}

.link-delete-btn:hover {
    background: #ffedf1;
}

.inline-form {
    display: inline;
    margin-left: 6px;
}

.link-actions .inline-form {
    margin-left: 0;
}

.admin-page {
    width: min(1520px, calc(100% - 26px));
}

.admin-panel {
    padding: 34px 30px;
    overflow: visible;
}

.admin-menu {
    margin-top: 14px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-menu-item {
    border: 1px solid #dbe3f6;
    border-radius: var(--radius-sm);
    background: #f7f9ff;
    color: #2a3c70;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.admin-menu-item strong {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    background: #e6edff;
    color: #1e3674;
    font-size: 13px;
}

.admin-menu-item.active {
    border-color: #4a6be0;
    background: linear-gradient(96deg, #4865d6 0%, #7b5fe7 100%);
    color: #fff;
}

.admin-menu-item.active strong {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.admin-filters {
    margin-top: 14px;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid #e2e7f5;
    border-radius: var(--radius-lg);
    background: #f8faff;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.filter-field {
    display: grid;
    gap: 6px;
    font-size: 12px;
    color: #5b6788;
    font-weight: 700;
}

.filter-field input,
.filter-field select {
    width: 100%;
    border: 1px solid #d7dff1;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    color: #27365f;
    font-size: 14px;
}

.filter-field input:focus,
.filter-field select:focus,
.admin-edit-form input:focus,
.admin-edit-form select:focus {
    outline: 3px solid rgba(42, 107, 255, 0.25);
    outline-offset: 2px;
}

.filter-actions {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-small {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
}

.btn-ghost {
    border: 1px solid #ccd6ef;
    background: #fff;
    color: #2a3f77;
}

.btn-ghost:hover {
    box-shadow: 0 8px 16px rgba(46, 65, 113, 0.12);
}

.delete-upload-btn {
    color: #a62b3e;
    border-color: #efccd5;
    background: #fff7f9;
}

.delete-upload-btn .pi {
    font-size: 13px;
}

.delete-upload-btn:hover {
    background: #ffedf1;
}

.admin-results-count {
    margin-bottom: 10px;
    color: #5f6988;
    font-size: 14px;
    font-weight: 700;
}

.admin-table-breakout {
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: 8px;
    padding: 8px 24px 18px;
    border-top: 1px solid #e6eaf5;
}

.admin-table-breakout .table-wrap {
    border: 1px solid #e1e7f3;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-soft);
    padding: 6px 10px 8px;
}

.upload-preview {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.upload-thumb {
    width: 72px;
    height: 52px;
    border-radius: 10px;
    border: 1px solid #dbe2f4;
    object-fit: contain;
    padding: 2px;
    background: #f3f6ff;
}

.upload-preview-ext {
    font-size: 11px;
    font-weight: 800;
    color: #4d5e8f;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.file-preview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #dbe2f4;
    border-radius: var(--radius-pill);
    background: #f5f8ff;
    color: #3a4f8b;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 9px;
}

.file-preview-icon .pi {
    color: #5d71ab;
    font-size: 14px;
}

.file-preview-ext {
    letter-spacing: 0.06em;
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 5px 8px;
}

.badge-neutral {
    border: 1px solid #d7deef;
    background: #f4f6fb;
    color: #5a698f;
}

.badge-blue {
    border: 1px solid #bed0ff;
    background: #ecf2ff;
    color: #2d56c4;
}

.badge-green {
    border: 1px solid #bde5cb;
    background: #f0fbf4;
    color: #226b3f;
}

.badge-red {
    border: 1px solid #efc1ca;
    background: #fff2f5;
    color: #a13347;
}

.badge-amber {
    border: 1px solid #f0d2a2;
    background: #fff8e9;
    color: #8a5a12;
}

.meta-stack {
    display: grid;
    gap: 4px;
}

.meta-small {
    font-size: 12px;
    color: #6a7392;
}

.ext-chip {
    width: fit-content;
    border-radius: var(--radius-pill);
    border: 1px solid #d2daf0;
    background: #f3f6ff;
    color: #40548f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
}

.row-editor {
    min-width: 240px;
}

.row-editor > summary {
    cursor: pointer;
    list-style: none;
    color: #3559d0;
    font-size: 13px;
    font-weight: 700;
}

.row-editor > summary::-webkit-details-marker {
    display: none;
}

.row-editor[open] > summary {
    margin-bottom: 8px;
}

.admin-edit-form {
    display: grid;
    gap: 8px;
    border: 1px solid #dde4f4;
    border-radius: 12px;
    background: #fbfcff;
    padding: 10px;
}

.admin-edit-form label {
    display: grid;
    gap: 4px;
    font-size: 12px;
    color: #51618b;
    font-weight: 700;
}

.admin-edit-form input,
.admin-edit-form select {
    width: 100%;
    border: 1px solid #d3dced;
    border-radius: 9px;
    padding: 8px;
    font-size: 13px;
    background: #fff;
    color: #243153;
}

.inline-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.inline-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.action-stack {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.admin-page .admin-table {
    min-width: 1280px;
}

.link-button {
    border: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.link-button.danger {
    color: #c42d43;
}

.link-button.danger:hover {
    text-decoration: underline;
}

.empty-state {
    color: #66708a;
    font-size: 18px;
    margin-top: 18px;
}

.link-list {
    margin-top: 12px;
    padding-left: 18px;
    color: #526080;
    display: grid;
    gap: 7px;
}

.link-list a {
    color: #2f58d2;
    font-weight: 700;
}

.flash-wrap {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.flash {
    border-radius: var(--radius-sm);
    border: 1px solid #dce5f9;
    background: #f4f8ff;
    color: #2f4578;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 12px;
}

.flash-success {
    border-color: #b7e8ce;
    background: #f1fcf5;
    color: #1f6b3f;
}

.flash-error {
    border-color: #f1c0c7;
    background: #fff5f7;
    color: #a12a3c;
}

.site-footer {
    border-top: 1px solid #e4e7ef;
    padding: 22px 0 36px;
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr auto auto;
    align-items: center;
}

.site-footer .brand {
    font-size: 30px;
}

.site-footer .brand-text {
    font-size: 29px;
}

.site-footer p {
    color: #6d758b;
    margin-top: 4px;
    font-size: 18px;
}

.maker-line a {
    color: #4e66d6;
    font-weight: 700;
}

.maker-line a:hover {
    text-decoration: underline;
}

.footer-links {
    display: flex;
    gap: 16px;
    color: #2a3146;
    font-size: 19px;
    font-weight: 700;
}

.footer-links a:hover {
    color: var(--brand-blue);
}

.copyright {
    color: #8a90a3;
    font-size: 17px;
}

@media (max-width: 1199px) {
    .brand {
        font-size: 30px;
    }

    .brand-text {
        font-size: 28px;
    }

    .hero-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hero-quote,
    .hero-prompt {
        display: none;
    }

    .hero-watermark {
        top: 150px;
        font-size: 320px;
    }

    .uploader-card {
        max-width: 790px;
        margin: 0 auto;
    }

    .photo-ribbon {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .photo-card.tall {
        grid-column: span 2;
    }

    .pricing-table {
        min-width: 760px;
    }

    .review-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .review-card > p {
        font-size: 26px;
    }

    .use-cases {
        grid-template-columns: 1fr;
    }

    .use-case-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 899px) {
    .container {
        width: min(1200px, calc(100% - 26px));
    }

    .section {
        margin-top: 62px;
    }

    .site-header {
        top: 7px;
    }

    .nav-wrap {
        min-height: 64px;
        border-radius: var(--radius-md);
        padding: 8px 12px;
        gap: 12px;
    }

    .main-nav,
    .sales-link {
        display: none;
    }

    .nav-right {
        margin-left: auto;
        gap: 10px;
    }

    .maker-badge {
        display: none;
    }

    .btn {
        font-size: 14px;
        padding: 10px 16px;
    }

    .hero h1 {
        text-align: left;
    }

    .automation-chip {
        left: 0;
        transform: none;
        margin-left: 0;
        margin-bottom: 16px;
    }

    .upload-tabs {
        gap: 12px;
    }

    .drop-zone {
        min-height: 250px;
        padding: 18px;
    }

    .drop-zone p {
        font-size: 17px;
    }

    .logos {
        gap: 22px;
        font-size: 30px;
    }

    .photo-ribbon {
        grid-template-columns: 1fr;
    }

    .photo-card.tall {
        grid-column: span 1;
    }

    .photo-card img,
    .photo-card.tall img {
        height: 220px;
    }

    .examples-shell {
        border-radius: var(--radius-xl);
        padding: 34px 20px 34px;
    }

    .examples-watermark {
        font-size: 170px;
        right: -20px;
        top: 20px;
    }

    .examples-top-tabs {
        width: 100%;
        overflow-x: auto;
        margin-bottom: 18px;
    }

    .examples-top-tabs a,
    .examples-top-tabs span {
        font-size: 14px;
        padding: 7px 10px;
        white-space: nowrap;
    }

    .examples-intro {
        font-size: 22px;
    }

    .examples-content {
        grid-template-columns: 1fr;
    }

    .examples-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .review-grid {
        grid-template-columns: 1fr;
    }

    .review-card > p {
        font-size: 22px;
    }

    .use-case-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .use-case-card {
        grid-template-columns: 1fr;
        min-height: unset;
    }

    .use-case-content {
        padding: 28px;
    }

    .use-case-content h3 {
        font-size: 36px;
    }

    .case-visual {
        min-height: 230px;
    }

    .case-photo.one {
        width: 62%;
        height: 72%;
    }

    .case-photo.two {
        width: 52%;
        height: 56%;
    }

    .feature-layout {
        grid-template-columns: 1fr;
    }

    .feature-item strong {
        font-size: 19px;
    }

    .preview-caption {
        font-size: 20px;
    }

    .cta-card {
        padding: 44px 18px;
    }

    .cta-watermark {
        font-size: 170px;
        right: -10px;
    }

    .cta-card p {
        font-size: 27px;
    }

    .site-footer {
        grid-template-columns: 1fr;
    }

    .footer-links {
        flex-wrap: wrap;
    }

    .pricing-table {
        min-width: 680px;
    }

    .simple-page {
        margin-top: 92px;
        margin-bottom: 70px;
    }

    .panel-head {
        flex-direction: column;
    }

    .admin-stats {
        width: 100%;
    }

    .admin-stats div {
        flex: 1;
    }

    .admin-filters {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .filter-actions {
        grid-column: 1 / -1;
    }

    .admin-table-breakout {
        margin-left: -14px;
        margin-right: -14px;
        padding: 8px 14px 14px;
    }

    .row-editor {
        min-width: 190px;
    }
}

@media (max-width: 640px) {
    .nav-right .btn-dark {
        display: none;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero-watermark {
        font-size: 210px;
        top: 210px;
        opacity: 0.5;
    }

    .automation-chip {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .uploader-card {
        border-radius: var(--radius-lg);
        padding: 16px;
    }

    .url-builder {
        flex-direction: column;
    }

    .domain-btn {
        padding: 11px 14px;
    }

    .upload-tabs {
        gap: 10px;
    }

    .upload-tab {
        font-size: 14px;
    }

    .result-actions {
        flex-direction: column;
    }

    .result-actions .btn {
        width: 100%;
    }

    .logos {
        font-size: 25px;
    }

    .photo-card img,
    .photo-card.tall img {
        height: 190px;
    }

    .examples-showcase h2 {
        font-size: 40px;
    }

    .examples-intro {
        font-size: 19px;
    }

    .examples-category-pills {
        gap: 8px;
    }

    .examples-pill {
        font-size: 13px;
        padding: 8px 11px;
    }

    .examples-grid {
        grid-template-columns: 1fr;
    }

    .use-case-list {
        grid-template-columns: 1fr;
    }

    .scale {
        padding: 70px 8px;
    }

    .eyebrow.large {
        font-size: 31px;
    }

    .metric {
        font-size: 73px;
    }

    .metric-sub {
        font-size: 18px;
    }

    .features h2 {
        font-size: 38px;
        text-align: left;
    }

    .feature-list,
    .feature-preview {
        border-radius: var(--radius-lg);
    }

    .preview-window {
        min-height: 270px;
    }

    .cta-watermark {
        font-size: 120px;
        right: -18px;
        top: 8px;
    }

    .cta-card h2 {
        font-size: 39px;
    }

    .cta-card p {
        font-size: 22px;
    }

    .site-footer p {
        font-size: 16px;
    }

    .footer-links,
    .copyright {
        font-size: 16px;
    }

    .auth-card,
    .panel-card {
        border-radius: var(--radius-lg);
        padding: 20px;
    }

    .auth-card > p,
    .panel-card > p {
        font-size: 16px;
    }

    .admin-menu-item {
        width: 100%;
        justify-content: space-between;
    }

    .admin-filters {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .admin-table-breakout {
        margin-left: 0;
        margin-right: 0;
        padding: 6px 0 12px;
        border-top: 0;
    }

    .admin-table-breakout .table-wrap {
        border-radius: var(--radius-md);
        padding: 4px 6px 8px;
    }

    .filter-actions {
        width: 100%;
    }

    .filter-actions .btn {
        width: 100%;
    }

    .upload-thumb {
        width: 48px;
        height: 36px;
    }

    .row-editor {
        min-width: 0;
    }

    .faq-list summary {
        padding: 14px 40px 14px 14px;
    }

    .faq-list details p {
        padding: 12px 14px 14px;
        font-size: 15px;
    }
}