.landing-page {
    display: flex;
    flex-direction: column;
    gap: 8rem;
    padding-top: 4rem;
    width: 100vw;
}

.container {
    width: 100%;
    padding : 0 5%;
    max-width: 1600px;
    margin: auto;
}
.background-image-black {
    position: fixed ;
    display: block; 
    z-index: -10; 
    bottom: 0;
    background-color: black;
    height: 100vh;
    width: 100vw;
}

#first-intro h1 {
    font-size: 4rem;
}

.blue-text {
    color: #1998FF;
}

.red-text {
    color : #FF0000;
}

.grey-text {
    color : #BEBEBE;
}

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

.large-image img {
    width: 100vw;
}
.large-image{
    z-index: -4;
    /* animation : appear 6s ease  infinite; */
}

h1,h2,h3,h4 {
    font-family: var(--gw-display);
}

#first-intro {
    padding-top: 4rem;
    text-align: center;
    max-width: 1000px;
    margin: auto;
}

#first-intro p {
    margin-top: 4rem;
}

#onchain-intro {
    border-top: #333333 1px solid;
    border-bottom: #333333 1px solid;
    background-color: #12151A;
    padding: 4rem 0;
}

#onchain-intro .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
 
}


#onchain-intro .item-group>div{
    display: flex;
    gap: 2rem;
    max-width: 800px;
    min-width: 350px;
    margin-bottom: 1rem;
    align-items: center;
}

#onchain-intro img {
    width: 80px;
    height: 80px;
}

#offchain-intro .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-direction: column;
    max-width: unset;
}
.title {
    text-align: center;
    min-width: 400px;
}

#offchain-intro .item-group {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

#offchain-intro .groups {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

#offchain-intro .item-group>div {
    border: #333333 1px solid;
    border-radius: 10px;
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
}

#offchain-intro img {
    width: 100px;
    height: 100px;
}

#offchain-intro h4 {
    text-align: center;
    margin-top: 1rem;
}

#offchain-intro h1 {
    text-align: center;
    padding: 2rem;
}



@media screen  and (max-width:1600px){
    .landing-page {
        padding-top: 2rem;
    }
   
}  

/*iPads and Tablets */
@media screen and (max-width: 768px) {
    .landing-page {
        gap: 4rem;
    }
}



/* ──────────────────────────────────────────────────────────────────────────
   Light theme.

   This page predates the token system: it paints a fixed black plate behind
   everything and hardcodes its section colours, so in light mode the body ink
   (dark purple) landed on black and the page was unreadable. Dark mode is left
   exactly as it was; only the light path is remapped onto graywolf.css tokens.
   ────────────────────────────────────────────────────────────────────────── */

[data-bs-theme="light"] .background-image-black {
    background-color: var(--gw-canvas);
}

/* The ombre artwork is drawn for a black ground and muddies the light canvas. */
[data-bs-theme="light"] .background-image {
    display: none;
}

[data-bs-theme="light"] .grey-text {
    color: var(--gw-ink-2);
}

[data-bs-theme="light"] #onchain-intro {
    background-color: var(--gw-surface-2);
    border-top-color: var(--gw-line);
    border-bottom-color: var(--gw-line);
}

[data-bs-theme="light"] #offchain-intro .item-group>div {
    border-color: var(--gw-line);
    background-color: var(--gw-surface);
}

/* #FF0000 and #1998FF are both too light to hold their own on a near-white
   canvas; these are the token equivalents at light-mode contrast. */
[data-bs-theme="light"] .red-text {
    color: var(--gw-risk);
}

[data-bs-theme="light"] .blue-text {
    color: #1370c4;
}