/* ==========================================================
   GÖ.AI
   Beta Portal CSS v2.2
   goaihq.com/beta

   Part 1 of 3

   Foundation
   Variables
   Reset
   Typography
   Header
   Hero
   Progress Card
========================================================== */



/* ==========================================================
   VARIABLES
========================================================== */

:root{

    /* Brand */

    --go-navy:#081B4B;
    --go-gold:#C89B3C;

    --go-white:#FFFFFF;
    --go-light:#FAF8F4;

    --go-text:#202020;
    --go-text-light:#666666;

    --go-border:#E6E6E6;

    --go-success:#2E8B57;
    --go-error:#C0392B;

    /* Radius */

    --radius-sm:8px;
    --radius:14px;
    --radius-lg:22px;

    /* Effects */

    --shadow-sm:
        0 8px 20px rgba(0,0,0,.06);

    --shadow:
        0 18px 50px rgba(0,0,0,.08);

    --transition:
        all .25s ease;

    --max-width:1400px;

}



/* ==========================================================
   RESET
========================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--go-light);

    color:var(--go-text);

    font-family:

        "Inter",
        Helvetica,
        Arial,
        sans-serif;

    line-height:1.65;

    -webkit-font-smoothing:antialiased;

}



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

img{

    display:block;

    max-width:100%;

}

a{

    color:inherit;

    text-decoration:none;

}

button{

    font-family:inherit;

}

.container{

    width:min(92%, var(--max-width));

    margin:auto;

}



/* ==========================================================
   HEADER
========================================================== */

.site-header{

    background:#fff;

    border-bottom:

        1px
        solid
        rgba(0,0,0,.05);

    position:sticky;

    top:0;

    z-index:1000;

}

.header-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:88px;

}

.logo img{

    width:210px;

}

.site-header nav{

    display:flex;

    gap:34px;

    align-items:center;

}

.site-header nav a{

    font-size:15px;

    font-weight:600;

    color:var(--go-navy);

    transition:var(--transition);

}

.site-header nav a:hover{

    color:var(--go-gold);

}



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

.beta-hero{

    padding:

        85px
        0
        110px;

}

.hero-grid{

    display:grid;

    grid-template-columns:

        1.2fr
        .8fr;

    gap:70px;

    align-items:start;

}

.hero-left{

    background:#fff;

    padding:55px;

    border-radius:22px;

    box-shadow:var(--shadow);

}

.hero-right{

    position:sticky;

    top:120px;

}



/* ==========================================================
   TYPOGRAPHY
========================================================== */

.eyebrow{

    color:var(--go-gold);

    font-size:14px;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    margin-bottom:18px;

}

.hero-left h1{

    font-family:

        "Cormorant Garamond",
        serif;

    color:var(--go-navy);

    font-size:72px;

    line-height:.95;

    margin-bottom:12px;

}

.hero-left h2{

    font-family:

        "Cormorant Garamond",
        serif;

    color:var(--go-navy);

    font-size:36px;

    font-weight:500;

    margin-bottom:28px;

}

.hero-left p{

    color:var(--go-text-light);

    font-size:18px;

    margin-bottom:18px;

}

.hero-left p:last-of-type{

    margin-bottom:40px;

}



/* ==========================================================
   PROGRESS CARD
========================================================== */

.progress-card{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:12px;

    background:#FFFDF7;

    border:

        1px
        solid
        rgba(200,155,60,.25);

    border-radius:14px;

    padding:

        16px
        22px;

    margin-bottom:45px;

}

.progress-step{

    font-weight:700;

    color:var(--go-gold);

}

.progress-divider{

    color:#B7B7B7;

}

.progress-title{

    color:var(--go-navy);

    font-weight:600;

}

.progress-time{

    color:#666;

    font-size:14px;

}



/* ==========================================================
   SECTION TITLES
========================================================== */

.form-section h3{

    color:var(--go-navy);

    font-size:28px;

    margin-bottom:10px;

}

.form-intro{

    color:#666;

    margin-bottom:34px;

}
/* ==========================================================
   GÖ.AI
   Beta Portal CSS v2.0

   Part 2 of 3

   Forms
   Inputs
   Buttons
   Validation
========================================================== */



/* ==========================================================
   FORM
========================================================== */

