/* FONT & RESET */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,800;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800&display=swap');

:root {
  /*--- Brand Colors ---*/
  --primary-web: #22a3de;    /* GLOWEB Signature Blue */
  --kick-orange: #FF4500;    /* Accent */
  --dark-navy: #0F2540;      /* Dark Text */
  --text-body: #333333;
  --text-gray: #666666;

  /* Light BG helper (✅ 기존 코드에 없어서 추가) */
  /*--bg-light: #f6f8fb;*/

  /*--- Fonts ---*/
  --font-serif: 'Playfair Display', serif;     /* Hero Title */
  --font-sans: 'Pretendard', sans-serif;       /* Body */
  --font-mont: 'Montserrat', sans-serif;       /* Eng Headings */

  --container: 1320px;

  /* ✅ 반응형 스케일 */
  --pad-desktop: 40px;
  --pad-tablet: 24px;
  --pad-mobile: 18px;

  --radius: 6px;
}

/* ✅ RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ✅ AOS/transform로 가로 오버플로우 생기는 “밀림” 방지 */
html, body { overflow-x: clip; } /* hidden보다 clip이 더 안전(가로 스크롤 방지) */

body {
  font-family: var(--font-sans);
  color: var(--text-body);
  background-color: #ffffff;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
img { width: 100%; display: block; max-width: 100%; height: auto; }

/* ✅ AOS 요소가 translate로 튀어나오며 overflow 만드는 케이스 방지 */
[data-aos] {
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, opacity;
  max-width: 100%;
}

/* UTILITY */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-desktop);
}
.section-padding { padding: 140px 0; }
.bg-gray { background-color: #F8F9FA; }

/* Typography */
.big-heading {
  font-family: var(--font-serif);
  font-size: 52px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--dark-navy);
  margin-bottom: 30px;
}

/* ✅ 라벨은 모바일에서 줄바꿈/오버플로우 방지 */
.section-label {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary-web);
  margin-bottom: 20px;
  position: relative;
  white-space: normal;
}
.section-label::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--kick-orange);
  margin-top: 8px;
}

/*--- HEADER ---*/
header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  padding: 20px 0; transition: 0.4s;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.header-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; }

/* 우측 요소 정렬용 (GNB + 다국어 + 모바일버튼) */
.header-right { display: flex; align-items: center; gap: 30px; }

