/* =========================================================
   PDFLooks - HOME PAGE CSS
   Updated: Search bar removed + Hero gap reduced
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    padding-top: 50px;
    background: #ffffff;
    color: #111827;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

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

button,
input {
    font-family: inherit;
}

button {
    cursor: pointer;
}


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

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 72px;
    z-index: 1000;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

.header-container {
    width: 100%;
    max-width: 1400px;
    height: 100%;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
}

.logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.logo a {
    display: flex;
    align-items: center;
}

.logo img {
    display: block;
    width: auto;
    height: 70px;
    object-fit: contain;
}

h2{
    color: red;
    font-size: 18px;
    align-items: center;
    
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.navigation {
    margin-left: 48px;
}

.navigation > ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.navigation > ul > li {
    position: relative;
}

.nav-dropdown-btn {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: none;
    background: transparent;
    color: #111827;
    font-size: 15px;
    font-weight: 600;
    border-radius: 7px;
    transition: .2s ease;
}

.nav-dropdown-btn:hover {
    background: #f7f7f7;
    color: #ed1c24;
}

.dropdown-arrow {
    font-size: 14px;
    line-height: 1;
    transition: transform .2s ease;
}

.nav-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   DROPDOWN
   ========================================================= */

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 215px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    box-shadow: 0 14px 35px rgba(0,0,0,.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-7px);
    transition: .2s ease;
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 11px 13px;
    border-radius: 7px;
    color: #333333;
    font-size: 14px;
    font-weight: 500;
    transition: .2s ease;
}

.dropdown-menu a:hover {
    background: #fff2f2;
    color: #ed1c24;
}


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

.header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 22px;
}

.header-actions > a:not(.signup-btn) {
    color: #111827;
    font-size: 15px;
    font-weight: 600;
    transition: color .2s ease;
}

.header-actions > a:not(.signup-btn):hover {
    color: #ed1c24;
}

.signup-btn {
    min-width: 108px;
    height: 40px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #ed1c24;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(237,28,36,.18);
    transition: .2s ease;
}

.signup-btn:hover {
    background: #d71920;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(237,28,36,.25);
}


/* =========================================================
   THEME BUTTON
   ========================================================= */

.theme-toggle {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 12px;
    background: #f8fafc;
    color: #111827;
    font-size: 20px;
    cursor: pointer;
    transition: .25s ease;
}

.theme-toggle:hover {
    transform: translateY(-2px);
    background: #eef2f7;
}


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

.menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: #f7f7f7;
    color: #111827;
    font-size: 23px;
}

.mobile-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 15px;
    right: 15px;
    display: none;
    flex-direction: column;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 13px;
    box-shadow: 0 15px 35px rgba(0,0,0,.15);
}

.mobile-menu.show-menu {
    display: flex;
}

.mobile-menu a {
    padding: 13px 15px;
    border-radius: 8px;
    color: #111827;
    font-size: 15px;
    font-weight: 600;
}

.mobile-menu a:hover {
    background: #fff3f3;
    color: #ed1c24;
}

.mobile-signup {
    margin-top: 4px;
    background: #ed1c24 !important;
    color: #ffffff !important;
    text-align: center;
}


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

.hero {
    position: relative;
    min-height: 400px;
    padding: 20px max(25px,calc((100vw - 1280px)/2));
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    overflow: visible;
    background: linear-gradient(
        110deg,
        #fff4f5 0%,
        #ffffff 48%,
        #eef4ff 100%
    );
}

.hero::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    left: -120px;
    top: 25px;
    border-radius: 50%;
    background: rgba(237,28,36,.08);
}

.hero::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -120px;
    top: -130px;
    border-radius: 50%;
    background: rgba(43,105,220,.08);
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 650px;
    align-self: center;
}

.hero-badge {
    display: inline-flex;
    margin-bottom: 5px;
    padding: 6px 12px;
    border-radius: 30px;
    background: #fff0f0;
    color: #ed1c24;
    font-size: 17px;
    font-weight: 700;
}

.hero h1 {
    margin-bottom: 12px;
    color: #111827;
    font-size: clamp(38px,4vw,58px);
    line-height: 1.04;
    letter-spacing: -2px;
    font-weight: 800;
}

.hero h1 .pdf-text {
    color: #ed1c24;
}

.hero h1 .image-text {
    color: #2574d9;
}

.hero-content > p {
    margin-bottom: 7px;
    color: #536176;
    font-size: 17px;
    line-height: 2;
}


/* =========================================================
   SEARCH BAR
   Search bar HTML removed, so CSS kept hidden
   ========================================================= */

.hero-search {
    display: none;
}

.search-icon {
    display: none;
}


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

.hero-features {
    margin-top: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #273244;
    font-size: 12px;
    font-weight: 600;
}

.feature-check {
    font-size: 15px;
}

.hero-feature:nth-child(1) .feature-check {
    color: #20b66b;
}

.hero-feature:nth-child(2) .feature-check {
    color: #a96bf2;
}

.hero-feature:nth-child(3) .feature-check {
    color: #f39a27;
}

.hero-feature:nth-child(4) .feature-check {
    color: #2574d9;
}


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

.hero-visual {
    position: relative;
    width: 52%;
    height: 390px;
    min-height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    transform: translateX(45px);
}

.device-scene {
    position: relative;
    width: 560px;
    height: 390px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(.88);
    transform-origin: center;
    overflow: visible;
}


/* =========================================================
   LAPTOP
   ========================================================= */

.laptop {
    position: absolute;
    width: 430px;
    height: 270px;
    left: 50px;
    top: 55px;
    z-index: 2;
}

.laptop-screen {
    position: absolute;
    width: 390px;
    height: 235px;
    left: 20px;
    top: 0;
    padding: 9px;
    box-sizing: border-box;
    background: #172033;
    border-radius: 16px 16px 8px 8px;
    box-shadow:
        0 25px 45px rgba(25,45,80,.20),
        0 8px 20px rgba(0,0,0,.10);
}

.screen-content {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,#ffffff,#f5f8ff);
    border-radius: 9px;
    padding: 15px;
    overflow: hidden;
}

.screen-top-bar {
    display: flex;
    gap: 5px;
    margin-bottom: 14px;
}

.screen-top-bar span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d7dce6;
}

.screen-title {
    font-size: 18px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 18px;
}

.screen-tools {
    display: flex;
    gap: 12px;
}

.screen-tools div {
    flex: 1;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg,#ef233c,#ff5365);
    box-shadow: 0 10px 20px rgba(239,35,60,.18);
}

.screen-tools div:last-child {
    background: linear-gradient(135deg,#2474dc,#5d9af0);
    box-shadow: 0 10px 20px rgba(36,116,220,.18);
}

.screen-line {
    height: 8px;
    border-radius: 10px;
    background: #e8edf5;
    margin-top: 12px;
}

.line-1 { width: 90%; }
.line-2 { width: 70%; }
.line-3 { width: 80%; }

.laptop-base {
    position: absolute;
    width: 450px;
    height: 18px;
    left: -10px;
    bottom: 25px;
    background: linear-gradient(to bottom,#cbd5e1,#94a3b8);
    border-radius: 4px 4px 18px 18px;
    box-shadow: 0 15px 20px rgba(30,50,80,.18);
}

.laptop-base::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 5px;
    left: 180px;
    top: 6px;
    border-radius: 10px;
    background: #7c8798;
}


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

.mobile-phone {
    position: absolute;
    width: 125px;
    height: 245px;
    right: 35px;
    bottom: 30px;
    padding: 8px;
    box-sizing: border-box;
    background: #111827;
    border-radius: 22px;
    z-index: 10;
    box-shadow:
        0 25px 40px rgba(25,45,80,.22),
        0 10px 20px rgba(0,0,0,.12);
    transform: rotate(5deg);
}

.mobile-camera {
    position: absolute;
    width: 32px;
    height: 5px;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px;
    background: #020617;
    z-index: 3;
}

.mobile-screen {
    width: 100%;
    height: 100%;
    padding: 20px 10px 10px;
    background: linear-gradient(160deg,#ffffff,#edf4ff);
    border-radius: 16px;
    overflow: hidden;
}

.mobile-header {
    font-size: 12px;
    font-weight: 800;
    color: #172033;
    margin-bottom: 14px;
}

.mobile-pdf {
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#ef233c,#ff5365);
    border-radius: 12px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
    box-shadow: 0 8px 15px rgba(239,35,60,.20);
}

.mobile-image {
    height: 50px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #dbeafe;
    font-size: 25px;
}

.mobile-line {
    height: 5px;
    margin-top: 8px;
    border-radius: 10px;
    background: #dbe3ef;
}

.mobile-line:nth-child(3) { width: 85%; }
.mobile-line:nth-child(4) { width: 65%; }
.mobile-line:nth-child(5) { width: 75%; }


/* =========================================================
   FLOATING PDF
   ========================================================= */

.floating-pdf {
    position: absolute;
    width: 125px;
    height: 145px;
    left: 10px;
    top: 35px;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.96);
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(40,60,100,.16);
    backdrop-filter: blur(10px);
}

.floating-pdf span {
    width: 78px;
    height: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #ffffff;
    font-size: 25px;
    font-weight: 900;
    background: linear-gradient(145deg,#ff3449,#e71932);
    box-shadow: 0 15px 25px rgba(231,25,50,.25);
    position: relative;
}

.floating-pdf span::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 22px;
    width: 34px;
    height: 5px;
    border-radius: 5px;
    background: rgba(255,255,255,.55);
    box-shadow:
        0 12px 0 rgba(255,255,255,.55),
        0 24px 0 rgba(255,255,255,.55);
}


/* =========================================================
   FLOATING IMAGE
   ========================================================= */

.floating-image {
    position: absolute;
    width: 85px;
    height: 85px;
    right: 95px;
    top: 25px;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: linear-gradient(135deg,#dbeafe,#b9d5ff);
    font-size: 40px;
    box-shadow: 0 18px 35px rgba(50,100,180,.16);
}


/* =========================================================
   FLOATING LOCK
   ========================================================= */

.floating-lock {
    position: absolute;
    width: 60px;
    height: 60px;
    right: 0;
    top: 105px;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #ffffff;
    font-size: 28px;
    box-shadow: 0 15px 30px rgba(40,60,100,.14);
}


/* =========================================================
   TOOLS
   ========================================================= */

.tools {
    padding:
        30px
        max(25px,calc((100vw - 1280px)/2))
        38px;
    background: #ffffff;
}

.section-heading {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.section-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title-row h2 {
    color: #111827;
    font-size: 35px;
    font-weight: 800;
}

.section-title-row p {
    color: #667085;
    font-size: 17px;
}

.section-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
}

.pdf-section-icon {
    background: #ed1c24;
}

.image-section-icon {
    background: #2878dc;
}

.view-all {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #ed1c24;
    font-size: 12px;
    font-weight: 700;
}

.view-all span {
    font-size: 18px;
    transition: transform .2s ease;
}

.view-all:hover span {
    transform: translateX(3px);
}

.image-view-all {
    color: #2878dc;
}


/* =========================================================
   TOOL GRID
   ========================================================= */

.tool-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 14px;
}

.tool-link {
    display: block;
    min-width: 0;
}

.tool-card {
    min-height: 150px;
    padding: 13px;
    background: #ffffff;
    border: 1px solid #e8e9ec;
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0,0,0,.035);
    transition: .2s ease;
}

