/* =========================
   HOME
========================= */
/* =========================
   GENERAL
========================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    background: #ffffff;
    color: #1d1d1f;
}


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

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

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

    padding: 18px 40px;

    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* =========================
   DEAF CAN CODE TEXT
========================= */

.brand {
    color: #1d1d1f;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
}

/* =========================
   SOCIAL MEDIA ICONS
========================= */

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

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-links img {
    width: 20px;
    height: 20px;
    object-fit: contain;

    transition: opacity 0.2s ease;
}

.social-links a:hover img {
    opacity: 0.6;
}

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

@media (max-width: 768px) {

    .site-header {
        padding: 14px 20px;
    }

    .brand {
        font-size: 16px;
    }

    .social-links {
        gap: 12px;
    }

    .social-links img {
        width: 18px;
        height: 18px;
    }

}

/* =========================================
   HOMEPAGE — PROJECT BUTTONS
========================================= */

/* Button Container */

.project-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;
}

/* Clickable Buttons */

.project-buttons a.project-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    cursor: pointer;
}

/* Coming Soon — Blue Outline */

.project-buttons .project-button-coming {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    color: #0071e3;

    border: 1px solid #0071e3;

    cursor: default;
}

/* =========================================
   IPHONE
========================================= */

@media (max-width: 600px) {

    .project-buttons {
        gap: 8px;
    }

}


/* =========================================
   COMING SOON PROJECTS
========================================= */

.home-project-disabled {
    cursor: default;
}

.home-project-disabled .project-button {
    cursor: default;
}

/* =========================
   HOME HERO
========================= */
.home-hero {
    min-height: 100vh;

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

    text-align: center;

    background-color: #282A36 !important;
    color: #ffffff;
}

.home-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
}

.home-hero-image {
    display: block;

    width: 100%;
    max-width: 650px;
    height: auto;

    margin: 0 auto;
}

.home-hero-content p {
    margin: 20px 0 0;

    font-size: clamp(18px, 2.5vw, 28px);
    font-weight: 400;

    color: rgba(255, 255, 255, 0.5);
}
/* =========================
   SWIFTUI CODE COMMENT
========================= */

.home-hero-content p {
    margin: 20px 0 0;

    font-family: "SF Mono", SFMono-Regular, Menlo, monospace;
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: 400;

    color: #6C9E6C;
}

/* =========================
   PROJECT TILES
========================= */

.home-projects {
    display: grid;

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

    gap: 8px;

    background: #ffffff;

    padding: 8px;
}

.home-project {
    min-height: 450px;

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

    text-align: center;
    text-decoration: none;

    padding: 40px 30px;

    overflow: hidden;

    background: #f5f5f7;
    color: #1d1d1f;

    transition: opacity 0.2s ease;
}



/* =========================
   PROJECT TILE TEXT
========================= */

.home-project-content h2 {
    margin: 0;

    font-size: clamp(36px, 4vw, 56px);
    font-weight: 700;

    letter-spacing: -2px;
}

.home-project-content p {
    margin: 12px 0 0;

    font-size: clamp(16px, 2vw, 21px);

    color: #6e6e73;
}

/* =========================
   CORE JEZLLELAND BACKGROUND IMAGE
========================= */

.home-project-manga {
    background-image: url("images/CoreJezllelandManga.png");
    background-size: cover;
    background-position: center;
}

.home-project-anime {
    background-image: url("images/CoreJezllelandAnime.png");
    background-size: cover;
    background-position: center;
}

/* =========================
   CORE JEZLLELAND TEXT
========================= */

.home-project-manga .home-project-content,
.home-project-anime .home-project-content {
    color: #ffffff;
}

.home-project-manga .home-project-content p,
.home-project-anime .home-project-content p {
    color: rgba(255, 255, 255, 0.7);
}

/* =========================
   PROJECT PILL BUTTONS
========================= */

.project-button {
    display: inline-block;

    margin-top: 24px;
    padding: 12px 24px;

    border-radius: 999px;

    background: #0071e3;
    color: #ffffff;

    font-size: 16px;
    font-weight: 500;

    text-decoration: none;
}

/* =========================
   FULL-WIDTH PROJECT TILE
========================= */

.home-project-full {
    grid-column: 1 / -1;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 800px) {

    .home-hero {
        min-height: 65vh;
    }

    .home-project {
        min-height: 350px;
    }

}


@media (max-width: 500px) {

    .site-header {
        padding: 16px 20px;
    }

    .brand {
        font-size: 17px;
    }

    .header-right {
        gap: 15px;
    }

    .header-right a {
        font-size: 12px;
    }

    .home-project {
        min-height: 300px;
        padding: 40px 20px;
    }

    .home-project-content h2 {
        font-size: 32px;
    }

    .home-project-content p {
        font-size: 15px;
    }

}

/* =========================
   HOME HERO — IPHONE TEST
========================= */
/* =========================================
   HOME — IPHONE ONLY
========================================= */

@media only screen and (max-width: 600px) {

    /* Deaf Can Code Banner */
    .home-hero {
        min-height: 0 !important;
        height: auto !important;
        padding: 45px 20px !important;
    }

    /* Deaf Can Code PNG Logo */
    .home-hero-image {
        width: 100% !important;
        max-width: 280px !important;
        height: auto !important;
    }

    /* SwiftUI Green Comment */
    .home-hero-content p {
        font-size: 12px !important;
        line-height: 1.6;
        margin-top: 12px !important;
        padding: 0 10px;
    }

    /* Project Tiles — One Per Row */
    .home-projects {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .home-project {
        width: 100%;
        min-width: 0;
    }

}










/* =========================
SignDIct
========================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    background: #000;
    color: #fff;
}


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

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

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

    padding: 18px 40px;

    background: rgba(20, 20, 20, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

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

.brand {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

.header-right a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
}

.header-right a:hover {
    opacity: 0.7;
}


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

.home-hero {
    min-height: 620px;

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

    text-align: center;

    padding: 60px 24px 0;

    background: #f5f5f7;
    color: #1d1d1f;

    overflow: hidden;
}

/* Hero Title */

.home-hero h1 {
    margin: 0;

    font-size: 56px;
    font-weight: 600;
    letter-spacing: -2px;
    line-height: 1.1;
}

/* Hero Subtitle */

.home-hero p {
    margin: 12px 0 20px;

    font-size: 22px;
    line-height: 1.4;
}

/* Hero Image */

.home-hero img {
    display: block;

    width: 100%;
    max-width: 1000px;
    height: auto;

    margin: 35px auto 0;

    object-fit: contain;
}


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

.signdict-hero {
    min-height: 100vh;
    text-align: center;
    padding-top: 40px;
    overflow: hidden;
}

.signdict-hero-image {
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;
    margin: 0 auto;
}

.signdict-app-icon {
    display: block;
    width: 230px;
    height: 230px;
    object-fit: contain;

    margin: -300px auto 0;
    position: relative;
    z-index: 2;
}

.signdict-hero h1 {
    position: relative;
    z-index: 2;

    width: 100%;
    text-align: center;

    margin-top: 20px;

    font-size: 60px;
    font-weight: 700;
    letter-spacing: 8px;
}


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

@media (max-width: 600px) {

    .site-header {
        padding: 15px 20px;
    }

    .brand {
        font-size: 17px;
    }

    .header-right {
        gap: 15px;
    }

    .header-right a {
        font-size: 13px;
    }

    .signdict-hero h1 {
        font-size: 38px;
        letter-spacing: 5px;
    }

    .signdict-app-icon {
        width: 90px;
        height: 90px;
        margin-top: -220px;
    }
}










/* =========================
   SIGNDICT VIEW 2
   APPLE-STYLE INTRODUCTION
========================= */

.signdict-description {
    min-height: 10vh;

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

    text-align: center;

    padding: 100px 24px;
    background: #000;
}

/* Small gray label */

.description-label {
    color: #86868b;

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

    margin: 0 0 35px;
}

/* Large white headline */

.description-title {
    color: #fff;

    font-size: clamp(48px, 8vw, 110px);
    font-weight: 700;

    letter-spacing: -4px;
    line-height: 1.05;

    margin: 0;
}

/* Supporting text */

.description-subtitle {
    color: #86868b;

    font-size: clamp(18px, 2vw, 24px);
    font-weight: 500;

    line-height: 1.5;

    max-width: 850px;

    margin: 45px 0 0;
}


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

@media (max-width: 600px) {

    .signdict-description {
        padding: 80px 20px;
    }

    .description-label {
        font-size: 18px;
        margin-bottom: 25px;
    }

    .description-title {
        font-size: clamp(42px, 11vw, 65px);
        letter-spacing: -2px;
        line-height: 1.08;
    }

    .description-subtitle {
        font-size: 17px;
        margin-top: 30px;
    }
}



/* SignDict View 3 — Offline Learning */

.signdict-offline {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signdict-offline-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

.signdict-offline-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    padding: 60px 24px;
    text-align: center;
}

.offline-label {
    color: #86868b;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 30px;
}

.offline-title {
    color: #fff;
    font-size: clamp(48px, 8vw, 100px);
    font-weight: 700;
    letter-spacing: -4px;
    line-height: 1.05;
    margin: 0;
}

.offline-subtitle {
    color: #d1d1d6;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 500;
    line-height: 1.5;
    max-width: 750px;
    margin: 35px auto 0;
}

/* Mobile */

@media (max-width: 600px) {

    .signdict-offline-content {
        padding: 50px 20px;
    }

    .offline-label {
        font-size: 18px;
        margin-bottom: 25px;
    }

    .offline-title {
        font-size: clamp(42px, 11vw, 65px);
        letter-spacing: -2px;
        line-height: 1.08;
    }

    .offline-subtitle {
        font-size: 17px;
        margin-top: 25px;
    }

}



/* SignDict View 4 — Design */

.signdict-design {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Background image */

.signdict-design-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 120%;
    object-fit: cover;
    opacity: 0.8;
}

/* Centered content */

.signdict-design-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 60px 24px;
    text-align: center;
}

