.gsf-product-tabs-page{
    --p-navy-950:#071A38;
    --p-navy-900:#09265A;
    --p-navy-800:#0C3676;
    --p-blue:#155EAE;
    --p-blue-600:#1E72CC;
    --p-blue-light:#EAF3FF;
    --p-blue-line:#BBD5F2;
    --p-line:#DCE5EF;
    --p-bg:#F5F8FC;
    --p-text:#142239;
    --p-muted:#687990;
    --p-white:#fff;
    --p-shadow:0 20px 60px rgba(8,39,91,.10);
    --p-ease:cubic-bezier(.4,0,.2,1);
    width:100%;
    color:var(--p-text);
    background:#fff;
    overflow:hidden;
}

.gsf-product-tabs-page *,
.gsf-product-tabs-page *::before,
.gsf-product-tabs-page *::after{
    box-sizing:border-box;
}

.gsf-product-tabs-page button,
.gsf-product-tabs-page input,
.gsf-product-tabs-page textarea,
.gsf-product-tabs-page select{
    font:inherit;
}

.gsf-product-tabs-page img{
    max-width:100%;
}

.product-container{
    max-width:1720px;
}


/* =========================================================
   TAB NAV
========================================================= */

.product-tab-wrap{
    position:relative;
    z-index:20;
    padding:0;
	/*padding-top:100px;*/
    background:#fff;
    border-bottom:1px solid #DCE4EE;
}

.product-tabs{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    width:100%;
}

.product-tab{
    position:relative;
    display:flex;
    align-items:center;
    min-height:105px;
    padding:20px 28px;
    border:0;
    border-right:1px solid #E2E8F0;
    background:#fff;
    color:#607087;
    text-align:left;
    cursor:pointer;
    transition:
        background .3s var(--p-ease),
        color .3s var(--p-ease),
        transform .3s var(--p-ease);
}

.product-tab:first-child{
    border-left:1px solid #E2E8F0;
}

.product-tab::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    background:transparent;
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .35s var(--p-ease),background .35s var(--p-ease);
}

.product-tab:hover{
    background:#F7FAFE;
    color:var(--p-navy-900);
}

.product-tab.is-active{
    color:var(--p-navy-900);
    background:linear-gradient(180deg,#F8FBFF,#EDF5FF);
}

.product-tab.is-active::after{
    background:var(--p-blue);
    transform:scaleX(1);
}

.tab-icon{
    flex:0 0 50px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:50px;
    height:50px;
    margin-right:15px;
    border-radius:14px;
    background:#F0F4F8;
    color:#7B8A9E;
    font-size:19px;
    transition:.3s var(--p-ease);
}

.product-tab.is-active .tab-icon{
    color:#fff;
    background:linear-gradient(145deg,var(--p-blue-600),var(--p-navy-800));
    box-shadow:0 8px 20px rgba(21,94,174,.22);
}

.tab-text{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.tab-text small{
    margin-bottom:3px;
    color:#94A0B0;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.4px;
}

.tab-text strong{
    color:inherit;
    font-size:18px;
    font-weight:850;
    line-height:1.25;
    letter-spacing:-.3px;
}

.tab-text em{
    margin-top:4px;
    color:#7D8A9C;
    font-size:10px;
    font-style:normal;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.product-tab.is-active .tab-text em{
    color:var(--p-blue);
}

.tab-arrow{
    margin-left:auto;
    color:#B0BAC7;
    font-size:12px;
    transition:transform .3s var(--p-ease),color .3s var(--p-ease);
}

.product-tab:hover .tab-arrow,
.product-tab.is-active .tab-arrow{
    color:var(--p-blue);
    transform:translateX(4px);
}


/* =========================================================
   PANEL
========================================================= */

.product-panel{
    display:none;
}

.product-panel.is-active{
    display:block;
    animation:productPanelIn .5s var(--p-ease) both;
}

@keyframes productPanelIn{
    from{opacity:0;transform:translateY(10px);}
    to{opacity:1;transform:translateY(0);}
}


/* =========================================================
   HERO
========================================================= */

.product-hero{
    position:relative;
    padding:100px 0 110px;
    background:
        radial-gradient(circle at 75% 50%,rgba(21,94,174,.10),transparent 30%),
        linear-gradient(180deg,#F7FAFE 0%,#fff 100%);
}

.product-hero::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:36%;
    height:100%;
    background:linear-gradient(115deg,rgba(21,94,174,.04),transparent);
    pointer-events:none;
}

.product-hero-grid{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(420px,.92fr);
    align-items:center;
    gap:clamp(50px,7vw,130px);
}

.product-hero-copy{
    position:relative;
    z-index:2;
}

.product-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:16px;
    color:var(--p-blue);
    font-size:12px;
    font-weight:850;
    letter-spacing:1.7px;
}

.product-eyebrow i{
    font-size:13px;
}

.product-hero h1{
    margin:0 0 12px;
    color:var(--p-navy-900);
    font-size:clamp(55px,6vw,96px);
    font-weight:900;
    line-height:.95;
    letter-spacing:-4px;
}

.product-code{
    margin:-3px 0 20px;
    color:var(--p-blue);
    font-size:17px;
    font-weight:500;
}

.product-subtitle{
    margin:0;
    color:#334965;
    font-size:clamp(17px,1vw,24px);
    line-height:1.65;
    letter-spacing:-.5px;
}

.hero-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:30px;
}

.hero-tags span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:42px;
    padding:0 15px;
    border:1px solid var(--p-blue-line);
    border-radius:22px;
    background:#fff;
    color:var(--p-navy-900);
    font-size:12px;
    font-weight:700;
}

