/* ==========================================
   Noble Feeders
   Version 0.1
========================================== */

:root {

    --bg: #090909;
    --surface: #111111;

    --gold: #D4AF37;
    --gold-hover: #E6C559;

    --text: #F5F2E9;
    --muted: #C8C2B5;

    --green: #1B382A;

    --max-width: 720px;

}

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    background: var(--bg);
    color: var(--text);

    font-family: "Inter", sans-serif;

    min-height: 100vh;

    overflow-x: hidden;

}


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

.hero {

    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 60px 30px;

    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.hero-content {
    padding-top:40px;
    width: 100%;
    max-width: 760px;

    text-align: center;

    position: relative;
    z-index: 10;

}

/*.hero-content::before{
    content:"";
    position:absolute;
    inset:-20px;
    background:rgba(9,9,9,.55);
    filter:blur(25px);
    z-index:-1;
}
*/
.hero-left,
.hero-right {
    position: absolute;
    bottom: -20px;
    width: 38vw;
    max-width: 700px;
    height: auto;
    pointer-events: none;
    user-select: none;

    z-index: 1;

    opacity: .95;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

.hero-left {
  bottom: 20px;
  object-fit: contain;
  object-position: left bottom;
    left: -40px;
    width: 42vw;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.2) 12%,
        rgba(0,0,0,.6) 25%,
        black 45%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.2) 12%,
        rgba(0,0,0,.6) 25%,
        black 45%
    );
}

.hero-right {
  right: -40px;
  width: 42vw;
  opacity: .70;
  object-fit: contain;
  object-position: right bottom;
    -webkit-mask-image: linear-gradient(
        to left,
        transparent 0%,
        rgba(0,0,0,.2) 12%,
        rgba(0,0,0,.6) 25%,
        black 45%
    );
    mask-image: linear-gradient(
        to left,
        transparent 0%,
        rgba(0,0,0,.2) 12%,
        rgba(0,0,0,.6) 25%,
        black 45%
    );
}

/* ==========================================
   GLOBAL SECTIONS
========================================== */

section {

    padding: 120px 30px;

}

.container {

    width: min(1100px, 92%);
    margin: auto;

}

.eyebrow {

    color: var(--gold);

    text-transform: uppercase;

    letter-spacing: .18rem;

    font-size: .9rem;

    margin-bottom: 18px;

}

.section-title {

    font-family: "Cinzel", serif;

    color: var(--gold);

    font-size: clamp(2.5rem,5vw,4rem);

    line-height: 1.15;

    margin-bottom: 40px;

}

.section-text {

    color: var(--muted);

    font-size: 1.1rem;

    line-height: 2;

    max-width: 720px;

    margin-bottom: 28px;

}

/* ==========================================
   PHILOSOPHY
========================================== */

.philosophy{

    background:#0b0b0b;

    border-top:1px solid rgba(255,255,255,.05);

    border-bottom:1px solid rgba(255,255,255,.05);

}

/* ==========================================
   COLONIES
========================================== */

.cards{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:32px;

    margin-top:60px;

}

.card{

    background:var(--surface);

    border:1px solid rgba(212,175,55,.15);

    border-radius:18px;

    padding:40px;

    transition:.25s;

}

.card:hover{

    transform:translateY(-6px);

    border-color:rgba(212,175,55,.45);

}

.card h3{

    color:var(--gold);

    font-family:"Cinzel",serif;

    margin-bottom:20px;

}

.card p{

    color:var(--muted);

    line-height:1.8;

    margin-bottom:30px;

}

.status{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

}

.available{

    background:#274b31;

    color:#c9f3d3;

}

.soon{

    background:#463b17;

    color:#ffe08d;

}

.community{

    background:#1d2b42;

    color:#b8d9ff;

}

/* ==========================================
   INTEREST
========================================== */

.interest{

    background:#090909;

}

.interest-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:start;

}

.interest-form iframe{

    width:100%;

    height:700px;

    border:none;

    border-radius:18px;

    background:#111;

}

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

footer{

    border-top:1px solid rgba(255,255,255,.05);

    padding:60px 30px;

}

.footer-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:30px;

}

.footer-content p{

    color:var(--muted);

    line-height:1.7;

}

/* ==========================================
   LOGO
========================================== */
.logo {
    width: auto;
    height: 300px;
    display: block;
    margin: 0 auto 25px;

    filter: drop-shadow(0 0 18px rgba(212,175,55,.18));
}

/* ==========================================
   HEADINGS
========================================== */

h1 {

    font-family: "Cinzel", serif;

    text-transform: uppercase;

    letter-spacing: .12rem;

    font-size: clamp(5.6rem,8vw, 7rem);

    color: #d9b548;

    text-shadow:
        0 0 10px rgba(212,175,55,.15);

}

h2 {

    font-family: "Cinzel", serif;

    text-transform: uppercase;

    letter-spacing: .35rem;

    font-size: 2.2rem;

    margin-top: -8px;

    margin-bottom: 25px;

    color: var(--gold);

    font-weight:500;
}


/* ==========================================
   TAGLINE
========================================== */

.tagline {

    font-size: 1.8rem;

    color: var(--muted);

    line-height: 1.5;

    margin-bottom: 40px;

}


/* ==========================================
   DIVIDER
========================================== */

.divider {

    width: 120px;
    height: 2px;

    background: var(--gold);

    margin: 45px auto;

}


/* ==========================================
   DESCRIPTION
========================================== */

.description {

    max-width: 540px;

    margin: auto;

    font-size: 1.15rem;

    line-height: 1.8;

    color: var(--muted);

}
.description:first-of-type {
  margin-bottom: 18px;
}

/* ==========================================
   BUTTON
========================================== */

.button {

    display: inline-block;

    margin-top: 60px;

    background: 
      linear-gradient(
        180deg,
        #f0cf63 0%,
        #d4af37 100%
      );

    color: black;

    text-decoration: none;

    font-weight: 600;

    padding: 22px 58px;

    border-radius: 999px;

    transition: all .25s ease;

    letter-spacing: .05rem;

    font-size:1.2rem;
}

.button:hover {

    background: var(--gold-hover);

    transform: 
          translateY(-4px)
          scale(1.02);

    box-shadow: 0 12px 30px rgba(212,175,55,.25);

}
.feeders-row {
    display:flex;

    align-items:center;

    justify-content:center;

    gap:24px;

    margin-bottom: 32px;
}

.feeders-row span {
  width:120px;
  height:2px;
  background:var(--gold);
}

.highlight {
  margin-top: 55px;
  color:var(--gold);
  font-size: 1.3rem;
  margin-bottom: 12px;
}


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

@media (max-width: 960px) {

    .hero {

        padding: 40px 20px;

    }

    .logo {

        width: 150px;

    }

    .description {

        font-size: 1rem;

        line-height: 1.8;

    }

    .interest-grid{

        grid-template-columns:1fr;

    }

    .footer-content{

        flex-direction:column;

        text-align:center;

    }

}