*{
margin:0;
padding:0;
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}

html{
scroll-behavior:smooth;
}

body{
background:
linear-gradient(
180deg,
#071321 0%,
#08182d 100%
);
font-family:'Syne',sans-serif;
color:#f5f7fb;
line-height:1.8;
overflow-x:hidden;
}

/* =====================================
LAYOUT
===================================== */

.gsgx-tools-page{
width:100%;
max-width:1180px;
margin:0 auto;
padding:70px 22px 100px;
}

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

.gsgx-tools-hero{
margin-bottom:70px;
}

.gsgx-tools-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 18px;
border-radius:999px;
background:
rgba(212,175,55,.1);
border:
1px solid rgba(212,175,55,.22);
color:#f5c518;
font-size:.8rem;
font-weight:700;
letter-spacing:.08em;
margin-bottom:24px;
}

.gsgx-tools-hero h1{

font-size:2.9rem;

line-height:1.08;

letter-spacing:-1.5px;

font-weight:800;

max-width:760px;

margin-bottom:24px;

color:#ffffff;

}

.gsgx-tools-hero p{
max-width:900px;
font-size:1.05rem;
color:#cfd8e3;
margin-bottom:22px;
}

.gsgx-tools-important{
margin-top:36px;
padding:28px;
border-radius:28px;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(255,255,255,.08);
backdrop-filter:blur(10px);
}

.gsgx-tools-important strong{
display:block;
font-size:1rem;
margin-bottom:12px;
color:#f5c518;
}

/* =====================================
GRID
===================================== */

.gsgx-tools-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));
gap:26px;
}

/* =====================================
CARD
===================================== */

.gsgx-tool-card{
position:relative;
display:flex;
flex-direction:column;
padding:34px;
border-radius:30px;
background:
linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.025)
);
border:
1px solid rgba(255,255,255,.08);
text-decoration:none;
overflow:hidden;
transition:
transform .35s ease,
border-color .35s ease,
box-shadow .35s ease;
}

.gsgx-tool-card:hover{
transform:
translateY(-6px);
border-color:
rgba(212,175,55,.35);
box-shadow:
0 20px 45px rgba(0,0,0,.28);
}

.gsgx-featured{
border:
1px solid rgba(212,175,55,.35);
}

.gsgx-tool-icon{
font-size:2.5rem;
margin-bottom:20px;
}

.gsgx-tool-content h2{
font-size:1.45rem;
line-height:1.3;
margin-bottom:18px;
color:#ffffff;
}

.gsgx-tool-content p{
font-size:.98rem;
color:#c8d3df;
margin-bottom:18px;
}

.gsgx-tool-content span{
display:inline-flex;
align-items:center;
gap:8px;
margin-top:auto;
font-size:.95rem;
font-weight:700;
color:#f5c518;
}

/* =====================================
FOOTER
===================================== */

.gsgx-tools-footer{
margin-top:90px;
padding:42px 34px;
border-radius:30px;
background:
rgba(255,255,255,.04);
border:
1px solid rgba(255,255,255,.08);
}

.gsgx-tools-footer h3{
font-size:1.5rem;
margin-bottom:16px;
color:#ffffff;
}

.gsgx-tools-footer p{
color:#cfd8e3;
margin-bottom:18px;
}

.gsgx-footer-links{
display:flex;
flex-wrap:wrap;
gap:16px;
margin-top:24px;
}

.gsgx-footer-links a{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 22px;
border-radius:14px;
background:
rgba(255,255,255,.06);
border:
1px solid rgba(255,255,255,.08);
text-decoration:none;
font-size:.92rem;
font-weight:700;
color:#ffffff;
transition:
all .3s ease;
}

.gsgx-footer-links a:hover{
background:
rgba(212,175,55,.12);
border-color:
rgba(212,175,55,.35);
color:#f5c518;
}

.gsgx-copyright{
margin-top:26px;
font-size:.9rem;
opacity:.7;
}

/* =====================================
TABLET
===================================== */