.logo {
  font-family: var(--font-mont, 'Montserrat', sans-serif);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 1px;
  color: var(--dark-navy, #111);
  flex-shrink: 0;
  text-decoration: none;
}
.logo img {height:35px; width:auto}

.gnb { display: flex; gap: 50px; list-style: none; padding: 0; margin: 0; }
.gnb a {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark-navy, #111);
  text-transform: uppercase;
  position: relative;
  padding: 8px 2px;
  text-decoration: none;
}
.gnb a:hover { color: var(--primary-web, #0056b3); }
.gnb a.active { color: var(--primary-web, #0056b3); font-weight: 700; }
.gnb a.active::after {
  content:'';
  display:block;
  height:2px;
  background: var(--primary-web, #0056b3);
  margin-top:6px;
}
.gnb a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0; /* 텍스트 패딩 하단에 딱 맞춤 */
  width: 100%;
  height: 2px;
  background: var(--primary-web, #0056b3);
  opacity: 0; /* 평소에는 투명하게 숨김 */
  transition: opacity 0.3s ease; /* 부드럽게 나타나는 효과 (선택사항) */
}
.gnb a.active::after {
  opacity: 1; /* 활성화 시 나타남 */
}
/*--- Language Selector ---*/
.lang-selector {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lang-selector .divider {
  color: #ddd;
  font-size: 14px;
}
.lang-btn {
  font-size: 13px;
  font-weight: 500;
  color: #777;
  text-decoration: none;
  transition: all 0.3s ease;
  opacity: 0.6;
}
.lang-btn:hover {
  opacity: 1;
  color: var(--dark-navy, #111);
}
.lang-btn.active {
  opacity: 1;
  font-weight: 700;
  color: var(--primary-web, #0056b3);
}

/* Mobile Menu Trigger */
.menu-trigger { display: none; cursor: pointer; z-index: 1001; padding: 10px; }
.bar { width: 25px; height: 3px; background: #000; margin: 5px 0; transition: 0.4s; border-radius: 2px; }
.menu-trigger.active .bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.menu-trigger.active .bar:nth-child(2) { opacity: 0; }
.menu-trigger.active .bar:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }

/* Mobile Menu Wrap */
.mobile-menu {
  position: fixed; top: 0; right: -100%; width: 100%; height: 100vh;
  background: #fff; z-index: 999; transition: 0.5s ease;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 24px;
}
.mobile-menu.active { right: 0; }
.mobile-gnb { list-style: none; padding: 0; margin: 0; }
.mobile-gnb li { margin: 16px 0; text-align: center; }
.mobile-gnb a { font-size: 22px; font-weight: 800; color: #111; letter-spacing: 0.5px; text-decoration: none; }

/* 모바일 메뉴 내부 언어 선택기 전용 스타일 */
.mobile-lang {
  margin-bottom: 40px;
}
.mobile-lang .lang-btn {
  font-size: 16px;
}

/*--- Responsive (해상도에 따른 노출 처리) ---*/
@media (max-width: 1024px) {
  .gnb, .desktop-lang { display: none; }
  .menu-trigger { display: block; }
	.logo img {height:25px}
}
@media (min-width: 1025px) {
  .menu-trigger { display: none; }

}










/*--- HERO SECTION ---*/
.hero {
  height: 100vh; position: relative; display: flex; align-items: center; justify-content: center;
  background: #000; color: #fff; overflow: hidden;
}
.hero-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=90') center/cover;
  filter: grayscale(100%) contrast(1.2) brightness(0.6);
  transform: scale(1.05);
  animation: zoomAnim 20s infinite alternate;
}
@keyframes zoomAnim { to { transform: scale(1.15); } }

.hero-content { position: relative; z-index: 2; text-align: center; max-width: 1100px; padding: 0 20px; }
.hero-subtitle {
  font-size: 14px; text-transform: uppercase; letter-spacing: 4px;
  margin-bottom: 26px; opacity: 0.95; font-weight: 800; color: var(--primary-web);
}

/* ✅ hero-title: 100px 고정 → 모바일 자동 축소 */
.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(40px, 6.2vw, 100px);
  line-height: 1.08;
  margin-bottom: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.hero-desc {
  font-size: clamp(15px, 1.2vw, 20px);
  opacity: 0.85;
  max-width: 720px;
  margin: 0 auto 38px;
  font-weight: 300;
}

.hero-btn {
  display: inline-block;
  padding: 18px 42px;
  border: 1px solid rgba(255,255,255,0.9);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  transition: 0.3s;
  border-radius: var(--radius);
}
.hero-btn:hover { background: #fff; color: #000; }

.scroll-down {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  font-size: 12px; letter-spacing: 2px; animation: bounce 2s infinite; z-index: 3;
}
@keyframes bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } }

/*--- ABOUT (Split Layout) ---*/
.split-section { display: flex; flex-wrap: wrap; min-height: 85vh; }
.split-text {
  flex: 1; padding: 100px 80px;
  display: flex; flex-direction: column; justify-content: center;
  background: #fff;
}
.split-image {
  flex: 1;
  background: url('https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80') center/cover;
  min-height: 600px;
}
.about-desc { font-size: 18px; color: var(--text-gray); margin-bottom: 40px; max-width: 600px; line-height: 1.8; }

.stats-row {
  display: flex;
  gap: 60px;
  border-top: 1px solid #eee;
  padding-top: 40px;
  flex-wrap: wrap; /* ✅ 모바일 줄바꿈 허용 */
}
.stat-item { min-width: 140px; }
.stat-item h4 {
  font-family: var(--font-mont);
  font-size: 48px;
  font-weight: 800;
  color: var(--dark-navy);
  line-height: 1;
  margin-bottom: 10px;
}
.stat-item p { font-size: 14px; text-transform: uppercase; color: #999; letter-spacing: 1px; }

/*--- EXPERTISE ---*/
.service-list { margin-top: 60px; border-top: 2px solid var(--primary-web); }
.service-item {
  padding: 46px 0;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: flex-start;
  cursor: default;
  gap: 18px;
}
.service-num {
  font-family: var(--font-serif);
  font-size: 32px;
  color: #ddd;
  font-weight: 600;
  min-width: 54px;
  line-height: 1;
}
.service-info h3 {
  font-size: 28px; font-weight: 800; margin-bottom: 12px; color: var(--dark-navy);
}
.service-info p {
  font-size: 16px; color: var(--text-gray); max-width: 820px; line-height: 1.7;
}

/*--- SPECTRUM ---*/
.spectrum-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 60px; }
.spectrum-card {
  background: #fff;
  padding: 50px 30px;
  text-align: center;
  border: 1px solid #eee;
  transition: 0.3s;
  border-radius: var(--radius);
}
.spectrum-card:hover {
  transform: translateY(-10px);
  border-color: var(--primary-web);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.spec-icon { font-size: 40px; color: var(--primary-web); margin-bottom: 25px; }
.spectrum-card h4 { font-size: 18px; font-weight: 800; margin-bottom: 12px; }
.spectrum-card p { color: var(--text-gray); font-size: 14px; }

/*--- STANDARD (Dark Navy) ---*/
.standard-section { background: var(--dark-navy); color: #fff; }
.standard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px; margin-top: 80px; }
.std-card { border-top: 2px solid var(--kick-orange); padding-top: 30px; }
.std-card h3 { font-family: var(--font-serif); font-size: 28px; margin-bottom: 16px; color: #fff; }
.std-card p { opacity: 0.75; font-size: 16px; }

/*--- PLATFORM ---*/
.gogo-container { display: flex; gap: 80px; align-items: flex-start; }
.pathway-box {
  background: #fff;
  padding: 50px;
  border-radius: var(--radius);
  border: 1px solid #eee;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
  width: 100%;
}
.pathway-list { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.pathway-item { display: flex; align-items: center; gap: 12px; font-size: 16px; color: #555; }
.pathway-item i { color: var(--primary-web); }

/*--- FOOTER (Map + CTA) ---*/
.map-container {
  height: 600px;
  width: 100%;
  position: relative;
  background: #222;
  overflow: hidden; /* ✅ map도 안전하게 오버플로우 컷 */
}
.map-controls {
  position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
  z-index: 10;
  display: flex; gap: 10px;
  background: #fff;
  padding: 6px;
  border-radius: 50px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  max-width: calc(100% - 24px);
}
.map-btn {
  border: none; background: transparent;
  padding: 12px 28px;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.3s;
  color: #666;
  white-space: nowrap;
}
.map-btn.active { background: #000; color: #fff; }
.map-frame { width: 100%; height: 100%; border: 0; filter: grayscale(100%); }

.footer-cta {
  background: var(--kick-orange);
  padding: 80px 0;
  color: #fff;
}
.cta-flex { display: flex; justify-content: space-between; align-items: center; gap: 28px; }
.cta-title { font-family: var(--font-mont); font-size: 40px; font-weight: 900; line-height: 1.1; }
.cta-desc { font-size: 18px; margin-top: 10px; opacity: 0.95; }

.cta-btn {
  background: #000;
  color: #fff;
  padding: 18px 44px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: 0.3s;
  text-transform: uppercase;
  border-radius: var(--radius);
  white-space: nowrap;
}
.cta-btn:hover { background: #fff; color: #000; }

.copyright {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.2);
  font-size: 12px;
  opacity: 0.75;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* --- SUB PAGES & MODAL --- */
.sub-hero {
  height: 60vh; position: relative; display: flex; align-items: center; justify-content: center;
  background: #000; color: #fff; overflow: hidden;
}
.sub-hero-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover; background-position: center; opacity: 0.5;
  filter: grayscale(100%) contrast(1.1);
}
.sub-hero-content { position: relative; z-index: 2; text-align: center; padding: 0 18px; }
.sub-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(34px, 5vw, 60px);
  margin-bottom: 14px;
  font-weight: 800;
  line-height: 1.1;
}
.sub-hero-desc {
  font-size: 14px;
  opacity: 0.85;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary-web);
  font-weight: 800;
}

/* Modal */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: 0.3s;
  padding: 18px; /* ✅ 모바일에서 화면 밖으로 튀지 않게 */
}
.modal-overlay.active { display: flex; opacity: 1; }

.contact-modal {
  background: #fff;
  width: 100%;
  max-width: 600px;
  padding: 50px;
  border-radius: var(--radius);
  position: relative;
  transform: translateY(50px);
  transition: 0.4s;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal-overlay.active .contact-modal { transform: translateY(0); }

.modal-close {
  position: absolute; top: 16px; right: 16px;
  font-size: 26px;
  cursor: pointer;
  color: #999;
  transition: 0.3s;
}
.modal-close:hover { color: var(--kick-orange); }

.contact-form label {
  display: block; margin-bottom: 8px;
  font-weight: 800; font-size: 14px;
  color: var(--dark-navy);
}
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 14px 14px;
  border: 1px solid #ddd;
  margin-bottom: 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
  transition: 0.3s;
  border-radius: var(--radius);
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--primary-web); }
.contact-form textarea { height: 150px; resize: none; }

.contact-submit {
  width: 100%;
  background: var(--dark-navy);
  color: #fff;
  padding: 16px;
  border: none;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.3s;
  border-radius: var(--radius);
}
.contact-submit:hover { background: var(--primary-web); }

/* About Page Specifics */
.intro-text { font-size: 18px; font-weight: 300; line-height: 1.8; color: var(--text-gray); }

/* Attitude Grid */
.attitude-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px; }
.attitude-card {
  padding: 40px;
  background: #fff;
  border: 1px solid #eee;
  transition: 0.3s;
  border-top: 3px solid transparent;
  border-radius: var(--radius);
}
.attitude-card:hover {
  border-top-color: var(--primary-web);
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.05);
}
.attitude-card h3 { font-family: var(--font-serif); font-size: 24px; margin-bottom: 12px; color: var(--dark-navy); }
.attitude-card p { color: var(--text-gray); font-size: 15px; line-height: 1.6; }

/* Work List */
.work-list { margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.work-item { display: flex; gap: 20px; align-items: flex-start; }
.work-num { font-size: 40px; font-family: var(--font-serif); color: var(--primary-web); line-height: 1; opacity: 0.3; }
.work-content h4 { font-size: 20px; font-weight: 800; margin-bottom: 8px; color: var(--dark-navy); }
.work-content p { font-size: 15px; color: var(--text-gray); }

/* Process Steps (기존) */
.process-steps { display: flex; justify-content: space-between; margin-top: 60px; flex-wrap: wrap; gap: 10px; }
.step-box {
  flex: 1; min-width: 140px; text-align: center;
  padding: 28px 10px;
  background: var(--bg-light);
  border-top: 3px solid #ddd;
  transition: 0.3s;
  border-radius: var(--radius);
}
.step-box:hover {
  border-top-color: var(--kick-orange);
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.step-num { display: block; font-weight: 900; color: var(--kick-orange); margin-bottom: 10px; font-family: var(--font-mont); }
.step-box p { font-size: 14px; font-weight: 700; color: var(--dark-navy); }

/* GOGO Medi Specifics */
.identity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 50px; }
.id-card {
  padding: 40px;
  border-left: 4px solid var(--primary-web);
  background: #fff;
  box-shadow: 0 5px 20px rgba(0,0,0,0.03);
  border-radius: var(--radius);
}
.id-card h3 { font-size: 22px; font-weight: 900; margin-bottom: 12px; color: var(--dark-navy); }

.promise-section { background: var(--dark-navy); color: #fff; }
.promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 60px; }
.p-card {
  text-align: center;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 40px 20px;
  transition: 0.3s;
  border-radius: var(--radius);
}
.p-card:hover { border-color: var(--kick-orange); background: rgba(255,255,255,0.05); }
.p-char { font-size: 50px; font-weight: 900; color: var(--kick-orange); display: block; margin-bottom: 12px; }
.p-card h4 { font-size: 20px; font-weight: 900; margin-bottom: 10px; }
.p-card p { opacity: 0.78; font-size: 14px; }

.roadmap-wrap { position: relative; padding-left: 50px; border-left: 2px solid #ddd; margin-left: 20px; margin-top: 50px; }
.roadmap-item { position: relative; margin-bottom: 60px; }
.roadmap-item::before {
  content: '';
  position: absolute; left: -59px; top: 5px;
  width: 16px; height: 16px;
  background: var(--primary-web);
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 0 0 1px #ddd;
}
.rm-year { font-size: 28px; font-weight: 900; color: var(--primary-web); margin-bottom: 10px; display: block; font-family: var(--font-mont); }
.roadmap-item p { font-size: 16px; color: var(--text-body); margin-bottom: 5px; }

/* EDU Page Specifics */
.edu-hero {
  height: 100vh;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  padding: 0 18px;
}
.edu-overlay {
  background: rgba(15, 37, 64, 0.85);
  padding: 80px;
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(5px);
  max-width: 800px;
  margin: 0 auto;
  border-radius: var(--radius);
}
.coming-soon {
  font-size: 14px; letter-spacing: 5px; color: var(--kick-orange);
  text-transform: uppercase; margin-bottom: 24px; font-weight: 900; display: block;
}

/* --- PROCESS SECTION (Line + Steps) --- */
.process-wrapper {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-top: 60px; position: relative; gap: 20px;
}
.process-wrapper::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 50px; right: 50px;
  height: 2px;
  background: #e0e0e0;
  z-index: 0;
}
.process-step {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
  background: var(--bg-light);
  padding: 0 10px;
}
.step-icon-box {
  width: 80px; height: 80px; margin: 0 auto 25px;
  background: #fff;
  border: 2px solid var(--primary-web);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--primary-web);
  transition: 0.3s;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.process-step:hover .step-icon-box {
  background: var(--primary-web); color: #fff;
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(34, 163, 222, 0.3);
}
.step-title {
  font-family: var(--font-mont);
  font-size: 18px;
  font-weight: 900;
  color: var(--dark-navy);
  margin-bottom: 10px;
  display: block;
}
.step-desc { font-size: 14px; color: var(--text-gray); line-height: 1.5; word-break: keep-all; }
.step-badge {
  position: absolute;
  top: -5px;
  right: 50%;
  transform: translateX(35px);
  background: var(--kick-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 10px;
}

/* --- ICON STYLES --- */
.attitude-icon {
  font-size: 40px;
  color: var(--primary-web);
  margin-bottom: 20px;
  display: block;
}
.work-icon-box {
  width: 60px;
  height: 60px;
  background: var(--bg-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
  color: var(--dark-navy);
  font-size: 24px;
  transition: 0.3s;
}
.work-item:hover .work-icon-box {
  background: var(--kick-orange);
  color: #fff;
  transform: rotateY(180deg);
}
.step-icon {
  font-size: 32px;
  color: var(--text-gray);
  margin-bottom: 15px;
  display: block;
  transition: 0.3s;
}
.step-box:hover .step-icon {
  color: var(--primary-web);
  transform: scale(1.1);
}

/* --- ADDITIONAL CSS FOR GOGOMEDI PAGE --- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 60px;
}
.value-card {
  text-align: center;
  padding: 40px 20px;
  border: 1px solid #eee;
  border-radius: var(--radius);
  transition: 0.3s;
  background: #fff;
}
.value-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.05);
  border-color: var(--primary-web);
}
.value-icon {
  font-size: 40px;
  color: var(--primary-web);
  margin-bottom: 20px;
  display: inline-block;
}
.value-card h4 {
  font-family: var(--font-serif);
  font-size: 22px;
  margin-bottom: 10px;
  color: var(--dark-navy);
}
.value-card p {
  font-size: 15px;
  color: var(--text-gray);
  line-height: 1.6;
}

.field-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 60px;
}
.field-detail-card {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding: 40px;
  background: #fff;
  border: 1px solid #eee;
  transition: 0.3s;
  border-radius: var(--radius);
}
.field-detail-card:hover {
  border-left: 5px solid var(--kick-orange);
  box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}
.field-icon-box {
  width: 70px;
  height: 70px;
  background: var(--bg-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--dark-navy);
  flex-shrink: 0;
}
.field-content h4 {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 10px;
  color: var(--dark-navy);
}
.field-content p {
  font-size: 15px;
  color: var(--text-gray);
  margin-bottom: 15px;
}
.field-tags span {
  display: inline-block;
  font-size: 13px;
  background: #f0f0f0;
  padding: 4px 10px;
  border-radius: 4px;
  margin-right: 5px;
  margin-bottom: 5px;
  color: #555;
  font-weight: 700;
}

/* --- ADDITIONAL CSS FOR EDU PAGE --- */
.edu-intro-box {
  background: var(--dark-navy);
  color: #fff;
  padding: 80px 40px;
  text-align: center;
  border-radius: var(--radius);
  margin-bottom: 80px;
}
.edu-intro-box h3 {
  font-family: var(--font-serif);
  font-size: 32px;
  margin-bottom: 20px;
  color: var(--primary-web);
}
.edu-intro-box p {
  font-size: 18px;
  opacity: 0.9;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
}

.curriculum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.curriculum-card {
  background: #fff;
  border: 1px solid #eee;
  overflow: hidden;
  transition: 0.3s;
  border-radius: var(--radius);
}
.curriculum-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  border-color: var(--primary-web);
}
.curr-img {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.curr-img::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.6));
}
.curr-content { padding: 30px; }
.curr-badge {
  display: inline-block;
  background: var(--bg-light);
  color: var(--kick-orange);
  font-size: 12px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 15px;
}
.curr-content h4 {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 10px;
  color: var(--dark-navy);
}
.curr-content p {
  font-size: 15px;
  color: var(--text-gray);
  line-height: 1.6;
  margin-bottom: 18px;
}
.curr-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #eee;
  padding-top: 15px;
}
.curr-list li {
  font-size: 14px;
  color: var(--text-body);
  margin-bottom: 8px;
  padding-left: 15px;
  position: relative;
}
.curr-list li::before {
  content: '•';
  color: var(--primary-web);
  position: absolute;
  left: 0;
}

.edu-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 60px;
}
.edu-feat-box {
  text-align: center;
  padding: 30px 20px;
  border-right: 1px solid #eee;
}
.edu-feat-box:last-child { border-right: none; }
.edu-icon {
  font-size: 48px;
  color: var(--dark-navy);
  margin-bottom: 20px;
  transition: 0.3s;
}
.edu-feat-box:hover .edu-icon {
  color: var(--kick-orange);
  transform: scale(1.1);
}
.edu-feat-box h5 {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 10px;
}
.edu-feat-box p {
  font-size: 14px;
  color: var(--text-gray);
}

/* =========================================================
   ✅ RESPONSIVE (Tablet + Mobile 최적화)
========================================================= */
/* ---------- Tablet (1024px 이하) ---------- */
@media (max-width: 1024px) {
  .container { padding: 0 var(--pad-tablet); }
  .section-padding { padding: 100px 0; }

  /* GNB 숨김 & 햄버거 노출 */
  .gnb { display: none; }
  .menu-trigger { display: block; }

  header { padding: 14px 0; }
  .logo { font-size: 20px; }

  /* 레이아웃 공통: 세로 정렬 */
  .split-section, 
  .gogo-container, 
  .cta-flex { 
      flex-direction: column; 
  }

  /* GOGO MEDI (Platform) 섹션 너비 꽉 차게 수정 */
  .gogo-container > div {
      width: 100%;
      margin-bottom: 40px; /* 섹션 간 간격 추가 */
  }
  .gogo-container > div:last-child {
      margin-bottom: 0;
  }

  .split-image { min-height: 360px; }
  .split-text { padding: 60px 24px; }

  .big-heading { font-size: 42px; margin-bottom: 20px; }
  .about-desc { font-size: 16px; margin-bottom: 28px; }

  /* Grid 2열로 변경 */
  .spectrum-grid,
  .standard-grid,
  .values-grid, 
  .edu-features { 
      grid-template-columns: repeat(2, 1fr); 
      gap: 30px;
  }
  
  .attitude-grid, .work-list, .identity-grid, .promise-grid, .curriculum-grid, .field-detail-grid { 
      grid-template-columns: 1fr; 
  }
  
  .edu-feat-box { border-right: none; border-bottom: 1px solid #eee; padding-bottom: 30px; }
  .edu-feat-box:nth-last-child(-n+2) { border-bottom: none; }
/* ✅ Process Wrapper 설정 */
    .process-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding-left: 0;
    }

    /* 선 위치 조정 (아이콘 중앙 관통) */
    .process-wrapper::before {
        width: 2px;
        height: 100%;
        top: 0;
        left: 48px; /* 아이콘 박스(60px) 중앙 + 패딩 고려 */
        background: #e0e0e0;
    }

    /* 카드 박스 */
    .process-step {
        width: 100%;
        display: flex;       /* 아이콘과 텍스트를 가로로 배치 */
 align-items: center;  /* ✨ flex-start에서 center로 변경! */
        text-align: left;
        padding: 24px 16px;  /* 패딩을 넉넉하게 */
        background: #fff;
        z-index: 1;
        border-radius: var(--radius);
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    }

    /* 아이콘 박스 */
    .step-icon-box {
        margin: 0 20px 0 0; /* 아이콘과 텍스트 사이 간격 */
        width: 60px;
        height: 60px;
        font-size: 22px;
        flex-shrink: 0;     /* 아이콘 찌그러짐 방지 */
        background: #fff;
        position: relative;
        z-index: 2;
		/* 아이콘 박스 자체 정렬을 위해 flex 추가 */
        display: flex; 
        align-items: center; 
        justify-content: center;
    }

    /* 뱃지 위치 */
    .step-badge {
        top: -5px; right: -5px; left: auto; transform: none;
    }

    /* ✅ [핵심] 텍스트 묶음 처리 */
    .step-text {
        display: flex;
        flex-direction: column; /* 제목-내용 세로 정렬 */
        justify-content: center;
		padding-top: 0; /* ✨ 중앙 정렬이므로 상단 패딩 제거 */
    }

    /* ✅ [핵심] 제목 밑에 여백 (한 칸 띄기 효과) */
    .step-title {
		margin-bottom: 8px; /* 간격 살짝 조정 */
        font-size: 18px;
        line-height: 1.2;
    }

    .step-desc {
        margin: 0; /* 불필요한 여백 제거 */
        font-size: 14px;
line-height: 1.5; /* 줄간격 확보 */
        color: #666;
    }
    .step-desc br {display:none}
  .map-container { height: 500px; }
  .map-controls { top: 20px; }
}

/* ---------- Mobile (768px 이하) ---------- */
@media (max-width: 768px) {
  .container { padding: 0 var(--pad-mobile); }
  .section-padding { padding: 80px 0; }

  header { padding: 12px 0; }
  .logo { font-size: 18px; }
  .menu-trigger { padding: 8px; }

  /* Hero 텍스트 사이즈 줄임 */
  .hero-title { font-size: 42px; line-height: 1.1; margin-bottom: 16px; }
  .hero-subtitle { font-size: 11px; letter-spacing: 2px; margin-bottom: 14px; }
  .hero-desc { font-size: 14px; max-width: 90%; margin-bottom: 24px; line-height: 1.5; }
  .hero-btn { padding: 14px 28px; font-size: 13px; }

  .big-heading { font-size: 32px; line-height: 1.2; margin-bottom: 18px; }

  .split-text { padding: 50px 20px; }
  .about-desc { font-size: 15px; margin-bottom: 22px; }
.process-wrapper::before { left: 41px; }
    
    .step-icon-box {
        width: 50px; height: 50px; font-size: 20px;
        margin-right: 16px;
    }
    .step-title { font-size: 16px; margin-bottom: 6px; }
    .step-desc { font-size: 13px; }

  /* 숫자 통계 줄바꿈 및 사이즈 조정 */
  .stats-row { gap: 30px; padding-top: 24px; }
  .stat-item h4 { font-size: 36px; }

  .service-item { padding: 28px 0; gap: 12px; }
  .service-num { font-size: 20px; min-width: 30px; }
  .service-info h3 { font-size: 20px; margin-bottom: 6px; }
  .service-info p { font-size: 14px; line-height: 1.6; }

  /* Grid 1열로 싹 정리 (모바일 최적화) */
  .spectrum-grid, 
  .standard-grid, 
  .values-grid, 
  .edu-features { 
      grid-template-columns: 1fr; 
      gap: 20px; margin-top: 30px; 
  }

  .spectrum-card { padding: 30px 20px; }
  .std-card h3 { font-size: 22px; }
  .std-card p { font-size: 14px; }

  .pathway-box { padding: 30px 20px; }
  .pathway-item { font-size: 14px; }
  .pathway-box h4 { font-size: 18px; margin-bottom: 20px; }

  .map-container { height: 400px; }
  .map-btn { padding: 10px 16px; font-size: 12px; }

  .footer-cta { padding: 50px 0; text-align: center; }
  .cta-flex { gap: 20px; }
  .cta-title { font-size: 26px; }
  .cta-desc { font-size: 14px; margin-bottom: 20px; }
  .cta-btn { padding: 14px 24px; font-size: 13px; width: 100%; justify-content: center; }

  /* 모달 & 팝업 */
  .contact-modal { padding: 24px 20px; }
  .contact-form input, .contact-form textarea { font-size: 14px; padding: 12px; }
  .modal-close { top: 12px; right: 12px; font-size: 22px; }

  .edu-overlay { padding: 30px 20px; }
  .edu-intro-box { padding: 40px 20px; margin-bottom: 40px; }
  .edu-intro-box h3 { font-size: 24px; }

  /* 패딩 정리 */
  .attitude-card, .id-card, .field-detail-card { padding: 24px; }
  .field-detail-card { flex-direction: column; gap: 16px; }
  .field-icon-box { margin-bottom: 5px; }
}

/* 초소형 디바이스 (갤럭시 폴드 접었을 때 등) */
@media (max-width: 380px) {
  .hero-title { font-size: 34px; }
  .step-icon-box { width: 50px; height: 50px; font-size: 18px; margin-right: 15px; }
  /* 아이콘 박스가 작아졌으니 선 위치도 미세 조정 */
  .process-wrapper::before { left: 41px; } /* 16px(패딩) + 25px(반) = 41px */
  .stat-item { width: 100%; } /* 통계 한 줄에 하나씩 */
}




:root{
  --bg-light: #f6f8fb; /* ✅ 주석이었으면 살려 */
}
/* =========================================================
   RESET MAIN PAGE (sec1~sec5 only) - Trend UI Pack
   Paste at the END of your CSS
========================================================= */

/* --- common helpers --- */
.sec{ position: relative; }
.sec .big-heading{ letter-spacing: -0.5px; }
.sec .section-label{ margin-bottom: 14px; }

@media (max-width: 768px){
  .sec .big-heading{ font-size: 30px; }
}

/* =========================================================
   VISUAL : HERO V2 (Orbs + Grid + Glass Actions)
========================================================= */
.hero.hero-v2{
  height: 100vh;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  overflow:hidden;
  background:#06070b;
}
.hero.hero-v2 .hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 700px at 20% 25%, rgba(34,163,222,0.22), transparent 55%),
    radial-gradient(900px 600px at 80% 30%, rgba(255,69,0,0.16), transparent 55%),
    url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=2200&q=85')
      center/cover no-repeat;
  filter: grayscale(100%) contrast(1.15) brightness(0.45);
  transform: scale(1.08);
  animation: heroZoom 18s ease-in-out infinite alternate;
}
@keyframes heroZoom { to { transform: scale(1.16); } }

.hero.hero-v2 .hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,7,11,0.35), rgba(6,7,11,0.85)),
    radial-gradient(800px 500px at 50% 45%, rgba(255,255,255,0.06), transparent 60%);
}

