:root {
  --bo-ink: #21152a;
  --bo-muted: #6f6477;
  --bo-line: #e8e1ed;
  --bo-bg: #fbf9fc;
  --bo-soft: #f3edf7;
  --bo-purple: #6f48a6;
  --bo-deep: #32183f;
  --bo-lilac: #b894dc;
  --bo-mint: #3fb7a7;
  --bo-blue: #244f8f;
  --bo-white: #fff;
  --bo-radius: 8px;
  --bo-shadow: 0 22px 60px rgba(41, 22, 56, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--bo-ink);
  background: var(--bo-bg);
  font-family: "Noto Sans KR", "Inter", Arial, sans-serif;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
.sound_only, #skip_to_container a {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
#skip_to_container a:focus {
  z-index: 99999;
  width: auto;
  height: auto;
  padding: 12px 16px;
  clip: auto;
  background: var(--bo-deep);
  color: #fff;
}

.bo-container {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}
.bo-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(255,255,255,.16);
  color: #fff;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.bo-header.is-scrolled {
  background: rgba(255,255,255,.94);
  color: var(--bo-ink);
  border-color: var(--bo-line);
  box-shadow: 0 12px 30px rgba(35, 18, 49, .08);
  backdrop-filter: blur(16px);
}
.bo-header-inner {
  width: min(1240px, calc(100% - 32px));
  min-height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.bo-logo, .bo-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter", sans-serif;
  font-weight: 900;
  letter-spacing: 0;
}
.bo-logo img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}
.bo-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 15px;
  font-weight: 700;
}
.bo-nav a { opacity: .86; }
.bo-nav a:hover { opacity: 1; }
.bo-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bo-admin-link {
  padding: 10px 12px;
  border: 1px solid currentColor;
  border-radius: var(--bo-radius);
  font-size: 13px;
  opacity: .78;
}
.bo-cta {
  padding: 12px 17px;
  color: #fff;
  background: var(--bo-purple);
  border-radius: var(--bo-radius);
  font-weight: 800;
  box-shadow: 0 12px 26px rgba(111, 72, 166, .28);
}
.bo-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--bo-purple);
  border-radius: var(--bo-radius);
  cursor: pointer;
}
.bo-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  background: #fff;
}
.bo-mobile-nav {
  display: none;
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto 16px;
  padding: 14px;
  background: #fff;
  color: var(--bo-ink);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-radius);
  box-shadow: var(--bo-shadow);
}
.bo-mobile-nav a {
  display: block;
  padding: 12px;
  font-weight: 800;
}

