:root{
  --ink:#08090b; --ink-2:#101318; --blue:#1e9cf0; --blue-deep:#0b4a9e;
  --paper:#f4f7fa; --muted:#7d8794; --desat:#4a4f57; --on-blue:#04070d;
  --maxw:1280px; --pad:clamp(20px,5vw,80px);
  --font-kr:'Pretendard',system-ui,-apple-system,sans-serif;
  --font-en:'Anton',var(--font-kr);
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--font-kr); font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  word-break:keep-all;
}
img,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,p,ul{margin:0}
ul{padding:0; list-style:none}
section{position:relative}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}

.eyebrow{
  font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--blue); font-weight:700;
}
.kicker{
  font-size:clamp(20px,2.6vw,34px); font-weight:900;
  line-height:1.45; letter-spacing:-.02em;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 30px; border-radius:999px; font-weight:700; font-size:15px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--blue); color:var(--on-blue)}
.btn--ghost{border-color:rgba(244,247,250,.28); color:var(--paper)}

/* ---------- 공용 미디어 배경 패턴 ---------- */
.media-bg{position:absolute; inset:0; overflow:hidden}
.media-bg video,.media-bg img{
  width:100%; height:100%; object-fit:cover;
}
.hero__video{will-change:opacity}
.media-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 15%, rgba(8,9,11,.15) 0%, rgba(8,9,11,.72) 60%, var(--ink) 100%),
    linear-gradient(180deg, rgba(8,9,11,.55) 0%, rgba(8,9,11,.25) 40%, var(--ink) 100%);
}

/* ---------- 01 히어로 ---------- */
.hero{
  min-height:100svh; display:flex; align-items:flex-end;
  padding-block:0 clamp(70px,12vh,140px); overflow:hidden;
}
.hero__body{position:relative; z-index:2; width:100%}
.hero__eyebrow{margin-bottom:26px}
.hero__title{
  font-weight:900; letter-spacing:-.035em;
  font-size:clamp(38px,7.4vw,104px); line-height:1.04;
}
.hero__title span{display:block}
.hero__title em{
  font-style:normal; color:var(--blue);
  text-shadow:0 0 42px rgba(30,156,240,.5);
}
.hero__lead{
  margin-top:30px; max-width:46ch;
  font-size:clamp(15px,1.5vw,20px); line-height:1.7; color:var(--muted);
}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:42px}
.hero__scroll{
  position:absolute; left:50%; bottom:26px; translate:-50% 0;
  width:1px; height:56px; background:rgba(244,247,250,.18); z-index:2;
}
.hero__scroll span{
  position:absolute; inset:0; display:block;
  background:var(--blue); transform-origin:top;
  animation:scrollCue 2.1s ease-in-out infinite;
}
@keyframes scrollCue{
  0%{transform:scaleY(0); opacity:0}
  35%{transform:scaleY(1); opacity:1}
  100%{transform:scaleY(1); opacity:0; transform-origin:bottom}
}

/* ---------- 02 문제 ---------- */
.problem{
  --sat:1;
  min-height:110svh; display:flex; align-items:center;
  padding-block:clamp(90px,14vh,170px); overflow:hidden;
}
.problem__media{background:var(--desat); filter:saturate(var(--sat)) brightness(.62)}
.problem__body{position:relative; z-index:2; max-width:920px}
.problem__title{
  margin-top:22px; font-weight:900; letter-spacing:-.035em;
  font-size:clamp(34px,5.6vw,78px); line-height:1.08; color:var(--paper);
}
.problem__text{
  margin-top:34px; max-width:58ch;
  font-size:clamp(15px,1.35vw,18px); line-height:1.85; color:var(--muted);
}
.problem__kicker{margin-top:56px; color:var(--paper)}

/* ---------- 03 전환점 ---------- */
.ignition{
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  background:radial-gradient(80% 60% at 50% 50%, var(--blue-deep) 0%, var(--ink) 72%);
}
.ignition__media{opacity:.5; mix-blend-mode:screen}
.ignition__body{position:relative; z-index:2}
.ignition__eq{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,1.8vw,26px); flex-wrap:wrap;
  font-family:var(--font-en); letter-spacing:.01em;
  font-size:clamp(46px,11vw,168px); line-height:1;
}
.ignition__eq i{font-style:normal; color:var(--muted); font-size:.5em}
.ignition .ignition__eq i{color:var(--paper)}
.ignition__eq b{
  font-weight:400; color:var(--blue);
  text-shadow:0 0 60px rgba(30,156,240,.75), 0 0 140px rgba(30,156,240,.4);
}
.ignition__text{
  margin-top:38px; font-size:clamp(15px,1.6vw,21px);
  line-height:1.8; color:var(--paper);
}
.ignition__tag{margin-top:28px}
.ignition .ignition__tag{color:var(--paper)}

