:root {
  --color-bg-main: #fafbfc;
  --color-bg-card: #fff;
  --color-text-main: #222;
  --color-accent: #1575D0;
  --color-border: #ebeef1;
  --radius-lg: 12px;
  --shadow-lg: 0 12px 28px -10px rgba(21,117,208,.13),0 1.5px 6px rgba(0,0,0,0.07);
  --shadow-md: 0 2.5px 8px rgba(50,98,186,0.08);
}

html {box-sizing:border-box;}
*,*:before,*:after {box-sizing:inherit;}
body {
  line-height: 1.6;
  background: var(--color-bg-main);
  color: var(--color-text-main);
  word-break: keep-all;
  min-height: 100vh;
  margin: 0;
  font-family: 'Pretendard','Roboto','Noto Sans KR', AppleSDGothicNeo,sans-serif;
  font-size: 17px;
}
a { color: var(--color-accent); text-decoration: none; transition: color .18s;}
a:hover,a:focus { color: #175fad;}
img {max-width:100%; border-radius:var(--radius-lg);}
ul,ol,li {margin:0; padding:0; list-style:none;}
h1,h2,h3,h4,h5,h6 {
  margin: 0 0 .4em 0;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
}
h1 {font-size:2.6rem;}
h2 {font-size:2rem;}
h3 {font-size:1.2rem;}
.section-inner {max-width:1100px; margin:0 auto; padding: 60px 24px 48px;}
.section-title {font-size:2.2rem;margin-bottom:28px;}
.section-desc {font-size:1.1rem; color:#607390;}
.section-slogan {color:#1575d0;font-size:1.25em;margin-bottom: 0.8em;}
.card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.5em 1.3em;
  margin-bottom: 24px;
  transition: box-shadow .22s, transform .33s cubic-bezier(.23, 1, .32, 1);
  position:relative; z-index:1;
  will-change: transform,box-shadow;
  cursor:pointer;
}
.card:focus-visible {outline: 2px solid var(--color-accent);}
.btn {
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:500;
  border-radius:var(--radius-lg);
  min-height: 46px;
  min-width: 124px;
  padding: 0 28px;
  font-size:1rem;
  box-shadow: none;
  border:none;
  background: #EDF5FC;
  color: var(--color-accent);
  transition:background .2s,color .2s,transform .15s;
  cursor:pointer;
  position:relative; z-index:2;
  outline:none;
}
.btn.accent {
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--shadow-md);
}
.btn.ghost {
  background: #fff;
  color: var(--color-accent);
  border:1.4px solid #e7ebf0;
}
.btn:hover,.btn:focus { 
  background: #eaf2fc;
  color: #1575d0;
  transform: scale(1.035) translateY(-2px);
}
.btn.accent:hover,.btn.accent:focus {background: #175fad; color:#fff;}
.menu-cta {
  margin-left:10px;
  font-weight:700;
}
header {
  position:sticky; top:0; z-index:50;
  background:var(--color-bg-main);
  border-bottom:1.5px solid var(--color-border);
  box-shadow:0 2px 14px rgba(21,117,208,0.021);
}
.main-nav {
  display:flex;align-items:center;max-width:1100px;margin:0 auto;
  min-height:64px;padding:0 18px;justify-content:space-between;
}
.brand {
  display:flex;align-items:center;font-size:1.29rem;font-weight:900;gap:10px;color:#1575D0;text-shadow:0 1px 5px #e3edfc19;
  letter-spacing:-1px;user-select:none;
}
.menu-toggle {display:none;width:44px;height:44px;background:transparent;border:none;cursor:pointer;}
.menu {display:flex;align-items:center;gap:6px;}
.menu li a {padding:8px 18px;display:block;border-radius:7px;font-size:1.06rem;}
.menu li a:hover,
.menu li a:focus {background:#f1f7fe;color:#1170c4;}

@media (max-width: 820px) {
  .main-nav {flex-direction:row;padding:0 10px;}
  .brand {font-size:1.1rem;}
  .menu {position:fixed;top:62px;left:0;width:100vw;flex-direction:column;align-items:stretch;height:0;overflow:hidden;transition:.25s;height:auto;max-height:0;box-shadow:0 7px 20px 4px #2a52791e;background:#fff;}
  .menu.open {max-height:calc(100vh - 62px);padding:22px 2px;}
  .menu li {margin-bottom:12px;}
  .menu-toggle {display:block;}
}

.hero-section {
  background: linear-gradient(110deg,#fff 80%,#e5f1fa 120%);
  padding: 88px 0 72px 0;min-height:480px;overflow:hidden;
}
.hero-inner {
  display:flex;align-items:center;justify-content:space-between;gap:40px;max-width:1100px;margin:0 auto;padding:0 34px;
}
.hero-text {flex:3;max-width:470px;}
.hero-title {font-size:2.5rem;line-height:1.14;letter-spacing:-1px;}
.hero-subtitle {color:#346799;font-size:1.14rem;margin-bottom:22px;}
.hero-cta {display:flex;gap:14px;flex-wrap:wrap;}
.hero-art {flex:2;display:flex;align-items:center;justify-content:center;}
@media (max-width: 960px) {
  .hero-inner {flex-direction:column-reverse;gap:14px;}
  .hero-text {max-width:none;padding-bottom:0;}
  .hero-art {padding-bottom:17px;}
}
@media (max-width: 600px) {
  .hero-section {padding:64px 0 34px;}
  .hero-title {font-size:2rem;}
  .section-inner {padding: 44px 7px 29px;}
}

.section {
  margin:36px 0;
}
.grid-3 {display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.grid-4 {display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:900px) {.grid-3{grid-template-columns:repeat(2,1fr);}.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:660px) {.grid-3,.grid-4{grid-template-columns:1fr;}}

.core-values {margin-top:28px;}
.core-value {text-align:center;}
.cv-icon {margin-bottom:14px;display:flex;align-items:center;justify-content:center;}

.services-section .services-grid {margin-bottom:38px;}
.service-card,.add-service-card {text-align:center;min-height:170px;}
.service-icon,.add-service-icon {margin-bottom:11px;display:flex;align-items:center;justify-content:center;}
.add-services-title {font-size:1.08rem; color:#386EAB; font-weight:600;margin-bottom:0.8em;}

.portfolio-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:900px) {.portfolio-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px) {.portfolio-grid{grid-template-columns:1fr;}}
.portfolio-card {padding:0;overflow:hidden;}
.portfolio-thumb {position:relative;border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;}
.portfolio-thumb img {display:block;width:100%;height:180px;object-fit:cover;border-radius:0;transition:filter .22s;}
.portfolio-play {position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);background:none;border:none;}
.portfolio-card:focus .portfolio-thumb img,
.portfolio-card:hover .portfolio-thumb img
{filter:blur(2px) brightness(0.92);}
.portfolio-card:focus .portfolio-play,
.portfolio-card:hover .portfolio-play {opacity:1;transform:scale(1.09);}
.portfolio-info {padding:1.15em;}
.portfolio-info h3 {margin-bottom:8px;}
.portfolio-info p {color:#49587b;font-size:.97em;line-height:1.48;}
.portfolio-card:focus,
.portfolio-card:hover {box-shadow: var(--shadow-lg);transform:scale3d(1.03,1.03,1) perspective(550px) rotateY(8deg);}
.portfolio-play {opacity:0.7;transition:opacity .18s,transform .22s;}

.clients-section ul {display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:center;}
.clients-list .client-logo {display:inline-block;background:#e5f1fa;border-radius:7px;padding:6px 20px;font-weight:500;font-size:1.01em;color:#2264a3;box-shadow:0 2px 6px #dcebfa20;}

.cta-inner {text-align:center;}
.cta-buttons {display:flex;justify-content:center;gap:18px;flex-wrap:wrap;}
@media (max-width:550px){.cta-buttons{flex-direction:column;gap:9px;}}

.contact-section .form-grid {display:grid;grid-template-columns:1fr 1fr;gap:19px;}
.form-group {display:flex;flex-direction:column;gap:7px;}
.form-message {grid-column:1/3;}
input,textarea {border:1.5px solid var(--color-border);border-radius:8px;padding:11px 13px;font-size:1rem;font-family:inherit;}
textarea {resize:vertical;min-height:80px;}
input:focus,textarea:focus {outline:2px solid #1575d033;border-color:#1575d0;}
.contact-info {margin-top:28px;font-size:0.96em;display:flex;flex-direction:column;gap:8px;}
.contact-info svg {vertical-align:middle;margin-right:7px;}

.quicklinks-list {display:flex;flex-wrap:wrap;gap:18px;font-size:.96em;}
.quicklinks-list a {background:#e5f1fa;padding:6px 18px;border-radius:9px;color:#1c3d66;transition:background .2s;}
.quicklinks-list a:hover {background:#1575d0;color:#fff;}

footer {background:#fff;border-top:1.5px solid #e6e7e9;margin-top:18px;}
.footer-inner {max-width:1100px;padding:38px 16px; margin:0 auto;text-align:center;}
.footer-brand {font-size:1.13em;color:#1575d0;font-weight:700;display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:15px;}
.footer-info {display:flex;flex-wrap:wrap;gap:17px;justify-content:center;font-size:0.98em;margin-bottom:10px;}
.footer-link a {display:inline-flex;align-items:center;gap:5px;background:#e5f1fa;padding:4px 13px;border-radius:7.5px;font-weight:500;}
small {display:block;color:#9ba3b0;margin-top:7px;}

.floating-cta {
  position:fixed;right:17px;bottom:28px;z-index:90;
  width:57px;height:57px;background:transparent;border-radius:50%;
  box-shadow:0 3px 13px 0 rgba(21,117,208,0.13);
  display:flex;align-items:center;justify-content:center;
  transition: box-shadow .18s, transform .15s;
  will-change: transform,box-shadow;
}
.floating-cta:hover, .floating-cta:focus {transform:scale(1.06);box-shadow:0 9px 24px 2px #1575d022;}
.floating-cta svg {display:block;}

.modal {display:none;position:fixed;z-index:200;top:0;left:0;right:0;bottom:0;}
.modal.active {display:flex;align-items:center;justify-content:center;}
.modal-content {
  background: #fff; border-radius: var(--radius-lg); max-width:430px;width:95vw;
  position:relative;z-index:3;box-shadow: var(--shadow-lg);padding:2em 1.7em 1.1em;
  animation:pop .23s cubic-bezier(.34,1.56,.64,1) 1;
}
@keyframes pop {from{transform:scale(.76);opacity:.25;}to{transform:scale(1);opacity:1;}}
.modal-close {position:absolute;top:15px;right:18px;background:none;border:none;font-size:2em;line-height:1.1;cursor:pointer;color:#1575D0;}
.modal-backdrop {position:fixed;inset:0;z-index:2;background:rgba(16,58,110,0.09);}
.video-wrapper {padding-top:56.6%;position:relative;}
.video-wrapper video {position:absolute;top:0;left:0;width:100%;height:100%;border-radius:10px;}
@media (max-width:460px) {.modal-content {padding:1em 0.7em 0.6em;}}

::-webkit-scrollbar {width:9px;background:#eaeef3;border-radius:5px;}
::-webkit-scrollbar-thumb {background:#d2dbe6;border-radius:5px;}
::-webkit-scrollbar-thumb:hover {background:#b2c8e0;}