.bo-main { overflow: hidden; }
.bo-hero {
  position: relative;
  min-height: 780px;
  padding: 158px 0 92px;
  color: #fff;
  background:
    linear-gradient(120deg, rgba(29, 13, 40, .96), rgba(49, 22, 65, .88)),
    radial-gradient(circle at 88% 20%, rgba(184,148,220,.5), transparent 34%),
    #24142f;
}
.bo-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 150px;
  background: linear-gradient(180deg, transparent, rgba(251,249,252,1));
  pointer-events: none;
}
.bo-hero-bg {
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.bo-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: 70px;
  align-items: center;
}
.bo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bo-mint);
  font-family: "Inter", "Noto Sans KR", sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.bo-eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  background: currentColor;
  border-radius: 50%;
}
.bo-hero h1 {
  margin: 24px 0 22px;
  font-size: clamp(50px, 6.4vw, 88px);
  line-height: .98;
  letter-spacing: 0;
  font-weight: 900;
}
.bo-hero h1 em {
  color: var(--bo-lilac);
  font-style: normal;
}
.bo-hero p {
  max-width: 660px;
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 20px;
  word-break: keep-all;
}
.bo-hero-actions, .bo-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.bo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: var(--bo-radius);
  font-weight: 900;
}
.bo-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--bo-purple), var(--bo-blue));
  box-shadow: 0 18px 34px rgba(64, 38, 94, .28);
}
.bo-btn-ghost {
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
}
.bo-btn-light {
  color: var(--bo-ink);
  background: #fff;
}
.bo-hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 42px;
}
.bo-hero-note span {
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--bo-radius);
  color: rgba(255,255,255,.76);
  font-family: "Inter", sans-serif;
  font-weight: 800;
}
.bo-hero-blocks {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.bo-cube {
  position: absolute;
  width: 92px;
  height: 92px;
  transform: rotateX(58deg) rotateZ(45deg);
  transform-style: preserve-3d;
  animation: boDropBlock 5.8s cubic-bezier(.2,.9,.2,1) infinite;
  opacity: .72;
}
.bo-cube::before,
.bo-cube::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
}
.bo-cube::before {
  transform: translateZ(-34px) translateY(34px);
  filter: brightness(.55);
}
.bo-cube::after {
  transform: translateZ(-68px) translateX(34px);
  filter: brightness(.72);
}
.bo-cube-a {
  left: 9%;
  top: -110px;
  background: #8b63c7;
  animation-delay: .2s;
}
.bo-cube-b {
  right: 13%;
  top: -130px;
  width: 68px;
  height: 68px;
  background: #3fb7a7;
  animation-delay: 1.1s;
}
.bo-cube-c {
  right: 42%;
  top: -140px;
  width: 54px;
  height: 54px;
  background: #244f8f;
  animation-delay: 2.1s;
}
.bo-hero-visual {
  position: relative;
  min-height: 560px;
  display: grid;
  align-content: center;
  justify-items: center;
  perspective: 1200px;
}
.bo-iso-stack {
  position: relative;
  width: min(520px, 100%);
  min-height: 420px;
  transform: rotateX(58deg) rotateZ(-36deg);
  transform-style: preserve-3d;
}
.bo-iso-row {
  position: absolute;
  left: 50%;
  display: flex;
  gap: 18px;
  transform-style: preserve-3d;
}
.bo-iso-row:nth-child(1) {
  top: 24px;
  transform: translateX(-50%) translateZ(128px);
}
.bo-iso-row:nth-child(2) {
  top: 142px;
  transform: translateX(-50%) translateZ(72px);
}
.bo-iso-row:nth-child(3) {
  top: 260px;
  transform: translateX(-50%) translateZ(16px);
}
.bo-iso-block {
  position: relative;
  width: 150px;
  height: 110px;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 900;
  border-radius: 4px;
  transform-style: preserve-3d;
  animation: boAssemble 1.2s cubic-bezier(.2,.9,.2,1) both, boFloatBlock 4.8s ease-in-out infinite;
  box-shadow: 0 34px 50px rgba(0,0,0,.18);
}
.bo-iso-block::before,
.bo-iso-block::after {
  content: "";
  position: absolute;
  border-radius: 4px;
  background: inherit;
}
.bo-iso-block::before {
  inset: 0;
  transform: translateZ(-46px) translateY(46px);
  filter: brightness(.48);
}
.bo-iso-block::after {
  inset: 0;
  transform: translateZ(-92px) translateX(46px);
  filter: brightness(.7);
}
.bo-iso-block b {
  position: relative;
  z-index: 2;
  transform: rotateZ(36deg) rotateX(-58deg) translateZ(80px);
  text-shadow: 0 2px 12px rgba(0,0,0,.24);
}
.bo-iso-block:nth-child(2) {
  animation-delay: .16s;
}
.bo-iso-row:nth-child(2) .bo-iso-block {
  animation-delay: .32s;
}
.bo-iso-row:nth-child(3) .bo-iso-block {
  animation-delay: .48s;
}
.bo-iso-block.is-purple { background: #7b51ba; }
.bo-iso-block.is-blue { background: #244f8f; }
.bo-iso-block.is-mint { background: #3fb7a7; }
.bo-iso-block.is-lilac { background: #b894dc; color: #24142f; }
.bo-iso-block.is-dark { background: #2d1839; }
.bo-iso-block.is-muted { background: #8a8291; }
.bo-visual-caption {
  position: absolute;
  right: 0;
  bottom: 28px;
  max-width: 320px;
  padding: 22px;
  color: var(--bo-ink);
  background: rgba(255,255,255,.92);
  border-radius: var(--bo-radius);
  box-shadow: var(--bo-shadow);
}
.bo-visual-caption strong {
  display: block;
  margin-bottom: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 900;
}
.bo-visual-caption span {
  color: var(--bo-muted);
  font-weight: 700;
  word-break: keep-all;
}

.bo-section {
  padding: 110px 0;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.bo-section.is-visible, .bo-contact.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.bo-two-col {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 72px;
}
.bo-section h2, .bo-brand h2, .bo-contact h2 {
  margin: 16px 0 0;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.08;
  letter-spacing: 0;
  font-weight: 900;
  word-break: keep-all;
}
.bo-rich-copy p, .bo-section-head p, .bo-compliance p {
  margin: 0;
  color: var(--bo-muted);
  font-size: 18px;
  word-break: keep-all;
}
.bo-rich-copy blockquote {
  margin: 30px 0 0;
  padding: 28px;
  border-left: 5px solid var(--bo-purple);
  background: #fff;
  border-radius: var(--bo-radius);
  box-shadow: 0 16px 40px rgba(41,22,56,.08);
  font-size: 21px;
  font-weight: 800;
  word-break: keep-all;
}
.bo-section-head {
  max-width: 820px;
  margin-bottom: 42px;
}
.bo-section-head h2 {
  margin-bottom: 18px;
}
.bo-why {
  background: #fff;
}
.bo-reason-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.bo-reason-grid article,
.bo-block-grid article,
.bo-case-list article,
.bo-process-list li {
  background: var(--bo-bg);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-radius);
  padding: 26px;
}
.bo-reason-grid span,
.bo-block-grid b,
.bo-process-list span {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--bo-purple);
  font-family: "Inter", sans-serif;
  font-weight: 900;
}
.bo-reason-grid h3,
.bo-block-grid h3,
.bo-case-list h3 {
  margin: 0 0 12px;
  font-size: 21px;
  line-height: 1.28;
  font-weight: 900;
  word-break: keep-all;
}
.bo-reason-grid p,
.bo-block-grid p,
.bo-case-list p,
.bo-process-list p {
  margin: 0;
  color: var(--bo-muted);
  word-break: keep-all;
}
.bo-blocks {
  background:
    linear-gradient(180deg, var(--bo-bg), #fff);
}
.bo-block-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.bo-block-grid article {
  position: relative;
  min-height: 220px;
  background: #fff;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.bo-block-grid article::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 92px;
  height: 92px;
  background: linear-gradient(135deg, rgba(111,72,166,.28), rgba(63,183,167,.2));
  transform: rotateX(55deg) rotateZ(45deg);
}
.bo-block-grid article:hover {
  transform: translateY(-8px) rotateX(2deg);
  box-shadow: 0 18px 40px rgba(41,22,56,.1);
}
.bo-mockup {
  background: #fff;
}
.bo-mockup-grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: 42px;
  align-items: center;
}
.bo-mockup-copy p {
  margin: 18px 0 0;
  color: var(--bo-muted);
  font-size: 18px;
  word-break: keep-all;
}
.bo-mockup-frame,
.bo-image-tile {
  overflow: hidden;
  border-radius: var(--bo-radius);
  box-shadow: var(--bo-shadow);
}
.bo-mockup-frame img {
  width: 100%;
  height: min(520px, 46vw);
  object-fit: cover;
}
.bo-image-story {
  background: linear-gradient(180deg, #fff, var(--bo-bg));
}
.bo-image-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: repeat(2, 280px);
  gap: 18px;
}
.bo-image-tile {
  position: relative;
  margin: 0;
  background: var(--bo-deep);
  transform: translateY(18px);
  animation: boImageLift 1s ease both;
}
.bo-image-tile.is-large {
  grid-row: span 2;
}
.bo-image-tile:nth-child(2) {
  animation-delay: .18s;
}
.bo-image-tile:nth-child(3) {
  animation-delay: .34s;
}
.bo-image-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .86;
  transition: transform .5s ease, opacity .5s ease;
}
.bo-image-tile:hover img {
  transform: scale(1.045);
  opacity: 1;
}
.bo-image-tile figcaption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 18px;
  color: #fff;
  background: rgba(22,13,29,.72);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--bo-radius);
  backdrop-filter: blur(12px);
}
.bo-image-tile strong {
  display: block;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  font-weight: 900;
}
.bo-image-tile span {
  color: rgba(255,255,255,.78);
  font-weight: 700;
  word-break: keep-all;
}
.bo-cases {
  background: var(--bo-deep);
  color: #fff;
}
.bo-cases .bo-section-head p,
.bo-cases .bo-case-list p {
  color: rgba(255,255,255,.72);
}
.bo-case-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.bo-case-list article {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
}
.bo-case-list strong {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--bo-lilac);
  font-weight: 900;
}
.bo-process-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.bo-process-list li {
  min-height: 210px;
  background: #fff;
}
.bo-process-list strong {
  display: block;
  margin-bottom: 10px;
  font-size: 20px;
}
.bo-compliance {
  background: #fff;
}
.bo-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.bo-check-grid span {
  position: relative;
  min-height: 74px;
  padding: 20px 20px 20px 52px;
  background: var(--bo-bg);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-radius);
  font-weight: 800;
  word-break: keep-all;
}
.bo-check-grid span::before {
  content: "✓";
  position: absolute;
  left: 20px;
  top: 20px;
  color: var(--bo-mint);
  font-weight: 900;
}
.bo-contact {
  padding: 112px 0;
  color: #fff;
  background:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(135deg, var(--bo-purple), var(--bo-blue));
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.bo-contact-box {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(360px, .72fr);
  gap: 70px;
  align-items: center;
}
.bo-contact .bo-eyebrow {
  color: #c9f2e9;
}
.bo-contact h2 {
  max-width: 720px;
  margin-top: 18px;
}
.bo-contact-copy p {
  max-width: 620px;
  margin: 22px 0 0;
  color: rgba(255,255,255,.78);
  font-size: 19px;
  font-weight: 700;
  word-break: keep-all;
}
.bo-contact-panel {
  padding: 22px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--bo-radius);
  box-shadow: 0 28px 70px rgba(21, 9, 35, .2);
  backdrop-filter: blur(14px);
}
.bo-contact-steps {
  display: grid;
  gap: 12px;
}
.bo-contact-steps span {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 17px 18px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--bo-radius);
  font-weight: 900;
  word-break: keep-all;
}
.bo-contact-steps b {
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  height: 36px;
  color: var(--bo-deep);
  background: #fff;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
}
.bo-contact-actions {
  margin-top: 18px;
}
.bo-contact-actions .bo-btn {
  min-width: 168px;
}
.bo-footer {
  padding: 70px 0 34px;
  background:
    linear-gradient(180deg, #160d1d, #100816);
  color: rgba(255,255,255,.74);
}
.bo-footer-inner {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}
.bo-footer-logo img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}
.bo-footer-logo span {
  color: #fff;
}
.bo-footer-brand p {
  max-width: 460px;
  margin: 16px 0 34px;
}
.bo-footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding-top: 34px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.bo-footer-grid div {
  display: grid;
  gap: 8px;
  align-content: start;
}
.bo-footer-grid strong {
  margin-bottom: 10px;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 16px;
}
.bo-footer-grid a,
.bo-footer-grid span {
  line-height: 1.75;
}
.bo-footer-grid a[href^="tel"] {
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 900;
}
.bo-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 42px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 14px;
}
.bo-footer-bottom div {
  display: flex;
  gap: 16px;
}
.bo-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 900;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: var(--bo-radius);
  color: #fff;
  background: var(--bo-purple);
  box-shadow: 0 14px 32px rgba(41,22,56,.24);
  cursor: pointer;
}

@media (max-width: 1080px) {
  .bo-nav { display: none; }
  .bo-menu-toggle { display: block; }
  .bo-mobile-nav.is-open { display: block; }
  .bo-hero-grid,
  .bo-two-col,
  .bo-contact-box {
    grid-template-columns: 1fr;
  }
  .bo-reason-grid,
  .bo-block-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bo-mockup-grid,
  .bo-image-grid {
    grid-template-columns: 1fr;
  }
  .bo-image-grid {
    grid-template-rows: auto;
  }
  .bo-image-tile,
  .bo-image-tile.is-large {
    min-height: 320px;
    grid-row: auto;
  }
  .bo-process-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .bo-container,
  .bo-footer-inner {
    width: min(100% - 28px, 1200px);
  }
  .bo-header-inner {
    width: min(100% - 24px, 1240px);
    min-height: 68px;
  }
  .bo-logo span { display: none; }
  .bo-cta { display: none; }
  .bo-hero {
    min-height: auto;
    padding: 118px 0 70px;
  }
  .bo-hero-grid {
    gap: 34px;
  }
  .bo-hero h1 {
    font-size: 46px;
  }
  .bo-hero p {
    font-size: 17px;
  }
  .bo-section {
    padding: 74px 0;
  }
  .bo-section h2, .bo-brand h2, .bo-contact h2 {
    font-size: 34px;
  }
  .bo-reason-grid,
  .bo-block-grid,
  .bo-case-list,
  .bo-process-list,
  .bo-check-grid,
  .bo-footer-grid {
    grid-template-columns: 1fr;
  }
  .bo-hero-visual {
    min-height: 440px;
  }
  .bo-iso-stack {
    width: 340px;
    min-height: 320px;
    transform: rotateX(58deg) rotateZ(-36deg) scale(.7);
  }
  .bo-visual-caption {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: -34px;
  }
  .bo-mockup-frame img {
    height: 320px;
  }
  .bo-footer-bottom {
    display: grid;
  }
}

@keyframes boDropBlock {
  0% {
    transform: translateY(-160px) rotateX(58deg) rotateZ(45deg);
    opacity: 0;
  }
  18% {
    opacity: .78;
  }
  46% {
    transform: translateY(56vh) rotateX(58deg) rotateZ(45deg);
    opacity: .6;
  }
  100% {
    transform: translateY(96vh) rotateX(58deg) rotateZ(45deg);
    opacity: 0;
  }
}