.hero.hero-v2 .hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items:center;
  gap: 60px;
  width:100%;
}

.hero.hero-v2 .hero-title{
  font-family: var(--font-serif);
  font-size: clamp(44px, 6vw, 92px);
  line-height: 1.05;
  font-weight: 800;
  margin-bottom: 26px;
  text-shadow: 0 18px 60px rgba(0,0,0,0.45);
}

.hero.hero-v2 .hero-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero.hero-v2 .hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: .25s;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
}
.hero.hero-v2 .hero-btn.primary{
  background: linear-gradient(90deg, rgba(34,163,222,0.95), rgba(34,163,222,0.65));
  box-shadow: 0 18px 50px rgba(34,163,222,0.25);
}
.hero.hero-v2 .hero-btn.primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(34,163,222,0.32);
}
.hero.hero-v2 .hero-btn.ghost{
  background: rgba(255,255,255,0.08);
}
.hero.hero-v2 .hero-btn.ghost:hover{
  background: rgba(255,255,255,0.14);
  transform: translateY(-2px);
}

/* right visual */
.hero.hero-v2 .hero-right{
  position:relative;
  min-height: 420px;
}
.hero.hero-v2 .hero-grid{
  position:absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(closest-side, rgba(0,0,0,0.9), transparent 70%);
  opacity: 0.28;
}
.hero.hero-v2 .hero-orb{
  position:absolute;
  border-radius: 50%;
  filter: blur(0px);
  opacity: 0.95;
  mix-blend-mode: screen;
}
.hero.hero-v2 .orb1{
  width: 220px; height: 220px;
  left: 5%; top: 15%;
  background: radial-gradient(circle at 30% 30%, rgba(34,163,222,0.95), rgba(34,163,222,0.15));
  animation: orbFloat 6s ease-in-out infinite;
}
.hero.hero-v2 .orb2{
  width: 300px; height: 300px;
  right: 6%; top: 5%;
  background: radial-gradient(circle at 30% 30%, rgba(255,69,0,0.70), rgba(255,69,0,0.10));
  animation: orbFloat 7.5s ease-in-out infinite reverse;
}
.hero.hero-v2 .orb3{
  width: 180px; height: 180px;
  right: 20%; bottom: 8%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), rgba(255,255,255,0.05));
  animation: orbFloat 8.5s ease-in-out infinite;
}
@keyframes orbFloat{
  0%,100%{ transform: translate3d(0,0,0) }
  50%{ transform: translate3d(0,-16px,0) }
}

