@font-face {
	font-family: 'Header';
	src: url('fonts/Gilroy-SemiBold.ttf')format('truetype');
}
@font-face {
	font-family: 'Tagline';
	src: url('fonts/fractul-semibold.ttf')format('truetype');
}

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

:root {

    --blue: #0754a5;
    --blue-dark: #032f68;
    --blue-deep: #021f47;

    --yellow: #ffc928;
    --yellow-light: #ffd94f;

    --white: #ffffff;

    --bg: #f3f7fc;
    --card: #ffffff;

    --text: #10243d;
    --muted: #61738b;

    --border: #d9e2ef;

    --input: #f7f9fc;

    --shadow:
        0 25px 70px rgba(0, 34, 75, 0.16);
}


/* =========================================
   DARK THEME
========================================= */

body.dark {

    --bg: #06152b;
    --card: #0b2342;

    --text: #f3f7ff;
    --muted: #aabbd0;

    --border: #234467;

    --input: #071a31;

    --shadow:
        0 25px 70px rgba(0, 0, 0, 0.35);
}


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

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;
}


html {

    scroll-behavior: smooth;
}


body {

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--bg);

    color: var(--text);

    transition:
        background 0.3s ease,
        color 0.3s ease;
}


/* =========================================
   THEME TOGGLE
========================================= */

.theme-toggle {

    position: fixed;

    top: 20px;

    right: 22px;

    width: 44px;

    height: 44px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,0.25);

    background: rgba(0,0,0,0.25);

    backdrop-filter: blur(10px);

    color: white;

    font-size: 20px;

    cursor: pointer;

    z-index: 100;

}


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

.hero {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 80% 30%,
            rgba(26, 112, 205, 0.5),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            #063b78,
            #052f65 55%,
            #021f47
        );

    color: white;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 80px 20px;
}


/* subtle technical pattern */

.hero-pattern {

    position: absolute;

    inset: 0;

    opacity: 0.12;

    background-image:

        linear-gradient(
            30deg,
            transparent 48%,
            white 49%,
            transparent 50%
        ),

        linear-gradient(
            -30deg,
            transparent 48%,
            white 49%,
            transparent 50%
        );

    background-size: 40px 40px;

    pointer-events: none;
}


.hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 900px;
}


/* =========================================
   EVENT LABEL
========================================= */

.event-label {

    display: inline-block;

    padding: 7px 18px;

    border: 1px solid
        rgba(255,255,255,0.35);

    border-radius: 30px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 25px;

    color: var(--yellow);
}


/* =========================================
   TITLE
========================================= */

.hero h1 {

    font-size: clamp(
        64px,
        10vw,
        125px
    );
	
	font-family: 'Header', sans-serif;

    line-height: 0.88;

    letter-spacing: 0px;

    font-weight: 950;

}


.hero h1 span {

    color: var(--yellow);

    display: block;
}


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

.hero-tagline {

    display: inline-block;

    margin-top: 25px;

    padding: 10px 25px;

    background:
        rgba(0, 82, 170, 0.75);

    border-left:
        5px solid var(--yellow);
		
	font-family: 'Tagline', sans-serif;

    font-size: clamp(
        18px,
        3vw,
        28px
    );

    font-weight: 600;
}	

/* =========================================
   EVENT INFORMATION
========================================= */

.event-info {

    margin: 35px auto;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 35px;
}


.info-item {

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.info-item strong {

    color: var(--yellow);

    font-size: 18px;
}


.info-item span {

    color: #d8e6f6;

    font-size: 14px;

    font-weight: 500;
}


.info-divider {

    width: 1px;

    height: 45px;

    background:
        rgba(255,255,255,0.3);
}


/* =========================================
   SPEAKER
========================================= */

.speaker {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

    margin: 35px auto;

    text-align: left;

    max-width: 560px;
}


.speaker-photo {

    width: 115px;

    height: 115px;

    border: 3px solid var(--yellow);

    padding: 5px;

    flex-shrink: 0;
}


.speaker-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: grayscale(100%);
}


.speaker-details h2 {

    margin-top: 5px;

    font-size: 24px;

    font-weight: 750;
}


.speaker-details p {

    font-size: 13px;

    color: #d2dfed;

    line-height: 1.45;
}


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

.hero-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    min-width: 240px;

    padding: 16px 28px;

    background: var(--yellow);

    color: #062f63;

    text-decoration: none;

    font-size: 15px;

    font-weight: 900;

    letter-spacing: 1px;

    border-radius: 4px;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.2);

    transition: 0.25s;
}


