:root {
  --ink: #2c201b;
  --muted: #6d5e55;
  --orange: #ed6b23;
  --orange-dark: #ae4318;
  --orange-deep: #8e3216;
  --gold: #ffc06b;
  --cream: #fff9f1;
  --paper: #fffefa;
  --line: #eedfce;
  --shadow: 0 20px 50px rgba(88, 46, 22, .09);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--cream);
  scroll-behavior: smooth;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
main { overflow: hidden; }
a { color: inherit; }
button { font: inherit; }
img { max-width: 100%; }
h1, h2, h3, p, figure { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.045em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #8c3213; outline-offset: 4px; }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 10; padding: 10px 16px; background: #fff; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.site-header { background: #fff; border-bottom: 1px solid #f0e6dc; }
.header-inner { max-width: 1220px; margin: auto; padding: 18px 28px; display: flex; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand-mark { display: grid; place-items: center; width: 68px; height: 58px; flex: none; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; font-weight: 800; }
.brand small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-top: 2px; font-weight: 750; }
.header-nav { display: flex; gap: 24px; margin: 0 auto; }
.header-nav a { text-decoration: none; color: #69594d; font-size: 12px; font-weight: 750; white-space: nowrap; }
.header-nav a:hover { color: var(--orange-dark); }
.header-home { flex: none; text-decoration: none; border: 1px solid #e9d5c4; background: #fff8f1; padding: 11px 15px; border-radius: 10px; font-size: 12px; color: var(--orange-dark); font-weight: 800; }
.header-home:hover { background: #ffedda; }
.hero { position: relative; color: white; background: radial-gradient(circle at 75% 35%, #a94120 0, transparent 36%), linear-gradient(122deg, #2a1b18 0%, #49241a 57%, #75321b 100%); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .15; pointer-events: none; background-image: radial-gradient(#ffba74 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(90deg, transparent 45%, #000); }
.hero::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 7px; background: linear-gradient(90deg, #f45e1c, #ffaf46, #ffe1ad); }
.hero-inner { position: relative; max-width: 1220px; min-height: 595px; padding: 72px 28px 74px; margin: auto; display: grid; grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr); gap: 28px; align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { margin-bottom: 19px; font-size: 11px; letter-spacing: .19em; font-weight: 900; color: var(--orange-dark); }
.eyebrow-light { color: #ffc990; }
.eyebrow-line { display: inline-block; width: 23px; height: 2px; margin-right: 8px; vertical-align: middle; background: currentColor; }
.hero h1 { max-width: 660px; font-size: clamp(48px, 5.35vw, 77px); line-height: 1.06; margin-bottom: 22px; }
.hero h1 em, .client-intro h2 em { font-style: normal; color: var(--gold); }
.hero-copy > p:not(.eyebrow) { max-width: 530px; line-height: 1.75; font-size: 16px; color: #f6e5d9; margin-bottom: 29px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 49px; border-radius: 11px; padding: 13px 19px; font-size: 13px; font-weight: 850; text-decoration: none; transition: transform .18s, background .18s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--orange); color: #fff; box-shadow: 0 10px 24px #2e120f35; }
.button-primary:hover { background: #fa7b28; }
.button-ghost { color: #fff; border: 1px solid #fff6; background: #fff1; }
.button-ghost:hover { background: #fff2; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 11px 21px; margin-top: 44px; color: #e5bca5; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.hero-visual { position: relative; align-self: center; }
.hero-glow { position: absolute; width: 74%; aspect-ratio: 1; left: 13%; top: 9%; border-radius: 50%; background: #ff802e60; filter: blur(80px); }
.hero-frame { position: relative; transform: rotate(-3deg); margin: 0 0 0 10px; padding: 10px; background: #fff; border-radius: 18px; box-shadow: 0 35px 65px #1a0e0f90, 0 0 0 1px #ffffff50; }
.hero-frame img { display: block; width: 100%; height: auto; border-radius: 10px; }
.hero-frame figcaption { padding: 9px 9px 3px; color: #8a604f; font-size: 9px; letter-spacing: .16em; font-weight: 900; }
.hero-sticker { position: absolute; right: -12px; bottom: -28px; display: grid; place-items: center; width: 112px; aspect-ratio: 1; border-radius: 50%; background: #ffb84f; color: #4e270d; text-align: center; line-height: 1.25; font-size: 13px; font-weight: 950; transform: rotate(12deg); box-shadow: 0 13px 30px #16090755; }
.start { max-width: 1220px; margin: auto; padding: 86px 28px 96px; scroll-margin-top: 24px; }
.section-heading { max-width: 710px; }
.section-heading h2, .faq-heading h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.09; margin-bottom: 14px; }
.section-heading > p:last-child { font-size: 15px; line-height: 1.7; color: var(--muted); }
.role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 34px; }
.role-grid a { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 204px; padding: 21px; border: 1px solid var(--line); border-radius: 18px; background: #fff; text-decoration: none; box-shadow: 0 9px 28px #7438170b; transition: transform .2s, box-shadow .2s, border-color .2s; }
.role-grid a:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #e99359; }
.role-number { color: var(--orange-dark); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.role-symbol { display: grid; place-items: center; width: 42px; height: 42px; margin-top: 18px; border-radius: 12px; background: #fff0e1; color: var(--orange); font-size: 26px; line-height: 1; }
.role-grid strong { font-size: 18px; margin-top: 15px; }
.role-grid small { margin-top: 5px; max-width: 180px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.role-arrow { position: absolute; top: 20px; right: 20px; color: var(--orange-dark); font-size: 20px; }
.chapter { padding: 88px max(28px, calc((100vw - 1164px) / 2)) 82px; background: #fff; scroll-margin-top: 0; }
.chapter-soft { background: #fff3e6; }
.chapter-head { max-width: 1164px; margin: 0 auto 45px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.chapter-head > div { max-width: 760px; }
.chapter-kicker { margin-bottom: 16px; font-size: 11px; font-weight: 950; letter-spacing: .17em; color: var(--orange-dark); }
.chapter-kicker span { margin: 0 6px; opacity: .5; }
.chapter-head h2, .client-intro h2 { font-size: clamp(34px, 4.25vw, 56px); line-height: 1.08; margin-bottom: 16px; }
.chapter-head p:last-child { max-width: 720px; margin-bottom: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.text-link { flex: none; margin-bottom: 8px; color: var(--orange-dark); text-decoration: none; font-size: 13px; font-weight: 850; border-bottom: 1px solid #d9a17b; padding-bottom: 5px; }
.text-link:hover, .open-link:hover { color: #6d2811; }
.feature-layout { max-width: 1164px; margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .97fr); gap: 56px; align-items: start; }
.feature-layout-reverse { grid-template-columns: minmax(0, .97fr) minmax(0, 1fr); }
.step-list { padding: 0; margin: 0; list-style: none; counter-reset: steps; }
.step-list li { counter-increment: steps; position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 13px; padding: 0 0 21px; margin-bottom: 22px; border-bottom: 1px solid #eaded3; }
.step-list li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.step-list li::before { content: counter(steps, decimal-leading-zero); display: grid; place-items: center; align-self: start; width: 39px; height: 39px; border-radius: 11px; background: #fff0dc; color: var(--orange-dark); font-size: 12px; font-weight: 900; }
.step-list h3 { margin: 1px 0 7px; font-size: 17px; }
.step-list p { color: #65584f; line-height: 1.7; font-size: 13px; margin: 0; }
.step-list a { color: var(--orange-dark); font-weight: 800; text-underline-offset: 3px; }
.figure-stack { display: grid; gap: 20px; }
.visual-card { margin: 0; padding: 10px; border: 1px solid #ead7c5; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.visual-card img { display: block; width: 100%; height: auto; border-radius: 11px; background: #ffead4; }
.visual-card figcaption { padding: 13px 10px 7px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.visual-card figcaption span { display: block; color: var(--orange-dark); font-size: 10px; font-weight: 900; letter-spacing: .13em; margin-bottom: 4px; }
.visual-card-large { align-self: start; }
.tip { max-width: 1164px; margin: 36px auto 0; display: flex; align-items: start; gap: 15px; padding: 19px 22px; border-radius: 15px; border-left: 4px solid var(--orange); background: #fff3e6; }
.tip-icon { font-size: 22px; color: var(--orange); }
.tip p { margin: 0; color: #695344; font-size: 13px; line-height: 1.6; }
.client-section { position: relative; padding: 90px max(28px, calc((100vw - 1164px) / 2)); background: #311f1a; color: #fff; scroll-margin-top: 0; }
.client-section::before { content: ""; position: absolute; width: 540px; height: 540px; top: -250px; right: -180px; border-radius: 50%; background: #f4772940; filter: blur(40px); pointer-events: none; }
.client-intro, .client-grid, .client-note { position: relative; max-width: 1164px; margin-left: auto; margin-right: auto; }
.client-intro { max-width: 790px; margin-left: 0; }
.client-section .chapter-kicker { color: #ffba7e; }
.client-intro h2 { max-width: 700px; }
.client-intro h2 em { color: #ffab63; }
.client-intro > p:last-child { max-width: 750px; line-height: 1.75; color: #e9d4c9; margin-bottom: 38px; }
.client-grid { display: grid; grid-template-columns: minmax(0, 590px); gap: 21px; }
.client-card { min-width: 0; padding: 27px; border-radius: 20px; background: #fffaf3; color: var(--ink); box-shadow: 0 18px 40px #1b0d0e36; }
.client-card-top { display: flex; align-items: center; justify-content: space-between; }
.client-badge { font-size: 10px; color: var(--orange-dark); font-weight: 950; letter-spacing: .14em; }
.client-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; background: #ffe9d0; color: var(--orange-dark); font-size: 20px; }
.client-card h3 { font-size: 27px; margin: 16px 0 7px; }
.client-card > p { color: var(--muted); font-size: 13px; line-height: 1.65; min-height: 43px; }
.client-visual { margin: 18px 0 14px; padding: 8px 8px 0; border: 1px solid #efddc9; border-radius: 14px; background: #fff; }
.client-visual img { display: block; width: 100%; height: auto; border-radius: 8px; }
.client-visual figcaption { padding: 8px 2px 11px; color: #897465; font-size: 10px; }
.client-steps { margin: 16px 0 22px; padding-left: 19px; color: #5e5047; font-size: 12px; line-height: 1.65; }
.client-steps li { padding-left: 3px; margin-bottom: 6px; }
.client-steps li::marker { color: var(--orange); font-weight: 900; }
.link-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px 14px; border: 1px solid #efcfb6; border-radius: 12px; background: #fff0df; padding: 14px; }
.link-box > span:first-child { grid-column: 1 / -1; color: #a14d21; font-size: 9px; letter-spacing: .13em; font-weight: 900; }
.link-box code { overflow-wrap: anywhere; font-size: 11px; color: #52331f; line-height: 1.5; }
.copy-button { appearance: none; border: 0; border-radius: 8px; background: var(--orange); color: white; padding: 10px 12px; font-size: 11px; font-weight: 850; cursor: pointer; }
.copy-button:hover { background: var(--orange-dark); }
.copy-status { grid-column: 1 / -1; min-height: 0; color: #8e3216; font-size: 11px; font-weight: 750; }
.copy-status:empty { display: none; }
.open-link { display: inline-block; margin-top: 17px; color: var(--orange-dark); font-size: 12px; font-weight: 850; text-decoration: none; border-bottom: 1px solid #d7a27e; padding-bottom: 4px; }
.client-note { display: flex; gap: 15px; align-items: start; margin-top: 25px; padding: 18px 21px; border: 1px solid #e5a56c7a; background: #f0792823; border-radius: 12px; }
.client-note > span { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ffb875; color: #512513; font-weight: 950; }
.client-note p { margin: 0; color: #f5ddd0; font-size: 12px; line-height: 1.7; }
.faq { max-width: 1164px; margin: auto; padding: 92px 28px; display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 50px; }
.faq-heading h2 { max-width: 330px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { padding: 19px 0; border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; font-size: 15px; font-weight: 800; padding-right: 24px; }
.faq-list p { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.closing { max-width: 1164px; margin: 0 auto 84px; padding: 37px 40px; border-radius: 20px; background: linear-gradient(110deg, #c5501d, #f68129); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.closing h2 { max-width: 650px; font-size: clamp(26px, 3vw, 40px); line-height: 1.15; margin-bottom: 0; }
.closing .eyebrow { margin-bottom: 10px; color: #ffe2bf; }
.closing .button-primary { flex: none; background: #fff; color: #973b19; }
.closing .button-primary:hover { background: #fff1e1; }
.site-footer { max-width: 1220px; margin: auto; padding: 25px 28px 30px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px; border-top: 1px solid var(--line); color: #8b7769; font-size: 11px; }
.site-footer a { text-decoration: none; font-weight: 800; color: var(--orange-dark); }
@media (max-width: 1050px) {
  .header-nav { gap: 13px; }
  .hero-inner { min-height: 540px; }
  .feature-layout { gap: 31px; }
  .hero-sticker { right: -4px; }
}
@media (max-width: 820px) {
  .header-nav { display: none; }
  .header-home { margin-left: auto; }
  .hero-inner { grid-template-columns: 1fr; padding-top: 72px; gap: 60px; }
  .hero-copy { max-width: 690px; }
  .hero-visual { max-width: 630px; width: 100%; justify-self: center; }
  .role-grid { grid-template-columns: repeat(2, 1fr); }
  .chapter-head { display: block; }
  .chapter-head .text-link { display: inline-block; margin-top: 22px; }
  .feature-layout, .feature-layout-reverse { grid-template-columns: 1fr; }
  .figure-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-layout-reverse .visual-card { order: 2; }
  .client-grid { gap: 14px; }
  .faq { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .header-inner { padding: 15px 18px; }
  .header-home { font-size: 11px; padding: 10px 11px; }
  .brand strong { font-size: 14px; }
  .brand-mark { width: 58px; height: 48px; }
  .hero-inner { padding: 65px 20px 68px; gap: 47px; }
  .hero h1 { font-size: clamp(41px, 10vw, 58px); }
  .hero-copy > p:not(.eyebrow) { font-size: 14px; }
  .hero-meta { gap: 10px 15px; margin-top: 31px; }
  .hero-frame { margin: 0 10px 0 0; }
  .hero-sticker { width: 78px; font-size: 9px; right: 0; bottom: -22px; }
  .start { padding: 70px 18px; }
  .role-grid { grid-template-columns: 1fr; gap: 11px; margin-top: 26px; }
  .role-grid a { min-height: 112px; padding: 17px 18px 17px 84px; }
  .role-number { position: absolute; top: 18px; left: 18px; }
  .role-symbol { position: absolute; left: 16px; top: 24px; width: 44px; height: 44px; margin: 0; }
  .role-grid strong { margin-top: 13px; }
  .chapter, .client-section { padding: 70px 18px; }
  .chapter-head { margin-bottom: 32px; }
  .chapter-head h2, .client-intro h2 { font-size: clamp(34px, 8.5vw, 46px); }
  .chapter-head p:last-child { font-size: 14px; }
  .step-list li { grid-template-columns: 39px minmax(0, 1fr); gap: 9px; }
  .step-list h3 { font-size: 15px; }
  .figure-stack { grid-template-columns: 1fr; }
  .tip { margin-top: 28px; }
  .client-grid { grid-template-columns: 1fr; }
  .client-card { padding: 20px; }
  .client-card > p { min-height: auto; }
  .faq { padding: 70px 20px; }
  .closing { margin: 0 18px 60px; padding: 30px 24px; display: block; }
  .closing .button { margin-top: 23px; }
  .site-footer { padding: 24px 18px; }
}
@media (max-width: 390px) {
  .hero-actions { display: grid; }
  .link-box { grid-template-columns: 1fr; }
  .copy-button { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}