.hero.hero-v2 .scroll-down{
  z-index:3;
  bottom: 30px;
  opacity: .9;
}

/* hero responsive */
@media (max-width: 1024px){
  .hero.hero-v2 .hero-inner{
    grid-template-columns: 1fr;
    gap: 28px;
    text-align:center;
  }
  .hero.hero-v2 .hero-right{ display:none; }
  .hero.hero-v2 .hero-actions{ justify-content:center; }
}
@media (max-width: 768px){
  .hero.hero-v2 .hero-btn{ height: 48px; padding: 0 18px; font-size: 13px; }
}

/* =========================================================
   SECTION 1 : Glass Card + Side Title (Premium editorial vibe)
========================================================= */
.sec1{
  background:
    radial-gradient(900px 500px at 15% 15%, rgba(34,163,222,0.12), transparent 60%),
    linear-gradient(180deg, #ffffff, #fbfcff);
}
.sec1-wrap{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 44px;
  align-items: start;
}
.sec1-left .big-heading{
  margin-bottom: 0;
}
.sec1-card{
  position:relative;
  border-radius: 20px;
  padding: 40px 40px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(15,37,64,0.10);
  box-shadow: 0 26px 70px rgba(15,37,64,0.08);
  backdrop-filter: blur(10px);
  overflow:hidden;
}
.sec1-accent{
  position:absolute; left:0; top:0; bottom:0;
  width: 6px;
  background: linear-gradient(180deg, var(--primary-web), var(--kick-orange));
}
.sec1-card::after{
  content:'';
  position:absolute; inset:-120px -120px auto auto;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(34,163,222,0.25), transparent 62%);
  transform: rotate(18deg);
}
.sec1-body{
  position:relative;
  z-index:1;
  color: var(--text-gray);
  font-size: 16px;
  line-height: 1.95;
}
.sec1-body p{ margin-bottom: 10px; }

