/* ==================================================================
   Pocket Freight Detailed Showcase Website
================================================================== */
:root{--color-teal:#0e2f36;--color-teal-light:#18444c;--color-teal-dark:#0a2429;--color-teal-soft:#2e5e66;--color-orange:#f7931e;--color-orange-light:#ffa73a;--color-orange-dark:#e67e00;--color-cyan:#35d6ff;--color-green:#00e5a8;--color-white:#ffffff;--font-heading:'Manrope',sans-serif;--font-body:'Inter',sans-serif;--header-height:84px;--max-width:1240px;--glass-bg:rgba(14,67,80,.24);--glass-bg-strong:rgba(8,35,45,.86);--glass-border:rgba(53,214,255,.22);--shadow-soft:0 24px 70px rgba(0,0,0,.38);--shadow-cyan:0 0 32px rgba(53,214,255,.20)}*{margin:0;padding:0;box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth;scroll-padding-top:var(--header-height)}body{min-height:100%;font-family:var(--font-body);color:var(--color-white);background:radial-gradient(circle at 72% 12%,rgba(53,214,255,.22),transparent 30%),radial-gradient(circle at 18% 26%,rgba(247,147,30,.15),transparent 28%),radial-gradient(circle at 52% 86%,rgba(0,229,168,.12),transparent 28%),repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0,rgba(255,255,255,.045) 1px,transparent 1px,transparent 64px),repeating-linear-gradient(-45deg,rgba(255,255,255,.035) 0,rgba(255,255,255,.035) 1px,transparent 1px,transparent 64px),linear-gradient(135deg,var(--color-teal-soft) 0%,var(--color-teal) 44%,var(--color-teal-dark) 100%);background-attachment:fixed;overflow-x:hidden}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}.site-background{position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 18% 18%,rgba(53,214,255,.11),transparent 24%),radial-gradient(circle at 82% 78%,rgba(247,147,30,.13),transparent 28%)}.container{width:min(100% - 2rem,var(--max-width));margin-inline:auto}.site-header{position:sticky;top:0;z-index:100;min-height:var(--header-height);border-bottom:1px solid rgba(255,255,255,.08);background:rgba(10,36,41,.78);backdrop-filter:blur(16px)}.nav-bar{min-height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:1rem}.brand img{height:76px;width:auto;filter:drop-shadow(0 0 28px rgba(255,255,255,.72)) drop-shadow(0 0 58px rgba(53,214,255,.54)) drop-shadow(0 18px 38px rgba(0,0,0,.42))}.nav-links{display:flex;align-items:center;gap:1.05rem}.nav-links a{font-size:.84rem;line-height:1;font-weight:800;color:rgba(255,255,255,.84);transition:color .2s ease,text-shadow .2s ease}.nav-links a:hover{color:var(--color-cyan);text-shadow:0 0 14px rgba(53,214,255,.55)}.nav-toggle{display:none;width:46px;height:46px;border:1px solid rgba(53,214,255,.26);border-radius:15px;background:rgba(14,67,80,.36);cursor:pointer}.nav-toggle span{display:block;width:21px;height:2px;margin:5px auto;border-radius:999px;background:var(--color-white)}.section-panel{position:relative;padding-block:clamp(4rem,8vw,7rem)}.hero{min-height:calc(100svh - var(--header-height));display:grid;align-items:center;isolation:isolate;overflow:hidden}.hero-art{position:absolute;inset:0;z-index:-2;opacity:.36}.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,22,29,.98) 0%,rgba(4,22,29,.76) 44%,rgba(4,22,29,.40) 100%),radial-gradient(circle at 64% 42%,rgba(53,214,255,.34),transparent 38%)}.hero-art img{width:100%;height:100%;object-fit:cover}.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(320px,.72fr);align-items:center;gap:clamp(2rem,6vw,5rem)}.eyebrow{display:inline-flex;width:fit-content;margin-bottom:1rem;padding:.42rem .95rem;border:1px solid rgba(53,214,255,.42);border-radius:999px;color:var(--color-cyan);background:rgba(53,214,255,.12);box-shadow:0 0 18px rgba(53,214,255,.18);font-size:.78rem;line-height:1;font-weight:800;letter-spacing:.05em;text-transform:uppercase}h1,h2,h3{font-family:var(--font-heading);font-weight:800}.hero h1{max-width:820px;font-size:clamp(3.2rem,7.3vw,7.4rem);line-height:.92;letter-spacing:-.07em;text-transform:uppercase;margin-bottom:1.25rem}.hero h1 span{display:block;color:var(--color-cyan);text-shadow:0 0 12px rgba(53,214,255,.68),0 0 48px rgba(53,214,255,.34)}.hero-copy p,.section-copy p,.section-heading p,.journey-copy p,.feature-card p,.final-card p{color:rgba(255,255,255,.84);font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.72}.hero-copy p{max-width:690px}.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.55rem}.button{display:inline-flex;min-height:50px;align-items:center;justify-content:center;border-radius:999px;padding:.88rem 1.55rem;font-weight:800;transition:transform .22s ease,box-shadow .22s ease}.button:hover{transform:translateY(-3px)}.button-primary{color:#062329;background:linear-gradient(145deg,var(--color-green),var(--color-cyan));box-shadow:0 14px 34px rgba(53,214,255,.28)}.button-secondary{color:white;background:linear-gradient(145deg,var(--color-orange-light),var(--color-orange-dark));box-shadow:0 14px 34px rgba(247,147,30,.25)}.hero-phone{position:relative;display:grid;place-items:center}.hero-phone img{width:min(100%,390px);border-radius:48px;transform:rotate(5deg);box-shadow:0 30px 90px rgba(0,0,0,.58),0 0 42px rgba(53,214,255,.24)}.phone-glow{position:absolute;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(53,214,255,.42),transparent 65%);filter:blur(38px)}.split-layout{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}.contrast-section{background:radial-gradient(circle at 20% 32%,rgba(247,147,30,.12),transparent 30%),radial-gradient(circle at 86% 70%,rgba(53,214,255,.12),transparent 32%)}.image-card,.journey-media,.feature-card,.final-card{border:1px solid var(--glass-border);border-radius:32px;background:var(--glass-bg);box-shadow:var(--shadow-soft),var(--shadow-cyan);overflow:hidden;backdrop-filter:blur(14px)}.image-card img{width:100%;height:100%;object-fit:cover}.section-copy h2,.section-heading h2,.final-card h2{font-size:clamp(2.25rem,4.8vw,4.6rem);line-height:1.02;letter-spacing:-.055em;margin-bottom:1rem}.section-copy p+p{margin-top:1rem}.section-heading{max-width:910px;margin:0 auto clamp(2.2rem,5vw,4rem);text-align:center}.journey-section{overflow:hidden}.journey-list{display:grid;gap:clamp(2rem,5vw,5rem)}.journey-item{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}.journey-item:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(280px,.72fr)}.journey-item:nth-child(even) .journey-media{order:2}.journey-item:nth-child(even) .journey-copy{order:1}.journey-media{padding:.65rem}.journey-media img{width:100%;border-radius:24px}.journey-copy{position:relative;border:1px solid var(--glass-border);border-radius:32px;padding:clamp(1.5rem,4vw,3rem);background:radial-gradient(circle at top left,rgba(53,214,255,.14),transparent 36%),radial-gradient(circle at bottom right,rgba(247,147,30,.12),transparent 36%),var(--glass-bg-strong);box-shadow:var(--shadow-soft),var(--shadow-cyan)}.journey-copy span,.feature-card span{display:inline-flex;margin-bottom:.75rem;color:var(--color-orange);font-size:.85rem;line-height:1;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.journey-copy h3,.feature-card h3{font-size:clamp(1.55rem,2.5vw,2.35rem);line-height:1.1;margin-bottom:.85rem}.phone-gallery{display:grid;gap:1rem}.gallery-seven{grid-template-columns:repeat(7,minmax(0,1fr))}.gallery-four{grid-template-columns:repeat(4,minmax(0,1fr))}.phone-gallery img{width:100%;border-radius:24px;border:1px solid rgba(255,255,255,.10);box-shadow:var(--shadow-soft),0 0 20px rgba(53,214,255,.12)}.feature-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.feature-card{display:flex;flex-direction:column;min-height:100%;transition:transform .25s ease,box-shadow .25s ease}.feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft),0 0 38px rgba(53,214,255,.30)}.feature-card img{width:100%;aspect-ratio:9/16;object-fit:cover;object-position:top center}.feature-card div{padding:1.25rem}.finance-grid .feature-card img{object-position:top center}.final-section{padding-bottom:clamp(5rem,8vw,8rem)}.final-card{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:center;gap:clamp(1.5rem,5vw,4rem);padding:clamp(1.5rem,5vw,4rem);background:radial-gradient(circle at 20% 80%,rgba(247,147,30,.20),transparent 34%),radial-gradient(circle at 82% 18%,rgba(53,214,255,.20),transparent 34%),rgba(8,31,39,.88)}.final-card>img{max-height:390px;margin:0 auto;filter:drop-shadow(0 0 28px rgba(247,147,30,.40)) drop-shadow(0 26px 46px rgba(0,0,0,.45))}.final-card .button{margin-top:1.5rem}.site-footer{padding:2.5rem 0 4rem;color:rgba(255,255,255,.62);text-align:center}.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:translateY(0)}@media (max-width:1100px){.nav-links{gap:.7rem}.nav-links a{font-size:.76rem}.hero-grid,.split-layout,.journey-item,.journey-item:nth-child(even),.final-card{grid-template-columns:1fr}.journey-item:nth-child(even) .journey-media,.journey-item:nth-child(even) .journey-copy{order:initial}.feature-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-seven{grid-template-columns:repeat(3,minmax(0,1fr))}.gallery-four{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-phone img{transform:none}}@media (max-width:760px){.container{width:min(100% - 1.2rem,var(--max-width))}.nav-toggle{display:block}.nav-links{position:fixed;top:var(--header-height);left:.75rem;right:.75rem;display:none;flex-direction:column;align-items:stretch;padding:1rem;border:1px solid rgba(53,214,255,.26);border-radius:20px;background:rgba(10,36,41,.96);box-shadow:var(--shadow-soft)}.nav-links.open{display:flex}.nav-links a{padding:.82rem;font-size:.92rem}.hero{min-height:auto;padding-top:4rem}.hero h1{letter-spacing:-.045em}.hero-phone img{width:min(100%,320px);border-radius:38px}.section-panel{padding-block:4rem}.feature-card-grid,.gallery-seven,.gallery-four{grid-template-columns:1fr}.phone-gallery img{width:min(100%,360px);margin-inline:auto}.journey-copy,.feature-card div{padding:1.2rem}.final-card{text-align:center}.final-card>img{max-height:310px}}


/* ==================================================================
   Document Examples
================================================================== */

.document-examples-section {
    background:
        radial-gradient(circle at 18% 24%, rgba(247, 147, 30, 0.13), transparent 30%),
        radial-gradient(circle at 82% 72%, rgba(53, 214, 255, 0.14), transparent 32%);
}

.document-preview-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.42fr) minmax(0, 0.58fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: stretch;
}