.tool-card:hover {
    transform: translateY(-4px);
    border-color: #ffd0d0;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.image-tool-card:hover {
    border-color: #cfe0ff;
}

.tool-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff1f2;
}

.image-tool-card .tool-icon {
    background: #edf5ff;
}

.tool-icon img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.tool-card h3 {
    margin-bottom: 6px;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
}

.tool-card p {
    color: #667085;
    font-size: 11px;
    line-height: 1.45;
}


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

.features-strip {
    width: calc(100% - 50px);
    max-width: 1280px;
    margin: 0 auto 20px;
    padding: 9px 10px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.035);
}

.strip-feature {
    min-height: 58px;
    padding: 6px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-right: 1px solid #eeeeee;
}

.strip-feature:last-child {
    border-right: none;
}

.strip-icon {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
}

.secure-icon {
    background: #e7f8ed;
    color: #1caf64;
}

.private-icon {
    background: #f5eaff;
    color: #a557e8;
}

.device-icon {
    background: #fff2dc;
    color: #ed9418;
}

.free-icon {
    background: #e7f8ed;
    color: #18ad65;
}

.strip-feature h3 {
    margin-bottom: 3px;
    color: #111827;
    font-size: 11px;
    font-weight: 800;
}

.strip-feature p {
    color: #667085;
    font-size: 10px;
    line-height: 1.35;
}


/* =========================================================
   HOW IT WORKS
   ========================================================= */

.how-it-works {
    padding: 65px 25px 75px;
    background: #f8fafc;
}

.how-it-works .section-heading {
    display: block;
    max-width: 650px;
    text-align: center;
}

.how-it-works .section-heading > span {
    display: block;
    margin-bottom: 8px;
    color: #ed1c24;
    font-size: 13px;
    font-weight: 700;
}

.how-it-works .section-heading h2 {
    margin-bottom: 8px;
    color: #111827;
    font-size: 34px;
}

.how-it-works .section-heading p {
    color: #667085;
    font-size: 15px;
}

.steps {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px;
}

.step {
    padding: 28px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,.04);
}

.step-number {
    width: 50px;
    height: 50px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ed1c24;
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
}

.step h3 {
    margin-bottom: 8px;
    color: #111827;
    font-size: 18px;
}

.step p {
    color: #667085;
    font-size: 13px;
    line-height: 1.55;
}


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

.footer {
    padding:
        42px
        max(25px,calc((100vw - 1280px)/2))
        18px;
    background: #101c33;
    color: #ffffff;
}

.footer-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr 1.15fr;
    gap: 25px;
}

.footer-logo {
    width: 150px;
    height: auto;
    margin-bottom: 12px;
}

.brand-column p {
    max-width: 235px;
    margin-bottom: 15px;
    color: #c4ccda;
    font-size: 11px;
    line-height: 1.55;
}