@keyframes boAssemble {
  from {
    transform: translate3d(0, -220px, 180px) scale(.82);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes boFloatBlock {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}

@keyframes boImageLift {
  to {
    transform: translateY(0);
  }
}

.bo-tetris-stage {
  position: relative;
  width: min(610px, 100%);
  height: 520px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 44px 42px rgba(0,0,0,.2));
}
.bo-tetris-stage::before {
  content: "";
  position: absolute;
  inset: 46px 24px 42px;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: skewY(-24deg) rotateX(58deg);
  opacity: .45;
}
.bo-tetris-piece {
  position: absolute;
  width: 168px;
  height: 126px;
  transform-style: preserve-3d;
  animation: boTetrisDrop .95s cubic-bezier(.16, 1.08, .28, 1) both, boTetrisBreath 4.6s ease-in-out infinite;
  animation-delay: var(--delay), calc(var(--delay) + 1.05s);
}
.bo-tetris-piece strong {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: -34px;
  min-width: 92px;
  padding: 7px 12px;
  color: #fff;
  background: rgba(19, 10, 26, .78);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  font-family: "Inter", "Noto Sans KR", sans-serif;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
}
.bo-cell {
  position: absolute;
  width: 72px;
  height: 72px;
  background: var(--piece);
  transform: rotateX(58deg) rotateZ(-45deg);
  transform-style: preserve-3d;
  border-radius: 3px;
}
.bo-cell::before,
.bo-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  border-radius: 3px;
}
.bo-cell::before {
  transform: translateZ(-24px) translateY(24px);
  filter: brightness(.55);
}
.bo-cell::after {
  transform: translateZ(-48px) translateX(24px);
  filter: brightness(.72);
}
.bo-piece-place { --piece:#7b51ba; left: 68px; top: 132px; }
.bo-piece-place .c1 { left:0; top:0; }
.bo-piece-place .c2 { left:54px; top:0; }
.bo-piece-place .c3 { left:108px; top:0; }
.bo-piece-place .c4 { left:0; top:54px; }
.bo-piece-blog { --piece:#244f8f; left: 284px; top: 74px; }
.bo-piece-blog .c1 { left:0; top:0; }
.bo-piece-blog .c2 { left:54px; top:0; }
.bo-piece-blog .c3 { left:108px; top:0; }
.bo-piece-blog .c4 { left:108px; top:54px; }
.bo-piece-cpa { --piece:#2f9d8e; left: 108px; top: 278px; }
.bo-piece-cpa .c1 { left:0; top:0; }
.bo-piece-cpa .c2 { left:54px; top:0; }
.bo-piece-cpa .c3 { left:54px; top:54px; }
.bo-piece-cpa .c4 { left:108px; top:54px; }
.bo-piece-landing { --piece:#9e7fc0; left: 322px; top: 236px; }
.bo-piece-landing .c1 { left:0; top:0; }
.bo-piece-landing .c2 { left:54px; top:0; }
.bo-piece-landing .c3 { left:108px; top:0; }
.bo-piece-landing .c4 { left:54px; top:54px; }
.bo-piece-crm { --piece:#21152a; left: 184px; top: 386px; }
.bo-piece-crm .c1 { left:0; top:54px; }
.bo-piece-crm .c2 { left:54px; top:54px; }
.bo-piece-crm .c3 { left:108px; top:54px; }
.bo-piece-crm .c4 { left:108px; top:0; }
.bo-piece-sns { --piece:#6f6a73; left: 416px; top: 356px; }
.bo-piece-sns .c1 { left:0; top:0; }
.bo-piece-sns .c2 { left:54px; top:0; }
.bo-piece-sns .c3 { left:0; top:54px; }
.bo-piece-sns .c4 { left:54px; top:54px; }

.bo-block-grid article,
.bo-process-list li {
  opacity: 0;
  transform: translate3d(0, -42px, 0) rotate(-1.5deg) scale(.96);
}
.bo-block-grid article.is-fit,
.bo-process-list li.is-fit {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0) scale(1);
  transition:
    opacity .5s ease,
    transform .72s cubic-bezier(.18, 1.15, .26, 1),
    box-shadow .25s ease;
}
.bo-block-grid article.is-fit:nth-child(odd),
.bo-process-list li.is-fit:nth-child(odd) {
  transition-delay: .04s;
}
.bo-block-grid article.is-fit:nth-child(2),
.bo-process-list li.is-fit:nth-child(2) { transition-delay: .12s; }
.bo-block-grid article.is-fit:nth-child(3),
.bo-process-list li.is-fit:nth-child(3) { transition-delay: .2s; }
.bo-block-grid article.is-fit:nth-child(4),
.bo-process-list li.is-fit:nth-child(4) { transition-delay: .28s; }
.bo-block-grid article.is-fit:nth-child(5),
.bo-process-list li.is-fit:nth-child(5) { transition-delay: .36s; }
.bo-block-grid article.is-fit:nth-child(6),
.bo-process-list li.is-fit:nth-child(6) { transition-delay: .44s; }
.bo-block-grid article.is-fit:nth-child(7) { transition-delay: .52s; }
.bo-block-grid article.is-fit:nth-child(8) { transition-delay: .6s; }

@keyframes boTetrisDrop {
  0% {
    opacity: 0;
    transform: translate3d(0, -260px, 120px) rotate(-6deg);
  }
  72% {
    opacity: 1;
    transform: translate3d(0, 10px, 0) rotate(1.5deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0);
  }
}

@keyframes boTetrisBreath {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@media (max-width: 720px) {
  .bo-tetris-stage {
    width: 360px;
    height: 390px;
    transform: scale(.72);
    transform-origin: top center;
    margin-bottom: -72px;
  }
  .bo-tetris-piece strong {
    font-size: 12px;
    min-width: 78px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bo-cube,
  .bo-tetris-piece,
  .bo-iso-block,
  .bo-image-tile {
    animation: none !important;
  }
  .bo-block-grid article,
  .bo-process-list li {
    opacity: 1;
    transform: none;
  }
}

/* Heavier 3D treatment for the tetris-style marketing blocks. */
.bo-tetris-stage {
  perspective: 1300px;
  filter: drop-shadow(0 56px 48px rgba(0,0,0,.28));
}
.bo-tetris-stage::before {
  inset: 26px 0 18px;
  background-image:
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: rotateX(64deg) rotateZ(-35deg) translate3d(34px, 72px, -110px);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 60px rgba(255,255,255,.04);
}
.bo-tetris-stage::after {
  content: "";
  position: absolute;
  left: 110px;
  right: 42px;
  bottom: 26px;
  height: 82px;
  background: radial-gradient(ellipse, rgba(0,0,0,.38), transparent 70%);
  transform: rotateX(64deg) rotateZ(-35deg);
  pointer-events: none;
}
.bo-tetris-piece {
  transform-origin: center;
}
.bo-tetris-piece::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 28px;
  width: 190px;
  height: 96px;
  background: radial-gradient(ellipse, rgba(0,0,0,.28), transparent 68%);
  transform: rotateX(60deg) rotateZ(-45deg) translate3d(16px, 36px, -82px);
  filter: blur(6px);
  opacity: .9;
}
.bo-cell {
  width: 76px;
  height: 76px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,0) 38%),
    linear-gradient(315deg, rgba(0,0,0,.18), rgba(0,0,0,0) 46%),
    var(--piece);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 7px;
  box-shadow:
    inset 5px 5px 0 rgba(255,255,255,.12),
    inset -9px -10px 0 rgba(0,0,0,.12),
    0 22px 28px rgba(0,0,0,.18);
}
.bo-cell::before {
  border-radius: 7px;
  transform: translateZ(-38px) translateY(38px);
  filter: brightness(.45) saturate(.9);
}
.bo-cell::after {
  border-radius: 7px;
  transform: translateZ(-76px) translateX(38px);
  filter: brightness(.68) saturate(.95);
}
.bo-tetris-piece strong {
  bottom: -42px;
  background: rgba(18, 8, 26, .86);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
}
.bo-piece-place { left: 54px; top: 128px; }
.bo-piece-blog { left: 286px; top: 72px; }
.bo-piece-cpa { left: 96px; top: 274px; }
.bo-piece-landing { left: 318px; top: 232px; }
.bo-piece-crm { left: 172px; top: 386px; }
.bo-piece-sns { left: 428px; top: 354px; }
.bo-visual-caption {
  right: -10px;
  bottom: 6px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.86)),
    radial-gradient(circle at 20% 20%, rgba(184,148,220,.28), transparent 40%);
  border: 1px solid rgba(255,255,255,.7);
}

@media (max-width: 720px) {
  .bo-cell {
    width: 70px;
    height: 70px;
  }
  .bo-visual-caption {
    right: auto;
    bottom: auto;
  }
}

/* Final hero composition: wider copy area and deeper block sculpture. */
@media (min-width: 1081px) {
  .bo-hero-grid {
    width: min(1360px, calc(100% - 64px));
    grid-template-columns: minmax(700px, 1.36fr) minmax(450px, .82fr);
    gap: 36px;
  }
  .bo-hero-copy {
    max-width: 820px;
  }
  .bo-hero h1 {
    font-size: clamp(68px, 5.6vw, 102px);
    line-height: .96;
  }
  .bo-hero p {
    max-width: 820px;
    font-size: 21px;
  }
}

.bo-hero-visual {
  align-content: start;
  padding-top: 26px;
  min-height: 660px;
}
.bo-tetris-stage {
  width: 520px;
  height: 440px;
  transform: translateX(-22px) rotateX(0deg);
}
.bo-tetris-stage::before {
  inset: 10px 22px 30px 0;
  transform: rotateX(68deg) rotateZ(-38deg) translate3d(44px, 78px, -126px);
}
.bo-tetris-stage::after {
  left: 74px;
  right: 18px;
  bottom: 18px;
  height: 108px;
  opacity: .78;
}
.bo-tetris-piece {
  width: 154px;
  height: 112px;
}
.bo-cell {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  box-shadow:
    inset 7px 7px 0 rgba(255,255,255,.24),
    inset -12px -12px 0 rgba(0,0,0,.16),
    0 26px 32px rgba(0,0,0,.26);
}
.bo-cell::before {
  transform: translateZ(-42px) translateY(42px);
  filter: brightness(.42) saturate(.95);
}
.bo-cell::after {
  transform: translateZ(-84px) translateX(42px);
  filter: brightness(.72) saturate(1);
}
.bo-piece-place { left: 42px; top: 126px; }
.bo-piece-blog { left: 270px; top: 54px; }
.bo-piece-cpa { left: 72px; top: 258px; }
.bo-piece-landing { left: 288px; top: 198px; }
.bo-piece-crm { left: 150px; top: 350px; }
.bo-piece-sns { left: 380px; top: 304px; }
.bo-piece-place .c1,
.bo-piece-blog .c1,
.bo-piece-cpa .c1,
.bo-piece-landing .c1,
.bo-piece-crm .c1,
.bo-piece-sns .c1 { left:0; top:0; }
.bo-piece-place .c2,
.bo-piece-blog .c2,
.bo-piece-cpa .c2,
.bo-piece-landing .c2,
.bo-piece-crm .c2,
.bo-piece-sns .c2 { left:44px; top:0; }
.bo-piece-place .c3,
.bo-piece-blog .c3,
.bo-piece-landing .c3 { left:88px; top:0; }
.bo-piece-place .c4 { left:0; top:44px; }
.bo-piece-blog .c4 { left:88px; top:44px; }
.bo-piece-cpa .c3 { left:44px; top:44px; }
.bo-piece-cpa .c4 { left:88px; top:44px; }
.bo-piece-landing .c4 { left:44px; top:44px; }
.bo-piece-crm .c1 { left:0; top:44px; }
.bo-piece-crm .c2 { left:44px; top:44px; }
.bo-piece-crm .c3 { left:88px; top:44px; }
.bo-piece-crm .c4 { left:88px; top:0; }
.bo-piece-sns .c3 { left:0; top:44px; }
.bo-piece-sns .c4 { left:44px; top:44px; }
.bo-tetris-piece strong {
  bottom: -38px;
  padding: 6px 11px;
  font-size: 13px;
}
.bo-visual-caption {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: 5;
  width: min(420px, 92%);
  max-width: none;
  margin: 26px auto 0;
  padding: 20px 22px;
  transform: translateX(4px);
}

@media (max-width: 1080px) {
  .bo-hero-copy {
    max-width: 780px;
  }
  .bo-hero-visual {
    min-height: 560px;
  }
  .bo-tetris-stage {
    transform: scale(.9);
    transform-origin: top center;
    margin-bottom: -36px;
  }
}

@media (max-width: 720px) {
  .bo-hero h1 {
    font-size: 50px;
  }
  .bo-hero-visual {
    min-height: 420px;
    padding-top: 4px;
  }
  .bo-tetris-stage {
    width: 390px;
    height: 360px;
    transform: scale(.68);
    margin-bottom: -92px;
  }
  .bo-visual-caption {
    width: 100%;
    margin-top: 0;
    transform: none;
  }
}

/* Keep the hero sculpture fully visible in the first viewport. */
@media (min-width: 1081px) {
  .bo-hero-visual {
    min-height: 600px;
    padding-top: 12px;
  }
  .bo-tetris-stage {
    width: 500px;
    height: 400px;
    transform: translateX(-64px);
  }
  .bo-piece-place { left: 38px; top: 104px; }
  .bo-piece-blog { left: 260px; top: 38px; }
  .bo-piece-cpa { left: 70px; top: 226px; }
  .bo-piece-landing { left: 272px; top: 172px; }
  .bo-piece-crm { left: 142px; top: 314px; }
  .bo-piece-sns { left: 342px; top: 274px; }
  .bo-visual-caption {
    width: min(390px, 90%);
    margin: 10px auto 0;
    padding: 18px 20px;
    transform: translateX(-18px);
  }
  .bo-visual-caption strong {
    margin-bottom: 6px;
  }
}

/* Tetris-style final pass: falling blocks form one complete rectangle. */
.bo-cms-link {
  min-width: 54px;
  text-align: center;
}

.bo-hero-blocks {
  display: none;
}

.bo-section-head {
  max-width: 980px;
}

.bo-section-head p {
  max-width: 980px;
}

.bo-hero-copy {
  max-width: 880px;
}

.bo-hero h1 {
  line-height: 1.05;
}

.bo-hero-visual {
  padding-top: 0;
}

.bo-tetris-stage {
  --unit: 54px;
  --depth: 8px;
  width: 380px;
  height: 292px;
  margin: 4px auto 0;
  transform: none;
  overflow: visible;
  perspective: none;
}

.bo-tetris-stage::before {
  inset: 8px -12px -18px -12px;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(28, 13, 40, .16), rgba(28, 13, 40, .5));
  background-size: var(--unit) var(--unit);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(0,0,0,.28), inset 0 0 44px rgba(255,255,255,.04);
  transform: none;
}

.bo-tetris-stage::after {
  content: "";
  position: absolute;
  inset: -16px -22px -10px -22px;
  height: auto;
  background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.42), transparent 30%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  opacity: 0;
  transform: none;
  pointer-events: none;
  animation: boRectangleImpact 5.2s ease-in-out infinite;
  animation-delay: 1.45s;
}

