/* ============================================
   Love Generation — Tentacle Landing
   Mobile-first design (375px base)
   ============================================ */

:root {
    /* 1 design-pixel = var(--px); at 375 vw it's exactly 1px, scales up to 480px cap */
    --px: calc(min(100vw, 480px) / 375);

    --pink: #F9A4CB;
    --pink-dark: #F48DB8;
    --yellow: #FFDD9A;
    --yellow-warm: #FADF85;
    --orange: #F9AB66;
    --purple: #CB8BEB;
    --purple-card: #A3A3FB;
    --blue-gray: #C8DDE6;
    --white: #FFFFFF;
    --hero-gradient:
        radial-gradient(ellipse 65.93% 76.96% at 68.67% 50%, #FFDD9A 39%, #F9A4CB 77%),
        radial-gradient(ellipse 158.36% 155.15% at 73.93% 61.19%, #FFDD9A 14%, #42ACF0 28%, #DC89E3 53%),
        radial-gradient(ellipse 100% 160.38% at 50% 0%, #FFDD9A 17%, #A7C9F7 38%, #A7C9F7 59%, #F9A4CB 85%);

    --font-heading: 'Inter', sans-serif;
    --font-body: 'Commissioner', sans-serif;

    --radius-card: 24px;
    --radius-card-lg: 32px;
    --radius-btn: 100px;

    --padding-x: calc(20 * var(--px));
}

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    touch-action: pan-x pan-y;
    -ms-touch-action: pan-x pan-y;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--pink);
    color: var(--white);
    line-height: 1.3;
    overflow-x: hidden;
    min-height: 100dvh;
}

body.landing-page {
    display: flex;
    justify-content: center;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ============ Typography ============ */

.heading {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.03em;
}

.heading--xl {
    font-size: calc(32 * var(--px));
    line-height: 100%;
}

.heading--lg {
    font-size: calc(23 * var(--px));
    line-height: calc(28 * var(--px));
}

.heading--md {
    font-size: calc(20 * var(--px));
    line-height: calc(24 * var(--px));
}

.heading--sm {
    font-size: calc(18 * var(--px));
    line-height: calc(22 * var(--px));
}

.heading--xs {
    font-size: calc(14 * var(--px));
    line-height: calc(17 * var(--px));
}

.body-text {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: calc(14 * var(--px));
    line-height: calc(18.2 * var(--px));
    text-transform: uppercase;
}

/* ============ Buttons ============ */

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(15 * var(--px));
    gap: calc(10 * var(--px));
    border: none;
    border-radius: var(--radius-btn);
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 800;
    font-size: calc(14 * var(--px));
    line-height: calc(17 * var(--px));
    text-align: center;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn:active {
    transform: scale(0.97);
}

.btn--purple {
    background: var(--purple);
    color: var(--white);
    box-shadow: 0 0 12px var(--purple);
}

.btn--white {
    background: var(--white);
    color: var(--purple);
    font-size: calc(16 * var(--px));
    line-height: calc(19 * var(--px));
    box-shadow: 0 0 12px var(--white), 0 0 20px var(--white);
}

.btn--full {
    width: 100%;
}

/* ============ Landing layout ============ */

.landing {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    overflow-x: hidden;
}

/* ============ Hero Section ============ */

.hero {
    position: relative;
    width: 100%;
    height: calc(670 * var(--px) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--hero-gradient);
    overflow: hidden;
    clip-path: inset(0);
}

.hero__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    padding: 0;
}

.hero__logo img {
    height: calc(100 * var(--px));
    width: auto;
    object-fit: contain;
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: calc(4 * var(--px)) var(--padding-x) 0;
    gap: calc(15 * var(--px));
}

.hero__title {
    font-size: calc(32 * var(--px));
    line-height: calc(39 * var(--px));
    color: var(--white);
}

.hero__subtitle {
    color: var(--white);
}

.hero__image {
    position: absolute;
    left: calc(-50 * var(--px));
    top: calc(215 * var(--px) + env(safe-area-inset-top, 0px));
    width: calc(444 * var(--px));
    height: calc(444 * var(--px));
    max-width: none;
    object-fit: contain;
    pointer-events: none;
}

.hero__scroll {
    position: absolute;
    left: calc(25 * var(--px));
    top: calc(240 * var(--px) + env(safe-area-inset-top, 0px));
}

.hero__scroll svg {
    width: calc(40 * var(--px));
    height: calc(52 * var(--px));
    display: block;
}

/* ============ Octopus Message Card ============ */

.message-card {
    position: relative;
    width: calc(100% - 36 * var(--px));
    max-width: calc(339 * var(--px));
    min-height: calc(253 * var(--px));
    height: auto;
    margin: calc(-40 * var(--px)) auto 0;
    padding: calc(24 * var(--px)) calc(15 * var(--px));
    background: var(--white);
    box-shadow: 0 0 12px var(--white);
    border-radius: var(--radius-card-lg);
    text-align: center;
    z-index: 2;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.message-card__icon {
    width: calc(76 * var(--px));
    height: calc(68 * var(--px));
    margin: 0 auto calc(20 * var(--px));
    flex-shrink: 0;
}

.message-card__text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: calc(14 * var(--px));
    line-height: calc(18.2 * var(--px));
    text-align: center;
    text-transform: uppercase;
    color: var(--pink);
}

.message-card__spoiler {
    margin-top: calc(16 * var(--px));
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 500;
    font-size: calc(12 * var(--px));
    line-height: calc(15.6 * var(--px));
    text-align: center;
    text-transform: uppercase;
    color: var(--pink);
}

/* ============ Product Section ============ */

.products {
    padding: calc(50 * var(--px)) 0 0;
}

.products__header {
    padding: 0 var(--padding-x);
    margin-bottom: calc(30 * var(--px));
}

.products__title {
    font-size: calc(32 * var(--px));
    line-height: calc(39 * var(--px));
    margin-bottom: calc(15 * var(--px));
}

.products__desc {
    max-width: 100%;
}

.products__buttons {
    display: flex;
    gap: calc(10 * var(--px));
    margin-top: calc(20 * var(--px));
}

.products__btn {
    flex: 1;
    font-size: calc(12 * var(--px));
    line-height: calc(15 * var(--px));
    padding: calc(14 * var(--px)) calc(8 * var(--px));
    white-space: nowrap;
}

.products__row-group {
    margin-bottom: calc(40 * var(--px));
}

.products__scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: calc(10 * var(--px));
    padding: 0;
    margin-left: var(--padding-x);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.products__scroll::-webkit-scrollbar {
    display: none;
}

.products__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(15 * var(--px)) calc(46 * var(--px));
    gap: calc(20 * var(--px));
}