.hero-button:hover {

    transform: translateY(-3px);

    background: var(--yellow-light);

}


.hero-button span {

    font-size: 20px;
}


.scroll-text {

    margin-top: 18px;

    color: #a9c3df;

    font-size: 11px;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* =========================================
   REGISTRATION SECTION
========================================= */

.registration-section {

    padding: 100px 20px;

    background: var(--bg);
}


.registration-container {

    max-width: 650px;

    margin: auto;

    background: var(--card);

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

    border-radius: 20px;

    padding: 45px;

    box-shadow: var(--shadow);
}


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

.registration-heading {

    text-align: center;

    margin-bottom: 35px;
}


.registration-heading > span {

    color: var(--blue);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;
}


.registration-heading h2 {

    margin-top: 10px;

    font-size: 28px;

    color: var(--text);
}


.registration-heading h2 strong {

    color: var(--blue);
}


.registration-heading p {

    margin-top: 6px;

    color: var(--muted);

    font-size: 14px;
}


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

.form-group {

    margin-bottom: 21px;
}


.form-group > label {

    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 700;
}


input,
select {

    width: 100%;

    height: 52px;

    padding: 0 15px;

    border-radius: 10px;

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

    background: var(--input);

    color: var(--text);

    font-size: 14px;

    outline: none;

    transition: 0.2s;
}


input:focus,
select:focus {

    border-color: var(--blue);

    box-shadow:
        0 0 0 3px
        rgba(7,84,165,0.12);
}


.radio-container {

    display: flex;

    gap: 12px;
}


.radio-option {

    flex: 1;

    height: 52px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

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

    border-radius: 10px;

    cursor: pointer;

    background: var(--input);
}


.radio-option input {

    width: auto;

    height: auto;

    accent-color: var(--blue);
}


.form-group small {

    display: block;

    margin-top: 6px;

    color: var(--muted);

    font-size: 11px;
}


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

.submit-button {

    width: 100%;

    height: 55px;

    border: none;

    border-radius: 5px;

    background: var(--blue);

    color: white;

    font-size: 15px;

    font-weight: 900;

    letter-spacing: 1px;

    cursor: pointer;

    transition: 0.2s;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;
}


.submit-button:hover {

    background: var(--blue-dark);

    transform: translateY(-1px);
}


.submit-button:disabled {

    opacity: 0.65;

    cursor: not-allowed;

    transform: none;
}


/* =========================================
   LOADER
========================================= */

.loader {

    width: 18px;

    height: 18px;

    border: 2px solid
        rgba(255,255,255,0.4);

    border-top-color: white;

    border-radius: 50%;

    animation: spin 0.7s linear infinite;
}


.hidden {

    display: none;
}


@keyframes spin {

    to {
        transform: rotate(360deg);
    }
}


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

.status-message {

    text-align: center;

    min-height: 20px;

    margin-top: 15px;

    font-size: 13px;
}


.status-message.error {

    color: #e5484d;
}


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

footer {

    background: #021f47;

    color: #a9c3df;

    padding: 30px 20px;

    text-align: center;

    font-size: 11px;
}


footer strong {

    display: block;

    color: white;

    margin-bottom: 5px;
}


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

@media (max-width: 600px) {

    .hero {

        min-height: 100svh;

        padding:
            80px 18px
            55px;
    }


    .hero h1 {

        font-size: 64px;

        letter-spacing: 0px;
    }


    .hero-tagline {

        font-size: 16px;

        padding:
            9px 16px;
    }


    .event-info {

        gap: 18px;

        margin: 28px auto;
    }


    .info-item strong {

        font-size: 14px;
    }


    .info-item span {

        font-size: 12px;
    }


    .speaker {

        gap: 14px;

        text-align: left;
    }


    .speaker-photo {

        width: 85px;

        height: 85px;
    }


    .speaker-details h2 {

        font-size: 19px;
    }


    .speaker-details p {

        font-size: 11px;
    }


    .registration-section {

        padding:
            60px 14px;
    }


    .registration-container {

        padding: 30px 20px;

        border-radius: 16px;
    }


    .registration-heading h2 {

        font-size: 24px;
    }


    .radio-container {

        gap: 8px;
    }


    .theme-toggle {

        top: 14px;

        right: 14px;
    }

}

/* =========================================
   FORM SUBMIT PROTECTION
========================================= */

#registrationForm.submitting input,
#registrationForm.submitting select,
#registrationForm.submitting button,
#registrationForm.submitting .radio-option {
    cursor: not-allowed;
}


/* Prevent accidental interaction
   while registration is processing */

#registrationForm.submitting {
    pointer-events: none;
}