@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@500;600;700&display=swap');

:root {
  --paper: #f4f4ef;
  --ink: #20251f;
  --muted: #71796f;
  --line: #d5dad0;
  --acid: #60e40b;
  --soft: #e5e8e1;
  --night: #20261f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { isolation: isolate; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  transform: translateY(-150%);
  border-radius: 999px;
  background: var(--acid);
  padding: 10px 14px;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  z-index: 30;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 18px clamp(22px, 4vw, 64px);
  border-bottom: 1px solid rgba(213,218,208,.8);
  background: rgba(244,244,239,.9);
  backdrop-filter: blur(14px);
}
.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: var(--ink);
  text-decoration: none;
}
.brand img { width: 44px; height: 44px; object-fit: contain; }
.brand-name {
  font: 600 20px/1 'Manrope', sans-serif;
  letter-spacing: -.055em;
}
.site-header nav { display: flex; align-items: center; gap: 28px; }
.site-header nav a {
  color: #5f675d;
  font-size: 13px;
  text-decoration: none;
}
.site-header nav a:hover { color: var(--ink); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 24px; }
.header-cta {
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  padding: 0 0 3px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.language-switch { color: #5f675d; font-size: 13px; font-weight: 600; text-decoration: none; }
.language-switch:hover, .language-switch:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  align-items: end;
  gap: clamp(48px, 8vw, 130px);
  padding: 160px clamp(24px, 7vw, 110px) 82px;
}
.eyebrow {
  margin: 0 0 20px;
  color: #737b70;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero h1,
.section-heading h2,
.experience-heading h2,
.closing-section h2 {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  letter-spacing: -.065em;
}
.hero h1 { max-width: 900px; font-size: clamp(62px, 8.3vw, 124px); line-height: .9; }
.hero-lead {
  max-width: 650px;
  margin: 38px 0 0;
  color: #5e665c;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.45;
}
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 42px; }
.primary-cta {
  border: 0;
  border-radius: 999px;
  background: var(--acid);
  color: var(--ink);
  padding: 14px 18px 14px 22px;
  font-weight: 600;
}
.primary-cta span { display: inline-block; margin-left: 30px; font-size: 20px; transition: transform .2s; }
.primary-cta:hover span { transform: rotate(8deg) scale(1.08); }
.secondary-cta { color: #61695f; font-size: 14px; text-decoration: none; border-bottom: 1px solid #aeb4aa; padding-bottom: 4px; }
.hero-summary { align-self: end; padding: 32px 0 4px; border-top: 1px solid var(--line); }
.hero-summary > p { margin: 0 0 34px; font: 500 clamp(27px, 2.6vw, 40px)/1.06 'Manrope', sans-serif; letter-spacing: -.045em; }
.hero-summary ul { list-style: none; margin: 0; padding: 0; }
.hero-summary li { display: flex; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); color: #545c52; font-size: 14px; }
.hero-summary li span { color: #969d93; font-size: 11px; }

.service-section,
.experience-section,
.closing-section { padding: 120px clamp(24px, 7vw, 110px); }
.service-section { background: var(--night); color: #f2f4ee; }
.service-section,
.experience-section,
.closing-section {
  position: relative;
  border-radius: 38px 38px 0 0;
  box-shadow: 0 -18px 48px rgba(23,29,22,.13);
}
.service-section { z-index: 2; }
.experience-section { z-index: 3; margin-top: -30px; }
.closing-section { z-index: 4; margin-top: -30px; }
.section-heading { display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 80px; align-items: end; }
.section-heading .eyebrow { grid-column: 1 / -1; color: #9ba497; }
.section-heading h2 { font-size: clamp(52px, 6vw, 90px); line-height: .96; }
.section-heading > p:last-child { max-width: 460px; margin: 0 0 8px; color: #aeb6aa; font-size: 18px; line-height: 1.55; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 90px; background: #444c41; }
.service-grid article { min-height: 320px; background: var(--night); padding: 34px; }
.service-grid article > span { color: #8f998b; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.service-grid h3 { margin: 68px 0 16px; font: 500 29px/1.05 'Manrope', sans-serif; letter-spacing: -.04em; }
.service-grid p { margin: 0; color: #adb6a8; line-height: 1.55; }
.service-grid small { display: block; margin-top: 20px; color: #7f897c; font-size: 12px; }
.service-footnote {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding-top: 22px;
  color: #aeb6aa;
  font-size: 13px;
}
.service-footnote strong { color: var(--acid); font-weight: 500; }
.service-footnote span { text-align: right; }

.experience-section { background: #e8ebe4; }
.experience-heading { max-width: 760px; margin-bottom: 36px; }
.experience-heading h2 { font-size: clamp(52px, 5.2vw, 76px); line-height: .96; }
.visual-filter { position: absolute; width: 0; height: 0; overflow: hidden; }
.experience-heading > p:last-child { max-width: 600px; margin: 16px 0 0; color: #667064; font-size: 17px; line-height: 1.45; }
.demo-stage {
  min-height: 480px;
  display: grid;
  grid-template-columns: minmax(320px, .85fr) minmax(460px, 1.15fr);
  overflow: hidden;
  border: 1px solid #cbd1c7;
  border-radius: 24px;
  background: #d5d9d1;
}
.host-scene { position: relative; min-height: 480px; overflow: hidden; container-type: size; }
.host-scene::after {
  content: '';
  position: absolute;
  z-index: 2;
  right: 12%;
  bottom: 6.5%;
  left: 14%;
  height: 24.5%;
  border-radius: 10px 10px 3px 3px;
  background: #101210;
}
.host-pose {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: url(#host-shirt-gray);
  transform-origin: center bottom;
  visibility: hidden;
}
.host-pose.active { visibility: visible; }
.host-pose[data-pose='1'] { transform: scaleY(1.05); }
.host-pose[data-pose='2'] { transform: scaleX(.98); }
.shirt-logo {
  position: absolute;
  z-index: 2;
  width: calc(min(100cqw, 100cqh) * .055);
  height: auto;
  left: calc(50% + min(100cqw, 100cqh) * .035);
  bottom: calc(min(100cqw, 100cqh) * .455);
  pointer-events: none;
}
.demo-progress { position: absolute; z-index: 3; bottom: 24px; left: 24px; display: flex; gap: 8px; }
.demo-progress button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid #838b80; border-radius: 50%; background: transparent; color: #596157; font-size: 11px; }
.demo-progress button.active { border-color: var(--acid); background: var(--acid); color: var(--ink); }
.demo-progress button:disabled { cursor: default; opacity: .46; }
.demo-progress button.active:disabled { opacity: 1; }
.demo-progress button:not(:disabled):hover,
.demo-progress button:not(:disabled):focus-visible { border-color: var(--ink); background: var(--paper); }
.speech-card {
  position: relative;
  align-self: center;
  min-height: 390px;
  display: grid;
  margin: 24px 28px 24px 8px;
  padding: clamp(30px, 3vw, 44px);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(47,55,46,.12);
}
.speech-card::before {
  content: '';
  position: absolute;
  top: 88px;
  left: -26px;
  width: 52px;
  height: 52px;
  transform: rotate(45deg);
  border-radius: 6px;
  background: var(--paper);
}
.demo-panel { position: relative; z-index: 1; align-self: center; }
.demo-panel[hidden] { display: none; }
.demo-label { margin: 0 0 18px; color: #7d857a; font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.mobile-host-portrait { display: none; }
.demo-panel h3 { margin: 0; font: 500 clamp(38px, 3.6vw, 54px)/.98 'Manrope', sans-serif; letter-spacing: -.06em; }
.demo-panel h3 span { color: #6e786a; overflow-wrap: anywhere; }
.entry-form { margin-top: 38px; }
.entry-input { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #828a7f; }
.entry-input input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; padding: 15px 0; color: var(--ink); }
.entry-input input::placeholder { color: #92998f; }
.entry-input button {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: var(--acid);
  color: var(--ink);
  font-size: 22px;
}
.guest-list { margin-top: 24px; padding: 3px 22px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.48); }
.guest-list ul { list-style: none; margin: 0; padding: 0; }
.guest-list li { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--line); color: #697168; font-size: 14px; }
.guest-list li:last-child { border-bottom: 0; }
.guest-list li:nth-child(-n+2) span:last-child,
.guest-list .your-row span:last-child { color: #4c5c43; }
.take-badge-cta { margin-top: 22px; }
.badge-demo { display: grid; grid-template-columns: 40px minmax(200px, 290px) 40px; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.badge-demo > button { width: 40px; height: 40px; border: 1px solid #abb2a8; border-radius: 50%; background: transparent; color: var(--ink); font-size: 18px; }
.badge-demo > button:hover { border-color: var(--acid); background: var(--acid); }
.badge-preview { position: relative; height: 245px; display: grid; place-items: center; }
.badge-art { position: relative; width: 100%; height: 100%; display: grid; place-items: end center; isolation: isolate; }
.badge-art[hidden] { display: none; }
.badge-art strong { overflow-wrap: anywhere; }

/* Each sample is drawn with scalable CSS surfaces, clips, and print details. */
.pass-strap, .festival-strap { position: absolute; z-index: -1; top: -5px; width: 20px; height: 57px; background: #183cd7; box-shadow: inset -4px 0 5px #06176775, 1px 2px 4px #1114; }
.pass-strap { display: grid; place-items: center; writing-mode: vertical-rl; color: #d4dcff; font-size: 5px; font-weight: 700; letter-spacing: .1em; }
.pass-clip, .festival-clip, .forum-clip { position: absolute; z-index: 2; top: 37px; left: 50%; width: 27px; height: 17px; transform: translateX(-50%); border: 1px solid #777e83; border-radius: 3px; background: linear-gradient(90deg, #91999b, #f7f8f5 44%, #939a9e); box-shadow: 0 2px 3px #0004; }
.pass-clip::after, .festival-clip::after, .forum-clip::after { content: ''; display: block; width: 6px; height: 6px; margin: 3px auto; border: 1px solid #7a8183; border-radius: 50%; }
.design-card { position: relative; width: 158px; height: 202px; overflow: hidden; display: grid; grid-template-rows: 47px 1fr 18px 67px; border: 5px solid #edf0f1; border-radius: 8px; background: #f9faf8; box-shadow: 0 14px 22px #26304533, inset 0 0 0 1px #b8bec0; transform: rotate(-2deg); }
.design-card::after, .forum-card::after, .festival-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, #fff6, transparent 35%, #fff2 70%, transparent); }
.design-card-top { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 9px 11px; border-bottom: 1px solid #c7cbcc; color: #5b6264; font-size: 8px; }
.barcode { width: 88px; height: 23px; background: repeating-linear-gradient(90deg, #24292a 0 1px, transparent 1px 3px, #24292a 3px 5px, transparent 5px 7px); }
.design-card strong { align-self: end; padding: 0 11px 5px; color: #11171b; font: 600 18px/1.03 'Manrope', sans-serif; letter-spacing: -.02em; }
.design-role { padding: 0 11px; color: #5a6266; font-size: 7px; text-transform: uppercase; letter-spacing: .05em; }
.design-brand { display: flex; align-items: end; justify-content: space-between; padding: 9px 11px; background: #1535c8; color: white; font: 600 20px/.86 'Manrope', sans-serif; letter-spacing: -.07em; }
.design-brand b { color: #a8c5ff; font-size: 32px; font-weight: 400; }

.forum-clip { top: 56px; width: 34px; height: 20px; }
.forum-card { position: relative; width: min(100%, 280px); height: 180px; overflow: hidden; border: 6px solid #e9eef2; border-radius: 12px; background: #fff; box-shadow: 0 14px 25px #14264a30, inset 0 0 0 1px #0a36c7; transform: rotate(1.5deg); }
.forum-head { height: 49px; display: flex; align-items: center; gap: 8px; padding: 7px 17px; background: #113ad2; color: white; font: 800 14px/.88 'Manrope', sans-serif; letter-spacing: -.045em; }
.forum-symbol { font-size: 30px; line-height: 1; }
.forum-head small { margin-left: auto; align-self: start; font-size: 9px; letter-spacing: .12em; }
.forum-body { height: 104px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 4px 12px; color: #202533; }
.forum-body small { color: #6c78a0; font-size: 7px; font-weight: 700; letter-spacing: .2em; }
.forum-body strong { max-width: 100%; margin: 5px 0; font: 700 27px/1 'Manrope', sans-serif; letter-spacing: -.06em; text-align: center; }
.forum-body span { color: #113ad2; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.forum-foot { display: flex; justify-content: space-between; padding: 3px 12px; border-top: 1px solid #cbd5f8; color: #566ab9; font-size: 7px; letter-spacing: .07em; }

.festival-strap { width: 19px; background: #16191e; }
.festival-clip { top: 24px; }
.festival-card { position: relative; width: 164px; height: 216px; overflow: hidden; border: 4px solid #f4f3ec; border-radius: 7px; background: #f4f3ec; box-shadow: 0 15px 25px #3026304d; transform: rotate(3deg); }
.festival-art { position: relative; height: 151px; overflow: hidden; padding: 11px; background: linear-gradient(145deg, #082a30 5%, #176262 49%, #ff7b39 50%, #ec3c59 88%); color: #fff; }
.festival-art::after { content: ''; position: absolute; right: -40px; bottom: -52px; width: 126px; height: 126px; border: 2px solid #fff8; border-radius: 50%; box-shadow: 0 0 0 12px #fff2, 0 0 0 28px #fff2; }
.festival-sun { position: absolute; top: 21px; right: 9px; width: 44px; height: 44px; border-radius: 50%; background: #ffd655; box-shadow: 0 0 0 8px #ffcf4b33; }
.festival-art small, .festival-art b, .festival-art em { position: relative; z-index: 1; display: block; }
.festival-art small { font-size: 6px; font-weight: 700; letter-spacing: .14em; }
.festival-art b { margin-top: 48px; font: 800 26px/.8 'Manrope', sans-serif; letter-spacing: -.08em; }
.festival-art em { margin-top: 9px; font-size: 7px; font-style: normal; font-weight: 700; letter-spacing: .13em; }
.festival-wave { position: absolute; left: -26px; bottom: 26px; width: 90px; height: 36px; border-top: 2px solid #e9fff0; border-radius: 50%; transform: rotate(-24deg); }
.festival-bottom { height: 57px; display: grid; grid-template-columns: 1fr auto; align-content: center; padding: 5px 9px; color: #171d20; }
.festival-bottom span { grid-column: 1 / -1; color: #ed3e5a; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.festival-bottom strong { min-width: 0; font: 700 15px/1 'Manrope', sans-serif; letter-spacing: -.04em; }
.festival-bottom small { color: #586268; font-size: 5px; font-weight: 800; letter-spacing: .06em; }
.badge-preview.long-name .design-card strong { font-size: 13px; }
.badge-preview.long-name .forum-body strong { font-size: 18px; }
.badge-preview.long-name .festival-bottom strong { font-size: 9px; }
.demo-contact { margin-top: 14px; }

@media (min-width: 981px) {
  .hero,
  .service-section,
  .experience-section,
  .closing-section {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    overflow: hidden;
  }
  .hero { z-index: 0; }
  .service-section {
    display: grid;
    align-content: center;
    padding-top: 88px;
    padding-bottom: 54px;
  }
  .service-grid { margin-top: 54px; }
  .service-grid article { min-height: 250px; }
  .service-grid h3 { margin-top: 44px; }
  .experience-section {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: center;
    overflow-anchor: none;
    padding-top: 86px;
    padding-bottom: 36px;
  }
  .experience-heading {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    column-gap: 60px;
    align-items: end;
    margin-bottom: 28px;
  }
  .experience-heading .eyebrow { grid-column: 1 / -1; margin-bottom: 12px; }
  .experience-heading h2 { font-size: clamp(48px, 4.5vw, 68px); }
  .experience-heading > p:last-child { margin: 0 0 5px; }
  .experience-section .demo-stage { height: 100%; min-height: 0; }
  .experience-section .host-scene { min-height: 0; }
  .experience-section .speech-card { min-height: 0; }

}

.closing-section {
  min-height: 75svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .85fr);
  align-items: center;
  gap: clamp(60px, 10vw, 160px);
  background: var(--night);
  color: #f2f4ee;
}
.closing-section .eyebrow { color: #9da69a; }
.closing-section h2 { font-size: clamp(64px, 7vw, 108px); line-height: .88; }
.closing-section .primary-cta { margin-top: 48px; }
.organizer-faq { width: 100%; max-width: 620px; }
.organizer-faq .eyebrow { margin-bottom: 18px; }
.organizer-faq details { border-top: 1px solid #4a5148; }
.organizer-faq details:last-child { border-bottom: 1px solid #4a5148; }
.organizer-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 18px 0;
  color: #edf0e9;
  cursor: pointer;
  list-style: none;
}
.organizer-faq summary::-webkit-details-marker { display: none; }
.organizer-faq summary span { color: var(--acid); font-size: 21px; font-weight: 400; transition: transform .2s; }
.organizer-faq details[open] summary span { transform: rotate(45deg); }
.organizer-faq details p { max-width: 500px; margin: -3px 34px 18px 0; color: #aeb6aa; font-size: 14px; line-height: 1.5; }

footer { display: flex; justify-content: space-between; gap: 30px; padding: 30px clamp(24px, 4vw, 64px); border-top: 1px solid var(--line); }
footer p { margin: 0; color: #7b8378; font-size: 12px; }

.inquiry[hidden] { display: none; }
.inquiry {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  background: rgba(13,17,13,.76);
  backdrop-filter: blur(12px);
}
.inquiry-shell {
  position: relative;
  width: min(100%, 560px);
  max-height: calc(100svh - 48px);
  overflow: auto;
  border-radius: 16px;
  background: var(--paper);
  padding: 50px 48px 40px;
  box-shadow: 0 28px 80px rgba(0,0,0,.3);
}
.close-inquiry { position: absolute; top: 18px; right: 20px; border: 0; background: transparent; color: #60685e; font-size: 28px; }
.inquiry-shell h2 { margin: 0; font: 500 46px/.98 'Manrope', sans-serif; letter-spacing: -.055em; }
.inquiry-lead { margin: 14px 0 30px; color: #747c72; }
.inquiry form { display: grid; gap: 22px; }
.inquiry label { display: grid; gap: 7px; color: #61685f; font-size: 12px; }
.inquiry input:not([type='range']):not([type='radio']) { width: 100%; border: 0; border-bottom: 1px solid #aeb5ab; outline: 0; background: transparent; padding: 8px 0 10px; color: var(--ink); font-size: 16px; }
.guest-estimate { display: grid; gap: 12px; }
.guest-estimate-heading { display: flex; justify-content: space-between; color: #61685f; font-size: 12px; }
.guest-estimate-heading output { color: var(--ink); font-weight: 600; }
.guest-estimate input { width: 100%; accent-color: var(--ink); }
.range-labels { display: grid; grid-template-columns: repeat(9, 1fr); margin-top: -7px; color: #92988f; font-size: 9px; }
.range-labels span { text-align: center; }
.range-labels span:first-child { text-align: left; }
.range-labels span:last-child { text-align: right; }
.badge-needs { min-width: 0; margin: 0; border: 0; padding: 0; }
.badge-needs legend { margin-bottom: 12px; padding: 0; color: #61685f; font-size: 12px; }
.badge-needs legend span { margin-left: 6px; color: #92988f; }
.badge-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.badge-options label { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 10px; border: 1px solid #c6ccc2; border-radius: 8px; color: var(--ink); cursor: pointer; }
.badge-options label:has(input:checked) { border-color: #6ebd32; background: #eaf8df; }
.badge-options input { flex: none; margin: 0; accent-color: #4ba825; }
.submit-inquiry, .inquiry-ready button { margin-top: 8px; border: 0; border-radius: 999px; background: var(--acid); color: var(--ink); padding: 14px 20px; font-weight: 600; }
.submit-inquiry span { float: right; }
.form-note { margin: -5px 0 0; color: #8a9087; font-size: 11px; line-height: 1.45; }
.inquiry-ready { padding: 25px 0 5px; text-align: center; }
.inquiry-ready > span { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 22px; border-radius: 50%; background: var(--acid); font-size: 23px; }
.inquiry-ready h3 { margin: 0; font: 600 28px/1.1 'Manrope', sans-serif; letter-spacing: -.035em; }
.inquiry-ready p { white-space: pre-line; margin: 20px 0; color: #676e64; line-height: 1.6; }
body.inquiry-open { overflow: hidden; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; align-items: end; padding-top: 145px; }
  .hero-summary { max-width: 520px; }
  .section-heading { grid-template-columns: 1fr; gap: 30px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-grid article { min-height: 0; }
  .service-grid h3 { margin-top: 42px; }
  .demo-stage { grid-template-columns: 1fr; }
  .host-scene { min-height: 440px; }
  .speech-card { min-height: 480px; margin: 0 28px 28px; }
  .speech-card::before { top: -22px; left: 50%; transform: translateX(-50%) rotate(45deg); }
  .closing-section { grid-template-columns: 1fr; gap: 76px; }
  .organizer-faq { max-width: none; }
}

@media (max-width: 640px) {
  .site-header { padding: 16px 20px; }
  .header-actions { gap: 14px; }
  .header-cta { font-size: 12px; }
  .language-switch { font-size: 12px; }
  .hero { min-height: auto; padding: 130px 20px 70px; gap: 70px; }
  .hero h1 { font-size: clamp(56px, 17vw, 78px); }
  .hero-lead { font-size: 18px; }
  .service-section, .experience-section, .closing-section { padding: 88px 20px; }
  .service-section, .experience-section, .closing-section { border-radius: 24px 24px 0 0; }
  .service-grid { margin-top: 60px; }
  .service-footnote { flex-direction: column; gap: 8px; }
  .service-footnote span { text-align: left; line-height: 1.6; }
  .section-heading h2, .experience-heading h2 { font-size: 52px; }
  .demo-stage { border-radius: 16px; overflow-anchor: none; }
  .host-scene { min-height: 220px; }
  .demo-progress { bottom: 14px; left: 14px; }
  .speech-card { min-height: 450px; margin: 0 12px 12px; padding: 34px 24px; border-radius: 14px; }
  .demo-kicker { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
  .demo-kicker .demo-label { margin: 0; }
  .mobile-host-portrait { position: relative; display: block; flex: none; width: 74px; height: 74px; overflow: hidden; border: 1px solid #c4cbc0; border-radius: 50%; background: #d5d9d1; }
  #demo-arrival .mobile-host-portrait { display: none; }
  .mobile-host-portrait img { position: absolute; top: -25px; left: 50%; width: 170px; height: 170px; max-width: none; transform: translateX(-50%); filter: url(#host-shirt-gray); }
  .demo-panel h3 { font-size: 39px; }
  .badge-demo { grid-template-columns: 34px minmax(155px, 1fr) 34px; gap: 7px; }
  .badge-demo > button { width: 34px; height: 34px; }
  .badge-preview { height: 230px; }
  .forum-card { height: 165px; }
  .forum-body { height: 89px; }
  .forum-clip { top: 57px; }
  .design-card { width: 145px; height: 190px; }
  .festival-card { width: 152px; height: 204px; }
  .festival-art { height: 145px; }
  .festival-bottom { height: 51px; }
  .closing-section { min-height: 70svh; }
  .closing-section h2 { font-size: 64px; }
  footer { display: grid; }
  .inquiry { padding: 10px; }
  .inquiry-shell { max-height: calc(100svh - 20px); padding: 44px 24px 28px; }
  .inquiry-shell h2 { font-size: 39px; }
  .badge-options { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}