#beta-form{

    display:flex;

    flex-direction:column;

    gap:30px;

}


.form-section{

    display:flex;

    flex-direction:column;

}


/* ==========================================================
   FORM ROW
========================================================== */

.form-row{

    display:grid;

    grid-template-columns:

        1fr
        1fr;

    gap:24px;

}


/* ==========================================================
   FORM GROUP
========================================================== */

.form-group{

    display:flex;

    flex-direction:column;

    margin-bottom:28px;

}


/* ==========================================================
   LABELS
========================================================== */

.form-group label{

    color:var(--go-navy);

    font-size:15px;

    font-weight:600;

    margin-bottom:10px;

}


.form-group label span{

    color:#C0392B;

}


.form-group label small{

    color:#888;

    font-weight:500;

    margin-left:6px;

}


/* ==========================================================
   INPUTS
========================================================== */

.form-group input,

.form-group select,

.form-group textarea{

    width:100%;

    padding:

        15px
        18px;

    border:

        1px
        solid
        var(--go-border);

    border-radius:14px;

    background:#fff;

    color:var(--go-text);

    font-size:16px;

    transition:var(--transition);

    outline:none;

}


/* ==========================================================
   PLACEHOLDERS
========================================================== */

.form-group input::placeholder,

.form-group textarea::placeholder{

    color:#9A9A9A;

}


/* ==========================================================
   SELECT
========================================================== */

.form-group select{

    cursor:pointer;

    appearance:none;

    background-image:

        linear-gradient(45deg, transparent 50%, #888 50%),

        linear-gradient(135deg, #888 50%, transparent 50%);

    background-position:

        calc(100% - 22px) calc(50% - 4px),

        calc(100% - 16px) calc(50% - 4px);

    background-size:

        6px 6px,

        6px 6px;

    background-repeat:no-repeat;

}


/* ==========================================================
   TEXTAREA
========================================================== */

.form-group textarea{

    resize:vertical;

    min-height:140px;

}


/* ==========================================================
   FOCUS
========================================================== */

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

    border-color:var(--go-gold);

    box-shadow:

        0 0 0 4px rgba(200,155,60,.18);

}


/* ==========================================================
   VALIDATION
========================================================== */

.form-group input:invalid,

.form-group textarea:invalid{

    border-color:#E5E5E5;

}


.form-group input:valid,

.form-group textarea:valid{

    border-color:#D9D9D9;

}


/* ==========================================================
   PRIVACY
========================================================== */

.privacy-note{

    margin:

        10px
        0
        30px;

    color:#777;

    text-align:center;

    font-size:14px;

    line-height:1.6;

}


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

.beta-button{

    width:100%;

    padding:18px;

    border:none;

    border-radius:14px;

    background:var(--go-navy);

    color:#fff;

    font-size:17px;

    font-weight:700;

    letter-spacing:.04em;

    cursor:pointer;

    transition:var(--transition);

}


.beta-button:hover{

    background:var(--go-gold);

    transform:translateY(-2px);

    box-shadow:

        0 14px 35px rgba(200,155,60,.28);

}


.beta-button:active{

    transform:translateY(0);

}


.beta-button:disabled{

    cursor:not-allowed;

    opacity:.65;

}


/* ==========================================================
   LOADING STATE
========================================================== */

.beta-button.loading{

    position:relative;

    color:transparent;

}


.beta-button.loading::after{

    content:"";

    position:absolute;

    width:20px;

    height:20px;

    top:50%;

    left:50%;

    margin-left:-10px;

    margin-top:-10px;

    border:

        2px
        solid
        rgba(255,255,255,.35);

    border-top-color:#fff;

    border-radius:50%;

    animation:spin .8s linear infinite;

}


/* ==========================================================
   SUCCESS
========================================================== */

.form-success{

    display:none;

    padding:18px;

    border-radius:14px;

    background:#EEF9F1;

    color:var(--go-success);

    border:

        1px
        solid
        rgba(46,139,87,.25);

}


/* ==========================================================
   ERROR
========================================================== */

.form-error{

    display:none;

    padding:18px;

    border-radius:14px;

    background:#FFF4F3;

    color:var(--go-error);

    border:

        1px
        solid
        rgba(192,57,43,.20);

}


/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}
/* ==========================================================
   GÖ.AI
   Beta Portal CSS v2.0

   Part 3 of 3

   Benefits
   CTA
   Footer
   Responsive
   Utilities

========================================================== */



