/* ============================================
   Direct Research Korea — Page Styles
   Monochrome: White, Black, Gray
   ============================================ */

/* ===== HERO ===== */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding-top:var(--space-20); background:var(--color-white); }
.hero__bg { position:absolute; inset:0; background:var(--gradient-hero); z-index:-2; }
.hero__bg::after { content:''; position:absolute; top:-50%;right:-30%; width:800px;height:800px; border-radius:50%; background:radial-gradient(circle,rgba(0,0,0,0.02) 0%,transparent 70%); animation:heroGlow 8s ease-in-out infinite alternate; }
@keyframes heroGlow { 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(-50px,30px) scale(1.1);} }

.hero__particles { position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero__particle { position:absolute; width:2px;height:2px; background:var(--color-gray-400); border-radius:50%; opacity:0.15; animation:particleFloat 15s linear infinite; }
@keyframes particleFloat { 0%{transform:translateY(100vh);opacity:0;} 10%{opacity:0.15;} 90%{opacity:0.15;} 100%{transform:translateY(-100vh);opacity:0;} }

.hero__content { position:relative; z-index:1; }
.hero__label { display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); font-size:var(--text-xs); font-weight:600; letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--color-gray-600); background:var(--color-offwhite); border:1px solid var(--color-gray-200); border-radius:var(--radius-full); margin-bottom:var(--space-8); }
.hero__label-dot { width:6px;height:6px; background:var(--color-black); border-radius:50%; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

.hero__title { font-family:var(--font-heading); font-size:var(--text-7xl); font-weight:800; line-height:1.05; letter-spacing:-0.03em; margin-bottom:var(--space-8); max-width:800px; color:var(--color-black); }
.hero__subtitle { font-size:var(--text-xl); color:var(--color-gray-500); line-height:var(--leading-relaxed); max-width:600px; margin-bottom:var(--space-10); }
.hero__actions { display:flex; gap:var(--space-4); align-items:center; flex-wrap:wrap; }

.hero__scroll-indicator { position:absolute; bottom:var(--space-10); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:var(--space-2); color:var(--color-gray-400); font-size:var(--text-xs); letter-spacing:var(--tracking-wider); animation:scrollBounce 2s ease-in-out infinite; }
@keyframes scrollBounce { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(8px);} }
.hero__scroll-line { width:1px; height:40px; background:linear-gradient(to bottom,var(--color-gray-400),transparent); }

/* ===== IDENTITY ===== */
.identity { position:relative; overflow:hidden; }
.identity__grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16); align-items:center; }
.identity__card { position:relative; padding:var(--space-10); background:var(--color-white); border:1px solid var(--color-gray-200); border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-md); }
.identity__card::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; background:var(--color-black); }
.identity__avatar { width:80px;height:80px; border-radius:var(--radius-xl); background:var(--color-black); display:flex;align-items:center;justify-content:center; font-family:var(--font-heading); font-size:var(--text-2xl); font-weight:800; color:var(--color-white); margin-bottom:var(--space-6); }
.identity__avatar img { width:100%;height:100%;object-fit:cover;border-radius:var(--radius-xl); }
.identity__name { font-family:var(--font-heading); font-size:var(--text-3xl); font-weight:700; margin-bottom:var(--space-2); color:var(--color-black); }
.identity__role { font-size:var(--text-base); color:var(--color-gray-600); margin-bottom:var(--space-6); }
.identity__detail { display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-3) 0; font-size:var(--text-sm); color:var(--color-gray-600); }
.identity__detail-icon { color:var(--color-black); flex-shrink:0; margin-top:2px; }
.identity__tagline { margin-top:var(--space-8); padding:var(--space-4) var(--space-6); background:var(--color-offwhite); border-left:3px solid var(--color-black); border-radius:0 var(--radius-md) var(--radius-md) 0; font-style:italic; color:var(--color-gray-700); font-size:var(--text-lg); }

/* ===== WHAT WE DO ===== */
.whatwedo__intro { max-width:800px; margin:0 auto var(--space-16); text-align:center; }
.whatwedo__text { font-size:var(--text-lg); color:var(--color-gray-600); line-height:var(--leading-relaxed); }

