:root {
    --bg: #f8f0ea;
    --bg-2: #f1dfd2;
    --panel: rgba(255, 248, 243, 0.84);
    --ink: #38261d;
    --muted: #7b6255;
    --rose: #d68d95;
    --rose-deep: #c36c78;
    --line: rgba(91, 52, 33, 0.12);
    --shadow: 0 24px 80px rgba(86, 43, 28, 0.12);
    --radius-xl: 32px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: "Manrope", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at top left, rgba(241, 217, 201, 0.9), transparent 30%),
        radial-gradient(circle at 85% 18%, rgba(214, 141, 149, 0.3), transparent 22%),
        linear-gradient(180deg, #fff8f4 0%, #f6ece5 36%, #fbf5f1 100%);
    overflow-x: hidden;
}
body.is-loaded .loader { opacity: 0; visibility: hidden; pointer-events: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.page-shell { position: relative; }

.loader {
    position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
    background: linear-gradient(180deg, #f7dfe0 0%, #f9eee8 54%, #f6cfd2 100%);
    transition: opacity 0.65s ease, visibility 0.65s ease;
}
.loader__veil {
    position: absolute; inset: auto 0 0 0; height: 34%; transform-origin: bottom;
    animation: makeupRise 3s ease forwards;
}
.loader__veil--top {
    height: 26%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(214, 141, 149, 0.38));
    animation-delay: 0.2s;
}
.loader__veil--blush {
    height: 54%;
    background:
        radial-gradient(circle at 20% 70%, rgba(250, 214, 188, 0.9), transparent 28%),
        radial-gradient(circle at 82% 76%, rgba(255, 183, 197, 0.8), transparent 24%),
        linear-gradient(180deg, rgba(255, 245, 238, 0), rgba(232, 166, 157, 0.86));
}
.loader__veil--bottom {
    background: linear-gradient(180deg, rgba(196, 108, 120, 0), rgba(195, 108, 120, 0.92));
    animation-delay: 0.4s;
}
.loader__center {
    position: relative; z-index: 2; text-align: center; display: grid; gap: 0.9rem; justify-items: center;
}
.loader__logo-ring {
    position: absolute; width: 180px; height: 180px; border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%; animation: pulseRing 1.8s ease-in-out infinite;
}
.loader__logo {
    width: min(190px, 42vw);
    filter: drop-shadow(0 18px 38px rgba(96, 44, 32, 0.25));
    animation: logoFloat 2.4s ease-in-out infinite;
}
.loader__wordmark,
.brand__text strong,
.hero h1,
.section-heading h2,
.hero-card h2,
.hero-card h3,
.course-card h3,
.product-card h3,
.drawer__header h2,
.studio-dialog h2 { font-family: "Prata", serif; font-weight: 400; }
.loader__wordmark { font-size: clamp(1.8rem, 5vw, 3rem); }
.loader__tag {
    text-transform: uppercase; letter-spacing: 0.22rem; font-size: 0.73rem; color: rgba(56, 38, 29, 0.72);
}
.loader__progress {
    width: min(240px, 60vw); height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); overflow: hidden;
}
.loader__progress-bar {
    display: block; width: 0; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, #f7dcb5, #d87886, #b45e6b);
    animation: progressFill 3s ease forwards;
}
@keyframes makeupRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes progressFill { from { width: 0; } to { width: 100%; } }
@keyframes logoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulseRing { 0%,100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.07); opacity: 0.4; } }

