:root {
  --color-primary: #0064FF;
  --color-secondary: #0052CC;
  --color-tertiary: #004CCC;
  --color-quaternary: #0040B8;

  --color-bg-primary: #000000;
  --color-bg-secondary: #0A0A0A;
  --color-bg-tertiary: #1A1A1A;
  --color-bg-card: #0F0F0F;

  --color-text-primary: #FFFFFF;
  --color-text-secondary: #888888;
  --color-text-muted: #666666;

  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-light: rgba(255, 255, 255, 0.2);

  --font-primary: 'Inter', sans-serif;
  --font-korean: 'Noto Sans KR', sans-serif;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);

  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;

  --transition-fast: 0.2s ease-out;
  --transition-medium: 0.3s ease-out;
  --transition-slow: 0.5s ease-out;

  --headerBaseH: 80px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-korean);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ===== Animations ===== */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes float-node { 0%,100%{ transform: translate(-50%,-50%) translateY(0) scale(1) } 50%{ transform: translate(-50%,-50%) translateY(-6px) scale(1.1) } }
@keyframes pulse-connection {
  0%,100%{ opacity:.2; background:linear-gradient(90deg,transparent,rgba(0,100,255,.3),transparent); }
  50%{ opacity:.7; background:linear-gradient(90deg,transparent,rgba(0,100,255,.8),transparent); }
}

/* ===== Utilities ===== */
.container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.section { padding: 120px 0; position: relative; overflow: hidden; }
.animate-on-scroll { opacity: 0; transform: translateY(60px); transition: all .8s cubic-bezier(.4,0,.2,1); }
.animate-on-scroll.animate { opacity: 1; transform: translateY(0); }
.text-gradient { color: var(--color-primary); font-weight: 700; }
section[id]{ scroll-margin-top: calc(var(--headerBaseH) + 14px); }

/* ===== Header ===== */
.header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  background: rgba(0,0,0,.1); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.1);
  transition: all var(--transition-medium);
}
.header.scrolled { 
  background: rgba(0,0,0,.95); 
  backdrop-filter: blur(20px); 
  border-bottom-color: var(--color-border); 
  box-shadow: var(--shadow-sm); 
}
.header-container { 
  display:flex; justify-content:space-between; align-items:center; 
  height:var(--headerBaseH); transition:height var(--transition-medium); 
}

.logo { 
  font-weight:800; font-size: clamp(24px, 3vw, 36px); 
  color:#fff; text-decoration:none; transition: all var(--transition-fast); z-index:1001;
}
.logo:hover { color: var(--color-primary); transform: scale(1.05); }

/* ===== Desktop Nav ===== */
.nav { display:flex; gap:14px; align-items:center; margin-right:8px; }
.nav-link { 
  position:relative; font-size:15px; color:var(--color-text-secondary); 
  text-decoration:none; padding:10px 8px; border-radius: var(--border-radius-sm); 
  transition: all var(--transition-fast);
}
.nav-link:hover { color:#fff; background: var(--color-bg-secondary); }
.nav-link.active { color:#fff; font-weight:700; }
.nav-link.active::after{
  content:""; position:absolute; left:8px; right:8px; bottom:4px; height:2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-tertiary));
  border-radius:2px;
}