/* ===== INSIGHTS PREVIEW ===== */
.insights-preview__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-12); }
.insights-preview__list { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-8); }

/* ===== STATS ===== */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-8); padding:var(--space-12) 0; border-top:1px solid var(--color-gray-200); border-bottom:1px solid var(--color-gray-200); }

/* ===== ABOUT ===== */
.about-hero { padding-top:calc(var(--space-32) + var(--space-8)); padding-bottom:var(--space-16); text-align:center; }
.about-hero__title { margin-bottom:var(--space-6); }
.about-hero__desc { max-width:700px; margin:0 auto; font-size:var(--text-xl); color:var(--color-gray-500); line-height:var(--leading-relaxed); }
.team-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-8); }
.team-card { padding:var(--space-8); background:var(--color-white); border:1px solid var(--color-gray-200); border-radius:var(--radius-xl); text-align:center; transition:all var(--transition-normal); }
.team-card:hover { border-color:var(--color-border-hover); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.team-card__avatar { width:100px;height:100px; border-radius:50%; margin:0 auto var(--space-6); background:var(--color-offwhite); display:flex;align-items:center;justify-content:center; font-family:var(--font-heading); font-size:var(--text-3xl); font-weight:800; color:var(--color-gray-600); overflow:hidden; }
.team-card__avatar img { width:100%;height:100%;object-fit:cover; }
.team-card__name { font-family:var(--font-heading); font-size:var(--text-xl); font-weight:600; margin-bottom:var(--space-2); color:var(--color-black); }
.team-card__title { font-size:var(--text-sm); color:var(--color-gray-500); margin-bottom:var(--space-4); }
.team-card__bio { font-size:var(--text-sm); color:var(--color-gray-500); line-height:var(--leading-relaxed); }

/* ===== SERVICES ===== */
.services-hero { padding-top:calc(var(--space-32) + var(--space-8)); padding-bottom:var(--space-16); text-align:center; }
.services-hero__content { max-width:800px; margin:0 auto; }
.services-hero__title { margin-bottom:var(--space-6); }
.services-hero__desc { font-size:var(--text-xl); color:var(--color-gray-500); line-height:var(--leading-relaxed); }
.methodology__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-8); }
.method-card { padding:var(--space-6); background:var(--color-white); border:1px solid var(--color-gray-200); border-radius:var(--radius-lg); transition:all var(--transition-normal); }
.method-card:hover { border-color:var(--color-border-hover); box-shadow:var(--shadow-sm); }
.method-card__title { font-family:var(--font-heading); font-size:var(--text-base); font-weight:600; color:var(--color-black); margin-bottom:var(--space-2); }
.method-card__desc { font-size:var(--text-sm); color:var(--color-gray-500); line-height:var(--leading-normal); }
.industries__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-8); }
.industry-section__title { font-family:var(--font-heading); font-size:var(--text-xl); font-weight:600; color:var(--color-black); margin-bottom:var(--space-6); display:flex; align-items:center; gap:var(--space-3); }
.industry-list { display:flex; flex-direction:column; gap:var(--space-3); }
.industry-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); font-size:var(--text-sm); color:var(--color-gray-600); background:var(--color-white); border-radius:var(--radius-md); border:1px solid transparent; transition:all var(--transition-fast); }
.industry-item:hover { border-color:var(--color-gray-200); box-shadow:var(--shadow-sm); }
.industry-item__dot { width:6px;height:6px; background:var(--color-black); border-radius:50%; flex-shrink:0; }

/* ===== INSIGHTS ===== */
.insights-hero { padding-top:calc(var(--space-32) + var(--space-8)); padding-bottom:var(--space-12); text-align:center; }
.insights-hero__title { margin-bottom:var(--space-4); }
.insights-hero__desc { font-size:var(--text-lg); color:var(--color-gray-500); max-width:600px; margin:0 auto; }
.insights-filter { display:flex; flex-wrap:wrap; gap:var(--space-2); padding-bottom:var(--space-8); border-bottom:1px solid var(--color-gray-200); margin-bottom:var(--space-8); }
.insights-filter__btn { padding:var(--space-2) var(--space-4); font-size:var(--text-sm); font-weight:500; color:var(--color-gray-500); background:transparent; border:1px solid var(--color-gray-200); border-radius:var(--radius-full); cursor:pointer; transition:all var(--transition-fast); }
.insights-filter__btn:hover,.insights-filter__btn.active { color:var(--color-black); border-color:var(--color-black); background:var(--color-accent-glow); }
.insights-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-8); }

