@charset "utf-8";

/* ====================================================================
   MIRAE SOLUTION - Dark Premium Theme
   Prefix: ms_ / ms-
   Palette: deep navy base + cyan/blue/violet gradient
   English comments only (Dreamweaver EUC-KR safe)
   ==================================================================== */

:root {
    --ms-bg:        #070a14;
    --ms-bg2:       #0c1120;
    --ms-bg3:       #11182b;
    --ms-card:      rgba(255,255,255,0.04);
    --ms-card-br:   rgba(255,255,255,0.09);
    --ms-text:      #eef2f8;
    --ms-muted:     #94a0b8;
    --ms-faint:     #5d6a85;
    --ms-blue:      #3b82f6;
    --ms-violet:    #8b5cf6;
    --ms-cyan:      #22d3ee;
}

/* gradient text helper */
.ms-grad-text {
    background: linear-gradient(120deg,#22d3ee 0%,#3b82f6 38%,#8b5cf6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body {
    font-family: 'Noto Sans KR','Malgun Gothic',sans-serif;
    color: var(--ms-text);
    background: var(--ms-bg);
    line-height: 1.7;
    /* keep Korean words unbroken at line ends */
    word-break: keep-all;
    overflow-wrap: break-word;
}
h1, h2, h3, h4, p, span, li, a { word-break: keep-all; }
a { text-decoration: none; }
img { max-width: 100%; }

/* ====================================================================
   GNB  (keeps #top_w_l dark even when head.sub.php scroll script
   tries to add .bg-white / inline black colors -> beaten by !important)
   ==================================================================== */
#top_w_l,
#top_w_l.bg-white {
    background: rgba(7,10,20,0.82) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--ms-card-br);
    transition: box-shadow 0.3s, background 0.3s;
    padding: 0;
    height: 64px;
}

.navbar-brand { display: flex; align-items: center; gap: 11px; padding: 0; }
.ms-logo-mark {
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(120deg,#22d3ee,#3b82f6 45%,#8b5cf6);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 900; color: #fff;
    box-shadow: 0 8px 22px rgba(59,130,246,0.40);
}
.ms-logo-text {
    font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.5px;
}
.ms-logo-text em { font-style: normal; font-weight: 500; color: var(--ms-cyan); }

#top_w_l .nav-link,
.navbar-nav li a {
    color: #c3cde0 !important;
    font-size: 15px; font-weight: 500;
    padding: 0 15px !important; letter-spacing: 0.2px;
    transition: color 0.2s;
}
#top_w_l .nav-link:hover,
.navbar-nav li a:hover { color: #fff !important; }

#top_w_l .dropdown-menu {
    border: 1px solid var(--ms-card-br);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.45);
    padding: 8px 0;
    background: var(--ms-bg3);
    margin-top: 8px;
}
#top_w_l .dropdown-item {
    font-size: 14px; color: #c3cde0 !important; padding: 9px 18px;
}
#top_w_l .dropdown-item:hover {
    background: linear-gradient(120deg,rgba(34,211,238,0.12),rgba(139,92,246,0.12));
    color: #fff !important;
}

.navbar-toggler { border: 1px solid var(--ms-card-br); padding: 4px 8px; }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2322d3ee' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* spacer used by sub pages (matches nav height) */
.ety-mt { height: 64px; }

