@media (max-width: 480px) {
            html {
                --looply-scroll-offset: 96px;
            }

            .header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                top: 10px;
                width: calc(100% - 20px);
                min-height: 60px;
                padding: 10px 14px;
                border-radius: 20px;
            }

            .header-logo {
                margin-right: auto;
            }

            .menu-toggle {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                margin-left: auto;
                width: 52px;
                min-width: 52px;
                height: 52px;
                padding: 0;
                border-radius: 14px;
                position: relative;
                z-index: 140;
            }

            .menu-toggle-icon {
                font-size: 30px;
            }

            .header-right {
                display: flex;
                position: fixed;
                top: 0;
                right: -100%;
                width: min(300px, calc(100vw - 12px));
                height: 100dvh;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding: 88px 24px 24px;
                background: #ffffff;
                border-left: 1px solid rgba(224, 17, 95, 0.06);
                box-shadow: -20px 0 48px rgba(31, 31, 31, 0.12);
                transition: right 0.3s ease;
                z-index: 120;
            }

            .header-right.open {
                right: 0;
            }

            .header-nav {
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
                margin-bottom: 24px;
            }

            .header-nav a {
                padding: 8px 0;
                font-size: 16px;
                border-bottom: 1px solid rgba(224, 17, 95, 0.04);
            }

            .header-actions {
                margin-top: auto;
            }

            .header-actions .btn {
                width: 100%;
                justify-content: center;
            }

            .hero {
                min-height: auto;
                max-height: none;
                justify-content: center;
                padding: 188px 16px 40px;
            }

            .hero-actions .btn {
                height: var(--looply-button-height-mobile);
                min-height: var(--looply-button-height-mobile);
                padding: 0 18px;
                font-size: 14px;
            }

            .btn,
            .header .btn,
            .banner-actions .btn {
                height: var(--looply-button-height-mobile);
                min-height: var(--looply-button-height-mobile);
                padding: 0 18px;
            }

            .feature-marquee {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 14px;
            }

            .feature-window:nth-child(-n + 2) {
                display: none;
            }

            .feature-window {
                height: 280px;
            }

            .feature-card {
                padding: 18px;
                border-radius: 18px;
                gap: 14px;
            }

            .feature-card-icon {
                width: 52px;
                height: 52px;
                border-radius: 999px;
                font-size: 24px;
            }

            .feature-card-title {
                font-size: 0.92rem;
                max-width: 12ch;
            }

            .tab-item {
                grid-template-columns: 4px minmax(0, 1fr);
                padding: 16px 0;
                gap: 14px;
            }

            .tab-item h4 {
                display: grid;
                grid-template-columns: 34px minmax(0, 1fr);
                align-items: center;
                font-size: 0.95rem;
                gap: 12px;
            }

            .tab-step {
                width: 34px;
                min-width: 34px;
                height: 34px;
                font-size: 0.82rem;
            }

            .tab-item p {
                font-size: 0.85rem;
                max-width: 100%;
            }

            .tabs-wrapper,
            .tabs-list,
            .tab-item,
            .tab-content,
            .tab-item h4,
            .tab-item p,
            .tab-image,
            .tab-image-track,
            .tab-image-slide {
                min-width: 0;
            }

            .tab-image {
                order: 2;
                width: 100%;
                max-width: 100%;
                overflow: hidden;
            }

            .tab-image-track {
                width: 100%;
                flex-wrap: nowrap;
            }

            .tab-image-slide {
                flex: 0 0 100%;
                max-width: 100%;
            }

            .tab-image-slide img {
                width: 98%;
                max-width: 98%;
            }

            .team-card-image .material-symbols-outlined {
                font-size: 48px;
            }

            .logo-track {
                gap: 32px;
            }

            .logo-track span {
                font-size: 12px;
            }

            .logo-track .material-symbols-outlined {
                font-size: 20px;
            }

            .logo-carousel::before,
            .logo-carousel::after {
                width: 40px;
            }

            .section-radial {
                height: auto;
                max-height: none;
                min-height: 0;
                justify-content: flex-start;
                padding: 48px 16px;
            }

            .section-radial-header {
                max-width: 100%;
                margin-bottom: 32px;
            }

            .plans-grid {
                max-width: 100%;
            }

            .plan-card {
                padding: 24px 20px;
            }

            .bento-grid {
                grid-template-columns: 1fr;
                gap: 16px;
                max-width: 100%;
            }

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

            .bento-item.tall {
                min-height: 240px;
            }

            .testimonial-card {
                flex: 0 0 280px;
            }

            .faq-wrapper {
                grid-template-columns: 1fr;
                gap: 24px;
            }

            .section-cards,
            .section-team,
            .section-plans,
            .section-testimonials,
            .section-faq,
            .section-banner {
                padding: 48px 16px;
            }

            .section-tabs,
            .section-bento {
                padding: 48px 16px;
            }

            .container {
                padding-left: 16px;
                padding-right: 16px;
            }

            .footer {
                padding: 40px 16px 24px;
            }

            .footer-content {
                grid-template-columns: 1fr;
                gap: 32px;
            }

            .footer-links {
                grid-template-columns: 1fr 1fr;
                gap: 24px;
            }

            .banner-wrapper {
                padding: 32px 24px 0;
                border-radius: 16px;
            }

            .banner-copy {
                padding-bottom: 24px;
            }

            .banner-visual {
                width: min(100%, 220px);
            }

            .banner-wrapper h2 {
                max-width: 100%;
            }

            .banner-wrapper p {
                max-width: 100%;
            }
        }

        @media (min-width: 481px) and (max-width: 1024px) {
            html {
                --looply-scroll-offset: 112px;
            }

            .header {
                padding: 10px 18px;
            }

            .header-nav {
                gap: 24px;
            }

            .header-nav a {
                font-size: 14px;
            }

            .hero {
                min-height: auto;
                max-height: none;
                justify-content: center;
                padding: 204px 32px 40px;
            }

            .hero-visual {
                width: min(100%, 380px);
                margin-top: 28px;
            }

            .feature-marquee {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 20px;
            }

            .feature-window:nth-child(-n + 2) {
                display: none;
            }

            .feature-window {
                height: 440px;
            }

            .feature-card-icon {
                width: 58px;
                height: 58px;
                border-radius: 999px;
                font-size: 26px;
            }

            .section-radial {
                height: auto;
                max-height: none;
                min-height: 0;
                justify-content: flex-start;
            }

            .tabs-wrapper {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .tab-image {
                order: 2;
                aspect-ratio: 1 / 1;
                min-height: 0;
            }

            .tab-image-slide img {
                width: 96%;
                max-width: 96%;
            }

            .team-grid {
                grid-template-columns: repeat(2, 1fr);
                max-width: 640px;
                gap: 24px;
            }

            .plans-grid {
                grid-template-columns: repeat(2, 1fr);
                max-width: 640px;
                gap: 20px;
            }

            .plan-card.featured {
                grid-column: span 2;
            }

            .bento-grid {
                grid-template-columns: 1fr 1fr;
                max-width: 640px;
                gap: 20px;
            }

            .bento-item.wide {
                grid-column: span 2;
            }

            .bento-item.tall {
                min-height: 280px;
            }

            .faq-wrapper {
                grid-template-columns: 1fr;
                gap: 32px;
            }

            .footer-content {
                grid-template-columns: 1fr 1fr;
                gap: 40px;
            }

            .footer-links {
                grid-template-columns: 1fr 1fr;
                gap: 32px;
            }

            .section-cards,
            .section-team,
            .section-plans,
            .section-testimonials,
            .section-faq,
            .section-banner {
                padding: 60px 32px;
            }

            .section-tabs,
            .section-bento {
                padding: 60px 32px;
            }

            .banner-wrapper {
                padding: 48px 40px 0;
            }

            .banner-copy {
                padding-bottom: 40px;
            }

            .banner-visual {
                width: min(100%, 240px);
                margin-bottom: -1px;
            }
        }

        @media (min-width: 1025px) {
            html {
                --looply-scroll-offset: 128px;
            }

            .header {
                padding: 10px 20px;
            }

            .header-nav {
                gap: 40px;
            }

            .header-nav a {
                font-size: 16px;
            }

            .btn {
                padding: 14px 32px;
                font-size: 16px;
                min-height: 56px;
            }

            .hero {
                min-height: min(100dvh, 1024px);
                max-height: 1024px;
                padding: 188px 48px 40px;
            }

            .hero-visual {
                width: min(100%, 440px);
                margin-top: 32px;
            }

            .hero-actions .btn {
                height: var(--looply-button-height);
                min-height: var(--looply-button-height);
                padding: 0 var(--looply-button-padding-x);
                font-size: 15px;
            }

            .banner-wrapper {
                grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
            }

            .banner-visual {
                width: min(100%, 320px);
                justify-self: end;
            }

            .section-cards {
                padding: 100px 48px;
            }

            .section-tabs {
                padding: 100px 48px;
            }

            .section-team {
                padding: 100px 48px;
            }

            .section-radial {
                padding: 100px 48px;
            }

            .section-plans {
                padding: 100px 48px;
            }

            .section-testimonials {
                padding: 100px 48px;
            }

            .section-faq {
                padding: 100px 48px;
            }

            .section-banner {
                padding: 100px 48px;
            }

            .feature-marquee {
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 24px;
            }

            .feature-window {
                height: 560px;
            }

            .tabs-wrapper {
                grid-template-columns: 1fr 1fr;
                gap: 56px;
                align-items: center;
            }

            .tab-item {
                padding: 24px 0 24px 24px;
                gap: 24px;
            }

            .tab-item h4 {
                font-size: 1.15rem;
            }

            .tab-step {
                width: 48px;
                min-width: 48px;
                height: 48px;
            }

            .tab-item p {
                font-size: 0.95rem;
            }

            .tab-image {
                order: 0;
                aspect-ratio: 1 / 1;
                min-height: 0;
            }

            .tab-image-slide img {
                width: 94%;
                max-width: 94%;
            }

            .team-grid {
                grid-template-columns: repeat(3, 1fr);
                max-width: 1120px;
                gap: 32px;
            }

            .team-card-image .material-symbols-outlined {
                font-size: 72px;
            }

            .logo-carousel {
                padding: 56px 0;
            }

            .logo-track {
                gap: 72px;
            }

            .logo-carousel::before,
            .logo-carousel::after {
                width: 120px;
            }

            .plans-grid {
                grid-template-columns: repeat(3, 1fr);
                max-width: 1120px;
                gap: 24px;
            }

            .plan-card {
                min-height: 480px;
            }

            .bento-grid {
                grid-template-columns: 1fr 1fr 1fr 1fr;
                max-width: 1120px;
                gap: 24px;
            }

            .bento-item:first-child {
                grid-column: span 3;
                grid-row: span 2;
                min-height: 380px;
            }

            .bento-item:nth-child(2) {
                grid-column: span 1;
                grid-row: span 2;
                min-height: 380px;
            }

            .bento-item:nth-child(3) {
                grid-column: span 1;
                grid-row: span 1;
                min-height: 180px;
            }

            .bento-item:nth-child(4) {
                grid-column: span 3;
                grid-row: span 1;
                min-height: 180px;
            }

            .faq-wrapper {
                grid-template-columns: 1fr 1fr;
                gap: 64px;
                align-items: start;
            }

            .testimonial-card {
                flex: 0 0 400px;
            }

            .footer-content {
                grid-template-columns: 1fr 1fr 1fr;
                gap: 60px;
            }

            .footer-links {
                grid-template-columns: 1fr 1fr;
                gap: 48px;
            }

            .banner-wrapper {
                padding: 64px 56px 0;
            }
        }