@media(max-width:992px){

.gsgx-tools-hero h1{

font-size:3.6rem;

line-height:.97;

letter-spacing:-3px;

}

}

/* =====================================
MOBILE
===================================== */

@media(max-width:768px){

.gsgx-tools-page{
padding:46px 18px 90px;
}

.gsgx-tools-hero{
margin-bottom:50px;
}

.gsgx-tools-badge{

font-size:.68rem;

padding:8px 14px;

letter-spacing:.06em;

margin-bottom:20px;

}


.gsgx-tools-hero h1{

font-size:2rem;

line-height:1.12;

letter-spacing:-1px;

margin-bottom:20px;

max-width:100%;

font-weight:800;

word-break:normal;

overflow-wrap:break-word;

}
.gsgx-tools-hero p{

font-size:1rem;

line-height:1.9;

}

.gsgx-tools-important{

padding:24px;

border-radius:24px;

}

.gsgx-tool-card{

padding:28px;

border-radius:24px;

}

.gsgx-tool-content h2{

font-size:1.28rem;

}

.gsgx-tools-footer{

padding:30px 24px;

border-radius:24px;

}

.gsgx-footer-links{

flex-direction:column;

}

.gsgx-footer-links a{

width:100%;

}

}






/* =========================================
PREMIUM GLOBAL TOOL FOOTER
========================================= */

.gsgx-tool-footer{
margin-top:90px;
padding:55px 22px 46px;
background:
linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(255,255,255,.015)
);
border-top:
1px solid rgba(255,255,255,.07);
position:relative;
overflow:hidden;
}

.gsgx-tool-footer::before{
content:'';
position:absolute;
top:-120px;
right:-120px;
width:260px;
height:260px;
background:
radial-gradient(
circle,
rgba(245,197,24,.08),
transparent 72%
);
pointer-events:none;
}

.gsgx-tool-footer-inner{
width:100%;
max-width:1120px;
margin:0 auto;
position:relative;
z-index:2;
}

.gsgx-tool-brand h3{
font-size:1.45rem;
line-height:1.2;
font-weight:800;
letter-spacing:-0.5px;
color:#ffffff;
margin-bottom:18px;
}

.gsgx-tool-brand p{
max-width:820px;
font-size:1rem;
line-height:1.95;
color:#c9d4df;
}

.gsgx-tool-footer-links{
display:flex;
flex-wrap:wrap;
gap:14px;
margin-top:34px;
}

.gsgx-tool-footer-links a{
display:inline-flex;
align-items:center;
justify-content:center;
padding:13px 18px;
border-radius:14px;
background:
rgba(255,255,255,.05);
border:
1px solid rgba(255,255,255,.08);
text-decoration:none;
font-size:.9rem;
font-weight:700;
letter-spacing:.01em;
color:#f5f7fb;
transition:
all .28s ease;
backdrop-filter:blur(8px);
}

.gsgx-tool-footer-links a:hover{
transform:
translateY(-2px);
background:
rgba(212,175,55,.10);
border-color:
rgba(212,175,55,.30);
color:#f5c518;
}

.gsgx-tool-footer-copy{
margin-top:30px;
padding-top:22px;
border-top:
1px solid rgba(255,255,255,.06);
font-size:.84rem;
line-height:1.8;
color:#8ea0b5;
}

/* =========================================
MOBILE
========================================= */

@media(max-width:768px){

.gsgx-tool-footer{
margin-top:70px;
padding:42px 20px 40px;
}

.gsgx-tool-brand h3{
font-size:1.2rem;
margin-bottom:16px;
}

.gsgx-tool-brand p{
font-size:.93rem;
line-height:1.9;
}

.gsgx-tool-footer-links{
flex-direction:column;
gap:12px;
}

.gsgx-tool-footer-links a{
width:100%;
padding:15px 18px;
font-size:.92rem;
}

.gsgx-tool-footer-copy{
font-size:.8rem;
line-height:1.7;
}

}