:root{
  --ink:#141414;
  --ink-soft:#4a4a4a;
  --bg:#ffffff;
  --bg-alt:#f5f5f3;
  --line:#e4e2dd;
  --accent:#141414;
  --accent-blue:#4f6bff;
  --accent-purple:#8a5cff;
  --accent-pink:#ff5fa2;
  --accent-grad:linear-gradient(100deg, #4f6bff 0%, #8a5cff 55%, #ff5fa2 100%);
  --radius:14px;
}

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

html{scroll-behavior:smooth;}

body{
  font-family:"Pretendard","Noto Sans KR","Malgun Gothic",-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:0 24px;
}

a{color:inherit;text-decoration:none;}

/* header */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}

.header-inner{
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:18px;
  letter-spacing:-.02em;
}

.brand-logo{height:28px;width:auto;display:block;}

.brand-name em{
  font-style:normal;
  color:var(--ink-soft);
  font-weight:500;
  font-size:13px;
  margin-left:6px;
  letter-spacing:.04em;
}

.nav{display:flex;gap:28px;font-size:15px;font-weight:500;}
.nav a{opacity:.75;transition:opacity .15s, color .15s;}
.nav a:hover{opacity:1;color:var(--accent-blue);}

/* hero */
.hero{
  position:relative;
  overflow:hidden;
  min-height:92vh;
  display:flex;
  align-items:center;
  background:var(--bg);
  padding-top:68px;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-15% -10%;
  z-index:0;
  background:
    radial-gradient(480px 480px at 88% 8%, rgba(79,107,255,.32), transparent 70%),
    radial-gradient(420px 420px at 98% 55%, rgba(138,92,255,.28), transparent 70%),
    radial-gradient(440px 440px at 72% 92%, rgba(255,95,162,.22), transparent 70%);
  filter:blur(50px);
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:radial-gradient(rgba(20,20,20,.09) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom, black, transparent 80%);
  mask-image:linear-gradient(to bottom, black, transparent 80%);
}

.hero-inner{
  position:relative;
  z-index:1;
  padding-top:60px;
  padding-bottom:60px;
}

.hero-inner > *{
  opacity:0;
  animation:fade-up .8s ease forwards;
}
.hero-inner .eyebrow{animation-delay:.05s;}
.hero-inner h1{animation-delay:.16s;}
.hero-inner .hero-desc{animation-delay:.32s;}
.hero-inner .btn{animation-delay:.48s;}

@keyframes fade-up{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:translateY(0);}
}

.eyebrow{
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--accent-blue);
  margin-bottom:18px;
}

.hero h1{
  font-size:clamp(32px,5.4vw,56px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.25;
  margin-bottom:24px;
}

.hero h1 .accent{
  background:var(--accent-grad);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

.hero-desc{
  font-size:clamp(15px,1.6vw,18px);
  color:var(--ink-soft);
  margin-bottom:36px;
}

.btn{
  display:inline-block;
  background:var(--ink);
  color:#fff;
  padding:14px 30px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  transition:transform .15s, opacity .15s;
}
.btn:hover{transform:translateY(-2px);opacity:.9;}

/* sections */
.section{padding:110px 0;}
.section-alt{background:var(--bg-alt);}

.section-label{
  display:inline-block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  margin-bottom:12px;
  background:var(--accent-grad);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

.section h2{
  font-size:clamp(26px,3.4vw,36px);
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:18px;
}

.section-lead{
  font-size:16px;
  color:var(--ink-soft);
  max-width:640px;
  margin-bottom:48px;
}

/* info card */
.info-card{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}

.info-card > div{
  background:#fff;
  padding:22px 26px;
}

.info-card dt{
  font-size:12px;
  color:var(--ink-soft);
  margin-bottom:6px;
  letter-spacing:.02em;
}

.info-card dd{
  font-size:16px;
  font-weight:600;
}

/* business cards */
.cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}

.cards-3{grid-template-columns:repeat(3,1fr);}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--line);
  border-radius:var(--radius);
  padding:32px;
}

.card:has(.card-tag--si){border-top-color:var(--accent-blue);}
.card:has(.card-tag--solution){border-top-color:var(--accent-pink);}

.card-tag{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink-soft);
  background:var(--bg-alt);
  border-radius:999px;
  padding:6px 14px;
  margin-bottom:18px;
}

.card-tag--si{
  color:#2f4bdb;
  background:rgba(79,107,255,.12);
}

.card-tag--solution{
  color:#c23f8a;
  background:rgba(255,95,162,.14);
}

.card h3{
  font-size:22px;
  font-weight:800;
  margin-bottom:6px;
  letter-spacing:-.01em;
}

.card-client{
  font-size:14px;
  color:var(--ink-soft);
  margin-bottom:16px;
}

.card-desc{
  font-size:15px;
  color:var(--ink-soft);
}

/* contact */
.contact-inner{text-align:center;}
.contact-inner .section-lead{margin-left:auto;margin-right:auto;}

.contact-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.contact-address{
  font-size:14px;
  color:var(--ink-soft);
}

/* footer */
.site-footer{
  background:var(--ink);
  color:#fff;
  padding:40px 0;
}

.footer-inner{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.footer-logo{height:24px;width:auto;opacity:.9;}

.footer-inner p{
  font-size:13px;
  color:#c9c9c9;
}

.footer-links{
  display:flex;
  gap:16px;
  margin-left:auto;
  font-size:13px;
}
.footer-links a{color:#c9c9c9;opacity:.85;}
.footer-links a:hover{opacity:1;}

/* legal document pages */
.legal{padding-top:150px;}
.legal-wrap{max-width:760px;}

.legal-title{
  font-size:clamp(24px,3.2vw,32px);
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:10px;
}

.legal-updated{
  font-size:14px;
  color:var(--ink-soft);
  margin-bottom:40px;
}

.legal h2{
  font-size:18px;
  font-weight:800;
  margin-top:40px;
  margin-bottom:14px;
}

.legal p{
  font-size:15px;
  color:var(--ink-soft);
  margin-bottom:16px;
}

.legal p strong{color:var(--ink);}

.mobile-only{display:none;}

@media (max-width: 980px){
  .cards-3{grid-template-columns:repeat(2,1fr);}
}

@media (max-width: 760px){
  .nav{gap:16px;font-size:14px;}
  .info-card{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr;}
  .cards-3{grid-template-columns:1fr;}
  .section{padding:72px 0;}
  .mobile-only{display:inline;}
}

/* scroll reveal */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,.8,.24,1), transform .7s cubic-bezier(.16,.8,.24,1);
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

.reveal-group .card{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal-group.is-visible .card{
  opacity:1;
  transform:none;
}
.reveal-group .card:nth-child(1){transition-delay:.05s;}
.reveal-group .card:nth-child(2){transition-delay:.15s;}
.reveal-group .card:nth-child(3){transition-delay:.25s;}

@media (prefers-reduced-motion: reduce){
  .hero-inner > *{animation:none;opacity:1;}
  .reveal, .reveal-group .card{
    opacity:1;
    transform:none;
    transition:none;
  }
}