:root {
    --main-text-color : white;
    --background-color : black;
    --service-card-bg : #12151A;
    --service-cart-border : #333333;
    --icon-color : grey;
    --first-box-bg : #12151A;
    --second-box-bg : black;
    --third-box-bg : #12151a63;
    --first-box-title : rgb(255, 217, 0);
    --second-box-title : red;
    --third-box-title : #36dbe7;
    --content-box-border : #333333;
    --total-number-gradient-1 : rgba(255,255,255,0.5);
    --total-number-gradient-2 : rgba(180,180,180,0.3);
    --total-number-gradient-3 :rgba(83,83,83,0.3);
    --map-color : #888888;
    --card-text : white;
    --background-image : url("/static/images/background-ombre.e25967135c3c.svg");
    --card-text-hover : #333333;
    --gw-graph-edge : rgba(148, 163, 184, 0.26);
    --gw-graph-node : rgba(226, 232, 240, 0.62);
    --gw-graph-accent : var(--link-hover-color, #36dbe7);
    --gw-graph-teal : #2dd4bf;
    --gw-graph-risk : #ff4d6d;
}

[data-bs-theme="light"] {
    --main-text-color : #4E4E4E;
    --background-color : #F0F4F4;
    --service-card-bg : var(--main-color);
    --service-cart-border : #888888;
    --icon-color : grey;
    --first-box-bg : var(--main-color-20) ;
    --second-box-bg : var(--main-color-20) ;
    --third-box-bg : var(--main-color-20) ;
    --first-box-title :  var(--main-color);
    --second-box-title :  var(--main-color);
    --third-box-title : var(--main-color);
    --content-box-border : var(--main-color);
    --total-number-gradient-1 : rgba(255,255,255,0.5);
    --total-number-gradient-2 : rgba(180,180,180,0.3);
    --total-number-gradient-3 :rgba(83,83,83,0.3);
    --map-color : #12131A;
    --card-text : white;
    --background-image : none;
     --card-text-hover : #333333;
    --gw-graph-edge : rgba(64, 54, 136, 0.18);
    --gw-graph-node : rgba(64, 54, 136, 0.48);
    --gw-graph-accent : var(--main-color);
    --gw-graph-teal : #0f9f9f;
    --gw-graph-risk : #dc2626;
}
.landing-page {
    display: flex;
    flex-direction: column;
    gap: 8rem;
    padding-top: 4rem;
    width: 100vw;
    color: var(--main-text-color);
    background-color: var(--background-color);
    background-image: var(--background-image);
    background-attachment: fixed;
    background-size: cover; 
    background-repeat: no-repeat;
}
/* "Powered By" Logo Badge Styling */
.powered-by-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle divider line */
}

/* Keeps the logo proportional and prevents stretching */
.engine-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.engine-text {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.9;
}
/* content */
.landing-page h1 {
    font-size: 4rem;
    margin: 0;
    font-family: var(--gw-display);
}

.landing-page h3 {
    margin-bottom: 0;
}

.landing-page .small-title {
    font-size: 2rem;
}

.background-image {
    position: fixed ;
    display: block; 
    z-index: -5; 
    bottom: 0;
}

.large-image img {
    width: 100vw;
}
.large-image{
    z-index: -4;
}

.intro-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.intro-content{
    padding: 0 5% ;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin:auto;
    min-height: 80vh;
    gap:2rem;
    overflow: hidden;
    position: relative;
}

