:root {
  --ink: #07111f;
  --ink-soft: #0c192b;
  --blue: #287cff;
  --cyan: #48b8ff;
  --paper: #f4f6f8;
  --line: rgba(255, 255, 255, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: white; font-family: Arial, "Noto Sans KR", sans-serif; }
a { color: inherit; text-decoration: none; }

.hero { position: relative; min-height: 100svh; overflow: hidden; background: var(--ink); }
.heroImage { position: absolute; inset: 0; background: url("assets/hero-led.png") center right / cover no-repeat; transform: scale(1.01); }
.heroShade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,12,23,.98) 0%, rgba(4,12,23,.92) 30%, rgba(4,12,23,.55) 55%, rgba(4,12,23,.08) 78%), linear-gradient(180deg, rgba(2,8,17,.68) 0%, transparent 28%, transparent 68%, rgba(2,8,17,.92) 100%); }

.siteHeader { position: relative; z-index: 5; height: 138px; width: min(100% - 80px, 1540px); margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand { display: flex; align-items: center; gap: 15px; }
.brandMark { position: relative; display: block; width: 55px; height: 55px; font-weight: 800; }
.brandMarkD { position: absolute; inset: 2px 6px 2px 0; display: grid; place-items: center; border: 4px solid #fff; border-left-width: 7px; border-radius: 2px 24px 24px 2px; font-size: 0; }
.brandMarkP { position: absolute; right: 0; bottom: 0; width: 35px; height: 35px; display: grid; place-items: center; border: 4px solid var(--blue); border-radius: 2px 18px 18px 2px; color: transparent; }
.brandCopy { display: grid; gap: 6px; }
.brandCopy strong { font-size: 28px; letter-spacing: -.06em; }
.brandCopy small { color: #9dacbf; font-size: 11px; letter-spacing: .08em; }
.desktopNav { display: flex; align-items: center; gap: clamp(28px, 3.2vw, 56px); font-size: 16px; font-weight: 600; }
.desktopNav > a { color: #e7ebf0; transition: color .2s ease; }
.desktopNav > a:hover { color: var(--cyan); }
.mobileMenu { display: none; }

.heroContent { position: relative; z-index: 2; width: min(100% - 80px, 1540px); margin: 0 auto; padding-top: clamp(115px, 13vh, 180px); }
.eyebrow, .sectionLabel { color: #5ea5ff; font-size: 14px; font-weight: 700; letter-spacing: .25em; }
.hero h1 { max-width: 850px; margin: 28px 0 28px; font-size: clamp(50px, 4.4vw, 78px); line-height: 1.16; letter-spacing: -.055em; font-weight: 700; text-wrap: balance; }
.hero h1 span { display: block; }
.heroDescription { color: #c3cbd5; font-size: clamp(17px, 1.25vw, 21px); line-height: 1.8; }
.heroActions { display: flex; align-items: center; gap: 46px; margin-top: 40px; }
.primaryButton { display: inline-flex; min-width: 210px; justify-content: center; padding: 21px 30px; background: linear-gradient(135deg, #2275f2, #1764dd); box-shadow: 0 12px 35px rgba(30,113,245,.24); font-size: 17px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease; }
.primaryButton:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(30,113,245,.38); }
.textButton { font-size: 17px; font-weight: 700; }
.textButton span { display: inline-block; margin-left: 15px; transition: transform .2s ease; }
.textButton:hover span { transform: translateX(6px); }

.proofBar { position: absolute; z-index: 2; bottom: 42px; left: max(40px, calc((100% - 1540px) / 2)); display: flex; }
.proofItem { min-width: 250px; display: flex; align-items: center; gap: 21px; padding: 0 38px; border-right: 1px solid rgba(255,255,255,.28); }
.proofItem:first-child { padding-left: 0; }
.proofItem:last-child { border: 0; }
.proofIcon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--cyan); border: 1px solid #418eef; font-size: 23px; }
.proofItem strong { font-size: 19px; letter-spacing: .03em; }
.proofItem p { margin: 8px 0 0; color: #aeb9c7; font-size: 14px; }
.scrollCue { position: absolute; z-index: 3; right: 40px; bottom: 44px; display: flex; gap: 12px; align-items: center; writing-mode: vertical-rl; color: #8190a2; font-size: 10px; letter-spacing: .2em; }

.introSection, .projectSection { padding: 120px max(40px, calc((100% - 1540px) / 2)); }
.introSection { background: var(--paper); color: var(--ink); }
.introGrid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10vw; margin-top: 48px; }
.introGrid h2, .sectionHeading h2, .contactSection h2 { margin: 0; font-size: clamp(35px, 3.2vw, 55px); line-height: 1.25; letter-spacing: -.05em; }
.introGrid > div { align-self: end; }
.introGrid p { color: #526072; font-size: 18px; line-height: 1.8; }
.introGrid a, .sectionHeading > a { display: inline-block; margin-top: 24px; color: #1764dd; font-weight: 700; }

.projectSection { background: #091423; }
.sectionHeading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 45px; }
.sectionHeading h2 { margin-top: 18px; }
.sectionHeading > a { color: #96a6ba; }
.projectGrid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 18px; }
.projectCard { position: relative; min-height: 440px; overflow: hidden; background: linear-gradient(145deg, #182c43, #0d1b2d); }
.projectCard::before { content: ""; position: absolute; inset: 0; opacity: .72; transition: transform .5s ease, opacity .5s ease; background: radial-gradient(circle at 65% 35%, #2279dc 0 3%, transparent 32%), repeating-linear-gradient(90deg, transparent 0 24px, rgba(74,154,255,.08) 25px 26px), linear-gradient(145deg, transparent 25%, #102943 70%); }
.project2::before { background: linear-gradient(18deg, transparent 38%, #349cff 39% 42%, transparent 43%), linear-gradient(145deg, #16263a, #07101d); }
.project3::before { background: repeating-linear-gradient(120deg, transparent 0 28px, rgba(59,138,233,.17) 29px 32px), radial-gradient(circle at 70% 22%, #174e89, #0b1727 55%); }
.projectCard:hover::before { transform: scale(1.05); opacity: 1; }
.projectCard > div { position: absolute; z-index: 1; inset: auto 30px 30px; }
.projectCard span { color: #67abff; font-size: 12px; letter-spacing: .2em; }
.projectCard h3 { max-width: 300px; margin: 12px 0 0; font-size: 23px; line-height: 1.4; }

.contactSection { padding: 100px max(40px, calc((100% - 1540px) / 2)); display: flex; align-items: end; justify-content: space-between; gap: 40px; background: #1769e5; }
.contactSection .sectionLabel { color: #c7ddff; }
.contactSection h2 { margin-top: 17px; }
.contactSection > a { display: flex; align-items: center; justify-content: space-between; min-width: 270px; padding: 23px 0; border-bottom: 1px solid rgba(255,255,255,.7); font-weight: 700; }
.contactSection > a span { font-size: 25px; }
footer { padding: 35px max(40px, calc((100% - 1540px) / 2)); display: flex; justify-content: space-between; gap: 30px; color: #718095; background: #040b14; font-size: 12px; }
.footerBrand { color: #cbd3dd; font-size: 15px; font-weight: 700; }
.footerBrand span { margin-left: 12px; color: #5f7085; font-size: 10px; font-weight: 400; }
.anchorTarget { position: absolute; }

@media (max-width: 1050px) {
  .siteHeader, .heroContent { width: calc(100% - 48px); }
  .siteHeader { height: 100px; }
  .desktopNav { display: none; }
  .mobileMenu { display: block; position: relative; }
  .mobileMenu summary { width: 48px; height: 48px; display: grid; place-content: center; gap: 8px; border: 1px solid rgba(255,255,255,.25); cursor: pointer; list-style: none; }
  .mobileMenu summary::-webkit-details-marker { display: none; }
  .mobileMenu summary span { width: 21px; height: 2px; background: white; }
  .mobileMenu nav { position: absolute; top: 57px; right: 0; width: 210px; display: grid; padding: 16px; background: rgba(5,14,26,.97); border: 1px solid rgba(255,255,255,.13); box-shadow: 0 18px 45px #0008; }
  .mobileMenu nav a { padding: 13px; }
  .proofBar { left: 24px; bottom: 32px; }
  .proofItem { min-width: 215px; padding: 0 24px; }
  .scrollCue { display: none; }
}

@media (max-width: 760px) {
  .hero { min-height: 850px; }
  .heroImage { background-position: 65% center; opacity: .58; }
  .heroShade { background: linear-gradient(180deg, rgba(4,12,23,.74), rgba(4,12,23,.98) 74%); }
  .brandMark { width: 42px; height: 42px; }
  .brandCopy strong { font-size: 20px; }
  .brandCopy small { font-size: 8px; }
  .heroContent { padding-top: 110px; }
  .eyebrow { font-size: 10px; letter-spacing: .2em; }
  .hero h1 { margin-top: 20px; font-size: clamp(40px, 11vw, 54px); }
  .heroDescription br { display: none; }
  .heroActions { gap: 25px; }
  .primaryButton { min-width: auto; padding: 18px 22px; }
  .proofBar { right: 24px; bottom: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 0; }
  .proofItem { min-width: 0; padding: 0 14px; }
  .proofItem:nth-child(2) { border: 0; }
  .proofItem:last-child { grid-column: 1 / -1; padding-left: 0; }
  .proofIcon { width: 39px; height: 39px; }
  .proofItem strong { font-size: 14px; }
  .proofItem p { font-size: 11px; }
  .introSection, .projectSection { padding: 80px 24px; }
  .introGrid { grid-template-columns: 1fr; gap: 28px; }
  .sectionHeading { display: block; }
  .projectGrid { grid-template-columns: 1fr; }
  .projectCard { min-height: 300px; }
  .contactSection { padding: 75px 24px; display: block; }
  .contactSection > a { margin-top: 40px; min-width: 0; }
  footer { padding: 30px 24px; display: block; line-height: 1.8; }
}

@media (max-width: 430px) {
  .brandCopy small { display: none; }
  .heroActions { align-items: flex-start; flex-direction: column; }
  .textButton { padding-left: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}