/* SignDict logo */

.signdict-design-logo {
    display: block;
    width: 180px;
    height: auto;
    object-fit: contain;
    margin: 0 auto 65px;
}

/* Small title */

.design-label {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 25px;
    opacity: 0.5;
}

/* Bold headline */

.design-title {
    color: #fff;
    font-size: clamp(48px, 8vw, 100px);
    font-weight: 700;
    letter-spacing: -4px;
    line-height: 1.05;
    margin: 0;
}

/* Mobile */

@media (max-width: 600px) {

    .signdict-design {
        height: 480px;
    }

    .signdict-design-content {
        padding: 40px 20px;
    }

    .signdict-design-logo {
        width: 120px;
        margin-bottom: 25px;
    }

    .design-label {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .design-title {
        font-size: clamp(42px, 11vw, 65px);
        letter-spacing: -2px;
        line-height: 1.08;
    }

}


/* =========================================
   APPLE STORE SIGNDICT SHOWCASE
   ========================================= */

.apple-showcase {
    background: #1d1d1f;
    color: #f5f5f7;
    padding: 55px 0 70px;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

/* =========================================
   SHOWCASE HEADING
   ========================================= */

.showcase-heading {
    max-width: 1200px;
    margin: 0 auto 38px;
    padding: 0 24px;
}

.showcase-heading h2 {
    font-size: 48px;
    font-weight: 600;
    letter-spacing: -1.5px;
    line-height: 1.08;
    margin: 0 0 12px;
    color: #f5f5f7;
}

.showcase-heading p {
    font-size: 17px;
    line-height: 1.4;
    font-weight: 400;
    color: #a1a1a6;
    margin: 0;
}

/* =========================================
   HORIZONTAL SLIDER
   ========================================= */

.showcase-track {
    display: flex;
    align-items: flex-start;
    gap: 32px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 0 max(24px, calc((100vw - 1200px) / 2)) 30px;

    scroll-behavior: smooth;
    scroll-snap-type: x proximity;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.showcase-track::-webkit-scrollbar {
    display: none;
}

/* =========================================
   PLATFORM GROUPS
   ========================================= */

.platform-group {
    flex: 0 0 auto;
    min-width: 0;
}

/* Platform Labels Above Cards */

/* Platform Labels — iOS Inset Grouped Style */

.platform-label {
    font-size: 17px;
    font-weight: 500;
    color: #98989d;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 16px;
    line-height: 1.2;
}

.showcase-group-cards {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* =========================================
   SHOWCASE CARDS
   ========================================= */

.showcase-card {
    flex: 0 0 650px;
    width: 650px;
    min-width: 0;
}
/* =========================================
   CARD IMAGES
   ========================================= */

.showcase-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1824 / 1170;
    object-fit: cover;
    object-position: center;
    border-radius: 28px;
}

.card-description {
    padding: 16px 10px 0;
}

.card-description p {
    color: #86868b;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

.card-description strong {
    color: #f5f5f7;
    font-weight: 600;
}

/* =========================================
   CENTERED SHOWCASE NAVIGATION
   ========================================= */

.showcase-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;

    width: 100%;
    margin: 30px auto 0;
    padding: 0;
}

.showcase-navigation button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border: none;
    border-radius: 50%;

    background: #333336;
    color: #d2d2d7;

    cursor: pointer;
    transition: background 0.2s ease;
}

.showcase-navigation button:hover {
    background: #48484b;
}

/* SF Symbol images */
.showcase-navigation img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

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

@media (max-width: 900px) {

    .apple-showcase {
        padding: 50px 0 60px;
    }

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

    .showcase-heading p {
        font-size: 16px;
    }

    .showcase-card {
        flex-basis: 360px;
        width: 360px;
    }

    .showcase-card img {
        border-radius: 16px;
    }

    .card-description h4 {
        font-size: 16px;
    }

    .card-description p {
        font-size: 13px;
    }
}

/* =========================================
   IPHONE
   ========================================= */

@media (max-width: 600px) {

    .apple-showcase {
        padding: 45px 0 55px;
    }

    .showcase-heading {
        margin-bottom: 30px;
        padding: 0 20px;
    }

    .showcase-heading h2 {
        font-size: 32px;
        letter-spacing: -1px;
    }

    .showcase-heading p {
        font-size: 15px;
    }

    .showcase-track {
        gap: 24px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .platform-label {
        font-size: 15px;
        margin-bottom: 14px;
    }

    .showcase-group-cards {
        gap: 16px;
    }

    .showcase-card {
        flex-basis: 300px;
        width: 300px;
    }

    .showcase-card img {
        border-radius: 14px;
    }

    .card-description {
        padding: 14px 4px 0;
    }

    .card-description h4 {
        font-size: 16px;
    }

    .card-description p {
        font-size: 13px;
        line-height: 1.4;
    }

    .showcase-navigation {
        margin-top: 18px;
        padding: 0 20px;
    }

    .showcase-navigation button {
        width: 36px;
        height: 36px;
        font-size: 25px;
    }
}






/* =========================================
   RESPONSIVE FOUNDATION
   ========================================= */

html {
    width: 100%;
    min-height: 100%;
    overflow-x: clip;
}

body {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: clip;
}

/* Safe-area support for iPhone and iPad */

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

/* Prevent media from overflowing */

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

/* Responsive typography and spacing */

.responsive-container {
    width: min(100% - 48px, 1440px);
    margin-inline: auto;
}


/* =========================================
   IPHONE DUO FOLD SHOWCASE
   ========================================= */

.duo-fold-showcase {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    align-items: center;
    gap: 24px;

    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px 40px;
}

/* Video */

.duo-fold-video {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.duo-fold-video video {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    transform: none;
}

/* Description Panel */

.duo-fold-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%;
    min-height: 0;

    padding: 28px;

    background: #f5f5f7;
    color: #1d1d1f;
    border-radius: 24px;
}

/* Description */

.duo-fold-description p {
    margin: 0;

    color: #1d1d1f;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.4px;
}

.duo-fold-description strong {
    font-weight: 600;
}

.duo-fold-description span {
    display: block;

    margin-top: 20px;

    color: #6e6e73;
    font-size: 16px;
    line-height: 1.4;
}

/* Slider */

.duo-fold-slider {
    width: 100%;
    margin-top: 28px;
}

.duo-fold-slider input {
    appearance: none;
    -webkit-appearance: none;

    display: block;
    width: 100%;
    height: 4px;

    background: #d2d2d7;
    border-radius: 100px;

    outline: none;
    cursor: grab;
}

/* Blue Slider Thumb */

.duo-fold-slider input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 44px;
    height: 34px;

    background-color: #0071e3;
    background-image: url("images/chevron.left.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;

    border-radius: 100px;
    border: none;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);

    cursor: grab;
}

.duo-fold-slider input::-moz-range-thumb {
    width: 44px;
    height: 34px;

    background-color: #0071e3;
    background-image: url("images/chevron.left.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;

    border-radius: 100px;
    border: none;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);

    cursor: grab;
}

/* Responsive */

@media (max-width: 800px) {

    .duo-fold-showcase {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .duo-fold-video {
        height: auto;
    }

    .duo-fold-video video {
        width: 100%;
        height: auto;
    }

    .duo-fold-panel {
        padding: 28px;
    }
}

@media (max-width: 500px) {

    .duo-fold-showcase {
        padding: 32px 16px;
    }

    .duo-fold-panel {
        padding: 24px;
        border-radius: 20px;
    }

    .duo-fold-description p {
        font-size: 19px;
    }
}

/* =========================================
   IPHONE DUO — MAC ONLY
========================================= */

@media (max-width: 1199px) {

    .duo-fold-showcase {
        display: none !important;
    }

}

/* SwiftUI Section */

.swiftui-section {
    width: 100%;
    padding: 0;
    background-color: #23242F;
}

.swiftui-section img {
    display: block;
    width: 100%;
    height: auto;
}

/* =========================================
   SWIFTUI SECTION — iPHONE & iPAD
========================================= */

@media (max-width: 1199px) {

    .swiftui-section {
        width: 100%;
        overflow: hidden;
    }

    .swiftui-section img {
        display: block;
        width: 150%;
        max-width: none;
        height: auto;

        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

}

/* iPhone — Larger SwiftUI Image */

@media (max-width: 600px) {

    .swiftui-section img {
        width: 200%;
    }

}


/* =========================================
   SIGNDICT COMPATIBILITY
   ========================================= */

.signdict-compatibility {
    width: 100%;
    background: #ffffff;
    color: #1d1d1f;
    text-align: center;
    padding: 100px 24px 100px;
    overflow: hidden;
}

/* Header */

.compatibility-header {
    max-width: 900px;
    margin: 0 auto;
}

.compatibility-label {
    margin: 0 0 18px;
    font-size: 17px;
    font-weight: 600;
    color: #6e6e73;
}

.compatibility-title {
    margin: 0;
    font-size: clamp(42px, 6vw, 76px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -2.5px;
}

.compatibility-subtitle {
    max-width: 700px;
    margin: 24px auto 0;
    font-size: 21px;
    line-height: 1.45;
    color: #6e6e73;
}

/* Device Image */

.compatibility-image {
    width: 100%;
    max-width: 1500px;
    margin: 60px auto 0;
}

.compatibility-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Responsive */

@media (max-width: 700px) {

    .signdict-compatibility {
        padding: 70px 20px 70px;
    }

    .compatibility-title {
        letter-spacing: -1.5px;
    }

    .compatibility-subtitle {
        font-size: 17px;
    }

    .compatibility-image {
        margin-top: 40px;
    }
}


/* SignDict View 6 — Sign Language Updates */
.signdict-updates {
    width: 100%;
    background: #000000;
    color: #ffffff;
    text-align: center;
    padding: 120px 24px;
}

.signdict-updates-content {
    max-width: 1000px;
    margin: 0 auto;
}

.updates-label {
    margin: 0 0 20px;
    font-size: 17px;
    font-weight: 600;
    color: #86868b;
}

.updates-title {
    margin: 0;
    font-size: clamp(42px, 6vw, 76px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -2.5px;
}

.updates-subtitle {
    max-width: 750px;
    margin: 28px auto 0;
    font-size: 21px;
    line-height: 1.45;
    color: #a1a1a6;
}

@media (max-width: 700px) {
    .signdict-updates {
        padding: 80px 20px;
    }

    .updates-title {
        letter-spacing: -1.5px;
    }

    .updates-subtitle {
        font-size: 17px;
    }
}


/* SignDict View 6 — Introducing SignDict */
.signdict-intro {
    width: 100%;
    background: #ffffff;
    color: #1d1d1f;
    text-align: center;
    padding: 120px 24px;
}

.signdict-intro-content {
    max-width: 1000px;
    margin: 0 auto;
}

.intro-label {
    margin: 0 0 20px;
    font-size: 17px;
    font-weight: 600;
    color: #6e6e73;
}

.intro-title {
    margin: 0;
    font-size: clamp(42px, 6vw, 76px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -2.5px;
}

.intro-subtitle {
    max-width: 750px;
    margin: 28px auto 0;
    font-size: 21px;
    line-height: 1.45;
    color: #6e6e73;
}

.intro-link {
    display: inline-block;
    margin-top: 28px;
    font-size: 21px;
    color: #06c;
    text-decoration: none;
}

.intro-link:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
    .signdict-intro {
        padding: 80px 20px;
    }

    .intro-title {
        letter-spacing: -1.5px;
    }

    .intro-subtitle {
        font-size: 17px;
    }

    .intro-link {
        font-size: 18px;
    }
}

/* Feedback Section */
.feedback-section {
    background: 
        linear-gradient(
            rgba(105, 95, 255, 0.12),
            rgba(105, 95, 255, 0.12)
        ),
        #000;

    color: #f5f5f7;
    min-height: 700px;
    padding: 120px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feedback-content {
    max-width: 700px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feedback-icon {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 32px;
}

.feedback-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin: 0 0 24px;
}

.feedback-description {
    max-width: 550px;
    color: #a1a1a6;
    font-size: 19px;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 600px) {
    .feedback-section {
        min-height: 600px;
        padding: 100px 24px;
    }

    .feedback-icon {
        width: 90px;
        height: 90px;
        margin-bottom: 28px;
    }

    .feedback-title {
        font-size: 40px;
    }

    .feedback-description {
        font-size: 17px;
    }
}


/* SignDict Inspiration Section */
.inspiration-section {
    position: relative;
    min-height: 750px;
    padding: 140px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    background:
        linear-gradient(
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.65)
        ),
   url("images/JapanBackground.jpeg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.inspiration-content {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}

.inspiration-quote {
    color: #f5f5f7;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.5px;
    margin: 0 0 32px;
}

.inspiration-profile {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
}

.inspiration-name {
    color: #f5f5f7;
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 6px;
}

.inspiration-role {
    color: #a1a1a6;
    font-size: 14px;
    margin: 0;
}

.inspiration-author {
    color: #f5f5f7;
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.inspiration-author span {
    display: block;
    color: #a1a1a6;
    font-size: 14px;
    font-weight: 400;
    margin-top: 8px;
}

@media (max-width: 700px) {
    .inspiration-section {
        min-height: 600px;
        padding: 100px 24px;
    }

    .inspiration-quote {
        font-size: 24px;
    }
}

/* SignDict Reviews Section */
.reviews-section {
    background: #f5f5f7;
    color: #1d1d1f;
    padding: 120px 24px;
    text-align: center;
}

.reviews-content {
    max-width: 1100px;
    margin: 0 auto;
}

.reviews-label {
    color: #86868b;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    margin: 0 0 24px;
}

.reviews-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin: 0 0 24px;
}

.reviews-description {
    color: #6e6e73;
    font-size: 19px;
    line-height: 1.5;
    max-width: 650px;
    margin: 0 auto 60px;
}

/* Review Card */
.reviews-carousel {
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.review-card {
    position: relative;
    width: 340px;
    max-width: 100%;
    border-radius: 28px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.review-card-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 28px;
}

/* Apple-Style Watch Button */
.review-watch-button {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

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

    padding: 12px 22px;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    color: #1d1d1f;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transition: background 0.2s ease, transform 0.2s ease;
}

.review-watch-button:hover {
    background: rgba(255, 255, 255, 0.96);
    transform: translateX(-50%) scale(1.04);
}

/* Circular Review Navigation */
.reviews-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
}

.review-nav-button {
    width: 48px;
    height: 48px;

    border: none;
    border-radius: 50%;

    background: #e8e8ed;

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

    cursor: pointer;

    transition: background 0.2s ease;
}

.review-nav-button img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.review-nav-button:hover {
    background: #d2d2d7;
}

/* Responsive */
@media (max-width: 600px) {
    .reviews-section {
        padding: 100px 24px;
    }

    .reviews-title {
        font-size: 40px;
    }

    .reviews-description {
        font-size: 17px;
        margin-bottom: 40px;
    }

    .review-card {
        width: 300px;
    }
}

/* SignDict Storage Section */
.storage-section {
    position: relative;
    isolation: isolate;

    /* Mountain Wallpaper with Premium Gradient */
    background-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.10) 40%,
            rgba(0, 0, 0, 0.45) 65%,
            rgba(0, 0, 0, 0.80) 85%,
            rgba(0, 0, 0, 1.0) 100%
        ),
        url("images/BlueSkyMountains.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: #f5f5f7;

    min-height: 850px;
    padding: 120px 24px;

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

    text-align: center;
}

/* Content */
.storage-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 900px;
    margin: 0 auto;
}

/* Xcode Icon */
.storage-icon {
    width: 150px;
    height: 150px;

    object-fit: contain;

    margin-bottom: 32px;
}

/* STORAGE Label */
.storage-label {
    font-size: 18px;
    font-weight: 700;

    letter-spacing: 4px;

    color: #f5f5f7;

    margin: 0 0 24px;
}

/* Main Headline */
.storage-title {
    font-size: 72px;
    font-weight: 700;

    line-height: 1.05;
    letter-spacing: -2.5px;

    color: #ffffff;

    margin: 0 0 28px;
}

/* Subtitle */
.storage-subtitle {
    font-size: 24px;
    font-weight: 400;

    line-height: 1.5;

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

    max-width: 700px;

    margin: 0;
}

/* Responsive */
@media (max-width: 600px) {

    .storage-section {
        min-height: 700px;
        padding: 100px 24px;
    }

    .storage-icon {
        width: 110px;
        height: 110px;

        margin-bottom: 28px;
    }

    .storage-label {
        font-size: 14px;
        letter-spacing: 3px;

        margin-bottom: 20px;
    }

    .storage-title {
        font-size: 46px;
        letter-spacing: -1.5px;

        margin-bottom: 24px;
    }

    .storage-subtitle {
        font-size: 18px;
    }

}

/* SignDict Storage Improvement Section */
.storage-improvement-section {
    background: #000;
    color: #f5f5f7;

    padding: 100px 24px 140px;

    display: flex;
    justify-content: center;
    text-align: center;
}

/* Content */
.storage-improvement-content {
    width: 100%;
    max-width: 900px;

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

/* Storage Comparison Image */
.storage-comparison-image {
    width: 100%;
    max-width: 650px;
    height: auto;

    display: block;

    margin: 0 auto 65px;
}

/* Headline */
.storage-improvement-title {
    font-size: 64px;
    font-weight: 700;

    line-height: 1.05;
    letter-spacing: -2px;

    color: #f5f5f7;

    margin: 0 0 28px;
}

/* Description */
.storage-improvement-description {
    max-width: 650px;

    font-size: 21px;
    font-weight: 400;

    line-height: 1.5;

    color: #a1a1a6;

    margin: 0 auto 20px;
}

/* Supporting text */
.storage-improvement-footnote {
    font-size: 17px;
    font-weight: 400;

    line-height: 1.5;

    color: #86868b;

    margin: 0;
}

/* Responsive */
@media (max-width: 600px) {

    .storage-improvement-section {
        padding: 80px 24px 100px;
    }

    .storage-comparison-image {
        max-width: 100%;
        margin-bottom: 45px;
    }

    .storage-improvement-title {
        font-size: 46px;
        letter-spacing: -1.5px;
        margin-bottom: 22px;
    }

    .storage-improvement-description {
        font-size: 18px;
    }

    .storage-improvement-footnote {
        font-size: 15px;
    }

}

/* SignDict Storage Optimization Section */
.artwork-redesign-section {
    background: #000;
    color: #f5f5f7;

    padding: 120px 24px 160px;

    display: flex;
    justify-content: center;
    text-align: center;
}

/* Content */
.artwork-redesign-content {
    width: 100%;
    max-width: 1000px;

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

/* Dictionary Artwork */
.artwork-redesign-image {
    width: 100%;
    max-width: 500px;
    height: auto;

    display: block;

    border-radius: 24px;

    margin: 0 auto 60px;
}

/* Headline */
.artwork-redesign-title {
    font-size: 64px;
    font-weight: 700;

    line-height: 1.05;
    letter-spacing: -2.5px;

    color: #f5f5f7;

    margin: 0 0 28px;
}

/* Description */
.artwork-redesign-description {
    max-width: 700px;

    font-size: 21px;
    font-weight: 400;

    line-height: 1.5;

    color: #a1a1a6;

    margin: 0 auto 24px;
}

/* Future Updates */
.artwork-redesign-footnote {
    max-width: 650px;

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

    line-height: 1.5;

    color: #86868b;

    margin: 0;
}

/* Responsive */
@media (max-width: 600px) {

    .artwork-redesign-section {
        padding: 80px 24px 100px;
    }

    .artwork-redesign-image {
        max-width: 100%;
        border-radius: 20px;

        margin-bottom: 40px;
    }

    .artwork-redesign-title {
        font-size: 42px;
        letter-spacing: -1.5px;

        margin-bottom: 22px;
    }

    .artwork-redesign-description {
        font-size: 18px;
        line-height: 1.55;

        margin-bottom: 20px;
    }

    .artwork-redesign-footnote {
        font-size: 15px;
        line-height: 1.5;
    }

}

/* SignDict Privacy Banner */
.privacy-banner {
    position: relative;
    overflow: hidden;
    min-height: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #f5f5f7;
}
/* Background */
.signdict-design-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* Content */
.signdict-design-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
    padding: 60px 24px;
}
/* SignDict Logo */
.signdict-design-logo {
    width: 85px;
    height: auto;
    object-fit: contain;
    margin-bottom: 24px;
}
/* Label */
.design-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #f5f5f7;
    margin: 0 0 16px;
}
/* Title */
.design-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -2px;
    color: #ffffff;
    margin: 0 0 20px;
}
/* Description */
.privacy-banner-description {
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    margin: 0 0 28px;
}
/* Pill Button */
.privacy-banner-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    background: #ffffff;
    color: #1d1d1f;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
/* Button Hover */
.privacy-banner-button:hover {
    background: #e8e8ed;
    transform: scale(1.03);
}
/* Chevron */
.privacy-banner-chevron {
    width: 16px;
    height: 16px;
    object-fit: contain;
}
/* Mobile */
@media (max-width: 600px) {
    .privacy-banner {
        min-height: 480px;
    }
    .signdict-design-content {
        padding: 50px 24px;
    }
    .signdict-design-logo {
        width: 70px;
        margin-bottom: 22px;
    }
    .design-label {
        font-size: 13px;
        margin-bottom: 14px;
    }
    .design-title {
        font-size: 42px;
        letter-spacing: -1.5px;
        margin-bottom: 18px;
    }
    .privacy-banner-description {
        font-size: 17px;
        margin-bottom: 24px;
    }
    .privacy-banner-button {
        font-size: 15px;
        padding: 11px 18px;
        gap: 8px;
    }
    .privacy-banner-chevron {
        width: 14px;
        height: 14px;
    }
}


/* ================================
   SIGNDICT PRIVACY
================================ */

.signdict-privacy {
    background-color: #000;
    color: #fff;
    padding: 120px 24px;
    text-align: center;
}

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

.signdict-privacy-title {
    color: #fff;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -2px;
    margin: 0 0 24px;
}

.signdict-privacy-description {
    max-width: 700px;
    margin: 0 auto;
    color: #a1a1a6;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

/* MOBILE */

@media (max-width: 600px) {
    .signdict-privacy {
        padding: 80px 24px;
    }

    .signdict-privacy-title {
        font-size: 42px;
        letter-spacing: -1.5px;
        margin-bottom: 20px;
    }

    .signdict-privacy-description {
        font-size: 18px;
    }
}
.signdict-privacy-image {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 0 auto 48px;
    border-radius: 24px;
}


/* ================================
   SIGNDICT ANDROID BANNER
================================ */

.signdict-android {
    background-color: #1C1C1E;
    color: #fff;
    padding: 120px 24px;
    text-align: center;
}

.signdict-android-content {
    max-width: 900px;
    margin: 0 auto;
}

/* Android Icon */
.signdict-android-icon {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin: 0 auto 32px;
}

/* Title */
.signdict-android-title {
    color: #fff;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -2px;
    margin: 0 0 24px;
}

/* Subtitle */
.signdict-android-description {
    max-width: 700px;
    margin: 0 auto;
    color: #fff;
    opacity: 0.8;
    font-size: 22px;
    line-height: 1.5;
}

/* MOBILE */

@media (max-width: 600px) {
    .signdict-android {
        padding: 80px 24px;
    }

    .signdict-android-icon {
        width: 96px;
        height: 96px;
        margin-bottom: 24px;
    }

    .signdict-android-title {
        font-size: 42px;
        letter-spacing: -1.5px;
        margin-bottom: 20px;
    }

    .signdict-android-description {
        font-size: 18px;
    }
}



/* =========================================
   SIGNDICT — APP STORE TOP CHARTS
========================================= */

.signdict-topcharts {
    background-color: #ffffff;
    color: #1d1d1f;

    width: 100%;
    padding: 140px 24px 150px;

    box-sizing: border-box;
}

/* Main Content */

.signdict-topcharts-content {
    max-width: 1100px;
    margin: 0 auto;
}

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

.signdict-topcharts-header {
    max-width: 850px;
    margin: 0 auto 75px;
    text-align: center;
}

/* Small Label */

.signdict-topcharts-label {
    display: block;

    color: #0071e3;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.5px;

    margin-bottom: 24px;
}

/* Main Title */

.signdict-topcharts-title {
    color: #1d1d1f;

    font-size: clamp(42px, 5.5vw, 72px);
    font-weight: 700;
    letter-spacing: -2.5px;
    line-height: 1.08;

    margin: 0 0 30px;
}

/* Subtitle */

.signdict-topcharts-subtitle {
    color: #6e6e73;

    font-size: 21px;
    line-height: 1.65;

    max-width: 760px;
    margin: 0 auto;
}

/* =========================================
   WORLD FLAGS
========================================= */

.signdict-topcharts-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    gap: 18px 22px;

    max-width: 1000px;
    margin: 0 auto;
}

/* Default Flags */

.topcharts-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    font-size: 42px;
    line-height: 1.3;

    opacity: 0.2;

    transition: opacity 0.25s ease;
}

/* Featured Flags */

.topcharts-flag.featured {
    opacity: 1;
}

/* =========================================
   LEGEND
========================================= */

.signdict-topcharts-legend {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin: 55px auto 0;
    max-width: 700px;

    text-align: center;
}

.topcharts-legend-dot {
    width: 9px;
    height: 9px;

    background-color: #0071e3;
    border-radius: 50%;

    flex-shrink: 0;
}

.signdict-topcharts-legend span:last-child {
    color: #6e6e73;
    font-size: 14px;
    line-height: 1.6;
}

/* =========================================
   TOPLIFY CREDIT
========================================= */

.signdict-topcharts-credit {
    color: #86868b;

    font-size: 13px;
    line-height: 1.6;

    text-align: center;

    margin: 24px auto 0;
}

/* =========================================
   IPAD
========================================= */

@media (max-width: 900px) {

    .signdict-topcharts {
        padding: 110px 24px 120px;
    }

    .signdict-topcharts-header {
        margin-bottom: 60px;
    }

    .signdict-topcharts-flags {
        gap: 16px 18px;
    }

    .topcharts-flag {
        font-size: 38px;
    }

}

/* =========================================
   IPHONE
========================================= */

@media (max-width: 600px) {

    .signdict-topcharts {
        padding: 90px 20px 100px;
    }

    .signdict-topcharts-header {
        margin-bottom: 45px;
    }

    .signdict-topcharts-label {
        font-size: 12px;
        letter-spacing: 1.2px;
        margin-bottom: 20px;
    }

    .signdict-topcharts-title {
        font-size: 40px;
        letter-spacing: -1.5px;
        margin-bottom: 24px;
    }

    .signdict-topcharts-subtitle {
        font-size: 17px;
    }

    .signdict-topcharts-flags {
        gap: 12px 14px;
    }

    .topcharts-flag {
        font-size: 32px;
    }

    .signdict-topcharts-legend {
        margin-top: 45px;
    }

    .signdict-topcharts-legend span:last-child {
        font-size: 12px;
    }

    .signdict-topcharts-credit {
        font-size: 12px;
        margin-top: 20px;
    }

}


/* ================================
   SIGNDICT TEAM
================================ */

.signdict-team {
    background-color: #fff;
    color: #1d1d1f;
    padding: 100px 24px 120px;
}

.signdict-team-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* Heading */

.signdict-team-title {
    color: #1d1d1f;
    font-size: 48px;
    font-weight: 600;
    letter-spacing: -1.5px;
    line-height: 1.1;
    text-align: center;

    margin: 0 0 20px;
}

/* Subtitle */

.signdict-team-subtitle {
    max-width: 750px;
    color: #6e6e73;
    font-size: 20px;
    line-height: 1.5;
    text-align: center;

    margin: 0 auto 60px;
}

/* Team Grid - 3 Across */

.signdict-team-track {
    display: grid;

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

    column-gap: 24px;
    row-gap: 60px;

    width: 100%;
}

/* Profile Cards */

.signdict-team-card {
    min-width: 0;
}

/* Profile Images */

.signdict-team-image {
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    object-fit: cover;
    border-radius: 4px;

    margin-bottom: 20px;
}

/* Profile Names */

.signdict-team-card h3 {
    color: #0071e3;
    font-size: 20px;
    font-weight: 600;

    margin: 0 0 8px;
}

/* Profile Roles */

.signdict-team-card p {
    color: #1d1d1f;
    font-size: 16px;
    line-height: 1.4;

    margin: 0;
}

/* TABLET */

@media (max-width: 900px) {

    .signdict-team-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 45px;
    }

}

/* IPHONE */

@media (max-width: 600px) {

    .signdict-team {
        padding: 64px 20px 80px;
    }

    .signdict-team-title {
        font-size: 36px;
    }

    .signdict-team-subtitle {
        font-size: 18px;
        margin-bottom: 36px;
    }

    .signdict-team-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 16px;
        row-gap: 36px;
    }

    .signdict-team-card h3 {
        font-size: 16px;
    }

    .signdict-team-card p {
        font-size: 14px;
    }

}















/* SignDict View 1 — Introduction */
.sign-languages-intro {
    width: 100%;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
    color: #f5f5f7;
    padding: 120px 24px;
    box-sizing: border-box;
}

.sign-languages-intro-content {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

.sign-languages-intro-label {
    margin: 0 0 24px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 4px;
    color: #a1a1a6;
}

.sign-languages-intro-title {
    margin: 0;
    font-size: clamp(44px, 7vw, 88px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -3px;
}

.sign-languages-intro-subtitle {
    max-width: 720px;
    margin: 32px auto 0;
    font-size: 21px;
    line-height: 1.5;
    color: #a1a1a6;
}

.sign-languages-intro-link {
    display: inline-block;
    margin-top: 28px;
    font-size: 21px;
    color: #2997ff;
    text-decoration: none;
}

.sign-languages-intro-link:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
    .sign-languages-intro {
        min-height: auto;
        padding: 100px 24px;
    }

    .sign-languages-intro-title {
        letter-spacing: -1.5px;
    }

    .sign-languages-intro-subtitle {
        font-size: 17px;
    }
}


/* Japanese Sign Language Section */

.jsl-section {
    background: #000;
    color: #f5f5f7;
    padding: 140px 8%;
}

.jsl-section-content {
    max-width: 1300px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

/* Text */

.jsl-section-text {
    flex: 0 0 400px;
    max-width: 400px;
}

.jsl-section-label {
    color: #f04c5c;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 24px;
}

.jsl-section-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -1.5px;
    margin: 0 0 28px;
}

.jsl-section-description {
    color: #a1a1a6;
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 20px;
}

/* Image */

.jsl-section-image-container {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.jsl-section-image {
    display: block;
    width: 100%;
    max-width: 850px;
    height: auto;
    object-fit: contain;
}

/* Responsive */

@media (max-width: 900px) {

    .jsl-section {
        padding: 100px 24px;
    }

    .jsl-section-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 50px;
    }

    .jsl-section-text {
        flex: none;
        max-width: 600px;
        width: 100%;
    }

    .jsl-section-title {
        font-size: 40px;
    }

    .jsl-section-image-container {
        width: 100%;
    }

}

.jsl-section-label {
    color: #a1a1a6 !important;
}










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

.privacy-hero {
    min-height: 550px;
    padding: 80px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #000000;
    color: #f5f5f7;
    overflow: hidden;
}

/* Privacy Icon */
.privacy-hero-icon {
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin-bottom: 28px;
}

/* Label */
.privacy-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #a1a1a6;
    margin: 0 0 20px;
}

/* Title */
.privacy-hero h1 {
    font-size: 76px;
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -3px;
    color: #ffffff;
    margin: 0 0 24px;
}

/* Subtitle */
.privacy-hero-subtitle {
    max-width: 650px;
    font-size: 22px;
    line-height: 1.5;
    color: #a1a1a6;
    opacity: 0.7;
    margin: 0;
}


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

@media (max-width: 600px) {

    .privacy-hero {
        min-height: 480px;
        padding: 60px 24px;
    }

    .privacy-hero-icon {
        width: 72px;
        height: 72px;
        margin-bottom: 24px;
    }

    .privacy-label {
        font-size: 12px;
        margin-bottom: 16px;
    }

    .privacy-hero h1 {
        font-size: 48px;
        letter-spacing: -1.5px;
        margin-bottom: 20px;
    }

    .privacy-hero-description {
        font-size: 18px;
    }
}

/* Privacy View 2 — Apple-style FAQ */

.privacy-principles {
    background-color: #000;
    color: #fff;
    padding: 100px 24px 120px;
}

.privacy-principles-content {
    max-width: 1000px;
    margin: 0 auto;
}

/* Section Heading */

.privacy-principles-title {
    color: #fff;
    font-size: 48px;
    font-weight: 600;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin: 0 0 36px;
}

/* Expand All */

.privacy-expand-all {
    display: block;
    margin: 0 0 28px auto;
    padding: 0;
    border: none;
    background: transparent;
    color: #2997ff;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}

/* Privacy Topics */

.privacy-item {
    border-bottom: 1px solid #333;
}

.privacy-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    cursor: pointer;
    list-style: none;
}

.privacy-item summary::-webkit-details-marker {
    display: none;
}

/* Topic Title */

.privacy-item h2 {
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.3;
}

/* Chevron */

.privacy-chevron {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.privacy-item[open] .privacy-chevron {
    content: url("images/chevron.up.png");
}

/* Expanded Description */

.privacy-item-description {
    max-width: 800px;
    margin: 0;
    padding: 0 48px 28px 0;
    color: #fff;
    opacity: 0.5;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.2px;
}

/* Responsive */

@media (max-width: 700px) {
    .privacy-principles {
        padding: 64px 24px 80px;
    }

    .privacy-principles-content {
        max-width: 100%;
    }

    .privacy-principles-title {
        font-size: 36px;
    }

    .privacy-item h2 {
        font-size: 20px;
    }

    .privacy-item summary {
        padding: 20px 0;
    }

    .privacy-item-description {
        font-size: 16px;
        padding-right: 24px;
    }
}

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

.terms-hero {
    min-height: 550px;
    padding: 80px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #000000;
    color: #f5f5f7;
    overflow: hidden;
}

/* Terms Icon */
.terms-hero-icon {
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin-bottom: 28px;
}

/* Label */
.terms-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #a1a1a6;
    margin: 0 0 20px;
}

/* Title */
.terms-hero h1 {
    font-size: 76px;
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -3px;
    color: #ffffff;
    margin: 0 0 24px;
}

/* Subtitle */
.terms-hero-subtitle {
    max-width: 650px;
    font-size: 22px;
    line-height: 1.5;
    color: #a1a1a6;
    opacity: 0.7;
    margin: 0;
}


/* ================================
   TERMS VIEW 2
================================ */

.terms-principles {
    background-color: #000;
    color: #fff;
    padding: 100px 24px 120px;
}

.terms-principles-content {
    max-width: 1000px;
    margin: 0 auto;
}

/* Section Heading */

.terms-principles-title {
    color: #fff;
    font-size: 48px;
    font-weight: 600;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin: 0 0 36px;
}

/* Expand All */

.terms-expand-all {
    display: block;
    margin: 0 0 28px auto;
    padding: 0;
    border: none;
    background: transparent;
    color: #2997ff;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}


/* ================================
   MAIN TERMS SECTIONS
================================ */

.terms-section {
    margin: 0 0 48px;
}

/* Large Main Title */

.terms-section-title {
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.8px;
    line-height: 1.25;
    margin: 0 0 12px;
}


/* ================================
   INDIVIDUAL TERMS TOPICS
================================ */

.terms-item {
    border-bottom: 1px solid #333;
}

.terms-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    cursor: pointer;
    list-style: none;
}

.terms-item summary::-webkit-details-marker {
    display: none;
}

/* Topic Title */

.terms-item h3 {
    margin: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.3;
}

/* Chevron */

.terms-chevron {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.terms-item[open] .terms-chevron {
    content: url("images/chevron.up.png");
}

/* Expanded Description */

.terms-item-description {
    max-width: 800px;
    margin: 0;
    padding: 0 48px 28px 0;
    color: #fff;
    opacity: 0.5;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.2px;
}


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

@media (max-width: 600px) {

    .terms-hero {
        min-height: 480px;
        padding: 60px 24px;
    }

    .terms-hero-icon {
        width: 72px;
        height: 72px;
        margin-bottom: 24px;
    }

    .terms-label {
        font-size: 12px;
        margin-bottom: 16px;
    }

    .terms-hero h1 {
        font-size: 48px;
        letter-spacing: -1.5px;
        margin-bottom: 20px;
    }

    .terms-hero-subtitle {
        font-size: 18px;
    }

    .terms-principles {
        padding: 64px 24px 80px;
    }

    .terms-principles-content {
        max-width: 100%;
    }

    .terms-principles-title {
        font-size: 36px;
    }

    .terms-section-title {
        font-size: 24px;
    }

    .terms-item h3 {
        font-size: 20px;
    }

    .terms-item summary {
        padding: 20px 0;
    }

    .terms-item-description {
        font-size: 16px;
        padding-right: 24px;
    }

}


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

/* White Footer */
.site-footer.footer-white {
    background: #ffffff;
    color: #6e6e73;
}

/* Black Footer */
.site-footer.footer-black {
    background: #000000;
    color: #a1a1a6;
}

/* Shared Footer Style */
.site-footer {
    padding: 30px 40px;
    font-size: 14px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    border-top: 1px solid rgba(128, 128, 128, 0.3);
    padding-top: 25px;
}

.footer-copyright,
.footer-country {
    margin: 0;
    white-space: nowrap;
}

/* Footer Links */
.footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-links a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-links a:hover {
    opacity: 0.7;
}

.footer-divider {
    opacity: 0.5;
}

/* Responsive */
@media (max-width: 900px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 500px) {
    .site-footer {
        padding: 25px 20px;
    }

    .footer-links {
        font-size: 13px;
    }
}


/* =========================================
   Core Jezlleland Manga
========================================= */

/* View 1: Manga Hero */
.manga-hero {
    position: relative;

    min-height: 520px;

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

    background-color: #000;
    background-image: url("images/StarBackground.png");
    background-repeat: repeat;
    background-size: 800px auto;
    background-position: center top;

    overflow: hidden;
}

/* Subtle Dark Overlay */
.manga-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.25);

    pointer-events: none;
}

/* Hero Content */
.manga-hero-content {
    position: relative;
    z-index: 1;

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

    width: 100%;
    padding: 80px 20px;

    text-align: center;
    color: white;
}

/* Main Title */
.manga-hero-content h1 {
    margin: 0;

    font-size: clamp(48px, 7vw, 80px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

/* Subtitle */
.manga-subtitle {
    margin: 16px 0 0;

    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.3;

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

/* Logo Layout */
.manga-print-logos {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 80px;
    margin-top: 100px;
}

/* Core Jezlleland Logo */
.cj-logo {
    width: 180px;
    height: auto;

    object-fit: contain;
}

/* PrintNinja Logo */
.printninja-logo {
    width: 260px;
    height: auto;

    object-fit: contain;
}


/* =========================================
   iPhone / Mobile
========================================= */

@media (max-width: 768px) {

    .manga-hero {
        min-height: 420px;
    }

    .manga-hero-content {
        padding: 60px 20px;
    }

    .manga-hero-content h1 {
        font-size: clamp(38px, 10vw, 56px);
    }

    .manga-subtitle {
        font-size: 18px;
    }

    .manga-print-logos {
        gap: 30px;
        margin-top: 70px;
    }

    .cj-logo {
        width: 110px;
    }

    .printninja-logo {
        width: 150px;
    }

}

/* =========================================
   View 2: Digital Manga Books
========================================= */

.manga-digital-section {
    display: grid;
    grid-template-columns: 55% 45%;

    min-height: 750px;
    margin: 0;
    padding: 0;

    background: #000;
    color: #f5f5f7;

    overflow: hidden;
}

/* Left: Digital Manga Image */
.manga-digital-image {
    display: flex;
    justify-content: center;
    align-items: stretch;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background-image: url("images/StarBackground.png");
    background-repeat: repeat;
    background-size: 800px auto;
    background-position: center;
}

.manga-digital-image img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;
    object-position: center;
}


/* Right: Digital Manga Information */
.manga-digital-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 70px 55px;

    text-align: center;
    background: #000;
}


/* DIGITAL Label */
.manga-eyebrow {
    margin-bottom: 12px;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;

    color: #86868b;
}


/* Main Heading */
.manga-digital-content h2 {
    margin: 0;

    font-size: clamp(40px, 4vw, 56px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.1;
}


/* Tagline */
.manga-tagline {
    margin: 15px 0 30px;

    font-size: 22px;
    font-weight: 400;
    line-height: 1.4;

    color: #f5f5f7;
}


/* Description */
.manga-digital-description {
    max-width: 480px;

    margin: 0 0 25px;

    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;

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


/* Device Compatibility Note */
.manga-digital-note {
    max-width: 480px;

    margin: 0 0 35px;

    font-size: 15px;
    line-height: 1.6;

    color: #86868b;
}


/* Store Buttons */
.manga-store-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 16px;
    width: 100%;
}


/* Apple-Style Rounded Buttons */
.manga-store-button {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    max-width: 300px;
    min-height: 52px;

    padding: 14px 24px;

    border-radius: 100px;

    background: #f5f5f7;
    color: #1d1d1f;

    font-size: 16px;
    font-weight: 500;

    text-decoration: none;

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


/* Button Hover */
.manga-store-button:hover {
    background: #d2d2d7;
    transform: scale(1.02);
}


/* =========================================
   iPhone / Mobile
========================================= */

@media (max-width: 768px) {

    .manga-digital-section {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    /* Image */
    .manga-digital-image {
        height: 550px;
    }

    .manga-digital-image img {
        width: 100%;
        height: 100%;

        object-fit: contain;
    }

    /* Information */
    .manga-digital-content {
        padding: 55px 25px 70px;
    }

    .manga-eyebrow {
        font-size: 13px;
    }

    .manga-digital-content h2 {
        font-size: 40px;
    }

    .manga-tagline {
        font-size: 19px;
    }

    .manga-digital-description {
        font-size: 17px;
    }

    .manga-digital-note {
        font-size: 14px;
    }

}

/* =========================================
   View 3: Physical Manga Books
========================================= */

.manga-physical-section {
    background: #fff;
    color: #1d1d1f;
    padding: 55px 24px 75px;
    text-align: center;
}

.manga-physical-content {
    max-width: 1250px;
    width: 100%;
    margin: 0 auto;

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

/* PHYSICAL Label */
.manga-physical-content .manga-eyebrow {
    margin-bottom: 12px;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;

    color: #86868b;
}

/* Main Heading */
.manga-physical-content h2 {
    margin: 0;

    font-size: clamp(48px, 6vw, 72px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;

    color: #1d1d1f;
}

/* Subtitle */
.manga-physical-subtitle {
    margin: 12px 0 0;

    font-size: clamp(21px, 2.5vw, 28px);
    font-weight: 400;
    letter-spacing: -0.02em;

    color: #6e6e73;
}

/* =========================================
   Volume Carousel
========================================= */

.manga-volume-carousel {
    width: 100%;
    margin-top: 45px;
    overflow: hidden;
}

.manga-volume-track {
    display: flex;
    gap: 20px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}

.manga-volume-track::-webkit-scrollbar {
    display: none;
}

/* Volume Cards */
.manga-volume-card {
    flex: 0 0 calc((100% - 40px) / 3);
    min-width: 0;

    text-align: center;
    scroll-snap-align: start;
}

/* Book Images */
.manga-volume-image-container {
    position: relative;

    width: 100%;
    aspect-ratio: 3 / 4;

    overflow: hidden;
    border-radius: 24px;

    background: #f5f5f7;
}

.manga-volume-image-container img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: 24px;
}

/* Black Glass Status Pills */
.volume-status {
    position: absolute;

    top: 16px;
    left: 50%;
    transform: translateX(-50%);

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

    padding: 10px 20px;

    border-radius: 999px;

    background: rgba(0, 0, 0, 0.82);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    color: #fff;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;

    white-space: nowrap;
    text-decoration: none;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Sold Out and Coming Soon */
.sold-out,
.coming-soon {
    color: #fff;
    opacity: 0.5;
}

/* Order Now */
.order-now {
    color: #fff;
    opacity: 1;
    cursor: pointer;
}

/* Volume Titles */
.manga-volume-title {
    margin: 18px 0 0;

    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.4px;

    color: #1d1d1f;
}

/* Clickable Volume Card */
.volume-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* =========================================
   Carousel Navigation
========================================= */

.manga-volume-navigation {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 12px;
    margin-top: 25px;
}

.manga-volume-nav-button {
    width: 44px;
    height: 44px;

    border: none;
    border-radius: 50%;

    background: #e8e8ed;

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

    cursor: pointer;

    transition: background 0.2s ease;
}

.manga-volume-nav-button:hover {
    background: #d2d2d7;
}

.manga-volume-nav-button img {
    width: 18px;
    height: 18px;

    object-fit: contain;
}

/* =========================================
   Responsive: iPhone
========================================= */

@media (max-width: 768px) {

    .manga-physical-section {
        padding: 45px 20px 60px;
    }

    .manga-physical-content h2 {
        font-size: clamp(38px, 9vw, 52px);
    }

    .manga-physical-subtitle {
        font-size: 21px;
    }

    .manga-volume-carousel {
        margin-top: 25px;
    }

    .manga-volume-card {
        flex: 0 0 82%;
    }

    .manga-volume-image-container {
        border-radius: 20px;
    }

    .manga-volume-image-container img {
        border-radius: 20px;
    }

}


/* =========================================
   View 4: Manga Artwork Evolution
========================================= */

.manga-development-section {
    background: #1d1d1f;
    color: #f5f5f7;

    padding: 120px 40px 110px;
}

.manga-development-content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* =========================================
   Section Introduction
========================================= */

.manga-development-header {
    max-width: 850px;
    margin: 0 auto 85px;

    text-align: center;
}

.manga-development-header-label {
    color: #86868b;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;

    margin: 0 0 22px;
}

.manga-development-header h2 {
    color: #f5f5f7;

    font-size: clamp(44px, 6vw, 72px);
    font-weight: 700;

    letter-spacing: -0.045em;
    line-height: 1.05;

    margin: 0 0 24px;
}

.manga-development-header-description {
    max-width: 650px;
    margin: 0 auto;

    color: #a1a1a6;

    font-size: 19px;
    line-height: 1.6;
}

/* =========================================
   Two-Column Layout
========================================= */

.manga-development-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

/* Development Cards */
.manga-development-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Eyebrow */
.manga-development-eyebrow {
    color: #86868b;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;

    margin: 0 0 28px;
}

/* Headings */
.manga-development-card h2 {
    color: #f5f5f7;

    font-size: clamp(42px, 5vw, 60px);
    font-weight: 700;

    letter-spacing: -0.045em;
    line-height: 1.05;

    margin: 0 0 28px;
}

.manga-development-card h2 span {
    display: block;
    color: #a1a1a6;
}

/* Description */
.manga-development-description {
    max-width: 490px;

    color: #d2d2d7;

    font-size: 19px;
    font-weight: 400;
    line-height: 1.65;

    margin: 0;
}

/* =========================================
   Volume 3: Artwork Breakdown
========================================= */

.manga-artwork-breakdown {
    width: 100%;
    max-width: 450px;

    margin-top: 40px;
}

.manga-artwork-label {
    display: flex;
    justify-content: space-between;
    align-items: center;

    color: #a1a1a6;

    font-size: 14px;

    margin-bottom: 12px;
}

.manga-artwork-label strong {
    color: #f5f5f7;

    font-size: 16px;
    font-weight: 600;
}

/* Artwork Bars */
.manga-artwork-bar {
    width: 100%;
    height: 7px;

    background: #424245;
    border-radius: 999px;

    overflow: hidden;
    margin-bottom: 24px;
}

.manga-artwork-original {
    width: 20%;
    height: 100%;

    background: #86868b;
    border-radius: 999px;
}

.manga-artwork-redesigned {
    width: 80%;
    height: 100%;

    background: #f5f5f7;
    border-radius: 999px;
}

/* =========================================
   Volume 4: Complete Redesign
========================================= */

.manga-artwork-feature {
    display: flex;
    align-items: center;
    gap: 16px;

    width: 100%;
    max-width: 450px;

    margin-top: 40px;
    padding: 20px 22px;

    border: 1px solid #424245;
    border-radius: 20px;
}

.manga-artwork-feature-icon {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    background: #424245;
    border-radius: 50%;

    color: #f5f5f7;
    font-size: 22px;
}

.manga-artwork-feature div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.manga-artwork-feature strong {
    color: #f5f5f7;

    font-size: 15px;
    font-weight: 600;
}

.manga-artwork-feature div span {
    color: #a1a1a6;

    font-size: 13px;
    line-height: 1.5;
}

/* Bottom Notes */
.manga-development-note {
    color: #86868b;

    font-size: 14px;
    line-height: 1.5;

    margin: 28px 0 0;
}

/* Vertical Divider */
.manga-development-card + .manga-development-card {
    border-left: 1px solid #424245;
    padding-left: 80px;
}

/* =========================================
   Responsive: iPhone and iPad
========================================= */

@media (max-width: 768px) {

    .manga-development-section {
        padding: 85px 24px 80px;
    }

    .manga-development-header {
        margin-bottom: 60px;
    }

    .manga-development-header h2 {
        font-size: 43px;
    }

    .manga-development-header-description {
        font-size: 17px;
    }

    .manga-development-grid {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .manga-development-card h2 {
        font-size: 44px;
    }

    .manga-development-description {
        font-size: 17px;
    }

    .manga-development-card + .manga-development-card {
        border-left: none;
        border-top: 1px solid #424245;

        padding-left: 0;
        padding-top: 60px;
    }

}






/* =========================================
   Core Jezlleland Anime 
========================================= */

.anime-banner {
    position: relative;

    width: 100%;
    height: auto;

    background: #000;
    overflow: hidden;
}

/* Banner Artwork */

.anime-banner-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;
}

/* iPhone */

@media (max-width: 600px) {

    .anime-banner {
        width: 100%;
    }

    .anime-banner-image {
        width: 100%;
        height: auto;
    }

}

/* =========================================
   VIEW 1 — OFFICIAL ANNOUNCEMENT
========================================= */

.anime-announcement {
    background-color: #000;
    color: #fff;

    padding: 140px 24px 160px;

    width: 100%;
    box-sizing: border-box;
}

/* Content */

.anime-announcement-content {
    max-width: 980px;
    margin: 0 auto;

    text-align: center;
}

/* Small Label */

.anime-announcement-label {
    display: block;

    color: #2997ff;

    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.5px;

    margin-bottom: 24px;
}

/* Main Heading */

.anime-announcement-title {
    color: #fff;

    font-size: clamp(44px, 6vw, 76px);
    font-weight: 700;

    letter-spacing: -2.5px;
    line-height: 1.08;

    margin: 0 0 48px;
}

/* Description */

.anime-announcement-description {
    max-width: 760px;
    margin: 0 auto;
}

.anime-announcement-description p {
    color: #a1a1a6;

    font-size: 21px;
    font-weight: 400;

    line-height: 1.65;

    margin: 0 0 24px;
}

/* Founder */

.anime-announcement-founder {
    display: flex;
    flex-direction: column;

    align-items: center;

    margin-top: 64px;
}

.anime-announcement-name {
    color: #fff;

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

    margin-bottom: 6px;
}

.anime-announcement-role {
    color: #86868b;

    font-size: 15px;
    font-weight: 400;
}

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

@media (max-width: 900px) {

    .anime-announcement {
        padding: 110px 24px 130px;
    }

    .anime-announcement-description p {
        font-size: 19px;
    }

}

/* =========================================
   IPHONE
========================================= */

@media (max-width: 600px) {

    .anime-announcement {
        padding: 90px 22px 110px;
    }

    .anime-announcement-label {
        font-size: 12px;
        letter-spacing: 1.2px;
        margin-bottom: 20px;
    }

    .anime-announcement-title {
        font-size: 42px;
        letter-spacing: -1.5px;
        margin-bottom: 36px;
    }

    .anime-announcement-description p {
        font-size: 17px;
        line-height: 1.65;
        margin-bottom: 20px;
    }

    .anime-announcement-founder {
        margin-top: 48px;
    }

    .anime-announcement-name {
        font-size: 17px;
    }

    .anime-announcement-role {
        font-size: 13px;
    }

}


/* =========================================
   VIEW 2 — REIMAGINED FOR ANIMATION
========================================= */

.anime-evolution {
    background-color: #1d1d1f;
    color: #fff;

    width: 100%;
    padding: 140px 24px 150px;

    box-sizing: border-box;
}

/* Main Content */

.anime-evolution-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */

.anime-evolution-header {
    max-width: 900px;
    margin: 0 auto 80px;
    text-align: center;
}

/* Small Label */

.anime-evolution-label {
    display: block;

    color: #2997ff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.5px;

    margin-bottom: 24px;
}

/* Main Title */

.anime-evolution-title {
    color: #fff;

    font-size: clamp(42px, 5.5vw, 72px);
    font-weight: 700;
    letter-spacing: -2.5px;
    line-height: 1.08;

    margin: 0 0 32px;
}

/* Subtitle */

.anime-evolution-subtitle {
    color: #a1a1a6;

    font-size: 21px;
    line-height: 1.65;

    max-width: 780px;
    margin: 0 auto;
}

/* =========================================
   ARTWORK GRID
========================================= */

.anime-evolution-grid {
    display: grid;

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

    gap: 24px;
}

/* Cards */

.anime-evolution-card {
    background-color: #000;
    border-radius: 20px;

    overflow: hidden;
    min-width: 0;
}

/* Artwork Container */

.anime-evolution-image-container {
    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;
    background-color: #111;
}

/* Artwork */

.anime-evolution-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* Card Text */

.anime-evolution-card-content {
    padding: 32px;
}

/* Before / After Labels */

.anime-evolution-card-label {
    display: block;

    color: #2997ff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;

    margin-bottom: 14px;
}

/* Card Headings */

.anime-evolution-card h3 {
    color: #fff;

    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.6px;

    margin: 0 0 16px;
}

/* Card Descriptions */

.anime-evolution-card p {
    color: #a1a1a6;

    font-size: 17px;
    line-height: 1.6;

    margin: 0;
}

/* =========================================
   CLOSING STATEMENT
========================================= */

.anime-evolution-footer {
    text-align: center;

    max-width: 850px;
    margin: 110px auto 0;
}

.anime-evolution-footer h3 {
    color: #fff;

    font-size: clamp(32px, 4vw, 52px);
    font-weight: 600;
    letter-spacing: -1.5px;
    line-height: 1.15;

    margin: 0 0 24px;
}

.anime-evolution-footer p {
    color: #a1a1a6;

    font-size: 20px;
    line-height: 1.6;

    margin: 0;
}

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

@media (max-width: 900px) {

    .anime-evolution {
        padding: 110px 24px 120px;
    }

    .anime-evolution-header {
        margin-bottom: 60px;
    }

    .anime-evolution-card-content {
        padding: 24px;
    }

    .anime-evolution-card h3 {
        font-size: 24px;
    }

    .anime-evolution-card p {
        font-size: 16px;
    }

}

/* =========================================
   IPHONE
========================================= */

@media (max-width: 600px) {

    .anime-evolution {
        padding: 90px 20px 100px;
    }

    .anime-evolution-label {
        font-size: 12px;
        letter-spacing: 1.2px;
        margin-bottom: 20px;
    }

    .anime-evolution-title {
        font-size: 40px;
        letter-spacing: -1.5px;
        margin-bottom: 24px;
    }

    .anime-evolution-subtitle {
        font-size: 17px;
    }

    .anime-evolution-header {
        margin-bottom: 48px;
    }

    /* One Card Per Row */

    .anime-evolution-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .anime-evolution-card {
        border-radius: 16px;
    }

    .anime-evolution-card-content {
        padding: 24px;
    }

    .anime-evolution-card h3 {
        font-size: 24px;
    }

    .anime-evolution-card p {
        font-size: 16px;
    }

    .anime-evolution-footer {
        margin-top: 80px;
    }

    .anime-evolution-footer h3 {
        font-size: 34px;
    }

    .anime-evolution-footer p {
        font-size: 17px;
    }

}

/* =========================================
   MADE WITH PROCREATE DREAMS
========================================= */

.anime-dreams {
    background-color: #000;
    color: #fff;

    width: 100%;
    padding: 140px 24px 150px;

    box-sizing: border-box;
}

/* Main Content */

.anime-dreams-content {
    max-width: 900px;
    margin: 0 auto;

    text-align: center;
}

/* Procreate Dreams Icon */

.anime-dreams-icon {
    display: block;

    width: 120px;
    height: 120px;

    object-fit: contain;

    margin: 0 auto 48px;

    border-radius: 26px;
}

/* Main Heading */

.anime-dreams-title {
    color: #fff;

    font-size: clamp(44px, 6vw, 76px);
    font-weight: 700;
    letter-spacing: -2.5px;
    line-height: 1.08;

    margin: 0 0 32px;
}

/* Subtitle */

.anime-dreams-subtitle {
    color: #a1a1a6;

    font-size: 21px;
    line-height: 1.65;

    max-width: 760px;
    margin: 0 auto;
}

/* Small Footer */

.anime-dreams-footer {
    color: #86868b;

    font-size: 16px;
    font-weight: 500;

    margin: 36px 0 0;
}

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

@media (max-width: 900px) {

    .anime-dreams {
        padding: 110px 24px 120px;
    }

    .anime-dreams-icon {
        width: 105px;
        height: 105px;

        margin-bottom: 40px;
    }

    .anime-dreams-subtitle {
        font-size: 19px;
    }

}

/* =========================================
   IPHONE
========================================= */

@media (max-width: 600px) {

    .anime-dreams {
        padding: 90px 22px 110px;
    }

    .anime-dreams-icon {
        width: 90px;
        height: 90px;

        margin-bottom: 32px;

        border-radius: 20px;
    }

    .anime-dreams-title {
        font-size: 42px;
        letter-spacing: -1.5px;

        margin-bottom: 24px;
    }

    .anime-dreams-subtitle {
        font-size: 17px;
    }

    .anime-dreams-footer {
        font-size: 14px;
        margin-top: 28px;
    }

}

/* =========================================
   VIEW 3 — ANIME PRODUCTION UPDATE
========================================= */

.anime-production {
    background-color: #000;
    color: #fff;

    width: 100%;
    padding: 140px 24px 150px;

    box-sizing: border-box;
}

/* Main Content */

.anime-production-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */

.anime-production-header {
    max-width: 850px;
    margin: 0 auto 80px;
    text-align: center;
}

/* Small Label */

.anime-production-label {
    display: block;

    color: #2997ff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.5px;

    margin-bottom: 24px;
}

/* Main Heading */

.anime-production-title {
    color: #fff;

    font-size: clamp(44px, 6vw, 76px);
    font-weight: 700;
    letter-spacing: -2.5px;
    line-height: 1.08;

    margin: 0 0 32px;
}

/* Subtitle */

.anime-production-subtitle {
    color: #a1a1a6;

    font-size: 21px;
    line-height: 1.65;

    max-width: 760px;
    margin: 0 auto;
}

/* =========================================
   PRODUCTION CARDS
========================================= */

.anime-production-grid {
    display: grid;

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

    gap: 24px;
}

/* Individual Card */

.anime-production-card {
    display: flex;
    flex-direction: column;

    background-color: #1d1d1f;
    border-radius: 20px;

    padding: 36px 32px;
    min-width: 0;

    box-sizing: border-box;
}

/* Card Number */

.anime-production-card-number {
    color: #86868b;

    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;

    margin-bottom: 42px;
}

/* Card Heading */

.anime-production-card h3 {
    color: #fff;

    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.8px;
    line-height: 1.2;

    margin: 0 0 20px;
}

/* Card Description */

.anime-production-card p {
    color: #a1a1a6;

    font-size: 17px;
    line-height: 1.6;

    margin: 0 0 36px;
}

/* Card Status */

.anime-production-status {
    display: inline-block;
    align-self: flex-start;

    color: #2997ff;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;

    margin-top: auto;
}

/* =========================================
   FOUNDER NOTE
========================================= */

.anime-production-note {
    max-width: 850px;

    margin: 120px auto 0;

    text-align: center;
}

.anime-production-note-label {
    display: block;

    color: #2997ff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.4px;

    margin-bottom: 24px;
}

.anime-production-note h3 {
    color: #fff;

    font-size: clamp(34px, 4vw, 52px);
    font-weight: 600;
    letter-spacing: -1.5px;
    line-height: 1.15;

    margin: 0 0 28px;
}

.anime-production-note p {
    color: #a1a1a6;

    font-size: 20px;
    line-height: 1.65;

    margin: 0;
}

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

@media (max-width: 900px) {

    .anime-production {
        padding: 110px 24px 120px;
    }

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

    .anime-production-card:last-child {
        grid-column: 1 / -1;
    }

}

/* =========================================
   IPHONE
========================================= */

@media (max-width: 600px) {

    .anime-production {
        padding: 90px 20px 100px;
    }

    .anime-production-header {
        margin-bottom: 48px;
    }

    .anime-production-label {
        font-size: 12px;
        letter-spacing: 1.2px;
        margin-bottom: 20px;
    }

    .anime-production-title {
        font-size: 42px;
        letter-spacing: -1.5px;
        margin-bottom: 24px;
    }

    .anime-production-subtitle {
        font-size: 17px;
    }

    /* One Card Per Row */

    .anime-production-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .anime-production-card:last-child {
        grid-column: auto;
    }

    .anime-production-card {
        padding: 30px 26px;
        border-radius: 16px;
    }

    .anime-production-card-number {
        margin-bottom: 32px;
    }

    .anime-production-card h3 {
        font-size: 25px;
    }

    .anime-production-card p {
        font-size: 16px;
    }

    /* Founder Note */

    .anime-production-note {
        margin-top: 90px;
    }

    .anime-production-note-label {
        font-size: 12px;
    }

    .anime-production-note h3 {
        font-size: 34px;
    }

    .anime-production-note p {
        font-size: 17px;
    }

}

/* =========================================
   VIEW 4 — MESSAGE FROM THE FOUNDER
========================================= */

.anime-thankyou {
    background-color: #1d1d1f;
    color: #fff;

    width: 100%;
    padding: 140px 24px 160px;

    box-sizing: border-box;
}

/* Main Content */

.anime-thankyou-content {
    max-width: 900px;
    margin: 0 auto;

    text-align: center;
}

/* Small Label */

.anime-thankyou-label {
    display: block;

    color: #2997ff;

    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.5px;

    margin-bottom: 24px;
}

/* Main Heading */

.anime-thankyou-title {
    color: #fff;

    font-size: clamp(44px, 6vw, 76px);
    font-weight: 700;
    letter-spacing: -2.5px;
    line-height: 1.08;

    margin: 0 0 55px;
}

/* Personal Message */

.anime-thankyou-message {
    max-width: 760px;
    margin: 0 auto;
}

.anime-thankyou-message p {
    color: #a1a1a6;

    font-size: 21px;
    font-weight: 400;
    line-height: 1.75;

    margin: 0 0 28px;
}

/* Founder Signature */

.anime-thankyou-founder {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: 70px;
}

/* With Appreciation */

.anime-thankyou-signature {
    color: #a1a1a6;

    font-size: 18px;
    font-style: italic;

    margin-bottom: 18px;
}

/* Founder Name */

.anime-thankyou-name {
    color: #fff;

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

    margin-bottom: 8px;
}

/* Founder Role */

.anime-thankyou-role {
    color: #86868b;

    font-size: 15px;
}

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

@media (max-width: 900px) {

    .anime-thankyou {
        padding: 110px 24px 130px;
    }

    .anime-thankyou-message p {
        font-size: 19px;
    }

}

/* =========================================
   IPHONE
========================================= */

@media (max-width: 600px) {

    .anime-thankyou {
        padding: 90px 22px 110px;
    }

    .anime-thankyou-label {
        font-size: 12px;
        letter-spacing: 1.2px;
        margin-bottom: 20px;
    }

    .anime-thankyou-title {
        font-size: 42px;
        letter-spacing: -1.5px;
        margin-bottom: 38px;
    }

    .anime-thankyou-message p {
        font-size: 17px;
        line-height: 1.7;
        margin-bottom: 22px;
    }

    .anime-thankyou-founder {
        margin-top: 50px;
    }

    .anime-thankyou-signature {
        font-size: 16px;
    }

    .anime-thankyou-name {
        font-size: 19px;
    }

    .anime-thankyou-role {
        font-size: 13px;
    }

}