/* ---------- 04 에이전트 ---------- */
.agents{padding-block:clamp(100px,15vh,190px); overflow:hidden}
.agents__bg{opacity:.4}
.agents__bg img{width:100%; height:100%; object-fit:cover}
.agents .wrap{position:relative; z-index:2}
.agents__title{
  margin-top:22px; font-weight:900; letter-spacing:-.035em;
  font-size:clamp(30px,4.8vw,64px); line-height:1.14;
}
.agents__grid{
  margin-top:64px; display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  /* Two-layer background: the translucent hairline tint paints over an
     opaque --ink base. A leftover grid cell (auto-fit's column count
     doesn't always divide the agent count evenly) has no .agent item to
     cover it, so the grid's own background shows through — previously a
     transparent tint that let the section photo bleed through as a visible
     hole. Backing it with --ink keeps that cell opaque (matching .agent)
     while the tint layer still reads as the same hairline color in the
     1px gaps between filled cells. */
  background-color:var(--ink);
  background-image:linear-gradient(rgba(244,247,250,.1),rgba(244,247,250,.1));
  border:1px solid rgba(244,247,250,.1);
}
.agent{
  background:var(--ink); padding:34px 30px 38px;
  transition:background .3s ease;
}
.agent:hover{background:var(--ink-2)}
.agent__no{
  font-family:var(--font-en); font-size:13px;
  color:var(--blue); letter-spacing:.1em;
}
.agent__name{
  margin-top:16px; font-size:clamp(18px,1.7vw,23px);
  font-weight:700; letter-spacing:-.02em;
}
.agent__desc{
  margin-top:12px; font-size:14px; line-height:1.7; color:var(--muted);
}
.agents__kicker{margin-top:64px}

