/* ============================================================
   올모스트마케팅 — Premium Landing CSS v3
============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy-deep:  #060F24;
  --navy-dark:  #0A1F44;
  --navy:       #0D2B5E;
  --navy-mid:   #1A3A6B;
  --navy-light: #243F7A;
  --blue-pale:  #F0F4FC;
  --blue-gray:  #E0E8F5;
  --yellow:     #F5C518;
  --yellow-dk:  #D4A80A;
  --white:      #FFFFFF;
  --off-white:  #FAFBFF;
  --gray-50:    #F8F9FA;
  --gray-100:   #F1F3F5;
  --gray-200:   #E2E8F0;
  --gray-300:   #CBD5E1;
  --gray-500:   #64748B;
  --gray-700:   #334155;
  --text-main:  #0D1B2A;
  --text-sub:   #475569;
  --radius:     14px;
  --radius-lg:  22px;
  --radius-xl:  32px;
  --shadow-xs:  0 1px 4px rgba(10,31,68,0.06);
  --shadow-sm:  0 2px 10px rgba(10,31,68,0.08);
  --shadow-md:  0 8px 28px rgba(10,31,68,0.12);
  --shadow-lg:  0 20px 56px rgba(10,31,68,0.16);
  --shadow-xl:  0 32px 80px rgba(10,31,68,0.22);
  --transition: 0.28s cubic-bezier(0.4,0,0.2,1);
  --transition-spring: 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Noto Sans KR','Inter',sans-serif;
  color: var(--text-main);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
.container { max-width:1120px; margin:0 auto; padding:0 28px; }
.pc-only { display:inline; }

/* ============================================================
   스크롤 진행 바
============================================================ */
#scrollBar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--navy-deep), var(--navy-mid), var(--navy-light));
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 6px rgba(26,58,107,0.4);
}

/* ============================================================
   HEADER
============================================================ */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(10,31,68,0.06);
  transition: box-shadow var(--transition), background var(--transition);
}
#site-header.scrolled {
  box-shadow: 0 4px 24px rgba(10,31,68,0.10);
  background: rgba(255,255,255,0.97);
}

.nav-container {
  max-width: 1120px; margin:0 auto; padding:0 28px;
  height: 68px; display:flex; align-items:center; justify-content:space-between;
}
.nav-logo { display:flex; align-items:center; }
.logo-svg { height:38px; width:auto; }
.nav-links { display:flex; align-items:center; gap:36px; }
.nav-links a {
  font-size: 0.875rem; font-weight:500; color:var(--gray-700);
  transition: color var(--transition); position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0;
  height:2px; background:var(--navy); border-radius:2px;
  transform:scaleX(0); transition:transform var(--transition);
}
.nav-links a:hover { color:var(--navy); }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-cta-btn {
  background:var(--navy) !important; color:var(--white) !important;
  padding:9px 22px; border-radius:10px; font-weight:600 !important;
  transition:all var(--transition) !important; letter-spacing:0.02em;
}
.nav-cta-btn:hover { background:var(--navy-dark) !important; transform:translateY(-1px) !important; box-shadow:0 4px 16px rgba(10,31,68,0.25) !important; }
.nav-cta-btn::after { display:none !important; }

