@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.fcard { animation: none; }
.fcard:nth-child(1) { animation-delay: 0s; }
.fcard:nth-child(2) { animation-delay: .9s; }
.fcard:nth-child(3) { animation-delay: .45s; }
.fcard:nth-child(4) { animation-delay: 1.3s; }
.fcard:hover { animation-play-state: paused; }

@keyframes redshine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.redshine { background: linear-gradient(100deg, #e05a5f 0%, #d64048 25%, #ffb3b6 45%, #d64048 60%, #e05a5f 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: redshine 4s linear infinite; }

@keyframes cta-orb { 0% { transform: translate(-12%,-10%) scale(1); } 50% { transform: translate(12%,10%) scale(1.25); } 100% { transform: translate(-12%,-10%) scale(1); } }
.cta-anim { background: #0d0d0d; }
.cta-anim::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(circle at 50% 50%, #3a3a3a 0%, #232323 30%, #0d0d0d 62%); animation: cta-orb 11s ease-in-out infinite; pointer-events: none; }

@keyframes arcspin { to { transform: rotate(-360deg); } }
.arcring { animation: arcspin 95s linear infinite; }

/* Requested layout and interaction refinements */
.header-request { gap: 0; }
.feat-card { transform: none !important; translate: 0 0; animation: none; }

@keyframes banner-scroll-up { from { translate: 0 0; } to { translate: 0 -30px; } }
@keyframes banner-scroll-down { from { translate: 0 0; } to { translate: 0 30px; } }
@supports (animation-timeline: scroll()) {
  .feat-card:nth-child(odd) { animation: banner-scroll-up 1s linear both; animation-timeline: scroll(root block); animation-range: 0 900px; }
  .feat-card:nth-child(even) { animation: banner-scroll-down 1s linear both; animation-timeline: scroll(root block); animation-range: 0 900px; }
}

.fields-orbit { position: absolute; left: 0; right: 0; top: 0; height: 620px; z-index: 1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 4%, #000 11%, #000 89%, rgba(0,0,0,.12) 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 4%, #000 11%, #000 89%, rgba(0,0,0,.12) 96%, transparent 100%); }
.orbit-arc-mask { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: radial-gradient(96% 118% at 50% 2%, #000 42%, rgba(0,0,0,.32) 62%, transparent 80%); mask-image: radial-gradient(96% 118% at 50% 2%, #000 42%, rgba(0,0,0,.32) 62%, transparent 80%); }
.orbit-ring { --orbit-radius: -1400px; position: absolute; left: 50%; top: 1460px; width: 0; height: 0; animation: orbit-ring-spin 142.5s linear -71.25s infinite both; will-change: transform; }
.orbit-card { position: absolute; transform: rotate(var(--orbit-angle)) translateY(var(--orbit-radius)); }
.orbit-card img { width: 104px; max-width: none; height: 104px; margin: -52px; display: block; object-fit: cover; overflow: hidden; border-radius: 20px; background: #e6e6e6; box-shadow: 0 18px 40px rgba(0,0,0,.16); }
.orbit-card-1 { --orbit-angle: 0deg; }
.orbit-card-2 { --orbit-angle: 9.4737deg; }
.orbit-card-3 { --orbit-angle: 18.9474deg; }
.orbit-card-4 { --orbit-angle: 28.4211deg; }
.orbit-card-5 { --orbit-angle: 37.8947deg; }
.orbit-card-6 { --orbit-angle: 47.3684deg; }
.orbit-card-7 { --orbit-angle: 56.8421deg; }
.orbit-card-8 { --orbit-angle: 66.3158deg; }
.orbit-card-9 { --orbit-angle: 75.7895deg; }
.orbit-card-10 { --orbit-angle: 85.2632deg; }
.orbit-card-11 { --orbit-angle: 94.7368deg; }
.orbit-card-12 { --orbit-angle: 104.2105deg; }
.orbit-card-13 { --orbit-angle: 113.6842deg; }
.orbit-card-14 { --orbit-angle: 123.1579deg; }
.orbit-card-15 { --orbit-angle: 132.6316deg; }
.orbit-card-16 { --orbit-angle: 142.1053deg; }
.orbit-card-17 { --orbit-angle: 151.5789deg; }
.orbit-card-18 { --orbit-angle: 161.0526deg; }
.orbit-card-19 { --orbit-angle: 170.5263deg; }
.orbit-card-20 { --orbit-angle: 180deg; }
.orbit-card-21 { --orbit-angle: 189.4737deg; }
.orbit-card-22 { --orbit-angle: 198.9474deg; }
.orbit-card-23 { --orbit-angle: 208.4211deg; }
.orbit-card-24 { --orbit-angle: 217.8947deg; }
.orbit-card-25 { --orbit-angle: 227.3684deg; }
.orbit-card-26 { --orbit-angle: 236.8421deg; }
.orbit-card-27 { --orbit-angle: 246.3158deg; }
.orbit-card-28 { --orbit-angle: 255.7895deg; }
.orbit-card-29 { --orbit-angle: 265.2632deg; }
.orbit-card-30 { --orbit-angle: 274.7368deg; }
.orbit-card-31 { --orbit-angle: 284.2105deg; }
.orbit-card-32 { --orbit-angle: 293.6842deg; }
.orbit-card-33 { --orbit-angle: 303.1579deg; }
.orbit-card-34 { --orbit-angle: 312.6316deg; }
.orbit-card-35 { --orbit-angle: 322.1053deg; }
.orbit-card-36 { --orbit-angle: 331.5789deg; }
.orbit-card-37 { --orbit-angle: 341.0526deg; }
.orbit-card-38 { --orbit-angle: 350.5263deg; }
@keyframes orbit-ring-spin { to { transform: rotate(-360deg); } }

@keyframes why-card-up { from { translate: 0 0; } to { translate: 0 -36px; } }
@keyframes why-card-down { from { translate: 0 0; } to { translate: 0 36px; } }
@supports (animation-timeline: view()) {
  #why { view-timeline-name: --why-section; view-timeline-axis: block; }
  #why .ui-101 { animation: why-card-up 1s linear both; animation-timeline: --why-section; animation-range: entry 0% cover 68%; }
  #why .ui-106 { animation: why-card-down 1s linear both; animation-timeline: --why-section; animation-range: entry 0% cover 68%; }
}

@media (max-width: 768px) {
  .feat-card { animation: none !important; translate: 0 0 !important; }
  .fields-orbit { height: 300px; }
  .orbit-arc-mask { inset: 0; }
  .orbit-ring { --orbit-radius: -440px; top: 510px; animation-duration: 142.5s; }
  .orbit-card img { width: 52px; height: 52px; margin: -26px; border-radius: 11px; }
}

/* Generated from the approved Claude Design layout. */
.ui-001{min-height: 100vh; background: rgb(255, 255, 255); overflow-x: hidden; display: var(--root-flex,block); flex-direction: column;}
.ui-002{transform: translate(720px, 365.2px);}
.ui-003{position: sticky; top: 0px; z-index: 50; background: transparent; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(0px);}
.ui-004{max-width: 100%; margin: 0px; padding: 14px var(--pad-x); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;}
.ui-005{grid-column: 1; justify-self: start; display: flex; align-items: center; padding-left: 6px;}
.ui-006{height: var(--logo); width: auto; display: block;}
.ui-007{display: var(--nav-links); align-items: center; gap: 0.5rem; padding: 8px 12px; font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); background: rgb(242, 243, 245); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 999px; transition: background 0.3s;}
.ui-008{color: rgb(17, 17, 17); padding: 7px 15px; border-radius: 999px; transition: color 0.3s;}
.ui-009{grid-column: 3; justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 12px;}
.ui-010{order: var(--msearch-order,0); display: var(--nav-cta); align-items: center; justify-content: center; width: 42px; height: 42px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: rgb(17, 17, 17); cursor: pointer; transition: color 0.2s;}
.ui-011{display: var(--nav-cta); align-items: center; gap: 7px; height: var(--cta-h,42px); padding: var(--cta-btn-pad,0 20px); background: rgba(255, 255, 255, 0.7); color: rgb(17, 17, 17); font-weight: 600; font-size: var(--cta-fs,14.5px); border: 1px solid rgb(220, 220, 220); border-radius: 999px; backdrop-filter: blur(10px); transition: 0.2s;}
.ui-012{display: var(--cta-ico,inline);}
.ui-013{position: fixed; inset: 0px; z-index: 90; background: rgba(17, 17, 17, 0.32); backdrop-filter: blur(3px); transition: opacity 0.3s; opacity: 0; pointer-events: none; display: flex; align-items: flex-start; justify-content: center; padding: 80px 20px;}
.ui-014{width: 100%; max-width: 1000px; border-radius: 22px; overflow: hidden; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.2) 0px 36px 90px; transition: transform 0.32s cubic-bezier(0.22, 0.6, 0.2, 1); transform: scale(0.97) translateY(10px);}
.ui-015{display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-bottom: 1px solid rgb(235, 235, 238);}
.ui-016{flex: 1 1 0%; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; outline: none; color: rgb(17, 17, 17); font-size: 18px; font-family: inherit;}
.ui-016::placeholder{color: rgb(151, 151, 157); opacity: 1;}
.ui-017{display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: rgb(138, 139, 144); background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; transition: color 0.2s;}
.ui-018{display: grid; grid-template-columns: 200px 1fr;}
.ui-019{padding: 18px 14px; border-right: 1px solid rgb(235, 235, 238); background: rgb(249, 249, 250); display: flex; flex-direction: column; gap: 4px;}
.ui-020{display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px; background: rgb(232, 232, 235); color: rgb(17, 17, 17); font-size: 14.5px; font-weight: 600;}
.ui-021{display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px; color: rgb(91, 91, 96); font-size: 14.5px; font-weight: 500;}
.ui-022{padding: 22px 24px; max-height: 60vh; overflow-y: auto;}
.ui-023{font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: rgb(127, 127, 133); margin-bottom: 13px;}
.ui-024{display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px;}
.ui-025{display: block; border: 1px solid rgb(235, 235, 238); border-radius: 12px; overflow: hidden; background: rgb(247, 247, 248);}
.ui-026{aspect-ratio: 16 / 10; overflow: hidden; background: rgb(235, 235, 237);}
.ui-027{width: 100%; height: 100%; object-fit: cover;}
.ui-028{padding: 10px 12px;}
.ui-029{font-size: 11px; color: rgb(138, 138, 144);}
.ui-030{margin-top: 3px; font-size: 13px; font-weight: 600; color: rgb(25, 25, 27);}
.ui-031{display: flex; flex-direction: column; gap: 2px; margin-bottom: 28px;}
.ui-032{display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 11px;}
.ui-033{flex-shrink: 0; width: 50px; height: 50px; border-radius: 9px; overflow: hidden; background: rgb(235, 235, 237);}
.ui-034{flex: 1 1 0%; min-width: 0px;}
.ui-035{margin-top: 2px; font-size: 13.5px; font-weight: 600; color: rgb(35, 35, 38); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ui-036{display: flex; flex-direction: column; gap: 2px;}
.ui-037{display: flex; align-items: center; gap: 13px; padding: 12px; border-radius: 11px;}
.ui-038{flex: 1 1 0%; font-size: 14px; color: rgb(45, 45, 48);}
.ui-039{position: fixed; inset: 0px; z-index: 70; background: rgba(20, 20, 20, 0.42); transition: opacity 0.35s; opacity: 0; pointer-events: none;}
.ui-040{position: fixed; top: 0px; left: 0px; bottom: 0px; z-index: 71; width: 85vw; max-width: 360px; background: rgb(255, 255, 255); box-shadow: rgba(20, 20, 20, 0.16) 8px 0px 40px; transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(-100%); display: flex; flex-direction: column;}
.ui-041{display: flex; align-items: center; justify-content: flex-end; padding: 16px 18px;}
.ui-042{width: 38px; height: 38px; border-radius: 10px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; font-size: 22px; color: rgb(17, 17, 17); cursor: pointer; line-height: 1;}
.ui-043{display: flex; flex-direction: column; padding: 14px 12px; gap: 2px;}
.ui-044{padding: 15px 14px; border-radius: 12px; font-size: 17px; font-weight: 600; color: rgb(17, 17, 17);}
.ui-045{order: 1; position: relative; z-index: 1; padding: var(--hero-pt) var(--pad-x) 90px; background: transparent; overflow: hidden;}
.ui-046{position: relative; z-index: 1; max-width: 900px; margin: 0px auto; text-align: center;}
.ui-047{margin: 0px; font-family: Outfit, Pretendard, sans-serif; font-weight: 600; font-size: var(--h1); line-height: var(--h1-lh); letter-spacing: -0.03em; color: rgb(17, 17, 17); text-wrap: balance;}
.ui-048{margin: 20px auto 0px; font-size: var(--hero-p); line-height: 1.6; color: rgb(17, 17, 17); font-weight: 500;}
.ui-049{margin: 34px 0px 0px; display: var(--hero-btns); gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap;}
.ui-050{display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0px 28px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-weight: 600; font-size: 16px; border-radius: 999px; transition: background-color .32s ease, box-shadow .32s ease, color .32s ease; box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 18px;}
#top a.ui-050:hover{background:#d64048 !important; color:#fff !important; transform:none !important; box-shadow:0 9px 22px rgba(214,64,72,.24) !important;}
.ui-051{display: flex; align-items: center; gap: 8px;}
.ui-052{width: 52px; height: 52px; border-radius: 999px; border: 0; background: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; color: rgb(17, 17, 17); transition: 0.2s;}
.ui-053{position: relative; z-index: 1; max-width: var(--maxw); margin: var(--feat-mt,88px) auto 0; display: var(--grid-view); grid-template-columns: var(--cols4); gap: var(--gap);}
.ui-054{position: relative; display: block; aspect-ratio: var(--feat-ar,2.4/3); margin-top: 0px; will-change: transform; transition: transform 0.3s, box-shadow 0.3s; border-radius: var(--card-radius); overflow: hidden; color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.12) 0px 10px 30px; transform: translateY(-15.6402px);}
.ui-055{position: absolute; inset: 0px; background: rgb(26, 26, 26);}
.hero-card-image-base{position: relative; z-index: 1;}
.hero-card-image-hover{position: absolute; inset: 0; z-index: 2; opacity: 0; transform: scale(1.025); transition: opacity .62s cubic-bezier(.22,.6,.2,1), transform .85s cubic-bezier(.22,.6,.2,1);}
.ui-056{position: absolute; inset: 0px; background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.82) 100%); opacity: 1; transition: opacity .55s cubic-bezier(.22,.6,.2,1);}
.hero-card-website .ui-056,
.hero-card-content .ui-056{z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.22) 44%, rgba(0,0,0,.78) 100%);}
.ui-057{position: absolute; left: 0px; right: 0px; bottom: 0px; z-index: 3; padding: var(--fpad);}
.ui-058{display: var(--feat-ico,flex); width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(4px); align-items: center; justify-content: center; color: rgb(255, 255, 255);}
.ui-059{margin: 16px 0px 0px; font-size: var(--fh3); font-weight: 600; letter-spacing: -0.02em;}
.ui-060{margin: 9px 0px 0px; font-size: var(--fp); line-height: 1.55; color: rgba(255, 255, 255, 0.85);}
.ui-061{position: relative; display: block; aspect-ratio: var(--feat-ar,2.4/3); margin-top: 0px; will-change: transform; transition: transform 0.3s, box-shadow 0.3s; border-radius: var(--card-radius); overflow: hidden; color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.12) 0px 10px 30px; transform: translateY(15.6402px);}
.ui-062{display: var(--slider-view); position: relative; z-index: 1; margin: 44px auto 0px;}
.ui-063{overflow: hidden;}
.ui-064{display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(0%);}
.ui-065{flex: 0 0 84%; max-width: 84%; padding: 0px 6px; box-sizing: border-box;}
.ui-066{position: relative; display: block; aspect-ratio: var(--fcard-ar); border-radius: var(--card-radius); overflow: hidden; color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.14) 0px 10px 26px;}
.ui-067{position: absolute; inset: 0px; background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.82));}
.ui-068{margin: 0px; font-size: var(--fh3); font-weight: 600; letter-spacing: -0.02em;}
.ui-069{margin: 8px 0px 0px; font-size: var(--fp); line-height: 1.55; color: rgba(255, 255, 255, 0.85);}
.ui-070{margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 16px;}
.ui-071{width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgb(220, 220, 220); background: rgb(255, 255, 255); color: rgb(17, 17, 17); font-size: 16px; cursor: pointer; flex-shrink: 0;}
.ui-072{display: flex; gap: 6px; align-items: center;}
.ui-073{height: 7px; width: 20px; border-radius: 999px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0px; cursor: pointer; background: rgb(17, 17, 17); transition: 0.3s;}
.ui-074{height: 7px; width: 7px; border-radius: 999px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0px; cursor: pointer; background: rgb(213, 213, 213); transition: 0.3s;}
.ui-075{order: var(--stats-order,0); position: relative; z-index: 1; padding: var(--stats-pt,var(--sec-y)) var(--pad-x) var(--sec-y); background: transparent; border-top: none;}
.ui-076{max-width: var(--maxw); margin: 0px auto; display: grid; grid-template-columns: var(--cols4); gap: var(--stat-gap);}
.ui-077{text-align: center; background: var(--stat-cardbg); border-radius: 14px; padding: var(--stat-cardpad);}
.ui-078{font-family: Outfit, sans-serif; font-weight: 400; font-size: var(--stat); color: rgb(17, 17, 17); letter-spacing: -0.02em;}
.ui-079{font-size: 0.5em;}
.ui-080{margin-top: 6px; font-size: var(--stat-lbl); color: rgb(119, 119, 119);}
.ui-081{order: var(--search-order,0); position: relative; z-index: 1; padding: 0 var(--pad-x) var(--sec-y); background: transparent;}
.ui-082{max-width: var(--maxw); margin: 0px auto;}
.ui-083{text-align: center; max-width: 760px; margin: 0px auto;}
.ui-084{display: none; font-family: Outfit, sans-serif; font-weight: 600; font-size: var(--eyebrow); letter-spacing: 0.14em; color: rgb(17, 17, 17);}
.ui-085{margin: 14px 0px 0px; font-family: Outfit, Pretendard, sans-serif; font-weight: 600; font-size: var(--h2); line-height: 1.24; letter-spacing: -0.03em; color: rgb(17, 17, 17);}
.ui-086{margin: 16px auto 0px; font-size: var(--body); line-height: 1.7; color: rgb(102, 102, 102);}
.ui-087{margin-top: 48px; display: grid; grid-template-columns: var(--seo-cols,repeat(3,1fr)); gap: var(--gap);}
.ui-088{padding: var(--seocard-pad); background: rgb(247, 247, 247); border-radius: var(--card-radius); transition: transform 0.25s, box-shadow 0.25s;}
.ui-089{font-family: Outfit, sans-serif; font-weight: 600; font-size: var(--seonum); letter-spacing: -0.02em; color: rgb(17, 17, 17);}
.ui-090{margin: 14px 0px 0px; font-size: var(--seo-h3,20px); font-weight: 600; letter-spacing: -0.02em; color: rgb(17, 17, 17);}
.ui-091{margin: 10px 0px 0px; font-size: var(--body); line-height: 1.65; color: rgb(102, 102, 102);}
.ui-092{grid-column: var(--geo-span,auto); padding: var(--seocard-pad); background: rgb(17, 17, 17); border-radius: var(--card-radius); transition: transform 0.25s, box-shadow 0.25s;}
.ui-093{font-family: Outfit, sans-serif; font-weight: 600; font-size: var(--seonum); letter-spacing: -0.02em; color: rgb(255, 255, 255);}
.ui-094{margin: 14px 0px 0px; font-size: var(--seo-h3,20px); font-weight: 600; letter-spacing: -0.02em; color: rgb(255, 255, 255);}
.ui-095{margin: 10px 0px 0px; font-size: var(--body); line-height: 1.65; color: rgb(184, 184, 184);}
.ui-096{order: 4; position: relative; z-index: 1; padding: 0 var(--pad-x) var(--sec-y); background: transparent;}
.ui-097{max-width: var(--maxw); margin: 0px auto; text-align: center;}
.ui-098{margin: 0px; font-family: Outfit, Pretendard, sans-serif; font-weight: 600; font-size: var(--h2); line-height: 1.24; letter-spacing: -0.03em; color: rgb(17, 17, 17);}
.ui-099{margin: 16px auto 0px; max-width: 680px; font-size: var(--body); line-height: 1.7; color: rgb(102, 102, 102);}
.ui-100{margin-top: var(--sec-head-mt); overflow: hidden;}
.why-slider-track{display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);}
.why-card-clone{display: none;}
.ui-101{position: relative; aspect-ratio: var(--why-ar); border-radius: var(--card-radius); overflow: hidden; background: rgb(26, 26, 26);}
.ui-102{position: absolute; inset: 0px; background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.78)); opacity: 1; transition: opacity .55s cubic-bezier(.22,.6,.2,1);}
.ui-103{position: absolute; left: 0px; right: 0px; bottom: 0px; padding: 28px 30px; text-align: left; color: rgb(255, 255, 255);}
.ui-104{margin: 0px; font-size: var(--fh3); font-weight: 600;}
.ui-105{margin: 8px 0px 0px; font-size: var(--fp); line-height: 1.6; color: rgba(255, 255, 255, 0.82);}
.ui-106{position: relative; aspect-ratio: var(--why-ar); margin-top: 0; border-radius: var(--card-radius); overflow: hidden; background: rgb(26, 26, 26);}
.ui-107{margin-top: 40px; display: none;}
@media (min-width: 769px) {
  #why .ui-100 { overflow: visible; }
  #why .ui-106 .ui-103 { bottom: 28px; }
}
.ui-108{order: 5; position: relative; z-index: 1; padding: 0 var(--fields-px) var(--sec-y); background: transparent; overflow: hidden;}
.ui-109{position: relative; background: transparent; padding: 0px;}
.ui-110{position: absolute; left: 0px; right: 0px; top: 0px; height: var(--arc-h,620px); overflow: hidden; pointer-events: none; z-index: 1; mask-image: radial-gradient(96% 118% at 50% 2%, rgb(0, 0, 0) 42%, rgba(0, 0, 0, 0.32) 62%, transparent 80%);}
.ui-111{position: absolute; left: 50%; top: 1500px; width: 0px; height: 0px;}
.ui-112{position: absolute; transform: rotate(0deg) translateY(-1400px);}
.ui-113{width: 104px; height: 104px; margin-left: -52px; margin-top: -52px; border-radius: 20px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.16) 0px 18px 40px; background: rgb(230, 230, 230);}
.ui-114{position: absolute; transform: rotate(16.3636deg) translateY(-1400px);}
.ui-115{position: absolute; transform: rotate(32.7273deg) translateY(-1400px);}
.ui-116{position: absolute; transform: rotate(49.0909deg) translateY(-1400px);}
.ui-117{position: absolute; transform: rotate(65.4545deg) translateY(-1400px);}
.ui-118{position: absolute; transform: rotate(81.8182deg) translateY(-1400px);}
.ui-119{position: absolute; transform: rotate(98.1818deg) translateY(-1400px);}
.ui-120{position: absolute; transform: rotate(114.545deg) translateY(-1400px);}
.ui-121{position: absolute; transform: rotate(130.909deg) translateY(-1400px);}
.ui-122{position: absolute; transform: rotate(147.273deg) translateY(-1400px);}
.ui-123{position: absolute; transform: rotate(163.636deg) translateY(-1400px);}
.ui-124{position: absolute; transform: rotate(180deg) translateY(-1400px);}
.ui-125{position: absolute; transform: rotate(196.364deg) translateY(-1400px);}
.ui-126{position: absolute; transform: rotate(212.727deg) translateY(-1400px);}
.ui-127{position: absolute; transform: rotate(229.091deg) translateY(-1400px);}
.ui-128{position: absolute; transform: rotate(245.455deg) translateY(-1400px);}
.ui-129{position: absolute; transform: rotate(261.818deg) translateY(-1400px);}
.ui-130{position: absolute; transform: rotate(278.182deg) translateY(-1400px);}
.ui-131{position: absolute; transform: rotate(294.545deg) translateY(-1400px);}
.ui-132{position: absolute; transform: rotate(310.909deg) translateY(-1400px);}
.ui-133{position: absolute; transform: rotate(327.273deg) translateY(-1400px);}
.ui-134{position: absolute; transform: rotate(343.636deg) translateY(-1400px);}
.ui-135{position: relative; z-index: 2; text-align: center; max-width: 680px; margin: var(--arc-title-mt,260px) auto 0;}
.ui-136{display: none; font-family: Outfit, sans-serif; font-weight: 600; font-size: var(--eyebrow); letter-spacing: 0.14em; color: rgb(153, 153, 153);}
.ui-137{margin: 16px auto 0px; max-width: 600px; font-size: var(--body); line-height: 1.7; color: rgb(102, 102, 102);}
.ui-138{position: relative; z-index: 2; margin-top: var(--sec-head-mt); max-width: 1180px; margin-left: auto; margin-right: auto;}
.ui-139{display: grid; grid-template-columns: var(--field-list-cols,repeat(3,1fr)); gap: 4px 26px;}
.ui-140{display: flex; align-items: center; gap: 16px; padding: 15px 16px; border-radius: 14px; opacity: 1; text-decoration: none;}
.ui-141{flex-shrink: 0; width: 46px; height: 46px; border-radius: 11px; overflow: hidden; background: rgb(230, 230, 230);}
.ui-142{min-width: 0px;}
.ui-143{font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); letter-spacing: -0.01em;}
.ui-144{margin-top: 3px; font-size: 13px; color: rgb(153, 153, 153); line-height: 1.4;}
.ui-145{display: flex; align-items: center; gap: 16px; padding: 15px 16px; border-radius: 14px; opacity: 0.55; text-decoration: none;}
.ui-146{display: flex; align-items: center; gap: 16px; padding: 15px 16px; border-radius: 14px; opacity: 0.28; text-decoration: none;}
.ui-148{position: relative; z-index: 2; margin-top: 64px; text-align: center;}
.ui-149{display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--btn-h,50px); padding: 0 var(--btn-px,26px); border-radius: 999px; background: rgb(244, 244, 245); color: rgb(17, 17, 17); font-weight: 600; font-size: var(--btn-fs,15px); transition: 0.2s;}
.ui-150{order: 6; position: relative; z-index: 1; padding: 0 var(--pad-x) var(--sec-y); background: transparent;}
.ui-151{position: relative; max-width: var(--maxw); margin: 0px auto; overflow: hidden; border-radius: 26px; padding: var(--cta-pad,110px 40px); color: rgb(255, 255, 255);}
.ui-152{position: absolute; inset: 0px; background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);}
.ui-153{position: relative; text-align: center;}
.ui-154{margin: 0px auto; max-width: 760px; font-family: Outfit, Pretendard, sans-serif; font-weight: 600; font-size: var(--h2); line-height: 1.2; letter-spacing: -0.03em; text-wrap: balance;}
.ui-155{margin: 16px auto 0px; max-width: 560px; font-size: var(--lead); line-height: 1.6; color: rgb(196, 196, 196);}
.ui-156{margin: 26px 0px 0px; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; font-size: 14.5px; color: rgb(154, 154, 154);}
.ui-157{display: inline-flex; align-items: center; gap: 7px;}
.ui-158{width: 6px; height: 6px; border-radius: 50%; background: rgb(214, 64, 72); flex-shrink: 0;}
.ui-159{opacity: 0.5;}
.ui-160{order: 7; background: rgb(255, 255, 255); color: rgb(102, 102, 102); padding: var(--footer-pad); border-top: 1px solid rgb(240, 240, 240); transition: background 0.45s, color 0.45s;}
.ui-161{display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap;}
.ui-162{flex: 1 1 0%; min-width: 280px;}
.ui-163{position: relative; display: var(--footer-logo,inline-block); margin-bottom: 22px;}
.ui-164{height: 38px; width: auto; display: block; transition: opacity 0.45s;}
.ui-165{height: 38px; width: auto; display: block; position: absolute; left: 0px; top: 0px; z-index: 2; opacity: 0; transition: opacity 0.45s; pointer-events: none;}
.ui-166{display: var(--footer-chev); width: auto; align-items: center; gap: 6px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0px; cursor: pointer; font-family: Pretendard, "Noto Sans KR", sans-serif; font-size: 14px; font-weight: 600; color: rgb(17, 17, 17);}
.ui-167{display: inline-flex; transition: transform 0.35s; transform: rotate(0deg); color: rgb(153, 153, 153);}
.ui-168{overflow: hidden; max-height: 600px; transition: max-height 0.4s; margin-top: var(--footer-biz-mt,0px);}
.ui-169{font-size: calc(var(--footer-biz-fs,13.5px) - 1px); line-height: 1.9; letter-spacing: -0.025em; color: rgb(102, 102, 102); font-family: Pretendard, "Noto Sans KR", sans-serif; text-align: left;}
.ui-170{display: var(--footer-biz-inline,inline);}
.ui-171{display: var(--footer-biz-line,none);}
.ui-172{font-family: Pretendard, "Noto Sans KR", sans-serif; letter-spacing: -0.025em;}
.ui-173{display: var(--footer-biz-line,none); font-family: Pretendard, "Noto Sans KR", sans-serif; letter-spacing: -0.025em;}
.ui-174{position: relative; min-width: 230px; display: var(--footer-nav);}
.ui-175{appearance: none; width: 100%; padding: 16px 44px 16px 20px; background: transparent; border: 1px solid rgb(220, 220, 220); border-radius: 5px; color: rgb(17, 17, 17); font-family: Pretendard, "Noto Sans KR", sans-serif; font-size: 14.5px; font-weight: 500; cursor: pointer;}
.ui-176{position: absolute; right: 18px; top: 50%; transform: translateY(-50%); pointer-events: none; color: rgb(153, 153, 153);}
.ui-177{margin-top: var(--footer-topmt,34px); padding-top: var(--footer-toppt,30px); border-top: var(--footer-topbar,1px solid #eeeeee); display: flex; align-items: var(--fbar-align,center); flex-direction: var(--fbar-dir,row); justify-content: space-between; gap: var(--fbar-gap,16px); flex-wrap: wrap; transition: border-color 0.45s;}
.ui-178{display: flex; gap: 14px; align-items: center; font-size: var(--footer-policy-fs,13px); flex-wrap: wrap;}
.ui-179{color: rgb(17, 17, 17); font-weight: 600;}
.ui-180{color: rgb(204, 204, 204);}
.ui-181{color: rgb(136, 136, 136);}
.ui-182{font-family: Pretendard, "Noto Sans KR", sans-serif; font-size: var(--copyr-fs,11.5px); font-weight: 400; letter-spacing: -0.015em; line-height: 1.6; color: var(--copyr-color,#888a92); transition: color 0.45s;}
.ui-183{position: fixed; right: 14px; bottom: 90px; z-index: 55; display: var(--quick); flex-direction: column; gap: 7px; transition: opacity 0.45s, transform 0.45s; opacity: 0; transform: translateX(16px); pointer-events: none;}
.ui-184{width: var(--qsize,52px); height: var(--qsize,52px); border-radius: 15px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: rgba(0, 0, 0, 0.25) 0px 8px 22px; font-size: 10.5px; font-weight: 600;}
.ui-185{font-size: 17px; line-height: 1;}
.ui-184 > svg{display: block; width: 19px; height: 19px; fill: currentColor;}
.ui-186{width: 52px; height: 52px; border-radius: 15px; background: rgb(255, 255, 255); color: rgb(17, 17, 17); border: 1px solid rgb(227, 227, 227); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 18px; font-size: 10.5px; font-weight: 600;}
.ui-187{width: 52px; height: 52px; border-radius: 15px; background: rgb(255, 255, 255); color: rgb(119, 119, 119); border: 1px solid rgb(227, 227, 227); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 18px; font-size: 10.5px; font-weight: 600;}
.ui-188{font-size: 15px; line-height: 1;}
.ui-189{position: fixed; left: 0px; right: 0px; bottom: 0px; z-index: 60; display: var(--mobile-bar); align-items: center; justify-content: space-around; padding: 9px 6px calc(9px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(16px); border-top: 1px solid rgb(237, 237, 237); box-shadow: rgba(0, 0, 0, 0.05) 0px -4px 24px;}
.ui-190{flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0px; color: rgb(17, 17, 17); text-decoration: none;}
.ui-191{font-size: 10.5px; font-weight: 600;}
.ui-192{flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0px; color: rgb(138, 138, 138); text-decoration: none;}
.ui-193{font-size: 10.5px; font-weight: 600;}

/* Final behavior overrides: keep the header sticky outside any scroll container. */
.ui-001 { overflow-x: visible; }
#site-header { position: sticky; top: 0; z-index: 50; transform: none !important; background: transparent; backdrop-filter: none; }
.ui-004 { width: 100%; max-width: 1920px; margin: 0 auto; }
main section[id] { scroll-margin-top: 88px; }

/* Animated arch placed fully above the fields heading. */
#fields .ui-109 { display: flow-root; }
#fields .ui-135 { margin-top: 230px; }
#fields .rowcard { background: #f7f7f8; }

@media (max-width: 768px) {
  /* The four core services remain visible together instead of becoming a carousel. */
  #top .ui-053 {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    margin-top: 24px;
  }
  #top .ui-062 { display: none !important; }
  #top .ui-054,
  #top .ui-061 {
    aspect-ratio: 1 / 1;
    margin-top: 0;
    border-radius: 12px;
    transform: none !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
  }
  #top .ui-057 { padding: 12px; }
  #top .ui-058 { display: none; }
  #top .ui-059 {
    margin: 0;
    font-size: 14px;
    line-height: 1.25;
    color: #fff !important;
  }
  #top .ui-060 {
    margin-top: 5px;
    font-size: 10.5px;
    line-height: 1.35;
    color: rgba(255,255,255,.85) !important;
  }
  #top .feat-card,
  #top .feat-card:hover,
  #top .feat-card:focus-visible,
  #top .feat-card:hover .ui-059,
  #top .feat-card:focus-visible .ui-059 {
    color: #fff !important;
  }
  #top .feat-card:hover .ui-060,
  #top .feat-card:focus-visible .ui-060 {
    color: rgba(255,255,255,.85) !important;
  }

  /* Why cards use native touch scrolling: 1.4 cards are visible and no autoplay runs. */
  #why .ui-100 {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  #why .ui-100::-webkit-scrollbar { display: none; }
  #why .why-slider-track {
    display: flex;
    width: 100%;
    gap: 12px;
    transition: none;
    transform: none !important;
    will-change: auto;
  }
  #why .why-slider-track::after {
    content: "";
    flex: 0 0 calc(30% - 12px);
  }
  #why .ui-101,
  #why .ui-106 {
    flex: 0 0 70%;
    width: 70%;
    margin-top: 0;
    animation: none;
    translate: 0 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  #why .why-slider-track .rvl { opacity: 1; transform: none; }
  #why .ui-103 { padding: 20px; }
  #search .ui-087 { margin-top: 24px; }
  #fields .ui-135 { margin-top: 165px; }
  #fields .ui-139 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  #fields .ui-140,
  #fields .ui-145,
  #fields .ui-146 { min-height: 48px; justify-content: center; padding: 12px 8px; opacity: 1; border-radius: 12px; }
  #fields .ui-141,
  #fields .ui-144 { display: none; }
  #fields .ui-142 { min-width: 0; text-align: center; }
  #fields .ui-143 { font-size: 13px; line-height: 1.3; white-space: nowrap; }
  #fields .ui-148 { margin-top: 18px; }
  #fields .ui-149 { height: 34px; padding: 0 14px; background: #111; color: #fff; font-size: 12px; font-weight: 500; }
  #contact .ui-156 { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 6px; margin-top: 18px; font-size: 11.5px; }
  #contact .ui-159 { display: none; }
  #contact .ui-157 { gap: 5px; }
  #contact .ui-158 { width: 4px; height: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-ring { animation: none; }
  #why .ui-101,
  #why .ui-106 { animation: none; translate: 0 0; }
  #why .why-slider-track { animation: none; transform: none; }
  .hero-card-image-hover { transition: none; transform: none; }
}