.document-selector-panel,
.document-viewer-panel {
    border: 1px solid var(--glass-border);
    border-radius: 32px;
    background:
        radial-gradient(circle at top left, rgba(53, 214, 255, 0.12), transparent 38%),
        radial-gradient(circle at bottom right, rgba(247, 147, 30, 0.10), transparent 38%),
        var(--glass-bg-strong);
    box-shadow: var(--shadow-soft), var(--shadow-cyan);
    backdrop-filter: blur(14px);
}

.document-selector-panel {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 2.5vw, 1.4rem);
}

.document-group {
    display: grid;
    gap: 0.75rem;
}

.document-group h3 {
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.document-card {
    width: 100%;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
        "icon title"
        "icon text";
    gap: 0.15rem 0.85rem;
    align-items: center;
    min-height: 94px;
    padding: 1rem;
    border: 1px solid rgba(53, 214, 255, 0.20);
    border-radius: 22px;
    color: var(--color-white);
    background: rgba(14, 67, 80, 0.28);
    cursor: pointer;
    text-align: left;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.document-card:hover,
.document-card.active {
    transform: translateY(-3px);
    border-color: rgba(53, 214, 255, 0.58);
    background: rgba(53, 214, 255, 0.10);
    box-shadow: 0 0 24px rgba(53, 214, 255, 0.22);
}

.document-card span {
    grid-area: icon;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #062329;
    background: linear-gradient(145deg, var(--color-green), var(--color-cyan));
    font-weight: 900;
    font-size: 0.95rem;
    box-shadow: 0 0 20px rgba(53, 214, 255, 0.26);
}

.document-card strong {
    grid-area: title;
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.2;
}

.document-card small {
    grid-area: text;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.4;
}

.document-viewer-panel {
    min-height: 760px;
    overflow: hidden;
    display: grid;
}

.document-viewer-empty {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 760px;
    padding: 2rem;
    text-align: center;
}

.document-viewer-empty h3 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    margin-bottom: 1rem;
}

.document-viewer-empty p {
    max-width: 520px;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.7;
}

.document-viewer-loaded {
    min-height: 760px;
    display: grid;
    grid-template-rows: auto 1fr;
}

.document-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(53, 214, 255, 0.18);
    background: rgba(4, 22, 29, 0.42);
}