.hamburger { display:none; flex-direction:column; gap:5px; padding:4px; }
.hamburger span { display:block; width:24px; height:2px; background:var(--navy); border-radius:2px; transition:all 0.3s; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.mobile-menu { display:none; flex-direction:column; background:var(--white); border-top:1px solid var(--gray-100); }
.mobile-menu.open { display:flex; }
.mobile-menu li a { display:block; padding:15px 28px; font-size:0.95rem; font-weight:500; color:var(--gray-700); border-bottom:1px solid var(--gray-100); transition:all var(--transition); }
.mobile-menu li:last-child a { border-bottom:none; }
.mobile-menu li a:hover { background:var(--blue-pale); color:var(--navy); padding-left:36px; }

/* ============================================================
   BUTTONS
============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 28px; border-radius:12px; font-size:0.95rem; font-weight:600;
  transition:all var(--transition); white-space:nowrap; cursor:pointer; letter-spacing:0.01em;
}
.btn:hover { transform:translateY(-2px); }
.btn-lg { padding:16px 36px; font-size:1rem; border-radius:14px; }

.btn-primary {
  background:var(--navy); color:var(--white);
  box-shadow:0 4px 20px rgba(10,31,68,0.25);
}
.btn-primary:hover { background:var(--navy-dark); box-shadow:0 8px 28px rgba(10,31,68,0.35); }

.btn-kakao {
  background:var(--yellow); color:#111;
  box-shadow:0 4px 16px rgba(245,197,24,0.35); font-weight:700;
}
.btn-kakao:hover { background:var(--yellow-dk); box-shadow:0 8px 24px rgba(212,168,10,0.45); }

.btn-ghost {
  background:rgba(255,255,255,0.12); color:var(--white);
  border:1.5px solid rgba(255,255,255,0.35);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover { background:rgba(255,255,255,0.22); border-color:rgba(255,255,255,0.6); }

.btn-full { width:100%; justify-content:center; font-size:1rem; padding:16px; }
.mt-16 { margin-top:16px; }

/* ============================================================
   SECTION COMMONS
============================================================ */
section { padding:100px 0; }
.section-white { background:var(--white); }
.section-light { background:var(--off-white); }
.section-navy  { background:var(--navy-deep); color:var(--white); position:relative; overflow:hidden; }
.section-pattern { position:relative; }
.section-pattern::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(circle, rgba(13,43,94,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

.section-header { margin-bottom:60px; }
.section-header.center { text-align:center; }
.section-eyebrow {
  font-size:0.72rem; font-weight:700; letter-spacing:0.18em;
  color:var(--navy-mid); text-transform:uppercase; margin-bottom:14px; display:block;
}
.section-eyebrow.light { color:rgba(255,255,255,0.45); }
.section-title {
  font-size:clamp(1.65rem,3vw,2.3rem); font-weight:800; color:var(--navy);
  line-height:1.3; margin-bottom:20px;
}
.section-navy .section-title { color:var(--white); }
.section-desc {
  font-size:1.05rem; color:var(--text-sub); line-height:1.85; max-width:640px;
}
.section-header.center .section-desc { margin:0 auto; }
.section-cta { text-align:center; margin-top:60px; }

/* ============================================================
   1. HERO SECTION
============================================================ */
#hero {
  min-height:100vh; padding:120px 0 80px;
  background:linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 50%, var(--navy-mid) 100%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center;
}

#heroCanvas { position:absolute; inset:0; z-index:0; pointer-events:none; }

.hero-bg-circle {
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
}
.hero-bg-circle.c1 { width:600px; height:600px; top:-150px; right:-100px; }
.hero-bg-circle.c2 { width:400px; height:400px; bottom:-100px; left:-80px; }
.hero-bg-circle.c3 { width:300px; height:300px; top:40%; left:40%; opacity:0.5; }

.hero-inner {
  max-width:1120px; margin:0 auto; padding:0 28px;
  display:grid; grid-template-columns:1fr 1fr; gap:72px;
  align-items:center; position:relative; z-index:1;
}

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.9);
  border:1px solid rgba(255,255,255,0.2); border-radius:50px;
  padding:7px 18px; font-size:0.8rem; font-weight:600; margin-bottom:24px;
  backdrop-filter:blur(8px); letter-spacing:0.03em;
}
.badge-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--yellow); box-shadow:0 0 0 3px rgba(245,197,24,0.3);
  animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 3px rgba(245,197,24,0.3);} 50%{box-shadow:0 0 0 6px rgba(245,197,24,0.1);} }