/* ==========================================================
   BENEFITS
========================================================== */

.benefits{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.benefit{

    display:flex;

    align-items:flex-start;

    gap:22px;

    padding-bottom:28px;

    border-bottom:

        1px
        solid
        rgba(0,0,0,.06);

}

.benefit:last-child{

    border-bottom:none;

}

.benefit-icon{

    width:64px;

    height:64px;

    border-radius:50%;

    background:#FFF7E6;

    color:var(--go-gold);

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    font-size:28px;

    font-weight:700;

}

.benefit h3{

    color:var(--go-navy);

    font-size:22px;

    margin-bottom:8px;

}

.benefit p{

    color:var(--go-text-light);

    font-size:16px;

    line-height:1.7;

}



/* ==========================================================
   BOTTOM CTA
========================================================== */

.bottom-cta{

    margin:

        80px
        auto;

    padding:

        40px
        50px;

    background:#fff;

    border-radius:20px;

    border:

        2px
        solid
        rgba(200,155,60,.25);

    box-shadow:var(--shadow);

}

.bottom-cta h2{

    color:var(--go-navy);

    font-family:

        "Cormorant Garamond",
        serif;

    font-size:46px;

    line-height:1;

    margin-bottom:12px;

}

.bottom-cta h3{

    color:var(--go-gold);

    font-family:

        "Cormorant Garamond",
        serif;

    font-size:34px;

    font-weight:500;

    margin-bottom:20px;

}

.bottom-cta p{

    color:var(--go-text-light);

    font-size:18px;

    max-width:760px;

}



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

.site-footer{

    margin-top:80px;

    padding:

        45px
        0;

    border-top:

        1px
        solid
        rgba(0,0,0,.08);

    background:#fff;

}

.site-footer .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.site-footer p{

    color:#777;

    font-size:14px;

}



/* ==========================================================
   UTILITIES
========================================================== */

.text-center{

    text-align:center;

}

.mt-20{

    margin-top:20px;

}

.mt-40{

    margin-top:40px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-40{

    margin-bottom:40px;

}

.hidden{

    display:none;

}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1200px){

    .hero-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .hero-right{

        position:relative;

        top:0;

    }

}



@media (max-width:900px){

    .site-header nav{

        display:none;

    }

    .hero-left{

        padding:40px;

    }

    .hero-left h1{

        font-size:58px;

    }

    .hero-left h2{

        font-size:32px;

    }

    .bottom-cta{

        padding:35px;

    }

}



@media (max-width:768px){

    .form-row{

        grid-template-columns:1fr;

    }

    .hero-left{

        padding:32px;

    }

    .hero-left h1{

        font-size:48px;

    }

    .hero-left h2{

        font-size:28px;

    }

    .bottom-cta h2{

        font-size:38px;

    }

    .bottom-cta h3{

        font-size:30px;

    }

    .site-footer .container{

        flex-direction:column;

        text-align:center;

    }

}



@media (max-width:576px){

    .beta-hero{

        padding:

            45px
            0
            70px;

    }

    .hero-left{

        padding:26px;

        border-radius:18px;

    }

    .hero-left h1{

        font-size:42px;

    }

    .hero-left h2{

        font-size:24px;

    }

    .hero-left p{

        font-size:16px;

    }

    .progress-card{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

    .progress-divider{

        display:none;

    }

    .benefit{

        flex-direction:column;

    }

    .benefit-icon{

        margin-bottom:10px;

    }

    .bottom-cta{

        padding:26px;

    }

    .bottom-cta h2{

        font-size:32px;

    }

    .bottom-cta h3{

        font-size:26px;

    }

}

/* ==========================================================
   GÖ.AI
   Beta Portal CSS v2.1

   Part 4 of 4

   Thank You Page
   Queue Status
   Magic GÖ.ID
   Referral Program
   Timeline
   Support
========================================================== */



/* ==========================================================
   THANK YOU HERO
========================================================== */

.thankyou-hero{

    background:#fff;

    padding:60px;

    border-radius:22px;

    box-shadow:var(--shadow);

    text-align:center;

    margin-bottom:40px;

}

.success-icon{

    width:90px;

    height:90px;

    margin:0 auto 24px;

    border-radius:50%;

    background:#EEF9F1;

    color:var(--go-success);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    font-weight:700;

}

.thankyou-hero h1{

    font-family:

        "Cormorant Garamond",
        serif;

    color:var(--go-navy);

    font-size:64px;

    line-height:1;

    margin-bottom:18px;

}

.thankyou-hero .hero-text{

    max-width:760px;

    margin:0 auto;

    color:var(--go-text-light);

    font-size:20px;

}



/* ==========================================================
   STATUS CARD
========================================================== */

.status-card{

    background:#fff;

    border-radius:20px;

    box-shadow:var(--shadow);

    padding:40px;

    margin-bottom:32px;

}

.status-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

}

.status-item h4{

    color:var(--go-gold);

    text-transform:uppercase;

    letter-spacing:.12em;

    font-size:13px;

    margin-bottom:10px;

}

.status-item h2{

    color:var(--go-navy);

    font-size:42px;

    font-weight:700;

}



/* ==========================================================
   CARD LAYOUT
========================================================== */

.info-card{

    background:#fff;

    border-radius:20px;

    box-shadow:var(--shadow);

    padding:36px;

    margin-bottom:32px;

}

.card-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:20px;

}