.topbar {
    position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; padding: 1rem 2rem; margin: 1rem auto 0; width: min(1200px, calc(100% - 1.5rem));
    border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px; background: rgba(255, 248, 244, 0.7);
    backdrop-filter: blur(18px); box-shadow: 0 14px 40px rgba(102, 56, 36, 0.08);
}
.brand, .topbar__actions, .topnav { display: flex; align-items: center; }
.brand { gap: 0.9rem; }
.brand__mark {
    width: 46px; height: 46px; object-fit: cover; border-radius: 50%;
    background: linear-gradient(135deg, #ffe0cc, #deb398); padding: 0.3rem;
}
.brand__text { display: grid; gap: 0.2rem; }
.brand__text strong { font-size: 1.15rem; }
.brand__text em {
    font-style: normal; font-size: 0.72rem; letter-spacing: 0.18rem; text-transform: uppercase; color: var(--muted);
}
.topnav { gap: 1.5rem; }
.topnav a { font-size: 0.82rem; letter-spacing: 0.14rem; text-transform: uppercase; color: var(--muted); }
.topbar__actions { gap: 0.8rem; }

.icon-button, .cart-button, .button, .drawer__close, .studio-dialog__close, .filter-row button {
    border: 0; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.icon-button {
    width: 46px; height: 46px; border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.86), rgba(255,255,255,0)),
        linear-gradient(180deg, #edbfaa, #d47a85);
    position: relative; box-shadow: 0 12px 26px rgba(202, 111, 123, 0.24);
}
.icon-button span, .icon-button::before {
    position: absolute; content: ""; left: 50%; top: 50%; border-radius: 999px;
    transform: translate(-50%, -50%); background: rgba(255,255,255,0.95);
}
.icon-button span { width: 18px; height: 3px; }
.icon-button::before { width: 3px; height: 18px; }
.cart-button, .button { border-radius: 999px; padding: 0.95rem 1.35rem; }
.cart-button {
    display: inline-flex; align-items: center; gap: 0.7rem; background: rgba(255,255,255,0.72); color: var(--ink);
}
.cart-button span {
    display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 0.4rem;
    border-radius: 999px; color: white; background: linear-gradient(135deg, #d57683, #bf5c69);
}
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 700; }
.button--primary { color: white; background: linear-gradient(135deg, #da7f89, #b85a66); box-shadow: 0 18px 32px rgba(204, 108, 124, 0.26); }
.button--ghost, .button--secondary, .filter-row button {
    color: var(--ink); background: rgba(255,255,255,0.66); border: 1px solid rgba(107,67,47,0.1);
}
.button--full { width: 100%; }

.hero, .section, .footer { width: min(1200px, calc(100% - 1.5rem)); margin-inline: auto; }
.hero {
    display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,0.85fr); gap: 2rem; align-items: center;
    min-height: calc(100vh - 120px); padding: 4rem 0 3rem; position: relative;
}
.hero__backdrop {
    position: absolute; inset: 2rem 0 auto 0; height: 78%; border-radius: 44px;
    background:
        radial-gradient(circle at top right, rgba(255,226,196,0.7), transparent 28%),
        radial-gradient(circle at bottom left, rgba(217,143,153,0.22), transparent 24%),
        linear-gradient(135deg, rgba(255,255,255,0.72), rgba(248,229,218,0.76));
    border: 1px solid rgba(255,255,255,0.72); box-shadow: var(--shadow);
}
.hero__content, .hero__visual { position: relative; z-index: 1; }
.eyebrow {
    margin: 0 0 1rem; color: var(--rose-deep); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.2rem; text-transform: uppercase;
}
.hero h1 { margin: 0; font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 1.02; max-width: 12ch; }
.hero__copy, .section-heading p, .story-panel p, .course-card p, .product-card p, .experience-step p, .checkout-band__copy p, .studio-dialog p, .contact-grid, .footer p {
    color: var(--muted); line-height: 1.75;
}
.hero__copy { max-width: 58ch; font-size: 1.02rem; margin: 1.5rem 0 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; margin: 0; }
.hero__stats li {
    min-width: 140px; padding: 1rem 1.15rem; border-radius: 22px; background: rgba(255,255,255,0.7); border: 1px solid rgba(109,72,54,0.08);
}
.hero__stats strong, .course-card__footer strong, .checkout-band__line strong { display: block; font-size: 1.15rem; }
.hero__stats span { color: var(--muted); font-size: 0.86rem; }
.hero__visual { min-height: 620px; }
.hero-card {
    position: absolute; background: rgba(255,250,246,0.86); border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,0.82); box-shadow: var(--shadow); overflow: hidden;
}
.hero-card img { width: 100%; height: 100%; object-fit: cover; }
.hero-card div {
    position: absolute; inset: auto 0 0 0; padding: 1.25rem; background: linear-gradient(180deg, transparent, rgba(59,35,27,0.86)); color: white;
}
.hero-card span {
    display: inline-block; margin-bottom: 0.5rem; font-size: 0.78rem; letter-spacing: 0.14rem; text-transform: uppercase; color: rgba(255,255,255,0.76);
}
.hero-card--main { left: 0; bottom: 0; width: 72%; height: 78%; }
.hero-card--upper { right: 0; top: 1rem; }
.hero-card--lower { right: 1rem; bottom: 2.5rem; }
.hero-card--small { width: 44%; height: 250px; }

.value-strip { padding: 1rem 0 0; }
.value-strip__inner {
    width: min(1200px, calc(100% - 1.5rem)); margin: 0 auto; padding: 1.1rem 1.4rem; border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,0.78), rgba(250,228,213,0.92)); border: 1px solid rgba(124,87,67,0.08); text-align: center; color: var(--muted);
}