.hero-title {
  font-size:clamp(2rem,4.5vw,3.2rem); font-weight:900; color:var(--white);
  line-height:1.15; margin-bottom:22px; letter-spacing:-0.02em;
}
.hero-title-line { display:block; }
.hero-title-accent {
  background:linear-gradient(90deg, #7CB9E8, #A8D5FF);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-typing-wrap {
  font-size:1.1rem; color:rgba(255,255,255,0.75);
  margin-bottom:22px; min-height:1.8em;
  font-weight:500;
}
.hero-typing-prefix { color:rgba(255,255,255,0.55); }
.hero-typing-text { color:var(--yellow); font-weight:700; }
.hero-typing-cursor {
  color:var(--yellow); font-weight:300; margin-left:1px;
  animation:blink 1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

.hero-sub {
  font-size:1rem; color:rgba(255,255,255,0.7); line-height:1.85;
  margin-bottom:36px;
}

.hero-btns { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px; }

.hero-trust {
  display:flex; align-items:center; gap:0;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12);
  border-radius:14px; padding:16px 24px; backdrop-filter:blur(8px);
  width:fit-content;
}
.trust-item { display:flex; flex-direction:column; align-items:center; gap:3px; padding:0 20px; }
.trust-item strong { font-size:1.3rem; font-weight:800; color:var(--white); font-family:'Inter',sans-serif; line-height:1; }
.trust-item span { font-size:0.72rem; color:rgba(255,255,255,0.55); font-weight:500; letter-spacing:0.04em; white-space:nowrap; }
.trust-divider { width:1px; height:36px; background:rgba(255,255,255,0.15); }

/* Hero 비주얼 */
.hero-visual { position:relative; }
.hero-img-wrap {
  position:relative; border-radius:var(--radius-xl);
  box-shadow:0 32px 80px rgba(0,0,0,0.4);
  overflow:visible;
}
.hero-img {
  width:100%; border-radius:var(--radius-xl);
  object-fit:cover; display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08);
}
.hero-img-badge {
  position:absolute; display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,0.95); backdrop-filter:blur(12px);
  border-radius:50px; padding:10px 18px; font-size:0.82rem; font-weight:700;
  color:var(--navy); box-shadow:var(--shadow-lg);
  white-space:nowrap; border:1px solid rgba(255,255,255,0.8);
}
.hero-img-badge i { color:var(--navy-mid); font-size:1rem; }
.badge-top  { top:-16px; right:-16px; animation:float-badge 3s ease-in-out infinite; }
.badge-bottom { bottom:-16px; left:-16px; animation:float-badge 3s ease-in-out infinite 1.5s; }
@keyframes float-badge { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

.hero-scroll-hint {
  position:relative; z-index:1;
  text-align:center; margin-top:60px;
  color:rgba(255,255,255,0.4); font-size:0.8rem;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  animation:bounce-hint 2s infinite;
}
@keyframes bounce-hint { 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }

/* ============================================================
   2. STATS 섹션
============================================================ */
.section-stats {
  background:var(--navy-dark); padding:72px 0;
  position:relative; overflow:hidden;
}
.section-stats::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 60%);
  pointer-events:none;
}

.stats-inner {
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:center; gap:0;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-xl); padding:48px 40px;
  backdrop-filter:blur(8px);
}

.stat-item {
  text-align:center; padding:0 20px; position:relative;
}
.stat-icon {
  width:48px; height:48px; border-radius:14px;
  background:rgba(255,255,255,0.08); margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:rgba(255,255,255,0.7);
  border:1px solid rgba(255,255,255,0.1);
}
.stat-num {
  font-family:'Inter',sans-serif; font-size:2.8rem; font-weight:900;
  color:var(--white); line-height:1; margin-bottom:8px;
  display:flex; align-items:baseline; justify-content:center; gap:2px;
}
.stat-suffix { font-size:1.4rem; font-weight:700; color:rgba(255,255,255,0.7); }
.stat-label {
  font-size:0.88rem; font-weight:700; color:rgba(255,255,255,0.9); margin-bottom:4px;
}
.stat-desc { font-size:0.75rem; color:rgba(255,255,255,0.4); line-height:1.5; }

