/* =========================================================
   DB HiTek - 메인 페이지 전용 스타일
   ========================================================= */

/* Hero slider */
.hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; background: #000; color: var(--white); }
.hero .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.2s var(--ease), visibility 1.2s; }
.hero .slide.active { opacity: 1; visibility: visible; }
.hero .slide video { width: 100%; height: 100%; object-fit: cover; }
.hero .slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .1) 70%); }
.hero .txt { position: absolute; z-index: 2; left: 0; right: 0; bottom: 22vh; }
.hero h2 {
  font-size: clamp(34px, 5.4vw, 76px); font-weight: 800; line-height: 1.18; letter-spacing: -.025em;
  opacity: 0; transform: translateX(60px); transition: all 1.2s var(--ease) .3s;
}
.hero .btn { margin-top: 40px; opacity: 0; transform: translateX(30px); transition: all 1.2s var(--ease) .5s, background .25s, color .25s; }
.hero .slide.active h2, .hero .slide.active .btn { opacity: 1; transform: none; }

.hero-ctrl { position: absolute; z-index: 5; left: 0; right: 0; bottom: 60px; }
.hero-ctrl .container { display: flex; align-items: center; gap: 24px; }
.hero-ctrl .bars { display: flex; gap: 10px; }
.hero-ctrl .bars button { width: 70px; height: 3px; background: rgba(255, 255, 255, .3); position: relative; overflow: hidden; padding: 0; }
.hero-ctrl .bars button i { position: absolute; inset: 0; background: var(--white); transform: scaleX(0); transform-origin: left; }
.hero-ctrl .bars button.done i { transform: scaleX(1); }
.hero-ctrl .count { font-size: 14px; font-weight: 600; letter-spacing: .1em; }
.hero-ctrl .arrows { display: flex; gap: 8px; margin-left: auto; }
.hero-ctrl .arrows button, .hero-ctrl .pause {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); color: var(--white);
  display: grid; place-items: center; transition: all .25s;
}
.hero-ctrl .arrows button:hover, .hero-ctrl .pause:hover { background: var(--white); color: var(--black); }
.hero-ctrl .outlink { margin-left: 16px; }

/* Business */
.business { padding: 140px 0 0; }
.biz-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }
.biz-box { position: relative; border-radius: var(--radius); overflow: hidden; color: var(--white); padding: 50px; display: flex; flex-direction: column; justify-content: flex-end; }
.biz-box .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .8s var(--ease); }
.biz-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.biz-box::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .6)); z-index: 1; }
.biz-box > *:not(.bg):not(video) { position: relative; z-index: 2; }
.biz-box:hover .bg { transform: scale(1.05); }
.biz-box h3 { font-size: clamp(30px, 3.2vw, 46px); font-weight: 800; letter-spacing: -.02em; }
.biz-box p { margin-top: 12px; font-size: 17px; opacity: .9; }
.biz-tech { min-height: 640px; }
.biz-tech .chips { margin-top: 30px; }
.biz-tech .chip { background: rgba(255, 255, 255, .15); color: var(--white); backdrop-filter: blur(6px); transition: all .2s; }
.biz-tech .chip:hover { background: var(--white); color: var(--green); }
.biz-right { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; }
.biz-right .biz-box { min-height: 308px; }
.biz-right .biz-box h3 { font-size: clamp(26px, 2.4vw, 34px); }
.biz-right .biz-box .go { position: absolute; top: 40px; right: 40px; z-index: 2; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); display: grid; place-items: center; transition: all .3s; }
.biz-right .biz-box:hover .go { background: var(--white); color: var(--green); }

.loop-text { overflow: hidden; white-space: nowrap; padding: 70px 0 120px; }
.loop-text .track { display: inline-block; animation: loop 28s linear infinite; }
.loop-text span { font-size: clamp(60px, 10vw, 160px); font-weight: 800; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px #c8ccd0; padding-right: 60px; }
.loop-text span:nth-child(even) { color: var(--green-pale); -webkit-text-stroke: 0; }
@keyframes loop { to { transform: translateX(-50%); } }

/* Investors */
.investors { position: relative; padding: 140px 0; color: var(--white); overflow: hidden; }
.investors .bg { position: absolute; inset: 0; }
.investors .bg video { width: 100%; height: 100%; object-fit: cover; }
.investors .bg::after { content: ''; position: absolute; inset: 0; background: rgba(0, 20, 12, .55); }
.investors .container { position: relative; z-index: 2; }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 50px; flex-wrap: wrap; }
.head-row h2 { font-size: clamp(32px, 4vw, 56px); font-weight: 800; letter-spacing: -.02em; }
.inv-grid { display: grid; grid-template-columns: 1fr 1fr 0.8fr; gap: 20px; }
.inv-box {
  padding: 44px 40px; border-radius: var(--radius); background: rgba(255, 255, 255, .1); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .15); min-height: 300px; display: flex; flex-direction: column; transition: all .35s var(--ease);
}
.inv-box:hover { background: var(--white); color: var(--gray-900); transform: translateY(-6px); }
.inv-box img { width: 56px; height: 56px; margin-bottom: auto; }
.inv-box:hover img { filter: invert(36%) sepia(88%) saturate(1500%) hue-rotate(130deg) brightness(.75); }
.inv-box h3 { font-size: 26px; font-weight: 700; margin-top: 40px; }
.inv-box p { margin-top: 8px; opacity: .85; }
.inv-links { display: flex; flex-direction: column; gap: 12px; }
.inv-links a {
  flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); font-size: 19px; font-weight: 600; transition: all .25s;
}
.inv-links a::after { content: '→'; }
.inv-links a:hover { background: var(--green); border-color: var(--green); }