.section { padding: 5.5rem 0 1rem; }
.section-heading { max-width: 760px; margin-bottom: 2rem; }
.section-heading h2 { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.08; margin: 0 0 1rem; }
.story-grid, .course-grid, .product-grid, .experience-board, .contact-grid, .field-row { display: grid; gap: 1.25rem; }
.story-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.story-panel, .course-card, .product-card, .checkout-band__card, .contact-card, .experience-step, .drawer__panel, .studio-dialog {
    background: rgba(255,248,243,0.84); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.85); box-shadow: var(--shadow);
}
.story-panel, .checkout-band__card, .contact-card, .experience-step { border-radius: var(--radius-xl); padding: 1.6rem; }
.course-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.course-card, .product-card { border-radius: 28px; overflow: hidden; }
.course-card__media, .product-card__media {
    position: relative; aspect-ratio: 1 / 0.9; background: linear-gradient(135deg, rgba(248,227,218,0.9), rgba(255,255,255,0.94));
}
.course-card__media img, .product-card__media img {
    width: 100%; height: 100%; object-fit: contain; padding: 1.2rem;
}
.course-card__media span {
    position: absolute; left: 1rem; bottom: 1rem; padding: 0.45rem 0.8rem; border-radius: 999px;
    background: rgba(255,255,255,0.84); color: var(--rose-deep); font-size: 0.75rem; letter-spacing: 0.1rem; text-transform: uppercase;
}
.course-card__body, .product-card__body { padding: 1.45rem; }
.pill-row { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 1rem; }
.pill, .product-card__category {
    display: inline-flex; align-items: center; width: fit-content; padding: 0.4rem 0.8rem; border-radius: 999px;
    background: rgba(214,141,149,0.12); color: var(--rose-deep); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08rem;
}
.course-card__focus { font-size: 0.92rem; }
.course-card__footer {
    display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; margin-top: 1.4rem;
}

.experience__layout { display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); gap: 1.5rem; align-items: start; }
.experience-board { grid-template-columns: repeat(3, minmax(0,1fr)); }
.experience-step span {
    display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; margin-bottom: 0.8rem;
    background: linear-gradient(135deg, #f4d7bc, #e5999f); color: white; font-weight: 800;
}

.filter-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.25rem; }
.filter-row button.is-active { color: white; background: linear-gradient(135deg, #d9808a, #b95d68); }
.product-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }

.checkout-band { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 1.5rem; align-items: center; }
.checkout-band__card { padding: 1.5rem; }
.checkout-band__line {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line);
}
.checkout-band__line:last-of-type { margin-bottom: 1.1rem; }