.stat-divider {
  width:1px; height:80px;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,0.15), transparent);
}

/* ============================================================
   3. 공감 섹션
============================================================ */
#pain-points { padding:100px 0; }
.pain-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }

.pain-img-wrap { position:relative; }
.pain-img-wrap img {
  width:100%; border-radius:var(--radius-xl); box-shadow:var(--shadow-xl);
  object-fit:cover;
}
.pain-float-card {
  position:absolute; bottom:-20px; right:-20px;
  background:var(--white); border-radius:14px; padding:14px 20px;
  display:flex; align-items:center; gap:10px;
  box-shadow:var(--shadow-lg); font-size:0.88rem; font-weight:700; color:var(--navy);
  border:1px solid var(--gray-200);
}
.pain-float-card i { color:var(--navy-mid); font-size:1.1rem; }

.pain-bridge {
  display:flex; align-items:flex-start; gap:14px;
  padding:20px 24px; margin-bottom:28px;
  background:linear-gradient(135deg, var(--blue-pale), #EEF4FF);
  border-left:4px solid var(--navy); border-radius:0 var(--radius) var(--radius) 0;
}
.pain-bridge i { color:var(--navy-mid); font-size:1.2rem; flex-shrink:0; margin-top:3px; }
.pain-bridge p { font-size:0.97rem; color:var(--text-main); line-height:1.8; }
.pain-bridge strong { font-weight:700; color:var(--navy); }

.checklist { display:flex; flex-direction:column; gap:12px; }
.checklist li {
  display:flex; align-items:flex-start; gap:12px;
  font-size:0.93rem; color:var(--gray-700); line-height:1.65;
  padding:12px 16px; background:var(--white); border-radius:10px;
  border:1px solid var(--gray-200); transition:all var(--transition);
}
.checklist li:hover { border-color:var(--navy-mid); background:var(--blue-pale); transform:translateX(4px); }
.checklist li i {
  color:var(--navy); font-size:0.75rem; margin-top:5px; flex-shrink:0;
  background:var(--blue-pale); width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* ============================================================
   4. 서비스 섹션
============================================================ */
.services-flow-img {
  margin-bottom:60px; border-radius:var(--radius-xl);
  overflow:hidden; box-shadow:var(--shadow-lg); position:relative;
}
.services-flow-img img { width:100%; object-fit:cover; object-position:center top; max-height:420px; }
.flow-overlay {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(to top, rgba(10,31,68,0.92) 0%, transparent 100%);
  padding:28px 36px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.flow-tag {
  display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,0.12); color:var(--white);
  border:1px solid rgba(255,255,255,0.2); border-radius:50px;
  padding:7px 16px; font-size:0.82rem; font-weight:600;
  backdrop-filter:blur(8px);
}
.flow-arrow-icon { color:rgba(255,255,255,0.4); font-size:0.85rem; }

.services-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}

/* glassmorphism 서비스 카드 */
.service-card {
  background:var(--white); border:1px solid var(--gray-200);
  border-radius:var(--radius-xl); padding:36px 30px;
  transition:all var(--transition); position:relative; overflow:hidden;
  cursor:default;
  transform-style:preserve-3d;
}
.service-card-glow {
  position:absolute; inset:0; border-radius:var(--radius-xl); pointer-events:none;
  opacity:0; transition:opacity var(--transition);
  background:radial-gradient(600px at var(--mouse-x,50%) var(--mouse-y,50%), rgba(26,58,107,0.06), transparent 40%);
}
.service-card:hover .service-card-glow { opacity:1; }
.service-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--navy-mid), var(--navy-light), var(--navy-mid));
  transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease;
}
.service-card:hover { box-shadow:var(--shadow-lg); border-color:transparent; transform:translateY(-6px) rotateX(2deg); }
.service-card:hover::before { transform:scaleX(1); }