@media (max-width: 1024px){
  .sec1-wrap{ grid-template-columns: 1fr; gap: 22px; }
  .sec1-card{ padding: 28px 22px; border-radius: 16px; }
}

/* =========================================================
   SECTION 2 : WHY - Two tiles (Badge + Hover lift)
========================================================= */
.sec2{
  background:
    linear-gradient(180deg, #f8f9fa, #ffffff);
}
.sec2-head{
  text-align:center;
  max-width: 980px;
  margin: 0 auto 50px;
}
.sec2-lead{
  margin-top: 14px;
  font-size: 18px;
  color: var(--text-gray);
  line-height: 1.9;
}
.sec2-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
}
.sec2-tile{
  position:relative;
  padding: 34px 32px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 18px 50px rgba(0,0,0,0.05);
  transition: .25s;
  overflow:hidden;
}
.sec2-tile::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(600px 240px at 10% 0%, rgba(34,163,222,0.18), transparent 60%),
    radial-gradient(520px 240px at 90% 0%, rgba(255,69,0,0.10), transparent 60%);
  opacity: .9;
  pointer-events:none;
}
.sec2-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .6px;
  background: rgba(15,37,64,0.06);
  border: 1px solid rgba(15,37,64,0.12);
  margin-bottom: 14px;
}
.sec2-title{
  position:relative;
  font-size: 22px;
  font-weight: 900;
  color: var(--dark-navy);
  margin-bottom: 10px;
  font-family: var(--font-mont);
}
.sec2-desc{
  position:relative;
  color: var(--text-gray);
  font-size: 15px;
  line-height: 1.9;
}
.sec2-tile:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(0,0,0,0.07);
  border-color: rgba(34,163,222,0.35);
}
@media (max-width: 1024px){
  .sec2-grid{ grid-template-columns: 1fr; }
  .sec2-tile{ padding: 28px 22px; border-radius: 18px; }
  .sec2-lead{ font-size: 16px; }
}

/* =========================================================
   SECTION 3 : Split + Feature Panel (Different vibe)
========================================================= */
.sec3{
  background:
    radial-gradient(1000px 520px at 85% 20%, rgba(34,163,222,0.14), transparent 60%),
    linear-gradient(180deg, #ffffff, #f6fbff);
}
.sec3-wrap{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 36px;
  align-items: start;
}
.sec3-text{
  margin-top: 14px;
  color: var(--text-gray);
  font-size: 16px;
  line-height: 1.95;
}
.sec3-text p{ margin-bottom: 10px; }

.sec3-panel{
  position: sticky;
  top: 110px; /* header fixed 고려 */
  border-radius: 22px;
  padding: 26px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(15,37,64,0.10);
  backdrop-filter: blur(10px);
  box-shadow: 0 26px 70px rgba(15,37,64,0.08);
}
.sec3-item{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 16px 14px;
  border-radius: 16px;
  background: rgba(15,37,64,0.04);
  border: 1px solid rgba(15,37,64,0.06);
  margin-bottom: 12px;
  transition: .22s;
  color: #444;
  font-size: 15px;
  line-height: 1.6;
}
.sec3-item:last-child{ margin-bottom: 0; }
.sec3-item:hover{
  transform: translateY(-3px);
  border-color: rgba(34,163,222,0.35);
  box-shadow: 0 16px 40px rgba(34,163,222,0.10);
  background: rgba(34,163,222,0.06);
}
.sec3-key{
  font-weight: 900;
  color: var(--primary-web);
  min-width: 92px;
}
@media (max-width: 1024px){
  .sec3-wrap{ grid-template-columns: 1fr; }
  .sec3-panel{ position: relative; top: 0; }
}

/* =========================================================
   SECTION 4 : Timeline (vertical) - totally different layout
========================================================= */
.sec4{
  background: #fff;
}
.sec4-head{
  text-align:center;
  margin: 0 auto 46px;
}
.sec4-timeline{
  position:relative;
  max-width: 980px;
  margin: 0 auto;
  padding-left: 46px;
}
.sec4-line{
  position:absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(34,163,222,0.55), rgba(255,69,0,0.45));
  opacity: .9;
}
.sec4-row{
  position:relative;
  padding-bottom: 26px;
}
.sec4-dot{
  position:absolute;
  left: 9px;
  top: 18px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--primary-web);
  box-shadow: 0 10px 30px rgba(34,163,222,0.18);
}
.sec4-card{
  background: #fff;
  border-radius: 20px;
  padding: 26px 26px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 18px 50px rgba(0,0,0,0.05);
  transition: .25s;
}
.sec4-card p{
  color: var(--text-gray);
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 10px;
}
.sec4-card p:last-child{ margin-bottom: 0; }
.sec4-row:hover .sec4-card{
  transform: translateY(-4px);
  border-color: rgba(255,69,0,0.30);
  box-shadow: 0 26px 70px rgba(0,0,0,0.06);
}
@media (max-width: 768px){
  .sec4-timeline{
    padding-left: 0;
  }
  .sec4-line, .sec4-dot{ display:none; }
  .sec4-card{ padding: 22px 18px; border-radius: 16px; }
}