.hero-tags i{
    color:var(--p-blue);
}

.product-visual{
    position:relative;
    min-width:0;
}

.visual-device{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:390px;
    padding:50px;
    overflow:hidden;
    border:1px solid #19345E;
    background:
        radial-gradient(circle at 50% 50%,rgba(44,134,232,.13),transparent 40%),
        linear-gradient(145deg,#fff,#F1F5FA);
    box-shadow:var(--p-shadow);
}

.visual-device::before{
    content:"";
    position:absolute;
    inset:18px;
    border:1px solid rgba(21,94,174,.16);
}

.visual-device b{
    position:relative;
    z-index:2;
    color:#fff;
    font-size:24px;
    font-weight:900;
    letter-spacing:-.5px;
}

.visual-device small{
    position:relative;
    z-index:2;
    margin-top:5px;
    color:#B8D3F1;
    font-size:8px;
    letter-spacing:1px;
}

.device-tsms{
    width:min(330px,80%);
    min-height:330px;
    margin:auto;
    border-radius:8px 8px 12px 12px;
    background:
        linear-gradient(90deg,rgba(0,0,0,.08),transparent 10%),
        linear-gradient(145deg,#EEF1F4 0%,#B9C2CC 10%,#F8F9FA 28%,#9CA7B3 100%);
    box-shadow:25px 30px 40px rgba(8,25,50,.18);
}

.device-tsms::after{
    content:"";
    position:absolute;
    left:14%;
    right:14%;
    top:13%;
    bottom:12%;
    border-radius:4px;
    background:linear-gradient(145deg,#0C2D63,#071A3B);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);
}

.device-screen{
    position:absolute;
    z-index:3;
    left:22%;
    right:22%;
    top:24%;
    height:26%;
    border:1px solid rgba(111,183,255,.25);
    background:#0B2857;
}

.screen-dot{
    position:absolute;
    left:12px;
    top:10px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#45B77A;
}

.screen-line{
    position:absolute;
    left:12px;
    height:2px;
    background:#2788E7;
}

.line-1{top:35px;width:70%;}
.line-2{top:50px;width:48%;}
.line-3{top:65px;width:60%;}

.device-tsms b{
    position:absolute;
    z-index:5;
    bottom:19%;
}

.device-tsms small{
    position:absolute;
    z-index:5;
    bottom:13%;
}

.device-ssdam{
    width:min(290px,75%);
    min-height:360px;
    margin:auto;
    border-radius:12px;
    background:
        linear-gradient(90deg,#AEB8C3,#F4F5F6 18%,#D7DDE2 58%,#8996A4);
    box-shadow:24px 30px 45px rgba(8,25,50,.18);
}

.device-ssdam::after{
    content:"";
    position:absolute;
    left:13%;
    top:7%;
    width:73%;
    height:80%;
    border-radius:5px;
    background:linear-gradient(145deg,#151E49,#30366F 65%,#0B1735);
}

.device-panel{
    position:absolute;
    z-index:3;
    left:18%;
    top:17%;
    width:64%;
    height:40%;
    border:1px solid rgba(255,255,255,.15);
    background:
        radial-gradient(circle at 30% 30%,rgba(69,171,255,.30),transparent 25%),
        linear-gradient(135deg,#0B204D,#151A46);
}

.device-ssdam b{
    position:absolute;
    z-index:4;
    bottom:20%;
}

.device-ssdam small{
    position:absolute;
    z-index:4;
    bottom:14%;
}

.visual-caption{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:14px;
    color:#718097;
    font-size:10px;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.visual-caption i{
    color:#20A46C;
}


/* Dashboard mock */
.dashboard-frame{
    min-height:370px;
    padding:0;
    overflow:hidden;
    border:1px solid #192C4D;
    border-radius:10px;
    background:#0B1730;
    box-shadow:var(--p-shadow);
}

.dashboard-top{
    display:flex;
    align-items:center;
    height:38px;
    padding:0 15px;
    gap:6px;
    background:#091328;
    color:#fff;
    font-size:9px;
}

.dashboard-top b{
    margin-right:auto;
    color:#BFD7F5;
}

.dashboard-top span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#4E78A9;
}

.dashboard-body{
    position:relative;
    display:grid;
    grid-template-columns:1.35fr .8fr;
    grid-template-rows:80px 1fr 70px;
    gap:10px;
    height:332px;
    padding:12px;
}

.dash-card,
.dash-chart,
.dash-table{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(126,173,225,.18);
    border-radius:5px;
    background:#101F3B;
}

.dash-card::before,
.dash-chart::before,
.dash-table::before{
    content:"";
    position:absolute;
    left:10px;
    right:10px;
    bottom:15px;
    height:2px;
    background:#2684DD;
    box-shadow:
        30px -12px 0 #3F9EEA,
        55px -4px 0 #1D67B7,
        90px -20px 0 #51B0FF,
        125px -7px 0 #286BAE;
}

.dash-card::after{
    content:"";
    position:absolute;
    left:10px;
    top:13px;
    width:35%;
    height:6px;
    border-radius:3px;
    background:#213D65;
}

.dash-card.wide{
    grid-column:1 / 2;
}

.dash-chart{
    grid-column:1 / 3;
    grid-row:2 / 3;
    background:
        linear-gradient(transparent 24%,rgba(94,142,192,.10) 25%,transparent 26%),
        linear-gradient(90deg,transparent 24%,rgba(94,142,192,.08) 25%,transparent 26%),
        #0E1C35;
}

.dash-chart::before{
    bottom:70px;
    height:2px;
    transform:rotate(-8deg);
    transform-origin:left;
    box-shadow:
        40px 12px 0 #2786DF,
        85px -5px 0 #45A9FF,
        130px 15px 0 #2A6EB6,
        180px -17px 0 #51B0FF,
        240px -2px 0 #2C83D5;
}

.dash-table{
    grid-column:1 / 3;
    grid-row:3 / 4;
}

.fdc-dashboard{
    background:#0A1730;
}


/* =========================================================
   COMMON SECTIONS
========================================================= */

.product-section{
    padding:120px 0 130px;
    background:#fff;
}

.product-section:nth-child(even){
    background:#F7FAFE;
}

.section-heading{
    max-width:820px;
    margin:0 auto 55px;
}

.section-heading.center{
    text-align:center;
}

.section-kicker{
    display:inline-block;
    margin-bottom:14px;
    color:var(--p-blue);
    font-size:11px;
    font-weight:850;
    letter-spacing:1.8px;
}

.section-heading h2{
    margin:0 0 12px;
    color:var(--p-navy-900);
    font-size:clamp(28px,3vw,45px);
    font-weight:850;
    line-height:1.3;
    letter-spacing:-1.5px;
}

.section-heading h2 em{
    color:#8B98A9;
    font-style:normal;
    font-weight:500;
}

.section-heading h2 strong{
    color:var(--p-blue);
}

.section-heading p{
    margin:0;
    color:var(--p-muted);
    font-size:15px;
    line-height:1.75;
}


/* =========================================================
   COMPARE
========================================================= */

.compare-layout{
    display:grid;
    grid-template-columns:1fr 70px 1fr;
    align-items:center;
    gap:20px;
}

.compare-card{
    min-height:360px;
    padding:30px;
    border:1px solid var(--p-line);
    border-radius:18px;
    background:#fff;
    box-shadow:0 15px 45px rgba(8,39,91,.06);
}

.compare-card.after{
    border-color:#AFCFF0;
    background:linear-gradient(145deg,#fff,#F1F7FF);
}

.compare-title{
    display:flex;
    align-items:center;
    gap:13px;
    padding-bottom:20px;
    border-bottom:1px solid var(--p-line);
}

.compare-title > i{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 47px;
    width:47px;
    height:47px;
    border-radius:13px;
    background:#F0F3F6;
    color:#7B8798;
}

.compare-card.after .compare-title > i{
    background:#DCEEFF;
    color:var(--p-blue);
}

.compare-title small{
    display:block;
    margin-bottom:3px;
    color:#909DAC;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.5px;
}

.compare-title h3{
    margin:0;
    color:var(--p-navy-900);
    font-size:20px;
    font-weight:800;
}

.detail-list,
.number-list{
    display:flex;
    flex-direction:column;
    gap:9px;
    margin:22px 0 0;
    padding:0;
    list-style:none;
}

.detail-list li,
.number-list li{
    padding:13px 15px;
    border-radius:9px;
    background:#F6F8FA;
}

.compare-card.after .detail-list li,
.compare-card.after .number-list li{
    background:#EAF3FF;
}

.detail-list b,
.number-list b{
    display:block;
    margin-bottom:3px;
    color:#35445A;
    font-size:12px;
    font-weight:800;
}

.compare-card.after .detail-list b,
.compare-card.after .number-list b{
    color:var(--p-navy-900);
}

.detail-list span,
.number-list span{
    display:block;
    color:#758398;
    font-size:11px;
    line-height:1.55;
}

.number-list{
    counter-reset:productCounter;
}

.number-list li{
    position:relative;
    padding-left:42px;
}

.number-list li::before{
    content:counter(productCounter);
    counter-increment:productCounter;
    position:absolute;
    left:12px;
    top:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#E0E5EB;
    color:#647287;
    font-size:9px;
    font-weight:800;
}

.compare-middle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:54px;
    height:54px;
    margin:auto;
    border-radius:50%;
    background:var(--p-blue);
    color:#fff;
    box-shadow:0 12px 25px rgba(21,94,174,.24);
}


/* =========================================================
   FLOW
========================================================= */

.flow-section{
    background:
        radial-gradient(circle at 50% 0,rgba(21,94,174,.07),transparent 35%),
        #F5F8FC !important;
}

.flow-grid{
    display:grid;
    grid-template-columns:minmax(170px,.8fr) 40px minmax(300px,1.35fr) 40px minmax(170px,.8fr);
    align-items:stretch;
    gap:14px;
}

.flow-box{
    position:relative;
    min-height:255px;
    padding:25px;
    border:1px solid var(--p-line);
    border-radius:16px;
    background:#fff;
    box-shadow:0 15px 40px rgba(8,39,91,.06);
}

.flow-box.featured{
    color:#fff;
    border-color:#376EAE;
    background:linear-gradient(145deg,#082458,#0D3E80);
    box-shadow:0 20px 50px rgba(8,39,91,.20);
}

.flow-num{
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    margin-bottom:14px;
    border-radius:50%;
    background:#EAF3FF;
    color:var(--p-blue);
    font-size:9px;
    font-weight:900;
}

.featured .flow-num{
    background:rgba(255,255,255,.14);
    color:#BBDFFF;
}

.flow-big-icon{
    display:block;
    margin-bottom:12px;
    color:var(--p-blue);
    font-size:25px;
}

.featured .flow-big-icon{
    color:#6EB9FF;
}

.flow-box h3{
    margin:0 0 10px;
    color:var(--p-navy-900);
    font-size:19px;
    font-weight:850;
}

.featured h3{
    color:#fff;
}

.flow-box p{
    margin:0 0 13px;
    color:#718096;
    font-size:11px;
    line-height:1.7;
}

.featured p{
    color:rgba(255,255,255,.68);
}

.flow-box > strong{
    color:var(--p-blue);
    font-size:12px;
}

.flow-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--p-blue);
}

.mini-features{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.mini-features span{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 11px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:9px;
    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.78);
    font-size:10px;
}

.mini-features i{
    color:#75BDFF;
}


/* =========================================================
   BENEFITS / INFO CARDS
========================================================= */

.benefit-grid,
.info-card-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:17px;
}

.benefit-card{
    position:relative;
    min-height:285px;
    padding:28px;
    overflow:hidden;
    border:1px solid var(--p-line);
    border-radius:17px;
    background:#fff;
    box-shadow:0 15px 40px rgba(8,39,91,.05);
    transition:.35s var(--p-ease);
}

.benefit-card:hover{
    transform:translateY(-7px);
    border-color:#9FC4E9;
    box-shadow:0 24px 55px rgba(8,39,91,.12);
}

.benefit-card > b{
    position:absolute;
    top:23px;
    right:23px;
    color:#B6C4D5;
    font-size:10px;
}

.benefit-card > i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    margin-bottom:22px;
    border-radius:14px;
    background:#EAF3FF;
    color:var(--p-blue);
    font-size:19px;
}

.benefit-card h3{
    margin:0 0 14px;
    color:var(--p-navy-900);
    font-size:18px;
    line-height:1.4;
}

.benefit-card p{
    margin:0;
    color:#708096;
    font-size:12px;
    line-height:1.8;
}

.info-card{
    min-height:260px;
    padding:25px;
    border:1px solid var(--p-line);
    border-radius:16px;
    background:#fff;
    box-shadow:0 12px 35px rgba(8,39,91,.045);
}

.info-card > i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:45px;
    height:45px;
    margin-bottom:17px;
    border-radius:12px;
    background:#EAF3FF;
    color:var(--p-blue);
    font-size:18px;
}

.info-card h3{
    margin:0 0 15px;
    color:var(--p-navy-900);
    font-size:15px;
    line-height:1.4;
}

.info-card ul{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:0;
    padding:0;
    list-style:none;
}

.info-card li{
    position:relative;
    padding-left:12px;
    color:#69788C;
    font-size:11px;
    line-height:1.65;
}

.info-card li::before{
    content:"";
    position:absolute;
    left:0;
    top:.75em;
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--p-blue);
}


/* =========================================================
   PROCESS / YMS
========================================================= */

.process-flow{
    display:grid;
    grid-template-columns:1.05fr repeat(4,1fr) 1.05fr;
    gap:10px;
    align-items:stretch;
}

.process-side,
.process-step{
    min-height:290px;
    padding:20px;
    border:1px solid var(--p-line);
    border-radius:14px;
    background:#fff;
    box-shadow:0 10px 30px rgba(8,39,91,.05);
}

.process-side{
    border-color:#A8C7EB;
}

.process-side h3{
    margin:-20px -20px 18px;
    padding:12px;
    border-radius:13px 13px 0 0;
    background:var(--p-blue);
    color:#fff;
    font-size:12px;
    text-align:center;
}

.process-side span{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 0;
    border-bottom:1px solid #EDF1F5;
    color:#637287;
    font-size:10px;
    line-height:1.4;
}

.process-side span i{
    width:18px;
    color:var(--p-blue);
    text-align:center;
}

.process-step{
    position:relative;
    text-align:center;
}

.process-step > b{
    display:flex;
    align-items:center;
    justify-content:center;
    width:25px;
    height:25px;
    margin:0 auto 16px;
    border-radius:50%;
    background:var(--p-blue);
    color:#fff;
    font-size:9px;
}

.process-step > i{
    display:block;
    margin-bottom:13px;
    color:var(--p-blue);
    font-size:30px;
}

.process-step h4{
    margin:0 0 10px;
    color:var(--p-navy-900);
    font-size:13px;
}

.process-step p{
    margin:0;
    color:#718096;
    font-size:10px;
    line-height:1.65;
}

.dark-benefit-strip{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:35px;
    border-radius:4px;
    background:linear-gradient(110deg,#0A3A86,#155EAE);
    color:#fff;
    overflow:hidden;
}

.dark-benefit-strip > div{
    display:grid;
    grid-template-columns:42px 1fr;
    column-gap:10px;
    align-items:center;
    min-height:110px;
    padding:20px 25px;
    border-right:1px solid rgba(255,255,255,.16);
}

.dark-benefit-strip > div:last-child{
    border-right:0;
}

.dark-benefit-strip i{
    grid-row:span 2;
    font-size:25px;
    color:#D8ECFF;
    text-align:center;
}

.dark-benefit-strip b{
    font-size:12px;
}

.dark-benefit-strip span{
    color:rgba(255,255,255,.68);
    font-size:9px;
    line-height:1.5;
}


/* =========================================================
   FDC PROCESS
========================================================= */

.fdc-process{
    display:grid;
    grid-template-columns:1.05fr repeat(4,1fr) 1.05fr;
    gap:10px;
    align-items:stretch;
}

.fdc-input,
.fdc-output,
.fdc-step{
    min-height:300px;
    padding:20px;
    border:1px solid var(--p-line);
    border-radius:14px;
    background:#fff;
    box-shadow:0 10px 30px rgba(8,39,91,.05);
}

.fdc-input,
.fdc-output{
    border-color:#A8C7EB;
}

.fdc-input h3,
.fdc-output h3{
    margin:-20px -20px 18px;
    padding:12px;
    border-radius:13px 13px 0 0;
    background:var(--p-blue);
    color:#fff;
    font-size:11px;
    text-align:center;
}

.fdc-input span,
.fdc-output span{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 0;
    border-bottom:1px solid #EDF1F5;
    color:#637287;
    font-size:10px;
}

.fdc-input span i,
.fdc-output span i{
    width:20px;
    color:var(--p-blue);
    text-align:center;
}

.fdc-step{
    position:relative;
    text-align:center;
}

.fdc-step > b{
    display:flex;
    align-items:center;
    justify-content:center;
    width:25px;
    height:25px;
    margin:0 auto 14px;
    border-radius:50%;
    background:#EAF3FF;
    color:var(--p-blue);
    font-size:9px;
}

.fdc-step > i{
    display:block;
    margin-bottom:13px;
    color:var(--p-blue);
    font-size:30px;
}

.fdc-step h4{
    margin:0 0 10px;
    color:var(--p-navy-900);
    font-size:12px;
}

.fdc-step p{
    margin:0;
    color:#718096;
    font-size:9.5px;
    line-height:1.7;
}


/* =========================================================
   SSDAM SPECIAL
========================================================= */

.ssdam-flow .flow-box.featured{
    background:linear-gradient(145deg,#09255A,#103E80);
}

.feature-strip{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-top:20px;
}

.feature-strip > div{
    display:grid;
    grid-template-columns:38px 1fr;
    column-gap:10px;
    align-items:center;
    padding:18px;
    border:1px solid #C3D8EF;
    border-radius:12px;
    background:#fff;
}

.feature-strip i{
    grid-row:span 2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:9px;
    background:#EAF3FF;
    color:var(--p-blue);
    font-size:13px;
}

.feature-strip b{
    color:var(--p-navy-900);
    font-size:11px;
}

.feature-strip span{
    color:#718096;
    font-size:9px;
    line-height:1.45;
}


/* =========================================================
   RESPONSIVE 1200
========================================================= */

@media(max-width:1200px){

    .product-tab{
        padding:18px 17px;
    }

    .tab-icon{
        flex-basis:44px;
        width:44px;
        height:44px;
        margin-right:10px;
    }

    .tab-text strong{
        font-size:16px;
    }

    .product-hero-grid{
        gap:45px;
    }

    .benefit-grid,
    .info-card-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .process-flow,
    .fdc-process{
        grid-template-columns:repeat(2,1fr);
    }

    .process-side,
    .fdc-input,
    .fdc-output{
        min-height:240px;
    }

    .dark-benefit-strip{
        grid-template-columns:repeat(2,1fr);
    }

    .feature-strip{
        grid-template-columns:repeat(2,1fr);
    }
}


/* =========================================================
   RESPONSIVE 991
========================================================= */

@media(max-width:991px){

    .product-tabs{
        grid-template-columns:repeat(2,1fr);
    }

    .product-tab{
        min-height:88px;
    }

    .product-tab:nth-child(2){
        border-right:0;
    }

    .product-tab:nth-child(1),
    .product-tab:nth-child(2){
        border-bottom:1px solid #E2E8F0;
    }

    .product-hero{
        padding:80px 0 90px;
    }

    .product-hero-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .product-hero-copy{
        text-align:center;
    }

    .product-eyebrow{
        justify-content:center;
    }

    .hero-tags{
        justify-content:center;
    }

    .product-visual{
        max-width:700px;
        width:100%;
        margin:0 auto;
    }

    .compare-layout{
        grid-template-columns:1fr;
        gap:15px;
    }

    .compare-card{
        max-width:760px;
        width:100%;
        margin:0 auto;
    }

    .compare-middle{
        transform:rotate(90deg);
    }

    .flow-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .flow-arrow{
        min-height:26px;
        transform:rotate(90deg);
    }

    .flow-box{
        min-height:220px;
    }

    .process-flow,
    .fdc-process{
        grid-template-columns:1fr 1fr;
    }
}


/* =========================================================
   RESPONSIVE 640
========================================================= */

@media(max-width:640px){

    .pc-only{
        display:none;
    }

    .product-tab{
        min-height:82px;
        padding:13px 12px;
    }

    .tab-icon{
        flex-basis:38px;
        width:38px;
        height:38px;
        margin-right:8px;
        border-radius:11px;
        font-size:15px;
    }

    .tab-text small{
        font-size:8px;
    }

    .tab-text strong{
        font-size:14px;
    }

    .tab-text em{
        font-size:8px;
    }

    .tab-arrow{
        display:none;
    }

    .product-hero{
        padding:60px 0 70px;
    }

    .product-hero h1{
        font-size:57px;
        letter-spacing:-3px;
    }

    .product-code{
        font-size:14px;
    }

    .product-subtitle{
        font-size:15px;
        line-height:1.75;
    }

    .hero-tags{
        gap:7px;
    }

    .hero-tags span{
        min-height:38px;
        padding:0 12px;
        font-size:10px;
    }

    .visual-device{
        min-height:280px;
        padding:25px;
    }

    .device-tsms{
        min-height:250px;
        width:250px;
    }

    .device-ssdam{
        min-height:270px;
        width:220px;
    }

    .dashboard-frame{
        min-height:285px;
    }

    .dashboard-body{
        height:247px;
        grid-template-rows:60px 1fr 55px;
    }

    .product-section{
        padding:75px 0 85px;
    }

    .section-heading{
        margin-bottom:35px;
    }

    .section-heading h2{
        font-size:27px;
        letter-spacing:-1px;
    }

    .section-heading p{
        font-size:12px;
    }

    .compare-card{
        min-height:auto;
        padding:20px;
    }

    .compare-title h3{
        font-size:17px;
    }

    .detail-list li,
    .number-list li{
        padding:11px 12px;
    }

    .detail-list b,
    .number-list b{
        font-size:11px;
    }

    .detail-list span,
    .number-list span{
        font-size:10px;
    }

    .flow-box{
        padding:20px;
    }

    .benefit-grid,
    .info-card-grid{
        grid-template-columns:1fr;
    }

    .benefit-card{
        min-height:auto;
    }

    .info-card{
        min-height:auto;
    }

    .process-flow,
    .fdc-process{
        grid-template-columns:1fr;
    }

    .process-side,
    .process-step,
    .fdc-input,
    .fdc-step,
    .fdc-output{
        min-height:auto;
    }

    .dark-benefit-strip{
        grid-template-columns:1fr;
    }

    .dark-benefit-strip > div{
        min-height:85px;
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.14);
    }

    .dark-benefit-strip > div:last-child{
        border-bottom:0;
    }

    .feature-strip{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .gsf-product-tabs-page *,
    .gsf-product-tabs-page *::before,
    .gsf-product-tabs-page *::after{
        transition:none !important;
        animation:none !important;
        scroll-behavior:auto !important;
    }
}
/*****************************************************/
/*****************************************************/
/*****************************************************/
.product-visual {
  position: relative;
  width: 100%;
}

.product-visual .image-box {
  position: relative;
  width: 100%;
  min-height: 300px; /* 사용 중인 이미지 높이에 맞게 조정 */
}

.product-visual .product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

/* 활성화된 이미지만 노출 */
.product-visual .product-image.active {
  opacity: 1;
  visibility: visible;
}

.product-visual .visual-caption {
  position: relative;
  z-index: 2;
  margin-top: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}



/* 범용 모바일 반응형 (768px 이하) */
@media (max-width: 768px) {
    /* 1. 패딩 및 마진 최적화 */
    .flow-section {
        padding: 30px 0 !important;
    }

    /* 2. 메인 플로우 컨테이너: 세로 배치 */
    .flow-section .product-container > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 16px !important;
        margin-bottom: 24px !important;
    }

    /* 3. 좌/우측 박스 (데이터 입력, 데이터 활용/수율 분석): 너비 100% 확장 */
    .flow-section .product-container > div[style*="display: flex"] > div[style*="width:"] {
        width: 100% !important;
        flex-shrink: 1 !important;
    }

    /* 4. 중앙 1~4 스텝 영역: 세로 배치 */
    .flow-section .product-container > div[style*="display: flex"] > div[style*="flex: 1"] {
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
    }

    /* 5. 각 스텝 카드: 너비 100% 확장 */
    .flow-section .product-container > div[style*="display: flex"] > div[style*="flex: 1"] > div {
        width: 100% !important;
        flex: none !important;
    }

    /* 6. 화살표(arrow-right-long) 아이콘 처리: 세로 흐름에 맞게 아래 방향 회전 */
    .flow-section .fa-arrow-right-long {
        transform: rotate(90deg) !important;
        margin: 8px auto !important;
        display: block !important;
        text-align: center !important;
    }

    /* 7. 하단 4열 Benefit 스트립: 모바일 1열 반응형 */
    .dark-benefit-strip {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 20px 16px !important;
    }
}

/* 소개 문단 카드 스타일링 */
.solution-intro-desc {
    max-width: 1200px;
    margin: 30px auto 50px auto;
    padding: 24px 32px;
    background: #f8fafc;
    border-left: 4px solid #0056b3; /* 포인트 컬러 (파란색) */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    font-size: 1.05rem;
    line-height: 1.7;
    color: #4a5568;
    text-align: center;
    word-break: keep-all;
}

/* 주요 키워드 강조 */
.solution-intro-desc span {
    color: #0056b3;
    font-weight: 700;
}

/* 모바일 반응형 처리 */
@media (max-width: 768px) {
    .solution-intro-desc {
        margin: 20px 16px 35px 16px;
        padding: 18px 20px;
        font-size: 0.95rem;
        text-align: left;
    }
    .solution-intro-desc br {
        display: none; /* 모바일에서는 줄바꿈 해제 후 자연스럽게 이어지도록 처리 */
    }
}

/* ==========================================
   Mobile & Tablet Responsive CSS (Max-width: 768px)
   ========================================== */
@media screen and (max-width: 768px) {
    /* PC 전용 줄바꿈 숨김 */
    .pc-only {
        display: none;
    }

    /* 컨테이너 여백 조정 */
    .area-box.product-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Grid 레이아웃을 1열(수직 정렬)로 전환 */
    .product-hero-grid {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    /* 1열: 텍스트 영역 */
    .product-hero-copy {
        text-align: center;
    }

    .product-eyebrow {
        font-size: 0.85rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .product-hero-copy h1 {
        font-size: 2.2rem;
        margin: 12px 0 16px;
    }

    .product-subtitle {
        font-size: 1rem;
        line-height: 1.6;
        word-break: keep-all; /* 한글 단어 단위 줄바꿈 */
        margin-bottom: 24px;
    }

    /* 태그 / 핵심 스펙 영역 */
    .hero-tags {
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .hero-tags span {
        flex: 1 1 calc(50% - 12px); /* 2컬럼 배치 */
        min-width: 130px;
        padding: 12px 10px;
        font-size: 0.9rem;
        box-sizing: border-box;
        text-align: center;
    }

    .hero-tags span i {
        display: block;
        margin: 0 auto 6px;
        font-size: 1.2rem;
    }

    /* 3열: 비주얼/이미지 영역 */
    .product-visual {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
    }

    .image-box img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .visual-caption {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 0.85rem;
        margin-top: 12px;
    }
}

/* 초소형 모바일 (Max-width: 480px) */
@media screen and (max-width: 480px) {
    .product-hero-copy h1 {
        font-size: 1.8rem;
    }

    .hero-tags span {
        flex: 1 1 100%; /* 태그 1열로 나열 */
    }
}

/* =========================================================
   FDC & YMS 위치 교정 및 모바일 반응형 커스텀
========================================================= */

/* 1. PC 기본: absolute 속성 강제 제거 (겹침 원인 완전 차단) */
.fdc-visual .product-image,
.yms-visual .product-image {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 2. 모바일 반응형 (768px 이하) */
@media screen and (max-width: 768px) {
    /* 그리드를 세로 1열로 변경 */
    .fdc-grid,
    .yms-grid {
        flex-direction: column !important;
        gap: 24px !important;
    }

    /* 이미지 영역 너비 조정 및 정렬 */
    .fdc-visual,
    .yms-visual {
        width: 100% !important;
        flex: none !important;
    }

    .fdc-visual img,
    .yms-visual img {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 텍스트 영역 너비 조정 및 중앙 정렬 */
    .fdc-hero .product-hero-copy,
    .yms-hero .product-hero-copy {
        width: 100% !important;
        flex: none !important;
        text-align: center !important;
    }

    .fdc-hero h1,
    .yms-hero h1 {
        font-size: 36px !important;
    }

    .fdc-hero .hero-tags,
    .yms-hero .hero-tags {
        justify-content: center !important;
    }
}
/* =========================================================
   FDC & YMS 전용 레이아웃 (기존 CSS 충돌 차단)
========================================================= */

/* FDC/YMS 그리드 전체 상자 */
.fdc-hero-grid,
.yms-hero-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 이미지 감싸는 박스 */
.fdc-dashboard-wrap,
.yms-dashboard-wrap {
    flex: 1.2;
    text-align: center;
}

/* ★ 겹침 원인 방지: absolute 속성을 완전히 제외한 이미지 전용 스타일 */
.fdc-dashboard-img,
.yms-dashboard-img {
    display: block;
    position: static;
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid #cbd5e1;
    margin: 0 auto;
}

.fdc-dashboard-caption,
.yms-dashboard-caption {
    margin-top: 14px;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* 우측 텍스트 영역 */
.fdc-hero-copy,
.yms-hero-copy {
    flex: 1;
}

.fdc-eyebrow,
.yms-eyebrow {
    font-size: 15px;
    font-weight: 800;
    color: #155EAE;
    letter-spacing: 0.5px;
}

.fdc-main-title,
.yms-main-title {
    font-size: 48px;
    font-weight: 900;
    color: #0f172a;
    margin: 10px 0 4px 0;
    line-height: 1.1;
}

.fdc-code-text,
.yms-code-text {
    font-size: 18px;
    font-weight: 700;
    color: #155EAE;
    margin-bottom: 16px;
}

.fdc-sub-desc,
.yms-sub-desc {
    font-size: 18px;
    font-weight: 600;
    color: #334155;
    line-height: 1.6;
    margin-bottom: 24px;
}

.fdc-tag-list,
.yms-tag-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.fdc-tag-item,
.yms-tag-item {
    background: #eff6ff;
    color: #155EAE;
    border: 1px solid #bfdbfe;
    font-size: 15px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 20px;
}

/* Mobile 반응형 (768px 이하) */
@media screen and (max-width: 768px) {
    /* 
       flex-direction: column-reverse 속성으로 
       우측 텍스트(2번)가 위로, 좌측 이미지(1번)가 아래로 위치 변경
    */
    .fdc-hero-grid,
    .yms-hero-grid {
        flex-direction: column-reverse !important;
        gap: 24px !important;
    }

    .fdc-dashboard-wrap,
    .yms-dashboard-wrap,
    .fdc-hero-copy,
    .yms-hero-copy {
        width: 100% !important;
        flex: none !important;
        text-align: center !important;
    }

    .fdc-tag-list,
    .yms-tag-list {
        justify-content: center !important;
    }

    .fdc-main-title,
    .yms-main-title {
        font-size: 36px !important;
    }
}