.footer-column h3 {
    margin-bottom: 13px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.footer-column > a {
    display: block;
    margin-bottom: 8px;
    color: #c4ccda;
    font-size: 11px;
    transition: color .2s ease;
}

.footer-column > a:hover {
    color: #ffffff;
}


/* =========================================================
   SOCIAL
   ========================================================= */

.social-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.social-links a {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #33415c;
    border-radius: 5px;
    color: #ffffff;
    font-size: 12px;
    transition: .2s ease;
}

.social-links a:hover {
    background: #ed1c24;
    border-color: #ed1c24;
}


/* =========================================================
   APP BADGES
   ========================================================= */

.app-badge {
    width: 125px;
    min-height: 38px;
    padding: 5px 8px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #34415a;
    border-radius: 6px;
    background: #0c172b;
}

.app-badge span {
    color: #aeb8ca;
    font-size: 7px;
}

.app-badge strong {
    color: #ffffff;
    font-size: 11px;
}


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

.footer-bottom {
    width: 100%;
    max-width: 1280px;
    margin: 25px auto 0;
    padding-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid #2d3a50;
    color: #9faabd;
    font-size: 10px;
}

.footer-bottom span {
    color: #ffffff;
    font-weight: 700;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-legal a:hover {
    color: #ffffff;
}


/* =========================================================
   DARK MODE
   ========================================================= */

body.dark-mode {
    background: #0f172a;
    color: #e5e7eb;
}

body.dark-mode header,
body.dark-mode .header,
body.dark-mode .site-header {
    background: #111827;
    border-color: #1f2937;
}

body.dark-mode .navigation button,
body.dark-mode .header-actions > a,
body.dark-mode .nav-link,
body.dark-mode .nav-item,
body.dark-mode .header a {
    color: #f3f4f6;
}

body.dark-mode .nav-dropdown-btn:hover {
    background: #1c2940;
}

body.dark-mode .dropdown-menu,
body.dark-mode .mobile-menu {
    background: #111c30;
    border-color: #2b3952;
}

body.dark-mode .dropdown-menu a,
body.dark-mode .mobile-menu a {
    color: #ffffff;
}

body.dark-mode .dropdown-menu a:hover,
body.dark-mode .mobile-menu a:hover {
    background: #202d45;
}

body.dark-mode .theme-toggle,
body.dark-mode .menu-btn {
    background: #1e293b;
    color: #f8fafc;
}

body.dark-mode .theme-toggle:hover {
    background: #334155;
}

body.dark-mode .hero {
    background:
        radial-gradient(
            circle at 10% 30%,
            rgba(239,68,68,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 30%,
            rgba(59,130,246,.12),
            transparent 35%
        ),
        #0f172a;
}

body.dark-mode .hero h1,
body.dark-mode .hero-title {
    color: #f8fafc;
}

body.dark-mode .hero-content > p,
body.dark-mode .hero p {
    color: #cbd5e1;
}

body.dark-mode .tools,
body.dark-mode .tools-section,
body.dark-mode .tool-section {
    background: #0f172a;
}

body.dark-mode .section-title-row h2,
body.dark-mode .section-title,
body.dark-mode .tools-title {
    color: #f8fafc;
}

body.dark-mode .tool-card,
body.dark-mode .features-strip,
body.dark-mode .step {
    background: #111827;
    border-color: #263244;
    box-shadow: 0 8px 25px rgba(0,0,0,.20);
}

body.dark-mode .tool-card h3,
body.dark-mode .tool-card-title,
body.dark-mode .step h3 {
    color: #f8fafc;
}

body.dark-mode .tool-card p,
body.dark-mode .tool-card-description,
body.dark-mode .section-title-row p,
body.dark-mode .strip-feature p,
body.dark-mode .step p {
    color: #94a3b8;
}

body.dark-mode .how-it-works {
    background: #0d1525;
}

body.dark-mode .security-strip,
body.dark-mode .features-strip {
    background: #111827;
    border-color: #263244;
}

body.dark-mode .security-strip h4,
body.dark-mode .features-strip h4 {
    color: #f8fafc;
}

body.dark-mode .security-strip p,
body.dark-mode .features-strip p {
    color: #94a3b8;
}

body.dark-mode footer,
body.dark-mode .footer {
    background: #020617;
    color: #e5e7eb;
}

body.dark-mode footer a,
body.dark-mode .footer a {
    color: #cbd5e1;
}


/* =========================================================
   1200px
   ========================================================= */

@media (max-width:1200px) {

    .header-container {
        padding: 0 20px;
    }

    .navigation {
        margin-left: 28px;
    }

    .navigation > ul {
        gap: 4px;
    }

    .header-actions {
        gap: 15px;
    }

    .tool-container {
        grid-template-columns: repeat(3,1fr);
    }

    .footer-container {
        grid-template-columns: 1.5fr repeat(4,1fr);
    }

    .mobile-apps-column {
        grid-column: span 2;
    }

    .device-scene {
        transform: scale(.72);
    }

    .hero {
        min-height: 400px;
    }

    .hero-visual {
        height: 380px;
        min-height: 380px;
    }
}


/* =========================================================
   992px
   ========================================================= */

@media (max-width:992px) {

    body {
        padding-top: 68px;
    }

    .header {
        height: 68px;
    }

    .logo img {
        height: 44px;
    }

    .navigation {
        display: none;
    }

    .header-actions > a:not(.signup-btn) {
        display: none;
    }

    .menu-btn {
        display: flex;
    }

    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 35px 25px;
        text-align: center;
    }

    .hero-content {
        max-width: 800px;
        margin: 0 auto;
    }

    .hero-features {
        justify-content: center;
    }

    .hero-visual {
        width: 100%;
        min-height: 350px;
        height: 350px;
        transform: none;
    }

    .tool-container {
        grid-template-columns: repeat(3,1fr);
    }

    .features-strip {
        grid-template-columns: repeat(2,1fr);
    }

    .strip-feature:nth-child(2) {
        border-right: none;
    }

    .strip-feature:nth-child(-n+2) {
        border-bottom: 1px solid #eeeeee;
    }

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

    .footer-container {
        grid-template-columns: repeat(3,1fr);
    }

    .brand-column {
        grid-column: span 3;
    }

    .mobile-apps-column {
        grid-column: span 1;
    }
}


/* =========================================================
   768px
   ========================================================= */

@media (max-width:768px) {

    body {
        padding-top: 64px;
    }

    .header {
        height: 64px;
    }

    .header-container {
        padding: 0 14px;
    }

    .logo img {
        height: 42px;
    }

    .header-actions {
        gap: 7px;
    }

    .signup-btn {
        min-width: 94px;
        height: 37px;
        padding: 0 12px;
        font-size: 12px;
    }

    .theme-toggle,
    .menu-btn {
        width: 37px;
        height: 37px;
    }

    .hero {
        min-height: auto;
        padding: 34px 20px 32px;
        overflow: hidden;
    }

    .hero h1 {
        font-size: clamp(34px,8vw,48px);
        letter-spacing: -1px;
    }

    .hero-content > p {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .hero-features {
        justify-content: center;
        gap: 12px 18px;
        margin-top: 6px;
    }

    .hero-feature {
        font-size: 11px;
    }

    .hero-visual {
        width: 100%;
        height: 350px;
        min-height: 350px;
        margin-top: 20px;
    }

    .device-scene {
        transform: scale(.62);
    }

    .tools {
        padding: 32px 18px 42px;
    }

    .section-heading {
        align-items: flex-start;
    }

    .section-title-row {
        flex-wrap: wrap;
    }

    .section-title-row p {
        width: 100%;
        margin-left: 40px;
    }

    .tool-container {
        grid-template-columns: repeat(2,1fr);
        gap: 12px;
    }

    .tool-card {
        min-height: 155px;
        padding: 12px;
    }

    .tool-icon {
        width: 50px;
        height: 50px;
    }

    .tool-icon img {
        width: 40px;
        height: 40px;
    }

    .tool-card h3 {
        font-size: 13px;
    }

    .tool-card p {
        font-size: 10px;
    }

    .features-strip {
        width: calc(100% - 30px);
        grid-template-columns: 1fr;
        padding: 5px;
    }

    .strip-feature {
        border-right: none;
        border-bottom: 1px solid #eeeeee;
    }

    .strip-feature:last-child {
        border-bottom: none;
    }

    .how-it-works {
        padding: 55px 18px;
    }

    .footer {
        padding: 40px 20px 20px;
    }

    .footer-container {
        grid-template-columns: repeat(2,1fr);
    }

    .brand-column {
        grid-column: span 2;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}


/* =========================================================
   600px
   ========================================================= */

@media (max-width:600px) {

    .hero {
        padding: 32px 18px;
    }

    .hero-content h1 {
        font-size: 34px;
    }

    .hero-content p {
        font-size: 14px;
    }

    .hero-features {
        gap: 12px;
    }

    .hero-feature {
        font-size: 12px;
    }

    .hero-visual {
        min-height: 300px;
        height: 300px;
    }

    .device-scene {
        transform: scale(.55);
    }
}


/* =========================================================
   576px
   ========================================================= */

@media (max-width:576px) {

    .header-actions > .signup-btn {
        display: none;
    }

    .mobile-menu .mobile-signup {
        display: block;
    }

    .hero {
        padding: 30px 16px 32px;
    }

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

    .hero-content > p {
        font-size: 14px;
    }

    .hero-features {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        justify-items: start;
        gap: 10px;
    }

    .section-heading {
        flex-direction: column;
        gap: 10px;
    }

    .section-title-row p {
        margin-left: 40px;
    }

    .view-all {
        align-self: flex-end;
    }

    .tool-container {
        grid-template-columns: repeat(2,1fr);
    }

    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .brand-column {
        grid-column: auto;
    }

    .brand-column p {
        margin-left: auto;
        margin-right: auto;
    }

    .social-links {
        justify-content: center;
    }

    .mobile-apps-column {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}


/* =========================================================
   480px
   ========================================================= */

@media (max-width:480px) {

    .hero-visual {
        height: 280px;
        min-height: 280px;
    }

    .device-scene {
        transform: scale(.48);
    }
}


/* =========================================================
   400px
   ========================================================= */

@media (max-width:400px) {

    .header-container {
        padding: 0 10px;
    }

    .logo img {
        height: 39px;
    }

    .theme-toggle {
        display: none;
    }

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

    .hero-features {
        grid-template-columns: 1fr;
    }

    .tool-container {
        grid-template-columns: 1fr;
    }

    .tool-card {
        min-height: 145px;
    }

    .section-title-row h2 {
        font-size: 20px;
    }
}


/* =========================================================
   360px
   ========================================================= */

@media (max-width:360px) {

    .header {
        height: 60px;
    }

    body {
        padding-top: 60px;
    }

    .logo img {
        height: 36px;
    }

    .menu-btn {
        width: 35px;
        height: 35px;
    }

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

    .hero-features {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   FINAL HERO GAP OVERRIDE
   Search bar removed:
   keep hero compact and avoid empty space.
   ========================================================= */

.hero {
    min-height: 400px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.hero-content {
    align-self: center;
}

.hero-content > p {
    margin-bottom: 7px;
}

.hero-features {
    margin-top: 6px;
}

.hero-visual {
    height: 390px;
    min-height: 390px;
}

@media (min-width:1200px) {

    .hero {
        min-height: 400px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .hero-visual {
        height: 390px;
        min-height: 390px;
    }
}

@media (min-width:769px) and (max-width:1199px) {

    .hero {
        min-height: 400px;
    }

    .hero-visual {
        height: 380px;
        min-height: 380px;
    }
}

@media (max-width:768px) {

    .hero {
        min-height: auto;
        padding-top: 30px;
        padding-bottom: 32px;
    }

    .hero-content > p {
        margin-bottom: 6px;
    }

    .hero-features {
        margin-top: 6px;
    }
}

/* =========================================================
   PDFLooks - PREMIUM DARK MODE
   Add this section at the END of index.css
   Light mode remains unchanged.
   ========================================================= */

body.dark-mode {
    background: #080d1a;
    color: #e5e7eb;
}


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

body.dark-mode .header {
    background: rgba(10, 16, 30, 0.96);
    border-bottom: 1px solid #202b3f;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .28);
}

body.dark-mode .header-container {
    background: transparent;
}

body.dark-mode .logo img {
    filter: brightness(1.02);
}

body.dark-mode .navigation > ul > li > a,
body.dark-mode .navigation .nav-dropdown-btn,
body.dark-mode .header-actions > a:not(.signup-btn) {
    color: #f3f4f6;
}

body.dark-mode .nav-dropdown-btn:hover {
    background: #182237;
    color: #ffffff;
}

body.dark-mode .dropdown-arrow {
    color: #cbd5e1;
}


/* =========================================================
   DROPDOWN
   ========================================================= */

body.dark-mode .dropdown-menu {
    background: #111a2c;
    border: 1px solid #2a3850;
    box-shadow:
        0 18px 45px rgba(0, 0, 0, .45),
        0 4px 12px rgba(0, 0, 0, .25);
}

body.dark-mode .dropdown-menu a {
    color: #dbe4f0;
}

body.dark-mode .dropdown-menu a:hover {
    background: #1d2940;
    color: #ff4b55;
}


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

body.dark-mode .theme-toggle {
    background: #182237;
    color: #f8fafc;
    border: 1px solid #29374d;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

body.dark-mode .theme-toggle:hover {
    background: #24334c;
    border-color: #3b4d69;
}

body.dark-mode .menu-btn {
    background: #182237;
    color: #f8fafc;
    border: 1px solid #29374d;
}

body.dark-mode .signup-btn {
    background: #ed1c24;
    color: #ffffff !important;
    box-shadow: 0 7px 20px rgba(237, 28, 36, .25);
}

body.dark-mode .signup-btn:hover {
    background: #ff3038;
}


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

body.dark-mode .mobile-menu {
    background: #111a2c;
    border-color: #2a3850;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

body.dark-mode .mobile-menu a {
    color: #e5e7eb;
}

body.dark-mode .mobile-menu a:hover {
    background: #1d2940;
    color: #ff4b55;
}


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

body.dark-mode .hero {
    background:
        radial-gradient(
            circle at 8% 25%,
            rgba(237, 28, 36, .13),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(37, 116, 217, .16),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #080d1a 0%,
            #0d1526 52%,
            #0b1323 100%
        );
}

body.dark-mode .hero::before {
    background: rgba(237, 28, 36, .08);
}

body.dark-mode .hero::after {
    background: rgba(37, 116, 217, .10);
}

body.dark-mode .hero-badge {
    background: rgba(237, 28, 36, .12);
    border: 1px solid rgba(237, 28, 36, .20);
    color: #ff6870;
}

body.dark-mode .hero h1 {
    color: #f8fafc;
}

body.dark-mode .hero-content > p {
    color: #b9c4d5;
}

body.dark-mode .hero-feature {
    color: #aebbd0;
}

body.dark-mode .hero-feature:nth-child(1) .feature-check {
    color: #32d583;
}

body.dark-mode .hero-feature:nth-child(2) .feature-check {
    color: #b77cff;
}

body.dark-mode .hero-feature:nth-child(3) .feature-check {
    color: #ffad45;
}

body.dark-mode .hero-feature:nth-child(4) .feature-check {
    color: #4d9cff;
}


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

body.dark-mode .laptop-screen {
    background: #172238;
    box-shadow:
        0 25px 45px rgba(0, 0, 0, .45),
        0 8px 20px rgba(0, 0, 0, .30);
}

body.dark-mode .screen-content {
    background: linear-gradient(
        135deg,
        #182238,
        #111b2e
    );
}

body.dark-mode .screen-title {
    color: #f8fafc;
}

body.dark-mode .screen-line {
    background: #293750;
}

body.dark-mode .laptop-base {
    background: linear-gradient(
        to bottom,
        #475569,
        #263449
    );
}

body.dark-mode .laptop-base::after {
    background: #172235;
}

body.dark-mode .mobile-phone {
    background: #050a13;
    box-shadow:
        0 25px 40px rgba(0, 0, 0, .50),
        0 10px 20px rgba(0, 0, 0, .35);
}

body.dark-mode .mobile-screen {
    background: linear-gradient(
        160deg,
        #182238,
        #101a2d
    );
}

body.dark-mode .mobile-header {
    color: #f8fafc;
}

body.dark-mode .mobile-image {
    background: #203b61;
}

body.dark-mode .mobile-line {
    background: #2b3a52;
}

body.dark-mode .floating-pdf,
body.dark-mode .floating-lock {
    background: rgba(20, 29, 46, .96);
    border: 1px solid #2b3951;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .40);
}

body.dark-mode .floating-image {
    background: linear-gradient(
        135deg,
        #203b61,
        #294e80
    );
}


/* =========================================================
   TOOLS SECTION
   ========================================================= */

body.dark-mode .tools {
    background: #080d1a;
}

body.dark-mode .section-title-row h2 {
    color: #f8fafc;
}

body.dark-mode .section-title-row p {
    color: #9eabc0;
}

body.dark-mode .view-all {
    color: #ff5961;
}

body.dark-mode .image-view-all {
    color: #4d9cff;
}


/* =========================================================
   TOOL CARDS
   ========================================================= */

body.dark-mode .tool-card {
    background: #10192b;
    border: 1px solid #25334a;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, .20);
}

body.dark-mode .tool-card:hover {
    background: #142038;
    border-color: rgba(237, 28, 36, .45);
    box-shadow:
        0 14px 32px rgba(0, 0, 0, .34),
        0 0 0 1px rgba(237, 28, 36, .06);
}

body.dark-mode .image-tool-card:hover {
    border-color: rgba(40, 120, 220, .55);
}

body.dark-mode .tool-icon {
    background: #211a27;
}

body.dark-mode .image-tool-card .tool-icon {
    background: #172943;
}

body.dark-mode .tool-card h3 {
    color: #f1f5f9;
}

body.dark-mode .tool-card p {
    color: #9aa8bc;
}


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

body.dark-mode .features-strip {
    background: #10192b;
    border-color: #25334a;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .22);
}

body.dark-mode .strip-feature {
    border-color: #25334a;
}

body.dark-mode .strip-feature h3 {
    color: #f1f5f9;
}

body.dark-mode .strip-feature p {
    color: #98a6bb;
}

body.dark-mode .secure-icon {
    background: rgba(32, 182, 107, .13);
}

body.dark-mode .private-icon {
    background: rgba(169, 107, 242, .13);
}

body.dark-mode .device-icon {
    background: rgba(243, 154, 39, .13);
}

body.dark-mode .free-icon {
    background: rgba(24, 173, 101, .13);
}


/* =========================================================
   HOW IT WORKS
   ========================================================= */

body.dark-mode .how-it-works {
    background: #0a1220;
}

body.dark-mode .how-it-works .section-heading h2 {
    color: #f8fafc;
}

body.dark-mode .how-it-works .section-heading p {
    color: #9caac0;
}

body.dark-mode .how-it-works .section-heading > span {
    color: #ff5961;
}

body.dark-mode .step {
    background: #10192b;
    border-color: #25334a;
    box-shadow: 0 7px 22px rgba(0, 0, 0, .25);
}

body.dark-mode .step:hover {
    border-color: #354761;
    transform: translateY(-3px);
}

body.dark-mode .step h3 {
    color: #f8fafc;
}

body.dark-mode .step p {
    color: #9caac0;
}

body.dark-mode .step-number {
    box-shadow: 0 8px 20px rgba(237, 28, 36, .20);
}


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

body.dark-mode .footer {
    background:
        linear-gradient(
            180deg,
            #070d19 0%,
            #030712 100%
        );
    border-top: 1px solid #1c293d;
}

body.dark-mode .brand-column p {
    color: #9aa8bc;
}

body.dark-mode .footer-column h3 {
    color: #f8fafc;
}

body.dark-mode .footer-column > a {
    color: #9eabc0;
}

body.dark-mode .footer-column > a:hover {
    color: #ffffff;
}

body.dark-mode .social-links a {
    background: #111b2e;
    border-color: #2a3951;
    color: #dbe4f0;
}

body.dark-mode .social-links a:hover {
    background: #ed1c24;
    border-color: #ed1c24;
}

body.dark-mode .app-badge {
    background: #0c1527;
    border-color: #2b3951;
}

body.dark-mode .app-badge span {
    color: #8f9db2;
}

body.dark-mode .app-badge strong {
    color: #f8fafc;
}

body.dark-mode .footer-bottom {
    border-color: #1f2c41;
    color: #8290a5;
}

body.dark-mode .footer-bottom span {
    color: #f8fafc;
}

body.dark-mode .footer-legal a:hover {
    color: #ffffff;
}


/* =========================================================
   MOBILE DARK MODE
   ========================================================= */

@media (max-width: 992px) {

    body.dark-mode .mobile-menu {
        background: #10192b;
    }
}


@media (max-width: 768px) {

    body.dark-mode .tool-card {
        background: #10192b;
    }

    body.dark-mode .tool-card:hover {
        background: #142038;
    }

    body.dark-mode .features-strip {
        background: #10192b;
    }

    body.dark-mode .strip-feature {
        border-bottom-color: #25334a;
    }
}


/* =========================================================
   DARK MODE - SMOOTH TRANSITIONS
   ========================================================= */

body,
.header,
.hero,
.tools,
.tool-card,
.features-strip,
.step,
.how-it-works,
.footer,
.dropdown-menu,
.mobile-menu,
.theme-toggle,
.menu-btn {
    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

/* =========================================================
   PDFLooks - FIREBASE USER PROFILE
   ========================================================= */

.user-profile {
    position: relative;
    display: flex;
    align-items: center;
}


/* USER AVATAR BUTTON */

.user-avatar-btn {
    width: 42px;
    height: 42px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #e5e7eb;
    border-radius: 50%;

    background: #ffffff;

    cursor: pointer;

    transition: .2s ease;

    overflow: hidden;
}

.user-avatar-btn:hover {
    border-color: #ed1c24;
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(0,0,0,.10);
}


.user-avatar-btn img {
    width: 100%;
    height: 100%;

    border-radius: 50%;

    object-fit: cover;

    display: block;
}


/* USER DROPDOWN */

.user-dropdown {
    position: absolute;

    top: calc(100% + 12px);
    right: 0;

    width: 275px;

    padding: 14px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.14),
        0 5px 15px rgba(0,0,0,.06);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    transition: .2s ease;

    z-index: 2000;
}


.user-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* USER INFO */

.user-info {
    display: flex;
    align-items: center;
    gap: 11px;
}


.user-dropdown-avatar {
    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #ed1c24,
        #ff5365
    );

    color: #ffffff;

    font-size: 17px;
    font-weight: 800;

    overflow: hidden;
}


.user-dropdown-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;
}


.user-details {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.user-details strong {
    color: #111827;

    font-size: 14px;
    font-weight: 700;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.user-details span {
    max-width: 190px;

    color: #6b7280;

    font-size: 11px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* DIVIDER */

.user-dropdown-divider {
    height: 1px;

    margin: 13px 0;

    background: #eeeeee;
}


/* LOGOUT */

.logout-btn {
    width: 100%;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border: 1px solid #fee2e2;
    border-radius: 8px;

    background: #fff5f5;

    color: #dc2626;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition: .2s ease;
}


.logout-btn:hover {
    background: #fee2e2;
    border-color: #fecaca;
}


/* =========================================================
   DARK MODE USER PROFILE
   ========================================================= */

body.dark-mode .user-avatar-btn {
    background: #111827;
    border-color: #334155;
}


body.dark-mode .user-avatar-btn:hover {
    border-color: #ff5961;
}


body.dark-mode .user-dropdown {
    background: #111a2c;
    border-color: #2a3850;

    box-shadow:
        0 20px 50px rgba(0,0,0,.45);
}


body.dark-mode .user-details strong {
    color: #f8fafc;
}


body.dark-mode .user-details span {
    color: #94a3b8;
}


body.dark-mode .user-dropdown-divider {
    background: #29374d;
}


body.dark-mode .logout-btn {
    background: rgba(237,28,36,.10);
    border-color: rgba(237,28,36,.25);
    color: #ff6870;
}


body.dark-mode .logout-btn:hover {
    background: rgba(237,28,36,.18);
}


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

@media (max-width:576px) {

    .user-avatar-btn {
        width: 37px;
        height: 37px;
    }

    .user-dropdown {
        right: -5px;
        width: 260px;
    }

}


@media (max-width:400px) {

    .user-avatar-btn {
        width: 35px;
        height: 35px;
    }

}

/* =========================================================
   SUPPORT US NAVIGATION
========================================================= */

.support-nav-link {
    color: #ef1c28 !important;

    font-weight: 700;

    text-decoration: none;

    position: relative;

    transition: color 0.2s ease;
}


/* underline */

.support-nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -8px;

    height: 3px;

    background: #ef1c28;

    border-radius: 10px;

    transform: scaleX(0);

    transform-origin: center;

    transition: transform 0.2s ease;
}


/* hover */

.support-nav-link:hover {
    color: #d91420 !important;
}


.support-nav-link:hover::after {
    transform: scaleX(1);
}

/* =========================================================
   LANGUAGE SELECTOR
========================================================= */

.language-selector {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}


/* =========================================================
   LANGUAGE BUTTON
========================================================= */

.language-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    height: 42px;

    padding: 0 10px;

    border: none;
    background: transparent;

    color: #101827;

    font-family: inherit;
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    border-radius: 8px;

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


.language-btn:hover {
    color: #ef1c28;
    background: #fff5f5;
}


.language-globe {
    font-size: 16px;
    line-height: 1;
}


.language-text {
    white-space: nowrap;
}


.language-arrow {
    display: inline-block;

    font-size: 11px;
    line-height: 1;

    transition:
        transform 0.2s ease;
}


/* =========================================================
   ARROW UP WHEN MENU IS OPEN
========================================================= */

.language-btn.open .language-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   LANGUAGE DROPDOWN
========================================================= */

.language-menu {
    position: absolute;

    top: calc(100% + 8px);

    /* IMPORTANT:
       Keep menu aligned with Language button */
    right: auto;
    left: 0;

    width: 155px;

    padding: 7px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 10px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.14);

    z-index: 99999;

    display: none;
}


/* OPEN */

.language-menu.show {
    display: block;
}


/* =========================================================
   LANGUAGE OPTIONS
========================================================= */

.language-option {
    width: 100%;

    display: flex;
    align-items: center;

    padding: 10px 12px;

    border: none;
    border-radius: 7px;

    background: transparent;

    color: #172033;

    font-family: inherit;

    font-size: 14px;
    font-weight: 600;

    text-align: left;

    cursor: pointer;

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


.language-option:hover {
    background: #fff1f2;

    color: #ef1c28;
}


.language-option.active {
    background: #fff1f2;

    color: #ef1c28;

    font-weight: 700;
}


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

.header-actions {
    display: flex;

    align-items: center;

    gap: 18px;
}


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

@media (max-width: 768px) {

    .language-menu {
        right: 0;
        left: auto;
    }

}


/* =========================================================
   LANGUAGE ARROW
========================================================= */

.language-arrow {
    display: inline-block;

    font-size: 12px;
    line-height: 1;

    transition:
        transform 0.2s ease;
}


/* Dropdown OPEN */

.language-btn.open .language-arrow {
    transform: rotate(180deg);
}

/* =========================================
   MOBILE FINAL FIX
========================================= */

@media (max-width: 650px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    /* -----------------------------
       HERO
    ----------------------------- */

    .hero {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        padding: 45px 20px 60px !important;
        box-sizing: border-box !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

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

    .hero-text {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .hero h1 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px auto !important;
        font-size: clamp(38px, 11vw, 54px) !important;
        line-height: 1.05 !important;
        text-align: center !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .hero p {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 17px !important;
        line-height: 1.6 !important;
        text-align: center !important;
    }

    /* -----------------------------
       HERO FEATURES
    ----------------------------- */

    .hero-features {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 14px 10px !important;
        margin: 28px auto 0 !important;
        box-sizing: border-box !important;
    }

    .hero-feature {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        font-size: 14px !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    /* -----------------------------
       HERO IMAGE
    ----------------------------- */

    .hero-image,
    .hero-visual,
    .hero-illustration {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 45px auto 0 !important;
        padding: 0 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    .hero-image img,
    .hero-visual img,
    .hero-illustration img {
        display: block !important;
        width: 100% !important;
        max-width: 430px !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* -----------------------------
       DECORATIVE CIRCLES
    ----------------------------- */

    .hero::before,
    .hero::after {
        max-width: 45vw !important;
        max-height: 45vw !important;
    }

    /* -----------------------------
       FOOTER
    ----------------------------- */

    .footer {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .footer-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    .footer-logo img {
        max-width: 210px !important;
        width: 100% !important;
        height: auto !important;
    }

}

/* =========================================================
   PDFLooks HOME PAGE
   FINAL RESPONSIVE OVERRIDE
   ---------------------------------------------------------
   Desktop UI preserved.
   Mobile horizontal overflow fixed.
   Hero fixed-width/transform issues fixed.
   Tool grid responsive.
   Header / profile / language / menu preserved.
   Dark mode preserved.
========================================================= */


/* =========================================================
   GLOBAL SAFETY
========================================================= */

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

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

img,
svg,
video {
    max-width: 100%;
}

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


/* =========================================================
   LARGE DESKTOP
   1601px+
========================================================= */

@media (min-width: 1601px) {

    .header-container {
        width: min(1440px, calc(100% - 80px));
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero {
        width: min(1440px, calc(100% - 80px));
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
    }

    .tool-container {
        width: min(1440px, calc(100% - 80px));
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
    }

    .features-strip {
        width: min(1440px, calc(100% - 80px));
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
    }

    .steps-container {
        width: min(1200px, calc(100% - 80px));
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    .device-scene {
        transform: scale(.88);
    }
}


/* =========================================================
   DESKTOP
   1201px - 1600px
========================================================= */

@media (min-width: 1201px) and (max-width: 1600px) {

    .header-container {
        width: min(1280px, calc(100% - 50px));
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero {
        width: min(1280px, calc(100% - 50px));
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }

    .tool-container {
        width: min(1280px, calc(100% - 50px));
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }

    .features-strip {
        width: min(1280px, calc(100% - 50px));
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }

    .steps-container {
        width: min(1150px, calc(100% - 50px));
        max-width: 1150px;
        margin-left: auto;
        margin-right: auto;
    }
}


/* =========================================================
   TABLET
   769px - 1200px
========================================================= */

@media (min-width: 769px) and (max-width: 1200px) {

    html,
    body {
        overflow-x: hidden;
    }

    .header-container {
        width: calc(100% - 40px);
        max-width: 1160px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }

    .header-actions {
        gap: 12px;
    }

    .navigation {
        margin-left: 25px;
    }

    .navigation > ul {
        gap: 6px;
    }

    .hero {
        width: calc(100% - 40px);
        max-width: 1160px;
        margin-left: auto;
        margin-right: auto;

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

        padding-left: 0;
        padding-right: 0;

        overflow: hidden;
    }

    .hero-content {
        min-width: 0;
    }

    .hero-content h1 {
        font-size: clamp(42px, 5vw, 58px);
        line-height: 1.05;
    }

    .hero-content > p {
        max-width: 620px;
    }

    .hero-features {
        width: 100%;
        max-width: 560px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 16px;
    }

    .hero-feature {
        min-width: 0;
        white-space: normal;
    }

    .hero-visual {
        width: 100%;
        min-width: 0;
        transform: none;
        overflow: hidden;
    }

    .device-scene {
        transform: scale(.66);
    }

    .tool-container {
        width: calc(100% - 40px);
        max-width: 1160px;
        margin-left: auto;
        margin-right: auto;

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

        gap: 14px;
    }

    .tool-card {
        min-width: 0;
    }

    .features-strip {
        width: calc(100% - 40px);
        max-width: 1160px;
        margin-left: auto;
        margin-right: auto;
    }

    .steps-container {
        width: calc(100% - 40px);
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-container {
        width: calc(100% - 40px);
        max-width: 1160px;
        margin-left: auto;
        margin-right: auto;
    }
}


/* =========================================================
   MOBILE
   768px AND BELOW
========================================================= */

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body {
        padding-top: 64px;
    }

    /* -----------------------------------------
       HEADER
    ----------------------------------------- */

    .header {
        width: 100%;
        height: 64px;
        min-height: 64px;
        padding: 0;
    }

    .header-container {
        width: calc(100% - 24px);
        max-width: none;
        min-width: 0;
        min-height: 64px;

        margin: 0 auto;

        padding: 0;

        display: flex;
        align-items: center;

        gap: 8px;
    }

    .logo {
        min-width: 0;
        flex-shrink: 1;
    }

    .logo img {
        display: block;
        width: auto;
        max-width: 145px;
        height: 42px;
        object-fit: contain;
    }

    .navigation {
        display: none !important;
    }

    .header-actions {
        margin-left: auto;
        min-width: 0;

        display: flex;
        align-items: center;

        gap: 7px;
    }

    .header-actions > a:not(.signup-btn) {
        display: none;
    }

    .signup-btn {
        min-width: 76px;
        height: 37px;

        padding: 0 10px;

        font-size: 12px;
        white-space: nowrap;
    }

    .language-selector {
        flex-shrink: 1;
        min-width: 0;
    }

    .language-btn {
        height: 37px;
        padding: 0 6px;
        gap: 4px;
        font-size: 13px;
    }

    .language-globe {
        font-size: 15px;
    }

    .language-text {
        max-width: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .theme-toggle,
    .menu-btn {
        width: 37px;
        height: 37px;

        min-width: 37px;

        display: flex;
        align-items: center;
        justify-content: center;

        flex-shrink: 0;
    }

    .menu-btn {
        font-size: 22px;
    }

    /* -----------------------------------------
       USER PROFILE
    ----------------------------------------- */

    .user-profile {
        flex-shrink: 0;
    }

    .user-avatar-btn {
        width: 37px;
        height: 37px;
    }

    .user-dropdown {
        width: min(275px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        right: 0;
    }

    /* -----------------------------------------
       MOBILE MENU
    ----------------------------------------- */

    .mobile-menu {
        width: min(320px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);

        right: 12px;
        left: auto;

        overflow: hidden;
    }

    .language-menu {
        left: auto;
        right: 0;

        width: 155px;
        max-width: calc(100vw - 24px);
    }

    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        row-gap: 12px;

        padding:
            34px
            16px
            38px !important;

        text-align: center;

        overflow: hidden !important;

        transform: none !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: 650px;

        min-width: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;

        align-self: auto !important;

        display: flex;
        flex-direction: column;
        align-items: center;

        text-align: center;
    }

    .hero-badge {
        max-width: 100%;

        font-size: 13px;

        white-space: normal;
        text-align: center;
    }

    .hero-content h1,
    .hero h1 {
        width: 100% !important;
        max-width: 650px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        font-size: clamp(
            34px,
            9vw,
            52px
        ) !important;

        line-height: 1.08 !important;
        letter-spacing: -1px;

        text-align: center !important;

        overflow-wrap: normal;
        word-break: normal;
    }

    .hero-content > p,
    .hero p {
        width: 100%;
        max-width: 600px;

        margin-left: auto;
        margin-right: auto;

        font-size: 15px;

        line-height: 1.55;

        text-align: center;
    }

    /* -----------------------------------------
       HERO FEATURES
    ----------------------------------------- */

    .hero-features {
        width: min(100%, 520px);

        margin-left: auto !important;
        margin-right: auto !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px 12px !important;

        align-items: center;
    }

    .hero-feature {
        width: 100%;
        min-width: 0;

        display: flex;

        align-items: center;
        justify-content: flex-start;

        gap: 5px;

        font-size: 12px;

        line-height: 1.35;

        white-space: normal;
        text-align: left;
    }

    .feature-check {
        flex-shrink: 0;
    }

    /* -----------------------------------------
       HERO VISUAL
    ----------------------------------------- */

    .hero-visual {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 320px !important;
        min-height: 320px !important;

        margin: 10px auto 0 !important;

        transform: none !important;

        overflow: hidden !important;

        display: flex;

        align-items: center;
        justify-content: center;
    }

    .device-scene {
        position: relative;

        width: 560px;
        max-width: none;

        height: 390px;

        flex-shrink: 0;

        margin: 0;

        transform: scale(.58) !important;

        transform-origin: center center;
    }

    /* -----------------------------------------
       TOOLS
    ----------------------------------------- */

    .tools {
        width: 100% !important;
        max-width: 100% !important;

        padding:
            32px
            16px
            42px !important;

        overflow: hidden;
    }

    .section-heading {
        width: 100%;
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;
    }

    .section-title-row {
        width: 100%;
        max-width: 100%;

        display: flex;

        align-items: center;

        flex-wrap: wrap;

        gap: 8px;
    }

    .section-title-row h2 {
        max-width: 100%;

        font-size: clamp(
            23px,
            6vw,
            32px
        );

        line-height: 1.1;
    }

    .section-title-row p {
        width: auto;
        max-width: 100%;

        margin-left: 0 !important;

        font-size: 13px;

        line-height: 1.4;
    }

    .view-all {
        margin-left: auto;

        white-space: nowrap;

        font-size: 12px;
    }

    .tool-container {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;
    }

    .tool-link {
        width: 100%;
        min-width: 0;
    }

    .tool-card {
        width: 100%;
        min-width: 0;

        min-height: 150px;

        padding: 12px 10px;

        overflow: hidden;
    }

    .tool-icon {
        width: 48px;
        height: 48px;

        flex-shrink: 0;
    }

    .tool-icon img {
        width: 37px;
        height: 37px;

        object-fit: contain;
    }

    .tool-card h3 {
        max-width: 100%;

        font-size: 13px;

        line-height: 1.25;

        overflow-wrap: anywhere;
    }

    .tool-card p {
        max-width: 100%;

        font-size: 10px;

        line-height: 1.4;

        overflow-wrap: anywhere;
    }

    /* -----------------------------------------
       FEATURES STRIP
    ----------------------------------------- */

    .features-strip {
        width: calc(100% - 24px) !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        grid-template-columns: 1fr !important;

        padding: 6px;

        overflow: hidden;
    }

    .strip-feature {
        width: 100%;
        min-width: 0;

        border-right: none !important;
        border-bottom: 1px solid #eeeeee;

        padding: 17px 14px;
    }

    .strip-feature:last-child {
        border-bottom: none;
    }

    /* -----------------------------------------
       HOW IT WORKS
    ----------------------------------------- */

    .how-it-works {
        width: 100%;
        max-width: 100%;

        padding:
            48px
            16px !important;

        overflow: hidden;
    }

    .steps-container {
        width: 100%;
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        grid-template-columns: 1fr !important;

        gap: 14px;
    }

    .step {
        width: 100%;
        min-width: 0;
    }

    /* -----------------------------------------
       FOOTER
    ----------------------------------------- */

    .footer {
        width: 100% !important;
        max-width: 100% !important;

        padding:
            42px
            16px
            22px !important;

        overflow: hidden;
    }

    .footer-container {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto;
        margin-right: auto;

        grid-template-columns: 1fr !important;

        text-align: center;
    }

    .brand-column {
        width: 100%;
        grid-column: auto !important;

        text-align: center;
    }

    .brand-column img {
        max-width: 210px;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .brand-column p {
        max-width: 340px;

        margin-left: auto;
        margin-right: auto;
    }

    .footer-column {
        width: 100%;
        min-width: 0;

        text-align: center;
    }

    .footer-links,
    .social-links {
        justify-content: center;
    }

    .mobile-apps-column {
        grid-column: auto !important;

        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-bottom {
        width: 100%;

        flex-direction: column;

        gap: 10px;

        text-align: center;
    }

    .footer-legal {
        justify-content: center;

        flex-wrap: wrap;

        text-align: center;
    }
}


/* =========================================================
   SMALL MOBILE
   480px AND BELOW
========================================================= */

@media (max-width: 480px) {

    .header-container {
        width: calc(100% - 18px);
    }

    .logo img {
        max-width: 128px;
        height: 39px;
    }

    .header-actions {
        gap: 5px;
    }

    .language-text {
        display: none;
    }

    .language-btn {
        padding: 0 5px;
    }

    .theme-toggle,
    .menu-btn,
    .user-avatar-btn {
        width: 35px;
        height: 35px;
        min-width: 35px;
    }

    .hero {
        padding:
            30px
            12px
            34px !important;
    }

    .hero-content h1,
    .hero h1 {
        font-size: clamp(
            30px,
            9.5vw,
            42px
        ) !important;

        line-height: 1.08 !important;
    }

    .hero-content > p,
    .hero p {
        font-size: 14px;

        line-height: 1.55;
    }

    .hero-features {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 9px 8px !important;
    }

    .hero-feature {
        font-size: 11px;
    }

    .hero-visual {
        height: 285px !important;
        min-height: 285px !important;
    }

    .device-scene {
        transform: scale(.48) !important;
    }

    .tools {
        padding:
            28px
            12px
            38px !important;
    }

    .section-title-row h2 {
        font-size: 22px;
    }

    .section-title-row p {
        font-size: 11px;
    }

    .tool-container {
        gap: 9px !important;
    }

    .tool-card {
        min-height: 142px;

        padding:
            11px
            8px;
    }

    .tool-icon {
        width: 44px;
        height: 44px;
    }

    .tool-icon img {
        width: 34px;
        height: 34px;
    }

    .tool-card h3 {
        font-size: 12px;
    }

    .tool-card p {
        font-size: 9px;
    }

    .features-strip {
        width: calc(100% - 18px) !important;
    }

    .strip-feature {
        padding:
            15px
            12px;
    }

    .footer {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .user-dropdown {
        right: -4px;
        width: min(260px, calc(100vw - 18px));
    }
}


/* =========================================================
   VERY SMALL MOBILE
   380px AND BELOW
========================================================= */

@media (max-width: 380px) {

    body {
        padding-top: 62px;
    }

    .header {
        height: 62px;
        min-height: 62px;
    }

    .header-container {
        min-height: 62px;

        width: calc(100% - 14px);
    }

    .logo img {
        max-width: 112px;
        height: 36px;
    }

    .header-actions {
        gap: 4px;
    }

    .language-btn {
        width: 32px;
        min-width: 32px;
        padding: 0;
    }

    .language-globe {
        font-size: 14px;
    }

    .theme-toggle,
    .menu-btn,
    .user-avatar-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .hero {
        padding:
            27px
            9px
            30px !important;
    }

    .hero-content h1,
    .hero h1 {
        font-size: 29px !important;
        letter-spacing: -.7px;
    }

    .hero-content > p,
    .hero p {
        font-size: 13px;
    }

    .hero-features {
        grid-template-columns: 1fr !important;

        width: min(100%, 260px);

        gap: 8px !important;
    }

    .hero-feature {
        justify-content: flex-start;

        font-size: 11px;
    }

    .hero-visual {
        height: 255px !important;
        min-height: 255px !important;
    }

    .device-scene {
        transform: scale(.42) !important;
    }

    .tools {
        padding:
            26px
            9px
            34px !important;
    }

    .section-title-row {
        gap: 5px;
    }

    .section-title-row h2 {
        font-size: 20px;
    }

    .section-title-row p {
        width: 100%;
        font-size: 10px;
    }

    .view-all {
        margin-left: auto;
        font-size: 10px;
    }

    .tool-container {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .tool-card {
        min-height: 132px;

        padding: 12px;
    }

    .tool-card h3 {
        font-size: 13px;
    }

    .tool-card p {
        font-size: 10px;
    }

    .features-strip {
        width: calc(100% - 14px) !important;
    }

    .strip-feature {
        padding:
            14px
            11px;
    }

    .strip-feature h3 {
        font-size: 14px;
    }

    .strip-feature p {
        font-size: 11px;
    }

    .footer {
        padding:
            34px
            10px
            18px !important;
    }

    .footer-bottom {
        font-size: 10px;
    }
}


/* =========================================================
   REDUCE MOTION
========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   MOBILE FOOTER - FINAL WIDTH & LAYOUT FIX
========================================================= */

@media (max-width: 768px) {

    .footer {
        width: 100vw !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding:
            42px 18px 22px !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }

    .footer-container {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 34px 22px !important;

        box-sizing: border-box !important;
    }

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

    .brand-column {
        width: 100% !important;

        grid-column: 1 / -1 !important;

        text-align: center !important;

        margin: 0 !important;
    }

    .brand-column img {
        display: block !important;

        width: auto !important;
        max-width: 220px !important;

        height: auto !important;

        margin: 0 auto 18px !important;
    }

    .brand-column p {
        width: 100% !important;
        max-width: 360px !important;

        margin: 0 auto 18px !important;

        text-align: center !important;

        line-height: 1.6 !important;
    }

    /* -----------------------------------------
       SOCIAL LINKS
    ----------------------------------------- */

    .social-links {
        display: flex !important;

        justify-content: center !important;
        align-items: center !important;

        gap: 10px !important;

        margin: 0 auto !important;
    }

    /* -----------------------------------------
       FOOTER COLUMNS
    ----------------------------------------- */

    .footer-column {
        width: 100% !important;
        min-width: 0 !important;

        text-align: center !important;

        margin: 0 !important;
    }

    .footer-column h3 {
        margin-bottom: 14px !important;

        font-size: 14px !important;

        text-align: center !important;
    }

    .footer-links {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 9px !important;
    }

    .footer-links a {
        display: block !important;

        width: auto !important;

        font-size: 12px !important;

        line-height: 1.4 !important;

        text-align: center !important;
    }

    /* -----------------------------------------
       MOBILE APPS
    ----------------------------------------- */

    .mobile-apps-column {
        width: 100% !important;

        grid-column: 1 / -1 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        text-align: center !important;
    }

    .mobile-apps-column h3 {
        text-align: center !important;
    }

    .app-buttons {
        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        gap: 9px !important;

        margin: 0 auto !important;
    }

    /* -----------------------------------------
       FOOTER BOTTOM
    ----------------------------------------- */

    .footer-bottom {
        width: 100% !important;

        margin-top: 30px !important;
        padding-top: 18px !important;

        border-top: 1px solid rgba(255,255,255,.15) !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 9px !important;

        text-align: center !important;
    }

    .footer-bottom p {
        width: 100% !important;

        margin: 0 !important;

        font-size: 11px !important;

        text-align: center !important;
    }

    .footer-legal {
        width: 100% !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        flex-wrap: wrap !important;

        gap: 6px !important;

        text-align: center !important;
    }

    .footer-legal a {
        font-size: 10px !important;
    }
}


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

@media (max-width: 480px) {

    .footer {
        width: 100vw !important;
        max-width: none !important;

        padding:
            36px 14px 18px !important;
    }

    .footer-container {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 30px 12px !important;
    }

    .brand-column img {
        max-width: 190px !important;
    }

    .brand-column p {
        max-width: 330px !important;

        font-size: 12px !important;
    }

    .footer-column h3 {
        font-size: 13px !important;
    }

    .footer-links {
        gap: 8px !important;
    }

    .footer-links a {
        font-size: 11px !important;
    }

    .mobile-apps-column {
        grid-column: 1 / -1 !important;
    }

    .footer-bottom {
        margin-top: 26px !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .footer {
        padding:
            32px 10px 17px !important;
    }

    .footer-container {
        grid-template-columns: 1fr !important;

        gap: 28px !important;
    }

    .brand-column,
    .mobile-apps-column {
        grid-column: auto !important;
    }

    .brand-column img {
        max-width: 180px !important;
    }

    .footer-column {
        width: 100% !important;
    }

    .footer-column h3 {
        margin-bottom: 11px !important;

        font-size: 13px !important;
    }

    .footer-links {
        gap: 7px !important;
    }

    .footer-links a {
        font-size: 11px !important;
    }

    .footer-bottom {
        margin-top: 22px !important;

        padding-top: 15px !important;
    }
}

/* =========================================================
   HOME PAGE - LOGO BOX
========================================================= */

.logo {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    padding: 8px 12px;

    border-radius: 6px;

    width: fit-content;

    box-sizing: border-box;
}

.logo img {
    display: block;

    width: 160px;
    height: auto;

    object-fit: contain;
}

/* =========================================================
   HOME PAGE FOOTER BRAND- LOGO BOX
========================================================= */
.footer-logo{
    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    padding: 8px 12px;

    border-radius: 6px;

    width: fit-content;

    box-sizing: border-box;

    width: 160px;
    height: auto;
    object-fit: contain;

}

@media (max-width: 650px) {

    .logo {
        padding: 6px 9px;
        border-radius: 6px;
    }

    .logo img {
        width: 125px;
    }

}

/* =========================================================
   PDFLooks HOME - FINAL HERO DESKTOP/LAPTOP FIX
   ---------------------------------------------------------
   IMPORTANT:
   Existing UI / Flow ko change nahi karta.
   Sirf HERO layout ko correct karta hai.

   HTML structure:
   .hero
      ├── .hero-content
      │    ├── badge
      │    ├── h1
      │    ├── p
      │    └── hero-features
      │
      └── .hero-visual
========================================================= */


/* =========================================================
   DESKTOP / LAPTOP
========================================================= */

@media (min-width: 901px) {

    .hero {
        width: 100% !important;
        max-width: 100% !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        align-items: center !important;

        gap: clamp(30px, 4vw, 70px) !important;

        padding-left:
            max(30px, calc((100vw - 1280px) / 2)) !important;

        padding-right:
            max(30px, calc((100vw - 1280px) / 2)) !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       IMPORTANT:
       HERO CONTENT MUST NOT BE GRID
    ----------------------------------------- */

    .hero-content {
        width: 100% !important;

        max-width: 650px !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        display: block !important;

        align-self: center !important;

        justify-self: start !important;

        text-align: left !important;
    }


    /* -----------------------------------------
       BADGE
    ----------------------------------------- */

    .hero-badge {
        display: inline-flex !important;

        max-width: 100%;

        margin-bottom: 8px;
    }


    /* -----------------------------------------
       MAIN HERO HEADING
    ----------------------------------------- */

    .hero-content h1,
    .hero h1 {

        width: 100% !important;

        max-width: 650px !important;

        margin-top: 0 !important;

        margin-right: 0 !important;

        margin-bottom:
            clamp(12px, 1.5vw, 20px) !important;

        font-size:
            clamp(
                42px,
                4vw,
                62px
            ) !important;

        line-height: 1.04 !important;

        letter-spacing: -1.8px !important;

        font-weight: 800 !important;

        text-align: left !important;

        word-break: normal !important;

        overflow-wrap: normal !important;
    }


    /* -----------------------------------------
       HERO DESCRIPTION
    ----------------------------------------- */

    .hero-content > p,
    .hero p {

        width: 100% !important;

        max-width: 600px !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

        margin-bottom: 8px !important;

        font-size:
            clamp(
                15px,
                1.15vw,
                18px
            ) !important;

        line-height: 1.7 !important;

        text-align: left !important;
    }


    /* -----------------------------------------
       HERO FEATURES
    ----------------------------------------- */

    .hero-features {

        width: 100% !important;

        max-width: 600px !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

        margin-top: 8px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: flex-start !important;

        flex-wrap: wrap !important;

        gap: 12px 20px !important;
    }


    .hero-feature {

        min-width: 0 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: flex-start !important;

        white-space: normal !important;

        text-align: left !important;

        font-size: 12px !important;
    }


    /* -----------------------------------------
       HERO VISUAL
    ----------------------------------------- */

    .hero-visual {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        height: clamp(
            350px,
            30vw,
            420px
        ) !important;

        min-height: 350px !important;

        margin: 0 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        transform: none !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       DEVICE SCENE
    ----------------------------------------- */

    .device-scene {

        width: 560px !important;

        max-width: none !important;

        height: 390px !important;

        flex-shrink: 0 !important;

        margin: 0 !important;

        transform:
            scale(
                clamp(
                    .65,
                    38vw / 1000,
                    .88
                )
            ) !important;

        transform-origin: center center !important;
    }

}


/* =========================================================
   LARGE DESKTOP
   1600px+
========================================================= */

@media (min-width: 1600px) {

    .hero {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 70px !important;

        padding-left:
            max(40px, calc((100vw - 1400px) / 2)) !important;

        padding-right:
            max(40px, calc((100vw - 1400px) / 2)) !important;
    }


    .hero-content {

        max-width: 680px !important;
    }


    .hero-content h1,
    .hero h1 {

        max-width: 680px !important;

        font-size:
            clamp(
                52px,
                3.5vw,
                68px
            ) !important;

        line-height: 1.03 !important;
    }


    .hero-content > p,
    .hero p {

        max-width: 620px !important;

        font-size: 18px !important;
    }


    .hero-visual {

        height: 410px !important;

        min-height: 410px !important;
    }


    .device-scene {

        transform: scale(.88) !important;
    }

}


/* =========================================================
   LAPTOP
   1201px - 1599px
========================================================= */

@media (min-width: 1201px) and (max-width: 1599px) {

    .hero {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 45px !important;
    }


    .hero-content {

        max-width: 620px !important;
    }


    .hero-content h1,
    .hero h1 {

        max-width: 620px !important;

        font-size:
            clamp(
                44px,
                4vw,
                58px
            ) !important;
    }


    .hero-content > p,
    .hero p {

        max-width: 570px !important;

        font-size: 17px !important;
    }


    .hero-visual {

        height: 390px !important;

        min-height: 390px !important;
    }


    .device-scene {

        transform: scale(.76) !important;
    }

}


/* =========================================================
   SMALL LAPTOP / TABLET
   901px - 1200px
========================================================= */

@media (min-width: 901px) and (max-width: 1200px) {

    .hero {

        width: 100% !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 30px !important;

        padding-left: 25px !important;

        padding-right: 25px !important;
    }


    .hero-content {

        max-width: 560px !important;
    }


    .hero-content h1,
    .hero h1 {

        max-width: 560px !important;

        font-size:
            clamp(
                40px,
                4.8vw,
                54px
            ) !important;

        line-height: 1.05 !important;
    }


    .hero-content > p,
    .hero p {

        max-width: 520px !important;

        font-size: 16px !important;
    }


    .hero-features {

        max-width: 520px !important;

        gap: 10px 15px !important;
    }


    .hero-visual {

        height: 360px !important;

        min-height: 360px !important;
    }


    .device-scene {

        transform: scale(.68) !important;
    }

}


/* =========================================================
   MOBILE
   IMPORTANT:
   Existing mobile UI preserved.
========================================================= */

@media (max-width: 900px) {

    .hero {

        width: 100% !important;

        max-width: 100% !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 20px !important;

        text-align: center !important;

        padding-left: 16px !important;

        padding-right: 16px !important;
    }


    .hero-content {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 auto !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        text-align: center !important;
    }


    .hero-content h1,
    .hero h1 {

        width: 100% !important;

        max-width: 650px !important;

        margin-left: auto !important;

        margin-right: auto !important;

        text-align: center !important;

        font-size:
            clamp(
                34px,
                9vw,
                48px
            ) !important;

        line-height: 1.08 !important;
    }


    .hero-content > p,
    .hero p {

        width: 100% !important;

        max-width: 600px !important;

        margin-left: auto !important;

        margin-right: auto !important;

        text-align: center !important;
    }


    .hero-features {

        width: 100% !important;

        max-width: 520px !important;

        margin-left: auto !important;

        margin-right: auto !important;
    }


    .hero-visual {

        width: 100% !important;

        max-width: 100% !important;

        transform: none !important;

        overflow: hidden !important;
    }


    .device-scene {

        flex-shrink: 0 !important;

        transform:
            scale(.58) !important;

        transform-origin:
            center center !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .hero-content h1,
    .hero h1 {

        font-size: 30px !important;

        letter-spacing: -.7px !important;
    }


    .hero-content > p,
    .hero p {

        font-size: 13px !important;
    }


    .hero-visual {

        height: 255px !important;

        min-height: 255px !important;
    }


    .device-scene {

        transform:
            scale(.42) !important;
    }

}


/* =========================================================
   PDFLooks - DESKTOP FULL SCREEN WIDTH FIX
   ---------------------------------------------------------
   ONLY desktop > 1200px
   Existing mobile/tablet/live design untouched.
   ========================================================= */

@media (min-width: 1201px) {

    /* -----------------------------------------
       HEADER - FULL WIDTH
    ----------------------------------------- */

    .header-container {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }


    /* -----------------------------------------
       HERO - FULL WIDTH
    ----------------------------------------- */

    .hero {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       TOOLS - FULL WIDTH
    ----------------------------------------- */

    .tools {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    .tool-container {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       SECTION HEADING - FULL WIDTH
    ----------------------------------------- */

    .section-heading {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       FEATURES STRIP - FULL WIDTH
    ----------------------------------------- */

    .features-strip {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       HOW IT WORKS
       Background full width.
       Inner steps remain controlled.
    ----------------------------------------- */

    .how-it-works {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       FOOTER
       Background already full width.
       Keep internal footer content balanced.
    ----------------------------------------- */

    .footer {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       FOOTER BOTTOM
    ----------------------------------------- */

    .footer-bottom {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

}

/* =========================================================
   PDFLooks HOME - TRUE DESKTOP FULL WIDTH
   FINAL OVERRIDE
   ---------------------------------------------------------
   ONLY DESKTOP
   Mobile / Tablet untouched
========================================================= */

@media (min-width: 1201px) {

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

    .header-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;

        padding-left: 40px !important;
        padding-right: 40px !important;
    }


    /* ================================
       HERO OUTER SECTION
    ================================= */

    .hero {
        width: 100vw !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 40px !important;
        padding-right: 40px !important;

        box-sizing: border-box !important;
    }


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

    .hero-content {
        width: 100% !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


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

    .hero-visual {
        width: 100% !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    /* ================================
       TOOLS SECTION
    ================================= */

    .tools {
        width: 100% !important;
        max-width: none !important;

        padding-left: 40px !important;
        padding-right: 40px !important;

        box-sizing: border-box !important;
    }


    /* ================================
       SECTION HEADING
    ================================= */

    .section-heading {
        width: 100% !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    /* ================================
       TOOL GRID
    ================================= */

    .tool-container {
        width: 100% !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        grid-template-columns:
            repeat(6, minmax(0, 1fr)) !important;

        box-sizing: border-box !important;
    }


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

    .features-strip {
        width: 100% !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }


    /* ================================
       HOW IT WORKS
    ================================= */

    .how-it-works {
        width: 100% !important;
        max-width: none !important;

        box-sizing: border-box !important;
    }


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

    .footer {
        width: 100% !important;
        max-width: none !important;

        box-sizing: border-box !important;
    }

}