.service-icon {
  width:54px; height:54px; background:var(--blue-pale); border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px; font-size:1.5rem; color:var(--navy);
  transition:all var(--transition);
}
.service-card:hover .service-icon { background:var(--navy); color:var(--white); transform:scale(1.1); }
.service-card h3 { font-size:1.05rem; font-weight:700; color:var(--navy); margin-bottom:12px; }
.service-card p { font-size:0.88rem; color:var(--text-sub); line-height:1.8; margin-bottom:10px; }
.service-note { font-size:0.8rem !important; color:var(--navy-mid) !important; padding-top:12px; border-top:1px solid var(--gray-100); margin-bottom:16px !important; }
.service-card-footer { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.service-tag {
  font-size:0.72rem; font-weight:600; color:var(--navy-mid);
  background:var(--blue-pale); border-radius:50px; padding:4px 12px;
  border:1px solid rgba(26,58,107,0.1); letter-spacing:0.02em;
}

/* ============================================================
   5. 브랜드 철학 섹션
============================================================ */
#philosophy { padding:120px 0; }

.philosophy-bg-text {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:'Inter',sans-serif; font-size:clamp(60px,12vw,140px);
  font-weight:900; color:rgba(255,255,255,0.025);
  white-space:nowrap; pointer-events:none; user-select:none; letter-spacing:-0.03em;
}

.philosophy-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; position:relative; z-index:1; }

.philosophy-title {
  font-size:clamp(2.2rem,4.5vw,3.4rem); font-weight:900; color:var(--white);
  line-height:1.1; margin-bottom:32px; font-family:'Inter',sans-serif; letter-spacing:-0.03em;
}
.philosophy-title span { color:rgba(255,255,255,0.35); display:block; }

.philosophy-body {
  font-size:1rem; color:rgba(255,255,255,0.72); line-height:1.9; margin-bottom:32px;
}
.philosophy-body strong { color:var(--white); font-weight:600; }

.philosophy-quote {
  border-left:2px solid rgba(255,255,255,0.25); padding:18px 24px;
  background:rgba(255,255,255,0.05); border-radius:0 var(--radius) var(--radius) 0;
  font-size:1.05rem; font-weight:600; color:var(--white); line-height:1.7;
  margin-bottom:20px; backdrop-filter:blur(4px);
}
.philosophy-sub { font-size:0.88rem; color:rgba(255,255,255,0.45); line-height:1.85; }

.philosophy-visual img {
  border-radius:var(--radius-xl);
  box-shadow:0 32px 80px rgba(0,0,0,0.5);
  object-fit:cover; width:100%;
}

/* ============================================================
   6. 왜 올모스트마케팅
============================================================ */
.why-flow-wrap { margin-bottom:56px; }
.why-flow {
  display:flex; align-items:center; justify-content:center; gap:0;
  background:var(--white); border-radius:var(--radius-xl);
  padding:40px 48px; box-shadow:var(--shadow-sm); border:1px solid var(--gray-200);
  margin-bottom:16px; flex-wrap:wrap;
}
.why-flow-step { display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 16px; }
.flow-icon {
  width:64px; height:64px; background:var(--blue-pale); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:var(--navy); transition:all var(--transition);
  border:2px solid transparent;
}
.why-flow-step:hover .flow-icon { background:var(--navy); color:var(--white); border-color:var(--navy); transform:scale(1.1); }
.why-flow-step span { font-size:0.82rem; font-weight:700; color:var(--navy); white-space:nowrap; }
.flow-connector { color:var(--gray-300); font-size:0.9rem; padding:0 8px; padding-bottom:28px; }
.why-flow-caption { text-align:center; font-size:0.9rem; color:var(--text-sub); font-weight:500; }