/* Capsule navigation inspired by the approved compact app header. */
#site-header {
  padding: 10px var(--pad-x) 0;
  pointer-events: none;
}
#site-header .ui-004 {
  width: min(100%, 500px);
  min-height: 52px;
  margin: 0 auto;
  padding: 6px 8px;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  color: #fff;
  background: #12121a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(18,18,26,.2);
  pointer-events: auto;
}
#site-header .ui-005 {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #ed1c24;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
#site-header .ui-005:hover { transform: rotate(-5deg) scale(1.04); }
#site-header .ui-006 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#site-header .ui-007 {
  justify-self: center;
  margin-left: 0;
  padding: 0;
  gap: 2px;
  color: #d6d6de;
  background: transparent;
}

#search,
#search * {
  font-family: Pretendard, "Noto Sans KR", sans-serif;
}
#search .ui-089,
#search .ui-093 {
  font-family: Outfit, sans-serif;
}
#site-header .ui-008 {
  padding: 8px 13px;
  color: #d6d6de;
  font-weight: 500;
}
#site-header .ui-008:hover,
#site-header .ui-008[aria-current="page"] { color: #fff; }
#site-header .ui-009 { gap: 8px; }
#site-header .ui-010 {
  width: 36px;
  height: 36px;
  color: #d6d6de;
  background: rgba(255,255,255,.07);
  border-radius: 50%;
  transition: color .25s ease, background-color .25s ease, transform .25s ease;
}
#site-header #search-open:hover {
  color: #fff !important;
  background: rgba(255,255,255,.14);
  transform: translateY(-1px);
}
#site-header .ui-011 {
  height: 36px;
  padding: 0 18px;
  color: #fff;
  background: #d64048;
  border: 0;
  backdrop-filter: none;
  box-shadow: none;
}
#site-header .header-request:hover {
  color: #fff !important;
  background: #ec555d !important;
  border-color: transparent !important;
  transform: translateY(-1px);
}

/* Lighthouse accessibility and first-render refinements */
.ui-080,
.ui-181,
.ui-182,
.ui-192 {
  color: #666;
}

.ui-144 {
  color: #5f5f5f;
}

.ui-145,
.ui-146 {
  opacity: 1;
}

#site-header .ui-011 {
  background: #c5323b;
}

@media (max-width: 768px) {
  #site-header { padding: 5px 10px 0; }
  #site-header .ui-004 {
    min-height: 46px;
    padding: 4px 6px;
    gap: 8px;
    color: #111;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  #site-header .ui-005 {
    width: 38px;
    height: 38px;
  }
  #site-header .ui-010 {
    width: 34px;
    height: 34px;
    color: #111;
    background: transparent;
  }
  #site-header #search-open:hover {
    color: #111 !important;
    background: transparent;
  }
  #site-header .ui-011 {
    height: 34px;
    padding: 0 15px;
    color: #fff;
    background: #111;
    font-size: 13px;
  }
  #site-header .header-request:hover {
    color: #fff !important;
    background: #000 !important;
  }
}