.gw-netgraph {
    position: absolute;
    inset: -7rem 0 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    mask-image: radial-gradient(120% 100% at 70% 30%, #000 35%, transparent 78%);
    -webkit-mask-image: radial-gradient(120% 100% at 70% 30%, #000 35%, transparent 78%);
}

.gw-netgraph svg {
    width: 100%;
    height: 100%;
}

.ng-edges line {
    stroke: var(--gw-graph-edge);
    stroke-width: 1;
    opacity: 0.7;
}

.ng-trace {
    fill: none;
    stroke: var(--gw-graph-accent);
    stroke-width: 1.6;
    stroke-dasharray: 7 9;
    opacity: 0.7;
    animation: ng-dash 1.4s linear infinite;
}

@keyframes ng-dash {
    to {
        stroke-dashoffset: -16;
    }
}

.ng-packet {
    fill: var(--gw-graph-accent);
    filter: drop-shadow(0 0 6px var(--gw-graph-accent));
}

.ng-node-mut {
    color: var(--gw-graph-node);
}

.ng-node-accent {
    color: var(--gw-graph-accent);
}

.ng-node-teal {
    color: var(--gw-graph-teal);
}

.ng-node-risk {
    color: var(--gw-graph-risk);
}

.ng-node circle {
    fill: currentColor;
}

.ng-node circle:last-child {
    filter: drop-shadow(0 0 5px currentColor);
}

.ng-halo {
    opacity: 0.18;
    transform-box: fill-box;
    transform-origin: center;
    animation: ng-pulse 3.2s ease-in-out infinite;
    animation-delay: var(--d);
}

@keyframes ng-pulse {
    0%, 100% {
        transform: scale(0.85);
        opacity: 0.1;
    }
    50% {
        transform: scale(1.25);
        opacity: 0.32;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ng-trace,
    .ng-halo {
        animation: none;
    }

    .ng-packet {
        display: none;
    }
}

.intro-group {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    width: 100%;
}

.intro-text-group{
    display:flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    flex:1;
    position: relative;
    z-index: 3;
}
.intro-text{
    display:flex;
    flex-direction: column;
    gap: 1rem;
    white-space: nowrap;
    width: fit-content;

}

.intro-image {
    position: relative;
    z-index: 0;
}

.intro-image>svg {
    fill : var(--map-color);
    width: 100%;
    height: auto;
    position: relative;
    z-index: 0;
}

#logo {
    display: none !important;
    z-index: -5;
}

.intro-button-group {
    display: flex;
    gap: 2rem;
}

.service-card{
    background-color: var(--service-card-bg);
    border:var(--service-cart-border) 2px solid;
    padding: 1rem;
    width: 220px;
    height:220px;
    position: relative;
    overflow: hidden;
    border-radius: 10px; 
    cursor: pointer;
}

.service-card .card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    height: 100%;
    width: 100%;
    gap: 0.5rem;
}

.service-icons {
    display: flex;
    width: 100%;
    justify-content: space-between;
    color : var(--card-text);
}

.main-icon {
    font-size: 2rem;
}

.service-card .title {
    opacity: 1;
    position: absolute;
    display: block;
    bottom:0;
    right: 0;
    padding:1rem;
    text-align: right;
    font-size: 1.2rem;
}


.service-card a {
    all:unset;
}

.service-card:hover {
    background-color: #d4d4d4;
    color: black;
}

.service-card .content {
    opacity: 0;
    transform: translateY(100%);
    position: absolute;
    display: block;
    bottom:0;
    right: 0;
    padding:1rem;
    font-size: 0.9rem;
}

.service-card:hover .content {
  opacity: 1;
  transform: translateY(0);
    transition: opacity 0.5s, transform 0.5s;
}

.service-card:hover .title {
    opacity: 0;
    transition: opacity 0.2s;
}

.service-section {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.service-section>div {
    display: flex;
    gap:0.5rem;
    flex-direction: column;
}

.service-group {
    display: flex;
    gap :1rem;
    flex-wrap: wrap;
}

.total-scan-div {
    flex: 2;
}

#figure-section {
    padding: 0 5%;
}

.figure-text {
    color: white;
    font-family: var(--gw-display);
    margin: 0;
}

.total-scan-div .figure-text{
    text-align: center;
    margin-bottom: 2rem;
}

.figure-number-size {
    font-size: 1.5rem ;
}

.total-scan-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.total-scan {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

}
/* end of content */

/* api */
#apiIntro {
    padding: 0 5%
}

#apiIntro .apiIntro-box {
    background-color: #12151A80;
    padding: 2rem;
    border: #333333 2px solid;
    width: 100%;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.apiIntro-box >div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#apiIntro .title {
    padding: 0 4rem;
    gap: 2rem;
}

#apiIntro .content {
    padding: 2rem;
    gap: 2rem;
}

h3 {
    font-family: var(--gw-display);
}

