/* ========== HERO RESPONSIVE ========== */
@media (max-width: 1100px) {
    .hero-grid {
        gap: 40px;
    }

    .hero-title {
        font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    }
}

@media (max-width: 992px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .hero-left {
        max-width: 100%;
    }

    .hero-description {
        margin: 0 auto 32px;
        max-width: 520px;
    }

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

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

    .hero {
        min-height: auto;
        padding: 120px 0 80px;
    }

    .hero-title {
        font-size: clamp(2rem, 6vw, 2.8rem);
    }

    .hero-right {
        max-width: 420px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 100px 0 60px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-description {
        font-size: 0.95rem;
    }

    .hero-trust {
        gap: 12px 20px;
    }

    .trust-badge {
        font-size: 0.78rem;
    }

    .hero-card {
        max-width: 360px;
    }

    .hero-card-body {
        padding: 20px 16px 12px;
    }

    .hero-card-body svg {
        max-width: 280px;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background: white;
        flex-direction: column;
        justify-content: center;
        transition: 0.3s;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
        gap: 40px;
        padding: 50px;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-links {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .hamburger {
        display: flex;
    }

    .cta-section h2 {
        font-size: 2.2rem;
    }
}

@media (max-width: 520px) {
    .hero {
        padding: 90px 0 50px;
    }

    .hero-title {
        font-size: 1.7rem;
    }

    .hero-description {
        font-size: 0.9rem;
    }

    .hero-cta {
        flex-direction: column;
        align-items: center;
    }

    .hero-cta .btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    .hero-trust {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 16px;
    }

    .trust-badge {
        font-size: 0.75rem;
    }

    .hero-card-body svg {
        max-width: 240px;
    }

    .btn {
        padding: 10px 20px;
    }
}

/* ========== GENERATOR / CREATOR RESPONSIVE ========== */
@media (max-width: 992px) {
    .generator-wrapper {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 32px;
    }

    .thermometer-wrapper {
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .generator-wrapper {
        padding: 24px;
        gap: 28px;
        border-radius: 20px;
    }

    .preview-canvas {
        padding: 32px 24px;
    }

    .generator-preview.compact-mode .preview-canvas {
        padding: 24px 20px;
    }

    .section-title {
        padding: 16px;
        font-size: 0.8rem;
    }

    .control-group label {
        font-size: 0.85rem;
    }

    .control-group input[type="number"] {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .preview-branding .branding-logo {
        width: 40%;
    }
}

@media (max-width: 520px) {
    .generator-wrapper {
        padding: 16px;
        gap: 20px;
        border-radius: 16px;
    }

    .preview-canvas {
        padding: 24px 16px;
    }

    .generator-preview.compact-mode .preview-canvas {
        padding: 20px 12px;
    }

    .thermometer-wrapper {
        max-width: 320px;
    }

    .section-title {
        padding: 14px 12px;
        font-size: 0.75rem;
    }

    .export-buttons .btn {
        min-width: 70px;
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .preview-branding {
        padding: 0 16px 12px;
    }

    .preview-branding .branding-logo {
        width: 44%;
    }
}

/* ========== FEATURE EXPLORER RESPONSIVE ========== */
@media (max-width: 992px) {
    .feat-panel-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .feat-content-wrapper {
        padding: 36px 28px;
    }

    .feat-nav-inner {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .feat-nav-inner::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 768px) {
    .feat-content-wrapper {
        padding: 28px 20px;
        min-height: 380px;
    }

    .feat-panel {
        left: 20px;
        right: 20px;
        top: 28px;
    }

    .feat-panel.exiting {
        left: 20px;
        right: 20px;
        top: 28px;
    }

    .feat-panel-text h3 {
        font-size: 1.3rem;
    }

    .feat-icon-circle {
        width: 100px;
        height: 100px;
        font-size: 2.4rem;
    }

    .feat-nav {
        margin-bottom: 32px;
    }

    .feat-chip {
        font-size: 0.78rem;
        padding: 8px 14px;
        gap: 5px;
    }

    .feat-chip i {
        font-size: 0.8rem;
    }
}

@media (max-width: 520px) {
    .feat-content-wrapper {
        padding: 24px 16px;
    }

    .feat-panel {
        left: 16px;
        right: 16px;
        top: 24px;
    }

    .feat-panel.exiting {
        left: 16px;
        right: 16px;
        top: 24px;
    }

    .feat-panel-text h3 {
        font-size: 1.15rem;
    }

    .feat-panel-desc {
        font-size: 0.88rem;
    }

    .feat-points li {
        font-size: 0.85rem;
        gap: 8px;
    }

    .feat-insight {
        padding: 12px 16px;
    }

    .feat-insight span {
        font-size: 0.83rem;
    }

    .feat-icon-circle {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
}

/* ========== BENTO / INDUSTRIES RESPONSIVE ========== */
@media (max-width: 992px) {
    .bento-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .bento-featured {
        grid-column: 1 / 3;
        grid-row: auto;
    }

    .bento-medium {
        grid-column: 1;
    }

    .bento-wide {
        grid-column: 1 / 3;
    }

    .bento-stats-row {
        grid-column: 1 / 3;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bento-featured {
        grid-column: 1;
    }

    .bento-medium {
        grid-column: 1;
    }

    .bento-wide {
        grid-column: 1;
    }

    .bento-stats-row {
        grid-column: 1;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .bento-wide-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .bento-stat-group {
        width: 100%;
        justify-content: space-around;
    }

    .bento-card {
        padding: 24px;
    }
}

@media (max-width: 520px) {
    .bento-stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .bento-stat-card {
        padding: 20px;
    }

    .bento-stat-big {
        font-size: 1.3rem;
    }

    .bento-card {
        padding: 20px;
        border-radius: var(--radius-md);
    }
}

/* ========== EMBED SECTION RESPONSIVE ========== */
@media (max-width: 992px) {
    .embed-hub {
        min-height: 440px;
        padding: 24px;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(10, 1fr);
    }

    .embed-center {
        grid-column: 3 / 7;
        grid-row: 3 / 9;
    }

    .embed-browser {
        max-width: 260px;
    }

    .embed-browser-body {
        min-height: 200px;
    }

    .embed-browser-body svg {
        max-width: 180px;
    }

    .embed-node {
        padding: 6px 12px;
        font-size: 0.72rem;
        gap: 6px;
    }

    .embed-node .en-icon {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }

    .embed-node[data-idx="0"] {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }

    .embed-node[data-idx="1"] {
        grid-column: 7 / 9;
        grid-row: 1 / 3;
    }

    .embed-node[data-idx="2"] {
        grid-column: 1 / 3;
        grid-row: 4 / 6;
    }

    .embed-node[data-idx="3"] {
        grid-column: 7 / 9;
        grid-row: 4 / 6;
    }

    .embed-node[data-idx="4"] {
        grid-column: 1 / 3;
        grid-row: 7 / 9;
    }

    .embed-node[data-idx="5"] {
        grid-column: 7 / 9;
        grid-row: 7 / 9;
    }

    .embed-node[data-idx="6"] {
        grid-column: 1 / 3;
        grid-row: 10 / 11;
    }

    .embed-node[data-idx="7"] {
        grid-column: 7 / 9;
        grid-row: 10 / 11;
    }

    .embed-node[data-idx="8"] {
        grid-column: 2 / 4;
        grid-row: 1 / 3;
    }

    .embed-node[data-idx="9"] {
        grid-column: 6 / 8;
        grid-row: 1 / 3;
    }

    .embed-node[data-idx="10"] {
        grid-column: 2 / 4;
        grid-row: 10 / 11;
    }

    .embed-node[data-idx="11"] {
        grid-column: 6 / 8;
        grid-row: 10 / 11;
    }
}

@media (max-width: 768px) {
    .embed-hub {
        min-height: auto;
        padding: 20px;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        gap: 12px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .embed-center {
        order: 1;
        width: 100%;
        max-width: 300px;
    }

    .embed-browser {
        max-width: 280px;
    }

    .embed-browser-body {
        min-height: 200px;
    }

    .embed-browser-body svg {
        max-width: 180px;
    }

    .embed-lines {
        display: none;
    }

    .embed-node {
        padding: 6px 16px;
        font-size: 0.78rem;
    }

    .embed-node .en-icon {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }

    /* 2-column grid for nodes below center on tablet */
    .embed-node[data-idx="0"] {
        order: 2;
    }

    .embed-node[data-idx="1"] {
        order: 3;
    }

    .embed-node[data-idx="2"] {
        order: 4;
    }

    .embed-node[data-idx="3"] {
        order: 5;
    }

    .embed-node[data-idx="4"] {
        order: 6;
    }

    .embed-node[data-idx="5"] {
        order: 7;
    }

    .embed-node[data-idx="6"] {
        order: 8;
    }

    .embed-node[data-idx="7"] {
        order: 9;
    }

    .embed-node[data-idx="8"] {
        order: 10;
    }

    .embed-node[data-idx="9"] {
        order: 11;
    }

    .embed-node[data-idx="10"] {
        order: 12;
    }

    .embed-node[data-idx="11"] {
        order: 13;
    }
}

@media (max-width: 520px) {
    .embed-hub {
        padding: 16px;
    }

    .embed-browser {
        max-width: 100%;
    }

    .embed-browser-body {
        min-height: 180px;
    }

    .embed-browser-body svg {
        max-width: 160px;
    }

    .embed-node {
        padding: 5px 12px;
        font-size: 0.72rem;
    }

    .embed-node .en-icon {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }
}

@media (max-width: 420px) {
    .embed-node {
        padding: 4px 10px;
        font-size: 0.68rem;
        gap: 4px;
    }

    .embed-node .en-icon {
        width: 18px;
        height: 18px;
        font-size: 0.6rem;
    }
}

/* ========== BLUEPRINT RESPONSIVE ========== */
@media (max-width: 992px) {
    .blueprint-container {
        max-width: 640px;
    }

    .bp-card-inner {
        width: calc(50% - 36px);
        padding: 24px;
    }

    .bp-title {
        font-size: 1.15rem;
    }

    .bp-desc {
        font-size: 0.85rem;
    }

    .blueprint-card.bp-left .bp-node {
        right: -43px;
    }

    .blueprint-card.bp-right .bp-node {
        left: -43px;
    }

    .bp-node {
        width: 12px;
        height: 12px;
    }

    .blueprint-card {
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .blueprint-container {
        max-width: 100%;
        padding: 0 20px;
    }

    .blueprint-line {
        display: none;
    }

    .blueprint-card {
        margin-bottom: 16px;
    }

    .bp-card-inner {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .bp-node {
        display: none;
    }

    .bp-number span {
        font-size: 0.75rem;
    }

    .bp-title {
        font-size: 1.1rem;
    }

    .bp-desc {
        font-size: 0.85rem;
    }

    .bp-stat-num {
        font-size: 1.1rem;
    }
}

@media (max-width: 520px) {
    .bp-card-inner {
        padding: 20px;
    }

    .bp-title {
        font-size: 1rem;
    }

    .bp-desc {
        font-size: 0.82rem;
    }

    .bp-tip {
        padding: 8px 12px;
    }

    .bp-tip span {
        font-size: 0.78rem;
    }

    .bp-icon-wrap {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }
}

/* ========== CTA RESPONSIVE ========== */
@media (max-width: 768px) {
    .cta-section {
        padding: 80px 20px;
    }

    .cta-section h2 {
        font-size: 2rem;
    }

    .cta-section p {
        font-size: 1rem;
    }
}

@media (max-width: 520px) {
    .cta-section {
        padding: 60px 16px;
    }

    .cta-section h2 {
        font-size: 1.6rem;
    }

    .cta-section p {
        font-size: 0.95rem;
    }
}

/* ========== FOOTER RESPONSIVE ========== */
@media (max-width: 768px) {
    .footer {
        padding: 60px 0 20px;
    }

    .footer-grid {
        gap: 32px;
    }
}

@media (max-width: 520px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-col h4 {
        margin-bottom: 12px;
    }
}