/* ============================================================
   SEED BROKERS — Coming Soon  ·  Ultra-clean white theme
   ============================================================ */

/* ---------- Variables ---------- */
:root {
    --gold:        #B87333;
    --gold-light:  #D4944A;
    --gold-dark:   #9A5F28;
    --gold-grad:   linear-gradient(135deg, #B87333, #D4944A, #B87333);

    --bg:          #FFFFFF;
    --bg-soft:     #FAFAF8;

    --text:        #1A1A1F;
    --text-mid:    #5A5A64;
    --text-light:  #9A9AA0;

    --radius:      10px;
    --ease:        cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit;border:none;outline:none}
input{font-family:inherit;outline:none}

body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.65;
    overflow-x:hidden;
    min-height:100vh;
}

::selection{background:var(--gold);color:#fff}

/* ---------- Top / Bottom gold accents ---------- */
.top-accent,.bottom-accent{
    height:3px;
    background:var(--gold-grad);
}

/* ---------- Page (centered single-column layout) ---------- */
.page{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:calc(100vh - 6px); /* minus top+bottom accents */
    padding:60px 24px 40px;
    text-align:center;
}

/* ---------- Logo ---------- */
.logo-wrapper{
    margin-bottom:40px;
}

.logo{
    width:200px;
    height:200px;
    object-fit:contain;
    border-radius:22px;
    /* Subtle floating shadow to lift logo from white bg */
    box-shadow:
        0 8px 40px rgba(0,0,0,.06),
        0 1px 3px rgba(0,0,0,.04);
    transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}

.logo:hover{
    transform:translateY(-4px) scale(1.02);
    box-shadow:
        0 16px 60px rgba(201,148,61,.12),
        0 2px 6px rgba(0,0,0,.04);
}

/* ---------- Typography ---------- */
.tagline{
    font-family:'Playfair Display',serif;
    font-size:clamp(1.6rem, 4vw, 2.8rem);
    font-weight:600;
    color:var(--text);
    line-height:1.3;
    margin-bottom:16px;
    letter-spacing:-.02em;
}

.tagline em{
    font-style:italic;
    background:var(--gold-grad);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.subtitle{
    font-size:clamp(.95rem, 2vw, 1.15rem);
    color:var(--text-mid);
    font-weight:300;
    line-height:1.75;
    max-width:480px;
    margin-bottom:44px;
}

.subtitle strong{
    font-weight:500;
    color:var(--text);
}

/* ---------- Notify form ---------- */
.form-intro{
    font-size:.9rem;
    color:var(--text-light);
    margin-bottom:16px;
    letter-spacing:.3px;
}

.notify-form{
    display:flex;
    gap:0;
    max-width:460px;
    width:100%;
    border:1.5px solid #E8E8E8;
    border-radius:var(--radius);
    overflow:hidden;
    transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
    background:#fff;
}

.notify-form:focus-within{
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(201,148,61,.1);
}

.notify-form input{
    flex:1;
    padding:14px 18px;
    font-size:.95rem;
    border:none;
    background:transparent;
    color:var(--text);
}

.notify-form input::placeholder{
    color:var(--text-light);
    font-weight:300;
}

.notify-form button{
    padding:14px 28px;
    background:var(--gold-grad);
    color:#fff;
    font-size:.9rem;
    font-weight:600;
    letter-spacing:.4px;
    transition:opacity .3s var(--ease);
    white-space:nowrap;
}

.notify-form button:hover{
    opacity:.88;
}

.form-feedback{
    margin-top:12px;
    font-size:.85rem;
    min-height:20px;
    color:var(--gold-dark);
    font-weight:500;
}

/* ---------- Featured project card ---------- */
.featured{
    display:block;
    width:100%;
    max-width:500px;
    margin:40px 0 0;
    padding:28px 32px 24px;
    border:1.5px solid #EAEAE6;
    border-radius:14px;
    background:#FDFCFA;
    text-align:center;
    position:relative;
    transition:all .4s var(--ease);
    text-decoration:none;
    color:var(--text);
}

.featured:hover{
    border-color:var(--gold);
    box-shadow:0 12px 40px rgba(184,115,51,.1);
    transform:translateY(-3px);
}

.featured-badge{
    position:absolute;
    top:-11px;
    left:50%;
    transform:translateX(-50%);
    padding:3px 16px;
    font-size:.7rem;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;
    background:var(--gold-grad);
    color:#fff;
    border-radius:20px;
    white-space:nowrap;
}

.featured-body{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
}

.featured-label{
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--text-light);
    font-weight:500;
}

.featured-title{
    font-family:'Playfair Display',serif;
    font-size:1.7rem;
    font-weight:700;
    letter-spacing:.08em;
    color:var(--text);
    line-height:1.2;
}

.featured-title span{
    font-weight:400;
    color:var(--gold);
}

.featured-desc{
    font-size:.88rem;
    color:var(--text-mid);
    font-weight:300;
    margin-top:2px;
}

.featured-cta{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:12px;
    font-size:.85rem;
    font-weight:600;
    color:var(--gold);
    transition:gap .3s var(--ease);
}

.featured:hover .featured-cta{
    gap:10px;
}

/* ---------- Divider ---------- */
.divider{
    display:flex;
    align-items:center;
    gap:14px;
    margin:36px 0 28px;
    width:100%;
    max-width:240px;
}

.divider span{
    flex:1;
    height:1px;
    background:linear-gradient(90deg,transparent,#E0D8CC,transparent);
}

/* ---------- Contact row ---------- */
.contact-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:28px;
    margin-bottom:28px;
}

.contact-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.88rem;
    color:var(--text-mid);
    transition:color .3s var(--ease);
}

.contact-link:hover{
    color:var(--gold);
}

.contact-link svg{
    flex-shrink:0;
}

/* ---------- Social ---------- */
.social{
    display:flex;
    gap:20px;
}

.social a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:50%;
    border:1.5px solid #E8E8E8;
    color:var(--text-mid);
    transition:all .35s var(--ease);
}

.social a:hover{
    border-color:var(--gold);
    color:var(--gold);
    transform:translateY(-2px);
    box-shadow:0 4px 16px rgba(201,148,61,.12);
}

/* ---------- Fade-in animations ---------- */
.fade-in{
    opacity:0;
    transform:translateY(18px);
    animation:fadeUp .8s var(--ease) forwards;
}
.delay-1{animation-delay:.15s}
.delay-2{animation-delay:.3s}
.delay-3{animation-delay:.45s}
.delay-4{animation-delay:.6s}
.delay-5{animation-delay:.8s}

@keyframes fadeUp{
    to{opacity:1;transform:translateY(0)}
}

/* ---------- Responsive ---------- */
@media(max-width:520px){
    .page{padding:40px 20px 32px}
    .logo{width:160px;height:160px;border-radius:18px}
    .notify-form{
        flex-direction:column;
        border-radius:var(--radius);
    }
    .notify-form input{
        border-bottom:1px solid #E8E8E8;
        text-align:center;
    }
    .notify-form button{
        border-radius:0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px);
    }
    .contact-row{
        flex-direction:column;
        align-items:center;
        gap:14px;
    }
}