#apiIntro .item-group {
    display: flex;
    gap : 2rem;
    flex-wrap: wrap;
}


#apiIntro .item-group >div {
    width: 150px;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#apiIntro .item-group img {
    width: 80px;
}
/* new figure */
.content-box {
    width: 100%;
    max-width: 600px;
    padding: 2rem;
    border-radius: 10px;
    border:var(--content-box-border) 1px solid;
}

.content-box h3 {
    text-align: center;
    margin-bottom: 1rem;
}

.content-box .number {
    width: 130px;
    display: inline-block;
    font-size: 1.2rem;
}


#surface{
    background-color: var(--first-box-bg);
}
#darkweb{
    background-color: var(--second-box-bg);
}

#blockchain{
    background-color: var(--third-box-bg);
}

#surface h3 {
    color:  var(--first-box-title);
}

#darkweb h3 {
    color: var(--second-box-title);
}

#blockchain h3 {
    color: var(--third-box-title);
}

#total h3 {
    color: var(--main-text-color);
    font-family: var(--gw-display);
    text-align: center;
}

#total {
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.numberDisplay {
    display: flex;
    gap: 0.5rem;
    color: var(--main-text-color);
    align-items: flex-end;
    font-family: var(--gw-sans);
    margin: auto;
}

.total-scan-number {
    display: flex;
    align-items: center;
    justify-content: center;
    background:  linear-gradient(0deg, var(--total-number-gradient-1 ) 0%, var(--total-number-gradient-2 ) 35%,  var(--total-number-gradient-3 ) 100%); 
    border-radius: 10px;
    width: 2.7rem;
    font-size: 2.7rem;
}

.network-logo-wrapper {
    display: flex;
    gap : 2rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin : 2rem auto;
    max-width: 1000px;
    
}

.network-logo {
    width: 80px;
}

.card-text .title {
    color : var(--card-text);
}

.service-card .service-icons, .service-card .content , .service-card:hover .title {
    color : var(--card-text);
}

.service-card:hover .service-icons, .service-card:hover .content , .service-card:hover .title {
    color : var(--card-text-hover);
}

@media screen  and (max-width:1600px){
    .landing-page {
        padding-top: 2rem;
        gap: 4rem;
    }
    .landing-page h1 {
        font-size: 2.5rem;
    }
    .small-title {
        font-size: 1.5rem;
    }
    .service-card{
        width: 190px;
        height:190px;
    }
}  

/*iPads and Tablets */
@media screen and (max-width: 768px) {
    .intro-text{
        white-space: unset;
    }

    .service-item-content {
        gap: 0.5rem;
    }
    
    .service-card .title {
        opacity: 1;
        position: static;
        display: block;
        bottom:0;
        right: 0;
        padding:0;
    }

    .service-card .content {
        opacity: 1;
        transform: unset;
        position: static;
        display: none;
        bottom:0;
        right: 0;
        padding:0; 
    }
    
    .service-card .card-content {
        justify-content: unset;
        gap: 2rem;
    }

    .service-card .card-content .card-text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 0.5rem;
        height: 100%;
    }
    .service-card:hover .content {
        opacity: 1;
        transform: unset;
    }
    .service-card .title {
        text-align: left;
    }
    .service-card:hover .title {
        opacity: 1; 
    }
    .service-card{
        width: 150px;
        height: 150px;
    }

    .main-icon {
        font-size: 1.5rem;
    }
      
    .intro-group {
        grid-template-columns: auto;
    }

    .service-card {
        padding : 0.5rem;
    }

    .service-card .title {
        font-size: 1rem;
    }

    .service-card .service-icons {
        display: none;
    }

    .network-logo-wrapper {
        gap: 1rem;
    }

    .network-logo {
        width: 40px;
    }

}

@media screen and (max-width: 480px) {
    .landing-page h1 {
        font-size: 1.5rem;
    }
    .landing-page .small-title {
        font-size: 1rem;
    }
    .content-box {
        padding: 1rem;
    }

    .service-section>div {
        flex-grow: 1 ;
    }

    .service-card {
        width: 100%;
        height: fit-content;
    }

    .numberDisplay {
        gap: 0.2rem;
    }
    .total-scan-number {
        border-radius: 5px;
        width: 1.5rem;
        font-size: 1.5rem;
    }

    .content-box .number {
        width: 100px;
        display: inline-block;
        font-size: 1rem;
    }

}