/* =========================================================
   SECTION 5 : Dark Gradient + Noise + CTA (premium ending)
========================================================= */
.sec5{
  color:#fff;
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(34,163,222,0.20), transparent 55%),
    radial-gradient(900px 520px at 85% 10%, rgba(255,69,0,0.16), transparent 55%),
    linear-gradient(180deg, #0b1020, #0a0d14);
  overflow:hidden;
}
.sec5::before{
  /* subtle noise (no image) */
  content:'';
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px);
  opacity: 0.06;
  pointer-events:none;
}
.sec5-wrap{
  position:relative;
  max-width: 980px;
  margin: 0 auto;
}
.sec5-card{
  margin-top: 18px;
  border-radius: 22px;
  padding: 34px 34px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 28px 80px rgba(0,0,0,0.35);
}
.sec5-card p{
  color: rgba(255,255,255,0.86);
  font-size: 16px;
  line-height: 2.0;
  margin-bottom: 10px;
}
.sec5-card p:last-child{ margin-bottom:0; }

.sec5-cta{
  display:inline-flex;
  margin-top: 22px;
  height: 52px;
  align-items:center;
  justify-content:center;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
  background: linear-gradient(90deg, rgba(255,69,0,0.95), rgba(34,163,222,0.85));
  box-shadow: 0 18px 50px rgba(255,69,0,0.25);
  border: 1px solid rgba(255,255,255,0.14);
  transition: .25s;
}
.sec5-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 70px rgba(34,163,222,0.22);
}

@media (max-width: 768px){
  .sec5-card{ padding: 24px 18px; border-radius: 16px; }
  .sec5-card p{ font-size: 14px; line-height: 1.9; }
  .sec5-cta{ width:100%; }
}

/* =========================================================
   Small polish: anchor scroll offset for fixed header
========================================================= */
#sec1, #sec2, #sec3, #sec4, #sec5{
  scroll-margin-top: 110px;
}
@media (max-width: 768px){
  #sec1, #sec2, #sec3, #sec4, #sec5{
    scroll-margin-top: 90px;
  }
}


/* =========================
   Section CTA buttons (About / GOGO)
========================= */
.sec-link-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
  border: 1px solid rgba(15,37,64,0.14);
  background: #fff;
  color: var(--dark-navy);
  box-shadow: 0 16px 40px rgba(15,37,64,0.08);
  transition: .25s;
  margin-top: 18px;
}
.sec-link-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(34,163,222,0.35);
  box-shadow: 0 22px 60px rgba(34,163,222,0.14);
}
.sec-link-btn.dark{
  background: rgba(15,37,64,0.06);
  border: 1px solid rgba(15,37,64,0.12);
}

/* mobile full width */
@media (max-width: 768px){
  .sec-link-btn{ width: 100%; }
}

/* =========================
   GOGO initial highlight
========================= */
.gogo-initial{
  color: var(--kick-orange); /* 시그니처 빨간색 */
  font-weight: 900;
  margin-right: 1px;
}

/* (선택) GOGO가 더 눈에 보이게 이니셜만 살짝 뱃지 느낌 */
.sec3-item .gogo-initial{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(255,69,0,0.12);
  border: 1px solid rgba(255,69,0,0.22);
  margin-right: 3px; /* 이니셜 박스와 텍스트 간격 */
}




/* 버튼 2개를 같은 기준선으로 정렬 */
.footer-cta .cta-flex{
  align-items: center; /* ✅ flex-start로 바꿨던 거 있으면 center로 */
}

