* { margin:0; padding:0; box-sizing:border-box; }
.site { background:#000; color:#fff; font-family:'Space Grotesk',sans-serif; width:100%; overflow-x:hidden; }

.nav { display:flex; justify-content:space-between; align-items:center; padding:1.2rem 2.5rem; border-bottom:0.5px solid #111; position:sticky; top:0; background:rgba(0,0,0,0.96); z-index:100; }
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-text { font-family:'Syne',sans-serif; font-weight:800; font-size:20px; color:#2B3FFF; letter-spacing:-0.5px; }
.nav-links { display:none; }
.btn-pri { background:#2B3FFF; color:#fff; border:none; padding:9px 22px; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; font-family:'Space Grotesk',sans-serif; transition:background .2s; }
.btn-pri:hover { background:#1a2ee0; }
.btn-sec { background:transparent; color:#fff; border:0.5px solid #2a2a2a; padding:9px 22px; border-radius:7px; font-size:13px; font-weight:500; cursor:pointer; font-family:'Space Grotesk',sans-serif; transition:border-color .2s; }
.btn-sec:hover { border-color:#555; }

/* HERO */
.hero { min-height:auto; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:7rem 2rem; position:relative; overflow:hidden; }
.hero-glow { position:absolute; top:30%; left:50%; transform:translate(-50%,-50%); width:500px; height:500px; background:radial-gradient(circle, rgba(43,63,255,0.13) 0%, transparent 65%); pointer-events:none; }
.hero-rocket-bg { position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); opacity:0.04; pointer-events:none; }
.tag { display:inline-flex; align-items:center; gap:6px; background:rgba(43,63,255,0.1); border:0.5px solid rgba(43,63,255,0.35); color:#6B7FFF; font-size:11px; font-weight:600; padding:5px 14px; border-radius:100px; margin-bottom:1.8rem; letter-spacing:.06em; text-transform:uppercase; }
.hero-title { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(34px,5.5vw,66px); line-height:1.05; letter-spacing:-0.03em; margin-bottom:0.6rem; max-width:820px; }
.hero-title .blue { color:#2B3FFF; }
.hero-subtitle { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(14px,1.8vw,20px); color:#fff; letter-spacing:-0.01em; margin-bottom:1.5rem; }
.hero-sub { font-size:15px; color:#666; max-width:500px; line-height:1.75; margin-bottom:2.5rem; }
.hero-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.hero-btns .btn-pri, .hero-btns .btn-sec { width:220px; text-align:center; }

/* IDENTITY BAND */
.identity-band { background:#030318; border-top:0.5px solid #0d0d30; border-bottom:0.5px solid #0d0d30; padding:5rem 2.5rem; }
.identity-inner { max-width:960px; margin:0 auto; display:grid; grid-template-columns:auto 1fr; gap:3rem; align-items:center; }
.identity-label { font-size:11px; font-weight:600; letter-spacing:.12em; color:#2B3FFF; text-transform:uppercase; margin-bottom:.6rem; }
.identity-quote { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(18px,2.5vw,28px); line-height:1.2; letter-spacing:-0.02em; margin-bottom:.9rem; }
.identity-quote .accent { color:#2B3FFF; }
.identity-desc { font-size:14px; color:#555; line-height:1.75; max-width:520px; }

/* PHASES */
.phases-section { padding:7rem 2.5rem; background:#000; }
.sec-head { text-align:center; margin-bottom:4rem; }
.sec-tag { font-size:11px; font-weight:600; letter-spacing:.12em; color:#2B3FFF; text-transform:uppercase; margin-bottom:.6rem; }
.sec-title { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(24px,3.5vw,40px); letter-spacing:-0.02em; line-height:1.1; }
.phases { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; max-width:960px; margin:0 auto; background:#0f0f0f; border:0.5px solid #111; border-radius:12px; overflow:hidden; }
.phase { background:#050505; padding:2rem 1.75rem; }
.phase-icon { width:40px; height:40px; background:rgba(43,63,255,0.1); border-radius:10px; display:flex; align-items:center; justify-content:center; color:#2B3FFF; font-size:20px; margin-bottom:1.25rem; }
.phase-label { font-size:10px; font-weight:700; letter-spacing:.1em; color:#2B3FFF; text-transform:uppercase; margin-bottom:.4rem; }
.phase-title { font-weight:700; font-size:16px; margin-bottom:.6rem; }
.phase-desc { font-size:12px; color:#555; line-height:1.65; }

/* SERVICES */
.services-section { padding:7rem 2.5rem; background:#030305; border-top:0.5px solid #0e0e0e; }
.services-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; max-width:960px; margin:3rem auto 0; }
.svc-card { background:#060608; border:0.5px solid #141414; border-radius:12px; padding:2.25rem; transition:border-color .2s; }
.svc-card:hover { border-color:rgba(43,63,255,0.3); }
.svc-icon { font-size:22px; color:#2B3FFF; margin-bottom:1rem; }
.svc-title { font-weight:700; font-size:15px; margin-bottom:.5rem; }
.svc-desc { font-size:13px; color:#555; line-height:1.65; margin-bottom:1rem; }
.svc-tags { display:flex; flex-wrap:wrap; gap:6px; }
.svc-tag { font-size:11px; color:#2B3FFF; background:rgba(43,63,255,0.08); border:0.5px solid rgba(43,63,255,0.2); padding:3px 10px; border-radius:100px; }

/* WHY */
.why-section { padding:7rem 2.5rem; background:#000; }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; max-width:960px; margin:3rem auto 0; }
.why-card { background:#040404; border:0.5px solid #141414; border-radius:12px; padding:2.25rem; transition:border-color .2s; }
.why-card:hover { border-color:rgba(43,63,255,0.25); }
.why-num { font-family:'Syne',sans-serif; font-size:38px; font-weight:800; color:rgba(43,63,255,0.15); line-height:1; margin-bottom:.9rem; }
.why-title { font-weight:700; font-size:14px; margin-bottom:.5rem; }
.why-desc { font-size:12px; color:#555; line-height:1.65; }

/* PROCESS */
.process-section { padding:7rem 2.5rem; background:#020208; border-top:0.5px solid #0e0e0e; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; max-width:960px; margin:3rem auto 0; position:relative; }
.steps::before { content:''; position:absolute; top:28px; left:10%; right:10%; height:0.5px; background:linear-gradient(90deg,transparent,rgba(43,63,255,0.35),rgba(43,63,255,0.35),transparent); }
.step { padding:1.5rem 1.25rem; text-align:center; }
.step-dot { width:56px; height:56px; background:#050510; border:0.5px solid rgba(43,63,255,0.4); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; font-family:'Syne',sans-serif; font-weight:800; font-size:13px; color:#2B3FFF; position:relative; z-index:1; }
.step-title { font-weight:700; font-size:13px; margin-bottom:.4rem; }
.step-desc { font-size:11px; color:#444; line-height:1.6; }

/* CTA */
.cta-section { padding:6rem 2.5rem; text-align:center; background:#000; position:relative; overflow:hidden; }
.cta-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:600px; height:300px; background:radial-gradient(ellipse,rgba(43,63,255,0.1) 0%,transparent 65%); pointer-events:none; }
.cta-title { font-family:'Syne',sans-serif; font-size:clamp(26px,4.5vw,52px); font-weight:800; letter-spacing:-0.03em; line-height:1.1; margin-bottom:1rem; position:relative; }
.cta-sub { color:#555; font-size:15px; line-height:1.7; margin-bottom:2.5rem; max-width:480px; margin-left:auto; margin-right:auto; position:relative; }
.cta-form { display:flex; gap:8px; max-width:400px; margin:0 auto; position:relative; }
.cta-form input { flex:1; background:#080808; border:0.5px solid #1e1e1e; color:#fff; padding:13px 16px; border-radius:8px; font-size:14px; font-family:'Space Grotesk',sans-serif; outline:none; }
.cta-form input:focus { border-color:#2B3FFF; }
.cta-form input::placeholder { color:#333; }

/* FOOTER */
.footer { border-top:0.5px solid #0f0f0f; padding:2rem 2.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-logo { font-family:'Syne',sans-serif; font-weight:800; font-size:15px; color:#2B3FFF; }
.footer-copy { font-size:11px; color:#333; margin-top:2px; }
.footer-links { display:flex; gap:1.5rem; list-style:none; }
.footer-links a { font-size:11px; color:#333; text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:#666; }
.divider { height:0.5px; background:linear-gradient(90deg,transparent,#1a1a2e,rgba(43,63,255,0.3),#1a1a2e,transparent); margin:0 2rem; }
.max960 { max-width:960px; margin:0 auto; }

/* === MOBILE — Step 1: NAV + HERO === */
@media (max-width: 768px) {
  .nav { padding: 0.9rem 1.25rem; }
  .nav-logo img:first-child { height: 30px !important; }
  .nav-logo img:last-child { height: 22px !important; }
  .btn-pri, .btn-sec { padding: 8px 16px; font-size: 12px; }

  .hero { padding: 4.5rem 1.25rem; }
  .hero-glow { width: 320px; height: 320px; }
  .hero-rocket-bg { width: 220px !important; height: 220px !important; }
  .tag { font-size: 10px; padding: 4px 12px; margin-bottom: 1.4rem; }
  .hero-title { margin-bottom: 0.8rem; }
  .hero-sub { font-size: 14px; line-height: 1.7; margin-bottom: 2rem; }
  .hero-btns { flex-direction: column; width: 100%; max-width: 320px; gap: 8px; }
  .hero-btns .btn-pri, .hero-btns .btn-sec { width: 100%; padding: 12px 16px; font-size: 13px; }
}

/* === MOBILE — Step 2: IDENTITY + PHASES === */
@media (max-width: 768px) {
  .identity-band { padding: 3.5rem 1.25rem; }
  .identity-inner { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; justify-items: center; }
  .identity-inner > div:first-child svg { width: 64px; height: 64px; }
  .identity-desc { text-align: left; }

  .phases-section { padding: 4.5rem 1.25rem; }
  .sec-head { margin-bottom: 2.5rem; }
  .phases { grid-template-columns: 1fr; gap: 0.5px; }
  .phase { padding: 1.75rem 1.5rem; }
  .phase-icon { width: 38px; height: 38px; font-size: 18px; margin-bottom: 1rem; }
  .phase-title { font-size: 15px; }
  .phase-desc { font-size: 13px; }
}

/* === MOBILE — Step 3: SERVICES + WHY === */
@media (max-width: 768px) {
  .services-section { padding: 4.5rem 1.25rem; }
  .services-grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
  .svc-card { padding: 1.75rem; }
  .svc-title { font-size: 16px; }
  .svc-desc { font-size: 13px; }

  .why-section { padding: 4.5rem 1.25rem; }
  .why-grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
  .why-card { padding: 1.75rem; }
  .why-num { font-size: 32px; margin-bottom: 0.6rem; }
  .why-title { font-size: 15px; }
  .why-desc { font-size: 13px; }
}

/* === MOBILE — Step 4: PROCESS + CTA + FOOTER === */
@media (max-width: 768px) {
  .process-section { padding: 4.5rem 1.25rem; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 2rem; }
  .steps::before { display: none; }
  .step { padding: 1.25rem 0.75rem; }
  .step-dot { width: 48px; height: 48px; font-size: 12px; margin-bottom: 0.75rem; }
  .step-title { font-size: 13px; }
  .step-desc { font-size: 11px; }

  .cta-section { padding: 4.5rem 1.25rem; }
  .cta-glow { width: 320px; height: 200px; }
  .cta-sub { font-size: 14px; margin-bottom: 2rem; }
  .cta-form { flex-direction: column; max-width: 320px; gap: 10px; }
  .cta-form input { width: 100%; }
  .cta-form .btn-pri { width: 100%; padding: 12px 16px; }

  .footer { padding: 1.75rem 1.25rem; flex-direction: column; text-align: center; gap: 1.25rem; }
  .footer > div:first-child > div:first-child { justify-content: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 1rem; }
}

/* === CONTACT MODAL === */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.72); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; z-index:200; padding:1rem; }
.modal-backdrop.open { display:flex; }
.modal { background:#0a0a0a; border:0.5px solid #1e1e1e; border-radius:14px; width:100%; max-width:520px; max-height:90vh; overflow-y:auto; padding:2rem; position:relative; font-family:'Space Grotesk',sans-serif; color:#f0f0f0; }
.modal-close { position:absolute; top:0.85rem; right:1rem; background:transparent; border:0; color:#888; font-size:24px; cursor:pointer; line-height:1; padding:0.25rem 0.5rem; }
.modal-close:hover { color:#fff; }
.modal-tag { color:#2B3FFF; font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:0.5rem; font-weight:600; }
.modal h2 { font-family:'Syne',sans-serif; font-weight:800; font-size:1.5rem; margin-bottom:0.5rem; letter-spacing:-0.02em; }
.modal .modal-sub { color:#888; font-size:14px; margin-bottom:1.5rem; line-height:1.6; }

.field { margin-bottom:1.1rem; }
.field label { display:block; font-size:13px; color:#ccc; margin-bottom:0.4rem; }
.field label .req { color:#2B3FFF; margin-left:2px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea { width:100%; background:#060606; border:0.5px solid #1e1e1e; color:#f0f0f0; padding:11px 14px; border-radius:8px; font-size:14px; font-family:inherit; }
.field textarea { min-height:90px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline:0; border-color:#2B3FFF; }
.field.error input, .field.error select, .field.error textarea { border-color:#ff4d4d; }
.field .err-msg { display:none; color:#ff6a6a; font-size:12px; margin-top:0.35rem; }
.field.error .err-msg { display:block; }

.channels { display:flex; flex-wrap:wrap; gap:8px; }
.channels label { display:inline-flex; align-items:center; gap:6px; background:#060606; border:0.5px solid #1e1e1e; padding:7px 12px; border-radius:999px; font-size:13px; color:#aaa; cursor:pointer; margin-bottom:0; }
.channels input { accent-color:#2B3FFF; }

.consent { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:#aaa; margin:1rem 0 1.25rem; cursor:pointer; }
.consent input { margin-top:3px; accent-color:#2B3FFF; }
.consent a { color:#2B3FFF; text-decoration:underline; }

.modal-actions { display:flex; gap:10px; align-items:center; }
.modal-actions .btn-pri { flex:1; padding:13px 18px; font-size:14px; }
.modal-actions .btn-sec { padding:13px 18px; font-size:14px; }
.modal-actions .btn-pri:disabled { opacity:0.5; cursor:not-allowed; }

.fallback-link { display:block; text-align:center; color:#666; font-size:12px; margin-top:0.75rem; text-decoration:none; }
.fallback-link:hover { color:#aaa; }

.hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; overflow:hidden; }

/* TOAST */
.toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(40px); background:#111; border:0.5px solid #2B3FFF; color:#fff; padding:14px 20px; border-radius:10px; font-size:14px; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:300; display:flex; align-items:center; gap:8px; font-family:'Space Grotesk',sans-serif; max-width:calc(100% - 2rem); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.toast i { color:#2B3FFF; font-size:18px; }

/* MODAL — MOBILE: 풀스크린 시트 */
@media (max-width: 600px) {
  .modal-backdrop { padding:0; align-items:flex-end; }
  .modal { max-width:100%; max-height:95vh; border-radius:16px 16px 0 0; padding:1.5rem 1.25rem 2rem; }
  .modal-actions { flex-direction:column-reverse; }
  .modal-actions .btn-pri, .modal-actions .btn-sec { width:100%; }
}

/* === MOBILE — Step 5: 작은 모바일 (≤ 480px) 추가 보정 === */
@media (max-width: 480px) {
  .nav { padding: 0.8rem 1rem; }
  .hero { padding: 3.5rem 1rem; }
  .steps { grid-template-columns: 1fr; }
  .footer-links { gap: 0.75rem; }
}