:root { --navy:#132d43; --navy-deep:#0b1e2d; --orange:#f26722; --paper:#f3f0e8; --ink:#172129; --muted:#65717a; --line:rgba(19,45,67,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.topbar { position:relative; z-index:10; height:84px; max-width:1440px; margin:0 auto; padding:0 5vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:11px; width:max-content; font-size:20px; font-weight:850; letter-spacing:-.04em; }
.brand-mark { display:grid; place-items:center; width:33px; height:33px; background:var(--orange); color:white; font-family:Arial,sans-serif; font-size:15px; font-weight:900; transform:rotate(-5deg); }
.nav-links { display:flex; gap:38px; color:#354550; font-size:14px; font-weight:650; }
.nav-links a { transition:color .2s; }
.nav-links a:hover { color:var(--orange); }
.nav-cta { justify-self:end; background:var(--navy); color:white; padding:13px 20px; border-radius:2px; font-size:13px; font-weight:750; transition:transform .2s,background .2s; }
.nav-cta:hover { background:var(--orange); transform:translateY(-2px); }
.hero { min-height:calc(100vh - 134px); max-width:1440px; margin:0 auto; padding:8vh 5vw; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(380px,.72fr); align-items:center; gap:clamp(48px,8vw,128px); position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; width:360px; height:360px; border:1px solid rgba(19,45,67,.09); border-radius:50%; left:-230px; bottom:-180px; box-shadow:0 0 0 54px rgba(19,45,67,.025),0 0 0 108px rgba(19,45,67,.018); }
.hero-copy { position:relative; z-index:1; }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--orange); font-family:Arial,sans-serif; font-size:11px; font-weight:800; letter-spacing:.2em; }
.eyebrow span { width:28px; height:3px; background:var(--orange); }
.hero h1 { margin:25px 0 28px; color:var(--navy); font-size:clamp(54px,6.4vw,94px); line-height:1.04; letter-spacing:-.075em; font-weight:900; }
.hero h1 em { color:var(--orange); font-style:normal; position:relative; }
.hero h1 em::after { content:""; position:absolute; left:3px; right:0; bottom:-8px; height:6px; background:repeating-linear-gradient(90deg,var(--orange) 0 14px,transparent 14px 19px); opacity:.28; }
.hero-description { margin:0; color:#53636d; font-size:clamp(17px,1.5vw,21px); line-height:1.75; letter-spacing:-.025em; }
.hero-actions { display:flex; align-items:center; gap:30px; margin-top:40px; }
.primary-button { display:inline-flex; align-items:center; gap:34px; padding:18px 22px; background:var(--navy); color:#fff; font-size:15px; font-weight:750; box-shadow:6px 6px 0 rgba(242,103,34,.22); transition:background .2s,transform .2s,box-shadow .2s; }
.primary-button span { font-size:20px; }
.primary-button:hover { background:var(--orange); transform:translate(-2px,-2px); box-shadow:9px 9px 0 rgba(19,45,67,.17); }
.text-button { font-size:14px; font-weight:750; border-bottom:1px solid var(--navy); padding:6px 0; }
.text-button span { margin-left:8px; color:var(--orange); }
.hero-tags { display:flex; flex-wrap:wrap; gap:9px; margin-top:48px; }
.hero-tags span { padding:7px 11px; border:1px solid var(--line); color:#5c6971; font-size:11px; font-weight:700; background:rgba(255,255,255,.3); }
.diagnostic-card { position:relative; background:#fffdf7; border:1px solid rgba(19,45,67,.18); padding:clamp(24px,3vw,38px); box-shadow:18px 22px 0 var(--navy),20px 24px 0 rgba(19,45,67,.12); transform:rotate(1deg); }
.diagnostic-card::before { content:""; position:absolute; inset:8px; border:1px dashed rgba(19,45,67,.12); pointer-events:none; }
.card-topline { display:flex; justify-content:space-between; padding-bottom:14px; border-bottom:2px solid var(--navy); font-family:Arial,sans-serif; color:var(--navy); font-size:9px; letter-spacing:.18em; }
.card-heading { display:flex; align-items:center; justify-content:space-between; padding:26px 0 21px; }
.card-kicker { color:var(--orange); font-size:11px; font-weight:800; }
.card-heading h2 { margin:8px 0 0; color:var(--navy); font-size:clamp(30px,3vw,43px); line-height:1.1; letter-spacing:-.055em; }
.stamp { width:72px; height:72px; border:3px double var(--orange); border-radius:50%; display:grid; place-items:center; color:var(--orange); text-align:center; font-size:14px; font-weight:900; line-height:1.15; transform:rotate(-10deg); opacity:.85; }
.checklist { border-top:1px solid var(--line); }
.checklist>div { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:9px; min-height:52px; border-bottom:1px solid var(--line); }
.checklist span { color:#89949a; font-family:Arial,sans-serif; font-size:10px; }
.checklist p { margin:0; font-size:13px; font-weight:650; letter-spacing:-.02em; }
.checklist b { padding:4px 7px; background:#fee8dc; color:var(--orange); font-size:9px; }
.card-result { margin-top:24px; padding:16px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; background:var(--navy); color:white; }
.card-result small { display:block; color:#9eb0bd; font-size:9px; margin-bottom:4px; }
.card-result strong { font-size:13px; }
.result-arrow { color:var(--orange); font-size:22px; padding:0 12px; }
.result-status { text-align:right; font-size:12px; font-weight:800; }
.result-status i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#56c58b; margin-right:5px; box-shadow:0 0 0 3px rgba(86,197,139,.15); }
.mechanic-note { margin:20px 0 0; text-align:center; color:#69777f; font-family:Georgia,"Batang",serif; font-size:12px; font-style:italic; }
.ticker { height:50px; overflow:hidden; background:var(--orange); color:white; display:flex; align-items:center; white-space:nowrap; }
.ticker div { width:max-content; min-width:100%; text-align:center; font-family:Arial,sans-serif; font-size:11px; font-weight:800; letter-spacing:.14em; }
.ticker b { padding:0 22px; color:var(--navy); }
.section-pad { max-width:1440px; margin:0 auto; padding:120px 5vw; }
.section-label { display:flex; align-items:center; gap:12px; color:#7a858c; font-family:Arial,sans-serif; font-size:10px; font-weight:800; letter-spacing:.18em; }
.section-label::after { content:""; height:1px; flex:1; background:var(--line); }
.section-label span { display:grid; place-items:center; width:25px; height:25px; background:var(--navy); color:white; letter-spacing:0; }
.section-label.light { color:#7f96a6; }
.section-label.light::after { background:rgba(255,255,255,.12); }
.section-label.light span { background:var(--orange); }
.section-heading .overline { margin:0 0 16px; color:var(--orange); font-size:13px; font-weight:800; }
.section-heading h2 { margin:0; color:var(--navy); font-size:clamp(38px,4.2vw,62px); line-height:1.16; letter-spacing:-.065em; }
.section-heading h2 em { color:var(--orange); font-style:normal; }
.section-heading>p:last-child { max-width:420px; margin:28px 0 0; color:var(--muted); font-size:16px; line-height:1.8; }
.problem-section { padding-top:140px; padding-bottom:150px; }
.problem-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(60px,10vw,150px); padding-top:80px; }
.sticky-heading { align-self:start; position:sticky; top:100px; }
.symptom-list { border-top:2px solid var(--navy); }
.symptom-list article { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:20px; min-height:124px; border-bottom:1px solid var(--line); transition:padding .25s,background .25s; }
.symptom-list article:hover { padding:0 20px; background:rgba(255,255,255,.45); }
.symptom-list article>span { color:#9aa2a7; font-family:Arial,sans-serif; font-size:11px; }
.symptom-list h3 { margin:0 0 7px; color:var(--navy); font-size:21px; letter-spacing:-.04em; }
.symptom-list p { margin:0; color:#6b777e; font-size:13px; line-height:1.65; }
.symptom-list b { padding:7px 10px; border:1px solid #f2b79a; color:var(--orange); font-size:10px; }
.services-section { max-width:none; background:var(--navy-deep); color:white; padding-left:max(5vw,calc((100vw - 1440px)/2 + 5vw)); padding-right:max(5vw,calc((100vw - 1440px)/2 + 5vw)); }
.services-intro { display:grid; grid-template-columns:1.3fr .7fr; align-items:end; gap:80px; padding:78px 0 62px; }
.light-heading h2 { color:white; }
.services-intro>p { margin:0; color:#9db0be; font-size:15px; line-height:1.8; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.14); border-left:1px solid rgba(255,255,255,.14); }
.service-card { min-height:420px; padding:28px; position:relative; border-right:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); transition:background .25s,transform .25s; }
.service-card:hover,.service-card.featured { background:#173850; }
.service-card:hover { transform:translateY(-6px); }
.service-card.featured::before { content:"MOST REQUESTED"; position:absolute; top:0; right:0; padding:6px 9px; background:var(--orange); color:white; font-family:Arial,sans-serif; font-size:7px; font-weight:900; letter-spacing:.13em; }
.service-no { color:#728a9b; font-family:Arial,sans-serif; font-size:10px; }
.service-icon { width:66px; height:66px; display:grid; place-items:center; margin:48px 0 30px; border:1px solid #496376; color:var(--orange); font-family:Arial,sans-serif; font-size:30px; }
.service-card h3 { margin:0 0 14px; font-size:24px; letter-spacing:-.04em; }
.service-card p { min-height:63px; margin:0; color:#9dafbc; font-size:13px; line-height:1.7; }
.service-card ul { margin:28px 0 0; padding:20px 0 0; border-top:1px dashed #3b5262; list-style:none; color:#c3cfd6; font-size:11px; line-height:2; }
.service-card li::before { content:"✓"; margin-right:8px; color:var(--orange); }
.cases-section { padding-top:140px; }
.cases-header { display:grid; grid-template-columns:1fr .7fr; align-items:end; gap:100px; padding:75px 0 70px; }
.cases-header>p { max-width:440px; margin:0; color:var(--muted); font-size:15px; line-height:1.8; }
.featured-case { display:grid; grid-template-columns:.66fr 1.34fr; gap:clamp(40px,5vw,72px); margin-bottom:78px; padding:clamp(34px,4vw,58px); background:var(--navy-deep); color:white; position:relative; overflow:hidden; }
.featured-case::before { content:""; position:absolute; width:260px; height:260px; border:1px solid rgba(255,255,255,.06); border-radius:50%; left:-140px; bottom:-150px; box-shadow:0 0 0 45px rgba(255,255,255,.018),0 0 0 90px rgba(255,255,255,.012); }
.featured-case-copy { position:relative; z-index:1; }
.featured-case-topline { display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.16); color:#7f96a6; font-family:Arial,sans-serif; font-size:9px; font-weight:800; letter-spacing:.14em; }
.featured-case-topline b { padding:6px 9px; background:var(--orange); color:white; font-size:8px; letter-spacing:.04em; }
.case-category { display:block; margin-top:42px; color:var(--orange); font-size:11px; font-weight:800; }
.featured-case h3 { margin:12px 0 24px; font-size:clamp(32px,3.1vw,47px); line-height:1.18; letter-spacing:-.06em; }
.featured-case h3 em { color:var(--orange); font-style:normal; }
.featured-case-copy>p { margin:0; color:#a8bac6; font-size:13px; line-height:1.85; }
.feature-points { display:grid; gap:9px; margin:30px 0; padding:22px 0; border-top:1px dashed #395062; border-bottom:1px dashed #395062; }
.feature-points span { color:#d1dce2; font-size:11px; }
.feature-points b { display:inline-grid; place-items:center; width:24px; height:20px; margin-right:9px; background:#18384f; color:var(--orange); font-family:Arial,sans-serif; font-size:8px; }
.featured-result { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.featured-result small { width:100%; color:#718a9a; font-size:9px; }
.featured-result strong { padding:7px 10px; background:rgba(242,103,34,.12); border:1px solid rgba(242,103,34,.3); color:#ff9a68; font-size:10px; }
.demo-gallery { display:grid; grid-template-columns:1fr; align-content:center; gap:38px; }
.demo-gallery figure { margin:0; min-width:0; }
.video-frame { padding:7px; background:#f4f0e7; border:1px solid rgba(255,255,255,.2); box-shadow:8px 8px 0 rgba(0,0,0,.18); }
.video-frame iframe { display:block; width:100%; aspect-ratio:16/9; border:0; background:#07131c; }
.demo-gallery figcaption { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; padding:16px 6px 0; }
.demo-gallery figcaption span { color:var(--orange); font-family:Arial,sans-serif; font-size:8px; font-weight:800; letter-spacing:.12em; }
.demo-gallery figcaption strong { color:#d8e1e6; font-size:10px; }
.demo-gallery figcaption a { color:#8ca2b0; font-size:9px; transition:color .2s; }
.demo-gallery figcaption a:hover { color:var(--orange); }
.case-list { border-top:2px solid var(--navy); }
.case-row { min-height:160px; display:grid; grid-template-columns:100px 1.5fr .7fr 34px; align-items:center; gap:32px; border-bottom:1px solid var(--line); position:relative; transition:background .25s,padding .25s; }
.case-row:hover { padding:0 20px; background:#fffdf8; }
.case-id { color:#89949a; font-family:Arial,sans-serif; font-size:8px; letter-spacing:.13em; }
.case-id strong { display:block; margin-top:5px; color:var(--navy); font-size:25px; letter-spacing:-.04em; }
.case-main>span { color:var(--orange); font-size:10px; font-weight:800; }
.case-main h3 { margin:8px 0; color:var(--navy); font-size:22px; letter-spacing:-.04em; }
.case-main p { margin:0; color:#768188; font-size:12px; line-height:1.6; }
.case-result { padding-left:28px; border-left:1px solid var(--line); }
.case-result small { display:block; margin-bottom:10px; color:#919b9f; font-size:9px; }
.case-result b { display:block; color:#394a55; font-size:11px; font-weight:700; line-height:1.8; }
.case-result b::before { content:"+"; margin-right:8px; color:var(--orange); }
.case-arrow { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--line); color:var(--navy); transition:background .2s,color .2s; }
.case-row:hover .case-arrow { background:var(--orange); color:white; }
.process-section { background:#ebe7dc; max-width:none; padding-left:max(5vw,calc((100vw - 1440px)/2 + 5vw)); padding-right:max(5vw,calc((100vw - 1440px)/2 + 5vw)); }
.process-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(70px,10vw,150px); padding-top:78px; }
.process-title { display:flex; flex-direction:column; justify-content:space-between; }
.mechanic-badge { width:180px; height:180px; margin-top:70px; padding:34px 20px; border:2px solid var(--navy); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--navy); transform:rotate(-5deg); position:relative; }
.mechanic-badge::before,.mechanic-badge::after { content:"✦"; position:absolute; top:48%; font-size:9px; }
.mechanic-badge::before { left:14px; }.mechanic-badge::after { right:14px; }
.mechanic-badge span { font-size:11px; font-weight:700; }.mechanic-badge strong { font-size:27px; letter-spacing:-.07em; }.mechanic-badge small { margin-top:8px; color:var(--orange); font-family:Arial,sans-serif; font-size:7px; font-weight:800; letter-spacing:.14em; }
.process-steps { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; border-top:2px solid var(--navy); }
.process-steps li { display:grid; grid-template-columns:44px 1fr; gap:15px; min-height:190px; padding:30px 20px 25px 0; border-bottom:1px solid rgba(19,45,67,.16); }
.process-steps li:nth-child(odd) { border-right:1px solid rgba(19,45,67,.16); }
.process-steps li:nth-child(even) { padding-left:28px; }
.process-steps>li>span { color:#a1a7a8; font-family:Arial,sans-serif; font-size:10px; }
.process-steps small { color:var(--orange); font-size:10px; font-weight:800; }
.process-steps h3 { margin:8px 0 12px; color:var(--navy); font-size:21px; letter-spacing:-.04em; }
.process-steps p { max-width:230px; margin:0; color:#6d787e; font-size:12px; line-height:1.65; }
.principle-section { display:grid; grid-template-columns:1.05fr .95fr; background:var(--orange); color:white; }
.principle-copy { min-height:430px; padding:80px max(5vw,calc((100vw - 1440px)/2 + 5vw)); padding-right:7vw; display:flex; flex-direction:column; justify-content:center; border-right:1px solid rgba(255,255,255,.28); position:relative; overflow:hidden; }
.quote-mark { position:absolute; right:20px; top:-80px; color:rgba(255,255,255,.11); font-family:Georgia,serif; font-size:330px; }
.principle-copy p { margin:0; position:relative; z-index:1; font-size:clamp(30px,3.1vw,48px); font-weight:850; line-height:1.35; letter-spacing:-.055em; }
.principle-copy p em { font-style:normal; color:var(--navy-deep); }
.principle-copy>div { display:flex; align-items:center; gap:12px; margin-top:36px; color:#ffddd0; font-size:11px; font-weight:700; }
.principle-copy>div span { width:28px; height:2px; background:white; }
.principles { display:flex; flex-direction:column; justify-content:center; padding:55px max(5vw,calc((100vw - 1440px)/2 + 5vw)) 55px 7vw; }
.principles>div { display:grid; grid-template-columns:120px 1fr; gap:26px; padding:24px 0; border-bottom:1px solid rgba(255,255,255,.27); }
.principles>div:last-child { border-bottom:0; }
.principles strong { font-size:15px; }.principles span { color:#ffe1d3; font-size:12px; line-height:1.6; }
.contact-section { min-height:680px; background:var(--navy-deep); color:white; display:grid; place-items:center; text-align:center; position:relative; overflow:hidden; }
.contact-noise { position:absolute; white-space:nowrap; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.045); font-family:Arial,sans-serif; font-size:15vw; font-weight:900; letter-spacing:-.06em; transform:rotate(-5deg); }
.contact-inner { width:min(900px,90%); padding:95px 0; position:relative; z-index:1; }
.contact-inner .section-label { max-width:400px; margin:0 auto 52px; }
.contact-kicker { color:var(--orange); font-size:13px; font-weight:800; }
.contact-inner h2 { margin:16px 0 25px; font-size:clamp(48px,6vw,84px); line-height:1.05; letter-spacing:-.075em; }
.contact-inner h2 em { color:var(--orange); font-style:normal; }
.contact-desc { color:#9eb0bd; font-size:16px; line-height:1.8; }
.contact-button { width:min(370px,100%); margin:38px auto 0; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; background:var(--orange); color:white; text-align:left; font-size:15px; font-weight:800; box-shadow:7px 7px 0 #28475d; transition:transform .2s,box-shadow .2s; }
.contact-button:hover { transform:translate(-3px,-3px); box-shadow:11px 11px 0 #28475d; }
.contact-button span { font-size:22px; }
.contact-note { display:block; margin-top:20px; color:#688091; font-size:10px; }
footer { min-height:130px; padding:35px max(5vw,calc((100vw - 1440px)/2 + 5vw)); background:#081722; color:white; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:30px; border-top:1px solid #203441; }
.footer-brand { font-size:18px; }.footer-brand .brand-mark { width:28px; height:28px; font-size:12px; }
footer>p { margin:0; text-align:center; color:#6f8492; font-size:11px; }
footer>div { display:flex; justify-content:flex-end; gap:25px; color:#6f8492; font-family:Arial,sans-serif; font-size:9px; letter-spacing:.08em; }
@media (max-width:900px) { .topbar{grid-template-columns:1fr auto;padding:0 22px;height:72px}.nav-links{display:none}.nav-cta{padding:11px 14px}.hero{min-height:auto;grid-template-columns:1fr;padding:70px 22px 90px;gap:70px}.hero h1{font-size:clamp(48px,12vw,72px)}.diagnostic-card{width:min(100% - 18px,520px);justify-self:center}.ticker div{text-align:left;padding-left:24px} }
@media (max-width:900px) {
  .section-pad{padding:90px 22px}.problem-layout,.services-intro,.cases-header,.process-layout{grid-template-columns:1fr;gap:48px;padding-top:55px}.sticky-heading{position:static}.services-section,.process-section{padding-left:22px;padding-right:22px}.service-grid{grid-template-columns:1fr 1fr}.featured-case{grid-template-columns:1fr;padding:36px;gap:45px}.case-category{margin-top:30px}.case-row{grid-template-columns:65px 1fr 30px;gap:18px;padding:24px 0}.case-row:hover{padding:24px 12px}.case-result{display:none}.process-title{display:block}.mechanic-badge{display:none}.principle-section{grid-template-columns:1fr}.principle-copy{min-height:360px;padding:70px 22px;border-right:0;border-bottom:1px solid rgba(255,255,255,.28)}.principles{padding:40px 22px}footer{grid-template-columns:1fr;text-align:center;padding:42px 22px}.footer-brand{margin:auto}footer>div{justify-content:center}
}
@media (max-width:520px) { .brand{font-size:17px}.brand-mark{width:29px;height:29px}.nav-cta{font-size:11px}.hero{padding-top:52px}.hero h1{margin-top:20px;font-size:45px}.desktop-break{display:none}.hero-description{font-size:16px}.hero-actions{align-items:stretch;flex-direction:column;gap:16px}.primary-button{justify-content:space-between}.text-button{width:max-content}.hero-tags{margin-top:36px}.diagnostic-card{padding:24px 20px}.stamp{width:58px;height:58px;font-size:12px}.card-heading h2{font-size:32px}.checklist p{font-size:12px} }
@media (max-width:520px) {
  .section-heading h2{font-size:36px}.problem-section{padding-top:100px}.symptom-list article{grid-template-columns:30px 1fr;min-height:130px}.symptom-list article>b{display:none}.symptom-list h3{font-size:18px}.service-grid{grid-template-columns:1fr}.service-card{min-height:370px}.cases-header{padding-bottom:45px}.featured-case{margin-left:-22px;margin-right:-22px;padding:30px 22px}.featured-case h3{font-size:32px}.demo-gallery{gap:30px}.case-row{grid-template-columns:48px 1fr 26px}.case-id{font-size:0}.case-id strong{font-size:20px}.case-main h3{font-size:18px}.case-main p{font-size:11px}.case-arrow{width:26px;height:26px}.process-steps{grid-template-columns:1fr}.process-steps li:nth-child(odd){border-right:0}.process-steps li:nth-child(even){padding-left:0}.process-steps li{min-height:165px}.principle-copy p{font-size:30px}.principles>div{grid-template-columns:90px 1fr;gap:15px}.contact-inner h2{font-size:48px}.contact-desc br{display:none}
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important} }