/* 버튼 묶음 */
.cta-actions{
  display: flex;
  gap: 14px;
  align-items: center;       /* ✅ 세로 높이 정렬 핵심 */
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* 두 버튼 높이 강제 통일(패딩 차이/보더 차이로 어긋나는 거 방지) */
.cta-btn{
  min-height: 56px;
  padding: 0 44px;           /* 기존 18px 44px → 높이 흔들림 방지 */
  line-height: 1;
}

/* outline 버튼: margin-top 제거(이게 세로 어긋남 원인 중 하나) */
.cta-btn-outline{
  margin-top: 0;
}

/* 모바일: 버튼 세로 스택 + 풀폭 */
@media (max-width: 768px){
  .cta-actions{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .cta-btn{
    width: 100%;
    justify-content: center;
  }
}



/* =========================================================
   Footer Info Block (Responsive)
========================================================= */
.footer-info{
  margin-top: 38px;
}

/* grid */
.fi-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* cards */
.fi-card{
  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  padding: 18px 18px;
  backdrop-filter: blur(8px);
}

.fi-wide{
  grid-column: 1 / -1; /* full width */
}

/* head */
.fi-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.fi-tag{
  display:inline-flex;
  align-items:center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
}

/* body */
.fi-body p{
  margin: 0 0 6px;
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  line-height: 1.7;
}

.fi-muted{
  color: rgba(255,255,255,0.70) !important;
}

/* rows (M/A/R) */
.fi-rows{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.fi-row{
  display:grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
}

.fi-k{
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 12px;
  color: #fff;
  background: rgba(255,69,0,0.18);
  border: 1px solid rgba(255,69,0,0.28);
}

.fi-v{
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  line-height: 1.7;
}

.fi-link{
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  width: fit-content;
}
.fi-link:hover{
  border-bottom-color: rgba(255,255,255,0.55);
}

.fi-legal strong{
  color: #fff;
}

/* =========================================================
   Footer CTA layout compatibility (buttons + info together)
========================================================= */
.footer-cta .cta-flex{
  align-items: center;
}

/* keep existing cta-actions rules if you already added them */
.cta-actions{
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 1024px){
  .fi-grid{
    grid-template-columns: 1fr;
  }
  .fi-wide{
    grid-column: auto;
  }
}

@media (max-width: 768px){
  .footer-info{ margin-top: 26px; }
  .fi-card{ padding: 16px 14px; border-radius: 14px; }
  .fi-body p, .fi-v{ font-size: 13px; }

  /* mobile: CTA buttons vertical already? ensure */
  .cta-actions{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .cta-btn{
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================
   ABOUT PAGE - Trend UI Pack (Section 1~4)
========================================================= */

/* ---------- Section 1 (brand intro) ---------- */
.about-sec1{
  position: relative;
  overflow: hidden;
}
.about-sec1::before{
  content:'';
  position:absolute;
  inset:-120px -120px auto auto;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle at 30% 30%, rgba(34,163,222,0.28), transparent 60%);
  filter: blur(0px);
  pointer-events:none;
}
.about-sec1-wrap{
  border: 1px solid rgba(15,37,64,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.86));
  border-radius: 18px;
  padding: 48px 44px;
  box-shadow: 0 24px 70px rgba(15,37,64,0.10);
}
.about-sec1-head{
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
}
.brand-shift{
  margin: 12px auto 18px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  justify-content:center;
}
.brand-chip{
  display:inline-flex;
  align-items:center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .4px;
  background: rgba(15,37,64,0.06);
  border: 1px solid rgba(15,37,64,0.10);
  color: var(--dark-navy);
}
.brand-chip.is-new{
  background: rgba(34,163,222,0.12);
  border-color: rgba(34,163,222,0.24);
}
.brand-arrow{
  font-weight: 900;
  color: var(--kick-orange);
}
.brand-note{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,37,64,0.55);
}
.about-sec1-body{
  max-width: 980px;
  margin: 10px auto 0;
  text-align: center;
}

/* ---------- Section 2 (neo attitude cards) ---------- */
.attitude-neo-grid{
  margin-top: 56px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.attitude-neo-card{
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 18px 55px rgba(0,0,0,0.06);
  padding: 30px 28px;
  transition: .25s;
}
.attitude-neo-card:hover{
  transform: translateY(-6px);
  border-color: rgba(34,163,222,0.25);
  box-shadow: 0 24px 70px rgba(34,163,222,0.10);
}
.anc-top{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 14px;
}
.anc-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,69,0,0.10);
  border: 1px solid rgba(255,69,0,0.18);
  color: var(--kick-orange);
  font-size: 18px;
}
.anc-title{
  margin:0;
  font-size: 22px;
  font-weight: 900;
  color: var(--dark-navy);
  font-family: var(--font-mont);
}
.anc-body{
  color: var(--text-gray);
  font-size: 14.5px;
  line-height: 1.75;
}
.anc-lead{
  margin: 0 0 10px;
  font-weight: 900;
  color: rgba(15,37,64,0.86);
}

/* ---------- Section 3 (work timeline) ---------- */
.work-timeline{
  position: relative;
  margin-top: 54px;
  padding-left: 18px;
}
.work-timeline::before{
  content:'';
  position:absolute;
  top: 6px;
  bottom: 6px;
  left: 28px;
  width: 2px;
  background: rgba(15,37,64,0.12);
}
.wt-item{
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.wt-dot{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-family: var(--font-mont);
  color: #fff;
  background: linear-gradient(135deg, var(--primary-web), rgba(34,163,222,0.65));
  box-shadow: 0 12px 40px rgba(34,163,222,0.25);
  position: relative;
  z-index: 1;
  margin-left: 0px;
}
.wt-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 18px;
  padding: 22px 22px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.06);
}
.wt-card h4{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 900;
  color: var(--dark-navy);
}
.wt-card p{
  margin: 0;
  font-size: 14.5px;
  color: var(--text-gray);
  line-height: 1.75;
}

/* ---------- Section 4 (business process board) ---------- */
.bp-board{
  margin-top: 56px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.bp-col{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.06);
}
.bp-col-head{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(15,37,64,0.10);
  margin-bottom: 14px;
}
.bp-col-head h3{
  margin:0;
  font-size: 18px;
  font-weight: 900;
  font-family: var(--font-mont);
  color: var(--dark-navy);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.bp-badge{
  height: 28px;
  display:inline-flex;
  align-items:center;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .6px;
  color: #fff;
  background: rgba(15,37,64,0.88);
}
.bp-badge.is-process{
  background: rgba(34,163,222,0.90);
}
.bp-badge.is-result{
  background: rgba(255,69,0,0.92);
}
.bp-card{
  background: rgba(15,37,64,0.03);
  border: 1px solid rgba(15,37,64,0.08);
  border-radius: 16px;
  padding: 14px 14px;
  margin-bottom: 12px;
}
.bp-card h4{
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 900;
  color: var(--dark-navy);
}
.bp-card p{
  margin: 0;
  font-size: 14px;
  color: var(--text-gray);
  line-height: 1.75;
}
.bp-divider{
  height: 1px;
  background: rgba(15,37,64,0.12);
  margin: 16px 0;
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 1024px){
  .about-sec1-wrap{ padding: 34px 26px; }
  .attitude-neo-grid{ grid-template-columns: 1fr; }
  .bp-board{ grid-template-columns: 1fr; }
  .work-timeline::before{ left: 26px; }
  .wt-item{ grid-template-columns: 64px 1fr; }
  .wt-dot{ width: 50px; height: 50px; border-radius: 16px; }
}
@media (max-width: 768px){
  .about-sec1-wrap{ border-radius: 16px; }
  .brand-chip{ height: 32px; padding: 0 12px; }
  .wt-card{ padding: 18px 16px; border-radius: 16px; }
  .bp-col{ padding: 18px 14px; border-radius: 16px; }
  .bp-card{ border-radius: 14px; }
}


/* =========================================================
   GOGOMEDI PAGE - Trend UI Pack (Section 1,2,4,5)
========================================================= */

/* ---------- Section 1 : split intro ---------- */
.gm-sec1{ position: relative; overflow:hidden; }
.gm-sec1::before{
  content:'';
  position:absolute;
  inset:-140px auto auto -140px;
  width: 520px; height: 520px;
  background: radial-gradient(circle at 30% 30%, rgba(255,69,0,0.16), transparent 60%);
  pointer-events:none;
}
.gm-sec1-wrap{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 22px;
  align-items: stretch;
  padding: 44px 40px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.90));
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 24px 70px rgba(0,0,0,0.08);
}
.gm-h1{ margin-top: 10px; }
.gm-badges{
  margin-top: 18px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
}
.gm-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  background: rgba(15,37,64,0.06);
  border: 1px solid rgba(15,37,64,0.10);
  color: var(--dark-navy);
}
.gm-badge.is-strong{
  background: rgba(255,69,0,0.10);
  border-color: rgba(255,69,0,0.18);
  color: var(--kick-orange);
}
.gm-in-gloweb{
  margin-top: 14px;
  display:flex;
  align-items: baseline;
  gap: 10px;
}
.gm-in{
  font-weight: 1000;
  letter-spacing: 1px;
  color: rgba(15,37,64,0.7);
}
.gm-in-brand{
  font-weight: 1000;
  letter-spacing: .8px;
  color: var(--dark-navy);
}
.gm-stat-card{
  height: 100%;
  border-radius: 18px;
  padding: 26px 22px;
  background: linear-gradient(135deg, rgba(34,163,222,0.10), rgba(255,69,0,0.08));
  border: 1px solid rgba(34,163,222,0.18);
  display:flex;
  flex-direction: column;
  justify-content: center;
}
.gm-stat-title{
  font-weight: 1000;
  font-size: 16px;
  color: rgba(15,37,64,0.92);
  margin-bottom: 6px;
}
.gm-stat-desc{
  font-weight: 1000;
  font-size: 28px;
  color: var(--dark-navy);
  line-height: 1.2;
}
.gm-mini-note{
  margin-top: 14px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(15,37,64,0.62);
}

/* ---------- Section 2 : identity masonry ---------- */
.gm-sec2-head{ text-align:center; margin-bottom: 52px; }
.gm-identity-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
}
.gm-id-card{
  background:#fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 18px;
  padding: 22px 22px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.06);
}
.gm-id-card h3{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 1000;
  color: var(--dark-navy);
}
.gm-id-card p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-gray);
}
.gm-id-hero{
  grid-row: span 2;
  background: linear-gradient(135deg, rgba(15,37,64,0.92), rgba(34,163,222,0.55));
  border-color: rgba(255,255,255,0.16);
}
.gm-id-hero h3{ color:#fff; font-size: 22px; }
.gm-id-hero p{ color: rgba(255,255,255,0.78); }
.gm-id-chips{ margin-top: 14px; display:flex; flex-wrap:wrap; gap: 8px; }
.gm-id-chips span{
  font-size: 12px;
  font-weight: 900;
  color:#fff;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 6px 10px;
}

/* ---------- Section 4 : values strip + flow rail ---------- */
.gm-sec4-head{ text-align:center; margin-bottom: 42px; }
.gm-values-strip{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 44px;
}
.gm-v-item{
  background:#fff;
  border:1px solid rgba(0,0,0,0.07);
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 14px 42px rgba(0,0,0,0.06);
  display:flex;
  gap: 12px;
  align-items: flex-start;
}
.gm-v-ic{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,69,0,0.10);
  border: 1px solid rgba(255,69,0,0.18);
  color: var(--kick-orange);
  font-size: 18px;
  flex: 0 0 auto;
}
.gm-v-txt h4{
  margin:0 0 4px;
  font-weight: 1000;
  font-size: 16px;
  color: var(--dark-navy);
}
.gm-v-txt p{
  margin:0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-gray);
}

.gm-flow-head{
  display:flex;
  justify-content:center;
  margin: 8px 0 18px;
}
.gm-flow-title{
  text-align:center;
  max-width: 900px;
}
.gm-flow-kicker{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: .6px;
  color: var(--dark-navy);
  background: rgba(34,163,222,0.10);
  border: 1px solid rgba(34,163,222,0.18);
  margin-bottom: 10px;
}
.gm-flow-title h3{
  margin:0;
  font-size: 22px;
  font-weight: 1000;
  color: var(--dark-navy);
}

.gm-flow-rail{
  margin-top: 28px;
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  align-items: stretch;
}
.gm-flow-step{
  position: relative;
}
.gm-flow-no{
  position:absolute;
  top: -10px;
  left: 14px;
  width: 28px; height: 28px;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 1000;
  font-size: 12px;
  color:#fff;
  background: rgba(255,69,0,0.92);
  box-shadow: 0 10px 28px rgba(255,69,0,0.25);
}
.gm-flow-card{
  height: 100%;
  background:#fff;
  border:1px solid rgba(0,0,0,0.07);
  border-radius: 18px;
  padding: 22px 14px 16px;
  box-shadow: 0 14px 42px rgba(0,0,0,0.06);
}
.gm-flow-card h4{
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 1000;
  color: var(--dark-navy);
}
.gm-flow-card p{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-gray);
}