/* ===== CONTACT ===== */
.contact-hero { padding-top:calc(var(--space-32) + var(--space-8)); padding-bottom:var(--space-12); text-align:center; }
.contact__grid { display:grid; grid-template-columns:1.2fr 0.8fr; gap:var(--space-12); align-items:start; }
.contact__form-card { padding:var(--space-10); background:var(--color-white); border:1px solid var(--color-gray-200); border-radius:var(--radius-2xl); box-shadow:var(--shadow-md); }
.contact__form-title { font-family:var(--font-heading); font-size:var(--text-2xl); font-weight:600; margin-bottom:var(--space-2); color:var(--color-black); }
.contact__form-subtitle { font-size:var(--text-sm); color:var(--color-gray-400); margin-bottom:var(--space-8); }
.contact__info { display:flex; flex-direction:column; gap:var(--space-8); }
.contact__info-card { padding:var(--space-8); background:var(--color-white); border:1px solid var(--color-gray-200); border-radius:var(--radius-xl); transition:all var(--transition-fast); }
.contact__info-card:hover { box-shadow:var(--shadow-md); }
.contact__info-icon { width:48px;height:48px; display:flex;align-items:center;justify-content:center; background:var(--color-offwhite); border-radius:var(--radius-lg); color:var(--color-black); font-size:var(--text-xl); margin-bottom:var(--space-4); }
.contact__info-title { font-family:var(--font-heading); font-size:var(--text-lg); font-weight:600; margin-bottom:var(--space-2); color:var(--color-black); }
.contact__info-text { font-size:var(--text-sm); color:var(--color-gray-500); line-height:var(--leading-relaxed); }

/* ===== 404 ===== */
.error-page { min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; }
.error-page__code { font-family:var(--font-heading); font-size:10rem; font-weight:800; color:var(--color-gray-200); line-height:1; }
.error-page__title { font-family:var(--font-heading); font-size:var(--text-3xl); font-weight:600; margin-bottom:var(--space-4); color:var(--color-black); }
.error-page__desc { color:var(--color-gray-500); margin-bottom:var(--space-8); }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
  .hero__title { font-size:var(--text-5xl); }
  .identity__grid { grid-template-columns:1fr;gap:var(--space-8); }
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .insights-preview__list { grid-template-columns:repeat(2,1fr); }
  .contact__grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .hero { min-height:auto;padding-top:var(--space-32);padding-bottom:var(--space-16); }
  .hero__title { font-size:var(--text-4xl); }
  .hero__subtitle { font-size:var(--text-base); }
  .hero__scroll-indicator { display:none; }
  .stats-row { grid-template-columns:repeat(2,1fr);gap:var(--space-4); }
  .insights-preview__list { grid-template-columns:1fr; }
  .insights-preview__header { flex-direction:column;align-items:flex-start;gap:var(--space-4); }
  .team-grid,.methodology__grid,.industries__grid,.insights-grid { grid-template-columns:1fr; }
  .insights-filter { overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none; }
  .insights-filter::-webkit-scrollbar { display:none; }
  .insights-filter__btn { flex-shrink:0; }
  .contact__form-card { padding:var(--space-6); }
}


@media (max-width: 768px) { .hero__inner { grid-template-columns: 1fr !important; } .hero__image { display: none; } }
.hero__carousel {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}
.hero__carousel-track {
  display: flex;
  height: 100%;
  animation: scroll-left 40s linear infinite;
  gap: 24px;
  width: max-content;
}
.hero__carousel-track:hover {
  animation-play-state: paused;
}
.hero__carousel-track img {
  width: 380px;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-380px * 8 - 24px * 8)); }
}