/* ---------- 05 5대 DB ---------- */
.moat{padding-block:clamp(100px,15vh,190px); background:var(--ink-2)}
.moat__title{
  margin-top:22px; font-weight:900; letter-spacing:-.035em;
  font-size:clamp(30px,4.8vw,64px); line-height:1.14;
}
.moat__grid{
  margin-top:66px; display:grid; gap:40px 24px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.moat__cell{border-top:1px solid rgba(244,247,250,.16); padding-top:22px}
.moat__num{
  font-family:var(--font-en); font-size:clamp(40px,4.6vw,66px);
  line-height:1; color:var(--blue);
}
.unit{margin-left:4px; font-size:16px; color:var(--muted)}
.moat__label{margin-top:14px; font-size:14px; color:var(--muted); line-height:1.6}
.moat__note{margin-top:46px; font-size:13px; color:var(--muted)}
.moat__kicker{margin-top:54px}

/* ---------- 06 실적·레퍼런스 ---------- */
.record{padding-block:clamp(100px,15vh,190px)}
.record__title{
  margin-top:22px; font-weight:900; letter-spacing:-.035em;
  font-size:clamp(30px,4.8vw,64px); line-height:1.14;
}
.record__stats{
  margin-top:60px; display:grid; gap:34px 24px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.stat{border-top:1px solid rgba(244,247,250,.16); padding-top:22px}
.stat__num{
  font-family:var(--font-en); font-size:clamp(38px,4.4vw,62px);
  line-height:1; color:var(--paper);
}
.stat__label{margin-top:12px; font-size:14px; color:var(--muted)}
.record__foot{margin-top:26px; font-size:12px; color:var(--muted)}

.refs{
  margin-top:78px; display:grid; gap:28px 22px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.ref__thumb{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  background:var(--ink-2); filter:brightness(.86) saturate(.9);
  transition:filter .3s ease;
}
.ref:hover .ref__thumb{filter:brightness(1) saturate(1)}
.ref__name{margin-top:16px; font-size:16px; font-weight:700; letter-spacing:-.02em}
.ref__client{margin-top:6px; font-size:13px; color:var(--blue)}

/* ---------- 07 사업영역 ---------- */
.fields{padding-block:clamp(100px,15vh,190px); overflow:hidden}
.fields__bg{opacity:.34}
.fields .wrap{position:relative; z-index:2}
.fields__title{
  margin-top:22px; font-weight:900; letter-spacing:-.035em;
  font-size:clamp(30px,4.8vw,64px); line-height:1.14;
}
.fields__strip{
  margin-top:56px; display:grid; gap:14px;
  grid-template-columns:repeat(3,1fr);
}
.scene{
  aspect-ratio:16/10; overflow:hidden; border-radius:6px;
  background:var(--ink-2);
}
.scene img{
  width:100%; height:100%; object-fit:cover;
  /* Scene stills sit on a near-black section; the raw stills (especially
     seminar.jpg, warmer/brighter than the rest of the Task 3 set) read as
     pasted-on without this. Darken + desaturate slightly so the strip reads
     as part of the same dark canvas as the rest of the section. */
  filter:brightness(.55) saturate(.85);
}
.fields__grid{
  margin-top:40px; display:flex; flex-wrap:wrap; gap:12px;
}
.field{
  padding:14px 26px; border-radius:999px;
  border:1px solid rgba(244,247,250,.2);
  font-size:15px; font-weight:500;
  transition:border-color .25s ease, color .25s ease;
}
.field:hover{border-color:var(--blue); color:var(--blue)}

@media (max-width:640px){
  .fields__strip{grid-template-columns:1fr}
}

/* ---------- 내비게이션 ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding-block:18px; transition:background .3s ease, backdrop-filter .3s ease;
}
.nav[data-solid="true"]{
  background:rgba(8,9,11,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(244,247,250,.08);
}
.nav__inner{display:flex; align-items:center; justify-content:space-between; gap:24px}
.nav__logo img{filter:invert(1); height:22px; width:auto}
.nav__links{display:flex; align-items:center; gap:28px; font-size:14px}
.nav__links a:not(.nav__cta){color:var(--muted); transition:color .2s ease}
.nav__links a:not(.nav__cta):hover{color:var(--paper)}
.nav__cta{padding:11px 22px; font-size:13px; color:var(--on-blue)}
.nav__cta:hover{color:var(--on-blue)}

/* ---------- 08 CTA ---------- */
.cta{
  padding-block:clamp(110px,17vh,210px); text-align:center;
  background:radial-gradient(70% 60% at 50% 100%, var(--blue-deep) 0%, var(--ink) 70%);
}
.cta__title{
  margin-top:22px; font-weight:900; letter-spacing:-.035em;
  font-size:clamp(32px,5.4vw,74px); line-height:1.1;
  text-shadow:0 0 70px rgba(30,156,240,.28);
}
.cta__text{
  margin:30px auto 0; max-width:52ch;
  font-size:clamp(15px,1.5vw,19px); line-height:1.75; color:var(--muted);
}
.cta__actions{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:44px}

/* ---------- 푸터 ---------- */
.foot{padding-block:56px 70px; border-top:1px solid rgba(244,247,250,.1)}
.foot__inner{
  display:flex; flex-wrap:wrap; gap:30px;
  align-items:flex-start; justify-content:space-between;
}
.foot__brand{filter:invert(1); opacity:.8; height:20px; width:auto}
.foot__meta{font-size:13px; line-height:1.9; color:var(--muted); text-align:right}
.foot__meta a{color:var(--blue)}

@media (max-width:900px){
  .nav__links a:not(.nav__cta){display:none}
}
@media (max-width:768px){
  .hero{align-items:center; padding-block:120px 90px}
  .hero__lead{max-width:none}
  .problem{min-height:auto}
  .ignition__eq{gap:8px; font-size:clamp(40px,13vw,72px)}
  .agents__grid{grid-template-columns:1fr}
  .refs{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:20px 14px}
  .ref__name{font-size:14px}
  .btn{padding:14px 24px; font-size:14px}
  .foot__inner{flex-direction:column}
  .foot__meta{text-align:left}
}

/* ---------- 모션 축소 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero__scroll{display:none}
  .problem{--sat:.5}
  .hero__media,.problem__media,.ignition__media,.fields__bg{transform:none !important}
  video{display:none}
  .hero__media::after,.ignition__media::after{
    content:''; position:absolute; inset:0;
    background:var(--ink-2);
  }
}
[data-reduced="true"] .hero__body > *,
[data-reduced="true"] .problem__body > *,
[data-reduced="true"] .ignition__body > *,
[data-reduced="true"] .agent,
[data-reduced="true"] .moat__cell,
[data-reduced="true"] .ref,
[data-reduced="true"] .field{opacity:1 !important; transform:none !important}

:focus-visible{outline:2px solid var(--blue); outline-offset:3px}