/* ---------- Section 5 : fields + roadmap ---------- */
.gm-fields-grid{
  margin-top: 28px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.gm-field{
  background:#fff;
  border:1px solid rgba(0,0,0,0.07);
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 14px 42px rgba(0,0,0,0.06);
  display:flex;
  gap: 12px;
}
.gm-field-ic{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(34,163,222,0.10);
  border: 1px solid rgba(34,163,222,0.18);
  color: var(--primary-web);
  font-size: 18px;
  flex: 0 0 auto;
}
.gm-field-body h4{
  margin:0 0 4px;
  font-size: 16px;
  font-weight: 1000;
  color: var(--dark-navy);
}
.gm-field-body p{
  margin:0;
  font-size: 13.5px;
  color: var(--text-gray);
  line-height: 1.6;
}

.gm-roadmap-wrap{
  margin-top: 40px;
  padding: 26px 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(15,37,64,0.92), rgba(34,163,222,0.45));
  border: 1px solid rgba(255,255,255,0.16);
}
.gm-roadmap-head{ text-align:center; margin-bottom: 18px; }
.gm-roadmap-head .big-heading{ color:#fff; }
.gm-roadmap{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.gm-rm-item{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  padding: 16px 14px;
}
.gm-rm-year{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 12px;
  color:#fff;
  background: rgba(255,69,0,0.85);
  margin-bottom: 8px;
}
.gm-rm-item p{
  margin:0;
  color: rgba(255,255,255,0.86);
  font-size: 13.5px;
  line-height: 1.6;
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 1100px){
  .gm-sec1-wrap{ grid-template-columns: 1fr; padding: 34px 24px; }
  .gm-identity-grid{ grid-template-columns: 1fr; }
  .gm-id-hero{ grid-row: auto; }
  .gm-values-strip{ grid-template-columns: 1fr 1fr; }
  .gm-flow-rail{ grid-template-columns: repeat(3, 1fr); }
  .gm-roadmap{ grid-template-columns: 1fr 1fr; }
  .gm-fields-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .gm-sec1-wrap{ border-radius: 16px; }
  .gm-stat-desc{ font-size: 24px; }
  .gm-values-strip{ grid-template-columns: 1fr; }
  .gm-flow-rail{ grid-template-columns: 1fr; }
  .gm-roadmap{ grid-template-columns: 1fr; }
  .gm-fields-grid{ grid-template-columns: 1fr; }
  .gm-id-card, .gm-flow-card, .gm-field{ border-radius: 16px; }
}

















/* =========================================================
   SECTION 1 : Editorial Premium (gm-sec1-editorial)
   - totally different design
========================================================= */
.gm-sec1-editorial{
  position: relative;
  overflow: hidden;
}

/* sharp / editorial background */
.gm-sec1-editorial::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(15,37,64,0.04) 0%, rgba(34,163,222,0.06) 40%, rgba(255,69,0,0.04) 100%);
  pointer-events:none;
}
.gm-sec1-editorial::after{
  content:"";
  position:absolute;
  top: -120px;
  right: -180px;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(34,163,222,0.22), transparent 62%);
  pointer-events:none;
}

/* main frame */
.gmE-wrap{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: stretch;
  padding: 62px 56px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 30px 90px rgba(0,0,0,0.10);
}

/* add an editorial edge (diagonal corner) */
.gmE-wrap:after{
  content:"";
  position:absolute;
  top:0; right:0;
  width: 140px; height: 140px;
  background: linear-gradient(135deg, rgba(255,69,0,0.10), rgba(34,163,222,0.08));
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  border-top-right-radius: 28px;
  pointer-events:none;
}

/* LEFT */
.gmE-left{
  padding-right: 10px;
}

.gmE-topline{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-bottom: 16px;
}
.gmE-kicker{
  font-family: var(--font-mont);
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 12px;
  color: rgba(15,37,64,0.70);
  text-transform: uppercase;
}
.gmE-rule{
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(0,0,0,0.14), transparent);
}

.gmE-title{
  margin: 0 0 22px;
  font-family: var(--font-serif);
  font-weight: 900;
  letter-spacing: -0.8px;
  line-height: 1.14;
  font-size: clamp(30px, 4.2vw, 52px);
  color: var(--dark-navy);
  position: relative;
}

/* subtle underline accent */
.gmE-title:after{
  content:"";
  display:block;
  width: 120px;
  height: 6px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--kick-orange), rgba(255,69,0,0.15));
}

/* LIST (not pills) */
.gmE-list{
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.gmE-li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  color: rgba(15,37,64,0.72);
  line-height: 1.5;
}
.gmE-li i{
  margin-top: 3px;
  color: var(--primary-web);
}

.gmE-li-strong{
  padding-left: 28px; /* aligns with icon line */
  font-family: var(--font-mont);
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: 0.6px;
  color: var(--dark-navy);
  position: relative;
}
.gmE-li-strong:before{
  content:"";
  position:absolute;
  left: 0;
  top: 12px;
  width: 18px;
  height: 2px;
  background: var(--kick-orange);
}

/* STAMP */
.gmE-stamp{
  display:inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px dashed rgba(15,37,64,0.30);
  background: rgba(15,37,64,0.03);
}
.gmE-stamp-in{
  font-family: var(--font-mont);
  font-weight: 1000;
  letter-spacing: 2px;
  font-size: 12px;
  color: rgba(15,37,64,0.55);
}
.gmE-stamp-brand{
  font-family: var(--font-mont);
  font-weight: 1000;
  letter-spacing: 0.8px;
  font-size: 16px;
  color: var(--dark-navy);
}

/* RIGHT PANEL */
.gmE-right{
  display:flex;
  align-items: stretch;
}

.gmE-panel{
  width: 100%;
  border-radius: 22px;
  padding: 22px 22px 18px;
  background: #0F2540; /* dark navy */
  color: #fff;
  position: relative;
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(15,37,64,0.35);
}

/* panel texture */
.gmE-panel:before{
  content:"";
  position:absolute;
  inset:-40px -80px auto auto;
  width: 300px; height: 300px;
  background: radial-gradient(circle at 30% 30%, rgba(34,163,222,0.40), transparent 62%);
  transform: rotate(15deg);
  pointer-events:none;
}
.gmE-panel:after{
  content:"";
  position:absolute;
  bottom:-80px; left:-80px;
  width: 280px; height: 280px;
  background: radial-gradient(circle at 30% 30%, rgba(255,69,0,0.30), transparent 62%);
  pointer-events:none;
}

.gmE-panel-head{
  position: relative;
  z-index: 1;
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom: 22px;
}

.gmE-panel-label{
  font-family: var(--font-mont);
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 11px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.gmE-panel-mark{
  width: 40px; height: 40px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-mont);
  font-weight: 1000;
  letter-spacing: 1px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
}

.gmE-panel-copy{
  position: relative;
  z-index: 1;
  padding: 6px 0 12px;
}

.gmE-panel-title{
  font-family: var(--font-serif);
  font-weight: 900;
  letter-spacing: -0.4px;
  line-height: 1.08;
  font-size: clamp(26px, 2.6vw, 34px);
  margin-bottom: 6px;
}

.gmE-panel-sub{
  margin-top: 10px;
  font-family: var(--font-mont);
  font-weight: 900;
  letter-spacing: 0.8px;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
}

.gmE-panel-foot{
  position: relative;
  z-index: 1;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 12.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.70);
  line-height: 1.5;
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 1100px){
  .gmE-wrap{
    grid-template-columns: 1fr;
    padding: 46px 28px;
    gap: 24px;
  }
  .gmE-right{
    align-items: flex-start;
  }
}

@media (max-width: 640px){
  .gmE-wrap{
    padding: 34px 18px;
    border-radius: 18px;
  }
  .gmE-wrap:after{
    width: 110px; height: 110px;
    border-top-right-radius: 18px;
  }
  .gmE-title:after{
    width: 90px;
    height: 5px;
    margin-top: 16px;
  }
  .gmE-li{ font-size: 14px; }
  .gmE-li-strong{ font-size: 16px; }
  .gmE-panel{ border-radius: 18px; }
}