:root {
--gt-navy: #071a33;
--gt-blue: #075fe4;
--gt-cyan: #00b8d9;
--gt-ink: #162033;
--gt-muted: #5b6678;
--gt-line: #dfe7f2;
--gt-soft: #f5f8fd;
--gt-white: #fff;
--gt-shadow: 0 24px 60px rgba(16, 41, 82, .12);
}
.gt360-hero, .gt360-section, .gt360-final {
position: relative;
overflow: hidden;
font-family: inherit
}
.gt360-hero {
padding: 110px 0 42px;
background: radial-gradient(circle at 12% 20%, rgba(0, 184, 217, .16), transparent 32%), radial-gradient(circle at 88% 15%, rgba(7, 95, 228, .18), transparent 30%), linear-gradient(135deg, #f7fbff 0%, #eef5ff 55%, #fff 100%);
border-bottom: 1px solid rgba(7, 95, 228, .08)
}
.gt360-grid {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(7, 95, 228, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 95, 228, .045) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .85), transparent)
}
.gt360-glow {
position: absolute;
border-radius: 999px;
filter: blur(70px);
opacity: .28;
pointer-events: none
}
.gt360-glow-a {
width: 300px;
height: 300px;
background: #00c7df;
left: -100px;
top: 60px
}
.gt360-glow-b {
width: 360px;
height: 360px;
background: #176ef2;
right: -140px;
top: 20px
}
.gt360-hero-wrap {
position: relative
}
.gt360-orbit {
position: absolute;
border: 1px solid rgba(7, 95, 228, .12);
border-radius: 50%;
pointer-events: none
}
.gt360-orbit-1 {
width: 560px;
height: 560px;
left: 50%;
top: 44%;
transform: translate(-50%, -50%)
}
.gt360-orbit-2 {
width: 760px;
height: 760px;
left: 50%;
top: 44%;
transform: translate(-50%, -50%)
}
.gt360-hero-copy {
max-width: 1650px;
margin: 0 auto;
position: relative;
z-index: 2
}
.gt360-hero h1 {
font-size: clamp(3.25rem, 6vw, 4.8rem);
line-height: 1.08;
letter-spacing: -.05em;
color: var(--gt-navy);
font-weight: 800;
margin: 0 0 28px
}
.gt360-hero-copy p {
margin: 0 auto 12px;
color: #42506a;
font-size: 1.03rem;
line-height: 1.75
}
.gt360-solution-strip {
position: relative;
z-index: 3;
margin: 50px auto 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
padding: 10px;
border: 1px solid rgba(7, 95, 228, .12);
background: rgba(255, 255, 255, .82);
backdrop-filter: blur(12px);
border-radius: 22px;
box-shadow: var(--gt-shadow)
}
.gt360-solution-strip div {
display: flex;
min-height: 86px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 16px;
color: var(--gt-ink);
font-weight: 700;
text-align: center;
padding: 12px;
background: linear-gradient(180deg, #fff, #f7faff)
}
.gt360-solution-strip i {
font-size: 1.25rem;
color: var(--gt-blue)
}
.gt360-section {
padding: 90px 0
}
.gt360-heading h2, .gt360-service-card h2, .gt360-location-card h2, .gt360-choice-card h2, .gt360-core-card h2, .gt360-final h2 {
font-size: clamp(2rem, 4vw, 3.35rem);
line-height: 1.08;
letter-spacing: -.035em;
color: var(--gt-navy);
font-weight: 800;
margin-bottom: 20px
}
.gt360-heading p, .gt360-service-card p, .gt360-market-grid p, .gt360-location-card p, .gt360-choice-card p, .gt360-core-card span, .gt360-final p {
color: var(--gt-muted);
line-height: 1.75;
font-size: 1rem
}
.gt360-heading.text-center {
max-width: 900px;
margin-left: auto;
margin-right: auto
}
.gt360-audience {
background: #fff
}
.gt360-panel {
border: 1px solid var(--gt-line);
border-radius: 28px;
padding: 34px;
background: linear-gradient(135deg, #fff 0%, #f7fbff 100%);
box-shadow: var(--gt-shadow)
}
.gt360-panel>p {
color: var(--gt-muted);
line-height: 1.7
}
.gt360-chip-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin: 18px 0 24px
}
.gt360-chip-grid span {
padding: 13px 15px;
border-radius: 14px;
background: #fff;
border: 1px solid var(--gt-line);
font-weight: 650;
color: var(--gt-ink);
box-shadow: 0 8px 22px rgba(20, 50, 90, .05)
}
.gt360-dark {
background: linear-gradient(145deg, #06162d 0%, #0a2550 70%, #063d67 100%)
}
.gt360-heading-light h2, .gt360-heading-light p {
color: #fff
}
.gt360-heading-light p {
opacity: .76
}
.gt360-feature-card {
height: 100%;
padding: 30px;
border-radius: 24px;
background: rgba(255, 255, 255, .075);
border: 1px solid rgba(255, 255, 255, .12);
backdrop-filter: blur(12px);
color: #fff;
transition: .3s ease
}
.gt360-feature-card:hover {
transform: translateY(-7px);
background: rgba(255, 255, 255, .11)
}
.gt360-feature-card h3 {
font-size: 1.55rem;
font-weight: 750;
color:#fff;
}
.gt360-feature-card p, .gt360-feature-card li {
color: rgba(255, 255, 255, .78);
line-height: 1.7
}
.gt360-feature-icon, .gt360-service-icon {
width: 54px;
height: 54px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0b79ff, #05b9d8);
color: #fff;
margin-bottom: 20px;
box-shadow: 0 12px 26px rgba(0, 151, 255, .25)
}
.gt360-feature-card ul, .gt360-service-card ul {
padding-left: 20px;
margin: 14px 0
}
.gt360-feature-card li, .gt360-service-card li {
margin: 7px 0
}
.gt360-services {
background: var(--gt-soft)
}
.gt360-service-card {
height: 100%;
padding: 34px;
border-radius: 28px;
background: #fff;
border: 1px solid var(--gt-line);
box-shadow: 0 18px 45px rgba(18, 47, 91, .08);
transition: .3s ease
}
.gt360-service-card:hover {
transform: translateY(-5px);
box-shadow: 0 24px 60px rgba(18, 47, 91, .14)
}
.gt360-service-card h2 {
font-size: 2rem
}
.gt360-service-wide {
padding-right: min(8vw, 120px)
}
.gt360-link {
display: inline-flex;
gap: 8px;
align-items: center;
margin-top: 8px;
color: var(--gt-blue);
font-weight: 750;
text-decoration: none
}
.gt360-link:hover {
gap: 12px;
color: #034da8
}
.gt360-markets {
background: #fff
}
.gt360-market-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
margin-top: 38px
}
.gt360-market-grid>div {
padding: 26px 20px;
border: 1px solid var(--gt-line);
border-radius: 22px;
background: linear-gradient(180deg, #fff, #f8fbff);
min-height: 260px
}
.gt360-market-grid i {
font-size: 1.5rem;
color: var(--gt-blue);
margin-bottom: 18px
}
.gt360-market-grid h3 {
font-size: 1.2rem;
line-height: 1.25;
font-weight: 750;
color: var(--gt-navy)
}
.gt360-centered-copy {
text-align: center;
margin: 30px 0 0;
color: var(--gt-muted)
}
.gt360-questions {
background: linear-gradient(180deg, #f3f8ff, #fff)
}
.gt360-question-list {
display: grid;
gap: 10px
}
.gt360-question-list div {
display: flex;
align-items: center;
gap: 18px;
padding: 16px 18px;
background: #fff;
border: 1px solid var(--gt-line);
border-radius: 16px
}
.gt360-question-list span {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
height: 42px;
border-radius: 12px;
background: #eaf3ff;
color: var(--gt-blue);
font-weight: 800
}
.gt360-question-list p {
margin: 0;
color: var(--gt-ink);
font-weight: 650
}
.gt360-why {
background: linear-gradient(145deg, #06162d 0%, #0a2550 100%)
}
.gt360-core-card {
background: #fff;
border-radius: 28px;
padding: 34px;
box-shadow: 0 30px 70px rgba(0, 0, 0, .22)
}
.gt360-core-card h2 {
font-size: 2rem
}
.gt360-core-card>div {
display: grid;
grid-template-columns: 180px 1fr;
gap: 14px;
padding: 15px 0;
border-bottom: 1px solid var(--gt-line)
}
.gt360-core-card strong {
color: var(--gt-navy)
}
.gt360-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 24px;
border-radius: 14px;
background: linear-gradient(135deg, #075fe4, #00a8d6);
color: #fff;
text-decoration: none;
font-weight: 750;
box-shadow: 0 14px 30px rgba(7, 95, 228, .23);
margin-top: 22px
}
.gt360-btn:hover {
color: #fff;
transform: translateY(-2px)
}
.gt360-location {
background: var(--gt-soft)
}
.gt360-location-card, .gt360-choice-card {
height: 100%;
padding: 34px;
border-radius: 28px;
background: #fff;
border: 1px solid var(--gt-line);
box-shadow: 0 18px 44px rgba(18, 47, 91, .08)
}
.gt360-location-card>i {
font-size: 1.6rem;
color: var(--gt-blue);
margin-bottom: 18px
}
.gt360-location-card h2, .gt360-choice-card h2 {
font-size: 2rem
}
.gt360-choice-card>div {
padding: 14px 0;
border-bottom: 1px solid var(--gt-line)
}
.gt360-choice-card>div p {
margin: 0 0 4px
}
.gt360-choice-card strong {
color: var(--gt-blue)
}
.gt360-faq {
background: #fff
}
.gt360-accordion {
max-width: 1650px;
margin: 34px auto 0
}
.gt360-accordion .accordion-item {
border: 1px solid var(--gt-line);
border-radius: 16px !important;
overflow: hidden;
margin-bottom: 12px;
box-shadow: 0 8px 24px rgba(18, 47, 91, .05)
}
.gt360-accordion .accordion-button {
font-weight: 700;
color: var(--gt-navy);
padding: 19px 22px;
box-shadow: none
}
.gt360-accordion .accordion-button:not(.collapsed) {
background: #eef6ff;
color: var(--gt-blue)
}
.gt360-accordion .accordion-body {
color: var(--gt-muted);
line-height: 1.75;
padding: 20px 22px
}
.gt360-final {
padding: 100px 0;
background: radial-gradient(circle at 20% 20%, rgba(0, 184, 217, .15), transparent 30%), linear-gradient(135deg, #eef6ff, #fff)
}

.gt360-final .gt360-btn {
margin-top: 12px
}
@media(max-width:1199.98px) {
.gt360-solution-strip {
grid-template-columns: repeat(3, 1fr)
}
.gt360-market-grid {
grid-template-columns: repeat(3, 1fr)
}
}
@media(max-width:991.98px) {
.gt360-hero {
padding-top: 85px
}
.gt360-orbit {
display: none
}
.gt360-section {
padding: 72px 0
}
.gt360-market-grid {
grid-template-columns: repeat(2, 1fr)
}
.gt360-service-wide {
padding-right: 34px
}
}
@media(max-width:767.98px) {
.gt360-hero {
padding: 70px 0 30px
}
.gt360-hero h1 {
font-size: 2.55rem
}
.gt360-hero-copy p {
font-size: .96rem
}
.gt360-solution-strip {
grid-template-columns: repeat(2, 1fr);
border-radius: 18px
}
.gt360-solution-strip div {
min-height: 78px;
font-size: .9rem
}
.gt360-section {
padding: 58px 0
}
.gt360-chip-grid,  .gt360-market-grid {
grid-template-columns: 1fr
}
.gt360-panel,  .gt360-service-card,  .gt360-core-card,  .gt360-location-card,  .gt360-choice-card {
padding: 24px;
border-radius: 22px
}
.gt360-core-card>div {
grid-template-columns: 1fr;
gap: 3px
}
.gt360-question-list div {
align-items: flex-start
}
.gt360-heading h2,  .gt360-final h2 {
font-size: 2.15rem
}
.gt360-service-card h2,  .gt360-location-card h2,  .gt360-choice-card h2,  .gt360-core-card h2 {
font-size: 1.7rem
}
}
@media(max-width:479.98px) {
.gt360-solution-strip {
grid-template-columns: 1fr 1fr;
gap: 7px;
padding: 7px
}
.gt360-solution-strip div {
padding: 9px 7px
}
.gt360-hero h1 {
font-size: 2.15rem
}
.gt360-question-list span {
flex-basis: 38px;
height: 38px
}
}