/* thin gradient line under nav */
.ms_topline {
    position: fixed; top: 64px; left: 0; right: 0; height: 2px; z-index: 99;
    background: linear-gradient(90deg,#22d3ee,#3b82f6 45%,#8b5cf6);
    opacity: 0.9;
}

/* ====================================================================
   Floating quick-contact button
   ==================================================================== */
#ms_float {
    position: fixed; right: 24px; bottom: 30px; z-index: 9999;
    display: flex; flex-direction: column-reverse; align-items: center; gap: 10px;
}
#ms_float_btn {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(120deg,#3b82f6,#8b5cf6);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 22px; color: #fff;
    box-shadow: 0 8px 26px rgba(59,130,246,0.5);
    transition: transform 0.2s;
}
#ms_float_btn:hover { transform: translateY(-3px); }
#ms_float_menu { display: none; }
.ms_float_item a {
    display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none;
}
.ms_float_icon {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--ms-bg3); border: 1px solid var(--ms-card-br);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--ms-cyan);
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.ms_float_label {
    font-size: 10px; color: #c3cde0; font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* ====================================================================
   HERO
   ==================================================================== */
.ms_hero {
    position: relative; min-height: 92vh;
    display: flex; align-items: center;
    padding: 130px 0 90px; overflow: hidden;
    background: radial-gradient(ellipse 90% 60% at 50% 0%, #0d1326 0%, var(--ms-bg) 70%);
}
.ms_hero_bg { position: absolute; inset: 0; z-index: 0; }
.ms_orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; animation: ms_float 14s ease-in-out infinite; }
.ms_orb.a { width: 520px; height: 520px; background: radial-gradient(circle,#3b82f6,transparent 70%); top: -120px; right: -80px; }
.ms_orb.b { width: 460px; height: 460px; background: radial-gradient(circle,#8b5cf6,transparent 70%); bottom: -140px; left: -100px; animation-delay: -5s; }
.ms_orb.c { width: 340px; height: 340px; background: radial-gradient(circle,#22d3ee,transparent 70%); top: 40%; left: 45%; opacity: 0.32; animation-delay: -9s; }
@keyframes ms_float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(30px,-40px); } }
.ms_grid_bg {
    position: absolute; inset: 0; opacity: 0.5;
    background-image: linear-gradient(rgba(255,255,255,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.035) 1px,transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 38%,#000 30%,transparent 80%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 38%,#000 30%,transparent 80%);
}
.ms_hero_inner {
    position: relative; z-index: 10; max-width: 1240px; margin: 0 auto;
    padding: 0 24px; width: 100%;
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
.ms_hero_in_box { max-width: 640px; }

/* hero visual image */
.ms_hero_visual { position: relative; }
.ms_hv_frame {
    position: relative; border-radius: 22px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 34px 80px -24px rgba(0,0,0,0.85), 0 0 0 1px rgba(34,211,238,0.10);
    transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
    transition: transform 0.6s cubic-bezier(.2,.7,.3,1);
}
.ms_hero_visual:hover .ms_hv_frame { transform: perspective(1400px) rotateY(-2deg) rotateX(0deg); }
.ms_hv_frame img { display: block; width: 100%; height: auto; }
.ms_hv_frame::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(140deg,rgba(34,211,238,0.14),transparent 45%,rgba(139,92,246,0.20));
    pointer-events: none;
}
.ms_hv_badge {
    position: absolute; left: -18px; bottom: 26px;
    background: rgba(12,17,32,0.92);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--ms-card-br); border-radius: 14px;
    padding: 14px 20px; box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}
.ms_hv_badge .t { display: block; font-size: 14px; font-weight: 700; color: #fff; }
.ms_hv_badge .d { display: block; font-size: 12px; color: var(--ms-cyan); margin-top: 3px; }

.ms_eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ms-cyan); padding: 7px 16px; border-radius: 999px;
    background: linear-gradient(120deg,rgba(34,211,238,0.14),rgba(139,92,246,0.14));
    border: 1px solid var(--ms-card-br);
}
.ms_eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ms-cyan); box-shadow: 0 0 12px var(--ms-cyan); }

.ms_hero_title {
    font-size: clamp(32px,4.4vw,54px); font-weight: 800; line-height: 1.1;
    letter-spacing: -0.035em; margin: 26px 0 24px; color: #fff;
}
.ms_hero_title .l2 { display: block; }
.ms_hero_title { margin-top: 0; }
.ms_hero_desc { font-size: clamp(15px,1.7vw,18px); color: var(--ms-muted); max-width: 560px; margin-bottom: 36px; }
.ms_hero_desc b { color: #fff; font-weight: 700; }
.ms_hero_btns { display: flex; gap: 14px; flex-wrap: wrap; }
.ms_hero_tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 38px; }
.ms_tag {
    font-size: 13px; color: var(--ms-muted); padding: 8px 15px; border-radius: 999px;
    border: 1px solid var(--ms-card-br); background: var(--ms-card);
}

/* ====================================================================
   Buttons
   ==================================================================== */
.ms_btn_main {
    display: inline-flex; align-items: center; gap: 9px;
    background: linear-gradient(120deg,#22d3ee,#3b82f6 45%,#8b5cf6);
    color: #fff !important; padding: 16px 30px; border-radius: 14px;
    font-size: 16px; font-weight: 700; transition: transform 0.25s, box-shadow 0.25s;
    box-shadow: 0 14px 36px rgba(59,130,246,0.40);
}
.ms_btn_main:hover { transform: translateY(-3px); box-shadow: 0 20px 46px rgba(139,92,246,0.55); text-decoration: none; }
.ms_btn_sub {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--ms-card); border: 1px solid var(--ms-card-br); color: #fff !important;
    padding: 16px 30px; border-radius: 14px; font-size: 16px; font-weight: 700; transition: 0.25s;
}
.ms_btn_sub:hover { background: rgba(255,255,255,0.09); transform: translateY(-3px); text-decoration: none; }

/* ====================================================================
   Stats highlights
   ==================================================================== */
.ms_stats { position: relative; z-index: 5; margin-top: -40px; padding: 0 20px 10px; }
.ms_stats_grid {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(4,1fr); gap: 1px;
    background: var(--ms-card-br); border: 1px solid var(--ms-card-br);
    border-radius: 20px; overflow: hidden;
}
.ms_stat { background: var(--ms-bg2); padding: 34px 20px; text-align: center; }
.ms_stat .num { font-size: clamp(28px,4vw,42px); font-weight: 800; letter-spacing: -0.03em; }
.ms_stat .lbl { font-size: 14px; color: var(--ms-muted); margin-top: 6px; }

/* ====================================================================
   Section shell
   ==================================================================== */
.ms_section { padding: 110px 20px; position: relative; }
.ms_section_alt { background: linear-gradient(180deg,var(--ms-bg),var(--ms-bg2)); }
.ms_container { max-width: 1200px; margin: 0 auto; }
.ms_sec_head { text-align: center; max-width: 680px; margin: 0 auto 60px; }
.ms_sec_head h2 { font-size: clamp(28px,4.4vw,46px); font-weight: 800; letter-spacing: -0.03em; margin: 18px 0 16px; line-height: 1.15; color: #fff; }
.ms_sec_head p { color: var(--ms-muted); font-size: 17px; }

/* ====================================================================
   Services grid
   ==================================================================== */
.ms_serv_grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.ms_serv {
    position: relative; padding: 32px 26px; border-radius: 18px;
    background: var(--ms-card); border: 1px solid var(--ms-card-br);
    transition: transform 0.3s, border-color 0.3s; overflow: hidden;
}
.ms_serv::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: 0.3s; background: linear-gradient(120deg,rgba(34,211,238,0.10),rgba(139,92,246,0.12)); }
.ms_serv:hover { transform: translateY(-6px); border-color: rgba(139,92,246,0.4); }
.ms_serv:hover::before { opacity: 1; }
.ms_serv > * { position: relative; z-index: 1; }
.ms_serv .ic {
    width: 52px; height: 52px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(120deg,rgba(34,211,238,0.14),rgba(139,92,246,0.14));
    border: 1px solid var(--ms-card-br); margin-bottom: 20px;
}
.ms_serv .ic svg { width: 26px; height: 26px; stroke: var(--ms-cyan); fill: none; stroke-width: 2; }
.ms_serv h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: #fff; }
.ms_serv p { font-size: 14px; color: var(--ms-muted); line-height: 1.55; }
.ms_serv .badge_ms {
    display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--ms-cyan);
    padding: 4px 11px; border-radius: 999px; background: rgba(34,211,238,0.10);
}

/* ====================================================================
   Why us
   ==================================================================== */
.ms_why_grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.ms_why_head h2 { font-size: clamp(28px,4.4vw,46px); font-weight: 800; letter-spacing: -0.03em; margin: 18px 0 26px; line-height: 1.15; color: #fff; }
.ms_why_list { display: flex; flex-direction: column; gap: 22px; }
.ms_why_item { display: flex; gap: 18px; }
.ms_why_item .n {
    flex: none; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 18px; background: linear-gradient(120deg,#3b82f6,#8b5cf6); color: #fff;
    box-shadow: 0 8px 20px rgba(59,130,246,0.35);
}
.ms_why_item h4 { font-size: 19px; font-weight: 700; margin-bottom: 5px; color: #fff; }
.ms_why_item p { color: var(--ms-muted); font-size: 15px; }
.ms_why_visual {
    position: relative; border-radius: 22px; padding: 44px;
    background: var(--ms-card); border: 1px solid var(--ms-card-br); overflow: hidden;
}
.ms_why_visual::before { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle,rgba(139,92,246,0.4),transparent 70%); top: -80px; right: -60px; filter: blur(40px); }
.ms_why_visual .big { position: relative; font-size: 60px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.ms_why_visual .sub { position: relative; color: var(--ms-muted); margin-top: 14px; font-size: 15px; }
.ms_mini_bars { position: relative; display: flex; gap: 10px; align-items: flex-end; height: 120px; margin-top: 30px; }
.ms_mini_bars span { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg,#22d3ee,#8b5cf6); opacity: 0.85; }

/* ====================================================================
   Process
   ==================================================================== */
.ms_proc { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
.ms_proc_step { text-align: center; padding: 28px 14px; border-radius: 16px; background: var(--ms-card); border: 1px solid var(--ms-card-br); transition: 0.3s; }
.ms_proc_step:hover { transform: translateY(-5px); border-color: rgba(34,211,238,0.4); }
.ms_proc_step .step_n { font-size: 13px; font-weight: 700; color: var(--ms-cyan); letter-spacing: 0.1em; }
.ms_proc_step h4 { font-size: 17px; font-weight: 700; margin: 10px 0 6px; color: #fff; }
.ms_proc_step p { font-size: 13px; color: var(--ms-muted); }

/* ====================================================================
   Portfolio
   ==================================================================== */
.ms_port_grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.ms_port {
    position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4/3;
    border: 1px solid var(--ms-card-br); background: linear-gradient(135deg,#141b30,#0c1120);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; transition: 0.3s;
}
.ms_port::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg,#22d3ee,#8b5cf6); opacity: 0; transition: 0.3s; mix-blend-mode: overlay; }
.ms_port:hover { transform: translateY(-6px); }
.ms_port:hover::after { opacity: 0.25; }
.ms_port .cat { position: relative; z-index: 2; font-size: 12px; font-weight: 600; color: var(--ms-cyan); letter-spacing: 0.08em; }
.ms_port h4 { position: relative; z-index: 2; font-size: 20px; font-weight: 700; margin-top: 6px; color: #fff; }
.ms_port .deco { position: absolute; top: 24px; right: 24px; font-size: 13px; color: var(--ms-faint); font-weight: 700; }
.ms_more_wrap { text-align: center; margin-top: 44px; }

/* ====================================================================
   CTA
   ==================================================================== */
.ms_cta { position: relative; padding: 140px 20px; overflow: hidden; background: var(--ms-bg); }

/* background video behind the CTA box.
   the clip is line art on solid black, so screen blending drops the black
   and leaves only the growth curve over the dark section.
   hue-rotate shifts the red line toward the brand cyan. */
.ms_cta_video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.9;
    mix-blend-mode: screen;
    filter: grayscale(1) brightness(2.6) contrast(1.15);
    -webkit-mask-image: linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
    mask-image: linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
}
.ms_cta_veil {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(180deg,var(--ms-bg) 0%,rgba(7,10,20,0) 26%,rgba(7,10,20,0) 74%,var(--ms-bg) 100%),
        radial-gradient(ellipse 70% 60% at 50% 50%,rgba(59,130,246,0.16),transparent 70%);
}
.ms_cta_box {
    z-index: 2;
    position: relative; max-width: 840px; margin: 0 auto;
    border-radius: 28px; padding: 70px 50px; text-align: center;
    background: linear-gradient(120deg,rgba(10,15,28,0.80),rgba(14,20,38,0.74));
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.14); overflow: hidden;
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.8);
}
.ms_cta_box::before { content: ""; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle,rgba(59,130,246,0.45),transparent 70%); top: -150px; left: 50%; transform: translateX(-50%); filter: blur(50px); }
.ms_cta_box > * { position: relative; z-index: 1; }
.ms_cta_box h2 { font-size: clamp(28px,4.6vw,46px); font-weight: 800; letter-spacing: -0.03em; margin: 18px 0; color: #fff; }
.ms_cta_box p { color: #c3cde0; font-size: 18px; margin-bottom: 30px; }
.ms_cta_phone { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(24px,3.6vw,34px); font-weight: 800; margin-bottom: 30px; }
.ms_cta_btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ====================================================================
   Footer info bar + footer
   ==================================================================== */
#ms_footer_info { background: var(--ms-bg2); border-top: 1px solid var(--ms-card-br); padding: 46px 20px; }
.ms_fi_inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; }
.ms_fi_col_title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 16px; letter-spacing: 0.5px; }
.ms_fi_phone a { font-size: 26px; font-weight: 800; color: var(--ms-cyan); }
.ms_fi_hours { font-size: 13px; color: var(--ms-muted); margin-top: 6px; }
.ms_fi_btns { display: flex; gap: 10px; margin-top: 16px; }
.ms_fi_btn { padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.ms_fi_btn_main { background: linear-gradient(120deg,#3b82f6,#8b5cf6); color: #fff !important; }
.ms_fi_btn_sub { background: var(--ms-card); border: 1px solid var(--ms-card-br); color: #fff !important; }
.ms_fi_item { font-size: 14px; color: var(--ms-muted); margin-bottom: 10px; }
.ms_fi_item strong { color: var(--ms-cyan); }
.ms_fi_links a { display: block; color: var(--ms-muted); font-size: 14px; margin-bottom: 10px; transition: color 0.2s; }
.ms_fi_links a:hover { color: var(--ms-cyan); }

.ms_footer { background: var(--ms-bg); border-top: 1px solid var(--ms-card-br); padding: 40px 20px; }
.ms_footer_inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.ms_footer_left { color: var(--ms-faint); }
.ms_footer_info { font-size: 13px; color: var(--ms-muted); line-height: 1.9; margin: 10px 0; }
.ms_footer_info a { color: var(--ms-muted); }
.ms_footer_make { font-size: 13px; color: var(--ms-faint); }
.ms_footer_make a { color: var(--ms-cyan); }
.ms_footer_right { text-align: right; }
.ms_footer_logo { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
.ms_footer_logo em { font-style: normal; color: var(--ms-cyan); }
.ms_footer_logo_sub { font-size: 13px; color: var(--ms-muted); margin-top: 6px; }
/* visitor counter (visit('theme/basic')) text in dark footer */
.ms_footer #visit dt { color: var(--ms-muted) !important; }
.ms_footer #visit dd { color: var(--ms-text) !important; font-weight: 700; }
.ms_footer #visit .btn_admin {
    background: linear-gradient(120deg,#3b82f6,#8b5cf6) !important;
    color: #fff !important; border: 0 !important; border-radius: 8px !important;
}

/* ====================================================================
   Reveal on scroll
   ==================================================================== */
.ms_reveal { opacity: 0; transform: translateY(28px); transition: 0.7s cubic-bezier(.2,.7,.3,1); }
.ms_reveal.in { opacity: 1; transform: none; }

/* ====================================================================
   Gnuboard latest() skin safety inside dark sections
   ==================================================================== */
.ms_section .latest, .ms_section .latest * { color: var(--ms-muted); }
.ms_section .latest a { color: var(--ms-text); }

/* ====================================================================
   Responsive
   ==================================================================== */
@media (max-width: 1199px) {
    .ms_serv_grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 991px) {
    /* clip only horizontal overflow on mobile (no scroll container -> no scroll lag) */
    body { overflow-x: clip; }
    /* lock page scroll while the menu panel is open */
    body.ms_nav_open { overflow: hidden; }

    /* keep the top bar (logo + phone + burger) fixed at 64px */
    #top_w_l { height: 64px !important; }
    #top_w_l > .container { height: 64px; align-items: center; }

    /* bigger, easier to hit burger button */
    .navbar-toggler {
        width: 46px; height: 42px; padding: 0;
        display: flex; align-items: center; justify-content: center;
        border-radius: 11px;
        background: rgba(34,211,238,0.08);
        border: 1px solid rgba(34,211,238,0.30);
        transition: background 0.2s, border-color 0.2s;
    }
    .navbar-toggler:focus { outline: none; box-shadow: none; }
    .navbar-toggler.ms_toggle_on {
        background: linear-gradient(120deg,rgba(34,211,238,0.22),rgba(139,92,246,0.22));
        border-color: rgba(34,211,238,0.6);
    }
    .navbar-toggler-icon { width: 24px; height: 24px; }

    /* drop the menu BELOW the bar as an overlay panel (out of flow),
       so opening it never shifts the logo or phone number */
    #navbarResponsive {
        position: fixed;
        top: 64px; left: 0; right: 0;
        z-index: 1040;
        background: #090d19;
        border-top: 1px solid var(--ms-card-br);
        border-radius: 0 0 20px 20px;
        box-shadow: 0 24px 50px rgba(0,0,0,0.65);
        padding: 10px 0 18px;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: ms_panel_in 0.26s cubic-bezier(.2,.7,.3,1);
    }
    @keyframes ms_panel_in {
        from { opacity: 0; transform: translateY(-12px); }
        to   { opacity: 1; transform: none; }
    }

    .navbar-nav { padding: 6px 14px; width: 100%; }
    /* make sure padding never pushes rows past the screen edge */
    #navbarResponsive, #navbarResponsive * { box-sizing: border-box; }

    /* main menu row : full width, big tap area */
    #top_w_l .navbar-nav > .nav-item { width: 100%; }
    #top_w_l .navbar-nav > .nav-item + .nav-item { border-top: 1px solid rgba(255,255,255,0.07); }
    #top_w_l .navbar-nav > .nav-item > .nav-link,
    .navbar-nav > li > a {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%;
        min-height: 56px;
        padding: 15px 14px !important;
        font-size: 16.5px !important;
        font-weight: 600 !important;
        color: #e4eaf5 !important;
        border-radius: 12px;
        letter-spacing: -0.2px;
    }
    #top_w_l .navbar-nav > .nav-item > .nav-link:active {
        background: rgba(255,255,255,0.06);
    }

    /* custom chevron instead of the tiny bootstrap caret */
    #top_w_l .nav-link.dropdown-toggle::after {
        content: ""; display: block; flex: none;
        width: 9px; height: 9px; margin: 0 4px 0 0;
        border: 0; border-right: 2px solid var(--ms-cyan); border-bottom: 2px solid var(--ms-cyan);
        transform: rotate(45deg) translate(-2px,-2px);
        transition: transform 0.25s ease;
    }
    #top_w_l .nav-item.dropdown.ms_open > .nav-link.dropdown-toggle::after {
        transform: rotate(-135deg) translate(-3px,-3px);
    }
    #top_w_l .nav-item.dropdown.ms_open > .nav-link { color: #fff !important; }

    /* submenu : indented card with comfortable rows */
    #top_w_l .dropdown-menu {
        background: rgba(255,255,255,0.035);
        border: 1px solid rgba(255,255,255,0.07);
        border-radius: 14px;
        box-shadow: none;
        padding: 6px;
        margin: 2px 0 10px;
        width: 100%;
        animation: ms_sub_in 0.22s ease;
    }
    @keyframes ms_sub_in {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: none; }
    }
    #top_w_l .dropdown-item {
        display: flex; align-items: center; gap: 9px;
        min-height: 50px;
        padding: 13px 14px !important;
        font-size: 15.5px !important;
        color: #c3cde0 !important;
        border-radius: 10px;
        white-space: normal;
    }
    #top_w_l .dropdown-item::before {
        content: ""; flex: none;
        width: 5px; height: 5px; border-radius: 50%;
        background: var(--ms-cyan); opacity: 0.65;
    }
    #top_w_l .dropdown-item:active {
        background: linear-gradient(120deg,rgba(34,211,238,0.14),rgba(139,92,246,0.14));
        color: #fff !important;
    }

    /* layout grids */
    .ms_stats_grid { grid-template-columns: repeat(2,1fr); }
    .ms_why_grid { grid-template-columns: 1fr; gap: 40px; }
    .ms_proc { grid-template-columns: repeat(2,1fr); }
    .ms_port_grid { grid-template-columns: repeat(2,1fr); }
    .ms_fi_inner { grid-template-columns: 1fr; gap: 30px; }

    /* hero : stack text over image */
    .ms_hero { min-height: 0; padding: 104px 0 70px; }
    .ms_hero_inner { grid-template-columns: 1fr; gap: 40px; }
    .ms_hero_in_box { max-width: 100%; }
    .ms_hv_frame { transform: none; }
    .ms_hero_visual:hover .ms_hv_frame { transform: none; }
    .ms_hv_badge { left: 12px; bottom: 12px; padding: 11px 16px; }
}
@media (max-width: 640px) {
    .ms_section { padding: 74px 18px; }
    .ms_serv_grid { grid-template-columns: 1fr; }
    .ms_proc { grid-template-columns: 1fr; }
    .ms_port_grid { grid-template-columns: 1fr; }
    .ms_hero_btns { flex-direction: column; }
    .ms_btn_main, .ms_btn_sub { justify-content: center; }
    .ms_cta_box { padding: 44px 22px; }
    .ms_cta { padding: 90px 16px; }
    .ms_hv_badge { left: 10px; bottom: 10px; padding: 10px 14px; }
    .ms_hv_badge .t { font-size: 13px; }
    .ms_hv_badge .d { font-size: 11px; }
    .ms_cta_video { opacity: 0.7; }
    .ms_footer_inner { flex-direction: column; text-align: center; }
    .ms_footer_right { text-align: center; }
}