.document-viewer-header h3 {
    font-size: clamp(1rem, 2vw, 1.35rem);
}

.document-viewer-header a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.62rem 0.95rem;
    border-radius: 999px;
    color: #062329;
    background: linear-gradient(145deg, var(--color-green), var(--color-cyan));
    font-weight: 800;
}

.document-viewer-loaded iframe {
    width: 100%;
    height: 100%;
    min-height: 700px;
    border: 0;
    background: rgba(255, 255, 255, 0.96);
}

@media (max-width: 1000px) {
    .document-preview-layout {
        grid-template-columns: 1fr;
    }

    .document-viewer-panel,
    .document-viewer-empty,
    .document-viewer-loaded {
        min-height: 640px;
    }

    .document-viewer-loaded iframe {
        min-height: 580px;
    }
}

@media (max-width: 640px) {
    .document-card {
        grid-template-columns: 54px minmax(0, 1fr);
        min-height: 86px;
        padding: 0.85rem;
    }

    .document-card span {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        font-size: 0.84rem;
    }

    .document-viewer-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .document-viewer-panel,
    .document-viewer-empty,
    .document-viewer-loaded {
        min-height: 560px;
    }

    .document-viewer-loaded iframe {
        min-height: 500px;
    }
}


/* ==================================================================
   Email Template Preview
================================================================== */

