/* =========================================================
   MNY PDF
   BRAND SYSTEM
   =========================================================

   Primary:
   Japanese Blue  #1D3568
   Roman Earth    #D16B37

   Supporting:
   Blue Dark      #15284F
   Blue Light     #29477F
   Earth Dark     #AD5226
   Earth Light    #E59A76

   Semantic:
   Green = success
   Amber = warning
   Red   = error
========================================================= */


/* =========================================================
   DESIGN TOKENS
========================================================= */

:root {

    /* -----------------------------------------------------
       BRAND
    ----------------------------------------------------- */

    --blue: #1D3568;
    --blue-dark: #15284F;
    --blue-light: #29477F;

    --earth: #D16B37;
    --earth-dark: #AD5226;
    --earth-light: #E59A76;


    /* -----------------------------------------------------
       PAGE
    ----------------------------------------------------- */

    --background: #1D3568;

    --surface: #FFFFFF;

    --surface-soft: #F7F9FC;

    --surface-muted: #EEF2F8;


    /* -----------------------------------------------------
       TEXT
    ----------------------------------------------------- */

    --text: #182033;

    --secondary: #4E596D;

    --muted: #737D8F;

    --white: #FFFFFF;


    /* -----------------------------------------------------
       BORDERS
    ----------------------------------------------------- */

    --border: rgba(24, 32, 51, 0.12);

    --border-strong: rgba(24, 32, 51, 0.22);


    /* -----------------------------------------------------
       SUCCESS
    ----------------------------------------------------- */

    --green: #16803A;

    --green-soft: #EAF7EE;

    --green-border: #A9DDBA;


    /* -----------------------------------------------------
       WARNING
    ----------------------------------------------------- */

    --amber: #B86A00;

    --amber-dark: #754500;

    --amber-soft: #FFF4D9;

    --amber-border: #F0D18A;


    /* -----------------------------------------------------
       ERROR
    ----------------------------------------------------- */

    --red: #8B1E1E;

    --red-soft: #FBEAEA;

    --red-border: #E6B1B1;


    /* -----------------------------------------------------
       LAYOUT
    ----------------------------------------------------- */

    --max-width: 1080px;

    --content-width: 760px;

    --header-height: 68px;

    --radius-sm: 10px;

    --radius-md: 14px;

    --radius-lg: 20px;

    --radius-xl: 24px;
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    min-width: 320px;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: var(--background);

    color: var(--text);

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;
}


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


button {
    -webkit-tap-highlight-color: transparent;
}


img {
    max-width: 100%;

    display: block;
}


a {
    color: inherit;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {

    width: 100%;

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(21, 40, 79, 0.97);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);
}


.header-inner {

    width: 100%;

    max-width: var(--max-width);

    min-height: var(--header-height);

    margin: 0 auto;

    padding:
        0 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;
}


/* =========================================================
   BRAND
========================================================= */

.brand {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    min-width: 0;

    text-decoration: none;

    color: var(--white);
}


.brand-mark {

    width: 34px;

    height: 34px;

    flex: 0 0 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background: var(--earth);

    color: var(--white);

    font-size: 15px;

    font-weight: 800;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.18);
}


.brand-name {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: var(--white);

    font-size: 18px;

    font-weight: 750;

    letter-spacing: -0.4px;
}


.header-badge {

    flex-shrink: 0;

    padding:
        7px 12px;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius: 999px;

    color:
        rgba(255, 255, 255, 0.78);

    font-size: 12px;

    font-weight: 600;
}


/* =========================================================
   PAGE
========================================================= */

.page {

    width: 100%;

    min-height:
        calc(100vh - var(--header-height));

    padding:
        72px 24px 40px;
}