.why-points-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.why-point {
  background:var(--white); border-radius:var(--radius-lg); padding:30px 26px;
  box-shadow:var(--shadow-xs); border:1px solid var(--gray-200); transition:all var(--transition);
  position:relative; overflow:hidden;
}
.why-point::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--navy-mid), var(--navy-light));
  transform:scaleX(0); transform-origin:left; transition:transform 0.4s;
}
.why-point:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }
.why-point:hover::after { transform:scaleX(1); }
.why-point-num { font-size:2.2rem; font-weight:900; color:var(--blue-gray); font-family:'Inter',sans-serif; margin-bottom:14px; line-height:1; }
.why-point h4 { font-size:0.93rem; font-weight:700; color:var(--navy); margin-bottom:10px; line-height:1.45; }
.why-point p { font-size:0.85rem; color:var(--text-sub); line-height:1.8; }

/* ============================================================
   7. 진행 방식
============================================================ */
.process-steps { max-width:720px; margin:0 auto; }
.process-step {
  display:flex; gap:28px; align-items:flex-start;
  background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg);
  padding:28px 32px; transition:all var(--transition); position:relative;
}
.process-step:hover { border-color:var(--blue-gray); box-shadow:var(--shadow-sm); transform:translateX(6px); }
.step-num {
  font-size:1.8rem; font-weight:900; font-family:'Inter',sans-serif;
  color:var(--navy); flex-shrink:0; line-height:1; width:52px; text-align:center;
  opacity:0.25; transition:opacity var(--transition);
}
.process-step:hover .step-num { opacity:1; }
.step-content h3 { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:8px; }
.step-content p { font-size:0.9rem; color:var(--text-sub); line-height:1.8; }
.process-connector-v { text-align:center; padding:6px 0; color:var(--gray-300); font-size:0.9rem; }
.process-note {
  display:flex; gap:16px; align-items:flex-start;
  background:var(--blue-pale); border-radius:var(--radius-lg); padding:24px 28px;
  margin-top:40px; max-width:720px; margin-left:auto; margin-right:auto;
  border:1px solid rgba(26,58,107,0.08);
}
.process-note i { color:var(--navy); font-size:1.2rem; flex-shrink:0; margin-top:2px; }
.process-note p { font-size:0.93rem; color:var(--navy); line-height:1.85; font-weight:500; }