.bo-tetris-piece {
  width: calc(var(--unit) * 4);
  height: calc(var(--unit) * 2);
  transform: none;
  transform-style: flat;
  animation: boTetrisFall 1.05s cubic-bezier(.18, 1.18, .25, 1) both;
  animation-delay: var(--delay);
}

.bo-tetris-piece::before {
  left: 6px;
  top: 10px;
  width: calc(100% + 8px);
  height: calc(100% + 14px);
  background: rgba(0,0,0,.3);
  border-radius: 14px;
  filter: blur(18px);
  transform: translate(8px, 16px);
  opacity: .62;
}

.bo-cell {
  width: var(--unit);
  height: var(--unit);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.1) 35%, rgba(0,0,0,.16) 76%),
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.42), transparent 22%),
    var(--piece);
  border: 2px solid rgba(255,255,255,.2);
  box-shadow:
    inset 5px 5px 0 rgba(255,255,255,.22),
    inset -8px -10px 0 rgba(0,0,0,.2),
    0 var(--depth) 0 rgba(0,0,0,.28),
    0 15px 26px rgba(0,0,0,.25);
  transform: none;
}

.bo-cell::before,
.bo-cell::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.bo-cell::before {
  inset: 5px;
  background: linear-gradient(135deg, rgba(255,255,255,.5), transparent 45%);
  transform: none;
  filter: none;
}

.bo-cell::after {
  left: 6px;
  right: -6px;
  bottom: calc(var(--depth) * -1);
  height: var(--depth);
  background: rgba(0,0,0,.34);
  transform: skewX(-38deg);
  filter: none;
}

.bo-tetris-piece strong {
  left: 50%;
  top: 50%;
  bottom: auto;
  width: auto;
  min-width: 76px;
  padding: 7px 12px;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  background: rgba(16, 7, 24, .74);
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
}