/* ===== Language (desktop) ===== */
.lang-menu{ position:relative; margin-left:6px; }
.lang-toggle{
  display:grid; place-items:center; width:48px; height:48px;
  border:1px solid var(--color-border); border-radius:12px;
  background: rgba(255,255,255,.06); color:#e9e9e9; cursor:pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.lang-toggle:hover{ background: rgba(255,255,255,.1); border-color: var(--color-border-light); transform: translateY(-1px); }
.lang-toggle svg{ width:26px; height:26px; display:block; }
.lang-list{
  position:absolute; top: calc(100% + 10px); left: 50%;
  min-width: 180px; padding:8px; text-align: center;
  background:#0c0c0c; border:1px solid rgba(255,255,255,.1); border-radius:12px; box-shadow: var(--shadow-md);
  opacity:0; visibility:hidden; transform: translate(-50%, -6px); transition: all .18s ease; z-index:1200;
}
.lang-menu.open .lang-list{ opacity:1; visibility:visible; transform: translate(-50%, 0); }
.lang-item{
  width: 100%; display:flex; align-items:center; justify-content:center;
  padding:12px 14px; color:#eaeaea; border-radius:8px; font-weight:700; text-decoration:none;
}
.lang-item:hover{ background: rgba(255,255,255,.06); }

/* ===== Mobile Menu ===== */
.mobile-menu-toggle{
  display:none; align-items:center; justify-content:center; gap:5px;
  width:44px; height:44px; padding:8px; background: transparent; border:0; border-radius:12px; color:#fff;
}
.mobile-menu-toggle:hover{ background: rgba(255,255,255,.08); }
.mobile-menu-toggle span{ width:24px; height:2px; background:#fff; border-radius:2px; transition: var(--transition-fast); }

.mobile-nav{
  display:none; position:absolute; top:100%; left:0; width:100%;
  background:rgba(10,10,10,.98); backdrop-filter: blur(14px);
  border-top:1px solid var(--color-border); box-shadow: var(--shadow-md); z-index:1500; padding:10px 0;
}
.mobile-nav.active{ display:block; }
.mobile-nav-link{
  display:block; padding:16px 20px; color:#eaeaea; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.06);
}
.mobile-nav-link:last-child{ border-bottom:0; }

.mobile-lang{ padding:12px 20px 16px; }
.mobile-lang-title{ font-size:12px; color:var(--color-text-muted); letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; }
.mobile-lang-row{ display:flex; gap:8px; }
.mobile-lang-btn{
  flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--color-border);
  background: rgba(255,255,255,.06); color:#eaeaea; text-decoration:none;
}
.mobile-lang-btn:hover{ background: rgba(255,255,255,.1); }

/* ===== Hero ===== */
.hero-section{ 
  height:100vh; min-height:600px; display:flex; align-items:center; justify-content:center; 
  position:relative; overflow:hidden; background: var(--color-bg-secondary);
}
.hero-background{ position:absolute; inset:0; z-index:1; }
.hero-background video{ position:absolute; top:50%; left:50%; width:100%; height:100%; object-fit:cover; transform:translate(-50%,-50%); }
.hero-content{ position:relative; z-index:3; text-align:center; max-width:1000px; padding:0 2rem; }
.hero-title{ 
  font-size:5rem; font-weight:900; line-height:.9; margin-bottom:2rem; letter-spacing:-.04em; color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.hero-title-highlight{ color:var(--color-primary); font-weight:900; }
.hero-subtitle{ 
  font-size:1.5rem; color:#fff; margin-bottom:3rem; font-weight:700; letter-spacing:-.01em; 
  text-shadow:0 1px 5px rgba(0,0,0,.5); opacity:.9;
}
.hero-cta{ display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; }
.scroll-indicator{ 
  position:absolute; bottom:2rem; left:0; right:0; margin:0 auto; color:#fff; font-size:.75rem; 
  text-transform:uppercase; letter-spacing:.1em; animation: float 3s ease-in-out infinite; z-index:3; opacity:.7; text-align:center; width:fit-content;
}

/* Hero: 좌측 정렬 변형 (데스크톱) */
.hero--left .hero-content{
  position:absolute; top:50%;
  left: max(24px, calc((100vw - 1400px)/2 + 20px));
  transform: translateY(-50%);
  text-align:left;
  width:min(720px, 90vw);
  max-width:720px;
  margin:0; padding:0 2rem;
}
.hero--left .hero-title{
  font-size: clamp(2.6rem, 4.6vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: 1.1rem;
}
.hero--left .hero-subtitle{
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  margin-bottom: 1.6rem;
}
.hero--left .hero-cta{ justify-content:flex-start; gap:.75rem; }
.hero--left .hero-background video{ object-position: 62% center; }
.hero--left .hero-overlay{
  background: linear-gradient(90deg,
    rgba(0,0,0,.58) 0%,
    rgba(0,0,0,.42) 36%,
    rgba(0,0,0,.28) 56%,
    rgba(0,0,0,.18) 72%,
    rgba(0,0,0,.10) 100%);
}

/* ===== Buttons ===== */
.btn{ 
  padding:1rem 2.5rem; font-size:.875rem; font-weight:600; text-decoration:none; 
  text-transform:uppercase; letter-spacing:.1em; border-radius:4px; display:inline-block; border:none; cursor:pointer;
  transition:all var(--transition-medium);
}
.btn-primary{ background:var(--color-primary); color:#fff; border:1px solid var(--color-primary); }
.btn-primary:hover{ background:var(--color-secondary); border-color:var(--color-secondary); transform: translateY(-2px); }
.btn-secondary{
  background:#fff; color:var(--color-primary); border:1px solid var(--color-primary); font-weight:700;
}
.btn-secondary:hover{
  background:var(--color-primary); color:#fff; border-color:var(--color-primary); transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,100,255,.25);
}

/* ===== Section Headers ===== */
.section-header{ text-align:center; margin-bottom:80px; position:relative; z-index:2; }
.section-tag{ 
  display:inline-block; padding:8px 20px; background:rgba(255,255,255,.1); 
  border:1px solid rgba(255,255,255,.2); border-radius:50px; font-size:14px; font-weight:600; color:rgba(255,255,255,.9);
  backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgba(0,0,0,.25); margin-bottom:20px;
}
.section-title{ font-size: clamp(32px, 5vw, 56px); font-weight:900; margin-bottom:24px; line-height:1.2; color:#fff; }
.section-subtitle{ font-size: clamp(16px, 2vw, 20px); color:var(--color-text-secondary); max-width:700px; margin:0 auto; }

/* ===== Problems ===== */
.problems-section{ background: var(--color-bg-secondary); position:relative; overflow:hidden; }
.problems-section::before{ 
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.02) 0%, transparent 50%);
  pointer-events:none;
}
.problems-container{ position:relative; max-width:1400px; margin:0 auto; padding:0 20px; display:flex; flex-direction:column; gap:80px; z-index:2; }
.problem-item-horizontal{ 
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:stretch; 
  opacity:0; transform: translateY(60px); transition: all .8s cubic-bezier(.4,0,.2,1); 
}
.problem-item-horizontal.animate{ opacity:1; transform: translateY(0); }
.problem-item-horizontal:nth-child(even){ direction: rtl; }
.problem-item-horizontal:nth-child(even) > *{ direction: ltr; }

.illustration-side{ 
  background: rgba(255,100,100,.08); backdrop-filter: blur(20px); border:1px solid rgba(255,100,100,.2);
  border-radius:20px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  transition: all .4s ease; background-size:contain; background-repeat:no-repeat; background-position:center; min-height:100%;
}
.illustration-side:hover{ 
  transform: translateY(-10px) scale(1.02); 
  box-shadow:0 20px 40px rgba(255,100,100,.2); border-color: rgba(255,100,100,.3); background-color: rgba(255,100,100,.12);
}
.illustration-side.problem-01{ background-image:url('/assets/img/5.png'); background-color: rgba(255,87,87,.08); border-color: rgba(255,87,87,.2); }
.illustration-side.problem-02{ background-image:url('/assets/img/6.png'); background-color: rgba(255,107,107,.08); border-color: rgba(255,107,107,.2); }
.illustration-side.problem-03{ background-image:url('/assets/img/7.png'); background-color: rgba(255,127,127,.08); border-color: rgba(255,127,127,.2); }

.problem-content-horizontal{ 
  background: rgba(255,255,255,.05); backdrop-filter: blur(20px); border:1px solid rgba(255,100,100,.15);
  border-radius:20px; padding:40px; transition: all .4s ease; display:flex; flex-direction:column; justify-content:space-between; min-height:100%;
}
.problem-content-horizontal:hover{ 
  background: rgba(255,255,255,.08); border-color: rgba(255,100,100,.25); transform: translateY(-5px);
  box-shadow:0 15px 35px rgba(255,100,100,.15);
}
.problem-title-horizontal{ font-size:28px; font-weight:900; color:#fff; margin-bottom:12px; line-height:1.2; }
.problem-subtitle-horizontal{ font-size:16px; color:var(--color-text-secondary); margin-bottom:20px; line-height:1.4; }
.problem-description-horizontal{ font-size:16px; color:var(--color-text-secondary); line-height:1.6; margin-bottom:24px; }
.problem-stats-horizontal{ display:flex; gap:24px; }
.stat-item-horizontal{ text-align:center; flex:1; padding:16px 12px; transition: all .3s ease; }
.stat-value-horizontal{ display:block; font-size:24px; font-weight:900; color:#FF5757; margin-bottom:6px; }
.stat-label-horizontal{ font-size:12px; color:var(--color-text-muted); line-height:1.3; font-weight:600; }

/* ===== Solutions ===== */
.solutions-section{ background: var(--color-bg-primary); }
.solutions-container{ position:relative; max-width:1400px; margin:0 auto; padding:0 20px; display:flex; flex-direction:column; gap:80px; z-index:2; }
.solution-item{ 
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; 
  opacity:0; transform: translateY(60px); transition: all .8s cubic-bezier(.4,0,.2,1);
}
.solution-item.animate{ opacity:1; transform: translateY(0); }
.solution-item:nth-child(even) .solution-icon-container{ order:2; }
.solution-item:nth-child(even) .solution-text-container{ order:1; }
.solution-icon-container{ display:flex; justify-content:center; align-items:center; padding:40px; }
.solution-icon-image{ 
  width:400px; height:400px; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border-radius:30px; display:flex; align-items:center; justify-content:center; box-shadow:0 20px 60px rgba(0,100,255,.25);
  transition: all .4s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden; background-size: 80% auto; background-repeat:no-repeat; background-position:center;
}
.solution-icon-image.icon-approach{ background-image:url('/assets/img/1.png'); }
.solution-icon-image.icon-analysis{ background-image:url('/assets/img/2.png'); }
.solution-icon-image.icon-translate{ background-image:url('/assets/img/3.png'); }
.solution-icon-image.icon-automation{ background-image:url('/assets/img/4.png'); }
.solution-item:hover .solution-icon-image{ transform: translateY(-10px) scale(1.05); box-shadow:0 30px 80px rgba(0,100,255,.4); }
.solution-icon-image::before{ 
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,.1), transparent); transform: rotate(45deg);
  transition: all .6s ease; opacity:0;
}
.solution-item:hover .solution-icon-image::before{ opacity:1; left:100%; }
.solution-text-container{ padding:20px; }
.solution-title-zigzag{ font-size: clamp(28px, 4vw, 37px); font-weight:900; color:#fff; margin-bottom:20px; line-height:1.2; }
.solution-description-zigzag{ font-size:18px; color:var(--color-text-secondary); line-height:1.6; margin-bottom:30px; }
.solution-highlight{ 
  background: rgba(0,100,255,.1); border:1px solid rgba(0,100,255,.3); border-radius:16px; padding:20px 24px;
  display:inline-flex; align-items:center; gap:12px; transition: all .3s ease;
}
.solution-highlight:hover{ background: rgba(0,100,255,.2); border-color: var(--color-primary); transform: scale(1.05); }
.highlight-value{ font-size:28px; font-weight:900; color: var(--color-primary); }
.highlight-label{ font-size:16px; color:var(--color-text-secondary); font-weight:600; }

/* ===== Demo ===== */
.demo-section{ background: var(--color-bg-secondary); }
.demo-video-container{ 
  background: var(--color-bg-card); border:2px solid rgba(0,100,255,.3);
  border-radius: var(--border-radius-lg); padding:40px; margin-bottom:60px;
}
.demo-video-wrapper{ position:relative; width:100%; padding-bottom:56.25%; border-radius: var(--border-radius-md); overflow:hidden; box-shadow: var(--shadow-lg); }
.demo-video-wrapper video{ position:absolute; top:0; left:0; width:100%; height:100%; }

/* ===== Tech Showcase ===== */
.tech-showcase-section{
  background: linear-gradient(180deg,#000 0%,#0a0a0a 50%,#000 100%);
  position:relative; min-height: 80vh; display:flex; align-items:center; overflow:hidden; padding: 60px 0;
}
.tech-stack-container{ position: relative; height: clamp(460px, 58vh, 760px); overflow: visible; }
.tech-stack-center{ position:absolute; width:360px; height:360px; left:50%; top:50%; transform: translate(-50%,-50%); display:flex; align-items:center; justify-content:center; z-index:5; opacity:0; transition: opacity .8s ease; }
.tech-stack-center.show{ opacity:1; }
.neural-network{ position:relative; width:100%; height:100%; }
.neural-node{ position:absolute; width:16px; height:16px; background:#0064FF; border-radius:50%; box-shadow: 0 0 20px rgba(0,100,255,.8); }
.neural-node.center{ width:24px; height:24px; left:50%; top:50%; transform: translate(-50%,-50%); background: linear-gradient(135deg,#0064FF,#00A8FF); box-shadow: 0 0 30px rgba(0,100,255,1); z-index:2; }
.neural-node.n1{ left:50%; top:18%; transform: translate(-50%,-50%); animation: float-node 4s ease-in-out infinite 0s; }
.neural-node.n2{ left:78%; top:32%; transform: translate(-50%,-50%); animation: float-node 4s ease-in-out infinite .7s; }
.neural-node.n3{ left:78%; top:68%; transform: translate(-50%,-50%); animation: float-node 4s ease-in-out infinite 1.4s; }
.neural-node.n4{ left:50%; top:82%; transform: translate(-50%,-50%); animation: float-node 4s ease-in-out infinite 2.1s; }
.neural-node.n5{ left:22%; top:68%; transform: translate(-50%,-50%); animation: float-node 4s ease-in-out infinite 2.8s; }
.neural-node.n6{ left:22%; top:32%; transform: translate(-50%,-50%); animation: float-node 4s ease-in-out infinite 3.5s; }
.neural-connection{ position:absolute; height:2px; background: linear-gradient(90deg, transparent, rgba(0,100,255,.5), transparent); transform-origin:left center; animation: pulse-connection 3s ease-in-out infinite; }
.neural-connection.c1{ width:85px; left:50%; top:50%; transform: translate(-50%,-50%) rotate(-60deg); animation-delay:0s; }
.neural-connection.c2{ width:85px; left:50%; top:50%; transform: translate(-50%,-50%) rotate(0deg); animation-delay:.5s; }
.neural-connection.c3{ width:85px; left:50%; top:50%; transform: translate(-50%,-50%) rotate(60deg); animation-delay:1s; }
.neural-connection.c4{ width:85px; left:50%; top:50%; transform: translate(-50%,-50%) rotate(120deg); animation-delay:1.5s; }
.neural-connection.c5{ width:85px; left:50%; top:50%; transform: translate(-50%,-50%) rotate(180deg); animation-delay:2s; }
.neural-connection.c6{ width:85px; left:50%; top:50%; transform: translate(-50%,-50%) rotate(240deg); animation-delay:2.5s; }

.slogan-container{ position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); text-align:center; opacity:0; transition: all 1s ease; max-width:900px; width:100%; z-index:10; }
.slogan-container.show{ opacity:1; }
.slogan-main{ font-size: clamp(28px, 4vw, 48px); font-weight:300; line-height:1.3; margin-bottom:20px; color:#fff; letter-spacing:-.02em; }
.slogan-highlight{ font-weight:900; background: linear-gradient(135deg,#0064FF 0%,#00A8FF 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:inline-block; }
.slogan-sub{ font-size: clamp(14px, 1.5vw, 18px); color:#666; font-weight:400; letter-spacing:.05em; text-transform:uppercase; }

.tech-tag{
  position:absolute; left:50%; top:50%; padding:14px 22px;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:50px;
  font-size:16px; font-weight:600; color:#fff; cursor:pointer; backdrop-filter: blur(10px);
  white-space:nowrap; opacity:0; transform: translate(-50%,-50%);
  transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .8s ease, filter .8s ease;
}
.tech-tag.primary{ background: rgba(0,100,255,.1); border-color: rgba(0,100,255,.3); }
.tech-tag.show{ opacity:1; }
.tech-tag:hover{ background: rgba(0,100,255,.2); border-color: rgba(0,100,255,.4); box-shadow: 0 8px 24px rgba(0,100,255,.3); transform: translate(-50%,-50%) scale(1.08); }

/* Tech tags motion states */
.tech-tag{
  /* 초기 위치 (센터) */
  transform: translate(-50%, -50%) scale(1);
  will-change: transform, opacity, filter;
}

/* JS가 --tx/--ty/--rot/--sz 세팅 후 이 클래스를 붙임: 퍼지기 */
.tech-tag.scatter{
  transform:
    translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px)))
    rotate(var(--rot, 0deg))
    scale(var(--sz, 1));
  opacity: 1; /* .show와 함께 투명도 올림 */
}

/* 이후 --dx/--dy를 추가로 세팅하고 이 클래스를 붙임: 사라지기 */
.tech-tag.vanish{
  transform:
    translate(
      calc(-50% + var(--tx, 0px) + var(--dx, 0px)),
      calc(-50% + var(--ty, 0px) + var(--dy, 0px))
    )
    rotate(var(--rot, 0deg))
    scale(var(--sz, 1));
  opacity: 0;
  filter: blur(2px);
}

/* 중앙 로고 페이드아웃이 필요하면 이것도 */
.tech-stack-center.hide{
  opacity: 0;
  transition: opacity .4s ease .2s;
}


/* ===== Fullwidth Image ===== */
.fullwidth-image-section{ padding:0; background:var(--color-bg-primary); width:100vw; margin-left: calc(-50vw + 50%); position:relative; display:flex; align-items:center; justify-content:center; }
.fullwidth-image-wrapper{ position:relative; width:100%; display:block; }
.fullwidth-image{ width:100%; height:auto; display:block; }
.fullwidth-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.5); z-index:2; }
.fullwidth-content {
  position: absolute; top: 50%; left: 8%; transform: translateY(-50%); text-align: left; z-index: 3;
  max-width: 720px; width: 40%;
}
.fullwidth-title { font-size: clamp(28px, 4vw, 56px); font-weight: 900; color: #fff; margin-bottom: 18px; line-height: 1.2; text-shadow: 0 4px 20px rgba(0,0,0,.8); }
.fullwidth-subtitle { font-size: clamp(16px, 2vw, 22px); color: rgba(255,255,255,.9); font-weight: 400; line-height: 1.6; text-shadow: 0 2px 10px rgba(0,0,0,.6); }

/* ===== Parallax ===== */
.parallax-section{ position:relative; height:60vh; min-height:400px; max-height:800px; overflow:hidden; display:flex; justify-content:center; align-items:center; transform: translateZ(0); }
.parallax-background{ position:absolute; top:-50%; left:0; height:200%; width:100%; background-image:url('/assets/img/para_2.png'); background-size:cover; background-position:center top; background-attachment:scroll; z-index:-2; filter: brightness(.5) contrast(1.3); background-color: var(--color-bg-primary); }
.parallax-overlay{ position:absolute; inset:0; background: rgba(0,0,0,.4); z-index:-1; }
.parallax-content{ text-align:center; max-width:800px; padding:0 2rem; position:relative; z-index:1; }
.parallax-title{ font-size: clamp(32px, 6vw, 48px); font-weight:900; color:#fff; margin-bottom:24px; line-height:1.1; letter-spacing:-.02em; text-shadow:0 4px 20px rgba(0,0,0,.8); }
.parallax-subtitle{ font-size: clamp(16px, 2.5vw, 20px); color: rgba(255,255,255,.9); font-weight:300; line-height:1.5; text-shadow:0 2px 10px rgba(0,0,0,.6); opacity:.95; }

/* ===== SaaS Flow ===== */
.saas-flow-section{ background: var(--color-bg-primary); }
.saas-flow-section .section-header{ margin-bottom:48px; }
.saas-flow-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:32px; align-items:stretch; }
.saas-card{
  background: linear-gradient(135deg, var(--color-bg-card), rgba(0,100,255,.05));
  border:1px solid var(--color-border); border-radius: var(--border-radius-lg);
  overflow:hidden; position:relative; transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-fast);
  box-shadow: var(--shadow-md);
}
.saas-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--color-primary); }
.saas-media{ position:relative; aspect-ratio: 16 / 9; background: #070707; border-bottom:1px solid var(--color-border); }
.saas-media img{ width:100%; height:100%; object-fit:cover; display:block; filter: contrast(1.02) saturate(1.02); }
.saas-body{ padding:22px 20px 16px; }
.saas-title{ font-weight:800; font-size:18px; color:#fff; margin-bottom:8px; letter-spacing:-.01em; }
.saas-sub{ font-size:14px; color: var(--color-text-secondary); line-height:1.5; }
.saas-foot{
  margin-top:18px; background: rgba(0,100,255,.10); border:1px solid rgba(0,100,255,.30);
  color:#fff; font-weight:700; font-size:14px; border-radius: 10px; padding:12px 14px; text-align:center;
}

/* ===== Requirements ===== */
.requirements-section{ background: var(--color-bg-primary); position: relative; overflow: hidden; padding: 120px 0 100px; }
.requirements-header{ text-align:center; margin-bottom:56px; }
.requirements-title{ font-size: clamp(28px, 5vw, 48px); font-weight:900; color:#fff; line-height:1.15; margin-bottom:12px; }
.requirements-title .accent{ color: var(--color-primary); }
.requirements-sub{ color: var(--color-text-secondary); font-size: clamp(14px, 2vw, 18px); opacity:.9; }
.req-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; align-items: stretch; }
.req-card{
  position: relative; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 28px 20px 22px; text-align:center; backdrop-filter: blur(8px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease; min-height: 220px;
}
.req-card:hover{
  transform: translateY(-6px); box-shadow: 0 18px 50px rgba(0,100,255,.18); border-color: rgba(0,100,255,.35);
  background: radial-gradient(120% 120% at 50% 10%, rgba(0,100,255,.12) 0%, rgba(255,255,255,.04) 45%);
}
.req-media{ width: 132px; height:132px; margin: 0 auto 14px; display:grid; place-items:center; border-radius: 20px;
  background: radial-gradient(90% 90% at 50% 30%, rgba(0,100,255,.16) 0%, rgba(255,255,255,.03) 60%);
  border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 0 30px rgba(0,100,255,.08), 0 8px 28px rgba(0,0,0,.35);
}
.req-media img{ width:92px; height:92px; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0,100,255,.28)); }
.req-title{ font-weight: 800; font-size: 18px; letter-spacing:.01em; }
.req-note{ margin-top: 6px; font-size: 13px; color: var(--color-text-muted); }
.req-card::after{
  content:"+"; position:absolute; top:50%; right:-18px; transform: translateY(-50%);
  font-weight:900; font-size:28px; color:#6CA8FF; opacity:.9;
}
.req-card:nth-child(4n)::after{ display:none; }

@media (max-width: 768px){
  .req-card::after {
    display: none !important;
  }
}

/* ===== Pricing ===== */
.pricing-section{ background: var(--color-bg-primary); }
.pricing-2grid{
  display:grid; grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap:28px; max-width: 1160px; margin: 0 auto;
}
.price-card{
  background: #0B0B0B; border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  padding: 28px; position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.price-card:hover{ transform: translateY(-6px); border-color: rgba(0,100,255,.35); box-shadow: 0 20px 60px rgba(0,100,255,.15); background: radial-gradient(120% 120% at 20% 0%, rgba(0,100,255,.10) 0%, #0B0B0B 42%); }
.price-card.primary{ background: #0A101A; border-color: rgba(0,100,255,.35); box-shadow: inset 0 0 0 1px rgba(0,100,255,.12), 0 10px 40px rgba(0,100,255,.18); }
.price-badge{
  display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.02em; margin-bottom:14px;
  color:#9fc4ff; background: rgba(0,100,255,.15); border:1px solid rgba(0,100,255,.35);
}
.price-badge.gray{ color:#bcd0ff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.price-title{ font-size: clamp(22px, 2.2vw, 28px); font-weight: 900; color:#fff; margin-bottom: 10px; letter-spacing:-.01em; }

.price-value{
  display:flex; align-items:baseline; gap:.4em; flex-wrap:wrap;
  font-weight:900; font-size: clamp(24px, 4.5vw, 45px); line-height:1; margin: 6px 0 10px; color:#2A79FF;
}
.price-value .currency{ font-size: .35em; color: rgba(255,255,255,.5); font-weight:600; }

.price-unit{ display:block; font-size: clamp(13px, 1.6vw, 16px); color: #9aa7bd; margin-bottom: 18px; }
.price-sep{ height:1px; background: rgba(255,255,255,.06); margin: 10px 0 16px; }
.price-features{ list-style:none; }
.price-features li{
  display:flex; align-items:center; gap:12px; padding: 14px 0;
  border-bottom:1px solid rgba(255,255,255,.06); color:#cfd6e6; font-size: 15px;
}
.price-features li:last-child{ border-bottom:0; }
.price-dot{ width:10px; height:10px; border-radius:3px; background: rgba(0,100,255,.9); box-shadow: 0 0 0 3px rgba(0,100,255,.12); }

/* ===== Contact ===== */
.contact-section{ background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-tertiary) 100%); }
.contact-container{ max-width:800px; }
.contact-form{ 
  background: rgba(255,255,255,.05); backdrop-filter: blur(20px); border:1px solid rgba(255,255,255,.1);
  border-radius: var(--border-radius-lg); padding:60px; box-shadow: var(--shadow-lg);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px; }
.form-group{ display:flex; flex-direction:column; gap:8px; }
.form-group.full-width{ grid-column:1 / -1; }
.form-label{ font-size:16px; font-weight:600; color:#fff; }
.form-input,.form-textarea{
  padding:16px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.2);
  border-radius: var(--border-radius-sm); color:#fff; font-size:16px; transition: all var(--transition-fast);
}
.form-input::placeholder,.form-textarea::placeholder{ color: var(--color-text-muted); }
.form-textarea{ resize:vertical; min-height:120px; }
.submit-btn{ 
  width:100%; padding:18px; background: linear-gradient(135deg, var(--color-primary), var(--color-tertiary));
  border:none; border-radius:50px; color:#fff; font-size:18px; font-weight:700; cursor:pointer; transition: all var(--transition-medium); margin-top:32px;
  box-shadow: 0 8px 32px rgba(0,100,255,.3);
}
.submit-btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 48px rgba(0,100,255,.4); }

/* ===== Footer ===== */
.footer{ background: var(--color-bg-tertiary); padding:80px 0 30px; border-top: 1px solid rgba(255,255,255,.08); }
.footer-content{ display:grid; grid-template-columns: 1fr 2fr; gap:80px; margin-bottom:50px; padding-bottom:50px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-logo{ font-size:48px; font-weight:800; color:#fff; margin-bottom:12px; letter-spacing:-.02em; }
.footer-tagline{ font-size:16px; color: rgba(255,255,255,.7); font-weight:500; letter-spacing:-.01em; }
.footer-info{ display:grid; grid-template-columns: repeat(2, 1fr); gap:16px 40px; align-items:start; }
.footer-info-item{ 
  display:grid; grid-template-columns:110px 1fr; gap:8px; align-items:start; text-align:left;
  font-size:15px; line-height:1.6; color: rgba(255,255,255,.85);
}
.footer-info-item.footer-info-company{ grid-column: 1 / -1; display:block; }
.footer-info-item strong{ color:#fff; font-weight:700; display:block; margin-bottom:4px; font-size:16px; }
.footer-info-item span{ color:#dfe6fb; font-size:13px; font-weight:700; }
.footer-info-address .addr{ color: rgba(255,255,255,.85); font-weight: 500; white-space: nowrap; }
.footer-bottom{ text-align:center; color: rgba(255,255,255,.4); font-size:14px; }

/* ===== Toast ===== */
.toast{
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  min-width: 280px; max-width: 92vw; padding: 14px 16px; border-radius: 10px;
  background: rgba(30, 30, 30, .92); color: #fff; font-size: 15px; line-height: 1.45;
  box-shadow: 0 6px 24px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: .25s; z-index: 10000;
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success{ background: rgba(24,158,95,.95); }
.toast.error{ background: rgba(220,76,70,.95); }

/* ===== Scroll to Top ===== */
.scroll-to-top{ 
  position:fixed; bottom:30px; right:30px; width:60px; height:60px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); border:none; border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; z-index:1000;
  opacity:0; visibility:hidden; transform: translateY(20px); transition: all var(--transition-medium);
  box-shadow: 0 8px 32px rgba(0,100,255,.3);
}
.scroll-to-top.visible{ opacity:1; visibility:visible; transform: translateY(0); }
.scroll-to-top:hover{ transform: translateY(-4px) scale(1.1); box-shadow: 0 12px 48px rgba(0,100,255,.4); background: linear-gradient(135deg, var(--color-secondary), var(--color-tertiary)); }
.scroll-to-top::before{ content:'↑'; font-weight:900; font-size:28px; }

/* ===== Language links underline reset ===== */
.lang-menu .lang-list a.lang-item,
.mobile-nav .mobile-lang a.mobile-lang-btn{ text-decoration:none; }

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .req-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:22px; }
  .req-card:nth-child(2n)::after{ display:none; }
  .req-card:nth-child(4n)::after{ display:block; }
}

@media (max-width: 992px){
  .nav, .lang-menu{ display:none; }
  .mobile-menu-toggle{ display:flex; }

  .solution-item{ grid-template-columns:1fr; gap:40px; }
  .solution-text-container{ order:1; }
  .solution-icon-container{ order:2; }
  .solution-icon-image{
    background-size: 85% auto;
  }

  .problem-item-horizontal{ grid-template-columns:1fr; gap:30px; }
  .problem-item-horizontal:nth-child(even){ direction:ltr; }
  .illustration-side{ height:250px; }
  .problem-content-horizontal{ padding:30px 25px; }
  .problem-stats-horizontal{ flex-direction:column; gap:12px; }

  .footer{ padding:60px 0 30px; }
  .footer-content{ grid-template-columns:1fr; gap:40px; margin-bottom:40px; padding-bottom:40px; }
  .footer-logo{ font-size:40px; }
  .footer-tagline{ text-align:center; }
  .footer-info{ grid-template-columns:1fr; gap:14px; }
  .footer-info-item{ grid-template-columns:110px 1fr; }

  .saas-flow-grid{ grid-template-columns: 1fr 1fr; }
  .pricing-2grid{ grid-template-columns:1fr; max-width:680px; }

  .fullwidth-content { left: 5%; width: 60%; max-width: none; }
}

@media (max-width: 768px){
  .section{ padding:80px 0; }

  .hero-section{ min-height:600px; padding-top: calc(var(--headerBaseH) + 20px); }
  .hero-title{ font-size: clamp(2.8rem, 9vw, 3.8rem); line-height: 1.05; margin-bottom: 1.5rem; }
  .hero-subtitle{ font-size: clamp(1.1rem, 4.5vw, 1.35rem); margin-bottom: 2rem; line-height: 1.5; }
  .hero-cta{ flex-direction:column; align-items:center; }
  .btn{ width:100%; max-width:300px; padding: 1.1rem 2rem; font-size: 0.95rem; }
  .section-header{ margin-bottom:60px; }
  .section-tag{ font-size: 13px; padding: 7px 18px; }
  .section-title{ font-size: clamp(28px, 7vw, 42px); }
  .section-subtitle{ font-size: clamp(15px, 3.5vw, 18px); }

  .hero--left .hero-content{
    position:relative; top:auto; left:auto; transform:none; margin:0 auto; text-align:center; padding:0 1.25rem; max-width:min(720px, 92vw);
  }
  .hero--left .hero-cta{ justify-content:center; }
  .hero--left .hero-title{ font-size: clamp(2.2rem, 7.5vw, 3.2rem); line-height: 1.15; margin-bottom: 1.1rem; }
  .hero--left .hero-subtitle{ font-size: clamp(1rem, 4.2vw, 1.2rem); margin-bottom: 1.5rem; }
  .hero--left .hero-background video{ object-position: 70% center; }

  .problem-title-horizontal{ font-size:26px; }
  .solution-title-zigzag{ font-size: clamp(26px, 5.5vw, 32px); }
  .solution-description-zigzag{ font-size:17px; margin-bottom: 35px; }
  .highlight-value{ font-size:26px; }
  .demo-video-title{ font-size: 22px; }
  .saas-title{ font-size: 19px; }
  .saas-sub{ font-size: 15px; }
  .saas-foot{ font-size: 15px; padding: 13px 15px; }

  .form-grid{ grid-template-columns:1fr; }
  .contact-form{ padding:40px 30px; }

  .solution-icon-image{
    background-size: 85% auto;
  }


  .requirements-section{ padding: 90px 0 80px; }
  .requirements-title{ font-size: clamp(26px, 6vw, 40px); }
  .requirements-sub{ font-size: clamp(15px, 3vw, 17px); }
  .req-grid{ grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }

  .pricing-2grid{ grid-template-columns: 1fr; }
  .price-title{ font-size: clamp(24px, 3vw, 28px); }
  .price-value{ font-size: clamp(22px, 6vw, 40px); }
  .price-unit{ font-size: clamp(14px, 2vw, 16px); }

  .parallax-title{ font-size: clamp(28px, 6.5vw, 44px); }
  .parallax-subtitle{ font-size: clamp(16px, 3vw, 19px); }

  .fullwidth-content { left: 50%; transform: translate(-50%, -50%); text-align: center; width: 90%; }
  .fullwidth-title { font-size: clamp(22px, 6vw, 40px); }
  .fullwidth-subtitle { font-size: clamp(14px, 4vw, 18px); }

  br { display: none; }         /* 모바일: 과도한 줄바꿈 방지 */
  .hero-title br { display: inline; }
}

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

@media (max-width: 480px){
  .section{ padding:60px 0; }
  .hero-section{ min-height:500px; padding-top: calc(var(--headerBaseH) + 15px); }
  .hero-title{ font-size: clamp(2.4rem, 9vw, 3.2rem); line-height: 1.15; margin-bottom: 1.3rem; }
  .hero-subtitle{ font-size: clamp(1rem, 4vw, 1.2rem); margin-bottom: 1.8rem; }
  .btn{ padding: 1rem 2rem; font-size: 0.9rem; }
  .section-tag{ font-size: 12px; padding: 6px 16px; }
  .section-title{ font-size: clamp(26px, 7vw, 38px); }
  .section-subtitle{ font-size: clamp(14px, 3.5vw, 17px); }

  .illustration-side{ height:180px; }
  .problem-content-horizontal{ padding:22px 18px; }
  .solution-icon-image{ width:280px; height:280px; }
  .tech-showcase-section{ min-height: 58vh; padding:40px 0; }
  .tech-stack-container{ height: clamp(380px, 50vh, 620px); }
  .tech-stack-center{ width:250px; height:250px; }
  .tech-tag{ font-size:14px; padding:9px 14px; }
  .slogan-main{ font-size: clamp(22px, 5.5vw, 32px); }
  .slogan-sub{ font-size: clamp(13px, 2vw, 16px); }

  .saas-title{ font-size: 18px; }
  .saas-sub{ font-size: 14px; }
  .saas-foot{ font-size: 14px; padding: 12px 14px; }

  .requirements-title{ font-size: clamp(24px, 6vw, 36px); }
  .req-title{ font-size: 18px; }
  .req-note{ font-size: 13px; }

  .price-title{ font-size: clamp(22px, 3vw, 26px); }
  .price-value{ font-size: clamp(20px, 6vw, 38px); }
  .price-unit{ font-size: clamp(13px, 2vw, 15px); }

  .form-label{ font-size: 15px; }
  .form-input,.form-textarea{ font-size: 15px; padding: 14px; }
  .submit-btn{ font-size: 16px; padding: 16px; }

  .scroll-to-top{ width:50px; height:50px; bottom:20px; right:20px; }
  .scroll-to-top::before{ font-size:24px; }

  .footer{ padding:40px 0 20px; }
  .footer-content{ gap:25px; margin-bottom:25px; padding-bottom:25px; }
  .footer-logo{ font-size:32px; }
  .footer-tagline{ font-size:14px; }
  .footer-info{ gap:10px; max-width:340px; margin:0 auto; }
  .footer-info-item{ font-size:13px; grid-template-columns: 94px 1fr; }
  .footer-info-item strong{ font-size:14px; }
  .footer-info-item span{ font-size:11px; color:#dfe6fb; }
  .footer-bottom{ font-size:12px; padding:0 10px; line-height:1.5; }

  /* 주소는 모바일에서 줄바꿈 허용 */
  .footer-info-address .addr { white-space: normal; word-break: keep-all; }
}

/* 데스크톱(마우스)에서만 hover 효과 유지 */
@media (hover: hover) and (pointer: fine){
  .solution-item:hover .solution-icon-image{
    transform: translateY(-10px) scale(1.05);
  }
}

/* 터치 환경에선 강제로 안정화 */
@media (hover: none), (pointer: coarse){
  .solution-item:hover .solution-icon-image{
    transform: none !important;
  }
}


/* 데스크톱 기본(약간 오른쪽) */
.hero-background video { object-position: 62% center; }

/* 태블릿 */
@media (max-width: 992px){
  .hero-background video { object-position: 66% center; }
}

/* 모바일 - 피사체가 오른쪽이면 더 당겨줌 */
@media (max-width: 768px){
  .hero-background video { object-position: 70% center; }
}