@keyframes appear {
    0% {
        opacity: 1; 
    }
    30% {
        opacity: 0.8; 
    }
    60% {
        opacity: 0; 
    }
    100% {
        opacity: 1;
    }
}

/* ============================================================================
   LANDING REFRESH
   Appended so it wins on source order. Reshapes the hero, the service cards,
   the counter and the network wall onto the shared design tokens.
   ========================================================================= */

.landing-page {
    background-image: none;
    background-color: transparent;
    gap: 7rem;
    padding-top: 3rem;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.intro-content {
    max-width: 1440px;
    min-height: auto;
    padding-block: clamp(2rem, 5vh, 4rem) 0;
    gap: 4.5rem;
}

.intro-group {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 3rem;
}

.intro-text-group { gap: 2.25rem; }

.intro-text {
    white-space: normal;
    width: auto;
    max-width: none;
    gap: 0.9rem;
}

.intro-kicker {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gw-ink-3);
    letter-spacing: 0.01em;
}

.intro-kicker span { color: var(--gw-ink-3); opacity: 0.5; margin-inline: 0.25rem; }

.landing-page h1.intro-headline {
    font-family: var(--gw-display);
    font-size: clamp(2.4rem, 1.4rem + 3.1vw, 4.1rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.038em;
    margin: 0;
    max-width: 13ch;
    text-wrap: balance;
}

.intro-headline .deceptive-color {
    color: var(--gw-risk);
    /* The accent is the product's whole subject, so it gets a mark under it
       rather than just a colour swap. */
    background-image: linear-gradient(
        to top,
        color-mix(in srgb, var(--gw-risk) 30%, transparent) 0 0.09em,
        transparent 0.09em
    );
}

.intro-sub {
    margin: 0.3rem 0 0;
    max-width: 44ch;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--gw-ink-2);
}

.intro-image {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.intro-button { margin: 0; }
.intro-button a { display: inline-block; }
.intro-register-button { margin: 0; }

/* ── Service cards ───────────────────────────────────────────────────────── */
/* Was: a 220px square whose title vanished on hover and whose background
   flipped to light grey. Now the title stays put, the description is always
   readable, and hover only lifts and warms the edge. */

.service-section { gap: 3rem; flex-direction: column; }

.service-section > div > h2 {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gw-ink-3);
    font-family: var(--gw-sans);
    margin-bottom: 0.9rem;
}

.service-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 0.9rem;
}

.service-card {
    background: var(--glass-bg-card);
    border: 1px solid var(--gw-line);
    border-radius: var(--gw-r-lg);
    width: auto;
    height: auto;
    min-height: 168px;
    padding: 1.15rem;
    overflow: hidden;
    position: relative;
    transition:
        border-color var(--gw-t-base) var(--gw-ease-out),
        background-color var(--gw-t-base) var(--gw-ease-out),
        transform var(--gw-t-base) var(--gw-ease-out),
        box-shadow var(--gw-t-base) var(--gw-ease-out);
}

.service-card::after {
    /* Accent wash that arrives from the top-left corner on hover. */
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        130% 100% at 0% 0%,
        color-mix(in srgb, var(--gw-accent) 12%, transparent) 0%,
        transparent 62%
    );
    opacity: 0;
    transition: opacity var(--gw-t-base) var(--gw-ease-out);
}

.service-card .card-content {
    gap: 0.9rem;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
}

.service-card .service-icons {
    align-items: flex-start;
    color: var(--gw-ink-2);
}

.service-card .main-icon {
    font-size: 1.3rem;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--gw-r-md);
    background: var(--gw-accent-soft);
    color: var(--gw-accent);
    transition: background-color var(--gw-t-base) var(--gw-ease-out);
}

img.main-icon { padding: 7px; object-fit: contain; }

.service-card .service-icons .fa-arrow-right {
    font-size: 0.8rem;
    color: var(--gw-ink-3);
    margin-top: 0.5rem;
    transition:
        transform var(--gw-t-base) var(--gw-ease-out),
        color var(--gw-t-base) var(--gw-ease-out);
}