.products__nav-btn {
    width: calc(103 * var(--px));
    height: calc(80 * var(--px));
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.products__nav-btn svg {
    width: calc(103 * var(--px));
    height: calc(80 * var(--px));
}

/* ============ Product Card ============ */

.product-card {
    flex-shrink: 0;
    width: calc(300 * var(--px));
    height: calc(330 * var(--px));
    background: var(--white);
    border-radius: var(--radius-card);
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
}

.product-card__title {
    position: absolute;
    top: calc(25 * var(--px));
    left: calc(14 * var(--px));
    right: calc(14 * var(--px));
    color: var(--pink);
    z-index: 1;
}

.product-card__image-area {
    position: absolute;
    bottom: calc(14 * var(--px));
    left: calc(14 * var(--px));
    right: calc(14 * var(--px));
    height: calc(192 * var(--px));
    border-radius: 18px;
    overflow: hidden;
}

.product-card__image-area--warm {
    background: linear-gradient(180deg, #F9AB66 0%, #FADF85 100%);
}

.product-card__image-area--cool {
    background: var(--blue-gray);
}

.product-card__image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card__accent {
    position: absolute;
    left: calc(-22 * var(--px));
    top: calc(-72 * var(--px));
    width: calc(133 * var(--px));
    height: calc(161 * var(--px));
    max-width: none;
    object-fit: contain;
    z-index: 1;
}

.product-card__product {
    position: absolute;
    /* left: calc(35 * var(--px)); */
    /* top: calc(14 * var(--px)); */
    width: calc(219 * var(--px));
    height: calc(229 * var(--px));
    max-width: none;
    object-fit: contain;
    z-index: 2;
}

.product-card__tube {
    position: absolute;
    left: 0;
    /* top: calc(-130 * var(--px)); */
    width: calc(274 * var(--px));
    height: calc(341 * var(--px));
    max-width: none;
    object-fit: contain;
}

/* ============ Steps Section ============ */

.steps {
    padding: calc(50 * var(--px)) 0 0;
    position: relative;
    z-index: 1;
}

.steps__title {
    text-align: center;
    font-size: calc(32 * var(--px));
    line-height: 100%;
    padding: 0 var(--padding-x);
    margin-bottom: calc(30 * var(--px));
}

.steps__list {
    position: relative;
    z-index: 2;
    padding: 0 var(--padding-x);
    margin-bottom: calc(40 * var(--px));
}

.steps__item {
    display: flex;
    align-items: center;
    gap: calc(15 * var(--px));
    padding: calc(14 * var(--px)) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.steps__item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.steps__number {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 800;
    font-size: calc(40 * var(--px));
    line-height: calc(48 * var(--px));
    text-transform: uppercase;
    flex-shrink: 0;
    min-width: calc(64 * var(--px));
}

.steps__text {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: calc(14 * var(--px));
    line-height: calc(17 * var(--px));
    text-transform: uppercase;
}

/* Phone mockup, CTA, Promo, Footer styles in landing-sections.css */