/* Homepage: HOW IT WORKS + WHY USE TOPSERVER.NETWORK.
   Edge-to-edge bands; content runs the full public-container width (1480px).
   Builds on topserver-public.bundle.css tokens (.scout-kicker, .tsn-button). */

.tsn-hiw-section,.tsn-why-section{position:relative;isolation:isolate;overflow:hidden;width:100%;border-top:1px solid #1b3039}
.tsn-fw-inner{position:relative;z-index:1;width:min(1480px,calc(100% - 48px));margin:0 auto}

.tsn-fw-heading{max-width:860px;margin:0 auto 26px;text-align:center}
.tsn-fw-heading h2{margin:8px 0 10px;color:#fff;font-size:clamp(30px,3.4vw,48px);line-height:1.02;letter-spacing:-.02em;text-transform:none}
.tsn-fw-heading p{margin:0;color:#94aab4;font-size:15px;line-height:1.6}

/* ---------- HOW IT WORKS ---------- */
.tsn-hiw-section{padding:64px 0 72px;background:radial-gradient(ellipse 70% 55% at 50% 30%,rgba(14,99,124,.20),transparent 70%),linear-gradient(180deg,#050d11,#06121a)}
.tsn-hiw-section:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(66,196,235,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(66,196,235,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}

.tsn-hiw-stats{display:grid;grid-template-columns:repeat(3,1fr);max-width:820px;margin:0 auto 34px;text-align:center}
.tsn-hiw-stats div{padding:8px 16px;border-right:1px solid #27414b}
.tsn-hiw-stats div:last-child{border:0}
.tsn-hiw-stats strong{display:block;color:#28cdf2;font-size:26px;line-height:1.2}
.tsn-hiw-stats span{color:#8ea0a8;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}

.tsn-hiw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:0;padding:0;list-style:none;counter-reset:none}
.tsn-hiw-step{position:relative;display:flex;flex-direction:column;align-items:center;padding:26px 30px 30px;border:1px solid #253d47;background:linear-gradient(180deg,#0c1a22,#081117);text-align:center;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.tsn-hiw-step:hover{border-color:#35bce4;transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.35),0 0 0 1px rgba(53,188,228,.12)}
/* arrow connectors between the cards on desktop */
.tsn-hiw-step:not(:last-child):after{content:"→";position:absolute;top:34%;right:-24px;z-index:2;display:grid;place-items:center;width:22px;height:22px;color:#28cdf2;font-size:20px;font-weight:900;line-height:1;background:#06121a;text-shadow:0 0 12px rgba(40,205,242,.6)}
.tsn-hiw-num{position:absolute;top:16px;left:18px;color:#8067dc;font-size:13px;font-weight:900;letter-spacing:.08em}
.tsn-hiw-num:after{content:"";display:inline-block;width:26px;height:1px;margin-left:9px;vertical-align:middle;background:linear-gradient(90deg,#8067dc,transparent)}
.tsn-hiw-art{display:grid;place-items:center;width:100%;margin:6px 0 4px}
.tsn-hiw-art img{display:block;width:min(100%,320px);height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(0,0,0,.4))}
.tsn-hiw-step h3{margin:6px 0 10px;color:#fff;font-size:clamp(24px,2vw,30px);line-height:1.1;text-transform:none}
.tsn-hiw-step p{flex:1;max-width:44ch;margin:0 0 20px;color:#9bb0ba;font-size:14px;line-height:1.65}
.tsn-hiw-step .tsn-button{min-width:160px}

/* ---------- WHY USE TOPSERVER.NETWORK ---------- */
.tsn-why-section{padding:64px 0 72px;background:radial-gradient(ellipse 60% 50% at 50% 100%,rgba(52,42,120,.16),transparent 70%),linear-gradient(180deg,#08131a,#050b0f)}
.tsn-why-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin:0}
.tsn-why-card{position:relative;display:flex;flex-direction:column;align-items:center;padding:24px 20px 26px;border:1px solid #253a44;background:linear-gradient(155deg,#0d1c24,#081117);text-align:center;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.tsn-why-card:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#28cdf2,transparent);opacity:0;transition:opacity .2s ease}
.tsn-why-card:hover{border-color:#35bce4;transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.tsn-why-card:hover:before{opacity:1}
.tsn-why-art{display:grid;place-items:center;width:100%;margin-bottom:8px}
.tsn-why-art img{display:block;width:min(100%,220px);height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,.4))}
.tsn-why-card h3{margin:4px 0 9px;color:#fff;font-size:clamp(19px,1.5vw,22px);line-height:1.15;text-transform:none}
.tsn-why-card p{margin:0;color:#94a9b3;font-size:13.5px;line-height:1.65}

/* ---------- HOME FAQ: full width, same markup/styling as the /faq/ page ---------- */
.tsn-home-faq-section{width:100%}
.tsn-home-faq-section .tsn-centred-heading{max-width:860px;margin-bottom:26px}
.tsn-home-faq-section .tsn-centred-heading h2{font-size:clamp(30px,3.4vw,48px);line-height:1.02;letter-spacing:-.02em;text-transform:none}
.tsn-home-faq-section .tsn-centred-heading p{font-size:15px}
.tsn-home-faq-section .tsn-faq-list{max-width:1110px;margin:0 auto}
.tsn-home-faq-section .tsn-faq-item summary{padding:18px 24px}
.tsn-home-faq-section .tsn-faq-answer{padding:18px 24px 22px}
.tsn-home-faq-section .tsn-faq-answer p{max-width:none;font-size:15px;line-height:1.7}
.tsn-faq-footer{margin-top:28px}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .tsn-why-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tsn-why-card{grid-column:span 2}
  .tsn-why-card:nth-child(4){grid-column:2/span 2}
  .tsn-why-card:nth-child(5){grid-column:4/span 2}
  .tsn-hiw-grid{gap:20px}
  .tsn-hiw-step{padding:24px 22px 26px}
  .tsn-hiw-step:not(:last-child):after{right:-21px}
}
@media(max-width:850px){
  .tsn-fw-inner{width:min(100% - 28px,1480px)}
  .tsn-hiw-section,.tsn-why-section{padding:48px 0 54px}
  .tsn-hiw-grid{grid-template-columns:1fr;gap:34px;max-width:560px;margin:0 auto}
  /* connector points down between stacked cards */
  .tsn-hiw-step:not(:last-child):after{top:auto;right:auto;left:50%;bottom:-31px;transform:translateX(-50%) rotate(90deg)}
  .tsn-hiw-art img{width:min(100%,280px)}
  .tsn-why-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .tsn-why-card,.tsn-why-card:nth-child(4),.tsn-why-card:nth-child(5){grid-column:auto}
  .tsn-why-card:nth-child(5){grid-column:1/-1;max-width:calc(50% - 7px);justify-self:center}
}
@media(max-width:540px){
  .tsn-hiw-stats strong{font-size:17px}
  .tsn-hiw-stats span{font-size:8px}
  .tsn-hiw-stats div{padding:6px}
  .tsn-why-grid{grid-template-columns:1fr}
  .tsn-why-card:nth-child(5){grid-column:auto;max-width:none}
  .tsn-why-art img{width:min(100%,200px)}
}
@media(prefers-reduced-motion:reduce){
  .tsn-hiw-step,.tsn-why-card,.tsn-why-card:before{transition:none}
  .tsn-hiw-step:hover,.tsn-why-card:hover{transform:none}
}