.service-card .card-text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: auto;
}

/* Unpin title and description from the bottom-right corner. */
.service-card .title,
.service-card .content {
    position: static;
    padding: 0;
    text-align: left;
    opacity: 1;
    transform: none;
    display: block;
}

.service-card .title,
.card-text .title,
.service-card:hover .title {
    font-family: var(--gw-display);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0;
    color: var(--gw-ink);
}

.service-card .content,
.service-card:hover .content {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--gw-ink-3);
    transition: color var(--gw-t-base) var(--gw-ease-out);
}

.service-card a { display: block; height: 100%; }

@media (hover: hover) and (pointer: fine) {
    .service-card:hover {
        background: var(--glass-bg-card);
        color: inherit;
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--gw-accent) 36%, transparent);
        box-shadow: var(--gw-shadow-2);
    }

    .service-card:hover::after { opacity: 1; }
    .service-card:hover .content { color: var(--gw-ink-2); }
    .service-card:hover .service-icons { color: var(--gw-ink-2); }

    .service-card:hover .service-icons .fa-arrow-right {
        transform: translateX(4px);
        color: var(--gw-accent);
    }
}

.service-card:active { transform: scale(0.985); }

/* ── Scanned-to-date counter ─────────────────────────────────────────────── */
/* Was: chunky grey gradient tiles per digit. Now one mono readout in a single
   quiet frame, so the number reads as an instrument, not a slot machine. */

#total { margin-bottom: 3.5rem; gap: 0.65rem; }

.numberDisplay {
    gap: 0.12rem;
    font-family: var(--gw-mono);
    font-variant-numeric: tabular-nums;
    align-items: center;
}

.total-scan-number {
    background: none;
    border-radius: 0;
    width: auto;
    min-width: 0.72em;
    font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--gw-ink);
}

#total h3 {
    font-family: var(--gw-sans);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gw-ink-3);
}

/* ── Stat panels ─────────────────────────────────────────────────────────── */

.content-box,
#surface, #darkweb, #blockchain {
    background: var(--glass-bg-card);
    border: 1px solid var(--gw-line);
    border-radius: var(--gw-r-lg);
    padding: 1.6rem 1.75rem;
    max-width: 420px;
    flex: 1 1 320px;
    transition: border-color var(--gw-t-base) var(--gw-ease-out);
}

.content-box h3,
#surface h3, #darkweb h3, #blockchain h3 {
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: var(--gw-sans);
    margin-bottom: 1.15rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--gw-line);
}

#surface h3 { color: var(--gw-warn); }
#darkweb h3 { color: var(--gw-risk); }
#blockchain h3 { color: var(--gw-accent); }

.content-box > div {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    padding: 0.32rem 0;
    font-size: 0.86rem;
    color: var(--gw-ink-2);
}

.content-box .number {
    width: 96px;
    flex-shrink: 0;
    font-family: var(--gw-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.12rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--gw-ink);
}

.powered-by-badge {
    border-top-color: var(--gw-line);
    margin-top: 1.1rem;
    padding-top: 1.1rem;
}

.engine-logo { width: 30px; height: 30px; }
.engine-text { font-size: 0.78rem; color: var(--gw-ink-3); opacity: 1; }

/* ── Network wall ────────────────────────────────────────────────────────── */

#network h2 {
    font-family: var(--gw-sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gw-ink-3);
}

.network-logo-wrapper { gap: 1.4rem; max-width: 860px; }

