/* ===== Homepage — page-index.css ===== */

/* 1. Split-Screen Hero */
.hero_split { display: grid; grid-template-columns: 55fr 45fr; min-height: calc(88vh - 80px); background: #0a0e17; position: relative; overflow: hidden; }
.hero_split_left { display: flex; align-items: center; padding: 80px 70px 80px 0; }
.hero_split_content .hs_badge { display: inline-block; padding: 6px 16px; background: rgba(2, 160, 225, 0.12); border: 1px solid rgba(2, 160, 225, 0.35); color: #02a0e1; font-size: 11px; font-weight: 700; letter-spacing: 3px; border-radius: 30px; margin-bottom: 30px; text-transform: uppercase; }
.hero_split_content h1 { font-size: 48px; font-weight: 800; line-height: 1.15; color: #fff; margin-bottom: 22px; letter-spacing: -0.02em; }
.hero_split_content p { font-size: 17px; color: #94a3b8; line-height: 1.7; margin-bottom: 38px; }
.hero_actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero_btn_primary { padding: 16px 36px; background: var(--primary-gradient); color: #fff !important; font-size: 15px; font-weight: 600; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; box-shadow: var(--shadow-btn); text-decoration: none; }
.hero_btn_primary:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(2, 160, 225, 0.45); }
.hero_btn_outline { padding: 15px 34px; color: rgba(255,255,255,0.8); border: 1.5px solid rgba(255,255,255,0.25); border-radius: 50px; font-size: 15px; font-weight: 600; transition: 0.3s; text-decoration: none; }
.hero_btn_outline:hover { border-color: rgba(255,255,255,0.7); color: #fff; background: rgba(255,255,255,0.07); }
.hero_stats { display: flex; align-items: center; margin-top: 50px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.07); }
.stat_item { flex: 1; text-align: center; }
.stat_item strong { display: block; font-size: 30px; font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1; margin-bottom: 6px; }
.stat_item span { font-size: 11px; color: #64748b; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; }
.stat_divider { width: 1px; height: 36px; background: rgba(255,255,255,0.08); flex-shrink: 0; }
.hero_split_right { position: relative; overflow: hidden; background: #0f1520; }
.hero_split_img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.75; }
.hero_split_overlay { position: absolute; inset: 0; background: linear-gradient(to right, #0a0e17 0%, transparent 50%); z-index: 1; }
/* 2. Solutions Grid */
.solutions_modern { padding: 90px 0; background: #fff; }
.solutions_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.solution_card { position: relative; padding: 40px 30px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); transition: all 0.4s ease; border: 1px solid #f0f2f5; overflow: hidden; display: block; text-align: center; text-decoration: none; }
.solution_card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--primary-blue); transform: scaleX(0); transform-origin: left; transition: 0.4s; }
.solution_card:hover { transform: translateY(-10px); box-shadow: var(--shadow-card-hover); border-color: transparent; }
.solution_card:hover::before { transform: scaleX(1); }
.solution_icon { width: 60px; height: 60px; margin-bottom: 25px; filter: grayscale(1); transition: 0.4s; }
.solution_card:hover .solution_icon { filter: grayscale(0); transform: scale(1.1); }
.solution_card h3 { font-size: 20px; font-weight: 700; color: var(--text-main); margin-bottom: 15px; }
.solution_card p { font-size: 14px; color: var(--text-gray); line-height: 1.6; }
.solution_arrow { position: absolute; bottom: 30px; right: 30px; color: var(--primary-blue); font-size: 20px; opacity: 0; transform: translateX(-10px); transition: 0.3s; }
.solution_card:hover .solution_arrow { opacity: 1; transform: translateX(0); }

/* 3. Product Showcase */
.products_modern { padding: 90px 0; background: #f9f9fb; }
.product_modern_item { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); transition: 0.4s; }
.product_modern_item:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-8px); }
.product_img_box { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
.product_img_box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.product_modern_item:hover .product_img_box img { transform: scale(1.08); }
.product_info_box { padding: 25px 20px; text-align: center; border-top: 1px solid #f5f5f5; }
.product_info_box h3 a { font-size: 16px; font-weight: 600; color: var(--text-main); text-decoration: none; transition: 0.3s; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product_info_box h3 a:hover { color: var(--primary-blue); }

/* 4. Parallax Banner */
.parallax_banner { position: relative; padding: 120px 0; background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; text-align: center; color: #fff; }
@supports not (-webkit-overflow-scrolling: touch) { .parallax_banner { background-attachment: fixed; } }
.parallax_overlay { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(17, 21, 28, 0.85); backdrop-filter: blur(3px); }
.parallax_content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.parallax_content h2 { font-size: 36px; font-weight: 800; margin-bottom: 20px; }
.parallax_content p { font-size: 16px; line-height: 1.8; color: #ccc; margin-bottom: 30px; }
.hero_btn { display: inline-block; padding: 15px 40px; font-size: 16px; font-weight: 600; color: #fff; background: transparent; border: 2px solid #fff; border-radius: 30px; transition: 0.3s; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; }
.hero_btn:hover { background: #fff; color: #0f172a; }

/* 5. Scenarios Accordion */
.scenarios_accordion_sec { padding: 90px 0; background: #fff; }
.accordion_container { display: flex; width: 100%; height: 500px; gap: 15px; }
.acc_panel { position: relative; flex: 1; border-radius: 20px; background-size: cover; background-position: center; overflow: hidden; transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1); cursor: pointer; text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.acc_overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.1) 100%); transition: 0.5s ease; }
.acc_panel:hover { flex: 4; }
.acc_panel:hover .acc_overlay { background: linear-gradient(to top, rgba(2, 160, 225, 0.9) 0%, rgba(0,0,0,0.3) 100%); }
.acc_content { position: absolute; bottom: 30px; left: 30px; right: 30px; color: #fff; }
.acc_icon span { display: inline-block; font-size: 14px; font-weight: 800; letter-spacing: 2px; padding: 5px 12px; border: 1px solid rgba(255,255,255,0.4); border-radius: 20px; margin-bottom: 15px; }
.acc_text h3 { font-size: 28px; font-weight: 700; white-space: nowrap; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }

/* 6. Advantages — Bento Grid */
.advantages_modern { padding: 90px 0; background: #f4f6f9; }
.bento_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bento_cell { border-radius: 20px; padding: 36px; transition: transform 0.3s; overflow: hidden; position: relative; }
.bento_cell.wide { grid-column: span 2; }
.bento_cell:hover { transform: translateY(-4px); }
.bento_cell_dark { background: #0f172a; }
.bc_icon { width: 52px; height: 52px; background: rgba(2,160,225,0.15); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #02a0e1; font-size: 22px; margin-bottom: 22px; }
.bento_cell_dark h3 { font-size: 26px; font-weight: 800; color: #fff; margin-bottom: 12px; letter-spacing: -0.02em; line-height: 1.2; }
.bento_cell_dark p { font-size: 14px; color: #64748b; line-height: 1.7; }
.bento_cell_blue { background: var(--primary-gradient); }
.bento_cell_slate { background: #1e293b; }
.bc_stat_num { font-size: 56px; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -0.04em; }
.bc_stat_label { font-size: 12px; color: rgba(255,255,255,0.6); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin-top: 10px; }
.bc_stat_bg_icon { font-size: 90px; opacity: 0.07; position: absolute; bottom: -10px; right: 15px; color: #fff; }
.bento_cell_light { background: #fff; border: 1px solid #f0f2f5; box-shadow: var(--shadow-card); }
.bc_split { display: flex; height: 100%; align-items: stretch; }
.bc_split_half { flex: 1; padding: 0 28px; }
.bc_split_half:first-child { padding-left: 0; }
.bc_split_half:last-child { padding-right: 0; }
.bc_split_divider { width: 1px; background: #f0f2f5; flex-shrink: 0; }
.bc_sub_icon { width: 44px; height: 44px; background: rgba(2,160,225,0.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--primary-blue); font-size: 20px; margin-bottom: 16px; }
.bento_cell_light h4 { font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; }
.bento_cell_light p { font-size: 14px; color: var(--text-gray); line-height: 1.6; }

/* 7. Latest News */
.news_latest { padding: 90px 0; background: #fff; }
.news_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.news_card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid #f0f2f5; transition: 0.4s; text-decoration: none; display: block; }
.news_card:hover { transform: translateY(-8px); box-shadow: var(--shadow-card-hover); border-color: transparent; }
.news_card_img { aspect-ratio: 16 / 9; overflow: hidden; background: #f0f2f5; }
.news_card_img img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.news_card:hover .news_card_img img { transform: scale(1.06); }
.news_card_body { padding: 22px 24px 26px; }
.news_date { font-size: 12px; color: #aaa; font-weight: 600; display: block; margin-bottom: 12px; }
.news_date i { margin-right: 5px; color: var(--primary-blue); }
.news_card_body h3 { font-size: 16px; font-weight: 700; color: var(--text-dark); line-height: 1.5; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news_card_body p { font-size: 13px; color: #777; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 16px; }
.news_read_more { font-size: 13px; font-weight: 700; color: var(--primary-blue); display: inline-flex; align-items: center; gap: 5px; }
.news_read_more i { transition: transform 0.2s; }
.news_card:hover .news_read_more i { transform: translateX(4px); }

/* View All button — shared across sections */
.section_view_all { text-align: center; margin-top: 44px; }
.view_all_btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 38px; border: 2px solid var(--primary-blue); color: var(--primary-blue); border-radius: 50px; font-weight: 700; font-size: 14px; text-decoration: none; transition: 0.3s; text-transform: uppercase; letter-spacing: 0.5px; }
.view_all_btn:hover { background: var(--primary-blue); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(2,160,225,0.25); }
.view_all_btn i { transition: transform 0.2s; }
.view_all_btn:hover i { transform: translateX(4px); }

/* Mobile responsive */
@media (max-width: 768px) {
  .hero_split { grid-template-columns: 1fr; min-height: auto; }
  .hero_split_left { padding: 50px 20px 40px; }
  .hero_split_content h1 { font-size: 30px; }
  .hero_split_right { height: 240px; }
  .hero_stats { margin-top: 30px; padding-top: 25px; }
  .stat_item strong { font-size: 24px; }
  .index_main { padding-top: 0; }

  .solutions_grid { grid-template-columns: 1fr; gap: 15px; }
  .solution_card { display: flex !important; align-items: center; padding: 20px 15px; text-align: left; transform: none !important; }
  .solution_card .solution_icon { flex-shrink: 0; width: 55px; height: 55px; margin-bottom: 0; margin-right: 20px; filter: grayscale(0) !important; }
  .solution_card .solution_text_box { flex-grow: 1; }
  .solution_card h3 { font-size: 18px; margin-bottom: 4px; }
  .solution_card p { font-size: 13px; margin: 0; line-height: 1.4; }
  .solution_arrow { display: none !important; }

  .bento_grid { grid-template-columns: 1fr; gap: 12px; }
  .bento_cell.wide { grid-column: span 1; }
  .bc_stat_num { font-size: 42px; }
  .bc_split { flex-direction: column; gap: 24px; }
  .bc_split_divider { display: none; }
  .bc_split_half, .bc_split_half:first-child, .bc_split_half:last-child { padding: 0; }

  .accordion_container { flex-direction: column; height: auto; min-height: 400px; }
  .acc_panel { flex: none; height: 100px; transition: height 0.4s ease; }
  .acc_panel:hover { flex: none; height: 100px; }
  .acc_panel.is_open { height: 220px; }
  .acc_text h3 { font-size: 20px; white-space: normal; }

  .news_grid { grid-template-columns: 1fr; gap: 16px; }
  .news_latest { padding: 60px 0; }
}