/* ============================================================
   8. 문의 섹션
============================================================ */
#contact { padding:100px 0; }
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:48px; align-items:start; }
.contact-quick h3, .contact-form-wrap h3 { font-size:1.1rem; font-weight:700; color:var(--navy); margin-bottom:20px; }
.quick-link {
  display:flex; align-items:center; gap:16px; padding:18px 20px;
  border-radius:var(--radius); border:1px solid var(--gray-200); margin-bottom:12px;
  transition:all var(--transition); background:var(--white);
}
.quick-link:hover { transform:translateX(5px); box-shadow:var(--shadow-sm); border-color:var(--gray-300); }
.quick-link > i:first-child {
  font-size:1.4rem; flex-shrink:0; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.quick-link.kakao > i:first-child { background:#FEE500; color:#191919; }
.quick-link.insta > i:first-child {
  background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color:var(--white);
}
.quick-link div { flex:1; }
.quick-link strong { display:block; font-size:0.93rem; font-weight:700; color:var(--navy); }
.quick-link span { font-size:0.8rem; color:var(--gray-500); }
.quick-link .arrow { color:var(--gray-300); font-size:0.82rem; }
.contact-img-wrap { margin-top:24px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.contact-img-wrap img { width:100%; object-fit:cover; max-height:200px; }

.contact-form-wrap {
  background:var(--white); border-radius:var(--radius-xl); padding:40px 36px;
  box-shadow:var(--shadow-md); border:1px solid var(--gray-200);
}
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:0.85rem; font-weight:600; color:var(--navy); margin-bottom:8px; }
.required { color:var(--navy-mid); }
.optional { color:var(--gray-500); font-weight:400; font-size:0.8rem; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:13px 16px; border:1.5px solid var(--gray-200);
  border-radius:var(--radius); font-family:inherit; font-size:0.92rem; color:var(--text-main);
  background:var(--off-white); transition:all var(--transition); outline:none; appearance:none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color:var(--navy); box-shadow:0 0 0 3px rgba(13,43,94,0.08); background:var(--white);
}
.form-group input.error, .form-group select.error, .form-group textarea.error { border-color:#EF4444; }
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--gray-300); }
.form-group textarea { resize:vertical; min-height:120px; }
.form-group select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2364748B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.form-success { text-align:center; padding:48px 20px; }
.form-success i { font-size:3.5rem; color:#22C55E; margin-bottom:16px; }
.form-success h4 { font-size:1.2rem; font-weight:700; color:var(--navy); margin-bottom:12px; }
.form-success p { font-size:0.9rem; color:var(--text-sub); line-height:1.85; }

/* ============================================================
   FOOTER
============================================================ */
#site-footer { background:var(--navy-deep); color:rgba(255,255,255,0.65); padding:72px 0 0; }
.footer-inner { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.07); }
.footer-logo-svg { height:30px; width:auto; margin-bottom:16px; display:block; }
.footer-tagline { font-size:0.72rem; font-weight:700; letter-spacing:0.12em; color:rgba(255,255,255,0.3); text-transform:uppercase; margin-bottom:12px; }
.footer-desc { font-size:0.85rem; line-height:1.75; color:rgba(255,255,255,0.5); }
.footer-links h4, .footer-contact h4 { font-size:0.82rem; font-weight:700; color:var(--white); margin-bottom:16px; letter-spacing:0.06em; text-transform:uppercase; }
.footer-links ul { display:flex; flex-direction:column; gap:10px; }
.footer-links a { font-size:0.83rem; color:rgba(255,255,255,0.5); transition:color var(--transition); }
.footer-links a:hover { color:var(--white); }
.footer-contact { display:flex; flex-direction:column; }
.footer-contact-link { display:flex; align-items:center; gap:10px; font-size:0.85rem; color:rgba(255,255,255,0.6); padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.07); transition:color var(--transition); }
.footer-contact-link:hover { color:var(--white); }
.footer-contact-link:last-child { border-bottom:none; }
.footer-bottom { padding:20px 0; text-align:center; font-size:0.77rem; color:rgba(255,255,255,0.3); }

/* ============================================================
   FLOATING CTA
============================================================ */
.floating-cta-wrap { position:fixed; bottom:28px; right:28px; z-index:999; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.floating-popup { display:flex; flex-direction:column; gap:8px; opacity:0; visibility:hidden; transform:translateY(14px) scale(0.93); transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1); pointer-events:none; }
.floating-popup.open { opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto; }
.fpop-item { display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:50px; font-size:0.85rem; font-weight:700; color:var(--white); background:var(--navy); box-shadow:var(--shadow-md); white-space:nowrap; transition:all var(--transition); }
.fpop-item:hover { transform:translateX(-4px); box-shadow:var(--shadow-lg); }
.fpop-kakao { background:var(--yellow); color:#1A1A1A; }
.fpop-kakao:hover { background:var(--yellow-dk); }
.fpop-insta { background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); }
.fpop-form { background:var(--navy); }
.fpop-form:hover { background:var(--navy-dark); }
.floating-cta { display:flex; align-items:center; justify-content:center; background:var(--white); color:var(--navy); padding:13px 24px; border-radius:50px; font-size:0.88rem; font-weight:700; box-shadow:0 4px 24px rgba(10,31,68,0.2); transition:all var(--transition); border:1.5px solid var(--gray-200); min-width:90px; }
.floating-cta:hover, .floating-cta.active { background:var(--navy); color:var(--white); border-color:var(--navy); box-shadow:0 8px 28px rgba(10,31,68,0.3); transform:translateY(-2px); }