.network-logo {
    width: 52px;
    opacity: 0.55;
    filter: saturate(0.15);
    transition:
        opacity var(--gw-t-base) var(--gw-ease-out),
        filter var(--gw-t-base) var(--gw-ease-out),
        transform var(--gw-t-base) var(--gw-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .network-logo:hover {
        opacity: 1;
        filter: none;
        transform: translateY(-3px) scale(1.06);
    }
}

/* ── Narrow viewports ────────────────────────────────────────────────────── */

@media screen and (max-width: 900px) {
    .intro-group { grid-template-columns: 1fr; }
    .intro-image { order: -1; }
    .intro-text { max-width: 100%; }
    .landing-page { gap: 4.5rem; }
    .intro-content { gap: 3rem; }
    .service-group { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

@media screen and (max-width: 600px) {
    .service-group { grid-template-columns: 1fr; }
    .service-card { min-height: 0; }
    .content-box { max-width: 100%; }
}

/* The decorative graph sits behind the mark, so it has to give way to it. */
.gw-netgraph {
    inset: -4rem 0 0;
    opacity: 0.55;
    mask-image: radial-gradient(120% 100% at 60% 20%, #000 25%, transparent 72%);
    -webkit-mask-image: radial-gradient(120% 100% at 60% 20%, #000 25%, transparent 72%);
}

.ng-halo { opacity: 0.28; }
.ng-node circle:last-child { filter: drop-shadow(0 0 4px currentColor); }
.ng-trace { opacity: 0.45; stroke-width: 1.2; }

/* Keep the graph inside the hero band. It used to stretch the full height of
   the intro section, which blew the node radii up over the service cards. */
.gw-netgraph {
    inset: -4rem 0 auto 0;
    height: min(760px, 92vh);
    opacity: 0.5;
    mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 94%),
                radial-gradient(115% 100% at 62% 22%, #000 30%, transparent 78%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 94%),
                        radial-gradient(115% 100% at 62% 22%, #000 30%, transparent 78%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
}

.service-card .content,
.service-card:hover .content {
    color: var(--gw-ink-2);
}

.service-card .title,
.card-text .title,
.service-card:hover .title {
    font-size: 0.94rem;
    text-wrap: balance;
}

/* The original rule left flex-wrap:wrap on this container; combined with a
   column direction it wrapped into stretched columns and inflated each group
   by hundreds of pixels. Grid sidesteps it entirely. */
.service-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    flex-wrap: nowrap;
}

.service-section > div { display: block; }
.service-section > div > .service-group { margin: 0; }

/* ── Service card corrections ────────────────────────────────────────────── */
/* The original rules fade the title out on hover; the title has to stay and
   the description is what arrives. Higher specificity than
   `.service-card:hover .title` is required to win. */

.service-card .card-content .card-text .title,
.service-card:hover .card-content .card-text .title {
    opacity: 1 !important;
    font-size: 1.02rem;
    line-height: 1.3;
    color: var(--gw-ink);
}

.service-card .card-content .card-text .content,
.service-card:hover .card-content .card-text .content {
    font-size: 0.86rem;
    line-height: 1.5;
}

/* Description is held back until hover, then slides up under the title. */
@media (hover: hover) and (pointer: fine) {
    .service-card .card-content .card-text .content {
        opacity: 0;
        transform: translateY(6px);
        transition:
            opacity var(--gw-t-base) var(--gw-ease-out),
            transform var(--gw-t-base) var(--gw-ease-out);
    }

    .service-card:hover .card-content .card-text .content,
    .service-card:focus-within .card-content .card-text .content {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Touch devices never hover, so the description is always readable there. */
@media (hover: none) {
    .service-card .card-content .card-text .content {
        opacity: 1;
        transform: none;
    }
}

/* Reserve the description's space so nothing shifts on hover. */
.service-card .card-text { min-height: 5.2em; }
.service-card { min-height: 176px; }

/* ── Scan mark above the counter ─────────────────────────────────────────── */

#total {
    align-items: center;
    gap: 0.5rem;
}

#total .gw-scanmark {
    max-width: 168px;
    margin-bottom: 0.8rem;
}

@media screen and (max-width: 600px) {
    #total .gw-scanmark { max-width: 120px; }
}

/* The map is the hero visual again, so the graph mask goes back to favouring
   the right-hand side where the map sits. */
.intro-image > svg {
    fill: var(--gw-ink-3);
    max-height: 62vh;
}

/* Titles wrap to one or two lines depending on length; reserving the taller
   case keeps every description on the same baseline across the row. */
.service-card .card-content .card-text .title { min-height: 2.6em; }

@media screen and (max-width: 600px) {
    .service-card .card-content .card-text .title { min-height: 0; }
    .service-card .card-text { min-height: 0; }
}

/* ── Narrow-viewport corrections ─────────────────────────────────────────── */
/* The original tablet rules hid the icon row and the description and pinned
   the card to a fixed 150px square. The card is fluid now, so those are
   undone and the description stays readable where there is no hover. */

@media screen and (max-width: 768px) {
    .service-card {
        width: auto;
        height: auto;
        min-height: 0;
        padding: 1.05rem;
    }

    .service-card .service-icons { display: flex; }

    .service-card .card-content { gap: 0.8rem; }

    .service-card .card-content .card-text {
        height: auto;
        min-height: 0;
        gap: 0.3rem;
    }

    .service-card .card-content .card-text .title {
        min-height: 0;
        font-size: 0.96rem;
    }

    .service-card .content,
    .service-card .card-content .card-text .content {
        display: block;
        opacity: 1;
        transform: none;
        font-size: 0.82rem;
    }

    .service-card .main-icon { width: 34px; height: 34px; font-size: 1.1rem; }

    .intro-content { padding-inline: 1.25rem; }
    .intro-image { max-width: 100%; }
    .intro-image > svg { max-height: 34vh; }
    .landing-page { padding-top: 1.5rem; }
}

@media screen and (max-width: 480px) {
    .service-card { width: auto; }
    .service-group { grid-template-columns: minmax(0, 1fr); }
    .numberDisplay { gap: 0.06rem; }
    .total-scan-number { border-radius: 0; }
}

/* ============================================================================
   TYPE SCALE AND HERO SPACING — pass 2
   Everything on this page ran a step small for the width it sits in, and the
   headline's line-height clipped the dots on the i's in "activity".
   ========================================================================= */

/* ── Hero ────────────────────────────────────────────────────────────────── */

.intro-text { gap: 1.1rem; }

.intro-kicker {
    font-size: 0.95rem;
    letter-spacing: 0.005em;
}

.landing-page h1.intro-headline {
    font-size: clamp(2.9rem, 1.6rem + 3.8vw, 4.9rem);
    /* 1.04 clipped ascenders and the tittles on the i's against the line
       above. 1.14 plus a little top reserve gives them room. */
    line-height: 1.14;
    padding-top: 0.12em;
    max-width: 14ch;
}

.intro-headline .deceptive-color {
    /* Keep the underline clear of the descenders now that leading is wider. */
    background-image: linear-gradient(
        to top,
        color-mix(in srgb, var(--gw-risk) 30%, transparent) 0 0.075em,
        transparent 0.075em
    );
    padding-bottom: 0.06em;
}

.intro-sub {
    margin-top: 0.55rem;
    font-size: clamp(1.06rem, 0.95rem + 0.4vw, 1.25rem);
    line-height: 1.55;
    max-width: 40ch;
}

/* ── Section labels ──────────────────────────────────────────────────────── */

.service-section > div > h2,
#network h2 {
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    margin-bottom: 1.05rem;
}

/* ── Service cards ───────────────────────────────────────────────────────── */

.service-group {
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 1rem;
}

.service-card {
    padding: 1.35rem;
    min-height: 196px;
}

.service-card .main-icon {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
}

img.main-icon { padding: 8px; }

.service-card .service-icons .fa-arrow-right { font-size: 0.95rem; }

.service-card .card-content .card-text .title,
.service-card:hover .card-content .card-text .title {
    font-size: 1.18rem;
    line-height: 1.28;
    min-height: 2.56em;
}

.service-card .card-content .card-text .content,
.service-card:hover .card-content .card-text .content {
    font-size: 0.97rem;
    line-height: 1.5;
}

.service-card .card-text { min-height: 5.6em; }

/* ── Counter and stat panels ─────────────────────────────────────────────── */

.total-scan-number { font-size: clamp(2.6rem, 1.6rem + 3vw, 4rem); }

#total h3 { font-size: 0.95rem; letter-spacing: 0.05em; }

.content-box,
#surface, #darkweb, #blockchain {
    padding: 1.85rem 2rem;
    max-width: 460px;
}

.content-box h3,
#surface h3, #darkweb h3, #blockchain h3 {
    font-size: 0.92rem;
    margin-bottom: 1.3rem;
}

.content-box > div {
    font-size: 1rem;
    padding: 0.42rem 0;
    gap: 1.1rem;
}

.content-box .number {
    width: 112px;
    font-size: 1.28rem;
}

.engine-text { font-size: 0.9rem; }
.engine-logo { width: 34px; height: 34px; }

.network-logo { width: 58px; }

/* ============================================================================
   NARROW VIEWPORTS — pass 2
   The hero used to lead with the world map, which pushed the headline off the
   first screen. The headline comes first and the map follows it.
   ========================================================================= */

@media screen and (max-width: 900px) {
    .intro-image { order: 0; }

    .landing-page h1.intro-headline {
        font-size: clamp(2.5rem, 1.6rem + 4.4vw, 3.6rem);
        max-width: 16ch;
    }
}

@media screen and (max-width: 768px) {
    .intro-content {
        padding-block: 1.5rem 0;
        gap: 2.5rem;
    }

    .intro-group { gap: 2rem; }

    .landing-page h1.intro-headline {
        font-size: clamp(2.2rem, 1.3rem + 4.6vw, 3rem);
        max-width: 18ch;
    }

    .intro-sub { font-size: 1.02rem; max-width: 46ch; }
    .intro-kicker { font-size: 0.88rem; }

    /* The map is supporting art at this width, not the lead. */
    .intro-image { max-height: 30vh; overflow: hidden; }
    .intro-image > svg { max-height: 30vh; }

    .service-group { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
    .service-card { min-height: 0; padding: 1.15rem; }

    .service-card .card-content .card-text .title {
        font-size: 1.06rem;
        min-height: 0;
    }

    .service-card .card-content .card-text .content { font-size: 0.92rem; }
    .service-card .card-text { min-height: 0; }
    .service-card .main-icon { width: 40px; height: 40px; font-size: 1.3rem; }

    .content-box > div { font-size: 0.95rem; }
    .content-box .number { width: 92px; font-size: 1.15rem; }
}

@media screen and (max-width: 560px) {
    .service-group { grid-template-columns: minmax(0, 1fr); }
    .intro-image { max-height: 24vh; }
    .intro-image > svg { max-height: 24vh; }
    .content-box, #surface, #darkweb, #blockchain { padding: 1.35rem 1.4rem; }
}

/* ============================================================================
   MOBILE HERO — map as a backdrop
   Stacking the map above or below the copy either buried the headline or left
   a dead band under it. At narrow widths the map moves behind the text as a
   faint backdrop, so the hero is one block again.
   ========================================================================= */

@media screen and (max-width: 900px) {
    .intro-group {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "hero";
        gap: 0;
    }

    .intro-text-group {
        grid-area: hero;
        position: relative;
        z-index: 2;
        padding-block: 1.5rem 0;
    }

    .intro-image {
        grid-area: hero;
        position: relative;
        z-index: 0;
        align-self: start;
        justify-self: center;
        width: 130%;
        max-width: none;
        max-height: none;
        pointer-events: none;
        opacity: 0.3;
        /* Fade the edges so the map reads as texture behind the type rather
           than a picture the headline is sitting on. */
        mask-image: radial-gradient(115% 85% at 50% 32%, #000 24%, transparent 76%);
        -webkit-mask-image: radial-gradient(115% 85% at 50% 32%, #000 24%, transparent 76%);
    }

    .intro-image > svg {
        width: 100%;
        height: auto;
        max-height: none;
    }

    /* The decorative graph would be a third layer in the same space. */
    .gw-netgraph { opacity: 0.25; }
}

@media screen and (max-width: 560px) {
    .intro-image { width: 165%; opacity: 0.26; }
    .intro-text-group { padding-block: 1rem 0; }
}

@media (prefers-reduced-transparency: reduce) {
    @media screen and (max-width: 900px) {
        .intro-image { opacity: 0.18; }
    }
}

/* The engine credit is the panel's footer: it sits on the baseline of the card
   regardless of how many stat rows each panel carries. */
.content-box,
#surface, #darkweb, #blockchain {
    display: flex;
    flex-direction: column;
}

.content-box .powered-by-badge {
    margin-top: auto;
}