.hero {

    width: 100%;

    max-width: var(--content-width);

    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.hero-copy {

    margin:
        0 0 38px;

    text-align: center;
}


.eyebrow {

    display: inline-block;

    margin-bottom: 15px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 11px;

    font-weight: 750;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


.hero h1 {

    margin: 0;

    color: var(--white);

    font-size:
        clamp(42px, 7vw, 68px);

    line-height: 0.98;

    letter-spacing: -3px;

    font-weight: 800;
}


.hero h1 span {

    color: var(--earth);
}


.hero-copy p {

    max-width: 520px;

    margin:
        20px auto 0;

    color:
        rgba(255, 255, 255, 0.78);

    font-size: 17px;

    line-height: 1.6;
}


/* =========================================================
   COMPRESSOR CARD
========================================================= */

.compressor-card {

    width: 100%;

    padding: 28px;

    background: var(--surface);

    border:
        1px solid
        rgba(255, 255, 255, 0.20);

    border-radius: var(--radius-xl);

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.24);
}


/* =========================================================
   UPLOAD BOX
========================================================= */

.upload-box {

    width: 100%;

    min-height: 245px;

    padding: 32px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    cursor: pointer;

    background: var(--surface-soft);

    border:
        1.5px dashed
        rgba(24, 32, 51, 0.28);

    border-radius: 18px;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.upload-box:hover {

    border-color: var(--blue);

    background: var(--white);

    box-shadow:
        0 8px 25px
        rgba(29, 53, 104, 0.10);
}


.upload-box:focus {

    outline: none;

    border-color: var(--blue);

    background: var(--white);
}


.upload-box.dragging {

    border-color: var(--earth);

    background: #FFF4EF;

    transform: scale(1.01);
}


.upload-box.has-file {

    border-color: var(--green-border);

    background: var(--green-soft);
}


/* =========================================================
   UPLOAD ICON
========================================================= */

.upload-icon {

    width: 52px;

    height: 52px;

    margin-bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: var(--surface-muted);

    color: var(--blue);

    font-size: 25px;
}


.upload-box h2 {

    margin: 0;

    color: var(--text);

    font-size: 19px;

    line-height: 1.25;

    letter-spacing: -0.3px;
}


.upload-box p {

    margin:
        8px 0 12px;

    color: var(--secondary);

    font-size: 14px;

    line-height: 1.5;
}


.upload-limit {

    color: var(--muted);

    font-size: 12px;
}


/* =========================================================
   FILE PREVIEW
========================================================= */

.file-preview {

    width: 100%;

    margin-top: 14px;

    padding: 14px;

    display: flex;

    align-items: center;

    gap: 14px;

    background: var(--surface-soft);

    border:
        1px solid
        var(--border);

    border-radius: 13px;
}


.file-icon {

    width: 42px;

    height: 42px;

    flex: 0 0 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background: var(--blue);

    color: var(--white);

    font-size: 10px;

    font-weight: 800;
}


.file-info {

    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.file-info strong {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: var(--text);

    font-size: 14px;
}


.file-info span {

    color: var(--secondary);

    font-size: 12px;
}


.remove-file {

    width: 34px;

    height: 34px;

    flex: 0 0 34px;

    margin: 0;

    padding: 0;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: var(--secondary);

    font-size: 24px;

    line-height: 1;

    cursor: pointer;

    transition:
        color 0.15s ease,
        background 0.15s ease;
}


.remove-file:hover {

    color: var(--red);

    background: var(--red-soft);
}


/* =========================================================
   TARGET SECTION
========================================================= */

.target-section {

    margin-top: 27px;
}


.section-heading {

    margin-bottom: 10px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 15px;
}


.section-heading label {

    color: var(--text);

    font-size: 14px;

    font-weight: 700;
}


.section-heading span {

    color: var(--secondary);

    font-size: 12px;
}


/* =========================================================
   TARGET INPUT
========================================================= */

.target-input {

    width: 100%;

    height: 54px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--surface-soft);

    border:
        1px solid
        var(--border-strong);

    border-radius: 11px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.target-input:focus-within {

    border-color: var(--blue);

    box-shadow:
        0 0 0 3px
        rgba(29, 53, 104, 0.12);
}


.target-input input {

    flex: 1;

    min-width: 0;

    width: 100%;

    height: 100%;

    padding:
        0 15px;

    border: 0;

    outline: 0;

    background: transparent;

    color: var(--text);

    font-size: 17px;

    font-weight: 600;
}


.target-input input::placeholder {

    color: var(--muted);
}


.target-input span {

    flex-shrink: 0;

    padding-right: 16px;

    color: var(--secondary);

    font-size: 14px;

    font-weight: 600;
}


/* =========================================================
   PRESETS
========================================================= */

.preset-row {

    width: 100%;

    margin-top: 10px;

    display: flex;

    gap: 8px;
}


.preset {

    width: auto;

    margin: 0;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(24, 32, 51, 0.16);

    border-radius: 999px;

    background:
        rgba(29, 53, 104, 0.04);

    color: var(--secondary);

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}


.preset:hover {

    border-color: var(--earth);

    color: var(--earth);

    transform: translateY(-1px);
}


.preset.active {

    border-color: var(--blue);

    background: var(--blue);

    color: var(--white);
}


/* =========================================================
   COMPRESS BUTTON
========================================================= */

.compress-button {

    width: 100%;

    min-height: 56px;

    margin-top: 25px;

    padding:
        0 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border: 0;

    border-radius: 12px;

    background: var(--blue);

    color: var(--white);

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 20px
        rgba(29, 53, 104, 0.25);

    transition:
        background 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}


.compress-button:hover {

    background: var(--blue-dark);

    transform: translateY(-1px);

    box-shadow:
        0 12px 25px
        rgba(29, 53, 104, 0.30);
}


.compress-button:active {

    transform: translateY(0);
}


.compress-button:disabled {

    opacity: 0.65;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* =========================================================
   SPINNER
========================================================= */

.spinner {

    width: 17px;

    height: 17px;

    flex: 0 0 17px;

    border:
        2px solid
        rgba(255, 255, 255, 0.35);

    border-top-color: var(--white);

    border-radius: 50%;

    animation:
        spin 0.7s linear infinite;
}


@keyframes spin {

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   STATUS
========================================================= */

.status {

    width: 100%;

    margin-top: 16px;

    padding:
        14px 16px;

    border-radius: 11px;

    text-align: center;

    color: var(--secondary);

    background: var(--surface-muted);

    border:
        1px solid
        rgba(29, 53, 104, 0.10);

    font-size: 13px;

    line-height: 1.5;
}


.status.loading {

    color: var(--blue);

    background: #EEF2F8;

    border-color:
        rgba(29, 53, 104, 0.16);
}


.status.error {

    color: var(--red);

    background: var(--red-soft);

    border-color: var(--red-border);
}


/* =========================================================
   RESULT
========================================================= */

.result {

    width: 100%;

    margin-top: 18px;

    padding: 26px;

    border:
        1px solid
        var(--green-border);

    border-radius: 16px;

    background: var(--green-soft);

    text-align: center;
}


.success-icon {

    width: 48px;

    height: 48px;

    margin:
        0 auto 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--green);

    color: var(--white);

    font-size: 22px;

    font-weight: 700;
}


.result h2 {

    margin: 0;

    color: var(--text);

    font-size: 20px;

    line-height: 1.25;

    letter-spacing: -0.4px;
}


.result-message {

    max-width: 460px;

    margin:
        8px auto 20px;

    color: var(--secondary);

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   RESULT STATS
========================================================= */

.result-stats {

    width: 100%;

    margin-bottom: 18px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;
}


.stat {

    min-width: 0;

    padding:
        15px 10px;

    background: var(--surface-white);

    border:
        1px solid
        var(--border);

    border-radius: 11px;
}


.stat span {

    display: block;

    margin-bottom: 6px;

    color: var(--muted);

    font-size: 11px;

    font-weight: 600;
}


.stat strong {

    display: block;

    overflow-wrap: anywhere;

    color: var(--text);

    font-size: 14px;
}


.stat.highlight {

    background: var(--earth);

    border-color: var(--earth);

    color: var(--white);
}


.stat.highlight span {

    color:
        rgba(255, 255, 255, 0.75);
}


.stat.highlight strong {

    color: var(--white);
}


/* =========================================================
   WARNING STAT
========================================================= */

.warning-stat {

    background:
        var(--amber-soft) !important;

    border-color:
        var(--amber-border) !important;

    color:
        var(--amber-dark) !important;
}


.warning-stat span,
.warning-stat strong {

    color:
        var(--amber-dark) !important;
}


/* =========================================================
   DOWNLOAD
========================================================= */

.download-button {

    width: 100%;

    min-height: 52px;

    padding:
        0 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-radius: 11px;

    background: var(--earth);

    color: var(--white);

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    box-shadow:
        0 8px 20px
        rgba(209, 107, 55, 0.22);

    transition:
        background 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}


.download-button:hover {

    background: var(--earth-dark);

    transform: translateY(-1px);

    box-shadow:
        0 12px 25px
        rgba(209, 107, 55, 0.28);
}


.start-over {

    width: auto;

    display: block;

    margin:
        13px auto 0;

    padding:
        7px 10px;

    border: 0;

    background: transparent;

    color: var(--secondary);

    font-size: 12px;

    cursor: pointer;
}


.start-over:hover {

    color: var(--earth);

    text-decoration: underline;
}


/* =========================================================
   FEATURES
========================================================= */

.feature-row {

    width: 100%;

    margin-top: 25px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}


.feature {

    padding: 16px;

    text-align: center;

    color:
        rgba(255, 255, 255, 0.90);
}


.feature strong {

    display: block;

    color: var(--white);

    font-size: 13px;
}


.feature span {

    display: block;

    margin-top: 5px;

    color:
        rgba(255, 255, 255, 0.66);

    font-size: 11px;

    line-height: 1.4;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {

    width: 100%;

    max-width: var(--max-width);

    margin: 0 auto;

    padding:
        20px 24px 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    color:
        rgba(255, 255, 255, 0.58);

    font-size: 11px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.14);
}


.site-footer p,
.site-footer span {

    margin: 0;
}


.site-footer span {

    color:
        rgba(255, 255, 255, 0.42);
}


/* =========================================================
   HIDDEN
========================================================= */

.hidden {
    display: none !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

    .header-inner {

        min-height: 62px;

        padding:
            0 18px;
    }


    .page {

        padding:
            48px 18px 32px;
    }


    .hero-copy {

        margin-bottom: 28px;
    }


    .hero h1 {

        font-size:
            clamp(40px, 9vw, 58px);

        letter-spacing: -2.5px;
    }


    .hero-copy p {

        max-width: 580px;

        font-size: 16px;
    }


    .compressor-card {

        padding: 20px;

        border-radius: 20px;
    }


    .upload-box {

        min-height: 220px;

        padding: 26px;
    }


    .feature-row {

        gap: 8px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .header-inner {

        min-height: 58px;

        padding:
            0 14px;
    }


    .brand {

        gap: 8px;
    }


    .brand-mark {

        width: 32px;

        height: 32px;

        flex-basis: 32px;

        border-radius: 8px;
    }


    .brand-name {

        font-size: 16px;
    }


    .header-badge {

        display: none;
    }


    .page {

        min-height: auto;

        padding:
            38px 12px 28px;
    }


    .hero-copy {

        margin-bottom: 24px;
    }


    .eyebrow {

        margin-bottom: 11px;

        font-size: 10px;

        letter-spacing: 1.4px;
    }


    .hero h1 {

        font-size:
            clamp(38px, 12vw, 50px);

        line-height: 1;

        letter-spacing: -2px;
    }


    .hero-copy p {

        margin-top: 15px;

        font-size: 14px;

        line-height: 1.55;
    }


    .compressor-card {

        padding: 14px;

        border-radius: 18px;
    }


    .upload-box {

        min-height: 200px;

        padding:
            22px 14px;

        border-radius: 15px;
    }


    .upload-icon {

        width: 48px;

        height: 48px;

        margin-bottom: 14px;

        border-radius: 13px;

        font-size: 23px;
    }


    .upload-box h2 {

        font-size: 17px;
    }


    .upload-box p {

        margin:
            7px 0 10px;

        font-size: 13px;
    }


    .upload-limit {

        font-size: 11px;
    }


    .file-preview {

        gap: 10px;

        padding: 11px;
    }


    .file-icon {

        width: 38px;

        height: 38px;

        flex-basis: 38px;
    }


    .remove-file {

        width: 32px;

        height: 32px;

        flex-basis: 32px;
    }


    .target-section {

        margin-top: 21px;
    }


    .section-heading {

        margin-bottom: 8px;

        align-items: flex-start;

        flex-direction: column;

        gap: 3px;
    }


    .section-heading label {

        font-size: 13px;
    }


    .section-heading span {

        font-size: 11px;
    }


    .target-input {

        height: 50px;
    }


    .target-input input {

        padding:
            0 13px;

        font-size: 16px;
    }


    .target-input span {

        padding-right: 13px;

        font-size: 13px;
    }


    .preset-row {

        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 6px;
    }


    .preset {

        width: 100%;

        min-width: 0;

        padding:
            9px 5px;

        font-size: 11px;
    }


    .compress-button {

        min-height: 54px;

        margin-top: 20px;

        padding:
            0 14px;

        font-size: 14px;
    }


    .status {

        padding:
            12px;

        font-size: 12px;
    }


    .result {

        padding:
            20px 13px;

        border-radius: 14px;
    }


    .result h2 {

        font-size: 18px;
    }


    .result-message {

        margin-bottom: 17px;

        font-size: 12px;
    }


    .result-stats {

        grid-template-columns: 1fr;

        gap: 7px;
    }


    .stat {

        padding:
            13px;
    }


    .stat strong {

        font-size: 14px;
    }


    .download-button {

        min-height: 52px;

        font-size: 14px;
    }


    .feature-row {

        grid-template-columns: 1fr;

        gap: 0;

        margin-top: 17px;
    }


    .feature {

        padding:
            9px 6px;
    }


    .feature strong {

        font-size: 12px;
    }


    .feature span {

        font-size: 10px;
    }


    .site-footer {

        padding:
            18px 14px 26px;

        flex-direction: column;

        justify-content: center;

        text-align: center;

        gap: 5px;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 400px) {

    .page {

        padding-left: 10px;

        padding-right: 10px;
    }


    .hero h1 {

        font-size: 38px;

        letter-spacing: -1.7px;
    }


    .hero-copy p {

        font-size: 13px;
    }


    .compressor-card {

        padding: 10px;

        border-radius: 16px;
    }


    .upload-box {

        min-height: 185px;

        padding:
            18px 10px;
    }


    .preset {

        padding:
            8px 3px;

        font-size: 10px;
    }


    .compress-button {

        min-height: 52px;

        font-size: 13px;
    }
}


/* =========================================================
   LANDSCAPE MOBILE
========================================================= */

@media (max-height: 500px) and (orientation: landscape) {

    .page {

        padding-top: 25px;
    }


    .hero-copy {

        margin-bottom: 20px;
    }


    .upload-box {

        min-height: 160px;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

button:focus-visible,
input:focus-visible,
a:focus-visible {

    outline:
        3px solid
        var(--earth);

    outline-offset: 3px;
}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .upload-box:hover {

        border-color:
            rgba(24, 32, 51, 0.28);

        background:
            var(--surface-soft);

        box-shadow: none;
    }


    .compress-button:hover,
    .download-button:hover,
    .preset:hover {

        transform: none;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}