/* ============================================================
   SCROLL ANIMATIONS
============================================================ */
.fade-in { opacity:0; transform:translateY(32px); transition:opacity 0.7s ease, transform 0.7s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }
.slide-in-left { opacity:0; transform:translateX(-56px); transition:opacity 0.75s ease, transform 0.75s cubic-bezier(0.25,0.46,0.45,0.94); }
.slide-in-left.visible { opacity:1; transform:translateX(0); }
.slide-in-right { opacity:0; transform:translateX(56px); transition:opacity 0.75s ease, transform 0.75s cubic-bezier(0.25,0.46,0.45,0.94); }
.slide-in-right.visible { opacity:1; transform:translateX(0); }
.scale-in { opacity:0; transform:scale(0.9); transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94); }
.scale-in.visible { opacity:1; transform:scale(1); }

/* ============================================================
   RESPONSIVE — 태블릿
============================================================ */
@media (max-width:1024px) {
  .hero-inner { grid-template-columns:1fr; gap:48px; }
  .hero-visual { order:-1; max-width:520px; margin:0 auto; }
  .hero-text { text-align:center; }
  .hero-btns { justify-content:center; }
  .hero-trust { margin:0 auto; }
  .stats-inner { grid-template-columns:1fr 1fr; grid-template-rows:auto; gap:0; }
  .stats-inner { grid-template-columns:1fr 1fr; }
  .stat-divider:nth-child(2) { display:none; }
  .stat-divider:nth-child(4) { display:none; }
  .stat-divider:nth-child(6) { display:block; height:1px; width:80%; background:linear-gradient(to right,transparent,rgba(255,255,255,0.15),transparent); grid-column:span 2; margin:4px auto; }
  .stat-item { padding:20px 10px; }
  .pain-grid { grid-template-columns:1fr; gap:48px; }
  .pain-img-wrap { max-width:480px; margin:0 auto; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .philosophy-inner { grid-template-columns:1fr; gap:48px; }
  .philosophy-visual { max-width:500px; margin:0 auto; }
  .why-points-grid { grid-template-columns:repeat(2,1fr); }
  .contact-grid { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
}

/* ============================================================
   RESPONSIVE — 모바일
============================================================ */
@media (max-width:768px) {
  section { padding:72px 0; }
  .container { padding:0 20px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .pc-only { display:none; }
  .logo-svg { height:30px; }
  #hero { padding:110px 0 72px; min-height:auto; }
  .hero-title { font-size:1.9rem; }
  .hero-btns { flex-direction:column; gap:10px; }
  .hero-btns .btn { width:100%; justify-content:center; }
  .hero-trust { flex-wrap:wrap; justify-content:center; gap:4px; width:100%; }
  .trust-item { padding:10px 14px; }
  .stats-inner { padding:32px 20px; }
  .stat-num { font-size:2.2rem; }
  .services-grid { grid-template-columns:1fr; }
  .why-flow { padding:28px 20px 40px; }
  .flow-icon { width:52px; height:52px; font-size:1.2rem; }
  .why-points-grid { grid-template-columns:1fr; }
  .process-step { padding:20px; gap:16px; }
  .step-num { font-size:1.4rem; width:40px; }
  .contact-form-wrap { padding:28px 20px; }
  .footer-inner { grid-template-columns:1fr; gap:32px; }
  .floating-cta-wrap { bottom:20px; right:20px; }
  .hero-img-badge { display:none; }
  .pain-float-card { bottom:-12px; right:-8px; }
  .hero-trust .trust-divider { display:none; }
  .trust-item strong { font-size:1.1rem; }
  .trust-item span { font-size:0.68rem; }
  .flow-overlay { padding:20px; gap:8px; }
}

@media (max-width:480px) {
  .hero-title { font-size:1.6rem; }
  .philosophy-title { font-size:2rem; }
  .why-flow { flex-wrap:wrap; gap:20px; }
  .flow-connector { display:none; }
  .btn { padding:13px 22px; font-size:0.88rem; }
  .hero-trust { gap:0; flex-direction:row; }
  .trust-divider { display:none; }
  .trust-item { min-width:80px; }
  .stats-inner { grid-template-columns:1fr; }
  .stat-divider { display:block !important; height:1px; width:60%; grid-column:1; }
  .why-points-grid .why-point:nth-child(5) { grid-column:1; }
}