.card-icon{

    width:56px;

    height:56px;

    border-radius:50%;

    background:#FFF7E6;

    color:var(--go-gold);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    font-weight:700;

}

.card-header h3{

    color:var(--go-navy);

    font-size:30px;

}



/* ==========================================================
   MAGIC GÖ.ID
========================================================== */

.magic-id{

    margin:26px 0;

    padding:20px;

    border-radius:14px;

    background:#F8F9FC;

    border:2px dashed rgba(8,27,75,.15);

    text-align:center;

    font-size:30px;

    font-weight:700;

    letter-spacing:.08em;

    color:var(--go-navy);

}

.copy-button{

    margin-top:18px;

    padding:

        14px
        24px;

    border:none;

    border-radius:12px;

    background:var(--go-navy);

    color:#fff;

    cursor:pointer;

    font-weight:600;

    transition:var(--transition);

}

.copy-button:hover{

    background:var(--go-gold);

}

.feature-list{

    margin-top:30px;

    list-style:none;

}

.feature-list li{

    padding:10px 0;

    color:var(--go-text-light);

}



/* ==========================================================
   REFERRAL
========================================================== */

.referral-code{

    margin:26px 0;

    padding:18px;

    border-radius:14px;

    background:#FFFDF7;

    border:2px solid rgba(200,155,60,.20);

    text-align:center;

    color:var(--go-gold);

    font-size:30px;

    font-weight:700;

    letter-spacing:.08em;

}



/* ==========================================================
   TIMELINE
========================================================== */

.timeline{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:24px;

}

.timeline-step{

    display:flex;

    align-items:center;

    gap:18px;

    padding:16px 0;

    border-bottom:1px solid rgba(0,0,0,.06);

}

.timeline-step:last-child{

    border-bottom:none;

}

.timeline-check{

    width:36px;

    height:36px;

    border-radius:50%;

    background:#EEF9F1;

    color:var(--go-success);

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

}



/* ==========================================================
   SUPPORT
========================================================== */

.support-card{

    background:#fff;

    border-radius:20px;

    box-shadow:var(--shadow);

    padding:36px;

    text-align:center;

}

.support-card strong{

    color:var(--go-navy);

}



/* ==========================================================
   THANK YOU RESPONSIVE
========================================================== */

@media (max-width:768px){

    .status-grid{

        grid-template-columns:1fr;

    }

    .thankyou-hero{

        padding:40px 30px;

    }

    .thankyou-hero h1{

        font-size:46px;

    }

    .status-item h2{

        font-size:34px;

    }

    .magic-id,

    .referral-code{

        font-size:22px;

    }

}
/* ==========================================================
   PART 5 — STATUS DASHBOARD (v2.2)
========================================================== */



/* ==========================================================
   CARD SUBTITLE
========================================================== */

.card-subtitle{

    margin-top:6px;

    color:rgba(255,255,255,.70);

    font-size:.95rem;

    font-weight:500;

}

/* ==========================================================
   END OF FILE

   GÖ.AI Beta Portal CSS v2.2
========================================================== */