/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; }


:root {
 --bg: #F7F7F5;
 --surface: #FFFFFF;
 --border: #E5E7EB;


 --text: #111827;
 --muted: #6B7280;


 --primary:#FF6B00;
 --primary-hover:#E65F00;
 --font:'Inter',sans-serif;


 /* Professional SaaS Blue */
 --accent: #c81e1e;
 --accent-hover: #1D4ED8;


 /* Success Green */
 --success: #16A34A;
 --success-hover: #15803D;


 --radius: 16px;
 --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}


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


body {
 font-family: var(--font);
 background: var(--surface);
 color: var(--text);
 line-height: 1.7;
 -webkit-font-smoothing: antialiased;
}


a { color: inherit; text-decoration: none; transition: color 0.3s; }
a:hover { color: var(--accent); }


/* ─── Layout ─── */
.container { max-width: 1080px; margin: 0 auto; }


  /* ========== HEADER STYLES - START ========== */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            background: rgba(247, 247, 245, 0.9);
            backdrop-filter: saturate(180%) blur(20px);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            border-bottom: 1px solid var(--border);
            transition: background 0.3s ease, box-shadow 0.3s ease;
        }

        header.scrolled {
            background: rgba(247, 247, 245, 0.95);
            box-shadow: 0 2px 20px rgba(154, 123, 79, 0.08);
        }

        .header-container {
            max-width: 1080px;
            margin: 0 auto;
            padding: 0 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 64px;
            position: relative;
        }

        .brand {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--text);
            text-decoration: none;
            letter-spacing: -0.02em;
            transition: opacity 0.2s;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .brand span {
            color: #fff;
        }

        .brand:hover {
            opacity: 0.7;
        }

        /* Desktop Navigation */
        .desktop-nav {
            display: flex;
            gap: 28px;
            align-items: center;
            list-style: none;
        }

        .desktop-nav a {
            color: var(--muted);
            text-decoration: none;
            font-size: 0.85rem;
            font-weight: 500;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            transition: color 0.3s;
            position: relative;
        }

        .desktop-nav a:hover {
            color: var(--text);
        }

        .desktop-nav a[aria-current="page"] {
            color: var(--text);
            font-weight: 600;
        }

        .desktop-nav a[aria-current="page"]::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--accent);
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from {
                transform: scaleX(0);
            }
            to {
                transform: scaleX(1);
            }
        }

        /* Mobile Menu Toggle */
        .menu-toggle {
            display: none;
            flex-direction: column;
            gap: 5px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            z-index: 101;
            position: relative;
        }

        .menu-toggle span {
            display: block;
            width: 22px;
            height: 2px;
            background: var(--text);
            border-radius: 2px;
            transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
            transform-origin: center;
        }

        .menu-toggle:hover span {
            background: var(--accent);
        }

        .menu-toggle.active span:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }

        .menu-toggle.active span:nth-child(2) {
            opacity: 0;
            transform: scale(0);
        }

        .menu-toggle.active span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

        nav {
            display: none;
            position: fixed;
            top: 64px;
            right: 24px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(154, 123, 79, 0.15);
            min-width: 220px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
            z-index: 100;
        }

        nav.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        nav::before {
            content: '';
            position: absolute;
            top: -6px;
            right: 20px;
            width: 12px;
            height: 12px;
            background: white;
            transform: rotate(45deg);
            box-shadow: -2px -2px 4px rgba(154, 123, 79, 0.05);
        }

        .nav-link {
            display: block;
            padding: 14px 20px;
            color: var(--text);
            font-size: 0.85rem;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.2s ease;
            letter-spacing: 0.02em;
            border-bottom: 1px solid rgba(228, 228, 224, 0.5);
        }

        .nav-link:last-child {
            border-bottom: none;
        }

        .nav-link:hover {
            background: linear-gradient(90deg, rgba(154, 123, 79, 0.08), transparent);
            color: var(--accent);
            padding-left: 28px;
        }

        .nav-link[aria-current="page"] {
            color: var(--accent);
            font-weight: 600;
            background: rgba(154, 123, 79, 0.06);
        }

        .menu-toggle span {
            display: block;
            width: 22px;
            height: 2px;
            background: var(--text);
            border-radius: 2px;
            transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
            transform-origin: center;
        }

        .menu-toggle.active span:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }

        .menu-toggle.active span:nth-child(2) {
            opacity: 0;
            transform: scale(0);
        }

        .menu-toggle.active span:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }

        .menu-toggle:hover span {
            background: var(--accent);
        }

        .menu-overlay {
            display: none;
            position: fixed;
            inset: 64px 0 0 0;
            background: rgba(26, 26, 26, 0);
            backdrop-filter: blur(0px);
            z-index: 99;
            transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                       backdrop-filter 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .menu-overlay.active {
            display: block;
            background: rgba(26, 26, 26, 0.4);
            backdrop-filter: blur(4px);
        }

        /* ========== MOBILE RESPONSIVE FOR HEADER - START ========== */
        @media (max-width: 768px) {
            .desktop-nav {
                display: none;
            }

            .header-container {
                height: 64px;
                padding: 0 24px;
            }

            .brand {
                font-size: 1.0625rem;
            }

            .menu-toggle {
                display: flex;
            }

            nav {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 8px;
                position: fixed;
                top: 64px;
                left: 0;
                right: 0;
                width: 100%;
                height: calc(100vh - 64px);
                background: rgba(247, 247, 245, 0.98);
                backdrop-filter: blur(10px);
                padding: 60px 24px;
                box-shadow: none;
                overflow-y: auto;
                opacity: 0;
                visibility: hidden;
                transform: translateY(-30px) scale(0.95);
                transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                            visibility 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                            transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                            backdrop-filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
            }

            nav.active {
                opacity: 1;
                visibility: visible;
                transform: translateY(0) scale(1);
            }

            nav::before {
                display: none;
            }

            .nav-link {
                padding: 16px 24px;
                font-size: 1.25rem;
                text-align: center;
                border-bottom: none;
                width: 100%;
                max-width: 300px;
                border-radius: 12px;
                opacity: 0;
                transform: translateY(20px);
                transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
                letter-spacing: 0;
            }

            nav.active .nav-link {
                opacity: 1;
                transform: translateY(0);
            }

            nav.active .nav-link:nth-child(1) { transition-delay: 0.1s; }
            nav.active .nav-link:nth-child(2) { transition-delay: 0.15s; }
            nav.active .nav-link:nth-child(3) { transition-delay: 0.2s; }
            nav.active .nav-link:nth-child(4) { transition-delay: 0.25s; }
            nav.active .nav-link:nth-child(5) { transition-delay: 0.3s; }
            nav.active .nav-link:nth-child(6) { transition-delay: 0.35s; }
            nav.active .nav-link:nth-child(7) { transition-delay: 0.4s; }

            .nav-link:hover {
                background: rgba(154, 123, 79, 0.1);
                padding-left: 24px;
                transform: scale(1.05) translateY(0);
                color: var(--accent);
            }

            .nav-link[aria-current="page"] {
                background: var(--accent);
                color: white;
            }

            .menu-overlay {
                inset: 64px 0 0 0;
            }
        }

        @media (min-width: 769px) {
            .menu-overlay {
                display: none !important;
            }
        }
        /* ========== MOBILE RESPONSIVE FOR HEADER - END ========== */
        /* ========== HEADER STYLES - END ========== */

        main {
            max-width: 1080px;
            margin: 0 auto;
            padding: 84px 24px 80px;
            min-height: calc(100vh - 300px);
        }


/* ─── Main ─── */
main { padding-top: 84px; min-height: calc(100vh - 200px); }


/* ─── Hero Section ─── */
.hero {
 text-align: center; max-width: 700px; margin: 0 auto;
 padding: 30px 0px;
}
.hero h1 {
 font-size: clamp(2rem, 5vw, 2.75rem);
 font-weight: 700; line-height: 1.15; letter-spacing: -.03em;
 margin-bottom: 16px;
}
.hero p {
 font-size: 1.08rem; color: var(--muted);
 margin-bottom: 12px; line-height: 1.75;
}
.trust-line {
 font-size: .85rem; color: var(--muted);
 margin-top: 8px; letter-spacing: .02em;
}


/* ─── Input Section ─── */
.input-section {
 max-width: 650px; margin: 40px auto;
 padding: 1px;

}


.input-group { margin-bottom: 24px; }


.input-group label {
 display: block; font-size: .85rem; color: var(--muted);
 margin-bottom: 8px; font-weight: 500;
}


.input-group input {
 width: 100%; padding: 16px 18px;
 background: var(--bg); border: 1.5px solid var(--border);
 border-radius: 14px; font-family: var(--font); font-size: .95rem;
 color: var(--text); outline: none;
 transition: border-color .3s, box-shadow .3s;
}


.input-group input:focus {
 border-color: var(--accent);
 box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}

/* Primary Button */
.btn-primary{
 width:100%;
 padding:16px;
 background:linear-gradient(135deg,var(--primary),var(--primary-hover));
 color:#fff;
 border:none;
 border-radius:14px;
 font-size:1rem;
 font-weight:600;
 cursor:pointer;
 transition:all .3s ease;
 font-family:var(--font);
}

/* Hover Effect */
.btn-primary:hover{
 transform:translateY(-2px);
 box-shadow:0 10px 25px rgba(255,107,0,.45);
}

/* Disabled State */
.btn-primary:disabled{
 opacity:.5;
 cursor:not-allowed;
}

/* Status */
.status-message {
 margin-top: 16px; text-align: center;
 font-size: .85rem; min-height: 20px;
}
.status-message.ok { color: var(--success); font-weight: 600; }
.status-message.error { color: var(--primary); font-weight: 600; }


/* ─── Results Section ─── */
.results-section {
 max-width: 1280px; margin: 60px auto;
 padding: 0 6px;
}
.results-section h2 {
 font-size: 1.5rem; font-weight: 700;
 margin-bottom: 32px; text-align: center;
 letter-spacing: -.02em;
}
.thumbnails-grid {
 display: flex;
 flex-direction: column;
 gap: 40px;
}
.thumb-card {
 padding: 20px;
 box-shadow: 0 4px 18px rgba(0,0,0,.06);
 transition: transform .3s, box-shadow .3s;
}
.thumb-card:hover {
 transform: translateY(-4px);
 box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.thumb-card h3 {
 font-size: .9rem; text-transform: uppercase;
 letter-spacing: .08em; color: var(--primary);
 margin-bottom: 14px; font-weight: 600;
 text-align: center;
}
.thumb-card img {
 width: 100%; height: auto;
 display: block;
 border-radius: 12px;
 background: #f1f5f9;
 border: 1px solid var(--border);
}
.thumb-meta {
 font-size: .75rem; color: var(--muted);
 margin: 10px 0 4px;
}
.thumb-actions {
 display: flex; gap: 10px; flex-wrap: wrap;
 margin-top: 14px;
}


/* Download Button */
.thumb-actions .btn-download {
 flex: 2; padding: 10px 20px;
 background: linear-gradient(135deg, var(--success), var(--success-hover));
 color: white; border: none;
 border-radius: 12px; font-size: .95rem;
 font-weight: 600; cursor: pointer;
 transition: all .3s; font-family: var(--font);
}
.thumb-actions .btn-download:hover {
 transform: translateY(-1px);
 box-shadow: 0 6px 18px rgba(22,163,74,.35);
}


.thumb-actions .btn-open {
 flex: 1; padding: 10px 20px;
 background: var(--bg); border: 1.5px solid var(--border);
 border-radius: 12px; font-size: .9rem;
 font-weight: 500; cursor: pointer;
 transition: all .3s; font-family: var(--font);
 color: var(--text); text-align: center;
}
.thumb-actions .btn-open:hover {
 border-color: var(--accent);
 color: var(--accent);
 background: white;
}

.beta-badge{
  background:#ed6200;
  color:#fff;
  font-size:10px;
  padding:2px 6px;
  border-radius:4px;
  margin-left:6px;
  font-weight:600;
}


/* ─── Footer ─── */
footer {
 max-width: 1080px; margin: 80px auto 0;
 padding: 40px 24px;
 border-top: 1px solid var(--border);
 text-align: center;
}
footer .footer-links {
 display: flex; justify-content: center; flex-wrap: wrap;
 gap: 20px; margin-bottom: 16px;
}
footer .footer-links a {
 color: var(--muted); font-size: .82rem;
 font-weight: 500; letter-spacing: .02em;
}
footer p {
 color: var(--muted); font-size: .78rem;
 line-height: 1.6; margin: 0;
}