/* ESG accordion */
.esg { display: flex; height: 760px; background: #000; color: var(--white); }
.esg-item { position: relative; flex: 1; overflow: hidden; cursor: pointer; transition: flex 1s var(--ease); border-right: 1px solid rgba(255, 255, 255, .12); }
.esg-item.active { flex: 4.5; cursor: default; }
.esg-item .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.4s var(--ease); transform: scale(1.1); }
.esg-item.active .bg { transform: scale(1); }
.esg-item::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); transition: background .6s; }
.esg-item.active::after { background: linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .25)); }
.esg-item .tab-title {
  position: absolute; z-index: 2; left: 50%; bottom: 60px; transform: translateX(-50%) rotate(-90deg); transform-origin: center;
  white-space: nowrap; font-size: 28px; font-weight: 700; transition: opacity .4s;
}
.esg-item.active .tab-title { opacity: 0; }
.esg-item .cont { position: absolute; z-index: 2; inset: 0; padding: 90px 70px; display: flex; flex-direction: column; opacity: 0; transition: opacity .6s .3s; min-width: 760px; }
.esg-item.active .cont { opacity: 1; }
.esg-item .cont .label { font-size: 16px; font-weight: 600; opacity: .8; }
.esg-item .cont h3 { font-size: clamp(40px, 4.4vw, 64px); font-weight: 800; margin-top: 10px; }
.esg-item .cont .desc { font-size: 20px; margin-top: 10px; opacity: .9; }
.esg-item .cont .btn { margin-top: 26px; align-self: flex-start; }
.esg-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: auto; }
.esg-figures li { padding: 28px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .15); }
.esg-figures .num { font-size: 52px; font-weight: 800; line-height: 1; color: #8dc540; }
.esg-figures .num small { font-size: 24px; margin-left: 2px; }
.esg-figures .num .arr { font-size: 26px; margin-left: 6px; }
.esg-figures img { width: 56px; height: 52px; object-fit: contain; }
.esg-figures p { margin-top: 18px; font-size: 15px; opacity: .9; line-height: 1.6; }

/* News */
.media-sec { padding: 140px 0; }
.news-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-card {
  display: flex; flex-direction: column; padding: 40px 36px; border-radius: var(--radius); background: var(--gray-100);
  min-height: 340px; transition: all .35s var(--ease);
}
.news-card:hover { background: var(--green); color: var(--white); transform: translateY(-6px); }
.news-card .tag { font-size: 13px; font-weight: 700; color: var(--green); letter-spacing: .06em; }
.news-card:hover .tag { color: #c8eaa0; }
.news-card .tit { font-size: 21px; font-weight: 700; margin-top: 14px; line-height: 1.45; }
.news-card .txt { margin-top: 14px; font-size: 15px; color: var(--gray-700); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card:hover .txt { color: rgba(255, 255, 255, .85); }
.news-card .date { margin-top: auto; padding-top: 24px; font-size: 14px; color: var(--gray-500); }
.news-card:hover .date { color: rgba(255, 255, 255, .75); }

/* Responsive */
@media (max-width: 1024px) {
  .biz-grid { grid-template-columns: 1fr; }
  .biz-tech { min-height: 520px; }
  .inv-grid { grid-template-columns: 1fr 1fr; }
  .inv-links { grid-column: span 2; flex-direction: row; }
  .inv-links a { padding: 22px 24px; }
  .esg { flex-direction: column; height: auto; }
  .esg-item, .esg-item.active { flex: none; }
  .esg-item { height: 90px; }
  .esg-item.active { height: auto; min-height: 720px; }
  .esg-item .tab-title { transform: translate(-50%, 0); bottom: auto; top: 28px; font-size: 22px; }
  .esg-item .cont { min-width: 0; padding: 60px 30px; position: relative; }
  .esg-item:not(.active) .cont { display: none; }
  .news-cards { grid-template-columns: 1fr; }
  .news-card { min-height: 0; }
}
@media (max-width: 768px) {
  .hero .txt { bottom: 26vh; }
  .hero-ctrl .bars button { width: 40px; }
  .hero-ctrl .outlink { display: none; }
  .business { padding-top: 80px; }
  .biz-box { padding: 32px; }
  .inv-grid { grid-template-columns: 1fr; }
  .inv-links { grid-column: auto; flex-direction: column; }
  .inv-box { min-height: 240px; }
  .esg-figures { grid-template-columns: 1fr; }
  .esg-figures .num { font-size: 40px; }
  .investors, .media-sec { padding: 90px 0; }
  .loop-text { padding: 50px 0 80px; }
}