.email-template-section {
    background:
        radial-gradient(circle at 18% 24%, rgba(53, 214, 255, 0.13), transparent 30%),
        radial-gradient(circle at 82% 72%, rgba(247, 147, 30, 0.12), transparent 32%);
}

.template-preview-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.28fr) minmax(0, 0.72fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: stretch;
}

.template-selector-panel,
.template-viewer-panel {
    border: 1px solid var(--glass-border);
    border-radius: 32px;
    background:
        radial-gradient(circle at top left, rgba(53, 214, 255, 0.12), transparent 38%),
        radial-gradient(circle at bottom right, rgba(247, 147, 30, 0.10), transparent 38%),
        var(--glass-bg-strong);
    box-shadow: var(--shadow-soft), var(--shadow-cyan);
    backdrop-filter: blur(14px);
}

.template-selector-panel {
    display: grid;
    grid-template-rows: repeat(2, minmax(150px, 1fr));
    gap: 1rem;
    padding: clamp(1rem, 2.5vw, 1.4rem);
}

.template-card {
    width: 100%;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
        "icon title"
        "icon text";
    gap: 0.15rem 0.85rem;
    align-items: center;
    min-height: 150px;
    padding: 1rem;
    border: 1px solid rgba(53, 214, 255, 0.20);
    border-radius: 22px;
    color: var(--color-white);
    background: rgba(14, 67, 80, 0.28);
    cursor: pointer;
    text-align: left;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.template-card:hover,
.template-card.active {
    transform: translateY(-3px);
    border-color: rgba(53, 214, 255, 0.58);
    background: rgba(53, 214, 255, 0.10);
    box-shadow: 0 0 24px rgba(53, 214, 255, 0.22);
}

.template-card span {
    grid-area: icon;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #062329;
    background: linear-gradient(145deg, var(--color-green), var(--color-cyan));
    font-weight: 900;
    font-size: 0.95rem;
    box-shadow: 0 0 20px rgba(53, 214, 255, 0.26);
}

.template-card strong {
    grid-area: title;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    line-height: 1.2;
}

.template-card small {
    grid-area: text;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.4;
}

.template-viewer-panel {
    overflow: hidden;
    min-height: 820px;
    display: grid;
    grid-template-rows: auto 1fr;
}

.template-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(53, 214, 255, 0.18);
    background: rgba(4, 22, 29, 0.42);
}

