:root {
    --slk-paper: #f4f5f3;
    --slk-white: #ffffff;
    --slk-ink: #14201c;
    --slk-muted: #52605b;
    --slk-line: rgba(20, 32, 28, 0.14);
    --slk-green: #214a3c;
    --slk-green-bright: #d8f4e8;
    --slk-navy: #151c35;
    --slk-coral: #ee7668;
    --slk-radius: 16px;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 20px); }
body { background: #050505; }
.slk-page { padding-top: var(--header-height); background: var(--slk-paper); color: var(--slk-ink); overflow: hidden; }
.slk-page, .slk-page button { font-family: var(--font-serif); }
.slk-page button, .slk-page a { letter-spacing: normal; }
.slk-page h1, .slk-page h2, .slk-page h3 { color: inherit; }
.slk-page h1, .slk-page h2, .slk-page h3, .slk-page p { text-wrap: pretty; }
.slk-page h1, .slk-page h2, .slk-page h3 { text-wrap: balance; }
.slk-page a:focus-visible, .slk-page button:focus-visible, .slk-nav a:focus-visible, .slk-nav button:focus-visible {
    outline: 3px solid var(--slk-coral); outline-offset: 4px;
}
.slk-container { width: min(100% - 48px, 1240px); margin-inline: auto; }
.slk-section { padding: clamp(88px, 10vw, 148px) 0; }
.slk-section + .slk-section { border-top: 1px solid var(--slk-line); }
.slk-display { margin: 0; font-size: clamp(2.25rem, 3.8vw, 3.5rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
.slk-lead { max-width: 680px; margin: 28px 0 0; color: var(--slk-muted); font-size: clamp(1.05rem, 1.45vw, 1.22rem); line-height: 1.7; }

.slk-nav { background: #050505; }
.slk-nav .slk-language { margin-left: 12px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.14); color: #aaaab0; font-size: .74rem; text-decoration: none; }
.slk-nav .slk-language:hover { color: #fff; }
.slk-menu-icon, .slk-menu-icon::before, .slk-menu-icon::after { width: 22px; height: 2px; display: block; border-radius: 2px; background: currentColor; }
.slk-menu-icon { position: relative; }
.slk-menu-icon::before, .slk-menu-icon::after { position: absolute; left: 0; content: ""; }
.slk-menu-icon::before { top: -7px; }
.slk-menu-icon::after { top: 7px; }

.slk-hero { min-height: min(900px, calc(100svh - var(--header-height))); padding: clamp(70px, 8vw, 110px) 0; display: flex; align-items: center; background: var(--slk-paper); }
.slk-hero .slk-container { width: min(100% - 48px, 1360px); }
.slk-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr); gap: clamp(48px, 6vw, 88px); align-items: center; }
.slk-brandline { margin: 0 0 26px; display: flex; align-items: center; gap: 12px; color: var(--slk-green); font-size: .84rem; font-weight: 700; }
.slk-brandline img { width: 36px; height: 36px; border-radius: 9px; }
.slk-hero h1 { max-width: 100%; margin: 0; font-size: clamp(2.9rem, 4.1vw, 3.8rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.02; overflow-wrap: normal; }
.slk-hero-copy > p:not(.slk-brandline):not(.slk-facts) { max-width: 620px; margin: 30px 0 0; color: var(--slk-muted); font-size: clamp(1.08rem, 1.5vw, 1.24rem); line-height: 1.68; }
.slk-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.slk-page .slk-store { min-height: 52px; padding: 0 21px; border: 1px solid var(--slk-green); border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; background: var(--slk-green); color: #fff; font-size: .95rem; font-weight: 700; letter-spacing: .005em; word-spacing: .06em; line-height: 1.2; text-decoration: none; transition: background-color .18s ease, border-color .18s ease; }
.slk-page .slk-store:hover { background: #17362c; border-color: #17362c; color: #fff; }
.slk-facts { margin: 20px 0 0; color: #69746f; font-size: .78rem; line-height: 1.55; }
.slk-hero-art { position: relative; min-height: 740px; }
.slk-word-backdrop { position: absolute; inset: 10% -14% auto -8%; color: rgba(33,74,60,.08); font-family: Georgia, serif; font-size: clamp(6rem, 13vw, 12rem); line-height: .8; white-space: nowrap; }
.slk-phone { position: absolute; overflow: hidden; border: 8px solid #1b1c1d; border-radius: 48px; background: #111; box-shadow: 0 8px 0 rgba(20,32,28,.14); }
.slk-phone img { width: 100%; height: 100%; display: block; object-fit: cover; }
.slk-phone--hero { right: 10%; bottom: 0; z-index: 2; width: min(57%, 330px); aspect-ratio: 1170 / 2532; }
.slk-phone--echo { left: 5%; bottom: 4%; z-index: 1; width: min(48%, 270px); aspect-ratio: 1170 / 2532; transform: rotate(-5deg); opacity: .92; }

.slk-ritual { background: var(--slk-navy); color: #fff; }
.slk-ritual-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(420px,1.2fr); gap: clamp(50px, 9vw, 140px); align-items: center; }
.slk-ritual .slk-lead { color: #bfc5d6; }
.slk-word-card { padding: clamp(38px, 6vw, 72px); background: #f4eee5; color: #171b19; border-radius: var(--slk-radius); }
.slk-word-card small { display: block; color: #68706c; font-size: .78rem; }
.slk-word-card h3 { margin: 34px 0 12px; font-family: Georgia, serif; font-size: clamp(2.65rem, 5vw, 4.6rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.04; overflow-wrap: anywhere; }
.slk-word-card .slk-part { margin: 0; color: #4f5c56; }
.slk-word-card .slk-definition { max-width: 520px; margin: 30px 0 0; font-size: 1.08rem; line-height: 1.68; }
.slk-word-card blockquote { margin: 28px 0 0; padding-top: 24px; border-top: 1px solid rgba(20,32,28,.16); color: #46514c; font-family: Georgia, serif; font-size: 1.05rem; font-style: italic; line-height: 1.6; }
.slk-word-controls { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; }
.slk-page .slk-word-controls button { min-height: 44px; padding: 0 16px; border: 1px solid rgba(20,32,28,.32); border-radius: 999px; background: transparent; color: var(--slk-ink); cursor: pointer; font-weight: 650; letter-spacing: 0; }
.slk-word-controls button:hover { background: rgba(20,32,28,.08); }

.slk-journey-head { display: grid; grid-template-columns: minmax(0,.8fr) minmax(320px,.5fr); gap: 52px; align-items: end; }
.slk-journey-head .slk-lead { margin: 0; }
.slk-story { margin-top: clamp(70px, 9vw, 120px); display: grid; gap: clamp(90px, 12vw, 160px); }
.slk-story-row { display: grid; grid-template-columns: minmax(0,.78fr) minmax(380px,1.22fr); gap: clamp(48px, 8vw, 120px); align-items: center; }
.slk-story-row:nth-child(even) { grid-template-columns: minmax(380px,1.22fr) minmax(0,.78fr); }
.slk-story-row:nth-child(even) .slk-story-copy { order: 2; }
.slk-story-copy h3 { margin: 0; font-size: clamp(1.9rem, 3.2vw, 3rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.06; }
.slk-story-copy p { margin: 24px 0 0; color: var(--slk-muted); font-size: 1.05rem; line-height: 1.72; }
.slk-story-copy ul { margin: 28px 0 0; padding: 0; list-style: none; }
.slk-story-copy li { padding: 13px 0; border-top: 1px solid var(--slk-line); color: var(--slk-ink); font-size: .94rem; }
.slk-screen-stage { min-height: 650px; position: relative; border-radius: var(--slk-radius); overflow: hidden; background: #d8f4e8; }
.slk-screen-stage--blue { background: #cfeef3; }
.slk-screen-stage--coral { background: #f0a093; }
.slk-screen-stage .slk-phone { top: 9%; bottom: auto; width: min(49%, 300px); aspect-ratio: 1170/2532; }
.slk-screen-stage .slk-phone:first-child { left: 11%; transform: rotate(-3deg); }
.slk-screen-stage .slk-phone:last-child { right: 11%; top: 15%; transform: rotate(4deg); }
.slk-screen-stage .slk-phone:only-child { left: 50%; right: auto; top: auto; bottom: 5%; width: min(44%, 270px); transform: translateX(-50%); }

.slk-widgets { background: var(--slk-green); color: #fff; }
.slk-widgets-grid { display: grid; grid-template-columns: minmax(0,.65fr) minmax(460px,1.35fr); gap: clamp(50px, 8vw, 110px); align-items: center; }
.slk-widgets .slk-lead { color: #cbded7; }
.slk-widget-image { width: auto; max-width: 100%; max-height: 760px; margin-inline: auto; display: block; border: 7px solid #1b1c1d; border-radius: 48px; background: #1b1c1d; }

.slk-access-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(400px,1.2fr); gap: clamp(54px, 9vw, 130px); align-items: start; }
.slk-access-list { border-top: 1px solid var(--slk-line); }
.slk-access-item { padding: 28px 0; border-bottom: 1px solid var(--slk-line); }
.slk-access-item h3 { margin: 0; font-size: 1.2rem; }
.slk-access-item p { margin: 10px 0 0; color: var(--slk-muted); line-height: 1.65; }

.slk-faq-layout { display: grid; grid-template-columns: minmax(280px,.7fr) minmax(0,1.3fr); gap: clamp(56px, 9vw, 140px); }
.slk-faq { border-top: 1px solid var(--slk-line); }
.slk-faq details { border-bottom: 1px solid var(--slk-line); }
.slk-faq summary { position: relative; padding: 25px 48px 25px 0; cursor: pointer; list-style: none; font-size: 1.08rem; font-weight: 700; line-height: 1.4; }
.slk-faq summary::-webkit-details-marker { display: none; }
.slk-faq summary::after { position: absolute; right: 3px; top: 23px; content: "+"; font-size: 1.4rem; font-weight: 400; }
.slk-faq details[open] summary::after { content: "−"; }
.slk-faq-answer { padding: 0 42px 25px 0; }
.slk-faq-answer p { margin: 0; color: var(--slk-muted); line-height: 1.7; }

.slk-close { padding: clamp(96px, 12vw, 170px) 0; background: var(--slk-coral); color: #171918; text-align: center; }
.slk-close h2 { max-width: 780px; margin: 0 auto; color: #171918; font-size: clamp(2.65rem, 5.2vw, 4.5rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1; }
.slk-close p { max-width: 620px; margin: 28px auto 0; color: #2e2927; font-size: 1.1rem; line-height: 1.65; }
.slk-close .slk-actions { justify-content: center; }

@media (max-width: 1080px) {
    .slk-hero-grid, .slk-ritual-grid, .slk-journey-head, .slk-story-row, .slk-story-row:nth-child(even), .slk-widgets-grid, .slk-access-grid, .slk-faq-layout { grid-template-columns: 1fr; }
    .slk-hero-grid { gap: 42px; }
    .slk-hero-copy { max-width: 760px; }
    .slk-hero h1 { max-width: 760px; }
    .slk-hero-art { min-height: 740px; width: min(100%, 650px); margin-inline: auto; }
    .slk-journey-head .slk-lead { margin-top: 0; }
    .slk-story-row:nth-child(even) .slk-story-copy { order: initial; }
    .slk-story-copy { max-width: 680px; }
    .slk-faq-layout { gap: 50px; }
}

@media (max-width: 768px) {
    .slk-container { width: min(100% - 32px, 1240px); }
    .slk-hero .slk-container { width: min(100% - 32px, 1360px); }
    .slk-nav .slk-language { display: none; }
    .slk-hero { min-height: auto; padding: 64px 0 78px; }
    .slk-display { font-size: clamp(2.1rem, 8.8vw, 3rem); letter-spacing: -.015em; }
    .slk-hero h1 { max-width: 100%; font-size: clamp(2.2rem, 9.25vw, 2.85rem); letter-spacing: -.01em; line-height: 1.06; }
    .slk-hero-art { min-height: 570px; margin-top: 10px; }
    .slk-phone { border-width: 6px; border-radius: 37px; }
    .slk-phone--hero { right: 6%; width: min(52%, 245px); }
    .slk-phone--echo { left: 7%; width: min(43%, 205px); }
    .slk-word-backdrop { top: 14%; left: -5%; font-size: 28vw; }
    .slk-word-card { padding: 32px 24px; }
    .slk-word-card h3 { font-size: clamp(2.35rem, 12vw, 3.5rem); }
    .slk-screen-stage { min-height: 520px; }
    .slk-screen-stage .slk-phone { width: 54%; top: 8%; }
    .slk-screen-stage .slk-phone:first-child { left: 3%; }
    .slk-screen-stage .slk-phone:last-child { right: 3%; top: 14%; }
    .slk-screen-stage .slk-phone:only-child { left: 50%; right: auto; top: auto; bottom: 5%; width: min(46%, 230px); transform: translateX(-50%); }
    .slk-widgets-grid { gap: 42px; }
    .slk-widget-image { max-height: min(68svh, 600px); }
    .slk-access-grid { gap: 48px; }
}

@media (max-width: 430px) {
    .slk-section { padding: 76px 0; }
    .slk-actions { display: grid; }
    .slk-store { width: 100%; justify-content: center; }
    .slk-hero-art { min-height: 480px; }
    .slk-phone--hero { width: min(56%, 210px); right: 2%; }
    .slk-phone--echo { width: min(47%, 176px); left: 1%; }
    .slk-screen-stage { min-height: 460px; }
    .slk-screen-stage .slk-phone { width: 57%; }
    .slk-screen-stage .slk-phone:only-child { left: 50%; right: auto; top: auto; bottom: 5%; width: min(52%, 190px); transform: translateX(-50%); }
    .slk-widget-image { border-width: 5px; border-radius: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .slk-page *, .slk-page *::before, .slk-page *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}