.bo-piece-place { --piece:#8c5ee0; left: 0; top: 0; }
.bo-piece-place .c1 { left: 0; top: 0; }
.bo-piece-place .c2 { left: var(--unit); top: 0; }
.bo-piece-place .c3 { left: calc(var(--unit) * 2); top: 0; }
.bo-piece-place .c4 { left: calc(var(--unit) * 3); top: 0; }
.bo-piece-place strong,
.bo-piece-crm strong {
  top: calc(var(--unit) / 2);
}

.bo-piece-blog { --piece:#2f73c9; left: calc(var(--unit) * 4); top: 0; }
.bo-piece-blog .c1,
.bo-piece-cpa .c1,
.bo-piece-landing .c1,
.bo-piece-sns .c1 { left: 0; top: 0; }
.bo-piece-blog .c2,
.bo-piece-cpa .c2,
.bo-piece-landing .c2,
.bo-piece-sns .c2 { left: var(--unit); top: 0; }
.bo-piece-blog .c3,
.bo-piece-cpa .c3,
.bo-piece-landing .c3,
.bo-piece-sns .c3 { left: 0; top: var(--unit); }
.bo-piece-blog .c4,
.bo-piece-cpa .c4,
.bo-piece-landing .c4,
.bo-piece-sns .c4 { left: var(--unit); top: var(--unit); }

.bo-piece-cpa { --piece:#35b8a6; left: 0; top: var(--unit); }
.bo-piece-landing { --piece:#b893e8; left: calc(var(--unit) * 2); top: var(--unit); }
.bo-piece-sns { --piece:#8b8893; left: calc(var(--unit) * 4); top: calc(var(--unit) * 2); }

.bo-piece-crm { --piece:#1e1428; left: 0; top: calc(var(--unit) * 3); }
.bo-piece-crm .c1 { left: 0; top: 0; }
.bo-piece-crm .c2 { left: var(--unit); top: 0; }
.bo-piece-crm .c3 { left: calc(var(--unit) * 2); top: 0; }
.bo-piece-crm .c4 { left: calc(var(--unit) * 3); top: 0; }

.bo-visual-caption {
  position: relative;
  z-index: 4;
  width: min(420px, 92%);
  margin: 24px auto 0;
  transform: none;
}

.bo-image-story .bo-section-head {
  max-width: 1080px;
}

.bo-image-story .bo-section-head p {
  max-width: 1040px;
}

.bo-image-tile img {
  filter: saturate(.94) contrast(1.03);
}

@keyframes boTetrisFall {
  0% {
    opacity: 0;
    transform: translateY(-440px) scale(.96);
  }
  72% {
    opacity: 1;
    transform: translateY(12px) scale(1.02);
  }
  86% {
    transform: translateY(-5px) scale(.995);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes boRectangleImpact {
  0%, 18%, 100% {
    opacity: 0;
    transform: scale(.96);
  }
  7% {
    opacity: .9;
    transform: scale(1.04);
  }
  12% {
    opacity: .18;
    transform: scale(1);
  }
}

@media (min-width: 1081px) {
  .bo-hero-grid {
    grid-template-columns: minmax(690px, 1.18fr) minmax(430px, .82fr);
    align-items: center;
  }
  .bo-hero h1 {
    font-size: clamp(64px, 5.2vw, 94px);
    line-height: 1.06;
  }
  .bo-hero-visual {
    min-height: 500px;
    padding-top: 0;
  }
  .bo-tetris-stage {
    transform: translateY(-22px);
  }
  .bo-visual-caption {
    margin-top: 2px;
    transform: translateY(-8px);
  }
}

@media (max-width: 1080px) {
  .bo-tetris-stage {
    transform: scale(.9);
    transform-origin: top center;
    margin-bottom: -20px;
  }
}

@media (max-width: 720px) {
  .bo-hero h1 {
    font-size: 48px;
    line-height: 1.08;
  }
  .bo-hero-visual {
    min-height: 360px;
  }
  .bo-tetris-stage {
    transform: scale(.74);
    transform-origin: top center;
    margin-bottom: -64px;
  }
  .bo-visual-caption {
    margin-top: 4px;
  }
}

/* Compact block catalog with an ON/OFF switch demo. */
.bo-block-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 34px;
  align-items: start;
}

.bo-block-left .bo-section-head {
  margin-bottom: 26px;
}

.bo-block-left .bo-section-head h2 {
  white-space: nowrap;
  font-size: clamp(36px, 3.2vw, 48px);
}

.bo-block-left .bo-section-head p {
  max-width: 760px;
}

.bo-block-showcase .bo-block-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.bo-block-showcase .bo-block-grid article {
  min-height: 132px;
  padding: 22px 20px;
  border-radius: 10px;
}

.bo-block-showcase .bo-block-grid article::after {
  width: 58px;
  height: 58px;
  right: -18px;
  bottom: -18px;
}

.bo-block-showcase .bo-block-grid b {
  margin-bottom: 14px;
  font-size: 14px;
}

.bo-block-showcase .bo-block-grid h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

.bo-block-showcase .bo-block-grid p {
  font-size: 14px;
  line-height: 1.55;
}

.bo-switch-panel {
  position: sticky;
  top: 104px;
  min-height: 570px;
  padding: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 76% 14%, rgba(84,169,255,.22), transparent 25%),
    radial-gradient(circle at 16% 88%, rgba(63,183,167,.22), transparent 28%),
    linear-gradient(145deg, #24102f, #120818 72%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(42, 18, 58, .22);
  overflow: hidden;
}

.bo-switch-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .65;
}

.bo-switch-panel > * {
  position: relative;
  z-index: 1;
}

.bo-switch-panel h3 {
  margin: 14px 0 24px;
  font-size: 27px;
  line-height: 1.28;
  font-weight: 900;
  word-break: keep-all;
}

.bo-switch-panel p {
  margin: 24px 0 0;
  color: rgba(255,255,255,.72);
  font-weight: 700;
  line-height: 1.6;
  word-break: keep-all;
}

.bo-switch-board {
  display: grid;
  gap: 12px;
}

.bo-switch-row {
  display: grid;
  grid-template-columns: 1fr 76px;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.bo-switch-row span {
  font-family: "Inter", "Noto Sans KR", sans-serif;
  font-weight: 900;
}

.bo-switch-row button {
  position: relative;
  width: 76px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.28);
}

.bo-switch-row button::before {
  content: "OFF";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.58);
  font-size: 10px;
  font-family: "Inter", sans-serif;
  font-weight: 900;
}

.bo-switch-row button::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff, #d8cee7);
  box-shadow: 0 8px 16px rgba(0,0,0,.25);
  transition: transform .3s ease;
}

.bo-switch-row.is-on {
  background: rgba(63,183,167,.14);
  border-color: rgba(63,183,167,.28);
}

.bo-switch-row.is-on button {
  background: linear-gradient(135deg, #3fb7a7, #6f48a6);
}

.bo-switch-row.is-on button::before {
  content: "ON";
  left: 12px;
  right: auto;
  color: #fff;
}

.bo-switch-row.is-on button::after {
  transform: translateX(38px);
}

.bo-switch-row:nth-child(3) button,
.bo-switch-row:nth-child(5) button {
  animation: boSwitchTrack 4.8s ease-in-out infinite;
}

.bo-switch-row:nth-child(3) button::before,
.bo-switch-row:nth-child(5) button::before {
  content: "";
}

.bo-switch-row:nth-child(3) button::after,
.bo-switch-row:nth-child(5) button::after {
  animation: boSwitchKnob 4.8s ease-in-out infinite;
}

.bo-tetris-piece {
  animation: boTetrisCycle 5.8s cubic-bezier(.18, 1.18, .25, 1) both infinite;
  animation-delay: var(--delay);
}

.bo-tetris-piece strong {
  min-width: 0;
  max-width: calc(var(--unit) * 2 - 8px);
  padding: 6px 9px;
  font-size: 12px;
  background: rgba(18, 8, 26, .52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.bo-piece-place strong,
.bo-piece-crm strong {
  max-width: calc(var(--unit) * 3 - 12px);
}

.bo-piece-blog,
.bo-piece-cpa,
.bo-piece-landing,
.bo-piece-sns {
  width: calc(var(--unit) * 2);
}

@keyframes boTetrisCycle {
  0% {
    opacity: 0;
    transform: translateY(-420px) scale(.96);
  }
  13% {
    opacity: 1;
    transform: translateY(12px) scale(1.02);
  }
  18% {
    transform: translateY(-5px) scale(.995);
  }
  23%, 76% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  86%, 100% {
    opacity: 0;
    transform: translateY(-420px) scale(.96);
  }
}

@keyframes boSwitchKnob {
  0%, 34% { transform: translateX(0); }
  48%, 82% { transform: translateX(34px); }
  100% { transform: translateX(0); }
}

@keyframes boSwitchKnob {
  0%, 34% { transform: translateX(0); }
  48%, 82% { transform: translateX(38px); }
  100% { transform: translateX(0); }
}

@keyframes boSwitchTrack {
  0%, 34% { background: rgba(255,255,255,.18); }
  48%, 82% { background: linear-gradient(135deg, #3fb7a7, #6f48a6); }
  100% { background: rgba(255,255,255,.18); }
}

@media (max-width: 1080px) {
  .bo-block-showcase {
    grid-template-columns: 1fr;
  }
  .bo-block-left .bo-section-head h2 {
    white-space: normal;
  }
  .bo-switch-panel {
    position: relative;
    top: auto;
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .bo-block-showcase .bo-block-grid {
    grid-template-columns: 1fr;
  }
  .bo-block-showcase .bo-block-grid article {
    min-height: 126px;
  }
  .bo-switch-panel {
    padding: 22px;
  }
}

/* Latest polish: logo swap, contact email, tighter block section, bottom-up tetris. */
.bo-logo {
  position: relative;
  width: 174px;
  height: 44px;
  gap: 0;
}

.bo-logo img {
  position: absolute;
  inset: 0;
  width: 174px;
  height: 44px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  transition: opacity .22s ease;
}

.bo-logo span {
  display: none;
}

.bo-logo-color {
  opacity: 0;
}

.bo-header.is-scrolled .bo-logo-white {
  opacity: 0;
}

.bo-header.is-scrolled .bo-logo-color {
  opacity: 1;
}

.bo-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.bo-contact-actions .bo-btn {
  min-width: 150px;
  justify-content: center;
}

.bo-block-showcase {
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 30px;
}

.bo-block-left {
  min-width: 0;
}

.bo-block-left .bo-section-head h2 {
  font-size: clamp(34px, 2.9vw, 44px);
}

.bo-block-showcase .bo-block-grid article {
  min-height: 124px;
}

.bo-switch-panel {
  min-height: 520px;
  padding: 24px;
}

.bo-switch-panel h3 {
  font-size: 24px;
}

.bo-switch-row {
  grid-template-columns: 1fr 70px;
  padding: 11px 12px;
}

.bo-switch-row button {
  width: 70px;
  height: 36px;
}

.bo-switch-row button::after {
  width: 28px;
  height: 28px;
}

.bo-switch-row.is-on button::after {
  transform: translateX(34px);
}

.bo-tetris-stage {
  --unit: 60px;
  width: 420px;
  height: 294px;
}

.bo-tetris-stage::before {
  inset: -4px 18px 2px 18px;
}

.bo-tetris-stage::after {
  inset: -14px 4px -10px 4px;
}

.bo-piece-crm,
.bo-piece-sns {
  animation-delay: var(--delay);
}

@keyframes boTetrisCycle {
  0% {
    opacity: 0;
    transform: translateY(-430px) scale(.96);
  }
  13% {
    opacity: 1;
    transform: translateY(12px) scale(1.02);
  }
  18% {
    transform: translateY(-5px) scale(.995);
  }
  23%, 76% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  86%, 100% {
    opacity: 0;
    transform: translateY(-430px) scale(.96);
  }
}

@media (min-width: 1081px) {
  .bo-tetris-stage {
    transform: translateY(-18px);
  }
  .bo-visual-caption {
    width: min(430px, 95%);
    margin-top: 0;
  }
}

@media (max-width: 1080px) {
  .bo-logo,
  .bo-logo img {
    width: 150px;
    height: 36px;
  }
}

/* Fit the falling block board inside its frame and add an inline mail form. */
.bo-tetris-stage {
  --unit: 56px;
  width: 420px;
  height: 304px;
  margin-top: 0;
}

.bo-tetris-stage::before {
  inset: 0 12px 0 12px;
}

.bo-tetris-stage::after {
  inset: -12px 0 -10px 0;
}

.bo-piece-place {
  left: 30px;
  top: 22px;
}

.bo-piece-blog {
  left: 254px;
  top: 22px;
}

.bo-piece-cpa {
  left: 30px;
  top: 78px;
}

.bo-piece-landing {
  left: 142px;
  top: 78px;
}

.bo-piece-sns {
  left: 254px;
  top: 134px;
}

.bo-piece-crm {
  left: 30px;
  top: 190px;
}

.bo-visual-caption {
  margin-top: 8px;
}

.bo-contact-box {
  grid-template-columns: minmax(0, .85fr) minmax(620px, 1.15fr);
  gap: 48px;
}

.bo-contact-panel {
  display: grid;
  grid-template-columns: minmax(230px, .68fr) minmax(390px, 1fr);
  gap: 18px;
  align-items: stretch;
}

.bo-contact-left {
  display: flex;
  flex-direction: column;
}

.bo-contact-steps {
  flex: 1;
  align-content: stretch;
}

.bo-contact-form {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding-right: 12px;
}

.bo-contact-form label {
  display: grid;
  gap: 6px;
}

.bo-contact-form label span {
  color: rgba(255,255,255,.86);
  font-size: 13px;
  font-weight: 900;
}

.bo-contact-form input,
.bo-contact-form textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--bo-radius);
  padding: 12px 13px;
  color: #fff;
  background: rgba(255,255,255,.12);
  outline: none;
  font: inherit;
}

.bo-contact-form textarea {
  resize: vertical;
  min-height: 96px;
}

.bo-contact-form input:focus,
.bo-contact-form textarea:focus {
  border-color: rgba(255,255,255,.62);
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}

.bo-contact-form .bo-btn {
  width: 100%;
  border: 0;
  cursor: pointer;
}

.bo-form-result {
  margin: 0;
  color: #fff;
  font-weight: 800;
  line-height: 1.45;
}

.bo-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.bo-modal.is-open {
  display: flex;
}

.bo-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 8, 24, .66);
  backdrop-filter: blur(6px);
}

.bo-modal-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 34px 30px 28px;
  color: var(--bo-ink);
  text-align: center;
  background:
    radial-gradient(circle at 85% 15%, rgba(63, 183, 167, .16), transparent 30%),
    #fff;
  border: 1px solid rgba(116, 74, 178, .18);
  border-radius: 14px;
  box-shadow: 0 28px 80px rgba(17, 8, 24, .34);
}

.bo-modal-mark {
  display: inline-flex;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  background:
    linear-gradient(135deg, var(--bo-purple), var(--bo-blue));
  border-radius: 16px;
  box-shadow: 0 16px 30px rgba(87, 70, 177, .24);
}

.bo-modal-mark::before {
  content: "";
  width: 22px;
  height: 12px;
  margin: auto;
  border-left: 4px solid #fff;
  border-bottom: 4px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}

.bo-modal-card h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
}

.bo-modal-card p {
  margin: 12px 0 24px;
  color: var(--bo-muted);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.bo-modal-card .bo-btn {
  width: 100%;
  border: 0;
  cursor: pointer;
}

@media (max-width: 1080px) {
  .bo-contact-box,
  .bo-contact-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .bo-tetris-stage {
    transform: scale(.7);
    transform-origin: top center;
  }
}

/* Desktop alignment and mobile app-like readability pass. */
@media (min-width: 1081px) {
  .bo-block-showcase {
    align-items: start;
  }

  .bo-switch-panel {
    position: sticky;
    top: 104px;
    margin-top: 146px;
    min-height: 0;
    height: 532px;
    display: flex;
    flex-direction: column;
  }

  .bo-switch-board {
    flex: 1;
    align-content: space-between;
  }

  .bo-switch-panel p {
    margin-top: 18px;
  }

  .bo-switch-panel h3 {
    margin-bottom: 18px;
    font-size: 22px;
  }

  .bo-switch-board {
    gap: 8px;
  }

  .bo-switch-row {
    min-height: 48px;
    padding: 9px 10px;
  }

  .bo-switch-panel p {
    font-size: 14px;
    line-height: 1.45;
  }
}

.bo-contact-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.bo-contact-actions .bo-btn {
  min-width: 0;
  width: 100%;
}

@media (max-width: 720px) {
  body {
    font-size: 16px;
    overflow-x: hidden;
  }

  .bo-container,
  .bo-footer-inner {
    width: min(100% - 32px, 1200px);
  }

  .bo-header-inner {
    min-height: 62px;
  }

  .bo-logo,
  .bo-logo img {
    width: 132px;
    height: 31px;
  }

  .bo-cms-link {
    display: none;
  }

  .bo-hero {
    padding: 96px 0 46px;
  }

  .bo-hero-grid {
    display: grid;
    gap: 24px;
  }

  .bo-hero-copy {
    max-width: none;
  }

  .bo-eyebrow {
    font-size: 12px;
  }

  .bo-hero h1 {
    margin-top: 18px;
    font-size: clamp(32px, 8.6vw, 38px);
    line-height: 1.08;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .bo-hero p {
    max-width: none;
    margin-top: 18px;
    font-size: 15.5px;
    line-height: 1.68;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .bo-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .bo-hero-actions .bo-btn {
    min-width: 0;
    width: 100%;
    padding-inline: 10px;
    text-align: center;
  }

  .bo-hero-visual {
    min-height: 0;
    padding-top: 4px;
  }

  .bo-tetris-stage {
    --unit: 44px;
    width: min(100%, 336px);
    height: 244px;
    margin: 0 auto;
    transform: none;
    filter: drop-shadow(0 26px 24px rgba(0,0,0,.18));
  }

  .bo-tetris-stage::before {
    inset: 0 10px 0 10px;
    border-radius: 16px;
  }

  .bo-piece-place {
    left: 18px;
    top: 16px;
  }

  .bo-piece-blog {
    left: 194px;
    top: 16px;
  }

  .bo-piece-cpa {
    left: 18px;
    top: 60px;
  }

  .bo-piece-landing {
    left: 106px;
    top: 60px;
  }

  .bo-piece-sns {
    left: 194px;
    top: 104px;
  }

  .bo-piece-crm {
    left: 18px;
    top: 148px;
  }

  .bo-tetris-piece strong {
    font-size: 10px;
    padding: 5px 7px;
  }

  .bo-visual-caption {
    width: 100%;
    margin-top: 10px;
    padding: 18px;
  }

  .bo-section {
    padding: 66px 0;
  }

  .bo-section h2,
  .bo-brand h2,
  .bo-contact h2 {
    font-size: clamp(28px, 7.4vw, 34px);
    line-height: 1.12;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .bo-section-head p,
  .bo-rich-copy p,
  .bo-contact-copy p,
  .bo-visual-caption span {
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .bo-block-showcase {
    gap: 24px;
  }

  .bo-block-left .bo-section-head h2 {
    white-space: normal;
    font-size: clamp(28px, 7.4vw, 34px);
  }

  .bo-block-showcase .bo-block-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .bo-block-showcase .bo-block-grid article {
    min-height: 132px;
    padding: 22px;
  }

  .bo-switch-panel {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    margin-top: 0;
    padding: 24px;
  }

  .bo-switch-panel h3 {
    font-size: 25px;
  }

  .bo-contact {
    padding: 72px 0;
  }

  .bo-contact-box {
    gap: 28px;
  }

  .bo-contact-panel {
    padding: 16px;
    gap: 16px;
  }

  .bo-contact-steps span {
    min-height: 74px;
    padding: 16px;
    font-size: 15px;
  }

  .bo-contact-actions {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .bo-contact-actions .bo-btn {
    min-width: 0;
    padding: 13px 10px;
    font-size: 14px;
  }

  .bo-contact-form {
    gap: 12px;
    padding-right: 0;
  }

  .bo-contact-form input,
  .bo-contact-form textarea {
    padding: 14px;
    font-size: 16px;
  }

  .bo-image-tile,
  .bo-image-tile.is-large {
    min-height: 260px;
  }
}

/* Proposal-style section upgrade. */
.bo-brand {
  background: linear-gradient(180deg, #fff, var(--bo-bg));
}

.bo-brand-grid {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
  gap: 58px;
  align-items: center;
}

.bo-brand-card {
  min-height: 360px;
  display: grid;
  place-items: center;
  gap: 26px;
  padding: 52px;
  background:
    linear-gradient(135deg, rgba(111,72,166,.08), rgba(63,183,167,.05)),
    #f7f3fb;
  border: 1px solid var(--bo-line);
  border-radius: 14px;
}

.bo-brand-card img {
  width: min(330px, 82%);
}

.bo-brand-card span {
  color: var(--bo-purple);
  font-family: "Inter", sans-serif;
  font-weight: 900;
  letter-spacing: .08em;
}

.bo-brand-copy p {
  margin: 24px 0 0;
  max-width: 640px;
  color: var(--bo-muted);
  font-size: 18px;
  word-break: keep-all;
}

.bo-brand-copy blockquote {
  margin: 54px 0 0;
  padding: 26px 30px;
  border-left: 5px solid var(--bo-purple);
  background: #fff;
  border: 1px solid var(--bo-line);
  border-left-width: 5px;
  border-radius: 10px;
  box-shadow: 0 20px 46px rgba(41,22,56,.08);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.55;
  word-break: keep-all;
}

.bo-brand-copy blockquote em {
  display: block;
  margin-bottom: 8px;
  color: var(--bo-purple);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.bo-block-showcase {
  align-items: stretch;
}

.bo-switch-panel {
  position: relative;
  top: auto;
  align-self: stretch;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
}

.bo-switch-board {
  flex: 1;
}

.bo-switch-row.is-random-on {
  background: rgba(63,183,167,.16);
  border-color: rgba(63,183,167,.34);
}

.bo-switch-row.is-random-on button {
  background: linear-gradient(135deg, #3fb7a7, #6f48a6);
}

.bo-switch-row.is-random-on button::before {
  content: "ON";
  left: 12px;
  right: auto;
  color: #fff;
}

.bo-switch-row.is-random-on button::after {
  transform: translateX(34px);
}

.bo-switch-row.is-random-off {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
}

.bo-switch-row.is-random-off button {
  background: rgba(255,255,255,.18);
}

.bo-switch-row.is-random-off button::before {
  content: "OFF";
  left: auto;
  right: 10px;
  color: rgba(255,255,255,.58);
}

.bo-switch-row.is-random-off button::after {
  transform: translateX(0);
}

.bo-cases {
  background: #fff;
  color: var(--bo-ink);
}

.bo-cases .bo-section-head {
  max-width: 980px;
}

.bo-cases .bo-section-head h2 em {
  color: var(--bo-purple);
  font-style: normal;
}

.bo-cases .bo-section-head p,
.bo-cases .bo-case-list p {
  color: var(--bo-muted);
}

.bo-case-list {
  gap: 16px;
}

.bo-case-list article {
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--bo-line);
  box-shadow: 0 18px 38px rgba(41,22,56,.06);
}

.bo-case-list article strong {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 17px 22px;
  color: var(--bo-purple);
  background: #f2edf8;
  font-family: "Inter", "Noto Sans KR", sans-serif;
  font-size: 13px;
  letter-spacing: .04em;
}

.bo-case-list article strong span {
  color: var(--bo-ink);
  font-family: "Noto Sans KR", sans-serif;
  letter-spacing: 0;
}

.bo-case-list article h3,
.bo-case-list article .bo-case-chips,
.bo-case-list article p {
  margin-left: 22px;
  margin-right: 22px;
}

.bo-case-list article h3 {
  margin-top: 18px;
}

.bo-case-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.bo-case-chips b {
  padding: 8px 12px;
  color: #fff;
  background: var(--bo-purple);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.bo-case-list article p {
  margin-top: 18px;
  margin-bottom: 24px;
  font-size: 14px;
}

.bo-case-list article p em {
  color: var(--bo-purple);
  font-style: normal;
  font-weight: 900;
}

.bo-case-list article.is-featured {
  color: #fff;
  background: var(--bo-purple);
  border-color: var(--bo-purple);
}

.bo-case-list article.is-featured strong {
  background: rgba(255,255,255,.1);
  color: #d8c7ef;
}

.bo-case-list article.is-featured strong span,
.bo-case-list article.is-featured p,
.bo-case-list article.is-featured p em {
  color: #fff;
}

.bo-case-list article.is-featured .bo-case-chips b {
  color: var(--bo-purple);
  background: #fff;
}

.bo-process-list {
  gap: 0;
  position: relative;
}

.bo-process-list li {
  position: relative;
  min-height: 210px;
  border-radius: 10px;
}

.bo-process-list li:not(:last-child)::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: -20px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--bo-purple), var(--bo-blue));
  border: 4px solid var(--bo-bg);
  border-radius: 50%;
  box-shadow: 0 12px 24px rgba(41,22,56,.16);
  transform: translateY(-50%);
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.bo-compliance {
  background: linear-gradient(180deg, #fff, #fbf9fc);
}

.bo-compliance .bo-two-col {
  grid-template-columns: minmax(280px, .62fr) minmax(0, 1fr);
  gap: 54px;
}

.bo-check-grid {
  gap: 14px;
}

.bo-check-grid span {
  min-height: 86px;
  padding: 22px 22px 22px 58px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(41,22,56,.05);
}

.bo-check-grid span::before {
  content: "✓";
  display: grid;
  place-items: center;
  top: 20px;
  width: 24px;
  height: 24px;
  color: var(--bo-mint);
  background: rgba(63,183,167,.1);
  border-radius: 50%;
}

@media (min-width: 1081px) {
  .bo-switch-panel {
    margin-top: 0;
    height: auto;
  }
}

@media (max-width: 1080px) {
  .bo-brand-grid,
  .bo-compliance .bo-two-col {
    grid-template-columns: 1fr;
  }

  .bo-process-list {
    gap: 12px;
  }

  .bo-process-list li:not(:last-child)::after {
    display: none;
  }
}

/* Final polish: make the block flow read left-to-right and open up compliance. */
.bo-process-list {
  gap: 18px;
}

.bo-process-list li {
  z-index: 1;
}

.bo-process-list li:not(:last-child)::after {
  content: "\2192";
  right: -31px;
  width: 44px;
  height: 44px;
  color: #fff;
  background: linear-gradient(135deg, var(--bo-purple), var(--bo-blue));
  border: 5px solid var(--bo-bg);
  border-radius: 50%;
  box-shadow: 0 14px 28px rgba(41, 22, 56, .18);
  font-size: 22px;
  font-weight: 900;
}

.bo-compliance .bo-container {
  width: min(1280px, calc(100% - 40px));
}

.bo-compliance .bo-two-col {
  grid-template-columns: minmax(360px, .55fr) minmax(0, 1.45fr);
  gap: 76px;
}

.bo-compliance h2 {
  margin-bottom: 24px;
  max-width: 420px;
}

.bo-compliance p {
  max-width: 470px;
  line-height: 1.85;
}

.bo-check-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.bo-check-grid span {
  min-height: 112px;
  padding: 24px 24px 24px 58px;
}

@media (max-width: 1180px) {
  .bo-check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  .bo-compliance .bo-container {
    width: min(720px, calc(100% - 32px));
  }

  .bo-compliance .bo-two-col,
  .bo-check-grid {
    grid-template-columns: 1fr;
  }

  .bo-process-list {
    gap: 12px;
  }

  .bo-process-list li:not(:last-child)::after {
    display: none;
  }
}

/* Requested polish: compact lower sections, clearer arrows, and block-set cases. */
.bo-cases,
.bo-process,
.bo-compliance {
  padding-top: 108px;
  padding-bottom: 108px;
}

.bo-cases {
  background:
    radial-gradient(circle at 88% 16%, rgba(116, 74, 178, .08), transparent 28%),
    linear-gradient(180deg, #fff 0%, #fbf9fc 100%);
}

.bo-cases .bo-section-head {
  max-width: 1120px;
}

.bo-case-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.bo-case-list article {
  position: relative;
  min-height: 0;
  padding: 24px;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(250,247,253,.98)),
    linear-gradient(135deg, transparent 68%, rgba(116,74,178,.08));
}

.bo-case-list article::after {
  content: "";
  position: absolute;
  right: -26px;
  bottom: -28px;
  width: 128px;
  height: 128px;
  background:
    linear-gradient(135deg, transparent 0 44%, rgba(116,74,178,.18) 45% 64%, transparent 65%),
    linear-gradient(45deg, transparent 0 48%, rgba(63,183,167,.14) 49% 62%, transparent 63%);
  transform: rotate(45deg);
  pointer-events: none;
}

.bo-case-list article strong {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  background: transparent;
  letter-spacing: 0;
}

.bo-case-list article strong i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 30px;
  color: #fff;
  background: var(--bo-purple);
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}

.bo-case-list article strong span {
  color: var(--bo-purple);
  font-size: 14px;
  font-weight: 900;
}

.bo-case-list article h3,
.bo-case-list article .bo-case-chips,
.bo-case-list article p {
  margin-left: 0;
  margin-right: 0;
}

.bo-case-list article h3 {
  margin-top: 18px;
  font-size: clamp(22px, 2vw, 28px);
}

.bo-case-chips {
  position: relative;
  gap: 10px;
  margin-top: 18px;
  padding: 4px 0;
}

.bo-case-chips::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, rgba(116,74,178,.14), rgba(63,183,167,.28));
  transform: translateY(-50%);
}

.bo-case-chips b {
  position: relative;
  z-index: 1;
  padding: 10px 13px;
  color: var(--bo-purple);
  background: #fff;
  border: 1px solid rgba(116,74,178,.18);
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(41,22,56,.08);
}

.bo-case-list article p {
  margin-top: 18px;
  margin-bottom: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(41,22,56,.08);
}

.bo-case-list article.is-featured {
  background:
    radial-gradient(circle at 92% 18%, rgba(63,183,167,.24), transparent 28%),
    linear-gradient(135deg, #2b1538 0%, #744ab2 100%);
  box-shadow: 0 24px 56px rgba(41,22,56,.22);
}

.bo-case-list article.is-featured strong i {
  color: var(--bo-purple);
  background: #fff;
}

.bo-case-list article.is-featured strong span,
.bo-case-list article.is-featured h3,
.bo-case-list article.is-featured p,
.bo-case-list article.is-featured p em {
  color: #fff;
}

.bo-case-list article.is-featured .bo-case-chips::before {
  background: rgba(255,255,255,.2);
}

.bo-case-list article.is-featured .bo-case-chips b {
  color: #fff;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  box-shadow: none;
}

.bo-process-list {
  gap: 30px;
}

.bo-process-list li {
  min-height: 192px;
}

.bo-process-list li:not(:last-child)::after {
  right: -30px;
  width: 28px;
  height: 28px;
  border: 0;
  box-shadow: 0 10px 22px rgba(41,22,56,.16);
  font-size: 16px;
}

.bo-compliance {
  padding-top: 96px;
  padding-bottom: 96px;
}

.bo-check-grid span {
  min-height: 132px;
}

.bo-footer-grid {
  grid-template-columns: 1.1fr 1fr 1.4fr;
}

@media (max-width: 1080px) {
  .bo-cases,
  .bo-process,
  .bo-compliance {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .bo-case-list {
    grid-template-columns: 1fr;
  }

  .bo-process-list {
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .bo-case-list article {
    padding: 20px;
  }

  .bo-case-chips b {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
  }
}

/* Mobile compaction pass: keep block sections readable without becoming too long. */
@media (max-width: 720px) {
  .bo-reason-grid,
  .bo-why .bo-card-grid,
  .bo-block-showcase .bo-block-grid,
  .bo-process-list,
  .bo-check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .bo-block-showcase {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .bo-block-left,
  .bo-switch-panel {
    min-width: 0;
  }

  .bo-block-left .bo-section-head {
    max-width: none;
  }

  .bo-block-left .bo-section-head h2 {
    max-width: 330px;
    font-size: clamp(30px, 8vw, 38px);
    line-height: 1.08;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .bo-block-left .bo-section-head p {
    max-width: 330px;
    font-size: 15px;
    line-height: 1.65;
    word-break: keep-all;
  }

  .bo-block-showcase .bo-block-grid article {
    min-height: 118px;
    padding: 16px 14px;
  }

  .bo-block-showcase .bo-block-grid h3 {
    margin-top: 12px;
    font-size: 17px;
  }

  .bo-block-showcase .bo-block-grid p {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.45;
  }

  .bo-switch-panel {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 22px;
    border-radius: 14px;
  }

  .bo-switch-panel h3 {
    font-size: 22px;
    line-height: 1.25;
  }

  .bo-switch-board {
    gap: 8px;
    margin-top: 18px;
    padding: 0;
    background: transparent;
    border: 0;
  }

  .bo-switch-row {
    min-height: 46px;
    padding: 9px 10px;
  }

  .bo-switch-row span {
    font-size: 13px;
  }

  .bo-switch-row button {
    width: 58px;
    height: 28px;
  }

  .bo-switch-row button::before {
    font-size: 8px;
  }

  .bo-switch-row button::after {
    width: 22px;
    height: 22px;
  }

  .bo-switch-row.is-on button::after,
  .bo-switch-row.is-random-on button::after {
    transform: translateX(28px);
  }

  .bo-reason-grid article,
  .bo-why .bo-card-grid article,
  .bo-process-list li,
  .bo-check-grid span {
    min-height: 0;
    padding: 16px 14px;
    border-radius: 8px;
  }

  .bo-reason-grid h3,
  .bo-why .bo-card-grid h3,
  .bo-process-list strong,
  .bo-check-grid span {
    font-size: 15px;
    line-height: 1.38;
    word-break: keep-all;
  }

  .bo-reason-grid p,
  .bo-why .bo-card-grid p,
  .bo-process-list p {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.45;
  }

  .bo-process-list span {
    margin-bottom: 18px;
    font-size: 14px;
  }

  .bo-compliance {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .bo-compliance .bo-two-col {
    gap: 28px;
  }

  .bo-compliance h2 {
    margin-bottom: 18px;
    font-size: clamp(30px, 8vw, 38px);
    line-height: 1.1;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .bo-compliance p {
    font-size: 15px;
    line-height: 1.7;
  }

  .bo-check-grid span {
    display: flex;
    align-items: flex-start;
    padding-left: 42px;
  }

  .bo-check-grid span::before {
    left: 14px;
    top: 16px;
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 390px) {
  .bo-reason-grid,
  .bo-why .bo-card-grid,
  .bo-block-showcase .bo-block-grid,
  .bo-process-list,
  .bo-check-grid {
    gap: 8px;
  }

  .bo-block-showcase .bo-block-grid article,
  .bo-reason-grid article,
  .bo-why .bo-card-grid article,
  .bo-process-list li,
  .bo-check-grid span {
    padding: 14px 12px;
  }

  .bo-check-grid span {
    padding-left: 38px;
    font-size: 14px;
  }
}

/* Mobile Korean copy polish: avoid breaking words in the middle. */
@media (max-width: 720px) {
  .bo-section h2,
  .bo-brand h2,
  .bo-contact h2,
  .bo-hero h1 {
    word-break: keep-all;
    overflow-wrap: normal;
    text-wrap: balance;
  }

  .bo-section-head p,
  .bo-rich-copy p,
  .bo-contact-copy p,
  .bo-hero p {
    word-break: keep-all;
    overflow-wrap: normal;
  }
}

@media (max-width: 390px) {
  .bo-contact h2 {
    font-size: clamp(29px, 7.6vw, 34px);
    line-height: 1.14;
  }
}