.template-viewer-header h3 {
    font-size: clamp(1rem, 2vw, 1.35rem);
}

.template-viewer-header a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.62rem 0.95rem;
    border-radius: 999px;
    color: #062329;
    background: linear-gradient(145deg, var(--color-green), var(--color-cyan));
    font-weight: 800;
}

.template-viewer-panel iframe {
    width: 100%;
    height: 100%;
    min-height: 760px;
    border: 0;
    background: #0E3A45;
}

/* ==================================================================
   Compact Document Examples
================================================================== */

.document-preview-layout {
    grid-template-columns: minmax(360px, 0.42fr) minmax(0, 0.58fr);
    align-items: stretch;
}

.compact-document-selector {
    align-content: start;
}

.compact-document-group {
    gap: 0.8rem;
}

.compact-document-group h3 {
    margin-bottom: 0;
}

.compact-document-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.compact-document-card {
    min-height: 142px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
}

.compact-document-card span {
    width: 52px;
    height: 52px;
    border-radius: 17px;
    font-size: 0.88rem;
}

.compact-document-card strong {
    font-size: 0.96rem;
    line-height: 1.22;
}

.document-viewer-empty {
    display: none;
}

.document-viewer-panel,
.document-viewer-loaded {
    min-height: 820px;
}

.document-viewer-loaded iframe {
    min-height: 760px;
}

@media (max-width: 1100px) {
    .template-preview-layout,
    .document-preview-layout {
        grid-template-columns: 1fr;
    }

    .template-selector-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }

    .template-viewer-panel,
    .document-viewer-panel,
    .document-viewer-loaded {
        min-height: 680px;
    }

    .template-viewer-panel iframe,
    .document-viewer-loaded iframe {
        min-height: 620px;
    }
}

@media (max-width: 760px) {
    .template-selector-panel {
        grid-template-columns: 1fr;
    }

    .compact-document-row {
        grid-template-columns: 1fr;
    }

    .template-card,
    .compact-document-card {
        min-height: 108px;
    }

    .template-viewer-header,
    .document-viewer-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .template-viewer-panel,
    .document-viewer-panel,
    .document-viewer-loaded {
        min-height: 560px;
    }

    .template-viewer-panel iframe,
    .document-viewer-loaded iframe {
        min-height: 500px;
    }
}