:root { 
  --primary: #3362AD; 
  --primary-dark: #22467d; 
  --accent: #C6004D; 
  --bg-light: #F7F9FC; 
  --text-main: #1A1A1A;
  --text-sub: #555555; 
  --white: #FFFFFF; 
  --border: #E2E8F0; 
}


* { box-sizing: border-box; margin: 0; padding: 0; word-break: keep-all; }
body { color: var(--text-main); background-color: var(--white); font-size: 1.125rem; line-height: 1.6; }
span {vertical-align: top!important; }
header { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 5%; background: rgba(7, 11, 20, 0.4); backdrop-filter: blur(0.75rem); -webkit-backdrop-filter: blur(0.75rem); border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1); z-index: 1000; transition: background 0.3s, border-color 0.3s; }
header .logo { font-weight: 600; font-size: 1.5rem; color: #ffffff; letter-spacing: -0.03125rem; transition: color 0.3s; }
header .logo span { font-size: 0.9375rem; font-weight: 400; color: rgba(255, 255, 255, 0.7); transition: color 0.3s; }
.nav-links a { color: #ffffff; text-decoration: none; transition: color 0.3s; }
.nav-links a:hover { color: var(--accent); }
header.header-light { background: rgba(255, 255, 255, 0.75); border-bottom: 0.0625rem solid var(--border); }
header.header-light .logo { color: var(--text-main); }
header.header-light .logo span { color: var(--text-sub); }
header.header-light .nav-links a { color: var(--text-main); }
header.header-light .nav-links a:hover { color: var(--accent); }
.header-right { display: flex; align-items: center; gap: 2rem; }
.nav-links { display: flex; gap: 2rem; list-style: none; font-size: 1.0625rem; }
.header-call { background-color: var(--accent); color: var(--white)!important; padding: 0.75rem 1.75rem; border-radius: 2rem; font-weight: 500; font-size: 1.125rem; text-decoration: none; box-shadow: 0 0.25rem 0.75rem rgba(198, 0, 77, 0.2); }

.fade-in-up { opacity: 0; transform: translateY(2rem); transition: opacity 0.8s ease-out, transform 0.8s ease-out; will-change: opacity, transform; }
.fade-in-up.active { opacity: 1; transform: translateY(0); }

#hero-main { width: 100%; height: 100vh; position: relative; color: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
#hero-bg-wrap { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-bg-slide { position: absolute; inset: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0; animation: heroFadeSlide 18s infinite; }
.hero-bg-slide.slide-1 { background-image: url('../images/iptv/main03.png'); animation-delay: 0s; }
.hero-bg-slide.slide-2 { background-image: url('../images/iptv/main04.png'); animation-delay: 6s; }
.hero-bg-slide.slide-3 { background-image: url('../images/iptv/main01.png'); animation-delay: 12s; }
@keyframes heroFadeSlide { 0% { opacity: 0; transform: scale(1); } 5% { opacity: 1; } 33% { opacity: 1; transform: scale(1.05); } 38% { opacity: 0; } 100% { opacity: 0; transform: scale(1); } }
#hero-main::after { content: ""; position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(11, 19, 41, 0.4); z-index: 1; pointer-events: none; }
#hero-main > *:not(#hero-bg-wrap) { position: relative; z-index: 2; }
#hero-main .hero-main-tag { display: inline-block; background-color: var(--primary); color: var(--white); padding: 0.5rem 1.25rem; border-radius: 2rem; font-size: 1.5rem; font-weight: 400; margin-bottom: 2rem; box-shadow: 0 0.25rem 1rem rgba(74, 117, 180, 0.4); text-transform: uppercase; letter-spacing: 0.0625rem; }
#hero-main .hero-main-tit { text-align: center; font-size: 3.5rem; font-weight: 500; line-height: 1.25; margin-bottom: 2.5rem; letter-spacing: -0.0625rem; max-width: 65rem; text-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.6); }
#hero-main .hero-main-tit span { color: #fff; text-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.6); }
#hero-main .hero-main-tit .accent { color: var(--accent); font-weight: 700; text-shadow: 0 0rem 0.75rem rgba(255, 255, 255, 0.4); }
#hero-main .hero-sub-tit { text-align: center; font-size: 1.5rem; font-weight: 400; line-height: 1.5; margin-bottom: 2.5rem; letter-spacing: -0.03125rem; max-width: 65rem; text-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.6); }

.hero-check-list { display: flex; gap: 2rem; font-weight: 500; font-size: 1.1875rem; color: #ffffff; flex-wrap: wrap; justify-content: center; background: rgba(255, 255, 255, 0.08); padding: 1.25rem 2.5rem; border-radius: 3rem; backdrop-filter: blur(0.5rem); border: 0.0625rem solid rgba(255, 255, 255, 0.15); }

.floating-side-panel { position: fixed; top: 50vh; right: 2.5rem; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1rem; z-index: 900; background: rgba(11, 19, 41, 0.85); backdrop-filter: blur(0.75rem); -webkit-backdrop-filter: blur(0.75rem); padding: 1.25rem 1rem; border-radius: 2rem; border: 0.0625rem solid rgba(255, 255, 255, 0.15); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.3); }
.floating-side-panel .side-nav { display: flex; flex-direction: column; gap: 0.5rem; }
.floating-side-panel .side-nav a { position: relative; display: flex; align-items: center; justify-content: flex-end; padding: 0.5rem 0.875rem; font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.6); text-decoration: none; border-radius: 1.5rem; transition: all 0.3s ease; white-space: nowrap; }
.floating-side-panel .side-nav a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); }
.floating-side-panel .side-nav a.active { color: #ffffff; background: var(--accent); font-weight: 700; box-shadow: 0 0.25rem 1rem rgba(198, 0, 77, 0.4); transform: translateX(-0.25rem); }
.floating-side-panel .panel-divider { width: 100%; height: 0.0625rem; background: rgba(255, 255, 255, 0.15); margin: 0.25rem 0; }
.floating-side-panel .side-quick { display: flex; flex-direction: column; gap: 0.5rem; }
.floating-side-panel .side-quick .quick-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 0.875rem; background: rgba(255, 255, 255, 0.08); border: 0.0625rem solid rgba(255, 255, 255, 0.12); border-radius: 1.5rem; color: #fff; text-decoration: none; font-size: 0.85rem; font-weight: 600; transition: all 0.3s ease; white-space: nowrap; }
.floating-side-panel .side-quick .quick-btn:hover { background: rgba(255, 255, 255, 0.2); transform: translateX(-0.25rem); }
.floating-side-panel .side-quick .quick-btn.estimate { background: var(--accent); border-color: var(--accent); }
.floating-side-panel .side-quick .quick-btn.estimate:hover { background: #e03e5c; }
.floating-side-panel .side-quick .quick-btn .icon { font-size: 1rem; }


#promo-banner.section {max-width: none;  position: relative; /* background: linear-gradient(135deg, #0b1329 0%, #172554 100%); */ display: flex; align-items: center; justify-content: center;  color: #ffffff; }
.promo-bg-glow { position: absolute; width: 45rem; height: 45rem; background: rgba(59, 130, 246, 0.15); border-radius: 50%; filter: blur(80px); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.promo-container { position: relative; z-index: 2; width: 100%; max-width:90rem; display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: center; }
.promo-image-wrapper { width: 100%; display: flex; justify-content: center; align-items: center; }
.tv-mockup-img { width: 45rem; height: 30rem; border: 0.0625rem solid rgba(255, 255, 255, 0.15); border-radius: 1.5rem; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: 600; color: #93c5fd; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.4); overflow:hidden; }
.tv-mockup-img img {object-fit: cover; width: 100%; height: 100%; }
.promo-content-wrapper { display: flex; flex-direction: column; gap: 1.5rem; }
.promo-badge { display: inline-block; background-color: var(--accent); color: var(--white); padding: 0.375rem 1rem; border-radius: 2rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.0625rem; width: fit-content; box-shadow: 0 0.25rem 0.75rem rgba(198, 0, 77, 0.4); }
.promo-content-wrapper h2 { font-size: 2.5rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.03125rem; color: #000; }
.promo-content-wrapper h2 strong { color: var(--primary); font-weight: 700; }
.promo-desc { font-size: 1.5rem; color: #000; line-height: 1.7; }
.promo-highlight-card { background: rgb(198, 0, 77, 0.05);  border: 0.0625rem solid var(--accent); border-radius: 1rem; padding: 1.5rem 1.75rem; backdrop-filter: blur(0.5rem); }
.highlight-tag { display: block; font-size: 1rem; font-weight: 700; color: var(--accent); letter-spacing: 0.0625rem; margin-bottom: 0.5rem; }
.highlight-text { font-size: 1.25rem; color: #000; line-height: 1.6; }
.highlight-text strong { color: var(--primary); font-weight: 700; }
.promo-cta-btn { display: inline-block; background-color: var(--accent); color: var(--white); padding: 1rem 2.5rem; border-radius: 2rem; font-weight: 700; font-size: 1.125rem; text-decoration: none; text-align: center; box-shadow: 0 0.5rem 1.5rem rgba(198, 0, 77, 0.3); transition: transform 0.3s, background-color 0.3s; width: fit-content; }
.promo-cta-btn:hover { transform: translateY(-0.2rem); background-color: var(--accent); }

.section {width:100%; padding: 6rem 0rem; max-width: 80rem; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.section-header { text-align: center; margin-bottom: 4rem; width: 100%; }
.section-header h2 { font-size: 2.75rem; font-weight: 700; color: #000; margin-bottom: 1rem; letter-spacing: -0.03125rem; }
.section-header p { font-size: 1.5rem; color: var(--text-sub); }

.fullscreen-network-section { width: 100%; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 6rem 3rem; position: relative; }
.fullscreen-network-section::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/iptv/network_bg.png) center / cover no-repeat; opacity: 1; z-index: 0; filter: invert(0.9) brightness(0.9); }
.fullscreen-network-section > * { position: relative; z-index: 1; }
.fullscreen-network-section h2 { font-size: 2.75rem; font-weight: 700; color: #000; margin-bottom: 3.5rem; text-align: center; letter-spacing: -0.03125rem; }
.network-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; width: 100%; max-width: 95rem; margin-bottom: 2.5rem; }
.network-card { gap: 0.5rem; background: rgba(255, 255, 255, 0.98); border-radius: 1rem; padding: 1.25rem; text-align: center; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.15); transition: transform 0.3s; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.network-card:hover { transform: translateY(-0.5rem); }
.network-card-img { width: 100%; height: 7.5rem; background: #e2e8f0; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 700; color: #64748b; overflow: hidden; }
.network-card-img img { width: 100%; height: 100%; object-fit: cover; }
.network-card-title { font-size: 1rem; font-weight: 700; color: var(--accent); letter-spacing: -0.03125rem; }

/* 블러 효과와 투명도가 확실하게 먹도록 개선된 하단 레이어 */
.fullscreen-network-section .layer { width: 100%; max-width: 95rem; padding: 1.75rem 2.5rem; background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); transform: translateZ(0); border-radius: 1rem; text-align: center; box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.08), 0 0 1.25rem rgba(255, 77, 109, 0.2); border: 0.0625rem solid var(--accent, #ff4d6d); }
.fullscreen-network-section .layer p { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }


#features {background: var(--accent); max-width: none;}
#features::after {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:url(../images/iptv/network_bg.png) center / cover no-repeat;  opacity:1; z-index: 0; filter: invert(0.9) brightness(0.9); }
#features > * {position: relative; z-index: 1; }
#features .section-header {margin-bottom: 2rem; }
#features .section-header h2 {color: #fff; }
#features .section-header p {color: #ccc; }
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; width: 100%; max-width: 80rem; }
.bento-card { background: var(--bg-light); border: 0.0625rem solid var(--border); padding: 2rem; border-radius: 1.25rem; transition: transform 0.3s; }
.bento-card:hover { transform: translateY(-0.25rem); }
.bento-card.featured { background: rgba(11, 19, 41, 0.75); color: var(--white); }
.bento-card.featured p, .bento-card.featured h3 { color: var(--white); }
.bento-tag { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.0625rem; margin-bottom: 0.5rem; display: block; color: var(--accent); }
.bento-card.featured .bento-tag { color: #ffccd5; }
.bento-card h3 { font-size: 1.7rem; font-weight: 700; margin-bottom: 0.5rem; }
.bento-card p { font-size: 1.25rem; color: var(--text-sub); line-height: 1.7; }
.bento-card.featured p { color: rgba(255, 255, 255, 0.9); }
.bento-card.wide {grid-column: span 2; }

.timeline-section { background-color: var(--bg-light); width: 100%; max-width: none; position: relative; overflow: hidden;  }
.timeline-section .timeline-container { width: 100%;  margin: 0 auto; }
.timeline-section .process-wrap { display: flex; flex-direction: column; position: relative; }
.timeline-section .process-row { justify-content: center; position: relative; width: 100%; min-height: 100vh; background-position: center center; background-size: cover; background-repeat: no-repeat; overflow: hidden; display: flex; align-items: center; padding: 4rem 15rem ; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15); }
.timeline-section .process-row.reverse { /* justify-content: flex-end; */ }
.timeline-section .process-container {max-width: 80rem; width: 100%; display: flex; align-items: center; justify-content:end; }
.timeline-section .process-bg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(11, 19, 41, 0.5) 0%, rgba(23, 37, 84, 0.3) 100%); z-index: 1; pointer-events: none; }
.timeline-section .process-text-card { position: relative; z-index: 2; width: 100%; max-width: 50rem; background: rgba(255, 255, 255, 0.8); border: 0.0625rem solid rgba(255, 255, 255, 0.8); padding: 3rem; border-radius: 1.5rem; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2); transition: transform 0.3s ease; }
.timeline-section .process-text-card:hover { transform: translateY(-0.3rem); }
.timeline-section .timeline-num { font-size: 1.5rem; font-weight: 900; color: var(--accent); margin-bottom: 1.25rem; line-height: 1;  }
.timeline-section .process-text-card h3 { font-size: 2rem; font-weight: 800; margin-bottom: 1.25rem; color: var(--text-main); letter-spacing: -0.03125rem; line-height: 1.3; }
.accent { color: var(--accent); word-break: keep-all; word-wrap: break-word; vertical-align: top; }
.timeline-section .process-text-card p { font-size: 1.25rem; color: var(--text-sub); line-height: 1.75; word-break: keep-all; }

.gallery.section {}
.gallery-container { width: 100%; max-width: 80rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; width: 100%; }
.gallery-card { display: flex; flex-direction: column; background: var(--bg-light); border-radius: 1.25rem; overflow: hidden; border: 0.0625rem solid var(--border); }
.gallery-thumb { height: 12rem; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #475569; font-size: 0.9375rem; text-align: center; }
.gallery-thumb img {  width: 100%; height: 100%; object-fit: cover; } 
.gallery-info { padding: 1.25rem; font-size: 1rem; color: var(--text-sub); text-align: center; background: #ffffff; }
.slide-main-title { font-size: 1.25rem; font-weight: 400; color: var(--accent); background:rgb(198, 0, 77, 0.1); border-radius: 999px; border: 1px solid var(--accent); text-align: center; padding:.5rem 2rem; width: fit-content; margin : 0 auto 1.5rem;  }
.gallery-swiper { width: 100%; overflow: hidden; position: relative; padding: 2rem 1.9rem 4rem ;   border:1px solid #ddd; border-radius: 1.25rem; background: #fdfdfd;  }
.gallery-swiper .swiper-slide { height: auto; box-sizing: border-box; margin-right: 2rem!important; flex-shrink: 0; width: 100%;  }
.gallery-swiper .swiper-wrapper { display: flex; width: 100%; }
.swiper-button-next,
.swiper-button-prev { position:absolute; color: var(--accent); background: var(--white); width: 3.5rem; height: 3.5rem; border-radius: 50%; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1); top: 55%; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd;  }
.swiper-button-next::after,
.swiper-button-prev::after { font-size: 1.25rem; font-weight: bold; }
.swiper-button-prev { left: -1.5rem; }
.swiper-button-next { right: -1.5rem; }
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom:1.5rem}
.swiper-pagination-bullet { background: #cbd5e1; opacity: 1; width: 0.75rem; height: 0.75rem; transition: all 0.3s; }
.swiper-pagination-bullet-active { background: var(--accent); width: 2rem; border-radius: 0.375rem; }

.support-banner { background: #111827; color: var(--white); width: 100%; min-height: 40vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 6rem 2rem; text-align: center; position:relative; }
.support-banner > * {position: relative; z-index: 1; }
.support-banner::after {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:url(../images/iptv/support_bg01.png) center / cover no-repeat; opacity:0.3; z-index: 0; }
.support-banner h2 { font-size: 2.75rem; font-weight: 700; margin-bottom: 1.5rem; }
.support-banner p { font-size: 1.5rem; opacity: 0.85; margin-bottom: 2.5rem; }
.support-btn { display: inline-block; background-color: var(--accent); color: var(--white)!important; padding: 1rem 3rem; border-radius: 2rem; font-weight: 700; font-size: 1.125rem; text-decoration: none; }

.consult-container { display: flex; flex-direction: column; gap: 2rem; width: 100%; max-width: 80rem; margin: 0 auto; }
.consult-left { background: var(--bg-light); border: 0.0625rem solid var(--border); padding: 1.5rem 3.5rem ; border-radius: 1.25rem; display: flex; flex-direction: column; justify-content: center; }
.consult-left h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.consult-left p { font-size: 1.2rem; color: var(--text-sub); margin-bottom: 0.5rem; }
.consult-tel { font-size: 3rem; font-weight: 700; color: var(--primary); margin-bottom: 0.5rem; }
.consult-right { background: var(--white); border: 0.0625rem solid var(--border); padding: 3.5rem; border-radius: 1.25rem; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.04); }
.consult-right h3 { font-size: 1.875rem; font-weight: 700; margin-bottom: 2rem; }
.consult-right form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.consult-right .form-row { margin-bottom: 0; }
.consult-right .form-row.full-width { grid-column: span 2; }
.consult-right .form-row label { display: block; font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.consult-right .form-row input, .consult-right .form-row select, .consult-right .form-row textarea { width: 100%; padding: 1rem 1.25rem; border: 0.0625rem solid var(--border); border-radius: 0.75rem; background: var(--bg-light); font-size: 1.0625rem; box-sizing: border-box; }
.consult-right .form-row textarea { resize: vertical; }
.consult-right .submit-btn { grid-column: span 2; width: 100%; background-color: var(--accent); color: var(--white); border: none; padding: 1.25rem; border-radius: 0.75rem; font-size: 1.125rem; font-weight: 700; cursor: pointer; margin-top: 0.75rem; }

footer { background-color: #0b0f17; color: #888888; padding: 4rem 2rem; font-size: 0.9375rem; }
.footer-wrap { max-width: 80rem; margin: 0 auto; line-height: 1.8; display: flex; flex-flow: row wrap; gap:1rem;  }
.footer-wrap strong { color: #ffffff; }

.w100 {width: 100%; }

.process-section { padding: 8rem 2rem; background: #f8fafc; color: #1e293b; position: relative; overflow: hidden; }
.process-section::before { content: ""; position: absolute; width: 45rem; height: 45rem; background: rgba(59, 130, 246, 0.05); border-radius: 50%; filter: blur(80px); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.process-section .process-container { max-width: 85rem; margin: 0 auto; position: relative; z-index: 2; }
.process-header { text-align: center; margin-bottom: 3rem; }
.process-header .sub-title { font-size: 1.125rem; font-weight: 700; color: var(--accent, #ff4d6d); letter-spacing: 0.2em; display: block; margin-bottom: 1rem; text-transform: uppercase; }
.process-header .main-title { font-size: 3rem; font-weight: 800; color: #0f172a; line-height: 1.3; letter-spacing: -0.03em; margin-bottom: 0;  }
.process-header .highlight { color: var(--accent, #ff4d6d); text-shadow: none; vertical-align: top; }
.process-section .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.process-section .process-card { background: #ffffff; border: 0.0625rem solid #e2e8f0; padding: 2.5rem 2rem; border-radius: 1.25rem; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.03); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; }
.process-section .process-card:hover { transform: translateY(-0.625rem); background: #ffffff; border-color: var(--accent, #ff4d6d); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.08); }
.process-section .step-num { font-size: 1.25rem; font-weight: 800; color: var(--accent, #ff4d6d); margin-bottom: 1.25rem; letter-spacing: 0.05em; }
.process-section .process-card h3 { font-size: 1.625rem; font-weight: 700; color: #0f172a; margin-bottom: 1rem; letter-spacing: -0.02em; }
.process-section .process-card p { font-size: 1.125rem; color: #64748b; line-height: 1.6; font-weight: 400; }


.service-intro-section { padding: 8rem 2rem; background: #f8fafc; color: #0f172a; position: relative; overflow: hidden; }
.service-intro-container { max-width: 85rem; margin: 0 auto; }
.service-intro-header { text-align: center; margin-bottom: 3.5rem; }
.service-intro-header .sub-title { font-size: 1.125rem; font-weight: 700; color: var(--accent, #ff4d6d); letter-spacing: 0.2em; display: block; margin-bottom: 1rem; text-transform: uppercase; }
.service-intro-header .main-title { font-size: 2.75rem; font-weight: 800; color: #0f172a; line-height: 1.35; letter-spacing: -0.03em; }
.service-intro-header .highlight { color: var(--accent, #ff4d6d); text-shadow: none; }
.target-facilities { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0 auto 5rem auto; }
.target-facilities .facility-badge { background: #ffffff; border: 0.0625rem solid #e2e8f0; padding: 0.75rem 1.25rem; border-radius: 2rem; font-size: 1rem; font-weight: 600; color: #475569; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.03); transition: all 0.3s ease; }
.target-facilities .facility-badge:hover { background: var(--accent, #ff4d6d); border-color: var(--accent, #ff4d6d); color: #fff; transform: translateY(-0.25rem); box-shadow: 0 0.5rem 1.5rem rgba(255, 77, 109, 0.25); }
.carrier-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.carrier-card { background: #ffffff; border: 0.0625rem solid #e2e8f0; padding: 2.5rem 2rem; border-radius: 1.25rem; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.03); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; }
.carrier-card:hover { transform: translateY(-0.5rem); background: #ffffff; border-color: var(--accent, #ff4d6d); box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.08); }
.carrier-card .carrier-tag { display: inline-block; font-size: 0.85rem; font-weight: 800; color: var(--accent, #ff4d6d); background: rgba(255, 77, 109, 0.08); padding: 0.375rem 0.875rem; border-radius: 1rem; margin-bottom: 1.25rem; letter-spacing: 0.05em; }
.carrier-card h3 { font-size: 1.75rem; font-weight: 800; color: #0f172a; margin-bottom: 1.5rem; letter-spacing: -0.02em; }
.carrier-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.875rem; }
.carrier-features li { position: relative; padding-left: 1.5rem; font-size: 1.1rem; font-weight: 500; color: #334155; }
.carrier-features li::before { content: "✓"; position: absolute; left: 0; color: var(--accent, #ff4d6d); font-weight: 800; }


.maintenance-section { width: 100%; padding: 7rem 2rem; position: relative; background: #0b132b; display: flex; justify-content: center; align-items: center; height: 100vh; }
.maintenance-inner { width: 100%; max-width: 90rem; display: flex; flex-direction: column; align-items: center; }
.maintenance-header { text-align: center; max-width: 55rem; margin-bottom: 4rem; }
.maintenance-badge { display: inline-block; font-size: 0.85rem; font-weight: 800; color: var(--accent, #ff4d6d); background: rgba(255, 77, 109, 0.1); padding: 0.375rem 1rem; border-radius: 1rem; margin-bottom: 1.25rem; letter-spacing: 0.05em; }
.maintenance-header h2 { font-size: 2.75rem; font-weight: 800; color: #ffffff; line-height: 1.3; margin-bottom: 1.5rem; letter-spacing: -0.03125rem; }
.maintenance-header h2 span { color: var(--accent, #ff4d6d); }
.maintenance-desc { font-size: 1.125rem; font-weight: 400; color: #cbd5e1; line-height: 1.7; letter-spacing: -0.01em; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; width: 100%; margin-bottom: 3rem; }
.pricing-card { background: rgba(255, 255, 255, 0.04); border: 0.0625rem solid rgba(255, 255, 255, 0.1); padding: 3rem 2rem; border-radius: 1.5rem; backdrop-filter: blur(0.75rem); -webkit-backdrop-filter: blur(0.75rem); display: flex; flex-direction: column; align-items: flex-start; position: relative; transition: all 0.3s ease; }
.pricing-card:hover { transform: translateY(-0.5rem); border-color: var(--accent, #ff4d6d); background: rgba(255, 255, 255, 0.07); box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.4); }
.pricing-card.popular { border-color: var(--accent, #ff4d6d); background: rgba(255, 77, 109, 0.05); }
.plan-badge { position: absolute; top: -0.75rem; right: 2rem; background: var(--accent, #ff4d6d); color: #fff; font-size: 0.75rem; font-weight: 800; padding: 0.25rem 0.75rem; border-radius: 1rem; letter-spacing: 0.05em; }
.plan-name { font-size: 1.5rem; font-weight: 800; color: #ffffff; margin-bottom: 0.25rem; letter-spacing: -0.02em; }
.plan-type { font-size: 1.1rem; font-weight: 700; color: var(--accent, #ff4d6d); margin-bottom: 1.25rem; }
.plan-desc { font-size: 1rem; color: #94a3b8; line-height: 1.6; margin: 0; }
.pricing-notice { text-align: center; }
.pricing-notice p { font-size: 1.1rem; font-weight: 600; color: #f8fafc; background: rgba(255, 255, 255, 0.06); padding: 1rem 2rem; border-radius: 3rem; border: 0.0625rem solid rgba(255, 255, 255, 0.1); display: inline-block; margin: 0; }
/*  */
.history-section { padding: 8rem 2rem; background: #ffffff; color: #0f172a; position: relative; overflow: hidden; }
.history-container { max-width: 85rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.history-header { text-align: center;  margin-bottom: 4rem; }
.history-header h2 { font-size: 2.75rem; font-weight: 800; color: #0f172a; line-height: 1.35; letter-spacing: -0.03em; margin-bottom: 1.25rem; }
.history-header .highlight { color: var(--accent, #ff4d6d); }
.history-header p { font-size: 1.125rem; color: #475569; line-height: 1.6; }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; width: 100%; margin-bottom: 5rem; }
.stat-card { background: #1b3167; color: #fff; padding: 2.5rem 1.5rem; border-radius: 1rem; text-align: center; box-shadow: 0 1rem 2.5rem rgba(27, 49, 103, 0.2); transition: transform 0.3s; }
.stat-card:hover { transform: translateY(-0.3125rem); }
.stat-value { font-size: 2.5rem; font-weight: 800; color: #ffffff; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
.stat-label { font-size: 1rem; font-weight: 600; color: #cbd5e1; }

.history-sub-title { font-size: 0.9rem; font-weight: 800; color: var(--accent, #ff4d6d); letter-spacing: 0.15em; margin-bottom: 3rem; text-transform: uppercase; text-align: center; }

.timeline-wrapper { position: relative; width: 100%; margin-bottom: 4rem; padding-left: 5rem; }
.timeline-line { position: absolute; left: 1.875rem; top: 0.5rem; bottom: 0.5rem; width: 0.125rem; background: #e2e8f0; }
.timeline-item { position: relative; margin-bottom: 2.5rem; display: flex; align-items: flex-start; }
.timeline-year { position: absolute; left: -5rem; top: 0.25rem; font-size: 1.5rem; font-weight: 800; color: #0f172a; width: 3.5rem; text-align: right; }
.timeline-dot { position: absolute; left: -3.5rem; top: -.3rem; width: 0.75rem; height: 0.75rem; background: var(--accent, #ff4d6d); border-radius: 50%; border: 0.1875rem solid #ffffff; box-shadow: 0 0 0 0.125rem var(--accent, #ff4d6d); z-index: 2; }
.timeline-content { width: 100%; background: #f8fafc; border: 0.0625rem solid #e2e8f0; border-radius: 1rem; padding: 2rem; box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.02); }
.timeline-content h3 { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin-bottom: 0.875rem; }
.timeline-content ul { list-style: disc; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.timeline-content li { font-size: 1rem; color: #475569; }

.timeline-content.pink-box { background: #fff5f7; border-color: rgba(255, 77, 109, 0.3); }
.timeline-content.pink-box h3 { color: var(--accent, #ff4d6d); }
.timeline-content.pink-box li { color: #334155; font-weight: 500; }

.history-footer-banner { width: 100%; background: #f8fafc; border: 0.0625rem solid #e2e8f0; border-radius: 1rem; padding: 3rem 2rem; text-align: center; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.03); display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.footer-badge { font-size: 0.8rem; font-weight: 800; color: var(--accent, #ff4d6d); letter-spacing: 0.15em; }
.history-footer-banner h3 { font-size: 1.5rem; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; }
.history-footer-banner p { font-size: 0.95rem; color: #64748b; font-weight: 500; margin: 0; }

.as-range-section { width: 100%; padding: 7rem 2rem; background: #f8fafc; color: #0f172a; display: flex; justify-content: center; align-items: center; }
.as-range-container { width: 100%; max-width: 65rem; display: flex; flex-direction: column; align-items: center; }
.as-range-header { text-align: center; margin-bottom: 3rem; }
.as-range-badge { display: inline-block; font-size: 0.85rem; font-weight: 800; color: var(--accent, #ff4d6d); background: rgba(255, 77, 109, 0.08); padding: 0.375rem 1rem; border-radius: 1rem; margin-bottom: 1rem; letter-spacing: 0.05em; }
.as-range-header h2 { font-size: 2.75rem; font-weight: 800; color: #0f172a; margin-bottom: 0.75rem; letter-spacing: -0.03em; }
.as-range-header p { font-size: 1.125rem; color: #64748b; margin: 0; }
.as-table-wrapper { width: 100%; background: #ffffff; border-radius: 1rem; border: 0.0625rem solid #e2e8f0; overflow: hidden; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.03); margin-bottom: 2rem; }
.as-table { width: 100%; border-collapse: collapse; text-align: left; }
.as-table th { background: #f1f5f9; color: #0f172a; font-size: 1rem; font-weight: 700; padding: 1.25rem 2rem; border-bottom: 0.0625rem solid #e2e8f0; }
.as-table td { padding: 1.125rem 2rem; font-size: 1rem; color: #334155; border-bottom: 0.0625rem solid #f1f5f9; }
.as-table tr:last-child td { border-bottom: none; }
.as-table .category-name { font-weight: 700; color: #0f172a; width: 25%; }
.as-notice { text-align: center; }
.as-notice p { font-size: 1rem; font-weight: 600; color: #e11d48; background: rgba(225, 29, 72, 0.05); padding: 0.875rem 1.5rem; border-radius: 0.5rem; border: 0.0625rem solid rgba(225, 29, 72, 0.15); display: inline-block; margin: 0; }

@media (max-width: 48rem) {
.as-table th, .as-table td { padding: 1rem 1rem; font-size: 0.9375rem; }
.as-range-header h2 { font-size: 1.875rem; }
}


@media (max-width: 48rem) {
.stats-grid { grid-template-columns: 1fr; }
.timeline-wrapper { padding-left: 3rem; }
.timeline-year { left: -3rem; font-size: 1.15rem; width: 2.5rem; }
.timeline-dot { left: -1.3125rem; }
.history-header h2 { font-size: 1.5rem; }
}




@media (max-width: 64rem) {
.floating-side-panel { display: none; }
}

@media (max-width: 75rem) {
.network-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 48rem) {
.network-cards-grid { grid-template-columns: 1fr; }
.fullscreen-network-section h2 { font-size: 2.125rem; }
}


@media (max-width: 64rem) { 
  .process-row, .process-row.reverse { justify-content: center; padding: 3rem 1.5rem; min-height: 32rem; } 
  .process-text-card { max-width: 100%; padding: 2rem; } 
}

@media (max-width: 48rem) {
.consult-right form { grid-template-columns: 1fr; }
.consult-right .form-row.full-width { grid-column: span 1; }
.consult-right .submit-btn { grid-column: span 1; }
}
@media (max-width: 75rem) {
.process-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 48rem) {
.process-grid { grid-template-columns: 1fr; }
.process-header .main-title { font-size: 2.25rem; }
}
@media (max-width: 64rem) {
.carrier-grid { grid-template-columns: 1fr; }
.service-intro-header .main-title { font-size: 2.125rem; }
}

@media (max-width: 48rem) {
.process-grid { grid-template-columns: 1fr; }
.process-header .main-title { font-size: 2.25rem; }
}
@media (max-width: 64rem) {
.pricing-grid { grid-template-columns: 1fr; max-width: 30rem; }
.maintenance-header h2 { font-size: 2.125rem; }
}

@media (max-width: 1024px) {
.nav-links{display: none; }

.floating-side-nav { left: 0.5rem ; padding: 0.5rem; gap: 0.5rem; }
.floating-side-nav a {width: 0.8rem; height: 0.8rem; }

#hero-main h1 {font-size:2.5rem }
#hero-main p,.hero-main-tag {font-size: 1.1rem}
.hero-check-list {font-size: 1rem; gap: 1rem; padding: 1rem 1.75rem; }

.network-cards-grid { grid-template-columns: repeat(3, 1fr); }
.bento-grid { grid-template-columns: 1fr; }
.bento-card.wide { grid-column: span 1; }
.timeline-grid { grid-template-columns: repeat(2, 1fr); }
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
.consult-container { grid-template-columns: 1fr; }
.process-row { grid-template-columns: 1fr; direction: ltr; gap: 2rem; }
.process-row.reverse { grid-template-columns: 1fr; direction: ltr; gap: 2rem; }
.process-row.reverse > * { direction: ltr; }
.process-text { padding: 1rem 0; }

.process-text:first-child {width: 100%!important;}
.process-text .timeline-num, .process-text h3, .process-text p {text-align: center!important;}
.process-row.reverse .process-text {order:-1;}
.swiper-button-next {right:0.5rem;}
.swiper-button-prev {left:0.5rem;}
.promo-container { grid-template-columns: 1fr; gap: 3rem; text-align: center; } 
.promo-content-wrapper { align-items: center; } 
.tv-mockup-img { height: 22rem; } 
} 

@media (max-width: 768px) {
.nav-links { display: none; }
.header {padding: 1rem 0.5rem; }


.header-call {font-size:0.85rem; padding: 0.5rem 1rem ;  }

}

@media (max-width: 500px) {
.network-cards-grid { grid-template-columns: repeat(1, 1fr); gap:1.5rem }
.network-card {padding: 1rem; min-height: 12rem; }
.network-card-img {margin-bottom: 0; }

#hero-main {padding: 4rem 1rem; }
#hero-main h1 {font-size:1.3rem }
#hero-main p {font-size: 0.8rem; margin-bottom: 1.5rem}
#hero-main p > br {display: none; }
.hero-main-tag {font-size: 0.75rem; margin-bottom : 1rem; }
.hero-check-list {font-size: 0.75rem; gap: 0.5rem; padding: 1rem 1.75rem; } 
.section-header {margin-bottom: 2rem; }

.bento-tag {font-size: 0.75rem; margin-bottom: 0.5rem; }
.bento-card h3 {font-size: 1.25rem; margin-bottom: 0.5rem; }
.bento-card p {font-size: 0.9rem; }
.bento-card {padding :1.5rem 2rem }

.bento-grid {gap: 1rem; }
.fullscreen-network-section h2,
.section-header h2 {font-size: 2rem; }
.section-header p {font-size: 0.9rem;}

.process-text h3,.timeline-num {font-size: 1.5rem; }
.process-text p {font-size: 0.9rem;  word-break: keep-all}
.process-text p > br {display: none;; }
.process-wrap {gap: 1rem; }
.process-image-wrap {height: 15rem; }

}