.contact-card { padding: 2rem; }
.contact-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.contact-grid a, .contact-grid span { padding: 1rem 1.15rem; border-radius: 18px; background: rgba(255,255,255,0.72); }
.footer { padding: 3rem 0 4rem; text-align: center; }

.drawer { position: fixed; inset: 0; z-index: 90; display: none; }
.drawer.is-open { display: block; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(49,31,24,0.36); backdrop-filter: blur(8px); }
.drawer__panel {
    position: absolute; top: 1rem; right: 1rem; bottom: 1rem; width: min(560px, calc(100% - 2rem));
    border-radius: 32px; padding: 1.5rem; background: rgba(255,248,244,0.95); overflow-y: auto;
}
.drawer__close {
    position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 50%; font-size: 1.8rem; line-height: 1;
    transform: rotate(45deg); background: rgba(255,255,255,0.86);
}
.drawer__items { display: grid; gap: 0.9rem; margin: 1.25rem 0; }
.drawer-item {
    display: grid; grid-template-columns: 74px minmax(0,1fr) auto; gap: 0.8rem; align-items: center;
    padding: 0.85rem; border-radius: 20px; background: rgba(255,255,255,0.82);
}
.drawer-item img {
    width: 74px; height: 74px; object-fit: contain; border-radius: 18px; background: #fff4ec; padding: 0.5rem;
}
.drawer-item button { width: 36px; height: 36px; border-radius: 50%; background: rgba(214,141,149,0.14); color: var(--rose-deep); }
.checkout-form { display: grid; gap: 1rem; margin-top: 1.2rem; }
.field-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
.checkout-form label { display: grid; gap: 0.45rem; color: var(--muted); font-size: 0.92rem; }
.checkout-form input {
    width: 100%; padding: 0.95rem 1rem; border-radius: 16px; border: 1px solid rgba(107,67,47,0.1); background: rgba(255,255,255,0.82);
}

.studio-dialog { width: min(640px, calc(100% - 1.5rem)); border: 0; border-radius: 28px; padding: 1.6rem; }
.studio-dialog::backdrop { background: rgba(52,28,21,0.42); backdrop-filter: blur(6px); }
.studio-dialog__close { margin-left: auto; display: inline-flex; padding: 0.75rem 1rem; border-radius: 999px; background: rgba(255,255,255,0.84); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 0.08s; }
.reveal--delay-2 { transition-delay: 0.16s; }
.reveal--delay-3 { transition-delay: 0.24s; }
.reveal--delay-4 { transition-delay: 0.32s; }
.is-hidden { display: none; }
.button:hover, .cart-button:hover, .icon-button:hover, .drawer__close:hover, .studio-dialog__close:hover, .filter-row button:hover { transform: translateY(-2px); }

@media (max-width: 1100px) {
    .hero, .experience__layout, .checkout-band, .course-grid, .product-grid, .story-grid { grid-template-columns: 1fr; }
    .hero__visual { min-height: 520px; }
    .product-grid, .course-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .experience-board { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
    .topbar { border-radius: 28px; padding: 1rem; flex-wrap: wrap; }
    .topnav { order: 3; width: 100%; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
    .hero { padding-top: 2rem; min-height: auto; }
    .hero__backdrop { inset: 0; height: 100%; }
    .hero__visual { min-height: 480px; }
    .hero-card--main, .hero-card--small { position: absolute; }
    .hero-card--main { width: 100%; height: 62%; }
    .hero-card--upper, .hero-card--lower { width: 48%; height: 160px; top: auto; bottom: 0; }
    .hero-card--upper { left: 0; }
    .hero-card--lower { right: 0; }
    .product-grid, .course-grid, .contact-grid, .field-row { grid-template-columns: 1fr; }
    .value-strip__inner { border-radius: 26px; }
    .drawer__panel { top: auto; right: 0.5rem; left: 0.5rem; bottom: 0.5rem; width: auto; }
}